/* ── CALCUS.ONLINE — GLOBAL STYLESHEET ─────────────── */

/* ── TOKENS ─────────────────────────────────────────── */
:root {
  --bg:        #F8FAFC;
  --surface:   #FFFFFF;
  --border:    #E2E8F0;
  --text:      #0F172A;
  --muted:     #64748B;
  --accent:    #2563EB;
  --accent-lt: #EFF6FF;
  --accent-hv: #1D4ED8;
  --cat-finance:  #0EA5E9;
  --cat-health:   #10B981;
  --cat-text:     #8B5CF6;
  --cat-dev:      #F59E0B;
  --cat-unit:     #EC4899;
  --cat-image:    #06B6D4;
  --cat-pdf:      #EF4444;
  --cat-utility:  #6366F1;
  --radius:   10px;
  --shadow:   0 1px 3px rgba(0,0,0,.07);
  --shadow-hv:0 4px 16px rgba(37,99,235,.13);
  --font-head: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* ── RESET ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{max-width:100%;display:block}

/* ── HEADER ──────────────────────────────────────────── */
.site-header{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:200}
.header-inner{max-width:1200px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:16px}
.logo{font-family:var(--font-head);font-size:22px;font-weight:700;color:var(--accent);letter-spacing:-0.5px;flex-shrink:0;text-decoration:none;line-height:1}
.logo span{color:var(--text)}
.header-search{flex:1;min-width:0;max-width:480px;position:relative}
.header-search input{width:100%;padding:9px 16px 9px 40px;border:1.5px solid var(--border);border-radius:10px;font-family:var(--font-body);font-size:14px;background:var(--bg);color:var(--text);transition:border-color .2s,box-shadow .2s;outline:none}
.header-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.header-search input::placeholder{color:var(--muted)}
.header-search .search-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
/* Header right group */
.header-right{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}

.header-right{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}

/* Hamburger */


/* Donate button */
.btn-donate{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;background:linear-gradient(135deg,#F59E0B,#EF4444);color:#fff;border:none;border-radius:10px;font-family:var(--font-body);font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;flex-shrink:0;transition:opacity .15s;white-space:nowrap;box-shadow:0 2px 8px rgba(239,68,68,.25)}
.btn-donate:hover{opacity:.9}


/* ── CURRENCY SWITCHER ──────────────────────────────── */
.currency-wrap{position:relative;flex-shrink:0}
.currency-btn{display:flex;align-items:center;gap:5px;padding:8px 12px;border:1.5px solid var(--border);border-radius:10px;background:var(--surface);cursor:pointer;font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--text);transition:all .15s;white-space:nowrap;line-height:1}
.currency-btn:hover{border-color:var(--accent);color:var(--accent)}
.currency-btn svg{color:var(--muted);flex-shrink:0}
.currency-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.12);z-index:400;min-width:240px;max-height:320px;overflow-y:auto;display:none}
.currency-menu.open{display:block}
.currency-option{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .1s;font-size:13px}
.currency-option:hover{background:var(--bg)}
.currency-option.active{background:var(--accent-lt);color:var(--accent)}
.currency-option:first-child{border-radius:10px 10px 0 0}
.currency-option:last-child{border-radius:0 0 10px 10px}
.curr-flag{font-size:16px;flex-shrink:0}
.curr-info strong{margin-right:4px}

/* ── LANGUAGE SWITCHER ───────────────────────────────── */
.lang-wrap{position:relative;flex-shrink:0}
.lang-btn{display:flex;align-items:center;gap:5px;padding:8px 12px;border:1.5px solid var(--border);border-radius:10px;background:var(--surface);cursor:pointer;font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--text);transition:all .15s;white-space:nowrap;line-height:1}
.lang-btn:hover{border-color:var(--accent);color:var(--accent)}
.lang-btn svg{color:var(--muted);flex-shrink:0}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.12);z-index:400;min-width:220px;max-height:320px;overflow-y:auto;display:none}
.lang-menu.open{display:block}
.lang-option{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .1s;font-size:13px}
.lang-option:hover{background:var(--bg)}
.lang-option.active{background:var(--accent-lt);color:var(--accent)}
.lang-option:first-child{border-radius:10px 10px 0 0}
.lang-option:last-child{border-radius:0 0 10px 10px}

