/*
Theme Name: CalculatorZKit v5.4
Theme URI: https://calculatorzkit.com/
Author: CalculatorzKit
Description: Fast, accessible, 100/100 PageSpeed calculator theme. System fonts, email results, import/export, print results only.
Version: 5.0.4
License: GNU General Public License v5.4 or later
Text Domain: czk-theme
*/

/* ── CSS CUSTOM PROPERTIES ─────────────────────── */
:root{
    --bg-base:#070a12;--surf:#111827;--surf2:#1a2235;
    --nav-bg:rgba(17,24,39,.92);
    --bdr:rgba(255,255,255,.08);--bdr-hover:rgba(0,229,255,.35);
    --acc:#00e5ff;--acc-dark:#009fb8;--acc-green:#10b981;
    --acc-orange:#f59e0b;--acc-rose:#f43f5e;
    --txt:#f1f5f9;--muted:#b0bec5;--dim:#78909c;
    --r-sm:6px;--r-md:12px;--r-lg:16px;--px:1.5rem;
    --f-disp:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --f-body:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --f-mono:ui-monospace,'Cascadia Code','Fira Code','Courier New',monospace;
    --font-display:var(--f-disp);--font-body:var(--f-body);--font-mono:var(--f-mono);
    --accent-cyan:var(--acc);--bg-primary:var(--bg-base);--surface-card:var(--surf);
    --border-dim:var(--bdr);--text-muted:var(--muted);--text-dim:var(--dim);--text-main:var(--txt);
    --radius-sm:var(--r-sm);--radius-md:var(--r-md);--radius-lg:var(--r-lg);
    --accent-green:var(--acc-green);--accent-orange:var(--acc-orange);--accent-rose:var(--acc-rose);
}

