/* frontend-soft.css — "Pulseboard" soft layer for the public storefront + customer pages.
   Loaded last: end of <head> in includes/header.php AND just before <footer> in includes/footer.php
   (so it follows each page's own inline <style>). Same token family as admin-soft.css / sellers-soft.css.
   Look: soft grey canvas, floating pill nav (active = solid dark pill), 24px-radius white cards,
   pill buttons, pastel accents, light/airy Outfit type. Brand purple #4f46e5 stays the accent.
   NOTE: Tailwind CDN injects its utilities after this file, so rules that must beat a utility class
   use the `html body` prefix (higher specificity) instead of !important.
   Remove both <link> tags to revert. */

/* ── 1. TOKENS ─────────────────────────────────────────────── */
:root {
    --sf-acc: #4f46e5;
    --sf-acc-deep: #4338ca;
    --sf-acc-soft: rgba(100, 92, 255, .12);
    --sf-lime: #d9ff3f;
    --sf-r: 24px;
    --sf-r-sm: 16px;
    --sf-font: 'Outfit', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sf-dark: #15131f;
    --sf-pastel-1: #ffffff;
    --sf-pastel-2: #cfe0d4;
    --sf-pastel-3: #fcefa0;
    --sf-pastel-4: #c8c5ff;
    --sf-pastel-ink: #14121f;
    --sf-pastel-ink-2: #34323f;
    --accent: #4f46e5;
    --accent-hover: #4338ca;
}
[data-theme="light"] {
    --sf-canvas: #eef0f4;
    --sf-card: #ffffff;
    --sf-card-2: #f6f7fa;
    --sf-line: rgba(20, 18, 40, .07);
    --sf-ink: #14121f;
    --sf-ink-2: #3f3d4d;
    --sf-ink-3: #6b6a7a;
    --sf-shadow: 0 1px 2px rgba(20, 18, 40, .04), 0 12px 32px -20px rgba(20, 18, 40, .20);
    --sf-shadow-hover: 0 22px 40px -24px rgba(70, 61, 240, .45);

    --bg-page: #eef0f4;
    --bg-nav: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #ffffff;
    --bg-pill: #ffffff;
    --bg-dropdown: #ffffff;
    --bg-input: #f3f4f8;
    --bg-input-hover: #eceef4;
    --bg-mobile-menu: #ffffff;
    --border: rgba(20, 18, 40, .08);
    --border-hover: rgba(100, 92, 255, .40);
    --border-focus: rgba(100, 92, 255, .6);
    --text-link: #4338ca;
    --t-link: #4338ca;
    --text-secondary: #3f3d4d;
    --shadow-glow: rgba(70, 61, 240, .16);
    --pg-surface-1: #ffffff;
    --pg-surface-2: #f6f7fa;

    /* products / product / cart / wallet / dashboard page tokens */
    --pd-bg: #eef0f4;
    --pd-surface: #ffffff;
    --pd-surface-2: #ffffff;
    --pd-surface-3: #ffffff;
    --pd-border: rgba(20, 18, 40, .07);
    --pd-accent: #4338ca;
    --pd-accent-soft: rgba(100, 92, 255, .10);
    --pd-shadow-sm: 0 1px 2px rgba(20, 18, 40, .04), 0 8px 22px -16px rgba(20, 18, 40, .2);
    --pd-shadow-md: 0 22px 40px -24px rgba(70, 61, 240, .4);
    --db-bg: transparent;
    --db-surface: #ffffff;
    --db-surface-hover: #ffffff;
    --db-surface-2: #f4f5f9;
    --db-border: rgba(20, 18, 40, .07);
    --db-border-accent: rgba(100, 92, 255, .35);
    --db-t-link: #4338ca;
    --db-t-link-hover: #3027d6;
    --db-stat-num: #14121f;
    --db-stat-label: #3f3d4d;
    --db-gradient-text: linear-gradient(135deg, #14121f 0%, #4338ca 70%, #4f46e5 100%);
    /* index.php tokens */
    --page-bg: #eef0f4;
    --surface-1: #ffffff;
    --surface-2: #ffffff;
    --card-bg: #ffffff;
    --card-bg-hover: #ffffff;
    --card-border: rgba(20, 18, 40, .06);
    --card-border-hover: rgba(100, 92, 255, .4);
    --card-shadow-hover: rgba(70, 61, 240, .18);
    --t-accent: #4338ca;
    /* footer */
    --ft-bg: #ffffff;
    --ft-link-hover: #4338ca;
    --ld-bg: #eef0f4;
}
[data-theme="dark"] {
    --sf-canvas: #0d0c14;
    --sf-card: #1b1928;
    --sf-card-2: #232033;
    --sf-line: rgba(255, 255, 255, .08);
    --sf-ink: #f4f3fa;
    --sf-ink-2: #c9c7d8;
    --sf-ink-3: #9794ab;
    --sf-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 16px 34px -24px rgba(0, 0, 0, .85);
    --sf-shadow-hover: 0 22px 40px -24px rgba(100, 92, 255, .55);
    --sf-pastel-1: #1b1928;
    --sf-pastel-2: #243329;
    --sf-pastel-3: #3a3519;
    --sf-pastel-4: #2e2560;
    --sf-pastel-ink: #f4f3fa;
    --sf-pastel-ink-2: #cfcde0;

    --bg-page: #0d0c14;
    --bg-nav: #1b1928;
    --bg-pill: #232033;
    --bg-dropdown: #1f1c2d;
    --bg-mobile-menu: #1b1928;
    --text-link: #a6a1ff;
    --t-link: #a6a1ff;
    --pd-bg: #0d0c14;
    --pd-surface-3: #1b1928;
    --pd-accent: #8c86ff;
    --db-bg: transparent;
    --db-t-link: #a6a1ff;
    --db-t-link-hover: #c2bfff;
    --db-gradient-text: linear-gradient(135deg, #f4f3fa 0%, #a6a1ff 60%, #8c86ff 100%);
    --page-bg: #0d0c14;
    --t-accent: #a6a1ff;
    --ft-bg: #12111a;
}

/* ── 2. BASE ───────────────────────────────────────────────── */
html body {
    font-family: var(--sf-font);
    background-color: var(--bg-page);
}
html body :is(h1, h2, h3, h4) { font-family: var(--sf-font); letter-spacing: -.02em; }
html body :is(input, select, textarea, button) { font-family: inherit; }
html body :is(.pd-title, .ca-title, .pp-title, h1.text-4xl, h1.text-5xl, h1.text-6xl) { font-weight: 500; letter-spacing: -.035em; }
html body :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--sf-acc); outline-offset: 2px; }

