/* =====================================================================
   FDW Customer Dashboard — base.css
   Design Tokens, Reset (scoped), Typography
===================================================================== */

/* ----------- Scoped reset (safe inside themes) ----------- */
.fdw-cd-app *,
.fdw-cd-app *::before,
.fdw-cd-app *::after { box-sizing: border-box; }

.fdw-cd-app img,
.fdw-cd-app svg,
.fdw-cd-app video { max-width: 100%; display: block; }

.fdw-cd-app button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

.fdw-cd-app a { color: inherit; text-decoration: none; }
.fdw-cd-app ul, .fdw-cd-app ol { list-style: none; padding: 0; margin: 0; }
.fdw-cd-app input,
.fdw-cd-app textarea,
.fdw-cd-app select { font-family: inherit; }


/* ----------- Design Tokens ----------- */
:root {
    /* Colors */
    --c-navy-950: #060d1c;
    --c-navy-900: #0a1628;
    --c-navy-800: #0f1f3a;
    --c-navy-700: #16294d;
    --c-teal-500: #14b8a6;
    --c-teal-400: #2dd4bf;
    --c-teal-300: #5eead4;
    --c-gold-500: #c9a961;
    --c-gold-400: #d4b876;
    --c-slate-50:  #f8fafc;
    --c-slate-100: #f1f5f9;
    --c-slate-200: #e2e8f0;
    --c-slate-300: #cbd5e1;
    --c-slate-400: #94a3b8;
    --c-slate-500: #64748b;
    --c-slate-600: #475569;
    --c-slate-700: #334155;
    --c-slate-800: #1e293b;
    --c-slate-900: #0f172a;
    --c-success: #10b981;
    --c-warning: #f59e0b;
    --c-danger:  #ef4444;
    --c-white: #ffffff;

    /* Typography */
    --font-display: 'Poppins', -apple-system, system-ui, sans-serif;
    --font-sans:    'Poppins', -apple-system, system-ui, sans-serif;

    /* Radii */
    --r-sm: 8px;
    --r:    14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;

    /* Shadows */
    --sh-sm: 0 1px 2px rgba(15,23,42,.04);
    --sh-md: 0 4px 16px -4px rgba(15,23,42,.08);
    --sh-lg: 0 16px 32px -8px rgba(15,23,42,.12);
    --sh-xl: 0 32px 64px -16px rgba(6,13,28,.25);

    /* Spacing scale */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;
    --s-20: 80px;

    /* Layout */
    --container: 1280px;

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --t: 0.3s var(--ease);
}


/* ----------- Body styling within FDW context ----------- */
body.fdw-cd-myaccount {
    background: var(--c-slate-50);
}

.fdw-cd-app {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--c-slate-700);
    -webkit-font-smoothing: antialiased;
}


/* ----------- Typography Scale (scoped, all Poppins) ----------- */
.fdw-cd-app .h1,
.fdw-cd-app h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--c-navy-900); margin: 0; }
.fdw-cd-app .h2,
.fdw-cd-app h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; font-size: clamp(1.4rem, 2.5vw, 1.75rem); color: var(--c-navy-900); margin: 0; }
.fdw-cd-app .h3,
.fdw-cd-app h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; font-size: 1.3rem; color: var(--c-navy-900); margin: 0; }
.fdw-cd-app h4 { font-family: var(--font-sans); font-weight: 600; font-size: 1.05rem; color: var(--c-navy-900); letter-spacing: -.01em; margin: 0; }
.fdw-cd-app h5 { font-family: var(--font-sans); font-weight: 600; font-size: .95rem; color: var(--c-navy-900); margin: 0; }

.fdw-cd-app .eyebrow {
    font-family: var(--font-sans); font-weight: 700;
    font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--c-teal-500);
    display: inline-flex; align-items: center; gap: 8px;
}
.fdw-cd-app .eyebrow::before {
    content: ''; width: 22px; height: 1px; background: currentColor;
}

.fdw-cd-app p   { color: var(--c-slate-600); margin: 0; }
.fdw-cd-app .muted { color: var(--c-slate-500); font-size: .92rem; }


/* ----------- Layout Helpers ----------- */
.fdw-cd-app .container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--s-6);
}


/* ----------- Visibility ----------- */
.fdw-cd-app .hide-mobile { display: block; }
.fdw-cd-app .show-mobile { display: none; }
@media (max-width: 768px) {
    .fdw-cd-app .hide-mobile { display: none !important; }
    .fdw-cd-app .show-mobile { display: block; }
}


/* -----------------------------------------------------------
   WC integration: hide WC's default sidebar on the dashboard
   tab, hide the WC/theme "My account" page heading, and let
   our login screen go truly full-bleed.
   ----------------------------------------------------------- */

/* Hide WC sidebar on the dashboard tab only */
.woocommerce-account.fdw-cd-fullwidth .woocommerce-MyAccount-navigation {
    display: none !important;
}
.woocommerce-account.fdw-cd-fullwidth .woocommerce-MyAccount-content {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide the "My account" page title and any default WC dashboard preamble. */
body.fdw-cd-myaccount .page-title,
body.fdw-cd-myaccount .entry-title,
body.fdw-cd-myaccount h1.entry-title,
body.fdw-cd-myaccount .woocommerce-products-header,
body.fdw-cd-myaccount header.entry-header,
body.fdw-cd-myaccount .page-header,
body.fdw-cd-myaccount .woocommerce > h1,
body.fdw-cd-myaccount .woocommerce > h2 {
    display: none !important;
}

/* On every WC My Account screen we render, break out of any narrow
   theme container so our markup spans the full viewport width. */
body.fdw-cd-myaccount .site-content,
body.fdw-cd-myaccount .entry-content,
body.fdw-cd-myaccount .site-main,
body.fdw-cd-myaccount .content-area,
body.fdw-cd-myaccount #primary,
body.fdw-cd-myaccount #content,
body.fdw-cd-myaccount .woocommerce {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* On the login screen specifically — make the hero start at the very
   top edge of the page, regardless of theme padding. */
body.fdw-cd-login .fdw-cd-login-screen {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}