/* ==========================================================
   Airtime Agent — Base Design System
   Colors and font come from CSS variables injected by PHP
   (see includes/theme.php) so they stay editable from Admin.
   ========================================================== */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font-family), -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: calc(16px * var(--font-scale, 1));
    line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

.container-narrow {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------------- Top contact bar ---------------- */
.topbar {
    background: var(--text-primary);
    color: rgba(255,255,255,0.85);
}

.topbar-inner {
    display: flex;
    justify-content: flex-end;
    padding: 7px 20px;
    font-size: 12.5px;
}

.topbar-contact { display: flex; gap: 18px; }

/* ---------------- Header ---------------- */
.site-header {
    display: flex;
    align-items: stretch;
    padding: 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 40;
}

.site-header .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 800;
    font-size: 21px;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    padding: 0;
    /* Same reasoning as the mobile version below: this is a grid item in
       .header-nav-grid, and grid items default to min-width:auto — meaning
       without this, a wide logo image would refuse to shrink to its column
       and spill sideways into the neighboring nav items instead of
       respecting the column boundary. */
    min-width: 0;
    overflow: hidden;
}

/* Text-only fallback (no image uploaded) gets its own breathing room —
   "edge to edge, zero padding" is specifically about the logo image
   filling its column, not about cramming the site name text against the
   cell's edges. Avoiding a :has() selector here for older Android browser
   compatibility, given this app's target audience. */
.site-header .logo span { padding: 6px 10px; }

.site-header .logo img {
    /* Fills the whole cell (full row height, full column width) with zero
       gap on any side — object-fit:cover crops slightly if the image's own
       aspect ratio doesn't exactly match the cell, rather than leaving
       visible letterbox gaps the way "contain" would. min-width/min-height
       0 stop it from overflowing past its column into other nav items.
       !important is deliberate here: if this isn't taking effect on a live
       site, the most likely cause is something else winning the cascade
       (an inline style="width:..." on the <img> tag itself, or a leftover
       rule from an older CSS version still cached/present somewhere) —
       this forces the sizing regardless of what else is competing for it. */
    display: block !important;
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: cover !important;
}

/* ---------------- Smart header nav grid ---------------- */
/* The logo is a real grid item here too (first column, sized to its own
   content via "auto"), with nav items filling the remaining equal-width
   columns — 2px gap both directions. Putting the logo in the same grid
   (rather than trying to combine two separate layouts with CSS tricks like
   display:contents, which is unreliable on older/budget mobile browsers)
   keeps this simple and broadly compatible. */
.header-nav-grid {
    display: grid;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    /* Explicit, fixed height on both the container AND the actual grid row
       track. This second one matters more than it looks: setting height on
       the container alone constrains the outer box, but the *implicit row
       track* (grid-auto-rows, default "auto") can still try to grow to fit
       tall content and overflow past that container — which is exactly
       what was still happening here (measured the logo cell at 48.25px
       inside a "44px" grid on mobile). grid-auto-rows pins the actual row
       track itself, so align-items:stretch has a real, fixed size to
       stretch every item — including the logo image — into, regardless of
       the source image's own resolution.
       Kept in sync with the compact heights we deliberately measured and
       set earlier: 74px logged-out, 70.5px logged-in on desktop. */
    height: 70px;
    grid-auto-rows: 70px;
}

.header-nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 10px;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    background: transparent;
    border-radius: 0;
    transition: opacity 0.15s ease;
}

.header-nav-item:hover { opacity: 0.8; }

.header-nav-item.active {
    font-weight: 800;
    color: var(--primary);
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}

/* Dashboard/Logout (shown only when logged in) get extra vertical padding
   and uppercase styling to stand out from the regular logged-out nav —
   since the whole row stretches together (align-items: stretch above),
   this also increases the overall header height only while logged in,
   without affecting the logged-out Login/Sign Up header. */
