/**
 * SayWOW. Design System — Foundation
 * =====================================
 * Canonical source of design tokens, utility classes, the button /
 * typography / bar system, and the page-shell container vocabulary for the
 * entire SayWOW ecosystem. Theme-independent (does NOT depend on
 * GeneratePress). Relocated from the child theme's sw-utilities.css per
 * decision D2 (00-ECOSYSTEM-ARCHITECTURE-REVIEW.md §12) and made the single
 * canonical token/utility/container source.
 *
 * Implements 00-SPEC-BRAND-DESIGN-SYSTEM.md v3.1 (§2.2 type, §4 buttons,
 * §8 tokens). Enqueued by saywow-design-system.php after GeneratePress +
 * WooCommerce CSS (no !important — cascade order does the work).
 *
 * :root is organised into THREE TIERS (decision D5):
 *   1. Structural        — network-fixed (spacing, radii, type, greys, etc.)
 *   2. Functional palette — network-fixed, NEVER skin-overridable
 *                           (red=commit, blue=flow, gold=winner, green=success)
 *   3. Brand-identity    — the ONLY skin-overridable subset (header + accent)
 * A future saywow-skins layer (V2) overrides Tier 3 ONLY. Keeping the
 * functional palette out of skin reach is a responsible-play requirement
 * (the "you're committing money" signal stays identical across skins).
 *
 * Version: 1.0.3
 * Company: Say Wow Ltd (No. 16220850)
 */


/* ================================================================
   1. CSS CUSTOM PROPERTIES
   Spec reference: Section 8
   ================================================================ */

