/*
   WUSHMAT FAG LTD
   Clearing & Forwarding Calculator
   External stylesheet
   Primary colours: Egyptian Blue, Red, White
*/

*{margin:0;padding:0;box-sizing:border-box}
        :root{
            --blue:#1034A6;
            --red:#B40023;
            --frost:rgba(11,36,166,0.45);
            --white:#fff;
            --bg:#F8F9FA;
            --muted:#666;
            --border:#E0E0E0;
        }
        html{scroll-behavior:smooth}
        body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:linear-gradient(135deg,#0c1220 0%,#1a2240 100%);color:#333;min-height:100vh}

        /* ── WRAPPER ── */
        .wrap{max-width:1080px;margin:-50px auto 60px;padding:0 16px;position:relative;z-index:2}
        .card{background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.2);overflow:hidden}

        /* ── TABS ── */
        .tabs{display:flex;border-bottom:2px solid var(--border);background:#fafbff}
        .tab-btn{flex:1;padding:16px 12px;border:none;background:none;cursor:pointer;font-weight:700;font-size:.9em;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;transition:all .25s;border-bottom:3px solid transparent;margin-bottom:-2px}
        .tab-btn:hover{color:var(--blue);background:rgba(16,52,166,.03)}
        .tab-btn.active{color:var(--blue);border-bottom-color:var(--blue)}
        .tab-icon{display:block;font-size:1.4em;margin-bottom:4px}

        /* ── GRID ── */
        .pane{display:none}
        .pane.active{display:grid;grid-template-columns:1fr 1fr}
        /* ── FORM SIDE ── */
        .form-side{padding:36px;display:flex;flex-direction:column;gap:18px;border-right:1px solid var(--border)}
        .field{display:flex;flex-direction:column;gap:7px}
        .field label{font-weight:700;font-size:.82em;color:var(--blue);text-transform:uppercase;letter-spacing:.5px}
        .field input,.field select,.field textarea{padding:10px 13px;border:2px solid var(--border);border-radius:8px;font-size:.97em;font-family:inherit;transition:border .2s,box-shadow .2s;background:#fff}
        .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(16,52,166,.08)}
        .field textarea{resize:vertical;min-height:64px}
        .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
        .pfx{position:relative}
        .pfx-label{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-weight:700;color:var(--red);font-size:.75em;letter-spacing:.5px;pointer-events:none}
        .pfx input{padding-left:44px}

        .notice{background:rgba(16,52,166,.07);border-left:3px solid var(--blue);padding:13px;border-radius:6px;font-size:.87em;color:var(--muted);line-height:1.5}
        .notice strong{color:var(--blue);display:block;margin-bottom:3px}
        .notice-red{background:rgba(180,0,35,.07);border-left-color:var(--red)}
        .notice-red strong{color:var(--red)}

        /* ── HS AUTOCOMPLETE ── */
        .hs-wrap{position:relative}
        .hs-list{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:8px;max-height:220px;overflow-y:auto;z-index:50;display:none;margin-top:4px;box-shadow:0 8px 24px rgba(0,0,0,.1)}
        .hs-list.open{display:block}
        .hs-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid #f0f0f0;font-size:.9em;transition:background .15s}
        .hs-item:hover{background:rgba(16,52,166,.06)}
        .hs-item:last-child{border-bottom:none}
        .hs-num{font-weight:700;color:var(--blue);margin-right:6px}
        .hs-desc{color:var(--muted);font-size:.9em}

        /* ── RESULT SIDE ── */
        .result-side{padding:36px;background:linear-gradient(135deg,#f5f7fd 0%,#eef2fb 100%);display:flex;flex-direction:column}
        .result-title{font-size:1.1em;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.5px;margin-bottom:20px}

        .empty-state{text-align:center;color:var(--muted);padding:40px 20px;margin:auto}
        .empty-icon{font-size:2.5em;opacity:.35;margin-bottom:10px}

        /* frost blocks */
        .fc{background:var(--frost);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-radius:10px;border:1px solid rgba(255,255,255,.18);padding:14px;margin-bottom:10px}
        .fc-title{font-size:.75em;font-weight:700;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}
        .fc-row{display:flex;justify-content:space-between;padding:5px 0;font-size:.9em;color:rgba(255,255,255,.9);border-bottom:1px solid rgba(255,255,255,.1)}
        .fc-row:last-child{border-bottom:none}
        .fc-row.cif-row{font-weight:700;font-size:1em;color:#fff}
        .fc-fee{color:#fff;font-weight:700}

        .total-box{background:var(--blue);border-radius:10px;padding:16px;margin-top:14px;margin-bottom:20px}
        .total-box .label{color:rgba(255,255,255,.8);font-size:.82em;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
        .total-box .amount{color:var(--red);font-size:2em;font-weight:700}
        .total-box .sub{font-size:.82em;color:rgba(255,255,255,.65);margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.18)}

        .btns{display:flex;gap:10px;margin-top:4px}
        .btn{flex:1;padding:12px 20px;border:none;border-radius:8px;font-size:.9em;font-weight:700;cursor:pointer;transition:all .25s;text-transform:uppercase;letter-spacing:.5px}
        .btn-blue{background:linear-gradient(135deg,var(--blue) 0%,#0A2A8F 100%);color:#fff;box-shadow:0 4px 14px rgba(16,52,166,.2)}
        .btn-blue:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px rgba(16,52,166,.3)}
        .btn-red{background:var(--red);color:#fff;box-shadow:0 4px 14px rgba(180,0,35,.2)}
        .btn-red:hover{background:#9a001f;transform:translateY(-2px)}
        .btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

        /* ── MODALS ── */
        .overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:900;justify-content:center;align-items:center;padding:16px}
        .overlay.open{display:flex}
        .mdialog{background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.25);max-width:480px;width:100%;animation:up .28s ease}
        @keyframes up{from{transform:translateY(28px);opacity:0}to{transform:translateY(0);opacity:1}}
        .mhead{padding:22px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
        .mhead-title{font-size:1.15em;font-weight:700;color:var(--blue)}
        .mclose{background:none;border:none;font-size:1.4em;cursor:pointer;color:var(--muted);width:28px;height:28px;display:flex;align-items:center;justify-content:center}
        .mbody{padding:22px 24px;max-height:60vh;overflow-y:auto}
        .mfooter{padding:16px 24px;border-top:1px solid var(--border);display:flex;gap:10px}
        .mfooter .btn{flex:1}
        .msumm{background:linear-gradient(135deg,#f0f4fa,#faf0f5);padding:14px;border-radius:8px;margin-bottom:14px;border-left:3px solid var(--blue)}
        .mrow{display:flex;justify-content:space-between;padding:5px 0;font-size:.93em}
        .mrow strong{color:var(--blue)}
        .mrow.total{border-top:1px solid rgba(16,52,166,.15);padding-top:8px;margin-top:6px;font-weight:700;font-size:1em}
        .mrow.total span:last-child{color:var(--red)}
        .spinner{width:38px;height:38px;border:3px solid rgba(16,52,166,.12);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;margin:20px auto}
        @keyframes spin{to{transform:rotate(360deg)}}

        /* ── TOAST ── */
        .toast{position:fixed;top:18px;right:18px;background:#fff;padding:14px 18px;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.14);max-width:360px;z-index:9999;display:none;font-size:.93em}
        .toast.show{display:block;animation:tslide .3s ease}
        @keyframes tslide{from{transform:translateX(360px);opacity:0}to{transform:translateX(0);opacity:1}}
        .toast.ok{border-left:3px solid #2E7D32;color:#2E7D32}
        .toast.err{border-left:3px solid var(--red);color:var(--red)}
        .toast.info{border-left:3px solid var(--blue);color:var(--blue)}


/* =========================================================
   WUSHMAT HERO
   Image + frosted-glass panel, matching the site's page-hero
   (contact.html / style.css) treatment: full-bleed photo,
   dark gradient for contrast, and a rounded "stained blue
   glass" card floating on top holding a two-column layout —
   hero-copy (eyebrow / heading / lead / pills) on the left,
   hero-side-card (the 3-step "how it works" mini panel) on
   the right. Swap the image file in .hero-overlay's sibling
   background-image any time; the glass structure stays put.
   ========================================================= */

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 110px 20px 90px;

    background: var(--blue);
}

/* The actual photo, as a real <img class="hero-bg-img"> element in the
   HTML (same pattern as .page-hero-bg-img elsewhere on the site) —
   put/replace the image by editing that <img>'s src, not this CSS. */
.hero-bg-img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Dark gradient wash over the photo so the glass card and any
   text outside it stay legible — this is the "image" layer the
   overlay sits on top of, matching .page-hero-bg-img + tint. */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            120deg,
            rgba(5, 16, 45, .62) 0%,
            rgba(5, 16, 45, .40) 45%,
            rgba(16, 52, 166, .35) 100%
        );
}

/* The floating "stained blue glass" card — same recipe as
   .page-hero-glass / .footer-grid: translucent Egyptian-blue
   fill, soft white border, heavy blur. */
.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 32px;
    align-items: stretch;

    padding: 34px 38px;
    border-radius: 24px;

    background: rgba(11, 36, 166, .46);
    border: 1px solid rgba(255, 255, 255, .22);

    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);

    box-shadow:
        0 10px 35px rgba(0, 0, 0, .22),
        0 24px 65px rgba(5, 16, 45, .18);
}

/* ---- left column: hero copy ---- */
.hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-copy .eyebrow {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 14px;

    padding: 6px 14px;
    border-radius: 999px;

    background: rgba(180, 0, 35, .30);
    border: 1px solid rgba(180, 0, 35, .65);

    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hero-copy h1 {
    margin: 0 0 14px;
    color: #fff;
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.03em;
    text-shadow: 0 3px 16px rgba(0, 0, 0, .3);
}

.hero-copy h1 span {
    color: #e61534;
}

.hero-copy p {
    max-width: 480px;
    margin: 0 0 22px;
    color: rgba(255, 255, 255, .9);
    font-size: .98rem;
    line-height: 1.65;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .22);
}

.hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pill {
    padding: 7px 13px;
    border-radius: 999px;

    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .22);

    color: rgba(255, 255, 255, .94);
    font-size: .76rem;
    font-weight: 700;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pill:first-child {
    background: rgba(180, 0, 35, .30);
    border-color: rgba(180, 0, 35, .65);
}

/* ---- right column: "how it works" side card ---- */
.hero-side-card {
    display: flex;
    flex-direction: column;
    gap: 10px;

    padding: 24px 22px;
    border-radius: 16px;

    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .18);
}

.hero-side-kicker {
    color: rgba(255, 255, 255, .7);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.hero-side-card h2 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

.hero-side-line {
    display: flex;
    align-items: baseline;
    gap: 10px;

    padding: 9px 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.hero-side-line b {
    color: var(--red);
    font-size: .78rem;
    font-weight: 900;
}

.hero-side-line span {
    color: rgba(255, 255, 255, .88);
    font-size: .84rem;
    line-height: 1.4;
}


/* =========================================================
   CALCULATOR WRAPPER
   ========================================================= */

.wrap {
    max-width: 1080px;
    margin: -58px auto 70px;
    padding: 0 16px;
    position: relative;
    z-index: 5;
}

.card {
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(16, 52, 166, .08);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(8, 24, 70, .17);
    overflow: hidden;
}


/* =========================================================
   CALCULATOR TABS
   ========================================================= */

.tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    background: #fff;
}

.tab-btn {
    flex: 1;
    padding: 17px 12px;
    border: none;
    background: #fff;
    cursor: pointer;

    color: var(--muted);
    font-weight: 800;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .6px;

    border-bottom: 3px solid transparent;
    transition: .2s ease;
}

.tab-btn:hover {
    color: var(--blue);
    background: rgba(16, 52, 166, .035);
}

.tab-btn.active {
    color: var(--blue);
    border-bottom-color: var(--red);
    background: #fafbff;
}

.tab-icon {
    display: none;
}


/* =========================================================
   CALCULATOR PANES
   ========================================================= */

.pane {
    display: none;
}

.pane.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
}


/* =========================================================
   FORM SIDE
   ========================================================= */

.form-side {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 17px;
    border-right: 1px solid var(--border);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.field label {
    font-weight: 800;
    font-size: .76rem;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: .6px;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 11px 13px;

    border: 1px solid #d5dbe7;
    border-radius: 9px;

    font-size: .91rem;
    font-family: inherit;

    background: #fff;
    color: #333;

    transition: border .2s, box-shadow .2s;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
    border-color: #aeb9cc;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(16, 52, 166, .08);
}

.field textarea {
    resize: vertical;
    min-height: 68px;
}

.row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.pfx {
    position: relative;
}

.pfx-label {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-5%);
    font-weight: 800;
    color: var(--red);
    font-size: .72rem;
    letter-spacing: .4px;
    pointer-events: none;
}

.pfx input {
    padding-left: 44px;
}

.field-hint {
    margin-top: -2px;
    color: var(--muted);
    font-size: .74rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}


/* =========================================================
   COMPACT FOOTER — a slim single-row footer for this
   standalone calculator page, in the site's brand colours,
   deliberately smaller than the main multi-column footer
   used elsewhere on the site.
   ========================================================= */

.mini-footer {
    background: var(--blue);
    padding: 16px 20px;
}

.mini-footer-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
}

.mini-footer-brand {
    color: #fff;
    font-weight: 800;
    font-size: .8rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.mini-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.mini-footer-links a {
    color: rgba(255, 255, 255, .82);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 999px;
    transition: background .2s ease, color .2s ease;
}

.mini-footer-links a:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.mini-footer-copy {
    color: rgba(255, 255, 255, .6);
    font-size: .72rem;
}

@media (max-width: 600px) {
    .mini-footer-inner {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
}


/* =========================================================
   NOTICES
   ========================================================= */

.notice {
    background: rgba(16, 52, 166, .055);
    border-left: 3px solid var(--blue);
    padding: 13px 14px;
    border-radius: 7px;
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.55;
}

.notice strong {
    color: var(--blue);
    display: block;
    margin-bottom: 3px;
}

.notice-red {
    background: rgba(180, 0, 35, .055);
    border-left-color: var(--red);
}

.notice-red strong {
    color: var(--red);
}


/* =========================================================
   HS AUTOCOMPLETE
   ========================================================= */

.hs-wrap {
    position: relative;
}

.hs-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;

    display: none;
    max-height: 220px;
    overflow-y: auto;

    margin-top: 4px;

    background: #fff;
    border: 1px solid var(--border);
    border-radius: 9px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}

.hs-list.open {
    display: block;
}

.hs-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-size: .86rem;
}

.hs-item:hover {
    background: rgba(16, 52, 166, .055);
}

.hs-item:last-child {
    border-bottom: none;
}

.hs-num {
    font-weight: 800;
    color: var(--blue);
    margin-right: 6px;
}

.hs-desc {
    color: var(--muted);
    font-size: .9em;
}


/* =========================================================
   RESULTS
   ========================================================= */

.result-side {
    position: relative;
    padding: 32px;
    background: linear-gradient(145deg, #f5f7fd, #eef2fb);
    display: flex;
    flex-direction: column;
}


/* =========================================================
   PAYWALL — figures stay hidden behind a blur until payment
   succeeds. #v_results / #c_results / #h_results get a
   "locked" class whenever a fresh estimate is calculated;
   clearing.js removes it only after initiatePayment()
   confirms success. The overlay itself (.result-paywall) is
   a direct child of each results container.
   ========================================================= */

#v_results,
#c_results,
#h_results {
    position: relative;
}

#v_results.locked > .fc,
#c_results.locked > .fc,
#h_results.locked > .fc,
#v_results.locked > .total-box,
#c_results.locked > .total-box,
#h_results.locked > .total-box,
#v_results.locked > .btns,
#c_results.locked > .btns,
#h_results.locked > .btns {
    filter: blur(7px);
    user-select: none;
    pointer-events: none;
}

.result-paywall {
    display: none;
}

#v_results.locked .result-paywall,
#c_results.locked .result-paywall,
#h_results.locked .result-paywall {
    display: flex;
}

.result-paywall {
    position: absolute;
    inset: 0;
    z-index: 5;

    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;

    padding: 28px 22px;
    border-radius: 14px;

    background: rgba(245, 247, 253, .78);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(16, 52, 166, .12);
}

.paywall-icon {
    font-size: 1.8rem;
    margin-bottom: 2px;
}

.paywall-title {
    margin: 0;
    color: var(--blue);
    font-weight: 800;
    font-size: 1rem;
}

.paywall-text {
    margin: 0 0 8px;
    max-width: 260px;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.55;
}

.paywall-btn {
    flex: none;
    padding: 11px 20px;
}

.quote-cta {
    margin: 2px 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(16, 52, 166, .06);
    border-left: 3px solid var(--blue);
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.5;
}

.quote-cta a {
    color: var(--blue);
    font-weight: 700;
    text-decoration: none;
}

.quote-cta a:hover {
    color: var(--red);
}

.result-title {
    font-size: .82rem;
    font-weight: 900;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 18px;
}

.empty-state {
    text-align: center;
    color: var(--muted);
    padding: 40px 20px;
    margin: auto;
    line-height: 1.6;
}

.empty-icon {
    display: none;
}


/* =========================================================
   GLASS RESULT BLOCKS
   ========================================================= */

.fc {
    background: var(--frost);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);

    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .18);

    padding: 14px;
    margin-bottom: 10px;

    box-shadow: 0 8px 22px rgba(16, 52, 166, .08);
}