/* ── COOKIE BANNER (improved) ───────────────────────── */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:#0F172A;border-top:2px solid #2563EB;padding:16px 24px;z-index:9999;display:flex;align-items:center;gap:16px;flex-wrap:wrap;transform:translateY(110%);transition:transform .4s cubic-bezier(.4,0,.2,1);contain:layout style}
.cookie-banner.show{transform:translateY(0)}
.cookie-icon{font-size:28px;flex-shrink:0}
.cookie-text{flex:1;min-width:200px}
.cookie-title{font-family:var(--font-head);font-size:15px;font-weight:700;color:#fff;margin-bottom:4px}
.cookie-text p{font-size:12px;color:#94A3B8;line-height:1.5;margin:0}
.cookie-text p a{color:#60A5FA;text-decoration:underline}
.cookie-text p strong{color:#E2E8F0}
.cookie-actions{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap}
.cookie-accept{padding:9px 18px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s;white-space:nowrap}
.cookie-accept:hover{background:var(--accent-hv)}
.cookie-decline{padding:9px 16px;background:transparent;color:#94A3B8;border:1px solid #334155;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap}
.cookie-decline:hover{border-color:#64748B;color:#fff}
.cookie-manage{padding:9px 16px;background:transparent;color:#60A5FA;border:1px solid #1E40AF;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap}
.cookie-manage:hover{background:#1E3A5F}

/* ── BREADCRUMB ──────────────────────────────────────── */
.breadcrumb{background:var(--surface);border-bottom:1px solid var(--border);padding:10px 20px}
.breadcrumb-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.breadcrumb a{color:var(--muted);transition:color .15s}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span{color:var(--text);font-weight:500}
.breadcrumb-sep{color:var(--border)}

/* ── PAGE HERO ─────────────────────────────────────────*/
.page-hero{background:linear-gradient(135deg,#0F172A 0%,#1E3A5F 100%);color:#fff;padding:48px 20px 40px}
.page-hero-inner{max-width:1200px;margin:0 auto}
.page-hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:100px;padding:4px 14px;font-size:12px;font-weight:500;color:#93C5FD;margin-bottom:14px}
.page-hero h1{font-family:var(--font-head);font-size:clamp(24px,4vw,38px);font-weight:700;line-height:1.2;margin-bottom:10px;letter-spacing:-0.5px}
.page-hero p{font-size:15px;color:#94A3B8;max-width:560px}

/* ── MAIN LAYOUT ──────────────────────────────────────
   Single-column layout (no side-by-side sidebar). Related
   tools / quick tips / reference cards render as a full-
   width row below the main tool content, in source order. */
.page-main{max-width:1200px;margin:0 auto;padding:40px 20px 60px}
.page-grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:start}

/* ── CARD ──────────────────────────────────────────── */
.card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:28px}
.card-title{font-family:var(--font-head);font-size:17px;font-weight:700;margin-bottom:20px;color:var(--text)}

/* ── FORM ELEMENTS ─────────────────────────────────── */
.form-group{margin-bottom:18px}
.form-label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px}
.form-hint{font-size:12px;color:var(--muted);margin-bottom:6px;display:block}
.form-input{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:8px;font-family:var(--font-body);font-size:15px;color:var(--text);background:var(--surface);transition:border-color .2s,box-shadow .2s;outline:none}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.form-select{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:8px;font-family:var(--font-body);font-size:15px;color:var(--text);background:var(--surface);cursor:pointer;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.form-select:focus{border-color:var(--accent)}
.input-prefix-wrap{position:relative}
.input-prefix{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:15px;pointer-events:none}
.input-prefix-wrap .form-input{padding-left:28px}
.input-suffix{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;pointer-events:none}
.input-suffix-wrap .form-input{padding-right:44px}
input[type="range"]{width:100%;accent-color:var(--accent);cursor:pointer;height:4px}

/* ── BUTTON ─────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 24px;border-radius:8px;font-family:var(--font-body);font-size:15px;font-weight:600;cursor:pointer;border:none;transition:all .15s}
.btn-primary{background:var(--accent);color:#fff;width:100%}
.btn-primary:hover{background:var(--accent-hv)}
.btn-secondary{background:var(--bg);color:var(--text);border:1.5px solid var(--border)}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{padding:7px 16px;font-size:13px}

/* ── RESULT BOX ─────────────────────────────────────── */
.result-box{background:linear-gradient(135deg,#EFF6FF,#F0FDF4);border:1.5px solid #BFDBFE;border-radius:var(--radius);padding:24px;text-align:center;margin-bottom:20px}
.result-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:6px}
.result-value{font-family:var(--font-head);font-size:36px;font-weight:700;color:var(--accent);line-height:1;margin-bottom:4px}
.result-sub{font-size:13px;color:var(--muted)}
.result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px}
.result-item{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:14px;text-align:center}
.result-item-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px}
.result-item-value{font-family:var(--font-head);font-size:20px;font-weight:700;color:var(--text)}

/* ── TABS ────────────────────────────────────────────── */
.tabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:24px}
.tab-btn{padding:10px 18px;font-size:14px;font-weight:500;color:var(--muted);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;transition:color .15s,border-color .15s}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}

/* ── TABLE ───────────────────────────────────────────── */
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th{background:var(--bg);padding:10px 14px;text-align:left;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:1px solid var(--border)}
.data-table td{padding:10px 14px;border-bottom:1px solid var(--border);color:var(--text)}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:var(--bg)}
.table-wrap{overflow-x:auto;border-radius:8px;border:1px solid var(--border)}

/* ── BELOW-CONTENT TOOL CARDS (related tools / quick tips / reference) ───
   Renders after the main tool content, full width, cards side by side on
   wider screens and stacked on mobile. "Quick Tips" stays visually last
   because it is already the last card in each page's source order. */
.sidebar{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;order:99;margin-top:12px;padding-top:32px;border-top:1.5px solid var(--border)}
.related-list{display:flex;flex-direction:column;gap:8px}
.related-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;border:1px solid var(--border);transition:border-color .15s,background .15s;font-size:13px;font-weight:500;color:var(--text)}
.related-item:hover{border-color:var(--accent);background:var(--accent-lt);color:var(--accent)}
.related-item-icon{font-size:16px}

/* ── SEO CONTENT ────────────────────────────────────── */
.seo-content{margin-top:48px}
.seo-content h2{font-family:var(--font-head);font-size:22px;font-weight:700;margin-bottom:12px;margin-top:32px;color:var(--text)}
.seo-content h2:first-child{margin-top:0}
.seo-content h3{font-family:var(--font-head);font-size:17px;font-weight:600;margin-bottom:8px;margin-top:24px;color:var(--text)}
.seo-content p{color:#334155;margin-bottom:14px;font-size:15px;line-height:1.75}
.seo-content ul{list-style:disc;padding-left:22px;margin-bottom:14px;color:#334155}
.seo-content ul li{margin-bottom:6px;font-size:15px;line-height:1.6}

/* ── FAQ ─────────────────────────────────────────────── */
.faq-list{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.faq-item{border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden}
.faq-q{width:100%;text-align:left;padding:16px 20px;background:var(--surface);border:none;font-family:var(--font-body);font-size:15px;font-weight:600;color:var(--text);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-q:hover{background:var(--bg)}
.faq-q svg{flex-shrink:0;transition:transform .2s}
.faq-item.open .faq-q svg{transform:rotate(180deg)}
.faq-a{display:none;padding:0 20px 16px;font-size:14px;color:#475569;line-height:1.7;background:var(--surface)}
.faq-item.open .faq-a{display:block}

/* ── ALERT ───────────────────────────────────────────── */
.alert{padding:14px 16px;border-radius:8px;font-size:14px;display:flex;gap:10px;align-items:flex-start;margin-bottom:16px}
.alert-info{background:#EFF6FF;border:1px solid #BFDBFE;color:#1E40AF}
.alert-warn{background:#FFFBEB;border:1px solid #FDE68A;color:#92400E}
.alert-success{background:#ECFDF5;border:1px solid #6EE7B7;color:#065F46}

/* ── CHART BAR ──────────────────────────────────────── */
.chart-bar-wrap{margin-bottom:10px}
.chart-bar-label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:4px}
.chart-bar-track{height:10px;background:var(--bg);border-radius:100px;overflow:hidden}
.chart-bar-fill{height:100%;border-radius:100px;transition:width .5s ease}

/* ── FOOTER ──────────────────────────────────────────── */
.site-footer{background:#0F172A;color:#94A3B8;padding:52px 20px 28px}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:1.8fr repeat(4,1fr);gap:32px;margin-bottom:40px}
.footer-brand .logo{display:block;margin-bottom:10px}
.footer-brand .logo span{color:#64748B}
.footer-brand p{font-size:13px;line-height:1.7;color:#64748B}
.footer-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:100px;padding:3px 12px;font-size:11px;color:#64748B;margin-top:12px}
.footer-col h4{font-family:var(--font-head);font-size:11px;font-weight:700;color:#E2E8F0;margin-bottom:14px;text-transform:uppercase;letter-spacing:.8px}
.footer-col ul{display:flex;flex-direction:column;gap:8px}
.footer-col ul li a{font-size:13px;color:#64748B;transition:color .15s}
.footer-col ul li a:hover{color:#fff}
.footer-divider{border:none;border-top:1px solid #1E293B;margin-bottom:20px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-size:12px;color:#475569}
.footer-links{display:flex;gap:16px;flex-wrap:wrap}
.footer-links a{color:#475569;transition:color .15s}
.footer-links a:hover{color:#fff}

/* ── UTILITY ─────────────────────────────────────────── */
.text-center{text-align:center}
.text-muted{color:var(--muted)}
.mt-4{margin-top:16px}
.mt-6{margin-top:24px}
.mb-4{margin-bottom:16px}
.divider{border:none;border-top:1px solid var(--border);margin:32px 0}

/* ── LEGAL PAGES ────────────────────────────────────── */
.legal-body{max-width:760px}
.legal-body h2{font-family:var(--font-head);font-size:19px;font-weight:700;margin:32px 0 10px;color:var(--text)}
.legal-body h2:first-child{margin-top:0}
.legal-body p{font-size:15px;line-height:1.75;color:#334155;margin-bottom:14px}
.legal-body ul{list-style:disc;padding-left:22px;margin-bottom:14px}
.legal-body ul li{font-size:15px;line-height:1.7;color:#334155;margin-bottom:6px}
.last-updated{display:inline-block;background:var(--accent-lt);color:var(--accent);font-size:12px;font-weight:600;padding:4px 12px;border-radius:100px;margin-bottom:28px}

/* ── RESPONSIVE ─────────────────────────────────────── */
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.header-search{max-width:none;flex:1}.result-grid{grid-template-columns:1fr 1fr}.footer-top{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:640px){
  .header-inner{flex-wrap:wrap;height:auto;padding:10px 16px;gap:8px}
  .logo{order:1;font-size:20px}
  .header-right{order:2;gap:8px;margin-left:auto}
  .header-search{order:3;flex-basis:100%;max-width:none}
  .lang-wrap{order:2}
  .currency-wrap{order:2}
  .btn-donate{order:2}
}

@media(max-width:480px){#currCode{display:none}#langCode{display:none}.currency-btn,.lang-btn{padding:7px 9px;font-size:12px}.btn-donate{padding:8px 12px;font-size:12px}.cookie-actions{width:100%}}
@media(max-width:480px){.result-grid{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr}.sidebar{grid-template-columns:1fr}}

/* ── GOOGLE TRANSLATE WIDGET (hide default chrome, keep our own UI) ── */
.goog-te-banner-frame.skiptranslate,#goog-gt-tt,.goog-te-balloon-frame{display:none!important}
body{top:0!important}
.goog-text-highlight{background:none!important;box-shadow:none!important}
#google_translate_element{position:absolute;left:-9999px;top:-9999px;height:0;width:0;overflow:hidden}

/* Prevent CLS from font swap */
@font-face {
  font-family: 'Inter';
  src: local('system-ui');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
/* Ensure images don't cause CLS */
img { max-width: 100%; height: auto; }
/* Prevent layout shift from form elements */
select, input, textarea { font-family: inherit; }

/* ── SEO & PERFORMANCE ADDITIONS ───────────────────────────────── */

/* Improve Core Web Vitals - reduce layout shift */
img { max-width: 100%; height: auto; display: block; }
canvas { display: block; }

/* Ensure tool cards have defined height to reduce CLS */
.tool-card { contain: layout style; }

/* Reading progress bar for long pages */
#reading-progress {
  position: fixed; top: 0; left: 0; width: 0%;
  height: 3px; background: var(--accent); z-index: 9999;
  transition: width 0.1s linear; border-radius: 0 2px 2px 0;
}

/* "Also use" link hover */
.also-use-links a:hover { text-decoration: underline; }

/* Print styles */
@media print {
  #site-header, #site-footer, .sidebar, .breadcrumb, .tbtn, button { display: none !important; }
  .page-main { max-width: 100%; padding: 0; }
  .card { border: 1px solid #ccc; break-inside: avoid; }
  body { font-size: 12pt; color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* Skip to content for accessibility/SEO */
.skip-link {
  position: absolute; top: -40px; left: 0;
  background: var(--accent); color: #fff;
  padding: 8px 16px; z-index: 1000; border-radius: 0 0 8px 0;
  font-weight: 700; transition: top .2s;
}
.skip-link:focus { top: 0; }

/* Ensure FAQ answers have proper spacing for readability */
.faq-a { line-height: 1.7; }

/* Table styles for SEO content tables */
.seo-content table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.seo-content th { background: var(--accent); color: #fff; padding: 8px 12px; }
.seo-content td { padding: 8px 12px; border-bottom: 1px solid var(--border); }