:root {

    /* =================================================================
       TIER 1 — STRUCTURAL  (network-fixed; never skin-overridable)
       ================================================================= */

    /* Font */
    --sw-font: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Neutrals */
    --sw-grey-900: #212529;
    --sw-grey-500: #6B7280;
    --sw-grey-300: #9CA3AF;
    --sw-grey-200: #E5E7EB;
    --sw-grey-100: #F8F9FA;
    --sw-white: #FFFFFF;

    /* Font weights */
    --sw-fw-regular: 400;
    --sw-fw-medium: 500;
    --sw-fw-semibold: 600;
    --sw-fw-bold: 700;
    --sw-fw-extrabold: 800;

    /* Border radius */
    --sw-radius-sm: 6px;
    --sw-radius-md: 10px;
    --sw-radius-lg: 12px;
    --sw-radius-xl: 16px;

    /* Transitions */
    --sw-transition: all 0.2s ease;

    /* Shadows (carried from admin-pro design-tokens — G1 superset) */
    --sw-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --sw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --sw-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --sw-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* Z-index scale (carried from admin-pro design-tokens — G1 superset) */
    --sw-z-header: 1000;
    --sw-z-bar: 1001;
    --sw-z-dropdown: 1010;
    --sw-z-modal-backdrop: 1040;
    --sw-z-modal: 1050;
    --sw-z-tooltip: 1070;
    --sw-z-toast: 1080;

    /* Canonical container widths (D4 — primary = 1100; see LAYOUT section) */
    --sw-container-max: 1100px;
    --sw-container-narrow-max: 800px;
    --sw-container-wide-max: 1320px;


    /* =================================================================
       TIER 2 — FUNCTIONAL PALETTE  (network-fixed; NEVER skin-overridable)
       Skins must never reach these — the "you're committing money" signal
       stays identical across every skin (responsible-play requirement).
       ================================================================= */

    /* Flow-progression / links / secondary buttons */
    --sw-blue: #0052CC;
    --sw-blue-dark: #003D99;
    --sw-blue-darkest: #002D73;

    /* Principal CTA — commit-money / commit-identity / commit-engagement */
    --sw-red: #E63946;
    --sw-red-hover: #CF2F3C;
    --sw-red-active: #B82633;

    /* Winner / celebration accent */
    --sw-gold: #FFD700;
    --sw-gold-dark: #F0C800;

    /* Success / progress / completion */
    --sw-green: #28A745;
    --sw-green-hover: #218838;
    --sw-green-active: #1E7E34;

    /* Semantic message colours */
    --sw-success-bg: #D4EDDA;
    --sw-success-text: #155724;
    --sw-error-bg: #FEE2E5;
    --sw-error-text: #E63946;
    --sw-info-bg: #E8F0FE;
    --sw-info-text: #0052CC;
    --sw-warning-bg: #FFF3CD;
    --sw-warning-text: #856404;


    /* =================================================================
       TIER 3 — BRAND-IDENTITY  (the ONLY skin-overridable subset)
       Header colour + brand accent for banners / brand chrome. A future
       saywow-skins layer (V2) overrides ONLY these (domain-scoped :root
       override). SEPARATE tokens from the functional palette — a skin
       override cannot reach --sw-blue / --sw-red / --sw-gold / --sw-green.
       Maps to the skin spec's --sw-primary / --sw-secondary / --sw-bg.
       Defaults to the current SayWOW hexes → introducing them is a no-op.
       ================================================================= */
    --sw-primary: #0052CC;            /* master brand colour (own token, defaults to blue hex) */
    --sw-header: var(--sw-primary);   /* site / PWA header + brand chrome */
    --sw-secondary: #003D99;          /* brand secondary (brand chrome dark / banners) */
    --sw-bg: #F8F9FA;                 /* brand page background */


    /* =================================================================
       PWA SHELL  (consumed by saywow-pwa — carried from admin-pro; G1 superset)
       Header / nav chrome re-pointed onto the brand-identity tier so a skin
       recolours the PWA chrome with the rest of the brand. Defaults
       unchanged → no-op for SayWOW.
       ================================================================= */
    --pwa-header-height: 60px;
    --pwa-footer-height: 64px;
    --pwa-header-bg: var(--sw-header);     /* was var(--sw-blue) — re-pointed to brand (no-op) */
    --pwa-footer-bg: var(--sw-white);
    --pwa-nav-active: var(--sw-primary);   /* was var(--sw-blue) — re-pointed to brand (no-op) */
    --pwa-nav-inactive: var(--sw-grey-500);
    --pwa-safe-top: env(safe-area-inset-top, 0px);
    --pwa-safe-bottom: env(safe-area-inset-bottom, 0px);
    --pwa-safe-left: env(safe-area-inset-left, 0px);
    --pwa-safe-right: env(safe-area-inset-right, 0px);


    /* =================================================================
       LEGACY COMPATIBILITY BRIDGE  (admin-pro frontend only — G1 superset)
       Verbatim relocation of admin-pro's --saywow-* → --sw-* bridge so its
       surviving frontend stylesheets (public.css, demo-hub.css) keep
       resolving after admin-pro's token push is retired (D3). NOT part of
       the three-tier taxonomy. Slated for removal once admin-pro frontend
       CSS migrates to --sw-* (step 9 / §10.5.1 token-hygiene batch).
       ================================================================= */
    --saywow-primary: var(--sw-blue);
    --saywow-primary-dark: var(--sw-blue-dark);
    --saywow-primary-light: var(--sw-info-bg);
    --saywow-primary-50: var(--sw-info-bg);
    --saywow-secondary: var(--sw-blue-dark);
    --saywow-secondary-dark: var(--sw-blue-darkest);

    --saywow-gradient: linear-gradient(135deg, var(--sw-blue) 0%, var(--sw-blue-dark) 100%);
    --saywow-gradient-hover: linear-gradient(135deg, var(--sw-blue-dark) 0%, var(--sw-blue-darkest) 100%);

    --saywow-success: var(--sw-green);
    --saywow-success-dark: #218838;
    --saywow-success-light: var(--sw-success-bg);
    --saywow-success-bg: var(--sw-success-bg);

    --saywow-warning: #ED8936;
    --saywow-warning-dark: #DD6B20;
    --saywow-warning-light: var(--sw-warning-bg);
    --saywow-warning-bg: var(--sw-warning-bg);

    --saywow-danger: var(--sw-red);
    --saywow-danger-dark: var(--sw-red-hover);
    --saywow-danger-light: var(--sw-error-bg);
    --saywow-danger-bg: var(--sw-error-bg);

    --saywow-info: var(--sw-blue);
    --saywow-info-dark: var(--sw-blue-dark);
    --saywow-info-light: var(--sw-info-bg);
    --saywow-info-bg: var(--sw-info-bg);

    --saywow-gray-50: var(--sw-grey-100);
    --saywow-gray-100: var(--sw-grey-100);
    --saywow-gray-200: var(--sw-grey-200);
    --saywow-gray-300: var(--sw-grey-300);
    --saywow-gray-400: var(--sw-grey-300);
    --saywow-gray-500: var(--sw-grey-500);
    --saywow-gray-600: var(--sw-grey-500);
    --saywow-gray-700: var(--sw-grey-900);
    --saywow-gray-800: var(--sw-grey-900);
    --saywow-gray-900: var(--sw-grey-900);

    --saywow-text-primary: var(--sw-grey-900);
    --saywow-text-secondary: var(--sw-grey-500);
    --saywow-text-muted: var(--sw-grey-500);
    --saywow-text-light: var(--sw-grey-300);

    --saywow-bg-white: var(--sw-white);
    --saywow-bg-light: var(--sw-grey-100);
    --saywow-bg-gray: var(--sw-grey-200);

    --saywow-border: var(--sw-grey-200);
    --saywow-border-light: var(--sw-grey-100);
    --saywow-border-dark: var(--sw-grey-300);

    --saywow-font-sans: var(--sw-font);
    --saywow-font-primary: var(--sw-font);
    --saywow-font: var(--sw-font);

    --saywow-transition-fast: 150ms ease;
    --saywow-transition: var(--sw-transition);
    --saywow-transition-slow: 300ms ease;

    --saywow-primary-hover: var(--sw-blue-dark);
    --saywow-accent: var(--sw-blue);
}