.fc-title {
    font-size: .7rem;
    font-weight: 800;
    color: rgba(255, 255, 255, .68);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 8px;
}

.fc-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;

    font-size: .82rem;
    color: rgba(255, 255, 255, .9);

    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.fc-row:last-child {
    border-bottom: none;
}

.fc-row.cif-row {
    font-weight: 800;
    color: #fff;
}

.fc-fee {
    color: #fff;
    font-weight: 800;
}


/* =========================================================
   TOTAL
   ========================================================= */

.total-box {
    background: var(--blue);
    border-radius: 10px;

    padding: 17px;
    margin-top: 5px;
    margin-bottom: 18px;

    box-shadow: 0 12px 28px rgba(16, 52, 166, .16);
}

.total-box .label {
    color: rgba(255, 255, 255, .72);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.total-box .amount {
    color: #fff;
    font-size: 1.9rem;
    font-weight: 900;
    margin-top: 4px;
}

.total-box .sub {
    font-size: .72rem;
    color: rgba(255, 255, 255, .63);
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btns {
    display: flex;
    gap: 10px;
}

.btn {
    flex: 1;
    padding: 11px 18px;
    min-height: 44px;

    border: none;
    border-radius: 9px;

    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;

    transition: .2s ease;

    text-transform: uppercase;
    letter-spacing: .5px;
}

.btn-blue {
    background: linear-gradient(135deg, var(--blue), #0a2a8f);
    color: #fff;
    box-shadow: 0 5px 16px rgba(16, 52, 166, .18);
}

.btn-blue:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 7px 20px rgba(16, 52, 166, .27);
}

.btn-red {
    background: var(--red);
    color: #fff;
    box-shadow: 0 5px 16px rgba(180, 0, 35, .16);
}

.btn-red:hover {
    background: #98001e;
    transform: translateY(-1px);
}

.btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}


/* =========================================================
   CUSTOMER GUIDE
   Works with the guide panel added to the HTML.
   ========================================================= */

.customer-guide {
    position: sticky;
    top: 24px;

    padding: 24px;

    border-radius: 20px;

    background: rgba(11, 36, 166, .46);
    border: 1px solid rgba(255, 255, 255, .22);

    color: #fff;

    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);

    box-shadow: 0 14px 38px rgba(8, 24, 70, .18);
}