/* ── 3. FLOATING PILL NAV ──────────────────────────────────── */
html body .glass-nav {
    top: 12px; left: 50%; right: auto;
    width: min(1320px, calc(100% - 24px));
    transform: translateX(-50%);
    border: 0;
    border-radius: 32px;
    background: var(--sf-card);
    box-shadow: var(--sf-shadow);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    padding-top: 0;
    margin-top: var(--safe-top);
}
html body .glass-nav::before { display: none; }
html body .glass-nav .lg\:h-20 { height: 68px; }
html body .glass-nav > div { padding-left: 14px; padding-right: 14px; }
html body .glass-nav .mobile-menu { border-radius: 0 0 32px 32px; background: var(--sf-card); }

/* links: text pills, active = solid dark pill */
html body .glass-nav .hidden.lg\:flex { gap: 2px; }
html body .glass-nav .nav-link {
    display: inline-flex; align-items: center; min-height: 42px;
    padding: 0 16px; margin: 0 !important; /* beats Tailwind space-x-* margins */
    border-radius: 9999px; font-weight: 400; color: var(--sf-ink-2);
    transition: background .18s ease, color .18s ease;
}
html body .glass-nav .nav-link::after { display: none; }
html body .glass-nav .nav-link:hover { background: var(--sf-card-2); color: var(--sf-ink); }
html body .glass-nav .nav-link.is-active { background: var(--sf-dark); color: #fff; font-weight: 500; }
[data-theme="dark"] body .glass-nav .nav-link.is-active { background: var(--sf-acc-deep); }

/* round icon buttons, wallet pill, avatar pill */
html body .icon-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--sf-card); border: 1px solid var(--sf-line); color: var(--sf-ink); }
html body .icon-btn:hover { background: var(--sf-card-2); border-color: rgba(100, 92, 255, .4); }
html body .cart-badge { background: var(--sf-lime); color: #14121f; background-image: none; }
html body .search-input { border-radius: 9999px; background: var(--bg-input); border: 1px solid transparent; }
html body .search-input:focus { border-color: var(--sf-acc); box-shadow: 0 0 0 3px var(--sf-acc-soft); background: var(--sf-card); }
html body .user-pill { border-radius: 9999px; background: var(--sf-card); border: 1px solid var(--sf-line); min-height: 44px; }
.pill-wallet { align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 9999px; border: 1px solid var(--sf-line); background: var(--sf-card); color: var(--sf-ink); text-decoration: none; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.pill-wallet:hover { background: var(--sf-card-2); }
.pill-wallet i { font-size: 13px; color: var(--sf-acc-deep); }
[data-theme="dark"] .pill-wallet i { color: #a6a1ff; }
html body .dropdown-menu { border-radius: 22px; border: 1px solid var(--sf-line); box-shadow: 0 24px 50px -24px rgba(20, 18, 40, .5); }
html body .dropdown-item { min-height: 42px; }

/* ── 4. BUTTONS ────────────────────────────────────────────── */
html body :is(.btn-primary, .pd-btn, .pp-btn, .ca-checkout-btn, .ca-continue, .sales-btn) { border-radius: 9999px; }
html body .btn-primary { background: linear-gradient(135deg, #4f46e5, #4338ca); box-shadow: 0 10px 24px -12px rgba(70, 61, 240, .65); }
html body .btn-primary:hover { box-shadow: 0 16px 30px -14px rgba(70, 61, 240, .75); }
html body :is(.btn-secondary, .pd-btn-ghost, .pp-btn-ghost) { border-radius: 9999px; background: var(--sf-card); border: 1px solid var(--sf-line); color: var(--sf-ink); }
html body :is(.btn-secondary, .pd-btn-ghost, .pp-btn-ghost):hover { background: var(--sf-card-2); }
html body :is(.pd-btn-primary, .pp-btn-primary, .ca-checkout-btn) { background: linear-gradient(135deg, #4f46e5, #4338ca); color: #fff; border-color: transparent; }

/* ── 5. CARDS / SURFACES ───────────────────────────────────── */
html body :is(.glass-card, .pd-card, .pp-card, .pp-panel, .pp-box, .ca-item, .ca-summary, .ca-payment, .th-card, .audience-card,
    .feature-item, .cat-pill, .hero-preview-card, .product-card-marketplace, .wl-card, .db-card, .db-welcome-banner,
    .final-cta, .pd-filter-bar, .pd-empty, .ca-empty, .conversion-strip, .service-banner, .crypto-banner) {
    background: var(--sf-card);
    border: 0;
    border-radius: var(--sf-r);
    box-shadow: var(--sf-shadow);
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
[data-theme="dark"] body :is(.glass-card, .pd-card, .pp-card, .pp-panel, .ca-item, .ca-summary, .th-card, .product-card-marketplace, .wl-card, .db-card) { border: 1px solid var(--sf-line); }
html body :is(.glass-card, .pd-card, .product-card-marketplace, .th-card, .cat-pill):hover { box-shadow: var(--sf-shadow-hover); border-color: transparent; }
html body :is(.pd-card, .product-card-marketplace) { overflow: hidden; }
html body :is(.pd-card-media, .product-image-wrap, .pp-card-media, .ca-item-thumb) { border-radius: 20px; }
html body .pd-card-media { background: var(--sf-pastel-4); }
html body .pd-grid > :nth-child(4n+2) .pd-card-media { background: var(--sf-pastel-2); }
html body .pd-grid > :nth-child(4n+3) .pd-card-media { background: var(--sf-pastel-3); }
html body .pd-grid > :nth-child(4n+4) .pd-card-media { background: var(--sf-pastel-1); }
html body :is(.pd-badge, .pp-badge, .ca-badge, .badge-rating, .th-badge-live, .pd-pill, .pd-pill-count, .pd-card-cat) { border-radius: 9999px; }
html body .pd-pill.active, html body .pd-pill[aria-pressed="true"], html body .pd-pill.is-active { background: var(--sf-dark); color: #fff; border-color: transparent; }
[data-theme="dark"] body :is(.pd-pill.active, .pd-pill[aria-pressed="true"], .pd-pill.is-active) { background: var(--sf-acc-deep); }
html body :is(.pd-search, .pd-select) { border-radius: 9999px; }
html body .pd-header { border-bottom: 0; }
html body .pd-title-gradient, html body .ca-title-gradient { background: linear-gradient(120deg, #4f46e5, #4338ca); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* hero (index) */
html body .hero-glow { opacity: .7; }
html body .hero-preview-card { padding-block: 4px; }
html body .final-cta { border-radius: 32px; }

/* forms */
html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) { border-radius: 14px; }
html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea):focus { border-color: var(--sf-acc); box-shadow: 0 0 0 3px var(--sf-acc-soft); outline: none; }
html body textarea { border-radius: 18px; }

/* checkout / cart / payment option surfaces */
html body .payment-option { border-radius: 20px; }
html body :is(#modalPanel, #reviewModalPanel, #depositModal > div > div, #withdrawModal > div > div, .cart-sidebar-inner) { border-radius: 28px; }
html body .cart-sidebar-inner { border-radius: 28px 0 0 28px; }
@media (max-width: 639px) { html body .cart-sidebar-inner { border-radius: 0; } }

/* ── 6. CUSTOMER DASHBOARD (dashboard.php) — pastel KPI tiles ── */
html body .db-page { background: transparent; }
html body .db-welcome-banner { padding: 26px 30px; border-radius: 28px; }
html body .db-welcome-text h1 { font-family: var(--sf-font); font-size: clamp(26px, 3vw, 36px); font-weight: 400; letter-spacing: -.03em; }
html body .db-page .db-stat-card {
    position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0;
    min-height: 148px; padding: 20px 20px 18px;
    border: 0; border-radius: var(--sf-r); box-shadow: none;
    background: var(--sf-pastel-1);
    --db-stat-num: var(--sf-pastel-ink); --db-stat-label: var(--sf-pastel-ink);
    color: var(--sf-pastel-ink);
}
html body .db-page .grid > .db-stat-card:nth-child(4n+1) { background: var(--sf-pastel-1); }
html body .db-page .grid > .db-stat-card:nth-child(4n+2) { background: var(--sf-pastel-2); }
html body .db-page .grid > .db-stat-card:nth-child(4n+3) { background: var(--sf-pastel-3); }
html body .db-page .grid > .db-stat-card:nth-child(4n+4) { background: var(--sf-pastel-4); }
html body .db-page .db-stat-card:hover { transform: translateY(-2px); box-shadow: var(--sf-shadow); }
html body .db-page .db-stat-card > div:not(.db-icon) { display: flex; flex-direction: column; flex: 1; width: 100%; }
html body .db-page .db-stat-num { order: 1; font-family: var(--sf-font); font-size: clamp(24px, 2.2vw, 32px); font-weight: 300; letter-spacing: -.035em; color: var(--sf-pastel-ink); padding-right: 34px; }
html body .db-page .db-stat-num.large { font-size: clamp(22px, 2vw, 28px); }
html body .db-page .db-stat-num.xlarge, html body .db-page .db-stat-num.xxlarge { font-size: clamp(18px, 1.7vw, 24px); }
html body .db-page .db-stat-label { order: 2; margin-top: auto; padding-top: 18px; font-size: 14.5px; font-weight: 400; letter-spacing: 0; color: var(--sf-pastel-ink-2); white-space: normal; }
html body .db-page .db-stat-card .db-icon { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; background: rgba(20, 18, 40, .07); display: grid; place-items: center; }
[data-theme="dark"] body .db-page .db-stat-card .db-icon { background: rgba(255, 255, 255, .10); }
/* the card keeps its real icon; the old decorative arrow glyph is gone */
html body .db-stat-card .db-icon :is(i, svg) { font-size: 15px; color: var(--sf-pastel-ink) !important; }
html body .db-row { border-radius: 16px; }
html body :is(.db-quick-btn, .db-badge, .db-type-tag, .db-seller-badge, .db-admin-pill, .db-avatar) { border-radius: 9999px; }
html body .db-quick-btn { min-height: 44px; }

/* ── 7. FOOTER ─────────────────────────────────────────────── */
html body .footer {
    width: min(1320px, calc(100% - 24px));
    margin: 40px auto 12px;
    border: 0;
    border-radius: 36px;
    background: var(--ft-bg);
    box-shadow: var(--sf-shadow);
    padding-inline: 12px;
}
html body :is(.footer-social-link, .footer-chip) { border-radius: 50%; }

/* ── 8. RESPONSIVE + MOTION ────────────────────────────────── */
@media (max-width: 1023px) {
    html body .glass-nav { top: 8px; width: calc(100% - 16px); border-radius: 28px; }
    html body .glass-nav .mobile-menu { border-radius: 0 0 28px 28px; }
}
@media (max-width: 639px) {
    html body .db-page .db-stat-card { min-height: 124px; padding: 14px; }
    html body .db-page .db-stat-card .db-icon { top: 10px; right: 10px; width: 28px; height: 28px; }
    html body .db-page .db-stat-num { padding-right: 24px; }
    html body .footer { width: calc(100% - 16px); border-radius: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    html body .glass-card, html body .db-page .db-stat-card, html body .pd-card, html body .glass-nav .nav-link { transition: none; }
    html body .glass-card:hover, html body .pd-card:hover, html body .db-page .db-stat-card:hover { transform: none; }
}

/* ── X (formerly Twitter) logo: replaces the old bird glyph (Font Awesome 6.4.0 has no X icon). ──
   Inline SVG mask, so it inherits the icon's text colour and size and needs no extra request. */
.fa-twitter::before,
.fa-x-twitter::before {
    content: "" !important;
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E") center / contain no-repeat;
}