/* ================================================================
   2. TYPOGRAPHY
   Spec reference: Section 2.2
   Usage: <h1 class="sw-display"> or <p class="sw-body-sm">
   ================================================================ */

.sw-display {
    font-family: var(--sw-font);
    font-size: 3rem;          /* 48px */
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.1;
    color: var(--sw-grey-900);
}

.sw-h1 {
    font-family: var(--sw-font);
    font-size: 2rem;          /* 32px */
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.2;
    color: var(--sw-grey-900);
}

.sw-h2 {
    font-family: var(--sw-font);
    font-size: 1.5rem;        /* 24px */
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.3;
    color: var(--sw-grey-900);
}

.sw-h3 {
    font-family: var(--sw-font);
    font-size: 1.125rem;      /* 18px */
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.4;
    color: var(--sw-grey-900);
}

.sw-h4 {
    font-family: var(--sw-font);
    font-size: 1rem;          /* 16px */
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.4;
    color: var(--sw-grey-900);
}

.sw-body {
    font-family: var(--sw-font);
    font-size: 1rem;          /* 16px */
    font-weight: 400;
    line-height: 1.6;
    color: var(--sw-grey-900);
}

.sw-body-medium {
    font-family: var(--sw-font);
    font-size: 1rem;          /* 16px */
    font-weight: 500;
    line-height: 1.5;
    color: var(--sw-grey-900);
}

.sw-body-sm {
    font-family: var(--sw-font);
    font-size: 0.875rem;      /* 14px */
    font-weight: 400;
    line-height: 1.5;
    color: #555;
}

.sw-caption {
    font-family: var(--sw-font);
    font-size: 0.75rem;       /* 12px */
    font-weight: 500;
    line-height: 1.4;
    color: #888;
}

.sw-price {
    font-family: var(--sw-font);
    font-size: 1.25rem;       /* 20px */
    font-weight: 800;
    line-height: 1.2;
    color: var(--sw-red);
}

.sw-price-lg {
    font-family: var(--sw-font);
    font-size: 1.75rem;       /* 28px */
    font-weight: 800;
    line-height: 1.2;
    color: var(--sw-red);
}

.sw-price-sm {
    font-family: var(--sw-font);
    font-size: 1rem;          /* 16px */
    font-weight: 800;
    line-height: 1.2;
    color: var(--sw-red);
}


/* ================================================================
   3. BUTTON SYSTEM — BASE
   Spec reference: Sections 4.1, 4.2, 4.3
   Usage: <a class="sw-btn sw-btn-primary sw-btn-lg">Enter Now</a>
   Always combine: sw-btn + variant + size
   ================================================================ */

.sw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--sw-font);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: var(--sw-transition);
    white-space: nowrap;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
}

.sw-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.3);
}

.sw-btn:active {
    transform: translateY(0);
    box-shadow: none;
}