.customer-guide::before {
    content: "";
    display: block;

    width: 38px;
    height: 3px;

    margin-bottom: 17px;

    border-radius: 999px;
    background: var(--red);
}

.customer-guide h2 {
    color: #fff;
    font-size: 1.28rem;
    line-height: 1.2;
    margin-bottom: 10px;
}

.guide-intro {
    color: rgba(255, 255, 255, .72);
    font-size: .78rem;
    line-height: 1.55;
}

.guide-step {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;

    padding: 13px 0;

    border-top: 1px solid rgba(255, 255, 255, .13);
}

.guide-number {
    color: #fff;
    font-size: .7rem;
    font-weight: 900;
}

.guide-step h3 {
    color: #fff;
    font-size: .78rem;
    margin-bottom: 3px;
}

.guide-step p {
    color: rgba(255, 255, 255, .64);
    font-size: .72rem;
    line-height: 1.5;
}

.guide-note {
    margin-top: 8px;
    padding: 12px;

    background: rgba(255, 255, 255, .08);
    border-left: 3px solid var(--red);
    border-radius: 8px;

    color: rgba(255, 255, 255, .72);
    font-size: .72rem;
    line-height: 1.5;
}

.guide-note strong {
    display: block;
    color: #fff;
    margin-bottom: 3px;
}