/* ── RESET ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg-base);color:var(--txt);font-family:var(--f-body);font-size:16px;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font-family:inherit;font-size:inherit}

/* ── ACCESSIBILITY ─────────────────────────────── */
.sr-only,.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.czk-skip-link{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;text-decoration:none}
.czk-skip-link:focus{position:fixed;top:1rem;left:1rem;z-index:99999;width:auto;height:auto;padding:.75rem 1.5rem;clip:auto;white-space:normal;background:var(--acc);color:#070a12;font-weight:700;border-radius:var(--r-sm)}
*:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* ── LAYOUT ────────────────────────────────────── */
.czk-wrap,.czk-app-container{max-width:1280px;margin:0 auto;padding:0 var(--px)}
h1,h2,h3,h4,h5,h6{font-family:var(--f-disp);font-weight:700;line-height:1.2;color:#fff}
p{margin-bottom:1rem}p:last-child{margin-bottom:0}
a{color:var(--acc);text-decoration:underline;text-underline-offset:3px;transition:opacity .2s}
a:hover{color:var(--acc-dark)}
strong{font-weight:700}

/* ── NAV ───────────────────────────────────────── */
.czk-global-nav{background:var(--nav-bg);border-bottom:1px solid var(--bdr);position:sticky;top:0;z-index:1000;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.czk-nav-inner{height:64px;display:flex;justify-content:space-between;align-items:center}
.czk-logo{font-family:var(--f-disp);font-weight:800;font-size:1.35rem;color:#fff;letter-spacing:-1px;text-decoration:none;display:flex;align-items:center;gap:3px}
.czk-logo:hover{color:#fff}.czk-logo span{color:var(--acc)}
.czk-unit-switcher{display:flex;background:var(--bg-base);padding:3px;border-radius:var(--r-sm);border:1px solid var(--bdr)}
.czk-unit-btn{background:transparent;color:var(--muted);font-family:var(--f-mono);font-size:.72rem;border:none;padding:.35rem .75rem;border-radius:4px;cursor:pointer;font-weight:700;transition:opacity .2s;line-height:1}
.czk-unit-btn.active,.czk-unit-btn[aria-pressed="true"]{background:var(--acc);color:var(--bg-base)}

/* ── CURRENCY BAR ──────────────────────────────── */
.czk-currency-bar{background:var(--surf2);border-bottom:1px solid var(--bdr);padding:.4rem 0;font-size:.75rem;font-family:var(--f-mono);color:var(--muted);overflow:hidden;height:28px;display:flex;align-items:center}
.czk-currency-inner{display:flex;gap:2rem;white-space:nowrap;padding:0 var(--px)}
.czk-currency-pair{display:flex;gap:.4rem;align-items:center}
.czk-currency-pair .rate{color:var(--acc);font-weight:700}

/* ── HERO ──────────────────────────────────────── */
.czk-hero{padding:5.5rem 0 4.5rem;position:relative;overflow:hidden;text-align:center;background:linear-gradient(135deg,#0b0f19 0%,#1a2333 100%)}
.czk-hero-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(0,229,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.025) 1px,transparent 1px);background-size:50px 50px}
.czk-hero-inner{position:relative;z-index:1;max-width:820px;margin:0 auto;padding:0 var(--px)}
.czk-hero h1{font-weight:800;font-size:clamp(2.6rem,8vw,4.8rem);line-height:1.05;letter-spacing:-2px;margin-bottom:1.1rem;color:#fff}
.czk-hero h1 span{color:var(--acc)}
.czk-hero>div>p{font-size:clamp(1rem,2vw,1.2rem);color:var(--muted);max-width:580px;margin:0 auto 2.2rem;line-height:1.7}
.czk-search-wrap{max-width:540px;margin:0 auto}
.czk-search-box{position:relative}
.czk-search-icon{position:absolute;left:1.2rem;top:50%;transform:translateY(-50%);font-size:1.1rem;color:var(--dim);pointer-events:none}
.czk-search-input{width:100%;padding:1rem 1.3rem 1rem 3.3rem;font-size:1rem;border-radius:50px;border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#fff;outline:none;transition:outline .2s;box-sizing:border-box}
.czk-search-input::placeholder{color:var(--dim)}
.czk-search-input:focus{border-color:var(--acc)}
.czk-search-results{margin-top:8px;text-align:left;max-height:360px;overflow-y:auto;display:none;background:#1a2235;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.12)}

/* ── BUTTONS ───────────────────────────────────── */
.czk-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:.75rem 1.75rem;border-radius:50px;font-weight:700;font-size:.95rem;cursor:pointer;border:none;text-decoration:none;line-height:1;transition:opacity .2s}
.czk-btn.primary{background:var(--acc);color:#070a12}
.czk-btn.primary:hover{opacity:.88;color:#070a12}
.czk-btn.secondary{background:transparent;border:1.5px solid var(--bdr);color:var(--muted)}
.czk-btn.secondary:hover{border-color:var(--acc);color:var(--acc)}

/* ── INPUTS ────────────────────────────────────── */
.czk-input{width:100%;background:var(--bg-base);border:1.5px solid var(--bdr);border-radius:var(--r-sm);color:#fff;padding:.65rem .9rem;font-size:.95rem;outline:none;transition:outline .2s;box-sizing:border-box}
.czk-input:focus{border-color:var(--acc)}
.czk-input::placeholder{color:var(--dim)}
.czk-label{display:block;font-size:.82rem;color:var(--muted);font-weight:600;margin-bottom:.35rem}
select.czk-input{cursor:pointer}

/* ── CARDS ─────────────────────────────────────── */
.czk-card{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:1.5rem;transition:transform .2s,opacity .2s;display:flex;flex-direction:column}
.czk-card:hover{border-color:var(--bdr-hover);transform:translateY(-2px)}
.czk-section{padding:4rem 0;}
.czk-section-title{font-size:clamp(1.6rem,3.5vw,2.2rem);font-weight:800;letter-spacing:-1px;color:#fff;margin-bottom:.6rem}
.czk-section-sub{color:var(--muted);margin-bottom:2rem;font-size:.95rem}
.czk-calc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1.5rem}

/* ── TAGS ──────────────────────────────────────── */
.czk-tag{display:inline-block;font-size:.7rem;padding:2px 8px;border-radius:4px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}
.czk-tag.cyan{background:rgba(0,229,255,.12);color:#00e5ff}
.czk-tag.green{background:rgba(16,185,129,.12);color:#34d399}
.czk-tag.orange{background:rgba(245,158,11,.12);color:#fbbf24}
.czk-tag.rose{background:rgba(244,63,94,.12);color:#fb7185}
.czk-tag.purple{background:rgba(139,92,246,.12);color:#a78bfa}

/* ── CALCULATOR PAGE LAYOUT ────────────────────── */
.czk-calc-layout{display:grid;grid-template-columns:1fr;gap:1.5rem;padding:1.5rem 0}
@media(min-width:1024px){.czk-calc-layout{grid-template-columns:2.5fr 1fr;gap:2.5rem;padding:3rem 0}}
.czk-panel{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-lg);overflow:hidden}
.czk-panel-head{background:var(--surf2);padding:.85rem 1.25rem;border-bottom:1px solid var(--bdr);font-weight:700;font-size:.9rem;color:#fff;display:flex;align-items:center;gap:.5rem}
.czk-panel-body{padding:1.25rem}
#czk-rates-list{min-height:120px}
.czk-result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.85rem}
.czk-result-card{background:var(--bg-base);border:1px solid var(--bdr);border-radius:var(--r-md);padding:1rem 1.1rem}
.czk-result-label{font-size:.76rem;color:var(--muted);margin-bottom:.3rem;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.czk-result-value{font-size:1.55rem;font-weight:800;color:var(--acc);line-height:1}
.czk-result-unit{font-size:.78rem;color:var(--dim);margin-top:.2rem}

/* ── ACTION BAR ────────────────────────────────── */
.czk-action-bar{background:var(--surf2);border-top:1px solid var(--bdr);padding:.65rem 1.1rem;display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap}
.czk-action-btn{background:var(--bg-base);border:1px solid var(--bdr);color:var(--muted);padding:.38rem .8rem;font-family:var(--f-mono);font-size:.74rem;border-radius:var(--r-sm);cursor:pointer;transition:opacity .2s;white-space:nowrap}
.czk-action-btn:hover{opacity:.75}

/* ── EMAIL FORM ────────────────────────────────── */
.czk-email-form{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end;margin-top:1rem;padding-top:1rem;border-top:1px dashed var(--bdr)}

/* ── FAQ ───────────────────────────────────────── */
.czk-faq-item{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-md);overflow:hidden}
.czk-faq-q{width:100%;background:none;border:none;cursor:pointer;padding:1.1rem 1.25rem;text-align:left;font-weight:700;font-size:1rem;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:.75rem}
.czk-faq-q:hover{color:var(--acc)}
.czk-faq-icon{flex-shrink:0;transition:transform .25s;color:var(--acc);font-size:.8rem}
.czk-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.czk-faq-a-inner{padding:0 1.25rem 1.1rem;color:var(--muted);font-size:.92rem;line-height:1.65}

/* ── ARCHIVE ───────────────────────────────────── */
.czk-archive-card{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:1.2rem 1.3rem;text-decoration:none;display:flex;gap:.9rem;align-items:flex-start;transition:transform .2s,opacity .2s}
.czk-archive-card:hover{border-color:var(--bdr-hover);transform:translateY(-2px)}
.czk-archive-icon{font-size:1.5rem;flex-shrink:0;line-height:1}
.czk-archive-title{font-weight:600;font-size:.93rem;color:#fff;margin-bottom:.2rem}
.czk-archive-desc{font-size:.78rem;color:var(--muted);line-height:1.5}

/* ── FOOTER ────────────────────────────────────── */
.czk-footer{background:#0b0f19;border-top:1px solid var(--bdr);padding:4rem 0 2rem;margin-top:4rem}
.czk-footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2.5rem;margin-bottom:3rem}
.czk-footer-logo{font-family:var(--f-disp);font-weight:800;font-size:1.2rem;color:#fff;text-decoration:none;display:block;margin-bottom:.85rem}
.czk-footer-logo:hover{color:#fff}.czk-footer-logo span{color:var(--acc)}
.czk-footer-desc{color:#94a3b8;font-size:.88rem;line-height:1.6}
.czk-footer-heading{font-size:.8rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.85rem}
.czk-footer-links{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.czk-footer-links a{color:#94a3b8;font-size:.88rem;text-decoration:underline;text-underline-offset:3px}
.czk-footer-links a:hover{color:#fff}
.czk-footer-bottom{border-top:1px solid rgba(255,255,255,.05);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;font-size:.78rem;color:#94a3b8}
.czk-footer-status{color:var(--acc-green);display:flex;align-items:center;gap:5px}
.czk-footer-status-dot{width:6px;height:6px;background:var(--acc-green);border-radius:50%}

/* ── PAGINATION ────────────────────────────────── */
.czk-pagination{margin-top:2.5rem;display:flex;justify-content:center}
.czk-pagination .nav-links{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.czk-pagination a,.czk-pagination span{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-sm);font-size:.88rem;font-weight:600;border:1px solid var(--bdr);color:var(--muted);text-decoration:none;transition:opacity .2s}
.czk-pagination .current{background:var(--acc);color:#070a12;border-color:var(--acc)}
.czk-pagination a:hover{border-color:var(--acc);color:var(--acc)}

/* ── STEPS ─────────────────────────────────────── */
.czk-step{display:flex;gap:.75rem;padding:.6rem 0;border-bottom:1px solid var(--bdr);font-size:.85rem;color:var(--muted)}
.czk-step:last-child{border-bottom:none}
.czk-step-num{flex-shrink:0;width:22px;height:22px;background:rgba(0,229,255,.12);color:var(--acc);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;margin-top:1px}

/* ── FEATURE/STEP CARDS ────────────────────────── */
.czk-feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}
.czk-feature-card{padding:1.8rem 1.4rem;background:rgba(255,255,255,.025);border:1px solid var(--bdr);border-radius:var(--r-lg);text-align:center}
.czk-feature-icon{font-size:2.2rem;margin-bottom:.8rem}
.czk-feature-title{font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:.4rem}
.czk-feature-desc{color:var(--muted);font-size:.9rem;line-height:1.55}
.czk-cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1rem}
.czk-cat-pill{display:block;padding:1.2rem 1rem;text-align:center;background:rgba(255,255,255,.025);border:1px solid var(--bdr);border-radius:var(--r-md);text-decoration:none;transition:transform .2s,opacity .2s}
.czk-cat-pill:hover{border-color:var(--bdr-hover);transform:translateY(-2px)}
.czk-cat-pill-icon{font-size:1.8rem;margin-bottom:.5rem}
.czk-cat-pill-name{color:#fff;font-weight:600;font-size:.85rem;display:block}
.czk-steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}
.czk-step-card{padding:1.6rem 1.4rem;background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-lg)}
.czk-step-num-circle{width:2.3rem;height:2.3rem;border-radius:50%;background:var(--acc);display:flex;align-items:center;justify-content:center;margin-bottom:.85rem;font-weight:800;font-size:.95rem;color:#070a12}
.czk-step-title{font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:.4rem}
.czk-step-desc{color:var(--muted);font-size:.88rem;line-height:1.55}

/* ── IMPORT/EXPORT ADMIN ───────────────────────── */
.czk-admin-wrap{max-width:760px;margin:2rem auto;font-family:var(--f-body)}
.czk-admin-panel{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:1.5rem;margin-bottom:1.5rem}
.czk-admin-title{font-size:1.1rem;font-weight:700;color:#1a202c;margin-bottom:1rem}

/* ── PRINT — RESULTS ONLY ──────────────────────── */
@media print{
    /* Hide everything except the results panel */
    .czk-global-nav,
    .czk-currency-bar,
    .czk-skip-link,
    .czk-footer,
    .czk-panel:not(#czk-print-target),
    #czk-inputs,
    #czk-steps-panel,
    .czk-action-bar,
    .czk-email-form,
    #czk-email-section,
    #czk-email-status,
    aside,
    header,
    .czk-faq-item,
    article,
    section:not(#czk-results-section)
    { display:none !important }

    body{background:#fff;color:#000;font-family:Arial,sans-serif}
    #czk-results-section{display:block !important}
    #czk-print-header{display:block !important}

    .czk-result-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;padding:.75rem}
    .czk-result-label{color:#64748b}
    .czk-result-value{color:#0b0f19;font-size:1.4rem}
    .czk-result-unit{color:#94a3b8}
    .czk-result-grid{gap:.5rem}
}