/* ── Button sizes ── */

.sw-btn-lg {
    height: 52px;
    padding: 0 32px;
    min-width: 180px;
    font-size: 1rem;          /* 16px */
    font-weight: 700;
    border-radius: var(--sw-radius-lg);
}

.sw-btn-md {
    height: 44px;
    padding: 0 24px;
    min-width: 140px;
    font-size: 0.875rem;      /* 14px */
    font-weight: 700;
    border-radius: var(--sw-radius-md);
}

.sw-btn-sm {
    height: 36px;
    padding: 0 16px;
    min-width: 100px;
    font-size: 0.8rem;        /* 12.8px */
    font-weight: 600;
    border-radius: var(--sw-radius-sm);
}

.sw-btn-xs {
    height: 28px;
    padding: 0 12px;
    min-width: 70px;
    font-size: 0.75rem;       /* 12px */
    font-weight: 600;
    border-radius: 6px;
}

.sw-btn-full {
    width: 100%;
}


/* ── Button variants ── */

/* Primary — Action Red */
.sw-btn-primary {
    background: var(--sw-red);
    color: var(--sw-white);
}
.sw-btn-primary:hover {
    background: var(--sw-red-hover);
    color: var(--sw-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.35);
}
.sw-btn-primary:active {
    background: var(--sw-red-active);
    color: var(--sw-white);
}

/* Secondary — SayWOW Blue */
.sw-btn-secondary {
    background: var(--sw-blue);
    color: var(--sw-white);
}
.sw-btn-secondary:hover {
    background: var(--sw-blue-dark);
    color: var(--sw-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.35);
}
.sw-btn-secondary:active {
    background: var(--sw-blue-darkest);
    color: var(--sw-white);
}

/* Outline — Blue border */
.sw-btn-outline {
    background: transparent;
    color: var(--sw-blue);
    border: 2px solid var(--sw-blue);
}
.sw-btn-outline:hover {
    background: var(--sw-blue);
    color: var(--sw-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.35);
}
.sw-btn-outline:active {
    background: var(--sw-blue-dark);
    color: var(--sw-white);
}

/* Ghost — Transparent with blue text */
.sw-btn-ghost {
    background: transparent;
    color: var(--sw-blue);
}
.sw-btn-ghost:hover {
    background: rgba(0, 82, 204, 0.08);
    color: var(--sw-blue);
}
.sw-btn-ghost:active {
    background: rgba(0, 82, 204, 0.15);
    color: var(--sw-blue);
}

/* Success — Green */
.sw-btn-success {
    background: var(--sw-green);
    color: var(--sw-white);
}
.sw-btn-success:hover {
    background: var(--sw-green-hover);
    color: var(--sw-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.35);
}
.sw-btn-success:active {
    background: var(--sw-green-active);
    color: var(--sw-white);
}

/* Gold — Gradient, dark text */
.sw-btn-gold {
    background: linear-gradient(135deg, var(--sw-gold), var(--sw-gold-dark));
    color: var(--sw-grey-900);
}
.sw-btn-gold:hover {
    background: linear-gradient(135deg, #FFE033, var(--sw-gold));
    color: var(--sw-grey-900);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.35);
}
.sw-btn-gold:active {
    background: #E6C200;
    color: var(--sw-grey-900);
}

/* White Outline — For use on dark/blue backgrounds */
.sw-btn-white-outline {
    background: transparent;
    color: var(--sw-white);
    border: 2px solid var(--sw-white);
}
.sw-btn-white-outline:hover {
    background: var(--sw-white);
    color: var(--sw-blue);
    transform: translateY(-1px);
}
.sw-btn-white-outline:active {
    background: var(--sw-white);
    color: var(--sw-blue-dark);
}

/* Disabled — Greyed out, no interaction */
.sw-btn-disabled,
.sw-btn[disabled],
.sw-btn.disabled {
    background: var(--sw-grey-200);
    color: var(--sw-grey-300);
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}

/* ── Button extras (ported from admin-pro saywow-buttons.css — G1 superset) ── */

/* Danger — destructive actions. NOTE: off-brand hex + !important carried
   verbatim to preserve current behaviour; tokenise onto --sw-red at step 9
   (§10.6 off-brand values). */