/* =========================================================
   MODALS
   ========================================================= */

.overlay {
    display: none;
    position: fixed;
    inset: 0;

    background: rgba(3, 11, 30, .68);

    z-index: 900;

    justify-content: center;
    align-items: center;

    padding: 16px;
}

.overlay.open {
    display: flex;
}

.mdialog {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .28);

    max-width: 480px;
    width: 100%;

    animation: up .28s ease;
}

@keyframes up {
    from {
        transform: translateY(25px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.mhead {
    padding: 20px 22px;

    border-bottom: 1px solid var(--border);

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mhead-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--blue);
}

.mclose {
    background: #f1f3f7;
    border: none;
    border-radius: 7px;

    color: var(--muted);

    width: 32px;
    height: 32px;

    cursor: pointer;
}

.mbody {
    padding: 21px 22px;
    max-height: 60vh;
    overflow-y: auto;
}

.mfooter {
    padding: 15px 22px;

    border-top: 1px solid var(--border);

    display: flex;
    gap: 10px;
}

.mfooter .btn {
    flex: 1;
}

.msumm {
    background: linear-gradient(145deg, #f0f4fa, #faf0f5);

    padding: 14px;
    border-radius: 8px;

    margin-bottom: 13px;

    border-left: 3px solid var(--blue);
}

.mrow {
    display: flex;
    justify-content: space-between;
    gap: 15px;

    padding: 5px 0;

    font-size: .88rem;
}

.mrow strong {
    color: var(--blue);
}

.mrow.total {
    border-top: 1px solid rgba(16, 52, 166, .15);
    padding-top: 8px;
    margin-top: 6px;

    font-weight: 800;
}

.mrow.total span:last-child {
    color: var(--red);
}


/* =========================================================
   SPINNER
   ========================================================= */

.spinner {
    width: 38px;
    height: 38px;

    border: 3px solid rgba(16, 52, 166, .12);
    border-top-color: var(--blue);

    border-radius: 50%;

    animation: spin .8s linear infinite;

    margin: 20px auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


/* =========================================================
   TOAST
   ========================================================= */

.toast {
    position: fixed;
    top: 18px;
    right: 18px;

    background: #fff;

    padding: 13px 16px;

    border-radius: 9px;

    box-shadow: 0 6px 22px rgba(0, 0, 0, .14);

    max-width: 360px;

    z-index: 9999;

    display: none;

    font-size: .84rem;
}

.toast.show {
    display: block;
    animation: tslide .3s ease;
}

@keyframes tslide {
    from {
        transform: translateX(360px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast.ok {
    border-left: 3px solid #2e7d32;
    color: #2e7d32;
}

.toast.err {
    border-left: 3px solid var(--red);
    color: var(--red);
}

.toast.info {
    border-left: 3px solid var(--blue);
    color: var(--blue);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .hero {
        padding: 90px 18px 70px;
    }

    .hero-inner {
        grid-template-columns: 1fr;
        padding: 28px 26px;
        gap: 22px;
    }

    .hero-side-card {
        padding: 20px 18px;
    }

    .wrap {
        margin-top: -48px;
    }

    .pane.active {
        grid-template-columns: 1fr;
    }

    .form-side {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .customer-guide {
        position: relative;
        top: auto;
    }
}

@media (max-width: 600px) {

    .hero {
        padding: 78px 14px 60px;
        background-position: center;
    }

    .hero-inner {
        padding: 24px 20px;
        border-radius: 18px;
    }

    .hero-copy h1 {
        font-size: 1.9rem;
    }

    .hero-copy p {
        font-size: .88rem;
    }

    .pill {
        padding: 6px 10px;
        font-size: .68rem;
    }

    .wrap {
        padding: 0 10px;
        margin-top: -48px;
    }

    .form-side,
    .result-side {
        padding: 20px;
    }

    .row2 {
        grid-template-columns: 1fr;
    }

    .tabs {
        overflow-x: auto;
    }

    .tab-btn {
        min-width: 110px;
    }

    .fc-row {
        font-size: .76rem;
    }

    .mfooter {
        flex-direction: column;
    }
}