.header-nav-item.logged-in-item {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 700px) {
    .header-nav-item.logged-in-item {
        /* Was 14px top/bottom — harmless back when the row could grow to
           fit content, but now that the mobile row height is strictly
           fixed (grid-auto-rows above), that much padding plus the
           uppercase text no longer fits inside 44px and was overflowing
           the cell. Reduced to fit comfortably within the fixed height. */
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

/* On mobile: the logo becomes an equal column alongside the nav items
   (instead of a separately-sized auto column) so the whole header collapses
   into one compact grid block — capped at 4 columns (set inline per-page
   via --mobile-nav-cols, based on how many items are configured), and with
   at most 6 nav items ever possible this wraps to at most 2 rows. No
   horizontal gap between columns, only a hairline vertical gap between rows
   when wrapping occurs. The !important is deliberate: it overrides the
   desktop "auto repeat(N,1fr)" inline style set directly on the element. */
@media (max-width: 700px) {
    .site-header { padding: 0; }

    .header-nav-grid {
        grid-template-columns: repeat(var(--mobile-nav-cols, 2), 1fr) !important;
        gap: 2px 0 !important;
        /* Explicit height on both the container and the actual row track
           (grid-auto-rows) — see the desktop rule's comment for why both
           are needed. Without grid-auto-rows here too, a real high-res
           logo still measured 4px taller than this "fixed" 44px container
           and visibly overflowed it. */
        height: 44px;
        grid-auto-rows: 44px;
    }

    .site-header .logo {
        justify-content: center;
        text-align: center;
        padding: 0;
        font-size: 14px;
        gap: 4px;
        overflow: hidden;
        white-space: nowrap;
        /* Both this element (a grid item in .header-nav-grid) and its <img>
           child (a flex item, since this is display:flex) default to
           min-width:auto — meaning neither will shrink below its natural
           content size unless told to. Without this, a logo image wider
           than its grid column refused to shrink and spilled sideways into
           the neighboring nav columns instead of respecting the column
           boundary. */
        min-width: 0;
    }

    /* Text-only fallback (no image uploaded) still gets a little breathing
       room — "zero padding" is specifically about the logo image filling
       its column, not about cramming the site name text against the edges. */
    .site-header .logo span { overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }

    /* On mobile, unlike desktop, the logo's column is a fixed equal width
       (not adaptive to the logo's own aspect ratio) — so a wide logo forced
       into that roughly-square cell via "cover" was cropping off real
       content (e.g. a wordmark's outer letters), not just trimming empty
       margin. Using "contain" here instead shows the complete logo, at the
       cost of a little empty space on two sides rather than losing part of
       the actual brand mark. */
    .site-header .logo img {
        height: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        /* Must be !important — the desktop base rule above also uses
           !important on object-fit, so without matching that here, the
           desktop rule wins even on mobile regardless of this media query,
           since !important beats normal specificity/source-order rules
           entirely. This was the actual reason mobile kept cropping the
           logo even after this rule was added. */
        object-fit: contain !important;
    }

    .header-nav-item {
        padding: 4px 4px;
        font-size: 13.5px;
        border-radius: 0;
    }

    .topbar-inner { padding: 4px 12px; font-size: 11px; justify-content: center; flex-wrap: wrap; gap: 6px; }
}

/* ---------------- Buttons ---------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    border: none;
    transition: background 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
    min-height: 44px;
}

.btn:active { transform: scale(0.98); }

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { opacity: 0.92; }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-secondary { background: var(--secondary); color: #fff; }
.btn-secondary:hover { opacity: 0.92; }

.btn-outline { background: transparent; color: var(--text-primary); border: 1px solid var(--border); }
.btn-outline:hover { background: var(--bg-soft); }

.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { color: var(--text-primary); }

.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 13px; min-height: 36px; border-radius: 8px; }
.btn-pill { border-radius: 999px; }

/* ---------------- Cards ---------------- */
.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(24, 32, 25, 0.06);
    padding: 24px;
}

.card-soft {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
}

/* ---------------- Boxed layout ---------------- */
body.layout-boxed {
    background: var(--boxed-bg, var(--bg-soft));
}

.page-boxed {
    max-width: var(--boxed-width, 1100px);
    margin: 0 auto;
    background: var(--bg);
    box-shadow: 0 0 48px rgba(24, 32, 25, 0.10);
    min-height: 100vh;
}

/* ---------------- Hero ---------------- */
.hero {
    position: relative;
    overflow: hidden;
    padding: 56px 0 64px;
    background:
        radial-gradient(600px 300px at 15% 0%, rgba(181, 71, 8, 0.10), transparent 60%),
        radial-gradient(600px 320px at 90% 30%, rgba(22, 101, 52, 0.08), transparent 60%),
        var(--bg);
    color: var(--text-primary);
}

.hero.theme-dark {
    background:
        radial-gradient(600px 300px at 15% 0%, rgba(255,255,255,0.06), transparent 60%),
        radial-gradient(600px 320px at 90% 30%, rgba(255,255,255,0.05), transparent 60%),
        var(--text-primary);
    color: #fff;
}

.hero.theme-dark .lead { color: rgba(255,255,255,0.75); }
.hero.theme-dark .trust-item { color: rgba(255,255,255,0.85); }

.hero.has-image {
    background-size: cover;
    background-position: center;
}

.hero.has-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.86) 45%, rgba(255,255,255,0.6) 100%);
}