.sw-btn-danger {
    background-color: #b91c1c !important;
    color: #ffffff !important;
    border: none;
}
.sw-btn-danger:hover {
    background-color: #991b1b !important;
    color: #ffffff !important;
}

/* Icon inside a button */
.sw-btn .sw-btn-icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

/* Icon-only square button */
.sw-btn-icon-only {
    min-width: unset;
    padding: 0;
    width: 44px;
}
.sw-btn-icon-only.sw-btn-lg { width: 52px; }
.sw-btn-icon-only.sw-btn-sm { width: 36px; }
.sw-btn-icon-only.sw-btn-xs { width: 28px; }

/* Button groups */
.sw-btn-group {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}
.sw-btn-group--stack {
    flex-direction: column;
}

/* Mobile-full + mobile-stack (mobile only) */
@media (max-width: 768px) {
    .sw-btn-mobile-full {
        width: 100%;
        min-width: unset;
    }
    .sw-btn-group--mobile-stack {
        flex-direction: column;
    }
    .sw-btn-group--mobile-stack .sw-btn {
        width: 100%;
    }
}


/* ================================================================
   4. COLOUR UTILITIES
   Usage: <span class="sw-text-blue"> or <div class="sw-bg-blue">
   ================================================================ */

/* Text colours */
.sw-text-blue      { color: var(--sw-blue); }
.sw-text-red       { color: var(--sw-red); }
.sw-text-gold      { color: var(--sw-gold); }
.sw-text-green     { color: var(--sw-green); }
.sw-text-dark      { color: var(--sw-grey-900); }
.sw-text-secondary { color: var(--sw-grey-500); }
.sw-text-muted     { color: var(--sw-grey-300); }
.sw-text-white     { color: var(--sw-white); }

/* Background colours */
.sw-bg-blue        { background-color: var(--sw-blue); }
.sw-bg-blue-dark   { background-color: var(--sw-blue-dark); }
.sw-bg-red         { background-color: var(--sw-red); }
.sw-bg-gold        { background-color: var(--sw-gold); }
.sw-bg-green       { background-color: var(--sw-green); }
.sw-bg-dark        { background-color: var(--sw-grey-900); }
.sw-bg-light       { background-color: var(--sw-grey-100); }
.sw-bg-white       { background-color: var(--sw-white); }


/* ================================================================
   5. LAYOUT
   Usage: <div class="sw-container"> or <div class="sw-card">
   ================================================================ */

/* Canonical container vocabulary (D4). Primary width = 1100px
   (--sw-container-max). The .sw-shell contract also adopts 1100.
   v1.0.2 (step 8): the deferred 1200->1100 flip is EXECUTED. The step-7
   transitional 1200 is retired now that /buy/ adopts the .sw-shell contract
   and is, at this point in the build, the only live frontend page consuming
   the SayWOW container (per Director confirmation, June 2026) — so the flip
   carries no width-regression risk elsewhere. Sequence note: the child-theme
   sw-utilities.css enqueue (which defined .sw-container at 1200) must be
   removed before/with this flip, else the old 1200 wins the cascade.
   The legacy .sw-narrow (1100, Simple CSS blob) is retired at step 9 — the
   provider does not define it, so there is no in-provider name collision. */
.sw-container {
    max-width: var(--sw-container-max);         /* 1100 — flip executed v1.0.2 (step 8) */
    margin: 0 auto;
    padding: 0 20px;
}

.sw-container-narrow {
    max-width: var(--sw-container-narrow-max);  /* 800 — unchanged */
    margin: 0 auto;
    padding: 0 20px;
}

.sw-container-wide {
    max-width: var(--sw-container-wide-max);    /* breakout (new canonical) */
    margin: 0 auto;
    padding: 0 24px;
}

/* True viewport breakout — escape the container entirely (hero banners,
   trust bars). Moved from the Simple CSS blob into the provider @ v1.0.3
   (step 9) — it's brand layout vocab, not a third-party patch. */