.hero.has-image.theme-dark::before {
    background: linear-gradient(120deg, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.60) 45%, rgba(0,0,0,0.35) 100%);
}

.hero.has-image .hero-grid { position: relative; z-index: 1; }

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
}

@media (max-width: 860px) {
    .hero-grid { grid-template-columns: 1fr; gap: 20px; }
    .hero { padding: 20px 0 28px; }
}

@media (max-width: 480px) {
    .hero { padding: 16px 0 22px; }
    .trust-row { gap: 10px; margin-top: 14px; }
    .trust-item { font-size: 12px; }
}

.hero h1 {
    font-size: calc(40px * var(--hero-scale, 1));
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
    color: inherit;
}

@media (max-width: 640px) {
    .hero h1 { font-size: calc(26px * var(--hero-scale, 1)); margin: 0 0 8px; }
}

.hero p.lead {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 0 0 24px;
    max-width: 46ch;
}

@media (max-width: 640px) {
    .hero p.lead { font-size: 14px; margin: 0 0 12px; }
}

.trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 24px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* ---------------- Purchase Form ---------------- */
.purchase-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid var(--border);
    box-shadow: 0 12px 40px rgba(24, 32, 25, 0.10);
    padding: 24px;
}

.field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.amount-input-wrap {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 4px 16px;
    background: #fff;
    transition: border-color 0.15s ease;
}

.amount-input-wrap:focus-within { border-color: var(--primary); }

.amount-input-wrap .prefix {
    font-weight: 700;
    color: var(--text-secondary);
    margin-right: 8px;
    font-size: 18px;
}

.amount-input-wrap input {
    border: none;
    outline: none;
    font-size: 26px;
    font-weight: 700;
    width: 100%;
    padding: 14px 0;
    color: var(--text-primary);
    background: transparent;
}

.amount-input-wrap input::placeholder {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-secondary);
}

.amount-range-hint {
    font-size: 11.5px;
    color: var(--text-secondary);
    margin-top: 6px;
    opacity: 0.8;
}

.quick-amounts {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.quick-amount-btn {
    border: 1px solid var(--border);
    background: var(--bg-soft);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.quick-amount-btn.active,
.quick-amount-btn:hover {
    border-color: var(--primary);
    background: rgba(181, 71, 8, 0.08);
    color: var(--primary);
}

.receive-box {
    margin-top: 16px;
    border-radius: 14px;
    background: rgba(22, 101, 52, 0.06);
    border: 1px solid rgba(22, 101, 52, 0.18);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.receive-box .you-pay { font-size: 13px; color: var(--text-secondary); }
.receive-box .you-pay strong { color: var(--text-primary); font-size: 15px; }

.receive-box .you-receive-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--secondary);
    letter-spacing: 0.02em;
}

.receive-box .you-receive-amount {
    font-size: 24px;
    font-weight: 800;
    color: var(--secondary);
    line-height: 1.1;
}

.receive-box .you-receive-sub { font-size: 12px; color: var(--text-secondary); }

.phone-input-wrap {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.15s ease;
    overflow: hidden;
}

.phone-input-wrap:focus-within { border-color: var(--primary); }

.phone-input-wrap .prefix-badge {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 12px 12px 12px 16px;
    border-right: 1px solid var(--border);
    background: var(--bg-soft);
    flex-shrink: 0;
}

.phone-input-wrap input {
    border: none;
    outline: none;
    font-size: 16px;
    width: 100%;
    padding: 12px 16px 12px 12px;
    color: var(--text-primary);
    background: transparent;
}

.field-group { margin-top: 18px; }

.commission-note {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.6;
    padding: 10px 12px;
    border-radius: 10px;
}

.commission-note.eligible {
    background: rgba(22, 101, 52, 0.08);
    color: var(--secondary);
}

.commission-note.not-eligible {
    background: var(--bg-soft);
    color: var(--text-secondary);
}

/* Login/sign-up links inside the guest commission note — styled as small
   filled pills so they read as clear, tappable actions instead of blending
   into the surrounding sentence. */
.commission-note a {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    text-decoration: none;
    margin: 2px 1px;
    white-space: nowrap;
}

.commission-note a:hover { opacity: 0.9; }

.buy-btn {
    margin-top: 22px;
}

.form-error {
    margin-top: 10px;
    font-size: 13px;
    color: #B42318;
    background: #FEF3F2;
    border: 1px solid #FDA29B;
    padding: 10px 12px;
    border-radius: 10px;
    display: none;
}

.form-error.show { display: block; }

/* ---------------- STK / payment states ---------------- */
.payment-state {
    text-align: center;
    padding: 12px 0;
}

.payment-state .spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    margin: 0 auto 16px;
    animation: spin 0.8s linear infinite;
}

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

.payment-state .status-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 28px;
}

.status-icon.success { background: rgba(22, 101, 52, 0.12); color: var(--secondary); }
.status-icon.fail { background: #FEF3F2; color: #B42318; }

/* On mobile, the payment progress/result view becomes a fixed, centered
   modal instead of just swapping inline within the purchase card — a
   payment can fail after the person has scrolled well past the form (e.g.
   down to "How It Works" or the FAQ), and an inline swap up there is easy
   to miss entirely, including the "Try Again" button. Desktop is
   unaffected — .is-open only does anything within this media query. */
@media (max-width: 700px) {
    .payment-state.is-open {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1000;
        display: block !important;
        background: #fff;
        border-radius: 16px;
        padding: 28px 24px;
        width: calc(100% - 40px);
        max-width: 360px;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
        /* A huge-spread, zero-size shadow fills the entire viewport with a
           dark tint — a common trick for a modal backdrop without needing
           a separate overlay element in the markup. */
        box-shadow: 0 0 0 9999px rgba(24, 32, 25, 0.55), 0 20px 50px rgba(0, 0, 0, 0.3);
    }

    /* Stops the page scrolling underneath the modal while a payment is in
       progress — this can run for a couple of minutes while polling for
       M-Pesa confirmation. */
    body.payment-modal-open {
        overflow: hidden;
    }
}

/* ---------------- Sections ---------------- */
.section { padding: 56px 0; }
.section-soft { background: var(--bg-soft); }

.section-title {
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}

.section-sub {
    color: var(--text-secondary);
    margin: 0 0 32px;
    max-width: 56ch;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* ---------------- FAQ section ---------------- */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.faq-item {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
}

.faq-question {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.faq-answer {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14.5px;
    line-height: 1.6;
}

@media (max-width: 860px) {
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .steps-grid { grid-template-columns: 1fr; }
}

.step-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
}

.step-card .step-num {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 10px;
}

.step-card h3 { margin: 0 0 6px; font-size: 16px; }
.step-card p { margin: 0; font-size: 13.5px; color: var(--text-secondary); }

.affiliate-section {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
    align-items: center;
}

@media (max-width: 860px) {
    .affiliate-section { grid-template-columns: 1fr; }
}

.affiliate-points { list-style: none; margin: 20px 0; padding: 0; }
.affiliate-points li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 14.5px;
    color: var(--text-primary);
}

.affiliate-points li .check {
    color: var(--secondary);
    font-weight: 700;
}

/* ---------------- Footer ---------------- */
.site-footer {
    border-top: 1px solid var(--border);
    background: var(--bg-soft);
    color: var(--text-secondary);
    font-size: 13.5px;
    margin-top: 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 32px;
    padding: 44px 20px 32px;
}

@media (max-width: 700px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}

.footer-col h4 {
    font-size: 13px;
    color: var(--text-primary);
    margin: 0 0 12px;
}

.footer-col a {
    display: block;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.footer-col a:hover { color: var(--primary); }

.footer-logo {
    font-weight: 800;
    font-size: 17px;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.footer-brand p { max-width: 40ch; margin: 0; }

.footer-bottom {
    border-top: 1px solid var(--border);
    padding: 16px 20px;
    font-size: 12.5px;
}

/* ---------------- Forms (auth pages, dashboards) ---------------- */
.form-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 15px;
    outline: none;
    background: #fff;
    color: var(--text-primary);
    transition: border-color 0.15s ease;
}

.form-input:focus { border-color: var(--primary); }

.form-row { margin-bottom: 16px; }

.auth-shell {
    min-height: calc(100vh - 130px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: var(--bg-soft);
}

.alert {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 16px;
}

.alert-error { background: #FEF3F2; color: #B42318; border: 1px solid #FDA29B; }
.alert-success { background: rgba(22, 101, 52, 0.08); color: var(--secondary); border: 1px solid rgba(22,101,52,0.25); }

/* ---------------- Dashboard shell ---------------- */
.dash-shell {
    display: flex;
    flex-wrap: wrap;
    /* Without this, a multi-line flex container's default (stretch)
       distributes any leftover vertical space across ALL lines when page
       content is short — which was inflating the nav bar's height on
       shorter pages (e.g. an empty "My Purchases" list) since it's one of
       the wrapped lines here. This keeps every line at its own natural
       height and pushes leftover space to the bottom instead. */
    align-content: flex-start;
    min-height: 100vh;
    background: var(--bg-soft);
}

.dash-sidebar {
    width: 240px;
    background: #fff;
    border-right: 1px solid var(--border);
    padding: 20px 0;
    flex-shrink: 0;
}

.dash-sidebar .brand {
    padding: 0 20px 20px;
    font-weight: 800;
    font-size: 17px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}

.dash-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    border-left: 3px solid transparent;
}

.dash-nav a:hover { background: var(--bg-soft); color: var(--text-primary); }
.dash-nav a.active {
    color: var(--primary);
    background: rgba(181, 71, 8, 0.06);
    border-left-color: var(--primary);
    font-weight: 700;
}

.dash-main { flex: 1; padding: 28px; max-width: 100%; overflow-x: hidden; }

@media (max-width: 860px) {
    .dash-shell { flex-direction: column; }
    .dash-sidebar {
        width: 100%;
        display: flex;
        overflow-x: auto;
        padding: 10px;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .dash-sidebar .brand { display: none; }
    .dash-nav { display: flex; gap: 4px; }
    .dash-nav a { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; padding: 8px 14px; }
    .dash-nav a.active { border-left-color: transparent; border-bottom-color: var(--primary); }
    .dash-main { padding: 18px; }
}

/* ---------------- Reusable dashboard "page hero" ---------------- */
/* Same soft-gradient visual language as the homepage hero, scaled down to
   sit inside a dashboard content column. Built once so any current or
   future dashboard page can reuse it via includes/partials/page-hero.php
   instead of each page inventing its own heading style. */
.page-hero {
    position: relative;
    overflow: hidden;
    padding: 16px 20px;
    border-radius: 14px;
    margin-bottom: 16px;
    /* A clear, visible theme-color wash rather than the barely-perceptible
       radial gradient this had before — that one was too subtle at this
       compact size and just read as plain white. No border (removed per
       feedback), and less padding/margin so this doesn't push the actual
       purchase form further down the page than it needs to. */
    background: linear-gradient(135deg, rgba(181, 71, 8, 0.14), rgba(22, 101, 52, 0.10));
}

.page-hero-title {
    margin: 0 0 4px;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.page-hero-desc {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14.5px;
    max-width: 640px;
}

@media (max-width: 480px) {
    .page-hero { padding: 14px 16px; border-radius: 12px; }
    .page-hero-title { font-size: 18px; }
    .page-hero-desc { font-size: 13.5px; }
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
}

.stat-card .stat-label { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; }
.stat-card .stat-value { font-size: 24px; font-weight: 800; margin-top: 4px; }

.commission-hero {
    background: linear-gradient(135deg, var(--primary), #8a3706);
    color: #fff;
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.commission-hero .label { font-size: 13px; opacity: 0.85; }
.commission-hero .amount { font-size: 32px; font-weight: 800; margin-top: 4px; }

table.data-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
}

table.data-table th, table.data-table td {
    text-align: left;
    padding: 12px 14px;
    font-size: 13.5px;
    border-bottom: 1px solid var(--border);
}

table.data-table th {
    background: var(--bg-soft);
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.03em;
}

table.data-table tr:last-child td { border-bottom: none; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.badge-success { background: rgba(22,101,52,0.1); color: var(--secondary); }
.badge-pending { background: rgba(181,71,8,0.1); color: var(--primary); }
.badge-fail { background: #FEF3F2; color: #B42318; }
.badge-neutral { background: var(--bg-soft); color: var(--text-secondary); }

.txn-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
}

.txn-card .row1 { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 4px; }
.txn-card .row2 { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-secondary); }

@media (min-width: 761px) {
    .mobile-only { display: none; }
}
@media (max-width: 760px) {
    .desktop-only { display: none; }
}

/* ---------------- Agent nav (top bar, mobile and desktop) ---------------- */
/* Previously fixed to the bottom of the screen (mobile-only) — now a normal
   top bar that scrolls with the rest of the sidebar/header area and shows
   on both mobile and desktop, sitting right above the page content. */
.agent-bottom-nav {
    position: sticky;
    top: 0;
    /* Forces this onto its own full-width row above the sidebar/content
       row below it, since .dash-shell is now a wrapping flex container —
       without this, it would just squeeze in as a third narrow column
       next to the sidebar instead of a top bar. "order: -1" makes it claim
       that top row regardless of DOM position (it comes after the sidebar
       in the markup, but needs to render visually above it). */
    flex: 1 1 100%;
    order: -1;
    background: #fff;
    border-bottom: 2px solid var(--border);
    display: flex;
    z-index: 50;
    box-shadow: 0 6px 20px rgba(24,32,25,0.10);
    padding: 4px;
    gap: 4px;
}

.agent-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 4px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 12px;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.agent-bottom-nav .icon {
    font-size: 22px;
    line-height: 1;
}

/* Each destination gets its own accent color — soft tint when it's just an
   available option, solid bold fill (plus a slight lift) when it's the
   current page, so the active tab reads as clearly dominant rather than a
   thin text-color change. */
.agent-bottom-nav a:nth-child(1) { background: rgba(181, 71, 8, 0.10); color: var(--primary); }
.agent-bottom-nav a:nth-child(1).active { background: var(--primary); color: #fff; }

.agent-bottom-nav a:nth-child(2) { background: rgba(29, 78, 216, 0.10); color: #1D4ED8; }
.agent-bottom-nav a:nth-child(2).active { background: #1D4ED8; color: #fff; }

.agent-bottom-nav a:nth-child(3) { background: rgba(22, 101, 52, 0.10); color: var(--secondary); }
.agent-bottom-nav a:nth-child(3).active { background: var(--secondary); color: #fff; }

.agent-bottom-nav a:nth-child(4) { background: rgba(51, 65, 85, 0.10); color: #334155; }
.agent-bottom-nav a:nth-child(4).active { background: #334155; color: #fff; }

.agent-bottom-nav a.active {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(24,32,25,0.18);
}

@media (max-width: 860px) {
    /* .dash-shell switches to flex-direction:column below 860px (see the
       earlier @media block). In column direction, "flex: 1 1 100%" from
       the base rule above means flex-grow:1 — which made this compete
       with .dash-main for leftover vertical space and inflated its height
       on shorter pages. It only ever needed flex-basis:100% for the
       desktop full-width-row trick, never grow, so this pins it back down.
       (Placed after the base rule on purpose — an earlier attempt at this
       fix living inside the other, earlier @media block was silently
       overridden by the later unconditional rule above, since equal-
       specificity rules resolve by source order, not by which one's media
       query "sounds" more specific to the viewport.) */
    .agent-bottom-nav {
        flex-grow: 0;
        flex-basis: auto;
    }
}

/* No longer needs reserved bottom space since the bar isn't fixed over the
   content anymore — kept as a normal class so existing page markup
   (class="dash-main has-bottom-nav") doesn't need to change. */
.dash-main.has-bottom-nav {
    padding-bottom: 28px;
}

.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-secondary);
}

.settings-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
    overflow-x: auto;
}

.settings-tabs a {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.settings-tabs a.active { color: var(--primary); border-bottom-color: var(--primary); }

.color-swatch-input {
    display: flex;
    align-items: center;
    gap: 10px;
}

.color-swatch-input input[type="color"] {
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2px;
    background: #fff;
}