.sw-full-width {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* DEPRECATED alias — prefer .sw-container (now 1100 since v1.0.2). Retained so
   legacy markup using class "sw-narrow" still constrains to 1100 with no
   regression. Moved from the Simple CSS blob @ v1.0.3; retire once all live
   markup migrates "sw-narrow" -> "sw-container". */
.sw-narrow {
    max-width: var(--sw-container-max);
    margin-left: auto;
    margin-right: auto;
}

/* Brand info bar — reusable page-intro component. Moved from the Simple CSS
   blob into the provider @ v1.0.3 (step 9) — brand component, not a 3rd-party
   patch. Colours tokenised. */
.sw-info-bar {
    background-color: var(--sw-info-bg);
    border-left: 4px solid var(--sw-blue);
    color: var(--sw-grey-900);
    font-size: 20px;
    font-weight: 600;
    padding: 12px 20px;
    margin-bottom: 24px;
}

/* ----------------------------------------------------------------
   PAGE-SHELL CONTRACT (D4) — the provider OWNS this contract; consumers
   APPLY it by tagging <body class="sw-shell"> (saywow-pages for shortcode
   pages @ step 8 — APPLIED v1.0.2: /buy/ tags the body via a body_class
   filter; a body_class filter for WooCommerce pages @ step 10).
   Effect: neutralise GeneratePress's .inside-article inset and constrain
   content to the canonical SayWOW container (1100).
   SELECTORS: body.sw-shell .inside-article (+ > .entry-content) is the
   GP-standard page-wrapper DOM. This is the documented GP default; confirm
   it matches the live /buy/ DOM during deploy-test (gate G4) — if the live
   theme nests the content differently, adjust HERE (the provider owns the
   contract), not in saywow-pages.
   ---------------------------------------------------------------- */
body.sw-shell .inside-article {
    padding: 0;
    border: 0;
    background: transparent;
}
body.sw-shell .inside-article > .entry-content {
    max-width: var(--sw-container-max);
    margin-inline: auto;
    padding-inline: 20px;
}

.sw-card {
    background: var(--sw-white);
    border-radius: var(--sw-radius-lg);
    border: 1px solid var(--sw-grey-200);
    overflow: hidden;
}

.sw-card-padded {
    background: var(--sw-white);
    border-radius: var(--sw-radius-lg);
    border: 1px solid var(--sw-grey-200);
    padding: 24px;
    overflow: hidden;
}

.sw-card-body {
    padding: 16px 20px;
}

.sw-card-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--sw-grey-200);
}

.sw-divider {
    border: none;
    border-top: 1px solid var(--sw-grey-200);
    margin: 16px 0;
}


/* ================================================================
   6. STATUS BADGES
   Spec reference: Section 7 — UI Quick Reference
   Usage: <span class="sw-badge sw-badge-live">Live</span>
   ================================================================ */

.sw-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sw-font);
    font-size: 0.75rem;       /* 12px */
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.sw-badge-live {
    background: var(--sw-green);
    color: var(--sw-white);
}

.sw-badge-closing {
    background: var(--sw-red);
    color: var(--sw-white);
}

.sw-badge-coming-soon {
    background: var(--sw-blue);
    color: var(--sw-white);
}

.sw-badge-sold-out {
    background: var(--sw-grey-200);
    color: var(--sw-grey-500);
}

.sw-badge-winner {
    background: var(--sw-gold);
    color: var(--sw-grey-900);
}

/* Pill variant — rounded ends */
.sw-badge-pill {
    border-radius: 100px;
}


/* ================================================================
   7. SEMANTIC ALERTS
   Spec reference: Section 1.3
   Usage: <div class="sw-alert sw-alert-success">Saved!</div>
   ================================================================ */

.sw-alert {
    font-family: var(--sw-font);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 12px 16px;
    border-radius: var(--sw-radius-sm);
    line-height: 1.5;
}

.sw-alert-success {
    background: var(--sw-success-bg);
    color: var(--sw-success-text);
}

.sw-alert-error {
    background: var(--sw-error-bg);
    color: var(--sw-error-text);
}

.sw-alert-info {
    background: var(--sw-info-bg);
    color: var(--sw-info-text);
}

.sw-alert-warning {
    background: var(--sw-warning-bg);
    color: var(--sw-warning-text);
}


/* ================================================================
   8. DYNAMIC CONTENT BARS
   Spec reference: Section 6
   Usage: <div class="sw-bar sw-bar-winner-dark">🎉 Sarah won!</div>
   ================================================================ */

.sw-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--sw-font);
    font-size: 0.85rem;
    font-weight: 600;
    min-height: 40px;
    padding: 10px 20px;
    position: relative;
    z-index: 1001;
    animation: sw-bar-slide-in 0.3s ease;
}

@keyframes sw-bar-slide-in {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.sw-bar-close {
    position: absolute;
    right: 14px;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    font-size: 1rem;
    padding: 4px;
    line-height: 1;
}
.sw-bar-close:hover { opacity: 1; }

.sw-bar-cta {
    display: inline-flex;
    align-items: center;
    font-family: var(--sw-font);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--sw-transition);
}

/* Bar variants */
.sw-bar-winner-dark {
    background: var(--sw-grey-900);
    color: var(--sw-gold);
}
.sw-bar-winner-dark .sw-bar-cta {
    background: var(--sw-gold);
    color: var(--sw-grey-900);
}

.sw-bar-winner-gold {
    background: linear-gradient(135deg, var(--sw-gold), var(--sw-gold-dark));
    color: var(--sw-grey-900);
}
.sw-bar-winner-gold .sw-bar-cta {
    background: var(--sw-grey-900);
    color: var(--sw-gold);
}

.sw-bar-urgency-red {
    background: var(--sw-red);
    color: var(--sw-white);
}
.sw-bar-urgency-red .sw-bar-cta {
    background: var(--sw-white);
    color: var(--sw-red);
}

.sw-bar-urgency-dark {
    background: var(--sw-red-active);
    color: var(--sw-white);
}
.sw-bar-urgency-dark .sw-bar-cta {
    background: var(--sw-white);
    color: var(--sw-red-active);
}

.sw-bar-promo-blue {
    background: var(--sw-blue-dark);
    color: var(--sw-white);
}
.sw-bar-promo-blue .sw-bar-cta {
    background: var(--sw-white);
    color: var(--sw-blue-dark);
}

.sw-bar-promo-light {
    background: var(--sw-info-bg);
    color: var(--sw-blue);
}
.sw-bar-promo-light .sw-bar-cta {
    background: var(--sw-blue);
    color: var(--sw-white);
}

.sw-bar-info {
    background: var(--sw-grey-100);
    color: var(--sw-grey-900);
}
.sw-bar-info .sw-bar-cta {
    background: var(--sw-blue);
    color: var(--sw-white);
}

.sw-bar-success {
    background: var(--sw-success-bg);
    color: var(--sw-success-text);
}
.sw-bar-success .sw-bar-cta {
    background: var(--sw-green);
    color: var(--sw-white);
}

/* Countdown text — tabular figures */
.sw-countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Mobile bar adjustments */
@media (max-width: 768px) {
    .sw-bar {
        min-height: 36px;
        padding: 8px 14px;
        font-size: 0.75rem;
    }
    .sw-bar-cta {
        font-size: 0.65rem;
        padding: 3px 10px;
    }
}


/* ================================================================
   9. FORM ELEMENTS
   Spec reference: Section 7 — Form Focus
   Usage: <input class="sw-input"> or <select class="sw-select">
   ================================================================ */

.sw-input,
.sw-select,
.sw-textarea {
    font-family: var(--sw-font);
    font-size: 1rem;
    font-weight: 400;
    color: var(--sw-grey-900);
    background: var(--sw-white);
    border: 1px solid var(--sw-grey-200);
    border-radius: var(--sw-radius-sm);
    padding: 10px 14px;
    width: 100%;
    transition: var(--sw-transition);
    -webkit-appearance: none;
    appearance: none;
}

.sw-input:focus,
.sw-select:focus,
.sw-textarea:focus {
    outline: none;
    border-color: var(--sw-blue);
    box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.15);
}

.sw-input::placeholder,
.sw-textarea::placeholder {
    color: var(--sw-grey-300);
}

.sw-input-error {
    border-color: var(--sw-red);
}
.sw-input-error:focus {
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.15);
}

.sw-label {
    display: block;
    font-family: var(--sw-font);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sw-grey-900);
    margin-bottom: 6px;
}

.sw-help-text {
    font-family: var(--sw-font);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--sw-grey-500);
    margin-top: 4px;
}

.sw-error-text {
    font-family: var(--sw-font);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--sw-red);
    margin-top: 4px;
}


/* ================================================================
   10. LINKS
   Spec reference: Section 7 — Links
   Usage: <a href="#" class="sw-link">View details</a>
   ================================================================ */

.sw-link {
    color: var(--sw-blue);
    text-decoration: none;
    transition: var(--sw-transition);
}
.sw-link:hover {
    color: var(--sw-blue-dark);
    text-decoration: underline;
}

/* On dark backgrounds */
.sw-link-light {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: var(--sw-transition);
}
.sw-link-light:hover {
    color: var(--sw-white);
    text-decoration: underline;
}


/* ================================================================
   11. LOGO (SVG-based — Figma path exports)
   Spec reference: Section 3
   Header: inline SVG in saywow-gp-header-element.php
   Footer: <img> referencing saywow-logo-white-1.svg
   ================================================================ */

/* Footer logo image */

.sw-footer-logo-img {
    height: 36px;
    width: auto;
    display: block;

}

/* Legacy text classes — deprecated, kept for backward compat */
.sw-logo {
    font-family: var(--sw-font);
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1;
    color: var(--sw-white);
}

.sw-logo-blue {
    color: var(--sw-blue);
}

.sw-logo-dot {
    color: var(--sw-gold);
}


/* ================================================================
   12. WEIGHT & SPACING UTILITIES
   Quick helpers — use sparingly, prefer semantic classes above
   ================================================================ */

/* Font weights */
.sw-fw-400 { font-weight: 400; }
.sw-fw-500 { font-weight: 500; }
.sw-fw-600 { font-weight: 600; }
.sw-fw-700 { font-weight: 700; }
.sw-fw-800 { font-weight: 800; }

/* Text alignment */
.sw-text-left   { text-align: left; }
.sw-text-center { text-align: center; }
.sw-text-right  { text-align: right; }

/* Flex helpers */
.sw-flex        { display: flex; }
.sw-flex-col    { display: flex; flex-direction: column; }
.sw-flex-center { display: flex; align-items: center; justify-content: center; }
.sw-flex-between { display: flex; align-items: center; justify-content: space-between; }
.sw-gap-sm      { gap: 8px; }
.sw-gap-md      { gap: 16px; }
.sw-gap-lg      { gap: 24px; }

/* Spacing — vertical rhythm */
.sw-mt-0  { margin-top: 0; }
.sw-mt-sm { margin-top: 8px; }
.sw-mt-md { margin-top: 16px; }
.sw-mt-lg { margin-top: 24px; }
.sw-mt-xl { margin-top: 40px; }
.sw-mb-0  { margin-bottom: 0; }
.sw-mb-sm { margin-bottom: 8px; }
.sw-mb-md { margin-bottom: 16px; }
.sw-mb-lg { margin-bottom: 24px; }
.sw-mb-xl { margin-bottom: 40px; }

/* Padding */
.sw-p-0   { padding: 0; }
.sw-p-sm  { padding: 8px; }
.sw-p-md  { padding: 16px; }
.sw-p-lg  { padding: 24px; }
.sw-p-xl  { padding: 40px; }

/* Border radius */
.sw-rounded-sm { border-radius: var(--sw-radius-sm); }
.sw-rounded-md { border-radius: var(--sw-radius-md); }
.sw-rounded-lg { border-radius: var(--sw-radius-lg); }
.sw-rounded-xl { border-radius: var(--sw-radius-xl); }
.sw-rounded-full { border-radius: 100px; }

/* Visibility */
.sw-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Responsive hide/show */
@media (max-width: 768px) {
    .sw-hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
    .sw-hide-desktop { display: none !important; }
}

/* ----------------------------------------------------------------
   LOGIN-STATE VISIBILITY UTILITIES
   Relocated from the legacy Simple CSS blob (§1 'LOGGED IN/OUT VISIBILITY')
   into the provider so the gating is delivered reliably site-wide and no
   longer depends on the blob loading/winning. Pattern (e.g. My Account):
   content is wrapped in `.loggedout` / `.loggedin`; WordPress adds the
   `logged-in` class to <body> for authenticated users. Identical to the
   blob copy — the blob's §1 becomes redundant once this is live.
   ---------------------------------------------------------------- */
.logged-in .loggedout {
    display: none !important;
}
.loggedin {
    display: none !important;
}
.logged-in .loggedin {
    display: inline-block !important;
}