/* ==========================================================
   2. GLOBAL VARIABLES & BASE STYLES (base.css)
   ========================================================== */

:root {
    /* =========================================
       CORE PALETTE (Immutable)
       ========================================= */
    --p-sky-blue: #0ea5e9;
    --p-teal: #14b8a6;
    --p-white: #ffffff;

    /* Layout */
    --header-height: 80px;
    --container-padding: clamp(1rem, 5vw, 2rem);
    --border-radius-btn: 12px;
    --glass-blur: blur(12px);

    /* =========================================
       LIGHT THEME (Default)
       ========================================= */

    /* Backgrounds */
    --bg-main: linear-gradient(145deg, #f8fcff 0%, #f1fbff 100%);
    --bg-surface: rgba(255, 255, 255, 0.85);
    --bg-header: linear-gradient(135deg, var(--p-sky-blue), var(--p-teal));
    --bg-input: #ffffff;

    /* Text */
    --text-main: #0f172a;
    --text-muted: #64748b;
    --text-header: #ffffff;

    /* Borders */
    --border-subtle: rgba(14, 165, 233, 0.15);

    /* Accents */
    --sky-blue: var(--p-sky-blue);
    --teal: var(--p-teal);
    --white: var(--p-white);

    /* Shadows */
    --shadow-card: 0 10px 25px -5px rgba(14, 165, 233, 0.1), 0 8px 10px -6px rgba(14, 165, 233, 0.05);
}

/* =========================================
   DARK THEME (Midnight)
   ========================================= */
[data-theme="dark"] {
    /* Backgrounds */
    --bg-main: #0b1121;
    /* Solid deep midnight */
    --bg-surface: #1e293b;
    /* Solid slate, no opacity */
    --bg-header: #1e293b;
    --bg-input: #0f172a;

    /* Text */
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --text-header: #f1f5f9;

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.12);

    /* Accents */
    --sky-blue: #38bdf8;
    --teal: #2dd4bf;

    /* Shadows */
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    :root {
        --header-height: 70px;
        --container-padding: 16px;
    }
}

/* ----------------------------------------------------------
   RESET & FUNDAMENTALS
   ---------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box !important;
}

html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    position: relative;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    color: var(--text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    /* Prevent font inflation on mobile */
    -webkit-text-size-adjust: 100%;
}

@media (max-width: 768px) {

    /* Prevent iOS Zoom on focus */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

html {
    scroll-padding-top: var(--header-height);
}

body {
    line-height: 1.6;
}

/* Headings Upgrade */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    line-height: 1.2;
}

h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    /* Dynamic scaling */
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
}

h3 {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
}

p {
    font-size: 1rem;
    margin-bottom: 1rem;
}

/* Base Link Styles */
a {
    color: var(--sky-blue);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--teal);
}

a:active,
button:active {
    transform: scale(0.96);
    opacity: 0.8;
}

/* Responsive Images */
img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ----------------------------------------------------------
   GLOBAL ANIMATIONS
   ---------------------------------------------------------- */
@keyframes pulse {

    0%,
    100% {
        opacity: 0.6;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}

@keyframes floatGlow {
    0% {
        transform: translateY(0);
        opacity: 0.7;
    }

    100% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

@keyframes floatGlowAuth {
    0% {
        opacity: 0.7;
        transform: translateY(0);
    }

    100% {
        opacity: 1;
        transform: translateY(-10px);
    }
}

@keyframes fadeSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes subtleFloat {
    0% {
        transform: translateY(0);
        opacity: 0.7;
    }

    100% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

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

@keyframes gradientMove {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(14, 165, 233, 0.4);
    }

    50% {
        box-shadow: 0 0 35px rgba(14, 165, 233, 0.8);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Utility: Hidden */
.hidden {
    display: none !important;
}

/* Footer Centering */
footer,
.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

/* ----------------------------------------------------------
   GLOBAL UTILITY CLASSES
   ---------------------------------------------------------- */

/* Muted / secondary text */
.muted {
    color: var(--text-muted);
}

/* Small text */
.small {
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Gradient headline text */
.gradient-text {
    background: linear-gradient(135deg, var(--sky-blue), var(--teal));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Safe fallback for unsupported browsers */
    color: var(--sky-blue);
}

/* Trust logos / icon row container */
.trust-logos {
    text-align: center;
    margin-top: 1.5rem;
}

.logo-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.75rem;
}
/* ──────── MAP CHOICE MODAL ──────── */
.map-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.map-modal.active {
    display: flex;
}

.map-modal-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    cursor: pointer;
}

.map-modal-content {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: var(--b-surface);
    border-radius: 28px;
    padding: 2.25rem;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--b-border-2);
    z-index: 1;
}

.map-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.map-modal-header h3 {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--b-text);
}

.map-modal-close {
    background: var(--b-surface-2);
    border: none;
    color: var(--b-text-3);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.map-modal-close:hover {
    background: var(--b-surface-3);
    color: var(--b-text);
    transform: rotate(90deg);
}

.map-modal-desc {
    font-size: var(--b-text-base);
    color: var(--b-text-3);
    margin-bottom: 2rem;
    line-height: 1.5;
}

.map-options-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.map-option-btn {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
    background: var(--b-surface-2);
    border: 1px solid var(--b-border);
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--b-text);
}

.map-option-btn:hover {
    background: var(--b-surface-3);
    border-color: var(--b-primary-dim);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
}

.map-option-icon {
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    flex-shrink: 0;
}

[data-theme="dark"] .map-option-icon {
    background: #1e293b;
    border: 1px solid rgba(255,255,255,0.1);
}

.google-maps .map-option-icon { color: #4285F4; }
.apple-maps .map-option-icon { color: #000; }
[data-theme="dark"] .apple-maps .map-option-icon { color: #fff; }

.map-option-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.map-option-title {
    font-weight: 700;
    font-size: 1.05rem;
}

.map-option-sub {
    font-size: 0.8rem;
    color: var(--b-text-4);
}

.map-option-chevron {
    color: var(--b-text-4);
    opacity: 0.5;
}

.map-option-btn:hover .map-option-chevron {
    opacity: 1;
    color: var(--b-primary);
}
/* ==========================================================
   3. LAYOUT STRUCTURES (layout.css)
   ========================================================== */

/* ----------------------------------------------------------
   HEADER / NAVBAR
   ---------------------------------------------------------- */
header.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    height: var(--header-height);
    background: var(--bg-header);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(14, 165, 233, 0.25);
    padding: 0.5rem var(--container-padding);
}

@media (max-width: 768px) {
    header.site-header {
        padding: 0.5rem 1.5rem;
        /* Increased side padding for breathing room */
    }
}

.nav-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    /* Ensure full height for vertical centering */
}

.logo {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--white);
    /* Always white in header usually? Or theme? */
    /* If dark mode header uses dark bg, text needs to be white. 
       If light mode header uses vibrant bg, text is white. 
       So stick to white for header elements unless I change header bg heavily.
       The new dark mode header is dark slate. White text works. 
       So no change needed for .logo color if it remains white. */
    color: #ffffff;
    gap: 0.5rem;
    min-height: 44px;
    /* Touch target fix */
    min-width: 44px;
    /* Touch target fix */
}

.nav-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--white);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 10px;
    margin-right: 5px;
    transition: transform 0.2s;
    min-width: 44px;
    min-height: 44px;
}

.nav-back-btn:active {
    transform: scale(0.9);
}

/* Hide back button on desktop if preferred, or keep it. 
   User focused on mobile. Let's keep it visible but maybe smaller on desktop? 
   Actually, usually hidden on desktop web apps unless it's a specific "Back to X" link.
   I'll hide it on desktop by default and show on mobile.
*/
.nav-back-btn {
    display: none;
}

@media (max-width: 768px) {
    .nav-back-btn {
        display: flex;
    }
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Desktop Structure Fixes */
.nav-content-wrap {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}

.nav-primary,
.nav-secondary,
.nav-special,
.nav-bottom,
.nav-guest {
    display: contents;
    /* Flattens groups so links participate in the main flex container */
}

.nav-identity,
.nav-divider {
    display: none;
}

.icon {
    display: none;
    /* Hide icons on desktop */
}



.nav-link {
    color: var(--text-header);
    font-weight: 500;
    padding: 10px;
    /* Increase hit area */
}

.nav-link:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.nav-link.active {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 🍔 Hamburger Button */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
    min-width: 44px;
    min-height: 44px;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px 0;
    background-color: var(--white);
    transition: all 0.3s ease;
    border-radius: 3px;
}

/* Nav Actions (Mobile Only in Global Nav) */
.nav-action-btn,
.nav-action-link {
    display: none;
}

.icon-sm {
    width: 16px;
    height: 16px;
}

/* Mobile Overrides for Actions (Show in Hamburger) */
@media (max-width: 900px) {
    .nav-action-btn {
        display: flex;
        background: transparent !important;
        border: none;
        padding: 12px 0;
        width: 100%;
        justify-content: flex-start;
        font-size: 1.1rem;
        color: var(--muted);
        align-items: center;
        gap: 0.5rem;
        padding-left: 5px;
    }

    .nav-action-link {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        color: var(--muted);
        font-size: 1.1rem;
        padding-left: 5px;
        padding: 12px 0 12px 5px;
    }
}


/* ----------------------------------------------------------
   HERO SECTION (Layout)
   ---------------------------------------------------------- */
.hero,
.vibrant-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--header-height) + 6rem) var(--container-padding) 8rem;
    background: var(--bg-main);
    overflow: hidden;
    width: 100%;
}

@media (max-width: 768px) {
    .hero,
    .vibrant-hero {
        padding: calc(var(--header-height) + 3rem) var(--container-padding) 5rem;
    }
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 40%, rgba(14, 165, 233, 0.15), transparent 60%),
        radial-gradient(circle at 70% 60%, rgba(20, 184, 166, 0.15), transparent 60%);
    animation: floatGlow 16s ease-in-out infinite alternate;
    z-index: 0;
}

.hero-content {
    max-width: 800px;
    width: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero h1,
.hero-title {
    color: var(--text-main);
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.hero p,
.hero-subtext {
    max-width: 650px;
    margin: 0 auto 2rem;
    color: var(--text-muted);
    font-size: 1.15rem;
    /* Slightly larger for readability */
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

/* Find A Professional Hero */
.find-hero {
    text-align: center;
    padding: 6rem var(--container-padding) 4rem;
    background: var(--bg-main);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.find-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 25% 35%, rgba(14, 165, 233, 0.15), transparent 70%),
        radial-gradient(circle at 75% 65%, rgba(20, 184, 166, 0.15), transparent 70%);
    z-index: 0;
    animation: floatGlow 16s ease-in-out infinite alternate;
}

.find-hero .hero-inner {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.find-hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 1rem;
}

.find-hero p {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* ----------------------------------------------------------
   .v2 MAIN WRAPPER — must be full width so children
   with width:100% resolve correctly inside flex body
   ---------------------------------------------------------- */
.v2 {
    width: 100%;
}

/* ----------------------------------------------------------
   LOOKING SERVICES SECTION (home page service discovery)
   ---------------------------------------------------------- */
.looking-services {
    text-align: center;
    padding: 5rem var(--container-padding) 4rem;
    width: 100%;
}

.looking-services h2 {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text-main);
}

.looking-services > p {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .looking-services {
        padding: 3.5rem var(--container-padding) 3rem;
    }
}

/* ----------------------------------------------------------
   FOOTER CTA SECTION (home page bottom call-to-action)
   ---------------------------------------------------------- */
.footer-cta {
    position: relative;
    text-align: center;
    padding: 6rem var(--container-padding);
    background: var(--bg-main);
    overflow: hidden;
    width: 100%;
}

/* Override the global fixed-position .animated-bg when inside footer-cta */
.footer-cta .animated-bg {
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at 25% 35%, rgba(14, 165, 233, 0.15), transparent 70%),
        radial-gradient(circle at 75% 65%, rgba(20, 184, 166, 0.15), transparent 70%);
    filter: blur(80px);
    animation: floatGlowAuth 18s ease-in-out infinite alternate;
    z-index: 0 !important;
    pointer-events: none !important;
}

.footer-inner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.footer-inner h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.footer-inner p {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .footer-cta {
        padding: 4rem var(--container-padding);
    }
}

/* ----------------------------------------------------------
   AUTH CONTAINER LAYOUT
   ---------------------------------------------------------- */
.auth-container.vibrant-auth {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-main);
    overflow: hidden;
}

.auth-container.vibrant-auth.dashboard-mode {
    /* Special override case if dashboard uses this class */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.auth-container .animated-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 25% 35%, rgba(14, 165, 233, 0.15), transparent 70%),
        radial-gradient(circle at 75% 65%, rgba(20, 184, 166, 0.15), transparent 70%);
    filter: blur(100px);
    animation: floatGlowAuth 18s ease-in-out infinite alternate;
    z-index: 0;
}

/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */
footer.site-footer {
    background: var(--bg-main);
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
    border-top: 1px solid var(--border-subtle);
    margin-top: auto;
}

/* ----------------------------------------------------------
   RESPONSIVE LAYOUT
   ---------------------------------------------------------- */
@media (max-width: 768px) {

    /* Show Hamburger */
    .hamburger {
        display: block;
    }

    /* Active Hamburger State */
    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 6px);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -6px);
    }

    /* Mobile Nav Overlay - Elite Upgrade */
    .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        /* Glassmorphism */
        background: var(--bg-card);
        /* increased opacity for legibility on light bg, user asked 0.1 but that is too transparent for light mode without dark mode toggles explicitly handled. I'll stick to a nice frosted glass look */
        /* Actually, let's try to honor the "0.1" request BUT with a blur it might work if there's content behind. 
           However, standard layout body is white/light. 
           I will use a stronger white to ensure contrast, or a blur. 
           Let's interpret "rgba(255, 255, 255, 0.1)" as a style directive but ensuring usability.
           If I strictly use 0.1, it's basically invisible. 
           I'll use a "Glassy" white. */
        background: var(--bg-surface);

        /* Safe fallback for legibility */
        @supports (backdrop-filter: blur(15px)) {
            background: var(--bg-surface);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        /* Top align for new structure */
        gap: 0;
        /* Handled by internal spacing */

        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        /* Apple-esque ease */
        padding: 0;
        /* Reset padding, we will pad the content */
        z-index: 998;

        /* Inner Glow / Glass Edge */
        box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2);
        border-left: 1px solid rgba(255, 255, 255, 0.4);
    }

    .nav-content-wrap {
        padding: calc(var(--header-height) + 2rem) 2rem 2rem 2rem;
        overflow-y: auto;
    }

    .nav-links.active {
        transform: translateX(0);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
    }

    /* 2. Premium Typography & Hierarchy */
    /* User Identity */
    .nav-identity {
        display: block;
        margin-bottom: 2.5rem;
        perspective: 1000px;
    }

    .user-info {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .avatar-circle {
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, var(--sky-blue), var(--teal));
        border-radius: 50%;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1.2rem;
        box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
    }

    .user-text {
        display: flex;
        flex-direction: column;
    }

    .user-greeting-label {
        font-size: 0.8rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .user-name {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text-main);
        font-family: 'Inter', sans-serif;
    }

    /* Links General */
    .nav-link {
        width: 100%;
        text-align: left;
        padding: 12px 0;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        transition: transform 0.1s ease, color 0.2s;
    }

    /* Tappable Feedback */
    .nav-link:active {
        transform: scale(0.97);
    }

    .nav-link.active {
        background: linear-gradient(90deg, rgba(14, 165, 233, 0.15), transparent);
        border-right: 4px solid var(--sky-blue);
        border-radius: 0;
        color: var(--sky-blue);
    }

    /* Primary Links */
    .primary-link {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--text-main);
    }

    .primary-link .icon {
        font-size: 1.2rem;
        opacity: 0.8;
        width: 30px;
        text-align: center;
    }

    /* Secondary Links */
    .secondary-link {
        font-size: 1.1rem;
        font-weight: 500;
        color: var(--text-muted);
        padding-left: 5px;
        /* Subtle offset */
    }

    .nav-question-section {
        margin-top: 1rem;
    }

    /* 3. Special Buttons (Upgrade) */
    .nav-special {
        margin: 2rem 0;
    }

    .premium-btn {
        background: linear-gradient(135deg, #fffbeb, #fef3c7);
        color: #b45309 !important;
        border: 1px solid #fde68a;
        border-radius: 12px;
        padding: 1rem 1.2rem;
        justify-content: space-between;
        font-weight: 700;
        font-size: 1.1rem;
        box-shadow: 0 4px 15px rgba(251, 191, 36, 0.2), 0 0 0 1px rgba(251, 191, 36, 0.1);
        animation: pulseGold 3s infinite;
        position: relative;
        overflow: hidden;
    }

    .premium-btn .gem {
        font-size: 1.2rem;
    }

    /* 4. Bottom / Logout */
    .nav-bottom {
        margin-top: auto;
        padding-bottom: 2rem;
    }

    .nav-divider {
        height: 1px;
        background: var(--border-subtle);
        margin: 1rem 0 1.5rem;
    }

    .logout-link {
        color: #ef4444 !important;
        font-weight: 600;
        font-size: 1.1rem;
        justify-content: flex-start;
    }

    /* Hero Text Adjustments for mobile */
    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .find-hero {
        padding: 5rem 1.5rem 3rem;
    }

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

@keyframes pulseGold {
    0% {
        box-shadow: 0 4px 15px rgba(251, 191, 36, 0.2), 0 0 0 0 rgba(251, 191, 36, 0.4);
    }

    70% {
        box-shadow: 0 4px 15px rgba(251, 191, 36, 0.2), 0 0 0 10px rgba(251, 191, 36, 0);
    }

    100% {
        box-shadow: 0 4px 15px rgba(251, 191, 36, 0.2), 0 0 0 0 rgba(251, 191, 36, 0);
    }
}

@media (max-width: 900px) {
    .animated-bg {
        position: fixed !important;
        inset: 0 !important;
        z-index: -1 !important;
        pointer-events: none !important;
    }

    html,
    body {
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
    }


}/* ==========================================================
   4. COMPONENTS (components.css)
   ========================================================== */

/* ----------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.8rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--border-radius-btn);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: none;
    min-height: 48px;
    /* Touch target size */
}

.gradient-btn {
    background: linear-gradient(135deg, var(--sky-blue), var(--teal));
    color: #fff;
    font-weight: 600;
    border: none;
    border-radius: var(--border-radius-btn);
    padding: 0.9rem 2rem;
    box-shadow: 0 10px 15px -3px rgba(14, 165, 233, 0.3);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.gradient-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(14, 165, 233, 0.4);
}

.gradient-btn:active,
.btn:active {
    transform: scale(0.96);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

/* Shimmer Effect */
.gradient-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.4), transparent);
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: width 0.3s ease, height 0.3s ease;
}

.gradient-btn:hover::after {
    width: 250px;
    height: 250px;
}

/* Button Variants */
.gradient-btn.full-width {
    display: flex;
    width: 100%;
}

.gradient-btn.large {
    display: flex;
    /* Changed from block for centering if needed */
    width: auto;
    min-width: 180px;
    font-size: 1.1rem;
}

.btn-primary.gradient-btn {
    /* Used in dashboard actions */
    padding: 0.75rem 1.5rem;
    border-radius: 0.65rem;
    box-shadow: 0 6px 18px rgba(14, 165, 233, 0.25);
}

.btn-secondary {
    background: #fff;
    color: var(--sky-blue);
    border: 2px solid var(--sky-blue);
    border-radius: var(--border-radius-btn);
    padding: 0.9rem 1.8rem;
    font-weight: 600;
    transition: all 0.25s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
}

.btn-secondary:hover {
    background: var(--sky-blue);
    color: #fff;
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.3);
}

.btn-premium {
    background: transparent;
    border: 2px solid var(--teal);
    color: var(--teal);
    padding: 0.8rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 48px;
}

.btn-premium:hover {
    background: linear-gradient(to right, var(--sky-blue), var(--teal));
    color: #fff;
}

.floating-demo-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: linear-gradient(to right, var(--sky-blue), var(--teal));
    color: #fff;
    font-weight: 700;
    padding: 1rem 1.8rem;
    border-radius: 50px;
    box-shadow: 0 10px 25px rgba(14, 165, 233, 0.35);
    text-decoration: none;
    transition: all 0.3s ease;
    z-index: 900;
    /* Lower than mobile nav overlay (998) */
    animation: pulseGlow 3s infinite;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.floating-demo-btn:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 15px 40px rgba(14, 165, 233, 0.45);
}

/* Standalone .btn.large — gradient CTA button */
.btn.large {
    font-size: 1.05rem;
    padding: 1rem 2.2rem;
    background: linear-gradient(135deg, var(--sky-blue), var(--teal));
    color: #fff;
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.3);
}

.btn.large:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(14, 165, 233, 0.45);
    color: #fff;
}

/* Hero Button Group */
.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 2.5rem;
    position: relative;
    z-index: 1;
    width: 100%;
}

.hero-buttons .btn.large {
    margin-top: 0;
    /* Reset margin */
    flex: 1;
    max-width: 220px;
    /* Prevent overly wide buttons on desktop */
}

/* ----------------------------------------------------------
   CARDS
   ---------------------------------------------------------- */
.card {
    /* Generic Dashboard Card */
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    border-radius: 24px;
    padding: clamp(1rem, 5%, 2.5rem);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.01);
    border: 1px solid rgba(14, 165, 233, 0.1);
    margin-bottom: 2rem;

    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
    max-width: min(92%, 1200px);

    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(14, 165, 233, 0.12);
}

.card h3 {
    margin-bottom: 1rem;
    color: var(--text-dark);
    font-weight: 700;
}

/* Feature Card (Landing) */
.features-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 2rem;
    width: 100%;
    max-width: 1200px;
    margin: 4rem auto;
    padding: 0 var(--container-padding);
}

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

/* Override: when .features-section is used as a block wrapper
   (not as a direct card grid), switch to block layout */
.features-section.section-block {
    display: block;
}

.feature-card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04);
    /* Softer, modern shadow */
    border: 1px solid rgba(14, 165, 233, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
    display: flex;
    flex-direction: column;

    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
    max-width: min(92%, 1200px);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.feature-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(14, 165, 233, 0.08), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-card h3 {
    font-size: 1.25rem;
    color: var(--text-dark);
    font-weight: 700;
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
}

.feature-card p {
    font-size: 1rem;
    color: var(--muted);
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

/* Auth Card */
.auth-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(16px);
    border-radius: 1.5rem;
    padding: 3rem 2.5rem;
    box-shadow: 0 12px 40px rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(14, 165, 233, 0.12);
    width: 100%;
    max-width: 650px;
    position: relative;
    z-index: 2;
    animation: fadeSlideUp 1.2s ease forwards;
    opacity: 0;
    transform: translateY(30px);
}

/* Login specific max-width override via CSS specificity or separate rule */


/* ----------------------------------------------------------
   BUBBLES
   ---------------------------------------------------------- */
.service-bubbles {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 3rem auto;
    width: 100%;
    max-width: 1000px;
    padding: 0 var(--container-padding);
}

.bubble {
    position: relative;
    width: 160px;
    /* Reduced specific width for better fit */
    height: 160px;
    border-radius: 40px;
    /* Modern squircle-ish */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    background: linear-gradient(145deg, var(--sky-blue), var(--teal));
    box-shadow: 0 10px 20px rgba(14, 165, 233, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bubble:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 30px rgba(14, 165, 233, 0.3);
}

.bubble img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.bubble::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(14, 165, 233, 0.2) 100%);
    transition: all 0.3s ease;
}

.bubble:hover img {
    opacity: 0.65;
}

.bubble:hover::after {
    background: rgba(0, 0, 0, 0.35);
}

.bubble span {
    position: relative;
    z-index: 2;
    font-size: 1.05rem;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.bubble-small {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: linear-gradient(145deg, rgba(14, 165, 233, 0.15), rgba(20, 184, 166, 0.15));
    color: var(--text-dark);
    box-shadow: 0 5px 15px rgba(14, 165, 233, 0.15);
    margin: 0.5rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bubble-small:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 10px 25px rgba(14, 165, 233, 0.25);
}

.logo-dot {
    width: 12px;
    height: 12px;
    background: var(--white);
    border-radius: 50%;
    animation: pulse 2.5s infinite ease-in-out;
}

/* ----------------------------------------------------------
   FORMS
   ---------------------------------------------------------- */
.input-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem 2rem;
}

.input-group.full {
    grid-column: 1 / -1;
}

.input-group label,
.find-form label,
.form-field span {
    font-weight: 600;
    color: var(--text-dark);
    display: block;
    margin-bottom: 0.5rem;
}

.input-group input,
.input-group select,
.input-group textarea,
.find-form input,
.find-form select,
.form-field input {
    width: 100%;
    padding: 0.9rem 1rem;
    font-size: 1rem;
    font-family: "Poppins", system-ui, sans-serif;
    background: rgba(255, 255, 255, 0.9);
    border: 1.5px solid rgba(14, 165, 233, 0.15);
    border-radius: 0.65rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    outline: none;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus,
.find-form input:focus,
.find-form select:focus,
.form-field input:focus {
    border-color: var(--sky-blue);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.input-group input::placeholder,
.input-group textarea::placeholder,
.find-form input::placeholder {
    color: #94a3b8;
}

/* Custom Select Arrow */
.input-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%230ea5e9' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px 8px;
}

.input-group textarea {
    resize: vertical;
    min-height: 100px;
}

/* Search Form (Find a Pro) */
.find-form form {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    padding: 2rem 2.5rem;
    border-radius: 1.25rem;
    box-shadow: 0 10px 25px rgba(14, 165, 233, 0.15);
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

/* ----------------------------------------------------------
   LINKS & MISC
   ---------------------------------------------------------- */
.signup-link {
    background: var(--white);
    color: var(--sky-blue);
    border-radius: 0.6rem;
    padding: 0.5rem 1rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
    transition: transform 0.2s, opacity 0.2s;
}

.signup-link:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.signup-link-text {
    color: var(--sky-blue);
    font-weight: 600;
    text-decoration: none;
}

.signup-link-text:hover {
    text-decoration: underline;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(14, 165, 233, 0.2);
    border-top-color: var(--teal);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
}

/* Alerts */
.alert {
    padding: 0.75rem 1rem;
    background: #e0f7ff;
    border-left: 4px solid #0ea5e9;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Glass Card Utility (Wow Effect) */
.wow-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 2rem;
    padding: 3rem;
    box-shadow: 0 8px 32px 0 rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.wow-card:hover {
    box-shadow: 0 12px 40px 0 rgba(14, 165, 233, 0.25);
    border-color: rgba(255, 255, 255, 0.8);
}

/* Responsive Overrides */
@media (max-width: 768px) {
    .wow-card {
        padding: 2rem 1.5rem;
        border-radius: 1.5rem;
        background: rgba(255, 255, 255, 0.5);
        /* Slightly more transparent on mobile */
    }

    .service-bubbles {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .bubble {
        width: 100%;
        /* Fill the grid cell */
        height: auto;
        aspect-ratio: 1;
        /* Keep proper shape */
        border-radius: 20px;
        font-size: 1rem;
    }

    .bubble span {
        font-size: 0.95rem;
    }

    .card,
    .feature-card {
        padding: 1.5rem;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .hero-buttons .btn.large {
        width: 100%;
        max-width: none;
    }
}/* ==========================================================
   5. DASHBOARD STYLES (dashboard.css)
   ========================================================== */

/* ----------------------------------------------------------
   DASHBOARD LAYOUT
   ---------------------------------------------------------- */
.dashboard {
    /* Auto-adjust container width */
    width: min(100%, 1200px);
    max-width: 100%;
    margin: 0 auto;

    /* Safe padding that scales + Safe Area awareness */
    padding: 1.5rem clamp(1rem, 5vw, 2rem);
    padding-left: calc(clamp(1rem, 5vw, 2rem) + var(--b-safe-left));
    padding-right: calc(clamp(1rem, 5vw, 2rem) + var(--b-safe-right));
    padding-bottom: calc(2rem + var(--b-safe-bottom));

    position: relative;
    color: var(--text-main);
    background: var(--bg-main);
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Global Overflow Fix */
html,
body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

.dashboard * {
    box-sizing: border-box;
}

.dashboard input,
.dashboard button {
    max-width: 100%;
}

@media (min-width: 1024px) {
    .dashboard {
        max-width: 1200px;
        /* Cap width on desktop */
        padding: 2rem;
    }
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Mobile default */
    gap: 2rem;
}

/* 1. Grid Reflow: Desktop only affects larger screens */
@media (min-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: 2fr 1fr;
        align-items: start;
    }
}

/* 2. Central Card Utility - Safe Widths & Glassmorphism */
/* Elite Bento Glassmorphism */
.central-card,
.appointments-card,
.hours-card,
.promo-card,
.card {
    /* Safe Mobile Widths */
    width: 100%;
    max-width: 100%;
    margin: 0 auto 1.5rem auto !important;
    box-sizing: border-box !important;

    /* Bento Glassmorphism */
    border-radius: 24px;
    /* Updated radius */
    background: var(--bg-surface);
    /* Updated opacity */

    /* Visual Polish: Inner Borders & Softer Shadows */
    border: 1px solid rgba(14, 165, 233, 0.15);

    @supports (backdrop-filter: blur(12px)) {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    /* Elite Shadows */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
    0 4px 6px -2px rgba(0, 0, 0, 0.01);

    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tablet Specifics (768px) */
@media (max-width: 768px) {
    .dashboard {
        padding: 1rem clamp(1.5rem, 5vw, 3rem);
    }

    .dashboard-grid {
        gap: 1.5rem;
        /* Reduce gap on tablet */
    }

    .central-card,
    .appointments-card,
    .hours-card,
    .promo-card,
    .card {
        margin-bottom: 1.5rem;
    }
}

/* Helper for mobile button */
.mobile-view-calendar-btn {
    display: none;
    margin-top: 1rem;
    text-align: center;
}

.dashboard .animated-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 40%, rgba(14, 165, 233, 0.08), transparent 60%),
        radial-gradient(circle at 70% 60%, rgba(20, 184, 166, 0.08), transparent 60%);
    z-index: 0;
    animation: floatGlow 14s ease-in-out infinite alternate;
    pointer-events: none;
}

[data-theme="dark"] .dashboard .animated-bg {
    display: none;
    /* Hide glow on dark mode to prevent milkiness */
}

/* Common Button Active State */
button:active,
.btn:active,
.btn-primary:active {
    transform: scale(0.98);
}

/* ----------------------------------------------------------
   DARK MODE HOURS EDITOR
   ---------------------------------------------------------- */
[data-theme="dark"] .hours-row {
    background: #1e293b;
    /* Slate 800 */
    border-color: #334155;
}

[data-theme="dark"] .hours-row:hover {
    border-color: var(--sky-blue);
    background: #1e293b;
}

[data-theme="dark"] .day-label {
    color: #f1f5f9;
}

[data-theme="dark"] .time-inputs input[type="time"] {
    background: #0f172a;
    /* Slate 900 */
    color: #f1f5f9;
    border-color: #334155;
}

[data-theme="dark"] .time-inputs input[type="time"]:focus {
    border-color: var(--sky-blue);
}

/* Header */
.dash-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    /* Glassmorphism for header too */
    /* Glassmorphism for header too */
    /* Glassmorphism for header too */
    background: var(--bg-surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: blur(12px);

    padding: 1.8rem 2rem;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(14, 165, 233, 0.1);
    position: relative;
    z-index: 1;
    margin-bottom: 2.5rem;
    max-width: 100%;
    overflow-wrap: break-word;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

@media (max-width: 1024px) {
    .dash-head {
        flex-direction: column;
        align-items: stretch;
        /* Full width children */
        text-align: center;
        gap: 1.5rem;
        padding: 1.5rem 1rem;
    }

    .dash-head-actions {
        justify-content: center;
        width: 100%;
        margin-top: 0.5rem;
    }

    /* Ensure buttons inside actions take full width or share space nicely */
    .dash-head-actions .nav-action-btn {
        flex: 1;
        justify-content: center;
        min-width: 120px;
        /* Don't get too small */
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .dash-head-actions {
        flex-direction: column;
    }

    .dash-head-actions .nav-action-btn {
        width: 100%;
    }
}



.dash-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    width: 100%;
    margin-top: 1.25rem;
    margin-bottom: 2rem;
    /* Breathing room for Add Appointment */
}

.dash-actions button,
.dash-actions a {
    width: 100%;
}

/* Sidebar */
.sidebar-sticky {
    position: sticky;
    top: calc(var(--header-height) + 20px);
}

.sidebar-sticky .card {
    margin-bottom: 1.5rem;
}


/* ----------------------------------------------------------
   INSIGHTS & APPOINTMENTS
   ---------------------------------------------------------- */
.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 1;
}

.insight-card {
    background: var(--bg-surface);
    border-radius: 1rem;
    padding: 1.5rem 1.8rem;
    text-align: center;
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    flex-grow: 1;
    /* Fluid Width */
    flex-basis: 0;
    /* Align perfectly */
    /* Removed min-width for full fluidity */
    margin: 0 auto;
    /* Centering Logic */
}

.insight-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(14, 165, 233, 0.15);
    z-index: 2;
    /* Bring to front on hover */
}

.insight-card h4 {
    font-size: 1.1rem;
    color: var(--muted);
    margin-bottom: 0.4rem;
}

.insight-card p {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--sky-blue);
    text-align: center;
    /* Enforce center alignment */
}

/* Appointments Table */
.appointments-card {
    background: var(--bg-surface);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(14, 165, 233, 0.08);
    margin-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    max-height: 420px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
}

[data-theme="dark"] .appointments-card {
    background: linear-gradient(145deg, #1e293b 0%, #334155 100%);
    border: 1px solid rgba(56, 189, 248, 0.2);
    /* Sky blue tint */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.appointments-card h3 {
    margin-bottom: 0;
    /* Let container handle gap */
    color: var(--text-main);
    font-weight: 700;
    flex-shrink: 0;
}

.appt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-right: 1.5rem;
    /* Fix View All Overflow */
}

.appt-header a {
    /* Align 'View All' to right edge */
    margin-left: auto;
}

@media (max-width: 480px) {
    .appt-header {
        flex-direction: column;
        text-align: center;
    }

    .appt-header button {
        width: 100%;
        margin-top: 0.5rem;
    }
}

/* ----------------------------------------------------------
   TABLE SCROLL COMPONENT
   ---------------------------------------------------------- */
.table-scroll {
        width: 100%;
        /* Vertical Scroll for Desktop/All */
        max-height: 400px;
        overflow-y: auto;
        overflow-x: auto;
        /* Allow horizontal if needed (mobile) */
        -webkit-overflow-scrolling: touch;
        border-radius: 0.6rem;
        border: 1px solid rgba(14, 165, 233, 0.08);
        background: var(--bg-surface-secondary);
        position: relative;

        /* Visual Hint for scrolls (subtle) */
        scrollbar-width: thin;
        scrollbar-color: var(--sky-blue) rgba(240, 250, 255, 0.7);
    }

    .table-scroll::-webkit-scrollbar {
        height: 6px;
        width: 6px;
    }

    .table-scroll::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, var(--sky-blue), var(--teal));
        border-radius: 1rem;
    }

    .table-scroll::-webkit-scrollbar-track {
        background: rgba(240, 250, 255, 0.7);
    }

    .table {
        width: 100%;
        border-collapse: collapse;
        min-width: 100%;
        /* Ensure it fills container */
    }

    .table th,
    .table td {
        padding: 1rem 1.25rem;
        text-align: left;
        border-bottom: 1px solid rgba(14, 165, 233, 0.08);
    }

    /* Sticky Header */
    .table th {
        background: var(--bg-surface);
        color: var(--text-muted);
        font-weight: 600;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        position: sticky;
        top: 0;
        z-index: 10;
        /* Ensure over rows */
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    }

    .table td {
        color: var(--text-main);
        font-size: 0.95rem;
        white-space: nowrap;
        /* Prevent wrapping for clean rows */
    }

    /* Mobile Specific Tweaks for Table */
    @media (max-width: 768px) {
        .table-scroll {
            /* On mobile, ensure horizontal scroll is obvious */
            display: block;
            max-height: 500px;
            /* Allow a bit more height on mobile if needed */

            /* Mobile Scroll Hint Gradients */
            background:
                linear-gradient(to right, var(--bg-surface-secondary) 30%, rgba(255, 255, 255, 0)),
                linear-gradient(to right, rgba(255, 255, 255, 0), var(--bg-surface-secondary) 70%) 0 100%,
                radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)),
                radial-gradient(farthest-side at 100% 50%, rgba(14, 165, 233, 0.15), rgba(0, 0, 0, 0)) 100%;
            background-repeat: no-repeat;
            background-attachment: local, local, scroll, scroll;
            background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
        }

        .table th,
        .table td {
            padding: 0.85rem 1rem;
        }
    }

    .table td a {
        color: var(--sky-blue);
        text-decoration: none;
        font-weight: 500;
    }

    .table td a:hover {
        text-decoration: underline;
    }

    /* Status Badges within Table */
    .status-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.25rem 0.75rem;
        border-radius: 99px;
        font-size: 0.65rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
        line-height: 1;
    }

    .status-booked {
        background: #e0f2fe;
        color: #0284c7;
    }

    .status-completed {
        background: #dcfce7;
        color: #16a34a;
    }

    .status-cancelled {
        background: #fee2e2;
        color: #dc2626;
    }

    .cancel-btn {
        background: #fff;
        color: #ef4444;
        /* Red text */
        border: 1px solid #fee2e2;
        border-radius: 6px;
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
        font-weight: 600;
        transition: all 0.2s ease;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .cancel-btn:hover {
        background: #fee2e2;
        border-color: #fecaca;
        color: #dc2626;
        transform: translateY(-1px);
    }

    .cancel-btn.confirm-state {
        background: #dc2626;
        color: white;
        border-color: #b91c1c;
        box-shadow: 0 4px 6px rgba(220, 38, 38, 0.25);
        animation: pulseRed 0.5s ease-in-out;
    }

    @keyframes pulseRed {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.05);
        }

        100% {
            transform: scale(1);
        }
    }

    /* ----------------------------------------------------------
   HOURS EDITOR
   ---------------------------------------------------------- */


    .hours-card {
        background: var(--bg-surface);
        padding: 2rem 1.5rem;
        border-radius: 1.25rem;
        box-shadow: 0 10px 35px rgba(14, 165, 233, 0.08);
        margin: 1.5rem auto;
        position: relative;
        overflow: visible !important;
        max-width: 640px;
    }

    [data-theme="dark"] .hours-card {
        background: linear-gradient(145deg, #1e293b 0%, #334155 100%);
        border: 1px solid rgba(56, 189, 248, 0.2);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    }

    .hours-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 20% 30%, rgba(14, 165, 233, 0.08), transparent 60%),
            radial-gradient(circle at 80% 70%, rgba(20, 184, 166, 0.08), transparent 60%);
        animation: subtleFloat 12s ease-in-out infinite alternate;
        z-index: 0;
        pointer-events: none;
    }

    .hours-header {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
        position: relative;
        z-index: 1;
    }

    .hours-header h3 {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-main);
    }

    .copy-all {
        background: linear-gradient(135deg, var(--sky-blue), var(--teal));
        color: #fff;
        font-weight: 600;
        border: none;
        border-radius: 0.6rem;
        padding: 0.6rem 1.2rem;
        box-shadow: 0 6px 18px rgba(14, 165, 233, 0.25);
        cursor: pointer;
        transition: all 0.25s ease;
    }

    .copy-all:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(20, 184, 166, 0.35);
    }

    .hours-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        justify-content: center;
    }

    @media (max-width: 768px) {
        .hours-grid {
            grid-template-columns: 1fr;
        }

        .time-inputs input[type="time"] {
            flex: 1;
        }
    }

    .day-editor {
        transition: transform 0.25s ease,
            box-shadow 0.25s ease;
        text-align: center;
        position: relative;
    }

    .day-editor:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 24px rgba(14, 165, 233, 0.15);
    }

    .day-editor h4 {
        font-size: 1.05rem;
        margin-bottom: 1rem;
        color: var(--text-main);
        font-weight: 600;
    }

    .toggle-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 1rem;
    }

    .day-toggle {
        width: 40px;
        height: 22px;
        border-radius: 12px;
        background: rgba(14, 165, 233, 0.2);
        position: relative;
        cursor: pointer;
        transition: background 0.25s ease;
    }

    .day-toggle::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 16px;
        height: 16px;
        background: #fff;
        border-radius: 50%;
        transition: transform 0.25s ease;
    }

    .day-toggle.active {
        background: linear-gradient(135deg, var(--sky-blue), var(--teal));
    }

    .day-toggle.active::after {
        transform: translateX(18px);
    }

    .time-inputs {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.6rem;
    }

    .time-inputs input[type="time"] {
        border: 1.5px solid rgba(14, 165, 233, 0.15);
        border-radius: 0.5rem;
        padding: 0.5rem 0.7rem;
        font-family: "Poppins", system-ui, sans-serif;
        font-size: 0.95rem;
        transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .time-inputs input[type="time"]:focus {
        border-color: var(--sky-blue);
        box-shadow: 0 0 6px rgba(14, 165, 233, 0.25);
    }

    .hours-collapse {
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: all 0.4s ease;
        visibility: hidden;
    }

    .hours-collapse.active {
        opacity: 1;
        visibility: visible;
        max-height: 800px;
    }

    .edit-hours-btn {
        background: linear-gradient(135deg, var(--sky-blue), var(--teal));
        color: #fff;
        font-weight: 600;
        border: none;
        border-radius: 0.6rem;
        padding: 0.6rem 1.2rem;
        box-shadow: 0 6px 18px rgba(14, 165, 233, 0.25);
        cursor: pointer;
        transition: all 0.25s ease;
        position: relative;
        z-index: 5;

        /* Auto Width & Centered */
        width: auto;
        display: block;
        margin: 1rem auto 0 auto;
    }

    .edit-hours-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(20, 184, 166, 0.35);
    }

    .save-check {
        font-size: 1.1rem;
        margin-top: 0.6rem;
        color: var(--teal);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .day-editor.saved .save-check {
        opacity: 1;
    }


    .promo-card {
        position: relative;
        background: var(--bg-surface);
        border-radius: 1.25rem;
        padding: 2rem;
        margin-top: 2rem;
        box-shadow: 0 10px 35px rgba(14, 165, 233, 0.15),
            0 0 60px rgba(20, 184, 166, 0.1);
        overflow: hidden;
        border: 1px solid var(--border-subtle);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        backdrop-filter: blur(10px);

        /* Mobile Specific: Shrink & Center */
        max-width: 340px;
        width: 100%;
        margin: 2rem auto 1.5rem auto;
        padding: 1rem;
    }

    .promo-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(14, 165, 233, 0.25),
            0 0 70px rgba(20, 184, 166, 0.15);
    }

    .promo-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top left, rgba(14, 165, 233, 0.15), transparent 60%),
            radial-gradient(circle at bottom right, rgba(20, 184, 166, 0.1), transparent 60%);
        animation: gradientMove 12s ease-in-out infinite alternate;
        opacity: 0.5;
        z-index: 0;
    }

    .promo-header {
        position: relative;
        z-index: 1;
        margin-bottom: 1.25rem;
        text-align: center;
    }

    .dashboard-banner {
        background: linear-gradient(135deg, #f0faff, #e0f7ff);
        border-bottom: 1px solid #bae6fd;
        color: #0369a1;
    }

    .dash-avatar-wrapper {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        overflow: hidden;
        border: 3px solid #fff;
        box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
    }

    .promo-header h3 {
        color: var(--text-main);
        font-size: 1.5rem;
        font-weight: 700;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    }

    .promo-header p {
        color: var(--text-muted);
        font-size: 1rem;
        margin-top: 0.4rem;
    }

    .promo-body {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        /* Stack on mobile default */
        width: 100%;
        gap: 1rem;
        align-items: center;
    }

    .promo-body input {
        flex: 1;
        /* min-width removed */
        width: 100%;
        padding: 0.9rem 1.2rem;
        border-radius: 0.75rem;
        border: 1.5px solid rgba(14, 165, 233, 0.2);
        background: var(--bg-input);
        color: var(--text-main);
        font-weight: 600;
        font-size: 1rem;
        letter-spacing: 0.3px;
        outline: none;
        transition: all 0.25s ease;
    }

    .promo-body input::placeholder {
        color: #94a3b8;
    }

    .promo-body input:focus {
        border-color: var(--sky-blue);
        box-shadow: 0 0 8px rgba(14, 165, 233, 0.25);
    }

    .promo-body button {
        background: linear-gradient(135deg, var(--sky-blue), var(--teal));
        border: none;
        border-radius: 0.75rem;
        color: #fff;
        font-weight: 700;
        font-size: 1rem;
        padding: 0.9rem 1.5rem;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 8px 25px rgba(14, 165, 233, 0.25);

        /* Full Width CTA */
        width: 100%;
    }

    .promo-body button:hover {
        transform: scale(1.05);
        box-shadow: 0 12px 35px rgba(14, 165, 233, 0.35);
    }

    .promo-msg {
        margin-top: 1rem;
        font-size: 0.95rem;
        text-align: center;
        color: var(--teal);
        font-weight: 500;
    }

    /* Toast */
    .toast {
        position: fixed;
        bottom: 1.5rem;
        right: 1.5rem;
        background: var(--sky-blue);
        color: #fff;
        padding: 0.9rem 1.5rem;
        border-radius: 0.65rem;
        font-weight: 500;
        box-shadow: 0 8px 20px rgba(14, 165, 233, 0.3);
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.4s ease, transform 0.4s ease;
        z-index: 1000;
    }

    .toast.show {
        opacity: 1;
        transform: translateY(0);
    }

    /* Upload Loading Overlay */
    .upload-overlay {
        position: fixed;
        inset: 0;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(5px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
    }

    .upload-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .spin-icon {
        width: 48px;
        height: 48px;
        border: 4px solid #e0f2fe;
        border-top: 4px solid var(--sky-blue);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 1rem;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    /* Upgrade Banner */
    .upgrade-banner {
        background: linear-gradient(135deg, var(--sky-blue), var(--teal));
        color: #fff;
        padding: 1rem 1.5rem;
        border-radius: 0.75rem;
        margin-bottom: 1.5rem;
        text-align: center;
        font-weight: 500;

        /* Center Bottom Card */
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
        box-shadow: 0 8px 20px rgba(14, 165, 233, 0.25);
        animation: slideDown 0.5s ease-out;
    }

    .upgrade-banner a {
        color: #fff;
        text-decoration: underline;
        margin-left: 0.5rem;
        font-weight: 700;
    }

    .upgrade-banner a:hover {
        text-decoration: none;
        opacity: 0.9;
    }

    /* Premium Drop */
    #premiumDrop {
        overflow: hidden;
        transform: translateY(-10px);
        opacity: 0;
        max-height: 0;
        transition: all 0.5s ease;
    }

    #premiumDrop:not(.hidden) {
        opacity: 1;
        transform: translateY(0);
        max-height: 800px;
    }

    .premium-drop {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 12px;
        padding: 1.5rem;
        margin-top: 1rem;
        animation: fadeIn 0.4s ease;
    }

    .plan-summary {
        background: rgba(255, 255, 255, 0.05);
        padding: 0.8rem;
        border-radius: 8px;
        margin-bottom: 1rem;
    }

    /* Video Thumb */
    video.media-thumb {
        width: 33%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 0.75rem;
        box-shadow: 0 4px 14px rgba(14, 165, 233, 0.15);
        transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease;
        background: #000;
        opacity: 0.95;
        will-change: transform;
        display: block;
    }

    video.media-thumb:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 18px rgba(14, 165, 233, 0.3);
        opacity: 1;
    }

    /* Responsive Dashboard Specifics */
    /* Responsive Dashboard Specifics */
    @media (max-width: 768px) {
        .dashboard {
            padding: 2rem 1rem !important;
            /* 16px side padding - Enforced */
        }

        .table-scroll {
            max-height: 55vh;
            width: 100%;
            display: block;
            overflow-x: auto;
        }

        /* Insight Cards - Mobile Centered */
        .insight-card {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            box-sizing: border-box;
        }

        /* -----------------------------------------------------
       SMART SCHEDULE COMPONENT (Mobile)
       ----------------------------------------------------- */

        /* 1. Dynamic Row Limit: Show only first 4 appointments */
        .appointments-card tbody tr:nth-child(n+5) {
            display: none;
        }

        /* 2. Table-to-Card Conversion */
        .appointments-card table,
        .appointments-card thead,
        .appointments-card tbody,
        .appointments-card th,
        .appointments-card td,
        .appointments-card tr {
            display: block;
        }

        .appointments-card thead {
            display: none;
            /* Hide headers */
        }

        .appointments-card tr {
            margin-bottom: 1.5rem;
            /* Increased spacing */
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 0.75rem;
            padding: 1rem;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
        }

        .appointments-card tr:last-child {
            margin-bottom: 0;
        }

        .appointments-card td {
            display: block;
            text-align: left;
            padding: 0.25rem 0;
            border: none;
            white-space: normal;
            /* Allow text wrap */
            position: relative;
        }

        /* Stack styling tweaks */
        /* Time (1st column) */
        .appointments-card td:nth-of-type(1) {
            font-weight: 700;
            color: var(--sky-blue);
            font-size: 1.1rem;
            margin-bottom: 0.2rem;
        }

        /* Client (2nd column) */
        .appointments-card td:nth-of-type(2) {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-dark);
        }

        /* Service/Other (subsequent) */
        .appointments-card td:nth-of-type(3),
        .appointments-card td:nth-of-type(4) {
            color: var(--muted);
            font-size: 0.95rem;
        }

        /* Button inside card */
        .appointments-card td:last-child {
            margin-top: 0.5rem;
        }

        .appointments-card td::before {
            content: attr(data-label);
            font-weight: 600;
            color: var(--muted);
            display: block;
            font-size: 0.85rem;
            margin-bottom: 0.25rem;
        }

        .appointments-card td button {
            width: 100%;
            /* Full width action button */
            padding: 0.8rem;
            /* Larger touch target */
            display: block;
        }

        /* -----------------------------------------------------
       DASHBOARD GRID OPTIMIZATION
       ----------------------------------------------------- */

        /* Stat Cards: Full Width & Box Sizing */
        .insight-card {
            width: 100%;
            box-sizing: border-box;
        }

        /* Tighten table rows on generic tables (if any remain) */
        .table th,
        .table td {
            padding: 0.5rem 0.75rem;
        }

        /* 2-Column Grid for Operating Hours Time Inputs */
        .time-inputs {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }

        .time-inputs span {
            display: none;
            /* Hide 'to' text/dash if needed, or make it grid item */
        }

        /* Adjust inputs for compact mode */
        .time-inputs input[type="time"] {
            width: 100%;
            padding: 0.4rem;
            font-size: 16px !important;
            /* redundant but safe */
        }

        /* Stack grids vertically */
        .insights-grid,
        .hours-grid {
            grid-template-columns: 1fr;
        }

        /* Show mobile CTA */
        .mobile-view-calendar-btn {
            display: block;
            text-align: center;
            margin-top: 1.5rem;
        }

        .mobile-view-calendar-btn button {
            padding: 1rem 2rem;
            font-size: 1rem;
        }
    }





    /* ==========================================================
   NEW FEATURES (Appended for Refinement)
   ========================================================== */

    /* Modern Copy Button */
    .copy-btn-modern {
        background: #fff;
        border: 1px solid rgba(14, 165, 233, 0.3);
        border-radius: 0.5rem;
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--teal);
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        position: relative;
        overflow: hidden;
    }

    .copy-btn-modern:hover {
        background: var(--teal);
        color: #fff;
        box-shadow: 0 4px 12px rgba(20, 184, 166, 0.25);
        transform: translateY(-1px);
    }

    .copy-btn-modern.copied {
        background: #10b981;
        border-color: #10b981;
        color: #fff;
    }

    /* Hours Editor - Clean Row Layout */
    .hours-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
        margin-top: 1rem;
    }

    .hours-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        padding: 1rem 1.5rem;
        border-radius: 0.75rem;
        border: 1px solid rgba(14, 165, 233, 0.1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
        transition: all 0.2s ease;
    }

    .hours-row:hover {
        border-color: rgba(14, 165, 233, 0.3);
        box-shadow: 0 4px 12px rgba(14, 165, 233, 0.08);
    }

    .day-label {
        width: 80px;
        font-weight: 600;
        color: var(--text-dark);
        font-size: 1rem;
    }

    .day-actions {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        flex: 1;
        justify-content: flex-end;
    }

    /* Custom Toggle Switch */
    .toggle-switch {
        display: inline-block;
        width: 44px;
        height: 24px;
        position: relative;
    }

    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #cbd5e1;
        transition: .4s;
        border-radius: 24px;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    input:checked+.slider {
        background: linear-gradient(135deg, var(--sky-blue), var(--teal));
    }

    input:checked+.slider:before {
        transform: translateX(20px);
    }

    input:focus+.slider {
        box-shadow: 0 0 1px var(--sky-blue);
    }

    .time-range {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        opacity: 1;
        transition: opacity 0.3s ease;
    }

    .hours-row.closed .time-range {
        opacity: 0.3;
        pointer-events: none;
    }

    /* Calendar Modal Styles */
    .calendar-modal {
        display: none;
        position: fixed;
        z-index: 2000;
        inset: 0;
        background: rgba(15, 23, 42, 0.6);
        backdrop-filter: blur(4px);
        align-items: center;
        justify-content: center;
        padding: 1rem;
        animation: fadeIn 0.3s ease;
    }

    .calendar-modal.active {
        display: flex;
    }

    .calendar-content {
        background: #fff;
        width: 100%;
        max-width: 500px;
        border-radius: 1.5rem;
        padding: 2rem;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
        position: relative;
        animation: zoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .calendar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
    }

    .calendar-header h2 {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-dark);
    }

    .close-modal-btn {
        background: transparent;
        border: none;
        font-size: 1.5rem;
        color: var(--muted);
        cursor: pointer;
        line-height: 1;
    }

    /* Simple Calendar Grid */
    .cal-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 0.5rem;
        text-align: center;
    }

    .cal-day-name {
        font-weight: 600;
        font-size: 0.85rem;
        color: var(--muted);
        margin-bottom: 0.5rem;
    }

    .cal-day {
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.2s;
        color: var(--text-dark);
    }

    .cal-day:hover:not(.empty) {
        background: #f1f5f9;
    }

    .cal-day.empty {
        cursor: default;
    }

    .cal-day.today {
        background: var(--sky-blue);
        color: white;
        font-weight: 600;
        box-shadow: 0 4px 10px rgba(14, 165, 233, 0.3);
    }

    .cal-day.has-event {
        position: relative;
    }

    .cal-day.has-event::after {
        content: "";
        position: absolute;
        bottom: 4px;
        width: 4px;
        height: 4px;
        border-radius: 50%;

        background: var(--teal);
    }

    /* ============================
   NEW CALENDAR ENHANCEMENTS
   ============================ */

    /* 1. Event Indicator Dots */
    .cal-dot {
        position: absolute;
        bottom: 6px;
        width: 5px;
        height: 5px;
        background: var(--teal);
        border-radius: 50%;
    }

    .cal-day.today .cal-dot {
        background: #fff;
        /* White dot on blue today circle */
    }

    /* 2. Selected Day Highlight */
    .cal-day.selected {
        background: #e2e8f0;
        /* Light gray selection */
        box-shadow: inset 0 0 0 2px var(--sky-blue);
        font-weight: 600;
    }

    .cal-day.today.selected {
        background: var(--sky-blue);
        box-shadow: inset 0 0 0 2px #fff;
    }

    /* 3. Day Detail Panel */
    .cal-details-panel {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid #f1f5f9;
        min-height: 100px;
        animation: fadeIn 0.3s ease;
    }

    .cal-details-header {
        font-size: 1.1rem;
        color: var(--text-dark);
        margin-bottom: 1rem;
        font-weight: 700;
    }

    .cal-empty-state {
        text-align: center;
        color: var(--muted);
        padding: 1.5rem 0;
        font-size: 0.95rem;
        background: #f8fafc;
        border-radius: 12px;
    }

    /* 4. Appointment List */
    .cal-appt-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        max-height: 250px;
        overflow-y: auto;
        padding-right: 4px;
        /* Space for scrollbar */
    }

    /* Scrollbar polish */
    .cal-appt-list::-webkit-scrollbar {
        width: 4px;
    }

    .cal-appt-list::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
    }

    .cal-appt-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        border: 1px solid #e2e8f0;
        padding: 0.75rem 1rem;
        border-radius: 12px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .cal-appt-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        border-color: var(--sky-blue);
    }

    .cal-appt-time {
        font-weight: 700;
        color: var(--sky-blue);
        font-size: 0.95rem;
        min-width: 70px;
    }

    .cal-appt-info {
        flex: 1;
        margin: 0 1rem;
        text-align: left;
    }

    .cal-client-name {
        font-weight: 600;
        color: var(--text-dark);
        font-size: 0.95rem;
    }

    .cal-appt-status {
        font-size: 0.75rem;
        text-transform: uppercase;
        font-weight: 700;
        padding: 0.25rem 0.5rem;
        border-radius: 6px;
    }

    /* MODAL INPUTS (Larger & Easier) */
    .calendar-content input,
    .calendar-content select {
        font-size: 1.05rem !important;
        /* Larger text */
        padding: 0.9rem 1rem !important;
        /* Easy click target */
        transition: all 0.2s ease-in-out;
    }

    .calendar-content input:focus {
        transform: scale(1.01);
        /* Subtle zoom on focus */
        border-color: var(--sky-blue);
        box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
    }

    /* Animation for Modal Open */
    @keyframes modalPop {
        0% {
            transform: scale(0.95);
            opacity: 0;
        }

        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    .calendar-content {
        animation: modalPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* ----------------------------------------------------------
       CALENDAR DARK MODE SUPPORT
       ---------------------------------------------------------- */
    [data-theme="dark"] .calendar-content {
        background: #1e293b;
        /* Slate 800 */
        color: #f1f5f9;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    }

    [data-theme="dark"] .calendar-header h2 {
        color: #f1f5f9;
        background: transparent;
    }

    [data-theme="dark"] .close-modal-btn {
        color: #94a3b8;
    }

    [data-theme="dark"] .cal-day {
        color: #e2e8f0;
    }

    [data-theme="dark"] .cal-day:hover:not(.empty) {
        background: #334155;
        /* Slate 700 */
    }

    [data-theme="dark"] .cal-day.selected {
        background: #334155;
        box-shadow: inset 0 0 0 2px var(--sky-blue);
    }

    [data-theme="dark"] .cal-details-panel {
        border-top-color: #334155;
    }

    [data-theme="dark"] .cal-details-header {
        color: #f1f5f9;
    }

    [data-theme="dark"] .cal-empty-state {
        background: #0f172a;
        /* Slate 900 */
        color: #64748b;
    }

    [data-theme="dark"] .cal-appt-item {
        background: #1e293b;
        border-color: #334155;
    }

    [data-theme="dark"] .cal-appt-item:hover {
        border-color: var(--sky-blue);
        background: #1e293b;
        /* Keep dark bg */
    }

    [data-theme="dark"] .cal-client-name {
        color: #f1f5f9;
    }

    [data-theme="dark"] .cal-appt-list::-webkit-scrollbar-thumb {
        background: #475569;
    }

    /* Mobile Tweak for Panel */
    @media (max-width: 480px) {
        .cal-appt-item {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
        }

        .cal-appt-time {
            font-size: 1.1rem;
        }

        .cal-appt-info {
            margin: 0;
        }

        .cal-appt-status {
            align-self: flex-start;
        }
    }


    /* Mobile Fixes for New Layout */



    /* Mobile Appointments & Quick Actions */


    /* 900px Container Overrides (Tablet/Small Laptop) */
    @media (max-width: 900px) {

        /* Allow vertical stacking and natural flow */
        .dashboard,
        section.dashboard {
            /* Force natural flow */
            display: block !important;
            height: auto !important;
            min-height: 100vh !important;
            max-height: none !important;
            overflow-y: visible !important;
            /* Scroll vertically */
            overflow-x: hidden !important;
            /* No horizontal */
            padding-bottom: 3rem !important;
        }

        .dashboard-grid {
            /* If grid exists */
            display: flex !important;
            flex-direction: column !important;
        }

        .hours-card,
        .promo-card {
            margin-bottom: 2.5rem !important;
        }

        .hours-card {
            overflow: visible !important;
            height: auto !important;
            max-height: none !important;
        }
    }

    /* 640px Specifics (Large Mobile) */
    /* Mobile Layout (<600px) - The "Floating" Look */
    @media (max-width: 600px) {

        /* Force padding for floating effect */
        .dashboard {
            padding: 1rem 1.25rem !important;
        }

        /* TYPOGRAPHY SCALING FOR MOBILE */
        .dash-head h1,
        h1 {
            font-size: 1.75rem !important;
            /* Scale down from 2.5rem+ */
        }

        .dash-head p,
        p.lead {
            font-size: 1rem !important;
        }

        h2 {
            font-size: 1.35rem !important;
        }

        h3,
        .card h3 {
            font-size: 1.15rem !important;
            margin-bottom: 0.75rem !important;
        }

        /* Helper to ensure cards scale down but float */
        .central-card,
        .appointments-card,
        .hours-card,
        .promo-card,
        .card {
            width: auto !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            max-width: 100% !important;
            min-width: 0 !important;
            padding: 1.25rem 1rem !important;
            /* Tighter padding like auth pages */
            border-radius: 16px !important;
            /* Slightly smaller radius */
            box-sizing: border-box !important;
        }

        /* Tighter Buttons & Inputs */
        .btn,
        button,
        input,
        select {
            font-size: 0.95rem !important;
            padding: 0.85rem !important;
            /* Compact touch targets */
        }

        .dash-head {
            padding: 1.5rem 1rem !important;
            border-radius: 16px !important;
        }

        .dash-actions button,
        .dash-actions a {
            flex: 1 1 100%;
            text-align: center;
        }

        .hours-grid {
            grid-template-columns: 1fr;
            width: 100%;
        }

        .hours-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.75rem;
            width: 100%;
        }

        .day-actions {
            width: 100%;
            justify-content: space-between;
            margin-top: 0.5rem;
        }

        .promo-body {
            flex-direction: column;
        }

        .promo-body button {
            width: 100%;
        }

        /* Mobile Appointments & Quick Actions */
        .desktop-appt-view {
            display: none !important;
        }

        .mobile-appt-view {
            display: block !important;
        }

        .quick-actions-mobile {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .quick-actions-mobile .qa-btn {
            width: 100%;
            justify-content: center;
            padding: 1rem;
        }
}

/* ── Dashboard Avatar Upload Affordance ──────────────────── */
.db-avatar-form {
  display: inline-flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

.db-avatar-wrap {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 50%;
}

.db-avatar-wrap:hover .db-avatar {
  opacity: 0.88;
  transform: scale(1.02);
  transition: all 0.18s ease;
}

.db-avatar-camera {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--b-primary);
  border: 2px solid var(--b-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.4);
  transition: transform 0.18s ease;
  pointer-events: none;
}

.db-avatar-wrap:hover .db-avatar-camera {
  transform: scale(1.08);
}

.db-header-text {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}/* ============================
   Desktop Polish Overrides
   ============================ */

@media (min-width: 1024px) {

    /* 1. Hero Spacing */
    .hero,
    .vibrant-hero {
        padding-top: calc(var(--header-height) + 6rem) !important;
        padding-bottom: 8rem !important;
    }

    .hero-content {
        max-width: 900px !important;
    }

    .hero-title {
        font-size: 4rem !important;
    }

    .hero-subtext {
        font-size: 1.25rem !important;
        max-width: 700px !important;
    }

    /* 2. Feature Grid - 3 columns on desktop */
    .features-section {
        gap: 2rem !important;
        margin-top: 5rem !important;
        margin-bottom: 5rem !important;
        /* Allow 3 columns (accounts for parent double-padding) */
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    }

    .feature-card {
        padding: 3rem !important;
    }

    /* 3. Service Bubbles - Larger */
    .service-bubbles {
        gap: 3rem !important;
        max-width: 1100px !important;
    }

    .bubble {
        width: 190px !important;
        height: 190px !important;
        font-size: 1.3rem !important;
        border-radius: 45px !important;
    }

    /* 4. Nav Links - Breathing Room */
    .nav-links {
        gap: 2rem !important;
        position: static !important;
        transform: none !important;
        background: transparent !important;
        width: auto !important;
        height: auto !important;
        flex-direction: row !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        display: flex !important;
    }

    /* Reset link styles for desktop header */
    .nav-link {
        font-size: 1rem !important;
        color: rgba(255, 255, 255, 0.9) !important;
        padding: 0.5rem 1rem !important;
        margin: 0 !important;
        font-weight: 500 !important;
        border-radius: 8px !important;
    }

    .nav-link:hover {
        background: rgba(255, 255, 255, 0.15) !important;
        color: #fff !important;
    }

    .nav-link.active {
        background: rgba(255, 255, 255, 0.25) !important;
        color: #fff !important;
        border: none !important;
    }

    /* Hide Mobile Elements on Desktop */
    .hamburger {
        display: none !important;
    }

    .nav-identity,
    .nav-divider,
    .nav-bottom {
        display: none !important;
    }

    .nav-content-wrap {
        padding: 0 !important;
        flex-direction: row !important;
        width: auto !important;
        overflow: visible !important;
    }

    /* Organize Header Groups */
    .nav-primary,
    .nav-secondary,
    .nav-guest {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    /* Premium Button Desktop */
    .nav-special {
        margin: 0 !important;
        margin-left: 1rem !important;
    }

    .premium-btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.95rem !important;
    }

    /* Specific Link Tweaks */
    .icon {
        display: none !important;
        /* Keep icons hidden on desktop header as requested or optional? User said "migrate buttons onto top overlay" usually implies text links. Keeping icons hidden for clean look. */
    }

    .logo {
        margin-right: 2rem;
    }


    /* 5. Support Page Fixes */
    .support-card {
        padding: 4rem !important;
        max-width: 700px !important;
    }
}

/* Auth Pages Desktop Polish */
@media (min-width: 1024px) {
    .auth-container-wrapper {
        padding-top: 6rem !important;
    }

    .auth-section-card {
        max-width: 550px !important;
        padding: 4rem !important;
    }
}

/* ============================
   7. DASHBOARD AESTHETIC OVERHAUL
   ============================ */

/* Main Container & Grid Ratio */
@media (min-width: 1024px) {
    .dashboard {
        max-width: 1400px !important;
        margin: 0 auto !important;
        padding: 3rem 4rem !important;
    }

    .dashboard-grid {
        display: grid !important;
        grid-template-columns: 2.5fr 1fr !important;
        /* Balanced Ratio */
        gap: 2.5rem !important;
        align-items: start !important;
    }

    /* Spacing improvements */
    .appointments-card,
    .hours-card,
    .main-content .card {
        margin-bottom: 2.5rem !important;
    }

    /* Ensure View Calendar button is visible */
    .btn.small,
    button.small {
        display: inline-flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* ----------------------------------------------------------
       CALENDAR MODAL FIX (Center on Desktop)
       ---------------------------------------------------------- */
    .calendar-modal {
        /* Override mobile bottom-sheet style */
        align-items: center !important;
        justify-content: center !important;
        background: rgba(15, 23, 42, 0.6) !important;
        backdrop-filter: blur(8px) !important;
        padding: 2rem !important;
    }

    .calendar-content {
        /* Reset mobile styles */
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 500px !important;
        border-radius: 24px !important;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
        animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        max-height: 85vh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    @keyframes modalPop {
        0% {
            opacity: 0;
            transform: scale(0.95) translateY(10px);
        }

        100% {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }
}

/* ----------------------------------------------------------
   HOURS EDITOR OVERHAUL (Professional Look)
   ---------------------------------------------------------- */
.hours-collapse {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
}

.hours-collapse.active {
    opacity: 1;
    visibility: visible;
    max-height: 1200px !important;
    /* Ample height for expansion */
    padding-top: 2rem;
    margin-top: 1.5rem;
    border-top: 1px solid rgba(14, 165, 233, 0.1);
}

.hours-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

/* Floating Row Style */
.hours-row {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    /* Label - Toggles/Inputs - Status */
    align-items: center;
    padding: 0.8rem 1.25rem;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    border: 1px solid rgba(14, 165, 233, 0.1);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hours-row:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 10px 20px -5px rgba(14, 165, 233, 0.15);
    border-color: rgba(14, 165, 233, 0.4);
    z-index: 2;
}

.hours-row.closed {
    opacity: 0.6;
    background: transparent;
    border-style: dashed;
}

.day-label {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-main);
    letter-spacing: 0.02em;
}

.day-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Modern Toggle Switch */
.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

input:checked+.slider {
    background: linear-gradient(135deg, var(--sky-blue), var(--teal));
}

input:checked+.slider:before {
    transform: translateX(20px);
}

/* Time Inputs */
.time-range {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    opacity: 1;
    transition: opacity 0.2s;
}

.hours-row.closed .time-range {
    pointer-events: none;
    opacity: 0.3;
}

.time-range input {
    border: 1px solid rgba(203, 213, 225, 0.6);
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
    width: 105px;
    background: rgba(255, 255, 255, 0.8);
    font-family: inherit;
    color: var(--text-main);
    transition: all 0.2s;
    text-align: center;
}

.time-range input:focus {
    border-color: var(--sky-blue);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
    background: #fff;
    outline: none;
}

.time-range span {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* Save Check Animation */
.save-check {
    width: 20px;
    height: 20px;
    color: var(--teal);
    opacity: 0;
    transition: opacity 0.3s;
    margin-left: auto;
    /* Push to right */
}


/* Premium Card Styling (Glassmorphism++) */
@media (min-width: 1024px) {

    .card,
    .central-card,
    .auth-glass-card,
    .appointments-card,
    .hours-card,
    .promo-card,
    .dash-head {
        background: rgba(255, 255, 255, 0.8) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.6) !important;
        box-shadow:
            0 20px 40px -10px rgba(14, 165, 233, 0.1),
            0 10px 20px -5px rgba(0, 0, 0, 0.04),
            inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
        border-radius: 24px !important;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
    }

    .card:hover,
    .appointments-card:hover,
    .hours-card:hover {
        transform: translateY(-4px) !important;
        box-shadow:
            0 25px 50px -12px rgba(14, 165, 233, 0.15),
            0 10px 20px -5px rgba(0, 0, 0, 0.04) !important;
    }
}

/* Dark Mode Overrides for Premium Cards */
[data-theme="dark"] .card,
[data-theme="dark"] .appointments-card,
[data-theme="dark"] .hours-card,
[data-theme="dark"] .dash-head {
    background: rgba(30, 41, 59, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4) !important;
}

/* Dashboard Header Typography */
@media (min-width: 1024px) {
    .dash-head {
        padding: 2.5rem 3rem !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .dash-title {
        font-size: 2.25rem !important;
        letter-spacing: -0.02em !important;
        background: linear-gradient(135deg, var(--text-main) 0%, var(--text-muted) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 0.5rem !important;
    }

    .status-badge {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.85rem !important;
        box-shadow: 0 4px 10px rgba(14, 165, 233, 0.2) !important;
    }
}

/* Table Polish */
@media (min-width: 1024px) {
    .table {
        border-collapse: separate !important;
        border-spacing: 0 0.8rem !important;
        /* Gap between rows */
    }

    .table thead th {
        border: none !important;
        background: transparent !important;
        padding-bottom: 0.5rem !important;
        padding-left: 1.5rem !important;
        font-size: 0.8rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        color: var(--text-muted) !important;
    }

    .table tbody tr {
        background: rgba(255, 255, 255, 0.5) !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
        transition: transform 0.2s ease, background 0.2s ease !important;
    }

    .table tbody tr:hover {
        transform: scale(1.01) !important;
        background: rgba(255, 255, 255, 0.9) !important;
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05) !important;
    }

    .table td {
        border: none !important;
        padding: 1.25rem 1.5rem !important;
        font-size: 0.95rem !important;
    }

    .table td:first-child {
        border-top-left-radius: 12px !important;
        border-bottom-left-radius: 12px !important;
    }

    .table td:last-child {
        border-top-right-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
    }

    [data-theme="dark"] .table tbody tr {
        background: rgba(255, 255, 255, 0.03) !important;
    }

    [data-theme="dark"] .table tbody tr:hover {
        background: rgba(255, 255, 255, 0.06) !important;
    }
}

/* Photo Gallery Grid Polish */
@media (min-width: 1024px) {
    .photo-gallery {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1rem !important;
    }

    .photo-item {
        border-radius: 16px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
        transition: transform 0.3s ease !important;
    }

    .photo-item:hover {
        transform: scale(1.05) !important;
        z-index: 5 !important;
    }
}

/* ----------------------------------------------------------
   MOBILE DASHBOARD FIXES (Consolidated)
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .dash-head {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 2rem 1.5rem !important;
        gap: 1.5rem !important;
    }

    .dash-head>div {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .dash-head-actions {
        width: 100% !important;
        justify-content: center !important;
        margin-top: 1rem !important;
    }

    .dash-head-actions .nav-action-btn,
    .dash-head-actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .photo-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    /* Table Mobile Card View fallback */
    .table-scroll {
        overflow-x: auto !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.02) !important;
    }
}/* ============================================================
   BOOKERAI REDESIGN FIXES
   Comprehensive patch for all UI/UX issues
   ============================================================ */

/* ============================================================
   1. HERO BUTTON CONTRAST FIX
   ============================================================ */

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2.5rem;
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero-buttons .btn.large {
  margin-top: 0;
  flex: 0 1 auto;
  min-width: 180px;
  max-width: 220px;
  font-weight: 700;
  padding: 1rem 2.2rem;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}

/* Primary button - gradient background with WHITE text */
.hero-buttons .btn.large:first-child {
  background: linear-gradient(135deg, #0ea5e9, #14b8a6);
  color: #ffffff !important;
  box-shadow: 0 8px 25px rgba(14, 165, 233, 0.3);
}

.hero-buttons .btn.large:first-child:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(14, 165, 233, 0.45);
  color: #ffffff !important;
}

/* Secondary button - WHITE background with DARK text */
.hero-buttons .btn.large:last-child {
  background: #ffffff;
  color: #0ea5e9 !important;
  border: 2px solid #ffffff;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.hero-buttons .btn.large:last-child:hover {
  transform: translateY(-2px);
  background: #f0faff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  color: #0ea5e9 !important;
}

/* Dark mode button fixes */
[data-theme="dark"] .hero-buttons .btn.large:last-child {
  background: #0f172a;
  color: #38bdf8 !important;
  border: 2px solid #1e293b;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .hero-buttons .btn.large:last-child:hover {
  background: #1e293b;
  color: #38bdf8 !important;
}

/* ============================================================
   2. FULL-WIDTH SECTIONS
   ============================================================ */

/* Full-bleed sections fill their parent container naturally.
   Using width:100% is safe on iOS; the 100vw + negative-margin trick
   caused horizontal overflow on iPhone (100vw includes scrollbar width
   and breaks when the parent is a flex container). */
.vibrant-hero,
.looking-services,
.category-carousel-section,
.category-buttons-section,
.how-it-works-section,
.footer-cta {
  width: 100%;
  margin-left: 0;
}

/* Service bubbles section */
.looking-services {
  background: var(--bg-main, #f8fafc);
  padding: 3rem var(--container-padding) 4rem;
  text-align: center;
  position: relative;
}

[data-theme="dark"] .looking-services {
  background: #0b1121;
}

.looking-services h2 {
  color: var(--text-main, #0f172a);
  font-weight: 800;
  margin-bottom: 0.5rem;
}

[data-theme="dark"] .looking-services h2 {
  color: #f8fafc;
}

.looking-services .muted {
  margin-bottom: 2.5rem;
}

/* Service bubbles container */
.service-bubbles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.5rem;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.service-bubbles .bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(14, 165, 233, 0.1);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.08);
  text-decoration: none;
  color: var(--text-main, #0f172a);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600;
  min-height: 150px;
  cursor: pointer;
}

[data-theme="dark"] .service-bubbles .bubble {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  color: #f8fafc;
}

.service-bubbles .bubble:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(14, 165, 233, 0.15);
  border-color: rgba(14, 165, 233, 0.3);
}

[data-theme="dark"] .service-bubbles .bubble:hover {
  box-shadow: 0 12px 24px rgba(14, 165, 233, 0.2);
  border-color: rgba(56, 189, 248, 0.3);
}

.service-bubbles .bubble img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
}

.service-bubbles .bubble span {
  font-size: 0.95rem;
  text-align: center;
}

/* ============================================================
   3. CATEGORY CAROUSEL
   ============================================================ */

.category-carousel-section {
  background: #f8fafc;
  padding: 2rem var(--container-padding) 3rem;
  overflow: hidden;
}

[data-theme="dark"] .category-carousel-section {
  background: #0b1121;
}

.carousel-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.carousel-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--text-main, #0f172a);
}

[data-theme="dark"] .carousel-title {
  color: #f8fafc;
}

/* Auto-rotating carousel */
.carousel-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.carousel-slides {
  display: flex;
  animation: autoSlide 20s linear infinite;
  gap: 1rem;
}

.carousel-slide {
  flex: 0 0 calc(25% - 0.75rem);
  min-width: 180px;
  background: #ffffff;
  border-radius: 12px;
  padding: 1.5rem 1rem;
  text-align: center;
  border: 1px solid rgba(14, 165, 233, 0.1);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.08);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

[data-theme="dark"] .carousel-slide {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.carousel-slide:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(14, 165, 233, 0.15);
}

[data-theme="dark"] .carousel-slide:hover {
  box-shadow: 0 12px 24px rgba(14, 165, 233, 0.2);
}

.carousel-slide-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.carousel-slide-label {
  font-weight: 600;
  color: var(--text-main, #0f172a);
  font-size: 0.95rem;
}

[data-theme="dark"] .carousel-slide-label {
  color: #f8fafc;
}

@keyframes autoSlide {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-100% - 4rem)); }
}

/* Pause on hover */
.carousel-slides:hover {
  animation-play-state: paused;
}

@media (max-width: 768px) {
  .carousel-slide {
    flex: 0 0 calc(50% - 0.5rem);
  }
}

/* ============================================================
   4. CATEGORY BUTTONS (STATIC QUICK ACCESS)
   ============================================================ */

.category-buttons-section {
  background: var(--bg-main, #f8fafc);
  padding: 2rem var(--container-padding) 3rem;
}

[data-theme="dark"] .category-buttons-section {
  background: #0b1121;
}

.category-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.category-btn {
  padding: 0.75rem 1.25rem;
  border-radius: 10px;
  background: #ffffff;
  border: 2px solid var(--sky-blue);
  color: var(--sky-blue);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  display: inline-block;
  text-align: center;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme="dark"] .category-btn {
  background: #1e293b;
  border: 2px solid #38bdf8;
  color: #38bdf8;
}

.category-btn:hover {
  background: var(--sky-blue);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.3);
  transform: translateY(-2px);
}

[data-theme="dark"] .category-btn:hover {
  background: #38bdf8;
  color: #0b1121;
  box-shadow: 0 8px 20px rgba(56, 189, 248, 0.3);
}

/* ============================================================
   5. "HOW IT WORKS" ACCORDION (MOBILE OPTIMIZED)
   ============================================================ */

.how-it-works-section {
  background: #ffffff;
  padding: 3rem var(--container-padding) 4rem;
}

[data-theme="dark"] .how-it-works-section {
  background: #0f172a;
}

.how-it-works-section h2 {
  color: var(--text-main, #0f172a);
  font-weight: 800;
  margin-bottom: 0.5rem;
  text-align: center;
}

[data-theme="dark"] .how-it-works-section h2 {
  color: #f8fafc;
}

.how-it-works-steps {
  max-width: 800px;
  margin: 0 auto;
}

/* Accordion cards */
.step-accordion {
  margin-bottom: 1rem;
}

.step-accordion-header {
  background: #f8fafc;
  border: 1px solid rgba(14, 165, 233, 0.15);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: var(--text-main, #0f172a);
  transition: all 0.3s ease;
  min-height: 48px;
}

[data-theme="dark"] .step-accordion-header {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}

.step-accordion-header:hover {
  background: #e0f2ff;
  border-color: var(--sky-blue);
}

[data-theme="dark"] .step-accordion-header:hover {
  background: #0f172a;
  border-color: #38bdf8;
}

.step-accordion-header.active {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(20, 184, 166, 0.1));
  border-color: var(--sky-blue);
}

[data-theme="dark"] .step-accordion-header.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(45, 212, 191, 0.1));
  border-color: #38bdf8;
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sky-blue), var(--teal));
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
  margin-right: 1rem;
  flex-shrink: 0;
}

[data-theme="dark"] .step-number {
  background: linear-gradient(135deg, #38bdf8, #2dd4bf);
}

.step-title {
  flex: 1;
}

.step-chevron {
  width: 20px;
  height: 20px;
  margin-left: 1rem;
  transition: transform 0.3s ease;
  color: var(--sky-blue);
}

[data-theme="dark"] .step-chevron {
  color: #38bdf8;
}

.step-accordion-header.active .step-chevron {
  transform: rotate(180deg);
}

.step-accordion-body {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(14, 165, 233, 0.1);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 1.25rem;
  display: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

[data-theme="dark"] .step-accordion-body {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
}

.step-accordion-body.active {
  display: block;
  max-height: 500px;
  padding: 1.25rem;
}

.step-accordion-body p {
  color: var(--text-muted, #64748b);
  margin: 0;
  line-height: 1.6;
}

[data-theme="dark"] .step-accordion-body p {
  color: #94a3b8;
}

/* Desktop: Show all steps side-by-side */
@media (min-width: 769px) {
  .how-it-works-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
  }

  .step-accordion {
    margin-bottom: 0;
  }

  .step-accordion-header {
    padding: 1.75rem 1.25rem;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
  }

  .step-accordion-header:hover,
  .step-accordion-header.active {
    transform: translateY(-2px);
  }

  .step-number {
    margin-right: 0;
    margin-bottom: 1rem;
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
  }

  .step-title {
    font-size: 1rem;
  }

  .step-chevron {
    display: none;
  }

  .step-accordion-body {
    border: none;
    background: transparent;
    padding: 1rem 0 0;
    display: block;
    max-height: none;
  }

  .step-accordion-body.active {
    max-height: none;
  }
}

/* ============================================================
   6. FULL-WIDTH FOOTER CTA SECTION
   ============================================================ */

.footer-cta {
  background: linear-gradient(135deg, var(--sky-blue), var(--teal));
  color: #ffffff;
  padding: 4rem var(--container-padding) 5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.footer-cta h2 {
  color: #ffffff;
  font-weight: 800;
  margin-bottom: 0.75rem;
}

.footer-cta .muted {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.footer-inner {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
}

.vibrant-auth {
  background: linear-gradient(135deg, #0ea5e9, #14b8a6);
}

.vibrant-auth h2 {
  color: #ffffff;
}

.vibrant-auth .muted {
  color: rgba(255, 255, 255, 0.85);
}

/* ============================================================
   7. DASHBOARD IMPROVEMENTS
   ============================================================ */

.card {
  background: #ffffff;
  border-radius: 16px;
  padding: clamp(1rem, 5%, 2.5rem);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.08),
             0 2px 6px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(14, 165, 233, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 2rem;
}

[data-theme="dark"] .card {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2),
             0 2px 6px rgba(0, 0, 0, 0.1);
}

.card:hover {
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.12),
             0 4px 12px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

[data-theme="dark"] .card:hover {
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.15),
             0 4px 12px rgba(0, 0, 0, 0.15);
}

.card h3 {
  color: var(--text-main, #0f172a);
  font-weight: 700;
  margin-bottom: 1rem;
}

[data-theme="dark"] .card h3 {
  color: #f8fafc;
}

/* Services list redesign */
.services-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.service-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid rgba(14, 165, 233, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 56px;
}

[data-theme="dark"] .service-item {
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.service-item:hover {
  background: #e0f2ff;
  border-color: var(--sky-blue);
  transform: translateX(2px);
}

[data-theme="dark"] .service-item:hover {
  background: #0b1121;
  border-color: #38bdf8;
}

.service-info {
  flex: 1;
}

.service-name {
  font-weight: 600;
  color: var(--text-main, #0f172a);
  margin-bottom: 0.25rem;
}

[data-theme="dark"] .service-name {
  color: #f8fafc;
}

.service-meta {
  font-size: 0.85rem;
  color: var(--text-muted, #64748b);
}

[data-theme="dark"] .service-meta {
  color: #94a3b8;
}

.service-price {
  font-weight: 700;
  color: var(--sky-blue);
  font-size: 1.1rem;
}

[data-theme="dark"] .service-price {
  color: #38bdf8;
}

/* ============================================================
   8. IMAGE LOADING SKELETON
   ============================================================ */

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, #2d3748 25%, #4a5568 50%, #2d3748 75%);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  display: block;
}

/* ============================================================
   9. DARK MODE GLOBAL FIXES
   ============================================================ */

[data-theme="dark"] {
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --bg-main: #0b1121;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #0f172a;
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #64748b;
}

[data-theme="dark"] label {
  color: #f8fafc;
}

[data-theme="dark"] .muted {
  color: #94a3b8;
}

[data-theme="dark"] .table,
[data-theme="dark"] table {
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] th,
[data-theme="dark"] td {
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] tr:hover {
  background: rgba(56, 189, 248, 0.05) !important;
}

/* ============================================================
   10. MOBILE OPTIMIZATION
   ============================================================ */

@media (max-width: 768px) {
  .hero-buttons {
    flex-direction: column;
    gap: 0.75rem;
  }

  .hero-buttons .btn.large {
    max-width: 100%;
    width: 100%;
  }

  .service-bubbles {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
  }

  .category-buttons {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 0.75rem;
  }

  .category-btn {
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
  }

  .carousel-slide {
    flex: 0 0 calc(33.333% - 0.67rem);
  }

  .step-accordion-header {
    padding: 0.9rem 1rem;
  }

  .step-number {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }

  .footer-cta {
    padding: 2.5rem var(--container-padding) 3rem;
  }
}

/* ============================================================
   11. MODALS AND FORMS - DARK MODE COMPLIANCE
   ============================================================ */

.calendar-modal,
.modal,
[role="dialog"] {
  background: #ffffff;
}

[data-theme="dark"] .calendar-modal,
[data-theme="dark"] .modal,
[data-theme="dark"] [role="dialog"] {
  background: #1e293b;
}

.calendar-modal .calendar-header,
.modal-header,
[data-theme="dark"] .calendar-modal .calendar-header,
[data-theme="dark"] .modal-header {
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .calendar-modal .calendar-header h2,
[data-theme="dark"] .modal-header h2 {
  color: #f8fafc;
}

/* Form Elements Dark Mode */
[data-theme="dark"] .form-group,
[data-theme="dark"] .form-row {
  color: #f8fafc;
}

[data-theme="dark"] label {
  color: #f8fafc;
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: #0f172a;
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #64748b;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: #38bdf8;
  outline: none;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}

/* Button dark mode for modals */
[data-theme="dark"] .btn-secondary {
  background: #0f172a;
  color: #38bdf8;
  border-color: #38bdf8;
}

[data-theme="dark"] .btn-secondary:hover {
  background: #38bdf8;
  color: #0f172a;
}

/* Status badges dark mode */
[data-theme="dark"] .status-badge {
  background: rgba(56, 189, 248, 0.1);
  color: #38bdf8;
}

[data-theme="dark"] .status-booked {
  background: rgba(56, 189, 248, 0.1);
  color: #38bdf8;
}

[data-theme="dark"] .status-cancelled {
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
}

/* Table dark mode */
[data-theme="dark"] tbody tr {
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] tbody tr:nth-child(even) {
  background: rgba(56, 189, 248, 0.03);
}

[data-theme="dark"] tbody tr:hover {
  background: rgba(56, 189, 248, 0.08) !important;
}

/* Links in dark mode */
[data-theme="dark"] a {
  color: #38bdf8;
}

[data-theme="dark"] a:hover {
  color: #2dd4bf;
}

/* ============================================================
   12. UTILITY: No Scroll Lock
   ============================================================ */

html,
body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.v2 {
  overflow: visible !important;
}

main {
  overflow: visible !important;
  height: auto !important;
  min-height: auto !important;
}

/* ============================================================
   13. ENHANCED BUTTON ACCESSIBILITY
   ============================================================ */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--sky-blue);
  outline-offset: 2px;
}

[data-theme="dark"] button:focus-visible,
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] input:focus-visible,
[data-theme="dark"] select:focus-visible,
[data-theme="dark"] textarea:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

/* ============================================================
   14. LOADING STATES AND ANIMATIONS
   ============================================================ */

.loading-services,
.loading-clients,
.loading-reviews {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
/* ================================================================
   BOOKERAI — NEW DESIGN SYSTEM
   Clean SaaS · Modern Professional · ElevenLabs-inspired clarity
   Keeping sky-blue (#0ea5e9) + teal (#14b8a6) palette
   ================================================================ */

/* ── DESIGN TOKENS ─────────────────────────────────────────────── */
:root {
  --nd-primary: #0ea5e9;
  --nd-secondary: #14b8a6;
  --nd-primary-dark: #0284c7;

  --nd-bg: #ffffff;
  --nd-bg-alt: #f8fafc;
  --nd-bg-subtle: #f0f9ff;

  --nd-text: #0f172a;
  --nd-text-muted: #64748b;
  --nd-text-light: #94a3b8;

  --nd-border: rgba(0, 0, 0, 0.07);
  --nd-border-accent: rgba(14, 165, 233, 0.2);

  --nd-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --nd-shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --nd-shadow-md: 0 6px 20px rgba(0,0,0,0.07);
  --nd-shadow-lg: 0 12px 40px rgba(0,0,0,0.09);

  --nd-radius-xs: 6px;
  --nd-radius-sm: 8px;
  --nd-radius-md: 12px;
  --nd-radius-lg: 16px;
  --nd-radius-xl: 24px;

  --nd-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── BODY ───────────────────────────────────────────────────────── */
body {
  background: var(--nd-bg) !important;
}

/* ── HEADER — frosted glass, replaces gradient ──────────────────── */
header.site-header {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04) !important;
  height: 68px !important;
}

/* Logo — dark text on light header */
header.site-header .logo {
  color: var(--nd-text) !important;
  gap: 0.5rem !important;
}
header.site-header .logo span {
  color: var(--nd-text) !important;
  font-weight: 800 !important;
  font-size: 1.3rem !important;
  letter-spacing: -0.04em !important;
}
header.site-header [data-lucide="scissors"] {
  color: var(--nd-primary) !important;
  width: 22px !important;
  height: 22px !important;
}

/* Hamburger bars — dark on light header */
.hamburger span {
  background: var(--nd-text) !important;
}
.hamburger.active span {
  background: var(--nd-text) !important;
}

/* Back button — dark on light */
.nav-back-btn {
  color: var(--nd-text) !important;
}

/* Theme toggle — dark icons */
.theme-toggle {
  color: var(--nd-text) !important;
}

/* ── DESKTOP NAV ────────────────────────────────────────────────── */
.desktop-nav {
  display: none;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  margin-right: 0.75rem;
}

@media (min-width: 769px) {
  .desktop-nav {
    display: flex;
  }
  /* Hide hamburger on desktop */
  header.site-header .hamburger {
    display: none !important;
  }
  /* Hide the spacer div on desktop */
  .nd-ml-spacer {
    display: none !important;
  }
}

.desktop-nav > a {
  color: var(--nd-text-muted) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 0.45rem 0.8rem !important;
  border-radius: var(--nd-radius-sm) !important;
  text-decoration: none !important;
  transition: color 0.15s var(--nd-ease), background 0.15s var(--nd-ease) !important;
  white-space: nowrap !important;
}

.desktop-nav > a:hover {
  color: var(--nd-text) !important;
  background: rgba(0, 0, 0, 0.04) !important;
}

.desktop-nav > a.nav-cta {
  background: linear-gradient(135deg, var(--nd-primary) 0%, var(--nd-secondary) 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 0.5rem 1.1rem !important;
  border-radius: var(--nd-radius-sm) !important;
  margin-left: 0.5rem !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.28) !important;
  transition: all 0.2s var(--nd-ease) !important;
}

.desktop-nav > a.nav-cta:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.38) !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--nd-primary) 0%, var(--nd-secondary) 100%) !important;
}

/* Desktop nav active state */
.desktop-nav > a.active-nav-link {
  color: var(--nd-text) !important;
  background: rgba(14, 165, 233, 0.07) !important;
}

/* ── MOBILE NAV DRAWER ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-links {
    background: #ffffff !important;
    box-shadow: -4px 0 32px rgba(0, 0, 0, 0.12) !important;
  }

  .nav-link.primary-link {
    color: var(--nd-text) !important;
    font-weight: 500 !important;
    border-radius: var(--nd-radius-sm) !important;
    padding: 0.75rem 1rem !important;
    margin: 0 0.5rem !important;
  }

  .nav-link.primary-link:hover {
    background: var(--nd-bg-alt) !important;
  }

  .nav-link.secondary-link {
    color: var(--nd-text-muted) !important;
    font-size: 0.9rem !important;
  }

  .user-info .avatar-circle {
    background: linear-gradient(135deg, var(--nd-primary), var(--nd-secondary)) !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 700 !important;
  }
}

/* ── MIGRATE BANNER ─────────────────────────────────────────────── */
.migrate-banner {
  padding: 0.7rem 1.5rem !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  background: linear-gradient(135deg, #0ea5e9, #0891b2) !important;
}
.migrate-banner .btn.small {
  padding: 0.3rem 0.85rem !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  border-radius: var(--nd-radius-xs) !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
}

/* ── HERO SECTION ───────────────────────────────────────────────── */
.vibrant-hero.home-hero {
  background: linear-gradient(160deg, #f0f9ff 0%, #ffffff 45%, #f0fdfa 100%) !important;
  min-height: auto !important;
  padding: 4.5rem var(--container-padding) 4rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Subtle orbs replacing the animated blobs */
.vibrant-hero.home-hero::before {
  content: '';
  position: absolute;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.07) 0%, transparent 65%);
  border-radius: 50%;
  top: -200px;
  right: -150px;
  pointer-events: none;
}

.vibrant-hero.home-hero::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.07) 0%, transparent 65%);
  border-radius: 50%;
  bottom: -100px;
  left: -100px;
  pointer-events: none;
}

/* Remove old animated bg */
.vibrant-hero .animated-bg {
  display: none !important;
}

/* Hero content card — remove the bubble card look */
.hero-content.wow-card {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  max-width: 660px !important;
  width: 100% !important;
  z-index: 1 !important;
  text-align: center !important;
  margin: 0 auto !important;
}

/* Hero headline */
.hero-title.gradient-text {
  font-size: clamp(2.6rem, 6vw, 4.2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.08 !important;
  margin-bottom: 1.25rem !important;
  /* Keep the gradient text */
  background: linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Hero subtext */
.hero-subtext {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem) !important;
  color: var(--nd-text-muted) !important;
  line-height: 1.7 !important;
  max-width: 520px !important;
  margin: 0 auto 2rem !important;
}

/* Hero buttons */
.hero-buttons {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.875rem !important;
  margin-bottom: 0 !important;
}

/* Primary CTA in hero */
.hero-buttons .btn.large:first-child {
  background: linear-gradient(135deg, var(--nd-primary), var(--nd-secondary)) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 0.95rem 2.25rem !important;
  border-radius: var(--nd-radius-md) !important;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.3) !important;
  transition: all 0.2s var(--nd-ease) !important;
  width: 100% !important;
  max-width: 360px !important;
}

.hero-buttons .btn.large:first-child:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.4) !important;
}

/* Secondary button row */
.nd-hero-secondary {
  display: flex !important;
  gap: 0.75rem !important;
  width: 100% !important;
  max-width: 360px !important;
}

.nd-btn-outline {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.75rem 1.25rem !important;
  border: 1.5px solid var(--nd-border-accent) !important;
  border-radius: var(--nd-radius-md) !important;
  color: var(--nd-primary) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  text-decoration: none !important;
  background: rgba(14, 165, 233, 0.04) !important;
  transition: all 0.15s var(--nd-ease) !important;
}

.nd-btn-outline:hover {
  background: rgba(14, 165, 233, 0.1) !important;
  border-color: var(--nd-primary) !important;
  color: var(--nd-primary) !important;
  transform: translateY(-1px) !important;
}

.nd-btn-ghost {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.75rem 1.25rem !important;
  border: 1.5px solid var(--nd-border) !important;
  border-radius: var(--nd-radius-md) !important;
  color: var(--nd-text-muted) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.8) !important;
  transition: all 0.15s var(--nd-ease) !important;
}

.nd-btn-ghost:hover {
  color: var(--nd-text) !important;
  border-color: rgba(0,0,0,0.15) !important;
  background: rgba(255,255,255,1) !important;
  transform: translateY(-1px) !important;
}

/* Hero note */
.nd-hero-note {
  font-size: 0.82rem !important;
  color: var(--nd-text-light) !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0 !important;
}

/* Trust logos */
.trust-logos {
  margin-top: 3rem !important;
  z-index: 1 !important;
  position: relative !important;
}

.trust-logos .muted {
  font-size: 0.8rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--nd-text-light) !important;
}

.bubble-small {
  font-size: 1.5rem !important;
  filter: grayscale(0.2) !important;
  transition: transform 0.2s var(--nd-ease) !important;
}

.bubble-small:hover {
  transform: scale(1.2) !important;
}

/* ── STATS ROW ──────────────────────────────────────────────────── */
.nd-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 3rem var(--container-padding);
  background: #ffffff;
  border-top: 1px solid var(--nd-border);
  border-bottom: 1px solid var(--nd-border);
}

.nd-stat {
  text-align: center;
  padding: 0 2.5rem;
  position: relative;
}

.nd-stat + .nd-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 36px;
  width: 1px;
  background: var(--nd-border);
}

.nd-stat-number {
  display: block;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--nd-primary), var(--nd-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}

.nd-stat-label {
  font-size: 0.8rem;
  color: var(--nd-text-light);
  margin-top: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

@media (max-width: 480px) {
  .nd-stats {
    gap: 1rem;
    flex-wrap: wrap;
    padding: 2rem var(--container-padding);
  }
  .nd-stat {
    padding: 0 1.25rem;
    min-width: 40%;
  }
  .nd-stat + .nd-stat::before {
    display: none;
  }
}

/* ── SERVICE DISCOVERY ──────────────────────────────────────────── */
.looking-services {
  background: var(--nd-bg-alt) !important;
  padding: 5rem var(--container-padding) !important;
  text-align: center !important;
}

.looking-services h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--nd-text) !important;
  margin-bottom: 0.5rem !important;
}

.looking-services .muted {
  color: var(--nd-text-muted) !important;
  font-size: 1.05rem !important;
  margin-bottom: 0 !important;
}

.service-bubbles {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.25rem !important;
  max-width: 920px !important;
  margin: 2.5rem auto 0 !important;
}

@media (max-width: 640px) {
  .service-bubbles {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
}

.service-bubbles .bubble {
  border-radius: var(--nd-radius-lg) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0 !important;
  background: #ffffff !important;
  border: 1px solid var(--nd-border) !important;
  box-shadow: var(--nd-shadow-xs) !important;
  transition: transform 0.22s var(--nd-ease), box-shadow 0.22s var(--nd-ease) !important;
  text-decoration: none !important;
  color: var(--nd-text) !important;
  gap: 0 !important;
  width: 100% !important;
  height: auto !important;
}

.service-bubbles .bubble:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--nd-shadow-lg) !important;
  border-color: var(--nd-border-accent) !important;
}

.service-bubbles .bubble img {
  width: 100% !important;
  height: 140px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

.service-bubbles .bubble span {
  padding: 0.85rem 1rem !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  color: var(--nd-text) !important;
  text-align: center !important;
  letter-spacing: -0.01em !important;
}

/* ── CAROUSEL SECTION ───────────────────────────────────────────── */
.category-carousel-section {
  background: #ffffff !important;
  padding: 2.5rem var(--container-padding) !important;
  overflow: hidden !important;
  border-top: 1px solid var(--nd-border) !important;
  border-bottom: 1px solid var(--nd-border) !important;
}

.carousel-title {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--nd-text-light) !important;
  text-align: center !important;
  margin-bottom: 1.5rem !important;
}

.carousel-slide {
  background: var(--nd-bg-alt) !important;
  border: 1px solid var(--nd-border) !important;
  border-radius: var(--nd-radius-md) !important;
  padding: 0.75rem 1.25rem !important;
  min-width: 120px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

.carousel-slide-icon {
  font-size: 1.5rem !important;
}

.carousel-slide-label {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--nd-text-muted) !important;
}

/* ── CATEGORY BUTTONS ───────────────────────────────────────────── */
.category-buttons-section {
  background: var(--nd-bg-alt) !important;
  padding: 2.5rem var(--container-padding) !important;
}

.category-buttons-section h3.carousel-title {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--nd-text-light) !important;
  text-align: center !important;
  margin-bottom: 1.25rem !important;
}

.category-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.625rem !important;
  justify-content: center !important;
  max-width: 720px !important;
  margin: 0 auto !important;
}

.category-btn {
  padding: 0.55rem 1.1rem !important;
  background: #ffffff !important;
  color: var(--nd-text-muted) !important;
  border: 1px solid var(--nd-border) !important;
  border-radius: 100px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.15s var(--nd-ease) !important;
  box-shadow: var(--nd-shadow-xs) !important;
  letter-spacing: -0.01em !important;
}

.category-btn:hover {
  background: var(--nd-primary) !important;
  color: #ffffff !important;
  border-color: var(--nd-primary) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.28) !important;
}

/* ── HOW IT WORKS ───────────────────────────────────────────────── */
.how-it-works-section {
  background: #ffffff !important;
  padding: 5.5rem var(--container-padding) !important;
}

.how-it-works-section h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--nd-text) !important;
  text-align: center !important;
  margin-bottom: 0.5rem !important;
}

.how-it-works-section > div > .muted {
  text-align: center !important;
  color: var(--nd-text-muted) !important;
  font-size: 1.05rem !important;
  margin-bottom: 3.5rem !important;
}

.how-it-works-steps {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  max-width: 960px !important;
  margin: 0 auto !important;
}

@media (max-width: 768px) {
  .how-it-works-steps {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    max-width: 480px !important;
  }
}

.step-accordion {
  background: var(--nd-bg-alt) !important;
  border: 1px solid var(--nd-border) !important;
  border-radius: var(--nd-radius-xl) !important;
  padding: 2rem !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: var(--nd-shadow-xs) !important;
  transition: box-shadow 0.2s var(--nd-ease), border-color 0.2s var(--nd-ease) !important;
}

.step-accordion:hover {
  box-shadow: var(--nd-shadow-md) !important;
  border-color: var(--nd-border-accent) !important;
}

/* Disable pointer events on header (always show content on desktop) */
.step-accordion-header {
  cursor: default !important;
  padding: 0 !important;
  background: none !important;
  pointer-events: none !important;
  display: block !important;
}

@media (max-width: 768px) {
  .step-accordion-header {
    pointer-events: auto !important;
    cursor: pointer !important;
  }
}

.step-accordion-body {
  display: block !important;
  padding: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  opacity: 1 !important;
}

.step-number {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  background: linear-gradient(135deg, var(--nd-primary), var(--nd-secondary)) !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin-bottom: 1.1rem !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25) !important;
}

.step-title {
  display: block !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--nd-text) !important;
  margin-bottom: 0.625rem !important;
  margin-top: 0 !important;
}

.step-chevron {
  display: none !important;
}

@media (max-width: 768px) {
  .step-chevron {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    color: var(--nd-text-muted) !important;
    transition: transform 0.2s !important;
  }
  .step-accordion-header.active .step-chevron {
    transform: rotate(180deg) !important;
  }
}

.step-accordion-body p {
  color: var(--nd-text-muted) !important;
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* ── FEATURES SECTION ───────────────────────────────────────────── */
/* Section wrapper - full-width container */
.features-section-wrap {
  background: var(--nd-bg-alt);
  padding: 5.5rem var(--container-padding);
  width: 100%;
}

.features-section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3.5rem;
}

.features-section-header h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--nd-text);
  margin-bottom: 0.5rem;
}

.features-section-header p {
  color: var(--nd-text-muted);
  font-size: 1.05rem;
  margin: 0;
}

.features-section {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.25rem !important;
  padding: 0 !important;
  background: transparent !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}

@media (max-width: 900px) {
  .features-section {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 560px) {
  .features-section {
    grid-template-columns: 1fr !important;
  }
}

.feature-card.wow-card {
  background: #ffffff !important;
  border: 1px solid var(--nd-border) !important;
  border-radius: var(--nd-radius-xl) !important;
  padding: 1.75rem !important;
  box-shadow: var(--nd-shadow-xs) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: transform 0.2s var(--nd-ease), box-shadow 0.2s var(--nd-ease), border-color 0.2s var(--nd-ease) !important;
}

.feature-card.wow-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--nd-shadow-md) !important;
  border-color: var(--nd-border-accent) !important;
}

.feature-card h3 {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--nd-text) !important;
  margin-bottom: 0.625rem !important;
  line-height: 1.4 !important;
}

.feature-card p {
  font-size: 0.875rem !important;
  color: var(--nd-text-muted) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* Floating demo button — becomes inline */
.floating-demo-btn {
  position: static !important;
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  margin: 1.5rem auto 0 !important;
  width: fit-content !important;
  min-width: 180px !important;
  background: linear-gradient(135deg, var(--nd-primary), var(--nd-secondary)) !important;
  color: #ffffff !important;
  padding: 0.875rem 2rem !important;
  border-radius: var(--nd-radius-md) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.25) !important;
  transition: all 0.2s var(--nd-ease) !important;
  letter-spacing: -0.01em !important;
}

.floating-demo-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(14, 165, 233, 0.38) !important;
  color: #ffffff !important;
}

/* ── FOOTER CTA ─────────────────────────────────────────────────── */
.footer-cta.vibrant-auth {
  background: linear-gradient(160deg, #0284c7 0%, #0ea5e9 35%, #14b8a6 100%) !important;
  padding: 6rem var(--container-padding) !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.footer-cta .animated-bg {
  display: none !important;
}

.footer-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.1) 0%, transparent 60%);
  pointer-events: none;
}

.footer-cta .footer-inner {
  position: relative !important;
  z-index: 1 !important;
  max-width: 620px !important;
  margin: 0 auto !important;
}

.footer-cta h2 {
  font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.15 !important;
  color: #ffffff !important;
  margin-bottom: 0.75rem !important;
}

.footer-cta .muted {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 1.1rem !important;
  margin-bottom: 0 !important;
}

.footer-cta .hero-buttons {
  margin-top: 2.5rem !important;
  display: flex !important;
  justify-content: center !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
}

.footer-cta .btn.large {
  padding: 0.875rem 1.75rem !important;
  border-radius: var(--nd-radius-md) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  min-width: 140px !important;
}

/* ── SITE FOOTER ────────────────────────────────────────────────── */
footer.site-footer {
  background: var(--nd-text) !important;
  color: rgba(255, 255, 255, 0.55) !important;
  border-top: none !important;
  padding: 3rem 2rem 2.5rem !important;
}

footer.site-footer > div:first-child {
  margin-bottom: 1.75rem !important;
  display: flex !important;
  justify-content: center !important;
  gap: 2rem !important;
  flex-wrap: wrap !important;
}

footer.site-footer a {
  color: rgba(255, 255, 255, 0.55) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}

footer.site-footer a:hover {
  color: rgba(255, 255, 255, 0.95) !important;
}

footer.site-footer [data-lucide="scissors"] {
  color: var(--nd-primary) !important;
}

footer.site-footer span {
  color: rgba(255, 255, 255, 0.9) !important;
}

footer.site-footer p {
  color: rgba(255, 255, 255, 0.35) !important;
  font-size: 0.8rem !important;
  margin-bottom: 0 !important;
}

/* ── DARK MODE (PREMIUM USERS) ──────────────────────────────────── */
[data-theme="dark"] body {
  background: #0b1121 !important;
}

[data-theme="dark"] header.site-header {
  background: rgba(15, 23, 42, 0.95) !important;
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}

[data-theme="dark"] header.site-header .logo span {
  color: #f1f5f9 !important;
}

[data-theme="dark"] header.site-header [data-lucide="scissors"] {
  color: var(--nd-primary) !important;
}

[data-theme="dark"] .hamburger span {
  background: #f1f5f9 !important;
}

[data-theme="dark"] .nav-back-btn {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .theme-toggle {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .desktop-nav > a {
  color: rgba(255, 255, 255, 0.55) !important;
}

[data-theme="dark"] .desktop-nav > a:hover {
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ── GLOBAL WOW-CARD CLEANUP ────────────────────────────────────── */
/* Remove backdrop blur that kills readability on clean light bg */
.wow-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── PREMIUM UPGRADE BUTTON IN NAV ──────────────────────────────── */
.premium-btn.pulse-gold {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  border-radius: var(--nd-radius-md) !important;
  font-weight: 700 !important;
  animation: none !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

/* ── SCROLL-IN ANIMATION ────────────────────────────────────────── */
@keyframes nd-fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nd-fade-up {
  animation: nd-fadeUp 0.5s var(--nd-ease) both;
}

.nd-fade-up-1 { animation-delay: 0.05s; }
.nd-fade-up-2 { animation-delay: 0.1s; }
.nd-fade-up-3 { animation-delay: 0.15s; }
.nd-fade-up-4 { animation-delay: 0.2s; }

/* ── UTIL: SECTION HEADER ────────────────────────────────────────── */
.nd-section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nd-primary);
  margin-bottom: 0.75rem;
  padding: 0.25rem 0.75rem;
  background: rgba(14, 165, 233, 0.08);
  border-radius: 100px;
  border: 1px solid rgba(14, 165, 233, 0.15);
}


/* ════════════════════════════════════════════════════════════════════
   PHASE 2 — MOBILE POLISH + DASHBOARD REDESIGN
   Appended to new-design.css (loads last, wins specificity)
   ════════════════════════════════════════════════════════════════════ */

/* ── GLOBAL MOBILE BREATHING ROOM ──────────────────────────────── */
@media (max-width: 768px) {
  /* Section padding: generous but not wasteful */
  .looking-services,
  .how-it-works-section,
  .features-section-wrap,
  .footer-cta.vibrant-auth {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Hero: more vertical room on small screens */
  .vibrant-hero.home-hero {
    padding-top: 3.5rem !important;
    padding-bottom: 3rem !important;
  }

  /* Hero title: scale down gracefully */
  .hero-title.gradient-text {
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
    margin-bottom: 1rem !important;
  }

  /* Hero subtext: comfortable leading */
  .hero-subtext {
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
  }

  /* Hero buttons: full-width stack */
  .hero-buttons .btn.large:first-child {
    max-width: 100% !important;
    width: 100% !important;
  }

  .nd-hero-secondary {
    max-width: 100% !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .nd-btn-outline,
  .nd-btn-ghost {
    flex: none !important;
    width: 100% !important;
    padding: 0.875rem 1.25rem !important;
  }

  /* Trust logos row */
  .trust-logos {
    margin-top: 2rem !important;
  }

  .trust-logos .flex {
    gap: 1rem !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  /* Section headings: scale down */
  .looking-services h2,
  .how-it-works-section h2,
  .features-section-header h2 {
    font-size: clamp(1.5rem, 5.5vw, 2rem) !important;
  }

  /* Category / filter buttons: better wrap */
  .category-buttons {
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .category-btn {
    padding: 0.55rem 1.1rem !important;
    font-size: 0.85rem !important;
    min-height: 40px !important;
  }
}

/* ── SERVICE BUBBLES — MOBILE ───────────────────────────────────── */
@media (max-width: 640px) {
  .service-bubbles {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.875rem !important;
    margin-top: 1.75rem !important;
  }

  .service-bubbles .bubble {
    padding: 1.25rem 0.75rem !important;
    border-radius: var(--nd-radius-lg) !important;
  }

  .service-bubbles .bubble img {
    width: 70px !important;
    height: 70px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
  }

  .service-bubbles .bubble span:last-child {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    margin-top: 0.5rem !important;
    display: block !important;
  }
}

/* ── HOW IT WORKS — MOBILE ──────────────────────────────────────── */
@media (max-width: 768px) {
  .how-it-works-steps {
    grid-template-columns: 1fr !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .step-accordion {
    padding: 1.5rem !important;
  }

  /* On mobile: accordion collapse/expand */
  .step-accordion-body {
    overflow: hidden !important;
    max-height: 0 !important;
    opacity: 0 !important;
    transition: max-height 0.3s ease, opacity 0.2s ease !important;
    display: block !important;
  }

  .step-accordion.open .step-accordion-body,
  .step-accordion-body.active {
    max-height: 200px !important;
    opacity: 1 !important;
  }

  .step-accordion-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  .step-number {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    font-size: 0.9rem !important;
    margin-bottom: 0 !important;
  }

  .step-title {
    font-size: 0.95rem !important;
    flex: 1 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
}

/* ── FEATURES — MOBILE ──────────────────────────────────────────── */
@media (max-width: 560px) {
  .features-section-wrap {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .features-section {
    grid-template-columns: 1fr !important;
    gap: 0.875rem !important;
  }

  .feature-card.wow-card {
    padding: 1.375rem !important;
  }
}

/* ── FOOTER CTA — MOBILE ────────────────────────────────────────── */
@media (max-width: 768px) {
  .footer-cta.vibrant-auth {
    padding: 3.5rem var(--container-padding) !important;
  }

  .footer-cta h2 {
    font-size: clamp(1.5rem, 5.5vw, 2rem) !important;
  }
}

/* ── MIGRATE BANNER — MOBILE ────────────────────────────────────── */
@media (max-width: 640px) {
  .migrate-banner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.75rem !important;
    padding: 1rem 1.25rem !important;
  }

  .migrate-banner .btn.small {
    margin-left: 0 !important;
    align-self: center !important;
  }
}

/* ── STATS ROW — MOBILE FINE-TUNE ───────────────────────────────── */
@media (max-width: 420px) {
  .nd-stats {
    padding: 1.5rem var(--container-padding) !important;
  }

  .nd-stat {
    padding: 0.5rem 1rem !important;
    min-width: 45% !important;
  }

  .nd-stat-number {
    font-size: 1.5rem !important;
  }
}

/* ── DARK FOOTER — MOBILE ───────────────────────────────────────── */
@media (max-width: 768px) {
  .nd-footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .nd-footer .footer-brand {
    text-align: center !important;
  }

  .nd-footer .footer-links-col {
    text-align: center !important;
  }

  .nd-footer .footer-bottom {
    flex-direction: column !important;
    gap: 0.75rem !important;
    text-align: center !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD REDESIGN — SHARED (Free + Premium)
   ════════════════════════════════════════════════════════════════════ */

/* ── DASHBOARD SECTION — CLEAN BASE ─────────────────────────────── */
.dashboard {
  background: #f8fafc !important;
  min-height: 100vh !important;
  padding: 0 !important;
}

/* Remove vibrant-auth styling from dashboard */
.dashboard.vibrant-auth {
  background: #f8fafc !important;
}

/* Hide animated-bg inside dashboard */
.dashboard .animated-bg {
  display: none !important;
}

/* ── BANNERS ─────────────────────────────────────────────────────── */
.upgrade-banner {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
  border-bottom: 1px solid rgba(245, 158, 11, 0.2) !important;
  padding: 1rem var(--container-padding) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  font-size: 0.9rem !important;
  color: #92400e !important;
  font-weight: 500 !important;
}

.upgrade-banner strong {
  color: #78350f !important;
}

.upgrade-banner a.btn {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 0.82rem !important;
  padding: 0.45rem 1rem !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

.premium-status-banner.dashboard-banner {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
  border-bottom: 1px solid rgba(16, 185, 129, 0.2) !important;
  padding: 0.875rem var(--container-padding) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #065f46 !important;
}

.pulsing-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  animation: pulse-dot 2s ease-in-out infinite !important;
  flex-shrink: 0 !important;
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}

/* ── DASH HEAD ───────────────────────────────────────────────────── */
.dash-head {
  background: #ffffff !important;
  border-bottom: 1px solid var(--nd-border) !important;
  padding: 1.5rem var(--container-padding) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.dash-avatar-wrapper,
.dash-avatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  border: 2px solid rgba(14,165,233,0.2) !important;
  background: linear-gradient(135deg, var(--nd-primary), var(--nd-secondary)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.dash-avatar-wrapper img,
.dash-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

.dash-title {
  font-size: clamp(1.15rem, 2.5vw, 1.4rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--nd-text) !important;
  margin: 0 0 0.2rem !important;
  line-height: 1.25 !important;
}

.dash-head-actions {
  display: flex !important;
  gap: 0.625rem !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* Action buttons in dash head */
.nav-action-btn,
.desktop-dash-btn {
  background: #ffffff !important;
  border: 1.5px solid var(--nd-border) !important;
  color: var(--nd-text) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  padding: 0.55rem 1rem !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  white-space: nowrap !important;
  min-height: 38px !important;
}

.nav-action-btn:hover,
.desktop-dash-btn:hover {
  background: var(--nd-bg-alt) !important;
  border-color: rgba(14,165,233,0.35) !important;
  color: var(--nd-primary) !important;
  transform: translateY(-1px) !important;
}

/* Gradient CTA button */
.gradient-btn,
.btn-primary.gradient-btn {
  background: linear-gradient(135deg, var(--nd-primary), var(--nd-secondary)) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  padding: 0.6rem 1.25rem !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  box-shadow: 0 3px 10px rgba(14,165,233,0.25) !important;
  white-space: nowrap !important;
  min-height: 38px !important;
  text-decoration: none !important;
}

.gradient-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(14,165,233,0.35) !important;
}

/* Status badge */
.status-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.3rem 0.75rem !important;
  border-radius: 100px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: capitalize !important;
}

.status-booked, .status-confirmed {
  background: rgba(14,165,233,0.1) !important;
  color: #0369a1 !important;
}

.status-completed, .status-done {
  background: rgba(16,185,129,0.1) !important;
  color: #047857 !important;
}

.status-cancelled, .status-canceled {
  background: rgba(239,68,68,0.1) !important;
  color: #b91c1c !important;
}

.status-pending {
  background: rgba(245,158,11,0.1) !important;
  color: #92400e !important;
}

/* ── DASHBOARD GRID ──────────────────────────────────────────────── */
.dashboard-grid {
  display: grid !important;
  grid-template-columns: 1fr 320px !important;
  gap: 1.5rem !important;
  padding: 1.5rem var(--container-padding) 2.5rem !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  align-items: start !important;
}

@media (max-width: 900px) {
  .dashboard-grid {
    grid-template-columns: 1fr !important;
    padding: 1.25rem 1.25rem 2rem !important;
    gap: 1.25rem !important;
  }

  .sidebar-sticky {
    position: static !important;
  }
}

/* ── CARDS ───────────────────────────────────────────────────────── */
.dashboard .card,
.main-content .card,
.sidebar-sticky .card {
  background: #ffffff !important;
  border: 1px solid var(--nd-border) !important;
  border-radius: 18px !important;
  padding: 1.5rem !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.03) !important;
  margin-bottom: 1.25rem !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s ease !important;
}

.dashboard .card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.05) !important;
}

.dashboard .card:last-child {
  margin-bottom: 0 !important;
}

/* Card headers */
.appt-header,
.hours-header,
.card > div:first-child:has(h2, h3) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  margin-bottom: 1.25rem !important;
  flex-wrap: wrap !important;
}

.appointments-card h2,
.hours-card h2,
.dashboard .card h2,
.dashboard .card h3 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--nd-text) !important;
  margin: 0 !important;
}

/* ── TABLE ───────────────────────────────────────────────────────── */
.table-scroll {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border-radius: 12px !important;
  border: 1px solid var(--nd-border) !important;
}

.table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 0.875rem !important;
}

.table thead th {
  background: #f8fafc !important;
  color: var(--nd-text-muted) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid var(--nd-border) !important;
  white-space: nowrap !important;
  text-align: left !important;
}

.table tbody td {
  padding: 0.875rem 1rem !important;
  border-bottom: 1px solid rgba(0,0,0,0.04) !important;
  color: var(--nd-text) !important;
  vertical-align: middle !important;
}

.table tbody tr:last-child td {
  border-bottom: none !important;
}

.table tbody tr:hover td {
  background: #f8fafc !important;
}

/* Cancel button in table */
.cancel-btn {
  background: none !important;
  border: 1px solid rgba(239,68,68,0.3) !important;
  color: #dc2626 !important;
  border-radius: 8px !important;
  padding: 0.35rem 0.7rem !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.cancel-btn:hover {
  background: rgba(239,68,68,0.08) !important;
  border-color: #dc2626 !important;
}

/* ── HOURS CARD ──────────────────────────────────────────────────── */
.edit-hours-btn {
  background: var(--nd-bg-alt) !important;
  border: 1.5px solid var(--nd-border) !important;
  color: var(--nd-primary) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  padding: 0.5rem 1rem !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
}

.edit-hours-btn:hover {
  background: rgba(14,165,233,0.08) !important;
  border-color: var(--nd-primary) !important;
}

.hours-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.625rem !important;
}

.hours-row {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.625rem 0.875rem !important;
  border-radius: 10px !important;
  background: var(--nd-bg-alt) !important;
  border: 1px solid var(--nd-border) !important;
  flex-wrap: wrap !important;
}

.day-label {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: var(--nd-text) !important;
  width: 72px !important;
  flex-shrink: 0 !important;
  text-transform: capitalize !important;
}

.day-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  flex: 1 !important;
  flex-wrap: wrap !important;
}

.time-range {
  display: flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
}

.open-time,
.close-time {
  font-size: 0.82rem !important;
  padding: 0.35rem 0.5rem !important;
  border: 1px solid var(--nd-border) !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: var(--nd-text) !important;
  min-width: 90px !important;
}

.open-time:focus,
.close-time:focus {
  outline: none !important;
  border-color: var(--nd-primary) !important;
  box-shadow: 0 0 0 3px rgba(14,165,233,0.12) !important;
}

/* Toggle switch */
.toggle-switch {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.toggle-switch input[type="checkbox"] {
  opacity: 0 !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
}

.slider {
  display: block !important;
  width: 38px !important;
  height: 20px !important;
  background: #cbd5e1 !important;
  border-radius: 100px !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
  position: relative !important;
}

.slider::after {
  content: '' !important;
  position: absolute !important;
  width: 14px !important;
  height: 14px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  top: 3px !important;
  left: 3px !important;
  transition: transform 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}

.toggle-switch input:checked + .slider {
  background: var(--nd-primary) !important;
}

.toggle-switch input:checked + .slider::after {
  transform: translateX(18px) !important;
}

/* Save check icon */
.save-check {
  color: #10b981 !important;
  display: flex !important;
  align-items: center !important;
}

/* Copy all button */
.copy-all {
  background: none !important;
  border: none !important;
  color: var(--nd-primary) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  padding: 0.25rem 0 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* ── ANALYTICS / STAT CARDS ─────────────────────────────────────── */
.analytics-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.875rem !important;
}

@media (max-width: 768px) {
  .analytics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 400px) {
  .analytics-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.625rem !important;
  }
}

.stat-card {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  border: 1px solid rgba(14,165,233,0.15) !important;
  border-radius: 14px !important;
  padding: 1.125rem 1rem !important;
  text-align: center !important;
  transition: transform 0.15s ease !important;
}

.stat-card:hover {
  transform: translateY(-2px) !important;
}

.stat-card:nth-child(2) {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
  border-color: rgba(16,185,129,0.15) !important;
}

.stat-card:nth-child(3) {
  background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 100%) !important;
  border-color: rgba(168,85,247,0.15) !important;
}

.stat-card:nth-child(4) {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
  border-color: rgba(249,115,22,0.15) !important;
}

.stat-card .stat-value {
  font-size: clamp(1.4rem, 3vw, 1.85rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  color: var(--nd-text) !important;
  line-height: 1.1 !important;
}

.stat-card .muted.small {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--nd-text-muted) !important;
  margin-top: 0.25rem !important;
}

/* ── SERVICES / CLIENTS / REVIEWS CARDS ─────────────────────────── */
.services-list,
.clients-list,
.reviews-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

/* ── SIDEBAR ─────────────────────────────────────────────────────── */
.sidebar-sticky {
  position: sticky !important;
  top: calc(var(--header-height, 68px) + 1.5rem) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
}

/* Sidebar cards */
.sidebar-sticky .card {
  margin-bottom: 0 !important;
}

/* Photo gallery */
.photo-gallery {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.5rem !important;
  margin-top: 1rem !important;
}
@media (max-width: 480px) {
  .photo-gallery { grid-template-columns: repeat(2, 1fr) !important; }
}

.photo-gallery img {
  width: 100% !important;
  aspect-ratio: 1 !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  border: 1px solid var(--nd-border) !important;
  transition: transform 0.15s ease !important;
}

.photo-gallery img:hover {
  transform: scale(1.03) !important;
}

/* Promo code display */
.copy-btn-modern {
  background: var(--nd-bg-alt) !important;
  border: 1.5px dashed var(--nd-border-accent) !important;
  border-radius: 10px !important;
  padding: 0.75rem 1rem !important;
  font-family: 'SFMono-Regular', Consolas, monospace !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: var(--nd-primary) !important;
  cursor: pointer !important;
  width: 100% !important;
  text-align: center !important;
  transition: all 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
}

.copy-btn-modern:hover {
  background: rgba(14,165,233,0.06) !important;
  border-color: var(--nd-primary) !important;
}

/* ── UPGRADE CTA CARD (FREE DASHBOARD SIDEBAR) ───────────────────── */
.sidebar-sticky .card[style*="gradient"],
.sidebar-sticky .card[style*="linear-gradient"] {
  background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
  border: 1.5px solid rgba(14,165,233,0.2) !important;
  border-radius: 18px !important;
}

/* Upgrade CTA gradient button */
.gradient-btn.small {
  background: linear-gradient(135deg, var(--nd-primary), var(--nd-secondary)) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  padding: 0.75rem 1.25rem !important;
  border-radius: 10px !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 4px 12px rgba(14,165,233,0.25) !important;
}

.gradient-btn.small:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(14,165,233,0.35) !important;
}

/* Locked badge on free sidebar cards */
.locked-overlay {
  background: rgba(248,250,252,0.9) !important;
  border-radius: 12px !important;
  padding: 1.5rem !important;
  text-align: center !important;
  border: 1.5px dashed var(--nd-border) !important;
}

/* ── CALENDAR MODAL ──────────────────────────────────────────────── */
.calendar-modal {
  background: rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.calendar-content {
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
  border: 1px solid var(--nd-border) !important;
  max-width: 540px !important;
  width: calc(100% - 2rem) !important;
  margin: auto !important;
}

.calendar-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.25rem 1.5rem !important;
  border-bottom: 1px solid var(--nd-border) !important;
  font-weight: 700 !important;
  color: var(--nd-text) !important;
}

.close-modal-btn {
  background: var(--nd-bg-alt) !important;
  border: 1px solid var(--nd-border) !important;
  border-radius: 8px !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 1.1rem !important;
  color: var(--nd-text-muted) !important;
  transition: all 0.15s ease !important;
}

.close-modal-btn:hover {
  background: var(--nd-border) !important;
  color: var(--nd-text) !important;
}

/* ── DASHBOARD MOBILE ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .dash-head {
    padding: 1.125rem 1.25rem !important;
    gap: 0.875rem !important;
  }

  .dash-head-actions {
    width: 100% !important;
    gap: 0.5rem !important;
  }

  .nav-action-btn,
  .desktop-dash-btn {
    font-size: 0.8rem !important;
    padding: 0.5rem 0.875rem !important;
    min-height: 36px !important;
  }

  .gradient-btn,
  .btn-primary.gradient-btn {
    font-size: 0.82rem !important;
    padding: 0.5rem 1rem !important;
    min-height: 36px !important;
  }

  .dashboard .card,
  .main-content .card,
  .sidebar-sticky .card {
    padding: 1.25rem !important;
    border-radius: 14px !important;
    margin-bottom: 1rem !important;
  }

  .hours-row {
    gap: 0.5rem !important;
  }

  .day-label {
    width: 60px !important;
  }

  .open-time,
  .close-time {
    min-width: 78px !important;
    font-size: 0.78rem !important;
    padding: 0.3rem 0.4rem !important;
  }

  .upgrade-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    font-size: 0.85rem !important;
    padding: 0.875rem 1.25rem !important;
  }
}

@media (max-width: 480px) {
  .dash-title {
    font-size: 1.1rem !important;
  }

  .table thead th,
  .table tbody td {
    padding: 0.625rem 0.75rem !important;
    font-size: 0.82rem !important;
  }

  .analytics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.625rem !important;
  }

  .stat-card {
    padding: 0.875rem 0.75rem !important;
  }

  .stat-card .stat-value {
    font-size: 1.4rem !important;
  }
}

/* ── PREMIUM MEMBER BADGE ────────────────────────────────────────── */
.status-badge[style*="Premium"],
.dash-title + .status-badge {
  background: linear-gradient(135deg, rgba(14,165,233,0.1), rgba(20,184,166,0.1)) !important;
  color: var(--nd-primary) !important;
  border: 1px solid rgba(14,165,233,0.2) !important;
}

/* ── ADD APPOINTMENT MODAL ───────────────────────────────────────── */
#addApptModal .modal-content,
#addApptModal .modal-card {
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
  border: 1px solid var(--nd-border) !important;
  background: #ffffff !important;
}

/* ── SERVICES/CLIENTS/REVIEWS LIST ITEMS ─────────────────────────── */
.service-item,
.client-item,
.review-item {
  padding: 0.875rem !important;
  border-radius: 10px !important;
  border: 1px solid var(--nd-border) !important;
  background: var(--nd-bg-alt) !important;
  transition: border-color 0.15s ease !important;
}

.service-item:hover,
.client-item:hover,
.review-item:hover {
  border-color: rgba(14,165,233,0.25) !important;
}

/* ── PHOTO UPLOAD AREA ───────────────────────────────────────────── */
.media-card .gradient-btn {
  font-size: 0.85rem !important;
  padding: 0.55rem 1.1rem !important;
}

/* ── SPINNER ─────────────────────────────────────────────────────── */
.spinner {
  border: 3px solid var(--nd-border) !important;
  border-top-color: var(--nd-primary) !important;
  border-radius: 50% !important;
  width: 24px !important;
  height: 24px !important;
  animation: spin 0.7s linear infinite !important;
}

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

/* ── OVERALL CLEANUP ─────────────────────────────────────────────── */
/* Ensure no leftover vibrant-auth gradients on dashboard */
.dashboard.vibrant-auth::before,
.dashboard.vibrant-auth::after {
  display: none !important;
}

/* Small utility: hide desktop-only btns on very small */
@media (max-width: 400px) {
  .desktop-dash-btn:nth-child(n+3) {
    display: none !important;
  }
}
/* ==========================================================
   BookerAI Design System V2
   Focus: Trust, Professionalism, and Smooth Flow
   ========================================================== */

:root {
    /* --- Modern Color Palette --- */
    --brand-primary: #3b82f6;    /* Electric Blue */
    --brand-primary-dark: #2563eb;
    --brand-secondary: #10b981;  /* Emerald */
    --brand-accent: #6366f1;     /* Indigo */
    
    --bg-base: #f8fafc;
    --bg-surface: #ffffff;
    --bg-overlay: rgba(255, 255, 255, 0.7);
    
    --text-strong: #0f172a;      /* Deep Slate */
    --text-main: #334155;
    --text-muted: #64748b;
    --text-white: #ffffff;
    
    --border-soft: #e2e8f0;
    --border-focus: #3b82f6;
    
    /* --- Glassmorphism & Shadows --- */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-blur: blur(12px);
    
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    
    /* --- Animations --- */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-main: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
    --bg-base: #0f172a;
    --bg-surface: #1e293b;
    --bg-overlay: rgba(15, 23, 42, 0.7);
    
    --text-strong: #f8fafc;
    --text-main: #cbd5e1;
    --text-muted: #94a3b8;
    
    --border-soft: #334155;
    
    --glass-bg: rgba(30, 41, 59, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
}

/* --- Base Typography --- */
body {
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--text-main);
    background-color: var(--bg-base);
    line-height: 1.5;
}

h1, h2, h3, h4, .font-heading {
    font-family: 'Poppins', sans-serif; /* fallback for now, switching to Outfit in layout */
    color: var(--text-strong);
    letter-spacing: -0.02em;
    font-weight: 700;
}

/* --- Components: Buttons --- */
.btn-v2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: var(--transition-main);
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-v2-primary {
    background: var(--brand-primary);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-v2-primary:hover {
    background: var(--brand-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-v2-secondary {
    background: var(--bg-surface);
    color: var(--text-strong);
    border-color: var(--border-soft);
}

.btn-v2-secondary:hover {
    background: var(--bg-base);
    border-color: var(--text-muted);
}

/* --- Components: Cards --- */
.card-v2 {
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-main);
}

.card-v2:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--brand-primary);
}

/* --- Header & Nav --- */
.site-header-v2 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
    transition: var(--transition-main);
}

.nav-container-v2 {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* --- Components: Inputs --- */
.input-v2 {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    background: var(--bg-surface);
    color: var(--text-strong);
    font-size: 0.9375rem;
    transition: var(--transition-fast);
}

.input-v2:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* --- Responsive Utilities --- */
@media (max-width: 768px) {
    .nav-container-v2 {
        height: 64px;
        padding: 0 1rem;
    }
}
/* ============================================================
   BOOKER AI — DESIGN SYSTEM V3
   ElevenLabs-level craft. Every pixel intentional.
   
   Art direction: Professional SaaS · Sky blue + teal palette
   Typography: Plus Jakarta Sans (display weight) + Inter (body)
   Philosophy: White space is luxury. Restraint is power.
   ============================================================ */

/* ── FONT IMPORT ─────────────────────────────────────────── */
/* Removed @import — fonts now loaded once via <link> in layout.html so the
   browser can discover them at HTML parse time and preconnect actually helps. */

/* ── ROOT TOKENS ─────────────────────────────────────────── */
:root {
  /* Brand Colors — #0369a1 sky-700 5.1:1 contrast on white (WCAG AA, buttons+text safe) */
  --b-primary:       #0369a1;
  --b-primary-hover: #0284c7;
  --b-primary-dim:   rgba(3, 105, 161, 0.12);
  --b-teal:          #14b8a6;
  --b-teal-hover:    #0d9488;
  --b-gradient:      linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%);
  --b-gold:          #d4a943;
  --b-gold-dim:      rgba(212, 169, 67, 0.15);
  --b-gold-dark-bg:  linear-gradient(135deg, #1a1209 0%, #2d1f08 100%);
  --b-gradient-text: linear-gradient(135deg, #0284c7 0%, #0d9488 100%);

  /* Glassmorphism Spirit */
  --b-glass-bg:      rgba(255, 255, 255, 0.02);
  --b-glass-border:  rgba(255, 255, 255, 0.05);
  --b-glass-blur:    blur(12px);
  --b-glass-shadow:  0 8px 32px 0 rgba(31, 38, 135, 0.07);

  /* Surfaces */
  --b-bg:            #ffffff;
  --b-bg-page:       #f8fafc;
  --b-bg-subtle:     #f0f9ff;
  --b-surface:       #ffffff;
  --b-surface-2:     #f8fafc;
  --b-surface-3:     #f1f5f9;

  /* 4-Layer Shadow System (Directional Lighting) */
  --b-shadow-1:      0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.02);
  --b-shadow-2:      0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -1px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.1);
  --b-shadow-3:      0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.05);
  --b-shadow-4:      0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.05);
  
  --b-shadow-xs:     var(--b-shadow-1);
  --b-shadow-sm:     var(--b-shadow-2);
  --b-shadow-md:     var(--b-shadow-3);
  --b-shadow-lg:     var(--b-shadow-4);
  --b-shadow-xl:     0 25px 50px -12px rgba(0,0,0,0.25);
  --b-shadow-blue:   0 4px 16px rgba(14, 165, 233, 0.15);
  --b-shadow-blue-lg: 0 12px 32px rgba(14, 165, 233, 0.25);

  /* Typography (Variable-Ready) */
  --b-font-main:     'Inter', 'Outfit', system-ui, sans-serif;
  --b-font-display:  'Plus Jakarta Sans', 'Outfit', sans-serif;
  --b-tracking-header: -0.04em;
  --b-tracking-body:   -0.01em;
  --b-tracking-long:   0.01em;

  /* Text & Borders */
  --b-text:          #0f172a;
  --b-text-2:        #334155;
  --b-text-3:        #64748b;
  /* #64748b slate-500 4.6:1 on white — replaces invisible #94a3b8 (2.56:1) */
  --b-text-4:        #64748b;
  --b-text-inv:      #ffffff;
  --b-border:        #e2e8f0;
  --b-border-2:      #cbd5e1;
  --b-border-focus:  #0369a1;

  /* Status Tokens */
  --b-success:       #10b981;
  --b-success-bg:    #ecfdf5;
  /* #dc2626 red-600 5.9:1 on white — fixes #ef4444 3.44:1 fail */
  --b-error:         #dc2626;
  --b-error-bg:      #fef2f2;
  --b-warning:       #f59e0b;
  --b-warning-bg:    #fffbeb;

  /* Radius */
  --b-r-xs:  4px;
  --b-r-sm:  8px;
  --b-r-md:  12px;
  --b-r-lg:  16px;
  --b-r-xl:  24px;
  --b-r-2xl: 32px;
  --b-r-full: 9999px;

  /* Spacing Scale (8px base) */
  --b-sp-05: 4px;
  --b-sp-1:  8px;
  --b-sp-15: 12px;
  --b-sp-2:  16px;
  --b-sp-25: 20px;
  --b-sp-3:  24px;
  --b-sp-4:  32px;
  --b-sp-5:  40px;
  --b-sp-6:  48px;
  --b-sp-8:  64px;
  --b-sp-10: 80px;
  --b-sp-12: 96px;
  --b-sp-16: 128px;
  --b-sp-20: 160px;

  /* Premium Pro Gradient Pulse */
  --b-pro-pulse: 0 0 0 0 rgba(14, 165, 233, 0.4);


  /* Motion: Soulful cubic-bezier */
  --b-ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --b-ease:          cubic-bezier(0.16, 1, 0.3, 1);
  --b-dur-fast:    120ms;
  --b-dur-base:    300ms;
  --b-dur-slow:    500ms;

  /* Layout */
  --b-container:   1440px;
  --b-nav-h:       68px;
  --b-safe-top:    env(safe-area-inset-top, 0px);
  --b-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── DARK MODE ───────────────────────────────────────────── */
[data-theme="dark"] {
  --b-bg:            #0a0f1e;
  --b-bg-page:       #0a0f1e;
  --b-bg-subtle:     #0f1628;
  --b-surface:       #131929;
  --b-surface-2:     #1a2236;
  --b-surface-3:     #1e2840;

  --b-text:          #f1f5f9;
  --b-text-2:        #cbd5e1;
  --b-text-3:        #94a3b8;
  /* #94a3b8 slate-400 = 4.6:1 on #131929 dark surface — WCAG AA pass */
  --b-text-4:        #94a3b8;

  --b-border:        #1e2840;
  --b-border-2:      #2a3654;

  /* Dark mode glassmorphism */
  --b-glass-bg:      rgba(255, 255, 255, 0.03);
  --b-glass-border:  rgba(255, 255, 255, 0.08);

  /* Deep layered shadows for dark mode */
  --b-shadow-1:      0 1px 2px rgba(0,0,0,0.5);
  --b-shadow-2:      0 4px 6px -1px rgba(0,0,0,0.6), 0 2px 4px -1px rgba(0,0,0,0.5);
  --b-shadow-3:      0 10px 15px -3px rgba(0,0,0,0.7), 0 4px 6px -2px rgba(0,0,0,0.5);
  --b-shadow-4:      0 20px 25px -5px rgba(0,0,0,0.8), 0 10px 10px -5px rgba(0,0,0,0.5);

  --b-shadow-xs:     var(--b-shadow-1);
  --b-shadow-sm:     var(--b-shadow-2);
  --b-shadow-md:     var(--b-shadow-3);
  --b-shadow-lg:     var(--b-shadow-4);

  --b-primary-dim:   rgba(2, 132, 199, 0.15);
  --b-success-bg:    rgba(16, 185, 129, 0.12);
  --b-error-bg:      rgba(239, 68, 68, 0.12);
  --b-warning-bg:    rgba(245, 158, 11, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --b-bg:            #0a0f1e;
    --b-bg-page:       #0a0f1e;
    --b-bg-subtle:     #0f1628;
    --b-surface:       #131929;
    --b-surface-2:     #1a2236;
    --b-surface-3:     #1e2840;
    --b-text:          #f1f5f9;
    --b-text-2:        #cbd5e1;
    --b-text-3:        #94a3b8;
    /* #94a3b8 slate-400 = 4.6:1 on dark surface — WCAG AA pass */
    --b-text-4:        #94a3b8;
    --b-border:        #1e2840;
    --b-border-2:      #2a3654;
    --b-shadow-xs:     var(--b-shadow-1);
    --b-shadow-sm:     var(--b-shadow-2);
    --b-shadow-md:     var(--b-shadow-3);
    --b-shadow-lg:     var(--b-shadow-4);
    --b-primary-dim:   rgba(2, 132, 199, 0.15);
  }
}

/* ── GLOBAL RESET / BASE ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--b-font-main) !important;
  font-size: var(--b-text-base) !important;
  line-height: 1.6 !important;
  letter-spacing: var(--b-tracking-body) !important;
  color: var(--b-text) !important;
  background: var(--b-bg-page) !important;
  padding-bottom: var(--b-safe-bottom) !important;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--b-font-display) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: var(--b-tracking-header) !important;
  color: var(--b-text) !important;
  margin-top: 0 !important;
}

/* ── NAVIGATION V3 ───────────────────────────────────────── */
.site-header-v2,
header.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  height: calc(var(--b-nav-h) + var(--b-safe-top)) !important;
  padding-top: var(--b-safe-top) !important;
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--b-glass-border) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.04) !important;
}

[data-theme="dark"] .site-header-v2,
[data-theme="dark"] header.site-header {
  background: rgba(10, 15, 30, 0.75) !important;
}

.nav-container-v2 {
  width: 100% !important;
  max-width: var(--b-container) !important;
  margin: 0 auto !important;
  padding: 0 1.25rem !important;
  height: var(--b-nav-h) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Logo */
.logo-v2, .logo {
  display: flex !important;
  align-items: center !important;
  gap: var(--b-sp-2) !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

.logo-v2 span, .logo span {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.3rem !important;
  letter-spacing: -0.04em !important;
  color: var(--b-text) !important;
}

@media (min-width: 769px) {
  .site-header-v2 .desktop-nav-v2 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 1.25rem !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE 10+ */
    
    /* Support for horizontal scrolling with mask-image for premium fade */
    mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
    
    padding: 0 10px !important; /* Breathe for the mask */
    scroll-behavior: smooth;
  }
  
  .site-header-v2 .desktop-nav-v2::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari, Opera */
  }

  /* Ensure links dont shrink when scrolling */
  .site-header-v2 .desktop-nav-v2 > a,
  .site-header-v2 .desktop-nav-v2 .nav-dropdown-v2 {
    flex-shrink: 0 !important;
  }
}

.site-header-v2 .desktop-nav-v2 > a {
  margin: 0 !important;
  padding: 8px 16px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--b-text-2) !important;
  border-radius: var(--b-r-full) !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.site-header-v2 .desktop-nav-v2 > a:hover {
  background: var(--b-surface-2) !important;
  color: var(--b-text) !important;
}

.site-header-v2 .desktop-nav-v2 > a.is-active {
  background: var(--b-primary-dim) !important;
  color: var(--b-primary) !important;
  font-weight: 800 !important;
}

.site-header-v2 .desktop-nav-v2 > a:first-child,
.site-header-v2 .nav-links > a:first-child,
header.site-header .desktop-nav > a:first-child {
  margin-left: 0 !important;
}

.desktop-nav-v2 > a:first-child,
.nav-links > a:first-child,
.desktop-nav > a:first-child {
  margin-left: 0 !important;
}

.nav-link-v2,
.nav-link.primary-link,
.desktop-nav > a {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--b-text-sm) !important;
  font-weight: 500 !important;
  color: var(--b-text-3) !important;
  text-decoration: none !important;
  padding: var(--b-sp-2) var(--b-sp-3) !important;
  border-radius: var(--b-r-md) !important;
  transition: color var(--b-dur-fast) var(--b-ease),
              background var(--b-dur-fast) var(--b-ease) !important;
  white-space: nowrap !important;
  border: none !important;
  background: none !important;
}

.nav-link-v2:hover,
.nav-link.primary-link:hover,
.desktop-nav > a:hover {
  color: var(--b-text) !important;
  background: rgba(0, 0, 0, 0.04) !important;
}

[data-theme="dark"] .nav-link-v2:hover,
[data-theme="dark"] .desktop-nav > a:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.nav-link-v2.is-active {
  color: var(--b-primary) !important;
  background: var(--b-primary-dim) !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  border-radius: var(--b-r-full) !important;
}

/* Premium lock badge in nav links (R2-N1) */
.nav-premium-lock {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  vertical-align: middle;
  opacity: 0.55;
  flex-shrink: 0;
}
.nav-premium-lock svg { display: block; }

/* Theme toggle button */
.b-theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: var(--b-r-md);
  border: 1px solid var(--b-border);
  background: var(--b-surface);
  color: var(--b-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--b-dur-base) var(--b-ease);
  flex-shrink: 0;
}

.b-theme-toggle:hover {
  color: var(--b-primary);
  border-color: var(--b-primary);
  background: var(--b-primary-dim);
}

.b-theme-toggle svg {
  display: block;
  margin: auto;
}

/* ── BUTTONS V3 ─────────────────────────────────────────── */
.btn-v2, .btn-v3,
.gradient-btn, .btn.large,
button.gradient-btn.large,
button.gradient-btn.full-width {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--b-sp-2) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: var(--b-text-sm) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: var(--b-r-md) !important;
  cursor: pointer !important;
  transition: all var(--b-dur-base) var(--b-ease) !important;
  text-decoration: none !important;
  border: 1.5px solid transparent !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  min-height: 42px !important;
}

/* Primary button */
.btn-v2-primary,
.btn-v3-primary,
.gradient-btn,
button.gradient-btn.large,
button.gradient-btn.full-width {
  background: var(--b-primary) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: var(--b-shadow-blue) !important;
}

.btn-v2-primary:hover,
.btn-v3-primary:hover,
.gradient-btn:hover,
button.gradient-btn.large:hover,
button.gradient-btn.full-width:hover {
  background: var(--b-primary-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--b-shadow-blue-lg) !important;
  color: #ffffff !important;
}

/* Secondary button */
.btn-v2-secondary,
.btn-v3-secondary,
.btn.btn-secondary,
.btn-secondary {
  background: var(--b-surface) !important;
  color: var(--b-text) !important;
  border-color: var(--b-border) !important;
  box-shadow: var(--b-shadow-xs) !important;
}

.btn-v2-secondary:hover,
.btn-v3-secondary:hover {
  border-color: var(--b-border-2) !important;
  background: var(--b-surface-2) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--b-shadow-sm) !important;
}

/* Ghost button */
.btn-ghost {
  background: transparent !important;
  color: var(--b-text-3) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  padding: 0.625rem 1rem !important;
}

.btn-ghost:hover {
  background: var(--b-surface-2) !important;
  color: var(--b-text) !important;
}

/* Danger */
.btn-danger {
  background: var(--b-error-bg) !important;
  color: var(--b-error) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
}

.btn-danger:hover {
  background: var(--b-error) !important;
  color: white !important;
}

/* Large size modifier */
.btn-lg {
  font-size: var(--b-text-base) !important;
  padding: 0.875rem 1.75rem !important;
  border-radius: var(--b-r-lg) !important;
}

/* Gradient CTA special */
.btn-cta {
  background: var(--b-gradient) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: var(--b-shadow-blue) !important;
  font-size: var(--b-text-base) !important;
  padding: 0.875rem 2rem !important;
  border-radius: var(--b-r-lg) !important;
}

.btn-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--b-shadow-blue-lg) !important;
  opacity: 0.95 !important;
}

/* ── CARDS V3 ────────────────────────────────────────────── */
.card-v2,
.card-v3,
.card {
  background: var(--b-surface) !important;
  border: 1px solid var(--b-border) !important;
  border-radius: var(--b-r-xl) !important;
  box-shadow: var(--b-shadow-sm) !important;
  transition: box-shadow var(--b-dur-base) var(--b-ease),
              border-color var(--b-dur-base) var(--b-ease) !important;
}

.card-hover:hover,
.card-v2-hover:hover {
  box-shadow: var(--b-shadow-lg) !important;
  border-color: var(--b-primary) !important;
}

/* ── FORMS V3 ─────────────────────────────────────────────── */
.input-field-v2,
.field-input,
.form-input-v2,
.input-v2,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="time"],
input[type="date"],
select,
textarea {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--b-text-base) !important;
  color: var(--b-text) !important;
  background: var(--b-surface) !important;
  border: 1.5px solid var(--b-border) !important;
  border-radius: var(--b-r-md) !important;
  padding: 0.75rem 1rem !important;
  transition: border-color var(--b-dur-fast) var(--b-ease),
              box-shadow var(--b-dur-fast) var(--b-ease) !important;
  outline: none !important;
  width: 100%;
}

.input-field-v2:focus,
.field-input:focus,
.form-input-v2:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  border-color: var(--b-primary) !important;
  box-shadow: 0 0 0 3px var(--b-primary-dim) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--b-text-4) !important;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--b-surface-2) !important;
  border-color: var(--b-border) !important;
  color: var(--b-text) !important;
  color-scheme: dark !important;
}

label,
.field-label,
.input-label-v2 {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--b-text-sm) !important;
  font-weight: 600 !important;
  color: var(--b-text-2) !important;
  display: block !important;
  margin-bottom: var(--b-sp-2) !important;
}

/* ── HEADER LAYOUT ──────────────────────────────────────── */
.v2, .site-main-wrap, .site-main-v2 {
  padding-top: calc(var(--b-nav-h) + var(--b-safe-top)) !important;
  min-height: 100vh !important;
}

.site-main {
  max-width: var(--b-container) !important;
  margin: 0 auto !important;
  padding: var(--b-sp-8) 1.5rem !important;
}

/* ── NAV CTA BUTTON ─────────────────────────────────────── */
.nav-cta-v2,
.desktop-nav > a.nav-cta,
.btn-v2.btn-v2-primary.nav-cta {
  background: var(--b-primary) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: var(--b-shadow-blue) !important;
  padding: 0.5rem 1.1rem !important;
  font-size: var(--b-text-sm) !important;
  font-weight: 600 !important;
  border-radius: var(--b-r-md) !important;
}

.nav-cta-v2:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--b-shadow-blue-lg) !important;
  background: var(--b-primary-hover) !important;
  color: #ffffff !important;
}

/* ── BADGES / TAGS ──────────────────────────────────────── */
.badge, .tag {
  display: inline-flex;
  align-items: center;
  gap: var(--b-sp-1);
  font-size: var(--b-text-xs);
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: var(--b-r-full);
  letter-spacing: 0.02em;
}

.badge-primary { background: var(--b-primary-dim); color: var(--b-primary); }
.badge-success { background: var(--b-success-bg); color: var(--b-success); }
.badge-error   { background: var(--b-error-bg); color: var(--b-error); }
.badge-warning { background: var(--b-warning-bg); color: var(--b-warning); }
.badge-neutral { background: var(--b-surface-3); color: var(--b-text-3); }

/* Status badges (existing classes) */
.status-badge,
.status-booked { background: var(--b-primary-dim) !important; color: var(--b-primary) !important; }
.status-confirmed { background: var(--b-success-bg) !important; color: var(--b-success) !important; }
.status-cancelled { background: var(--b-error-bg) !important; color: var(--b-error) !important; }
.status-pending { background: var(--b-warning-bg) !important; color: var(--b-warning) !important; }
.status-badge { 
  border-radius: var(--b-r-full) !important; 
  font-size: 0.65rem !important; 
  font-weight: 800 !important; 
  padding: 0.25rem 0.65rem !important; 
  text-transform: uppercase !important; 
  letter-spacing: 0.05em !important; 
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.db-client-phone {
  display: block;
  font-size: var(--b-text-xs);
  color: var(--b-text-4);
  text-decoration: none;
  transition: color var(--b-dur-fast) var(--b-ease);
  white-space: nowrap;
}

.db-client-phone:hover {
  color: var(--b-primary);
  text-decoration: underline;
}


/* ── SECTION DIVIDER ────────────────────────────────────── */
.section-divider {
  width: 40px;
  height: 3px;
  background: var(--b-gradient);
  border-radius: var(--b-r-full);
  margin: var(--b-sp-4) 0;
}

.section-divider-center {
  margin-left: auto;
  margin-right: auto;
}

/* ── SECTION LABEL / EYEBROW ────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--b-sp-2);
  font-size: var(--b-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--b-primary);
  margin-bottom: var(--b-sp-4);
}

.eyebrow::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--b-primary);
  border-radius: 1px;
  flex-shrink: 0;
}

/* ── GRADIENT TEXT ──────────────────────────────────────── */
.gradient-text,
.text-gradient {
  background: var(--b-gradient-text) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── DASHBOARD LAYOUT SYSTEM (V3) ───────────────────────── */
.db-root {
  max-width: var(--b-container) !important;
  margin: 0 auto !important;
  padding: var(--b-sp-5) clamp(0.75rem, 2vw, 1.25rem) var(--b-sp-8) !important;
}

.db-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: var(--b-sp-4) !important;
  gap: var(--b-sp-4) !important;
  flex-wrap: wrap !important;
}

.db-header-identity {
  display: flex !important;
  align-items: center !important;
  gap: var(--b-sp-3) !important;
  min-width: 0 !important;
}

.db-avatar {
  width: 128px !important;
  height: 128px !important;
  border-radius: var(--b-r-xl) !important;
  overflow: hidden !important;
  border: 3px solid var(--b-surface) !important;
  box-shadow: var(--b-shadow-lg) !important;
  background: var(--b-surface-3) !important;
  flex-shrink: 0 !important;
}

.db-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.db-avatar-initials {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--b-primary) !important;
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 2.5rem !important;
  font-weight: 800 !important;
}

.db-welcome {
  font-size: clamp(1.5rem, 4vw, 2.25rem) !important;
  margin-bottom: var(--b-sp-1) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

/* B4: Prevent long display names (e.g. "App Review Demo") from overflowing the
   header. The span is inline by default — make it inline-block so max-width and
   overflow apply, then clamp to 220px (wide enough for most real names). */
.db-welcome-name {
  display: inline-block !important;
  max-width: 320px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  vertical-align: bottom !important;
}

@media (max-width: 480px) {
  .db-welcome-name {
    max-width: 240px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    line-height: 1.2 !important;
    vertical-align: baseline !important;
  }
}

.db-meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  font-size: var(--b-text-sm) !important;
  color: var(--b-text-3) !important;
  font-weight: 500 !important;
}

.db-content-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) !important;
  gap: var(--b-sp-5) !important;
  align-items: start !important;
}

.db-main { display: flex !important; flex-direction: column !important; gap: var(--b-sp-3) !important; min-width: 0 !important; }
.db-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--b-sp-3) !important;
  flex-shrink: 0 !important;
  height: auto !important;
  min-height: 100% !important;
}

@media (max-width: 960px) {
  .db-sidebar {
    display: none !important; /* Hide dashboard sidebar on smaller screens */
  }
  .db-content-grid {
    grid-template-columns: 1fr !important;
  }
}

.db-card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  padding: var(--b-sp-4) var(--b-sp-5) !important;
  border-bottom: 1px solid var(--b-border) !important;
  gap: var(--b-sp-4) !important;
}

/* First child (title block) must not collapse when sibling takes space */
.db-card-header > div:first-child,
.db-card-header > h2:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

/* Calendar card: compact header so nav + title both fit at 390px */
.db-mini-cal-card .db-card-header {
  padding: 12px 16px !important;
  gap: 8px !important;
  align-items: center !important;
}

/* Calendar nav stays compact, doesn't crush the title */
.db-mini-cal-nav {
  flex-shrink: 0;
  gap: 8px !important;
}

/* Month label — tighter min-width so "Calendar" title has room */
.db-mini-cal-month {
  min-width: 80px !important;
}

/* Calendar title — allow truncation if needed */
.db-mini-cal-card .db-card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sub-title inside calendar header would go vertical at 390px — hide it */
.db-mini-cal-card .db-card-header .db-card-sub {
  display: none !important;
}

.db-card-title {
  font-size: var(--b-text-base) !important;
  margin: 0 0 var(--b-sp-1) !important;
  font-weight: 700 !important;
}

.db-card-sub {
  font-size: var(--b-text-xs) !important;
  color: var(--b-text-3) !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

.db-btn-sm {
  font-size: var(--b-text-xs) !important;
  padding: 0.5rem 1rem !important;
  flex-shrink: 0 !important;
}

/* ── PROSE GUARDRAILS — keep long-form copy readable as cards widen ── */
.db-promo-card .db-promo-desc,
.db-tips-card .db-tips-list,
.db-sidebar-card .db-promo-desc {
  max-width: 65ch;
}

/* Toggle switch (V3 Redesign) */
.toggle-switch-v2 {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
}
.toggle-switch-v2 input { opacity: 0; width: 0; height: 0; }
.db-toggle-track {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--b-surface-3);
  border: 1.5px solid var(--b-border);
  border-radius: var(--b-r-full);
  transition: all var(--b-dur-base) var(--b-ease);
}
.db-toggle-track::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--b-text-3);
  top: 2.5px;
  left: 3px;
  transition: transform var(--b-dur-base) var(--b-ease), background var(--b-dur-base) var(--b-ease);
}
input:checked + .db-toggle-track {
  background: var(--b-primary-dim);
  border-color: var(--b-primary);
}
input:checked + .db-toggle-track::before {
  transform: translateX(18px);
  background: var(--b-primary);
}

/* ── DASHBOARD ACTIONS (Transferred from individual pages) ── */
.db-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: var(--b-sp-3) !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

@media (max-width: 640px) {
  .db-root {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .db-header-actions {
    width: 100% !important;
    gap: var(--b-sp-2) !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding-bottom: 0.5rem !important;
    scrollbar-width: none !important;
    
    /* Fade effect for overflow */
    mask-image: linear-gradient(to right, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent);
  }
  
  .db-header-actions::-webkit-scrollbar {
    display: none !important;
  }
  
  .db-header-actions .btn-v2 {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    padding: 0.625rem 0.75rem !important;
    font-size: var(--b-text-xs) !important;
    min-height: 38px !important;
  }

  .db-avatar {
    width: 72px !important;
    height: 72px !important;
    border-radius: var(--b-r-lg) !important;
  }
  .db-avatar-initials {
    font-size: 1.5rem !important;
  }
}

/* NOTE: .db-content-grid collapse is at max-width: 960px above (the authoritative breakpoint).
   This placeholder preserves selector order; do not add db-content-grid rules here. */

@media (max-width: 768px) {
  .db-root {
    padding: var(--b-sp-3) 1.25rem var(--b-sp-6) !important;
  }
  .db-header {
    margin-bottom: var(--b-sp-6) !important;
  }
  .db-welcome {
     font-size: 1.75rem !important;
  }
}

/* ── ANIMATION UTILITIES ────────────────────────────────── */
@keyframes b-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes b-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes b-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

@keyframes b-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(1.3); }
}

@keyframes b-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

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

.animate-fade-up {
  animation: b-fade-up var(--b-dur-slow) var(--b-ease) both;
}

.animate-fade-up-delay-1 { animation-delay: 80ms; }
.animate-fade-up-delay-2 { animation-delay: 160ms; }
.animate-fade-up-delay-3 { animation-delay: 240ms; }

.animate-float {
  animation: b-float 5s ease-in-out infinite;
}

/* Skeleton shimmer */
.skeleton {
  background: linear-gradient(90deg,
    var(--b-surface-2) 25%,
    var(--b-surface-3) 50%,
    var(--b-surface-2) 75%);
  background-size: 200% 100%;
  animation: b-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--b-r-sm);
}

/* ── FLASH MESSAGES ─────────────────────────────────────── */
.flash-stack { margin-bottom: var(--b-sp-6); }

.flash-stack .card-v2 {
  padding: var(--b-sp-4) var(--b-sp-6) !important;
  border-radius: var(--b-r-md) !important;
  font-size: var(--b-text-sm) !important;
  font-weight: 500 !important;
  margin-bottom: var(--b-sp-3) !important;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out, margin 0.5s ease-out, padding 0.5s ease-out, max-height 0.5s ease-out !important;
  overflow: hidden;
}

/* ── FOOTER V3 ──────────────────────────────────────────── */
.site-footer-v2,
footer.site-footer {
  background: var(--b-surface) !important;
  border-top: 1px solid var(--b-border) !important;
  padding: var(--b-sp-16) 1.5rem var(--b-sp-12) !important;
}

/* ── TOAST NOTIFICATION ─────────────────────────────────── */
.toast {
  position: fixed !important;
  bottom: var(--b-sp-6) !important;
  right: var(--b-sp-6) !important;
  background: var(--b-text) !important;
  color: var(--b-text-inv) !important;
  padding: 0.875rem 1.25rem !important;
  border-radius: var(--b-r-lg) !important;
  font-size: var(--b-text-sm) !important;
  font-weight: 600 !important;
  box-shadow: var(--b-shadow-xl) !important;
  z-index: 9999 !important;
  transform: translateY(100px) !important;
  opacity: 0 !important;
  transition: all 0.3s var(--b-ease) !important;
  pointer-events: none !important;
  max-width: 320px !important;
}

.toast.show {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ── MOBILE UTILITIES ───────────────────────────────────── */
@media (max-width: 768px) {
  .site-header-v2 .desktop-nav-v2,
  .desktop-nav,
  .nav-cta-v2 {
    display: none !important;
  }

  .hamburger-v2 {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid var(--b-border);
    border-radius: var(--b-r-md);
    cursor: pointer;
    color: var(--b-text);
  }

  .site-main {
    padding: var(--b-sp-6) 1.25rem !important;
  }
}

@media (min-width: 769px) {
  .hamburger-v2 {
    display: none !important;
  }
}

/* ── MOBILE DRAWER ──────────────────────────────────────── */
/* ── UNIFIED MOBILE SIDEBAR (COCKPIT DRAWER) ───────────────── */
.mobile-drawer-v2 {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  width: 300px !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: var(--b-surface) !important;
  border-left: 1px solid var(--b-border) !important;
  z-index: 10000 !important;
  transform: translateX(100%) !important;
  transition: transform 0.3s var(--b-ease) !important;
  box-shadow: var(--b-shadow-2xl) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.mobile-drawer-v2.open {
  transform: translateX(0) !important;
}

/* Modal Backdrop */
.drawer-overlay-v2 {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 9999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.drawer-overlay-v2.open {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Inside-drawer Close Button */
.drawer-close-btn-v2 {
  position: absolute !important;
  top: calc(1.25rem + env(safe-area-inset-top, 0px)) !important;
  right: 1.25rem !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--b-r-md) !important;
  border: 1px solid var(--b-border) !important;
  background: var(--b-surface-2) !important;
  color: var(--b-text-2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s var(--b-ease) !important;
  z-index: 100 !important;
  box-shadow: var(--b-shadow-sm) !important;
}

.drawer-close-btn-v2:hover {
  background: var(--b-surface-3) !important;
  color: var(--b-text) !important;
  transform: scale(1.05) !important;
  border-color: var(--b-primary) !important;
}

.drawer-inner-v2 {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 1.5rem !important;
  padding-top: calc(1.5rem + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

.drawer-user-section-v2 {
  padding-bottom: 1.5rem !important;
  border-bottom: 1px solid var(--b-border) !important;
  margin-bottom: 1.5rem !important;
}

.drawer-user-status-v2 {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--b-text-3);
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.drawer-user-name-v2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--b-text);
  word-break: break-all;
}

.drawer-section-label-v2 {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--b-primary);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  padding-left: 0.5rem;
}

.drawer-section-label-v2:first-of-type {
  margin-top: 0;
}

.drawer-nav-list-v2 {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
  margin-bottom: 1rem !important;
}

.drawer-nav-list-v2 a,
.comm-channel-btn-v2 {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.75rem 1rem !important;
  border-radius: var(--b-r-md) !important;
  color: var(--b-text-2) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  background: none !important;
  border: none !important;
  text-align: left !important;
  width: 100% !important;
  cursor: pointer !important;
}

.drawer-nav-list-v2 a:hover,
.comm-channel-btn-v2:hover {
  background: var(--b-surface-2) !important;
  color: var(--b-text) !important;
}

.drawer-nav-list-v2 a.is-active,
.comm-channel-btn-v2.active {
  background: var(--b-primary-dim) !important;
  color: var(--b-primary) !important;
}

.drawer-nav-list-v2 svg {
  color: inherit !important;
}

.drawer-footer-v2 {
  margin-top: auto !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid var(--b-border) !important;
}

.drawer-signout-v2 {
  display: block !important;
  padding: 0.75rem !important;
  text-align: center !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--b-text-3) !important;
  border: 1px solid var(--b-border) !important;
  border-radius: var(--b-r-md) !important;
  text-decoration: none !important;
}

.drawer-cta-v2 {
  display: block !important;
  padding: 0.875rem !important;
  text-align: center !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  background: var(--b-primary) !important;
  color: white !important;
  border-radius: var(--b-r-md) !important;
  text-decoration: none !important;
}

/* ── FOCUS RING ─────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--b-primary) !important;
  outline-offset: 3px !important;
  border-radius: var(--b-r-sm) !important;
}

/* ── SCROLLBAR STYLE ────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--b-border-2);
  border-radius: var(--b-r-full);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--b-text-4); background-clip: content-box; }

/* ── TABLE V3 ───────────────────────────────────────────── */
.table-v3 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.table-v3 th {
  font-size: var(--b-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--b-text-3);
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--b-border);
  white-space: nowrap;
}

.table-v3 td {
  padding: 1rem;
  font-size: var(--b-text-sm);
  color: var(--b-text-2);
  border-bottom: 1px solid var(--b-border);
}

.table-v3 tbody tr {
  transition: background var(--b-dur-fast) var(--b-ease);
}

.table-v3 tbody tr:hover {
  background: var(--b-surface-2);
}

/* ── DIVIDER ────────────────────────────────────────────── */
hr, .divider {
  border: none !important;
  border-top: 1px solid var(--b-border) !important;
  margin: var(--b-sp-8) 0 !important;
}

/* ── PROGRESS BAR ───────────────────────────────────────── */
#nprogress {
  height: 2px !important;
  background: var(--b-primary) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 9999 !important;
  transition: width 0.3s var(--b-ease) !important;
}

/* ── MUTED TEXT ─────────────────────────────────────────── */
.muted, .text-muted, p.muted {
  color: var(--b-text-3) !important;
}

.small {
  font-size: var(--b-text-sm) !important;
}

/* ── AVATAR ─────────────────────────────────────────────── */
.avatar-ring {
  border: 3px solid var(--b-surface);
  box-shadow: var(--b-shadow-md);
}

/* ── GLOW ORBS (background decoration) ─────────────────── */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.5;
}

.glow-orb-blue {
  background: radial-gradient(circle, rgba(14,165,233,0.15) 0%, transparent 70%);
}

.glow-orb-teal {
  background: radial-gradient(circle, rgba(20,184,166,0.12) 0%, transparent 70%);
}

/* ── STAT CARD V3 ───────────────────────────────────────── */
.stat-card-v3 {
  background: var(--b-surface);
  border: 1px solid var(--b-border);
  border-radius: var(--b-r-xl);
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  box-shadow: var(--b-shadow-sm);
  transition: all var(--b-dur-base) var(--b-ease);
}

.stat-card-v3:hover {
  box-shadow: var(--b-shadow-md);
  border-color: var(--b-primary);
}

.stat-icon-v3 {
  width: 44px;
  height: 44px;
  border-radius: var(--b-r-lg);
  background: var(--b-primary-dim);
  color: var(--b-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-value-v3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--b-text-3xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--b-text);
  margin-bottom: var(--b-sp-1);
}

.stat-label-v3 {
  font-size: var(--b-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--b-text-3);
}

/* ── BOOKING STEP INDICATORS ────────────────────────────── */
.step-indicator {
  display: flex;
  align-items: center;
  gap: var(--b-sp-3);
  margin-bottom: var(--b-sp-8);
}

.step-dot {
  width: 32px;
  height: 32px;
  border-radius: var(--b-r-full);
  background: var(--b-surface-3);
  color: var(--b-text-3);
  font-size: var(--b-text-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--b-dur-base) var(--b-ease);
}

.step-dot.active {
  background: var(--b-primary);
  color: white;
  box-shadow: var(--b-shadow-blue);
}

.step-dot.done {
  background: var(--b-success);
  color: white;
}

.step-line {
  flex: 1;
  height: 1px;
  background: var(--b-border);
}

/* ── BOOKING TIME SLOT ──────────────────────────────────── */
.time-slot-v3 {
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--b-border);
  border-radius: var(--b-r-lg);
  background: var(--b-surface);
  font-size: var(--b-text-sm);
  font-weight: 600;
  color: var(--b-text);
  cursor: pointer;
  transition: all var(--b-dur-base) var(--b-ease);
  text-align: center;
}

.time-slot-v3:hover {
  border-color: var(--b-primary);
  background: var(--b-primary-dim);
  color: var(--b-primary);
}

.time-slot-v3.selected {
  background: var(--b-primary);
  border-color: var(--b-primary);
  color: white;
  box-shadow: var(--b-shadow-blue);
}

.time-slot-v3.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── DATE PILL ──────────────────────────────────────────── */
.date-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.625rem 1rem;
  border: 1.5px solid var(--b-border);
  border-radius: var(--b-r-lg);
  background: var(--b-surface);
  cursor: pointer;
  transition: all var(--b-dur-base) var(--b-ease);
  min-width: 64px;
}

.date-pill:hover {
  border-color: var(--b-primary);
  background: var(--b-primary-dim);
}

.date-pill.selected,
.date-pill[aria-selected="true"] {
  background: var(--b-primary);
  border-color: var(--b-primary);
  color: white;
}

.date-pill .day-name {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
  margin-bottom: 2px;
}

.date-pill .day-num {
  font-size: var(--b-text-xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* ── PRO CARD (results page) ────────────────────────────── */
.pro-card-v3 {
  background: var(--b-surface);
  border: 1px solid var(--b-border);
  border-radius: var(--b-r-2xl);
  overflow: hidden;
  box-shadow: var(--b-shadow-sm);
  transition: all var(--b-dur-base) var(--b-ease);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.pro-card-v3:hover {
  transform: translateY(-4px);
  box-shadow: var(--b-shadow-xl);
  border-color: var(--b-primary);
}

/* ── PRICING CARD ───────────────────────────────────────── */
.pricing-card-featured {
  border-color: var(--b-primary) !important;
  box-shadow: 0 0 0 2px var(--b-primary), var(--b-shadow-xl) !important;
}

/* ── MISC UTILITIES ─────────────────────────────────────── */
/* Screen-reader-only utility — visually hidden, available to AT */
.visually-hidden,
.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;
}

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.w-full  { width: 100%; }
.flex    { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--b-sp-2); }
.gap-3 { gap: var(--b-sp-3); }
.gap-4 { gap: var(--b-sp-4); }
.gap-6 { gap: var(--b-sp-6); }

/* ── iOS / MOBILE OVERFLOW PREVENTION (loads last — authoritative) ── */
/* Root cause fix: prevent any element from exceeding viewport width.
   100vw-based widths and flex/grid layouts that don't collapse are the
   primary source of horizontal overflow on iPhone Safari. */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Ensure the main content area always fills its parent */
main#main, main {
  width: 100%;
  max-width: 100%;
}

/* ── FOOTER GRID — MOBILE COLLAPSE ──────────────────────── */
/* Superseded by .footer-grid responsive rules below */

/* ── CAROUSEL — PREVENT PAGE OVERFLOW ───────────────────── */
/* The auto-scrolling carousel translates slides outside the container.
   Ensure the section itself never leaks width to the page. */
.category-carousel-section,
.carousel-wrapper {
  overflow: hidden !important;
}

/* ── TABLES — ALWAYS SCROLL HORIZONTALLY ────────────────── */
/* Tables with min-width wider than the viewport need a scroll wrapper */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── MEDIA — NEVER EXCEED CONTAINER ─────────────────────── */
img, video, iframe, embed, object {
  max-width: 100%;
}

/* ── AGGRESSIVE MOBILE OVERFLOW CLAMP (≤768px) ──────────────
   Legacy layers (dashboard.css, new-design.css, theme.css, auth.css)
   set fixed column counts, min-widths, and padding that push cards
   past a 390px viewport on iPhone. Clamp them here without touching
   the desktop layout. */
@media (max-width: 768px) {
  /* Nothing in the document tree is allowed to be wider than its parent */
  main, main *,
  .container, .container *,
  .card, .card *,
  section, article, aside {
    max-width: 100% !important;
  }

  /* Tables: if a .table has a fixed min-width (e.g. 600px) and isn't
     wrapped in .table-scroll, it would clip. Allow the inner scroll
     container to scroll, and relax bare tables to 100%. */
  .table-scroll {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  table:not(.table-scroll table) {
    min-width: 0 !important;
    width: 100% !important;
    display: block;
    overflow-x: auto;
  }

  /* Long unbroken strings (emails, urls, tokens) must wrap */
  .card, .card *, p, span, a, td, th, li, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Grids that hard-code repeat(N,1fr) without a mobile breakpoint:
     collapse to a single column so children aren't forced below their
     min-content width. */
  [class*="grid"],
  .cards-grid,
  .plan-cards,
  .stats-grid,
  .feature-grid,
  .dashboard-grid {
    grid-template-columns: 1fr !important;
  }

  /* Children with large hard min-widths inside grids/flex rows */
  .card,
  .stat-card,
  .feature-card,
  .plan-card,
  .dashboard-card,
  [class*="-card"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Flex rows should wrap instead of pushing children off-screen */
  .row, .flex-row, .hstack, .toolbar, .actions, .btn-row {
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }

  /* Container padding clamp — prevents horizontal padding from
     pushing content past the viewport when combined with width:100% */
  .container, main, .page, .page-wrap, .content-wrap {
    padding-left: clamp(1rem, 5vw, 1.5rem) !important;
    padding-right: clamp(1rem, 5vw, 1.5rem) !important;
  }
}

/* Extra-small phones (≤480px): even the 2-col fallbacks must collapse */
@media (max-width: 480px) {
  [class*="grid"],
  .cards-grid,
  .two-col,
  .three-col {
    grid-template-columns: 1fr !important;
  }
}

.mt-2  { margin-top: var(--b-sp-2); }
.mt-4  { margin-top: var(--b-sp-4); }
.mt-6  { margin-top: var(--b-sp-6); }
.mt-8  { margin-top: var(--b-sp-8); }
.mb-2  { margin-bottom: var(--b-sp-2); }
.mb-4  { margin-bottom: var(--b-sp-4); }
.mb-6  { margin-bottom: var(--b-sp-6); }
.mb-8  { margin-bottom: var(--b-sp-8); }

.p-4   { padding: var(--b-sp-4); }
.p-6   { padding: var(--b-sp-6); }
.p-8   { padding: var(--b-sp-8); }

.rounded-full { border-radius: var(--b-r-full) !important; }
.rounded-xl   { border-radius: var(--b-r-xl) !important; }
.rounded-2xl  { border-radius: var(--b-r-2xl) !important; }

.font-bold     { font-weight: 700 !important; }
.font-semibold { font-weight: 600 !important; }
.font-medium   { font-weight: 500 !important; }

.text-primary { color: var(--b-primary) !important; }
.text-muted-v3 { color: var(--b-text-3) !important; }

/* ── SPINNER ─────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: b-spin 0.7s linear infinite;
}

.spinner-primary {
  border-color: var(--b-primary-dim);
  border-top-color: var(--b-primary);
}

/* ── SLIDE-UP FADE (existing class, improved) ───────────── */
.slide-up-fade {
  animation: b-fade-up 0.6s var(--b-ease) both !important;
}

/* ── OVERRIDE LEGACY CLASSES SAFELY ────────────────────── */
/* Remove old gradient header */
header.site-header {
  background: rgba(255, 255, 255, 0.92) !important;
  background-image: none !important;
}

/* Override old nav link colors that were white-on-gradient */
.nav-link,
.nav-link.primary-link {
  color: var(--b-text-3) !important;
}

.nav-link:hover {
  color: var(--b-text) !important;
  opacity: 1 !important;
}

/* Override old card hover behavior */
.card-v2:hover {
  box-shadow: var(--b-shadow-md) !important;
  border-color: var(--b-border-2) !important;
  transform: none !important;
}

/* A-link global override */
a {
  color: var(--b-primary);
  text-decoration: none;
  transition: color var(--b-dur-fast) var(--b-ease);
}

a:hover {
  color: var(--b-primary-hover);
}

/* ── RESPONSIVE GRID ────────────────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--b-sp-6);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--b-sp-6);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--b-sp-6);
}

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

/* Cancel old padding-top set by theme.css */
.v2 {
  margin-top: 0 !important;
}

/* ── LOCATION AUTOCOMPLETE (V3) ─────────────────────────── */
.location-autocomplete-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid var(--b-border);
  border-radius: var(--b-r-lg);
  max-height: 280px;
  overflow-y: auto;
  z-index: 1100;
  box-shadow: var(--b-shadow-lg);
  padding: var(--b-sp-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: b-slide-down var(--b-dur-slow) var(--b-ease) forwards;
  transform-origin: top center;
}

[data-theme="dark"] .location-autocomplete-list {
  background: rgba(19, 25, 41, 0.85);
  border-color: var(--b-border);
}

.location-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-radius: var(--b-r-md);
  font-size: var(--b-text-sm);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: all var(--b-dur-fast) var(--b-ease);
  color: var(--b-text-2);
}

.location-item:hover {
  background: var(--b-surface-3);
  color: var(--b-text);
}

.location-item.active {
  background: var(--b-primary-dim);
  color: var(--b-primary);
}

.location-item strong {
  font-weight: 700;
  color: var(--b-text);
}

.location-item-icon {
  width: 16px;
  height: 16px;
  color: var(--b-text-4);
  flex-shrink: 0;
}

.location-item.active .location-item-icon {
  color: var(--b-primary);
}

@keyframes b-slide-down {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Custom Scrollbar for the list */
.location-autocomplete-list::-webkit-scrollbar {
  width: 5px;
}
.location-autocomplete-list::-webkit-scrollbar-thumb {
  background: var(--b-border-2);
  border-radius: 10px;
}
.location-autocomplete-list::-webkit-scrollbar-track {
  background: transparent;
}

/* ============================================================
   DASHBOARD MODALS — db-modal system
   Used by: Add Appointment, Service, Calendar, Verify Location
   ============================================================ */

.db-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* Shown when JS sets style.display = "flex" */
.db-modal[style*="flex"] {
  display: flex !important;
}

.db-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: -1;
}

.db-modal-panel {
  position: relative;
  background: var(--b-surface);
  border: 1px solid var(--b-border);
  border-radius: var(--b-r-2xl);
  padding: 1.75rem;
  width: 100%;
  max-width: 540px;
  max-height: 92vh;
  overflow-y: auto;
  z-index: 1;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  animation: dbModalIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dbModalIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.db-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--b-border);
}

.db-modal-header h2 {
  font-size: var(--b-text-lg);
  font-weight: 700;
  color: var(--b-text);
  letter-spacing: -0.02em;
  margin: 0;
}

.db-modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--b-r-md);
  border: 1px solid var(--b-border);
  background: var(--b-surface-2);
  color: var(--b-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--b-dur-fast) var(--b-ease);
}

.db-modal-close:hover {
  background: var(--b-error-bg);
  color: var(--b-error);
  border-color: var(--b-error);
}

.db-modal-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.db-modal-footer {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  padding-top: 1.25rem;
  border-top: 1px solid var(--b-border);
  margin-top: 1rem;
  flex-wrap: wrap;
}

/* ── CALENDAR MODAL ──────────────────────────────────────── */
.db-cal-panel {
  max-width: 800px;
}

.db-cal-body {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.db-cal-left {
  flex-shrink: 0;
  width: 300px;
}

.db-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}

.db-cal-month-label {
  flex: 1;
  text-align: center;
  font-size: var(--b-text-base);
  font-weight: 700;
  color: var(--b-text);
  letter-spacing: -0.02em;
}

.db-cal-nav-btn {
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  flex-shrink: 0;
}

.db-cal-details {
  flex: 1;
  min-height: 240px;
  max-height: 420px;
  overflow-y: auto;
  padding-left: 1.25rem;
  border-left: 1px solid var(--b-border);
}

.db-cal-placeholder {
  color: var(--b-text-4);
  font-size: var(--b-text-sm);
  text-align: center;
  padding: 2.5rem 1rem;
  font-style: italic;
}

/* Calendar appointment detail styling */
.cal-details-header {
  font-size: var(--b-text-base);
  font-weight: 700;
  color: var(--b-text);
  letter-spacing: -0.02em;
  margin-bottom: 0.875rem;
}

.cal-appt-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cal-appt-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  background: var(--b-surface-2);
  border: 1px solid var(--b-border);
  border-radius: var(--b-r-lg);
  transition: border-color var(--b-dur-fast) var(--b-ease);
}

.cal-appt-item:hover { border-color: var(--b-primary-dim); }

.cal-appt-time {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--b-primary);
  flex-shrink: 0;
  min-width: 58px;
  padding-top: 0.1rem;
}

.cal-appt-info { flex: 1; min-width: 0; }

.cal-client-name {
  font-size: var(--b-text-sm);
  font-weight: 600;
  color: var(--b-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-service {
  font-size: 0.72rem;
  color: var(--b-text-3);
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-appt-status {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.175rem 0.5rem;
  border-radius: var(--b-r-full);
  background: var(--b-surface-3);
  color: var(--b-text-3);
  flex-shrink: 0;
  align-self: flex-start;
}

.cal-appt-status.status-booked,
.cal-appt-status.status-confirmed,
.cal-appt-status.status-scheduled {
  background: rgba(16, 185, 129, 0.12);
  color: var(--b-success);
}

.cal-appt-status.status-cancelled,
.cal-appt-status.status-canceled {
  background: rgba(239, 68, 68, 0.1);
  color: var(--b-error);
}

/* Responsive calendar */
@media (max-width: 640px) {
  .db-cal-panel { max-width: 100%; }

  .db-cal-body {
    flex-direction: column;
    gap: 1rem;
  }

  .db-cal-left { width: 100%; }

  .db-cal-details {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--b-border);
    padding-top: 1rem;
    max-height: 260px;
  }
}

/* ============================================================
   DARK MODE — Booking page slot & calendar overrides
   The booking.css uses --bk-* vars that have no dark values.
   Override here since booker-v3.css loads last.
   ============================================================ */

[data-theme="dark"] .slot {
  background: var(--b-surface) !important;
  border-color: var(--b-border) !important;
  color: var(--b-text) !important;
}

[data-theme="dark"] .slot:hover {
  border-color: var(--b-primary) !important;
  color: var(--b-primary) !important;
  background: var(--b-primary-dim) !important;
}

[data-theme="dark"] .slot.is-selected {
  background: linear-gradient(135deg, var(--b-primary), var(--b-teal)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

[data-theme="dark"] .day-pill {
  background: var(--b-surface) !important;
  border-color: var(--b-border) !important;
  color: var(--b-text) !important;
}

[data-theme="dark"] .day-pill:hover {
  border-color: var(--b-primary) !important;
  background: var(--b-primary-dim) !important;
  color: var(--b-primary) !important;
}

[data-theme="dark"] .day-pill.selected,
[data-theme="dark"] .day-pill.active {
  background: linear-gradient(135deg, var(--b-primary), var(--b-teal)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* Booking page calendar popup (More dates) */
[data-theme="dark"] .cal-cell {
  color: var(--b-text);
}

[data-theme="dark"] .cal-cell:hover:not(.disabled) {
  background: var(--b-primary-dim);
  color: var(--b-primary);
}

[data-theme="dark"] .cal-cell.today {
  outline-color: var(--b-primary);
}

[data-theme="dark"] .cal-header {
  color: var(--b-text);
}

[data-theme="dark"] .cal-weekday {
  color: var(--b-text-4);
}

[data-theme="dark"] .cal-btn {
  color: var(--b-primary);
}

/* Dashboard calendar day cells — light mode today dot */
.cal-day.today {
  position: relative;
  background: transparent !important;
  color: var(--b-text-strong);
  font-weight: 700;
}

.cal-day.today::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--b-primary);
  pointer-events: none;
}

/* When today is also selected, dot is redundant — hide it */
.cal-day.today.selected::after {
  display: none;
}

/* Dashboard calendar day cells dark mode */
[data-theme="dark"] .cal-day {
  color: var(--b-text);
}

[data-theme="dark"] .cal-day:hover:not(.empty) {
  background: var(--b-surface-3);
}

[data-theme="dark"] .cal-day.today {
  background: transparent !important;
  color: var(--b-text-strong);
  font-weight: 700;
}

[data-theme="dark"] .cal-day.today::after {
  background: var(--b-primary);
}

[data-theme="dark"] .cal-day.selected {
  background: var(--b-surface-3);
  box-shadow: inset 0 0 0 2px var(--b-primary);
}

[data-theme="dark"] .cal-day-name {
  color: var(--b-text-4);
}

/* ── MOBILE TIME SLOT SQUARES ───────────────────────────── */
/* DEPRECATED — slot grid now lives in booking.css with the pill design.
   Kept commented for reference; safe to delete after 2026-06. */
/*
.slot-grid-v3 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.35rem !important;
}

@media (min-width: 480px) {
  .slot-grid-v3 {
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)) !important;
    gap: 0.45rem !important;
  }
}

@media (max-width: 480px) {
  .slot-grid-v3 {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.3rem !important;
  }
}

.slot-grid-v3 .slot {
  aspect-ratio: 1.2 / 1 !important;
  min-height: unset !important;
  max-height: unset !important;
  padding: 0.25rem 0.1rem !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: break-word !important;
}

.slot-skeleton {
  aspect-ratio: 1.2 / 1 !important;
  height: auto !important;
  min-height: unset !important;
}
*/

/* ── NAV SEARCH COMPONENT ─────────────────────────────── */
.nav-search-v3 {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 240px;
  width: 100%;
  transition: all var(--b-dur-base) var(--b-ease);
}

.nav-search-v3 input {
  height: 38px !important;
  padding: 0 1rem 0 2.25rem !important;
  font-size: 0.85rem !important;
  border-radius: var(--b-r-full) !important;
  background: var(--b-surface-2) !important;
  border: 1px solid var(--b-border) !important;
  transition: all var(--b-dur-base) var(--b-ease) !important;
}

.nav-search-v3 input:focus {
  width: 300px;
  background: var(--b-surface) !important;
  box-shadow: var(--b-shadow-blue) !important;
  max-width: none;
}

.nav-search-v3 i, 
.nav-search-v3 svg {
  position: absolute;
  left: 0.875rem;
  color: var(--b-text-4);
  pointer-events: none;
}

@media (max-width: 1024px) {
  .nav-search-v3 { display: none; }
}

/* ── NAV DROPDOWN COMPONENT ───────────────────────────── */
.nav-dropdown-v2 {
  position: relative;
  display: inline-block;
}

.nav-dropdown-trigger {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  cursor: pointer !important;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 240px;
  background: var(--b-surface);
  border: 1px solid var(--b-border);
  border-radius: var(--b-r-lg);
  box-shadow: var(--b-shadow-lg);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transition: all var(--b-dur-base) var(--b-ease);
  z-index: 1001;
}

.nav-dropdown-v2:hover .nav-dropdown-menu,
.nav-dropdown-v2.active .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: var(--b-text-2) !important;
  border-radius: var(--b-r-md) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.nav-dropdown-menu a:hover {
  background: var(--b-primary-dim) !important;
  color: var(--b-primary) !important;
}

.nav-dropdown-menu a i,
.nav-dropdown-menu a svg {
  color: var(--b-text-4);
}

.nav-dropdown-menu a:hover i,
.nav-dropdown-menu a:hover svg {
  color: var(--b-primary);
}

/* ── USER MENU V3 ─────────────────────────────────────── */
.user-menu-v3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 4px 6px 4px 12px !important;
  background: var(--b-surface-2);
  border: 1px solid var(--b-border);
  border-radius: var(--b-r-full);
  cursor: pointer;
  transition: all 0.2s ease;
}

.user-menu-v3:hover {
  border-color: var(--b-primary);
  background: var(--b-surface);
}

@media (max-width: 480px) {
  .nav-user-name {
    display: none !important;
  }
}

.user-avatar-v3 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--b-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  overflow: hidden;
  box-shadow: var(--b-shadow-xs);
}

.user-avatar-v3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── HOURS EDITOR — Done Editing button ───────────────────────────────────────
   Injected by redesign-fixes.js into #hoursCollapse on all dashboard templates.
   border-radius:0 + card overflow:hidden lets the bottom corners auto-clip to
   the parent .db-hours-card's border-radius, creating a flush footer look.
   ─────────────────────────────────────────────────────────────────────────── */
.db-hours-done-btn {
  display: block;
  width: 100%;
  padding: 16px;
  margin-top: var(--b-sp-5, 32px);
  background: linear-gradient(135deg, var(--b-primary, #0ea5e9), var(--b-primary-hover, #0284c7));
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-align: center;
  transition: opacity 150ms ease;
}

.db-hours-done-btn:hover {
  opacity: 0.92;
}

/* ── COURSE MANAGEMENT — layout + mobile ─────────────────────────────────── */
.course-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.course-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.course-nba-card {
  margin-bottom: 2rem;
}

.course-row-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  flex-wrap: nowrap;
}

.course-row-thumb {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  background: center/cover no-repeat;
  flex-shrink: 0;
}

.course-row-thumb-empty {
  background: var(--b-surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.course-row-meta {
  flex: 1;
  min-width: 0;
}

.course-row-actions {
  flex-shrink: 0;
}

/* Setup guide carousel */
.course-setup-guide {
  margin-bottom: 2rem;
}

.course-guide-track {
  display: flex;
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  min-height: 200px;
}

.course-guide-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding: 1.25rem 1.5rem 1rem;
  box-sizing: border-box;
}

.course-guide-slide-icon {
  width: 40px;
  height: 40px;
  background: var(--b-surface-2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.875rem;
}

.course-guide-slide-title {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

.course-guide-slide-body {
  color: var(--b-text-3);
  font-size: 0.9rem;
  line-height: 1.6;
}

.course-guide-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem 1.25rem;
  border-top: 1px solid var(--b-border);
}

.course-guide-arrow {
  width: 36px;
  height: 36px;
  border: 1px solid var(--b-border);
  border-radius: 50%;
  background: var(--b-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 150ms;
  color: var(--b-text-2);
}

.course-guide-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.course-guide-arrow:not(:disabled):hover {
  background: var(--b-surface-2);
}

.course-guide-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.course-guide-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--b-border-2);
  cursor: pointer;
  padding: 0;
  transition: background 150ms, transform 150ms;
}

.course-guide-dot.is-active {
  background: var(--b-primary);
  transform: scale(1.25);
}

@media (max-width: 768px) {
  .course-page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .course-page-header-cta {
    width: 100%;
    justify-content: center;
  }

  .course-stats-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .course-guide-arrow {
    display: none;
  }
}

@media (max-width: 480px) {
  .course-row-card {
    flex-wrap: wrap;
    gap: 0.875rem;
  }

  .course-row-actions {
    width: 100%;
  }

  .course-row-actions .btn-v2 {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
}

/* ── Premium Footer ───────────────────────────────────────── */
.footer-inner {
  max-width: var(--b-container);
  margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.footer-logo {
  margin-bottom: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  width: fit-content;
}

.footer-tagline {
  font-size: 0.85rem;
  color: var(--b-text-3);
  line-height: 1.65;
  margin: 0 0 0.875rem;
  max-width: 230px;
}

.footer-copy {
  font-size: 0.75rem;
  color: var(--b-text-4);
  margin: 0;
}

.footer-col-heading {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--b-text-4);
  margin: 0 0 0.875rem;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-link {
  font-size: 0.875rem;
  color: var(--b-text-3);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--b-dur-base, 0.18s);
  width: fit-content;
}

.footer-link:hover { color: var(--b-primary); }

.footer-bottom {
  border-top: 1px solid var(--b-border);
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-trust {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-stars {
  color: #f59e0b;
  font-size: 0.85rem;
  letter-spacing: 2px;
}

.footer-trust-text {
  font-size: 0.8rem;
  color: var(--b-text-4);
}

.footer-cta-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--b-primary);
  text-decoration: none;
  transition: opacity 0.18s;
}

.footer-cta-link:hover { opacity: 0.75; }

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .footer-tagline { max-width: 100%; }
  /* The default 128px/96px outer padding leaves ~300px of empty air on mobile
     and pushes the footer to >1100px tall. Tighten on small screens. */
  .site-footer-v2,
  footer.site-footer {
    padding: 2rem 1rem 1.5rem !important;
  }
  .footer-inner {
    padding: 1.5rem 0.75rem 1rem;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .site-footer-v2,
  footer.site-footer {
    padding: 1.75rem 1rem 1.25rem !important;
  }
  .footer-inner {
    padding: 1.25rem 0.5rem 0.75rem;
  }
}

/* ── RADIUS PILLS ────────────────────────────────────────────── */
.radius-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Slight fade-out at the right edge hints at scroll on mobile */
  mask-image: linear-gradient(to right, #000 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
  padding-bottom: 2px; /* prevent clipping of box-shadow on active pill */
  padding-left: 0;
  padding-right: 1rem; /* prevent last chip from flushing against viewport edge */
}
.radius-pills::-webkit-scrollbar { display: none; }

.radius-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1.1rem;
  border-radius: var(--b-r-full);
  border: 1.5px solid var(--b-border);
  background: var(--b-surface-2);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--b-text-2);
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
  text-decoration: none;
  min-height: 36px;
  white-space: nowrap;
}

.radius-pill:hover {
  border-color: var(--b-primary);
  background: var(--b-primary-dim);
  color: var(--b-primary);
}

.radius-pill.active {
  background: linear-gradient(135deg, var(--b-primary), #b8872a);
  border-color: var(--b-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(212, 169, 67, 0.35);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .radius-pill {
    min-height: 44px;
    padding: 0.55rem 1.25rem;
    font-size: 0.875rem;
  }
}

/* ── GEO ERROR TOAST ─────────────────────────────────────────── */
.geo-error-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-16px);
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  border-radius: var(--b-r-xl);
  padding: 0.75rem 1.25rem 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 9999;
  display: none;              /* hidden until .visible is added */
  align-items: center;
  gap: 0.625rem;
  max-width: min(480px, calc(100% - 2rem));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

[data-theme="dark"] .geo-error-toast {
  background: rgba(185, 28, 28, 0.15);
  border-color: rgba(252, 165, 165, 0.3);
  color: #fca5a5;
}

.geo-error-toast.visible {
  display: flex;              /* re-enable flex layout when shown */
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.geo-error-toast-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.65;
  padding: 0 0 0 0.5rem;
  font-size: 1rem;
  line-height: 1;
}

.geo-error-toast-close:hover { opacity: 1; }

/* ── RESULTS EMPTY — NEARBY CARDS ───────────────────────────── */
.results-empty-nearby {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
  margin: 1rem auto 1.5rem;
  max-width: 680px;
  text-align: left;
}

.results-empty-nearby-card {
  display: block;
  background: var(--b-surface);
  border: 1.5px solid var(--b-border);
  border-radius: var(--b-r-xl);
  padding: 1rem 1.125rem;
  text-decoration: none;
  transition: all 0.22s ease;
}

.results-empty-nearby-card:hover {
  border-color: var(--b-primary);
  background: var(--b-primary-dim);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.results-empty-nearby-name {
  font-size: var(--b-text-base);
  font-weight: 700;
  color: var(--b-text);
  margin-bottom: 0.25rem;
}

.results-empty-nearby-meta {
  font-size: var(--b-text-sm);
  color: var(--b-text-3);
  font-weight: 500;
}

@media (max-width: 480px) {
  .results-empty-nearby {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ADDRESS VERIFY BANNER
   Shown at top of dashboard until barber.address_verified
   ============================================================ */
.address-verify-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, #1a1209 0%, #2b1c06 100%);
  border: 1.5px solid rgba(212, 169, 67, 0.45);
  border-radius: var(--b-r-lg);
  padding: 0.875rem 1.25rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  box-shadow: 0 4px 24px rgba(212, 169, 67, 0.1);
}

.address-verify-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(212, 169, 67, 0.15);
  border: 1.5px solid rgba(212, 169, 67, 0.3);
  flex-shrink: 0;
  color: #d4a943;
  animation: avb-icon-pulse 2.4s ease-in-out infinite;
}

@keyframes avb-icon-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 169, 67, 0); }
  50%       { box-shadow: 0 0 0 6px rgba(212, 169, 67, 0.18); }
}

.address-verify-banner-content {
  flex: 1;
  min-width: 0;
}

.address-verify-banner-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--b-text-sm);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #d4a943;
  margin-bottom: 0.2rem;
}

.address-verify-banner-text {
  font-size: var(--b-text-xs);
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  line-height: 1.4;
}

.address-verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: #92400e;        /* amber-800, 5.6:1 on amber-50 */
  background: #fffbeb;   /* amber-50 — solid, readable */
  border: 1px solid rgba(146, 64, 14, 0.25);
  border-radius: var(--b-r-full);
  padding: 0.2rem 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .address-verify-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem;
  }

  .address-verify-banner .btn-v2 {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   ADDRESS VERIFY MODAL — 3-step state machine
   Steps toggled via data-va-step="1|2|3" on modal root
   ============================================================ */
.va-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.va-modal.is-open {
  display: flex;
}

.va-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: -1;
}

.va-modal-panel {
  position: relative;
  background: var(--b-surface);
  border: 1px solid var(--b-border-2);
  border-radius: var(--b-r-2xl);
  padding: 2rem;
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  z-index: 1;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(212, 169, 67, 0.08);
  animation: vaModalIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes vaModalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.va-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--b-border);
}

.va-modal-header h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--b-text-lg);
  font-weight: 800;
  color: var(--b-text);
  letter-spacing: -0.03em;
  margin: 0;
}

.va-modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--b-r-md);
  border: 1px solid var(--b-border);
  background: var(--b-surface-2);
  color: var(--b-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.18s ease;
}

.va-modal-close:hover {
  border-color: var(--b-border-2);
  color: var(--b-text);
  background: var(--b-surface-3);
}

/* Step visibility controlled by data-va-step attribute */
.va-step { display: none; }

.va-modal[data-va-step="1"] .va-step[data-step="1"],
.va-modal[data-va-step="2"] .va-step[data-step="2"],
.va-modal[data-va-step="3"] .va-step[data-step="3"] {
  display: block;
}

.va-step-sub {
  font-size: var(--b-text-sm);
  color: var(--b-text-3);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.va-current-address {
  font-size: var(--b-text-sm);
  color: var(--b-text-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  margin: 0 0 0.9rem 0;
  line-height: 1.35;
  word-break: break-word;
}

.va-inline-error {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--b-text-xs);
  font-weight: 600;
  color: var(--b-error);
  background: var(--b-error-bg);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--b-r-md);
  padding: 0.6rem 0.875rem;
  margin-top: 0.75rem;
}

.va-inline-error.visible { display: flex; }

.va-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.va-actions .btn-v2 { flex: 1; justify-content: center; }

.va-or-divider {
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #888);
  margin: 0.85rem 0 0.5rem;
}
.va-or-divider::before,
.va-or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border, rgba(255,255,255,0.12));
}
.va-or-divider::before { margin-right: 0.65rem; }
.va-or-divider::after  { margin-left:  0.65rem; }

.va-map {
  position: relative;
  width: 100%;
  height: 220px;
  border-radius: var(--b-r-lg);
  border: 1px solid var(--b-border);
  overflow: hidden;
  margin: 1rem 0 0.75rem;
  background: var(--b-surface-2);
}

.va-map img,
.va-map-iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
}

.va-map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--b-text-3);
  pointer-events: none;
}

.va-formatted-address {
  font-size: var(--b-text-sm);
  font-weight: 600;
  color: var(--b-text);
  padding: 0.75rem 1rem;
  background: var(--b-surface-2);
  border: 1px solid var(--b-border);
  border-radius: var(--b-r-md);
  margin-bottom: 0.25rem;
  line-height: 1.4;
}

/* Step 3 — success state */
.va-success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(212, 169, 67, 0.12);
  border: 2px solid rgba(212, 169, 67, 0.35);
  color: #d4a943;
  margin: 0 auto 1.25rem;
  animation: vaSuccessIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes vaSuccessIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

.va-success-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--b-text-xl);
  font-weight: 800;
  color: var(--b-text);
  text-align: center;
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
}

.va-success-body {
  font-size: var(--b-text-sm);
  color: var(--b-text-3);
  text-align: center;
  line-height: 1.55;
  margin-bottom: 1.75rem;
}

/* Gold CTA — used in the verify flow */
.btn-v2-gold {
  background: #d4a943 !important;
  color: #0d0d0d !important;
  border-color: transparent !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(212, 169, 67, 0.3) !important;
}

.btn-v2-gold:hover {
  background: #c49a33 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(212, 169, 67, 0.4) !important;
  color: #0d0d0d !important;
}

.btn-v2-gold:active {
  transform: translateY(0) !important;
}

/* Full-page mobile — modal goes edge-to-edge */
@media (max-width: 540px) {
  .va-modal {
    padding: 0;
    align-items: flex-end;
  }

  .va-modal-panel {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-height: 90vh;
    border-top: 1.5px solid rgba(212, 169, 67, 0.25);
  }
}

/* One-time verified toast */
.va-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: #1a1209;
  border: 1.5px solid rgba(212, 169, 67, 0.4);
  border-radius: var(--b-r-full);
  padding: 0.7rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--b-text-sm);
  font-weight: 600;
  color: #d4a943;
  white-space: nowrap;
  z-index: 2000;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  animation: vaToastIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.va-toast a {
  color: #d4a943;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}

@keyframes vaToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (max-width: 540px) {
  .va-toast {
    white-space: normal;
    width: calc(100% - 2rem);
    border-radius: var(--b-r-lg);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE DASHBOARD FIXES — 2026-05
   All overrides live here (authoritative mobile layer). Do not edit earlier
   CSS files for mobile fixes — add them in this file.
═══════════════════════════════════════════════════════════════════════════ */

/* ── FREE DASHBOARD: upgrade banner mobile stack ──────────────────────── */
@media (max-width: 540px) {
  .db-free-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center !important;
    gap: var(--b-sp-4) !important;
    padding: 1.125rem 1rem !important;
    border-radius: var(--b-r-lg) !important;
  }

  .db-free-banner-left {
    flex-direction: column !important;
    align-items: center !important;
    gap: var(--b-sp-2) !important;
  }

  .db-free-icon {
    width: 40px !important;
    height: 40px !important;
  }

  .db-free-label {
    letter-spacing: 0.1em !important;
    font-size: 0.72rem !important;
  }

  .db-free-desc {
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
    max-width: 32ch !important;
    margin: 0 auto !important;
  }

  .db-free-upgrade-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.75rem 1rem !important;
    font-size: var(--b-text-sm) !important;
    border-radius: var(--b-r-lg) !important;
    white-space: nowrap !important;
  }
}

/* ── PREMIUM DASHBOARD: premium panel overflow fix ────────────────────── */
/* The gradient bleed escapes its container on mobile due to the radial
   gradient ::before pseudo-element using inset values that exceed viewport */
.db-premium-panel {
  /* Ensure the panel never causes horizontal overflow */
  max-width: 100%;
  box-sizing: border-box;
  contain: layout style;
}

@media (max-width: 768px) {
  .db-premium-panel {
    border-radius: var(--b-r-xl) !important;
    overflow: hidden !important;
    /* Hard-constrain: gradient bleed stays inside */
  }

  .db-premium-panel::before {
    /* Scale down the radial gradient so it doesn't bleed past edges */
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
  }

  .db-premium-panel-inner {
    padding: var(--b-sp-4) !important;
    gap: var(--b-sp-3) !important;
  }
}

/* ── PREMIUM DASHBOARD: stat grid — 2×2+1 on mobile ─────────────────── */
@media (max-width: 768px) {
  .db-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--b-sp-3) !important;
    margin-bottom: var(--b-sp-6) !important;
  }

  /* Last card (5th) spans full width so the row fills cleanly */
  .db-stats .db-stat-card:last-child {
    grid-column: 1 / -1 !important;
  }

  .db-stat-card.stat-card-v3 {
    padding: 1.125rem 1rem !important;
    min-height: 90px !important;
    gap: 0.5rem !important;
  }

  .stat-value-v3 {
    font-size: 1.4rem !important;
  }
}

/* ── PREMIUM DASHBOARD: compact layout on mobile ─────────────────────── */
@media (max-width: 768px) {
  /* Tighten header actions — wrap to 2×2 grid on small screens */
  .db-header-actions {
    flex-wrap: wrap !important;
    gap: var(--b-sp-2) !important;
  }

  .db-header-actions .btn-v2 {
    font-size: 0.75rem !important;
    padding: 0.45rem 0.75rem !important;
  }

  /* Cards: tighten internal padding */
  .db-card-header {
    padding: var(--b-sp-4) var(--b-sp-4) !important;
  }

  /* Availability hours section: reduce vertical breathing room */
  .db-hours-editor {
    padding: var(--b-sp-3) var(--b-sp-3) !important;
  }

  .db-hours-summary {
    padding: var(--b-sp-3) var(--b-sp-4) !important;
  }

  /* Sidebar cards: less internal padding */
  .db-sidebar .card-v2 {
    padding: 0 !important;
  }
}

/* ── ANALYTICS PAGE: subtitle contrast + KPI 2-col ──────────────────── */
.analytics-page .muted {
  /* Boost the subtitle contrast — the default muted color blends in */
  color: var(--b-text-2) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
}

@media (max-width: 768px) {
  /* KPI stat cards: 2-column on mobile, not auto-fit 1-col */
  #statsGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  #statsGrid .stat-card {
    padding: 1rem 0.75rem !important;
  }

  #statsGrid .stat-card > div:first-child {
    font-size: 1.75rem !important;
  }

  /* Period selector: stack period buttons below header on mobile */
  #statsGrid + .card > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  .analytics-page {
    padding: 1.25rem 1rem !important;
  }

  .analytics-page > div {
    max-width: 100% !important;
  }

  /* Breakdown grid: 2 cols on mobile */
  #breakdownGrid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── MINI-CALENDAR: ensure no overflow on narrow screens ─────────────── */
.db-mini-cal-card {
  overflow: hidden;
  box-sizing: border-box;
  max-width: 100%;
}

.db-mini-cal-body {
  box-sizing: border-box;
  max-width: 100%;
}

.db-mini-cal-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 3px;
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
}

/* Mini-calendar: intentionally 7-col at all widths (one col per weekday).
   Each cell = (390px - padding) / 7 ≈ 51px — no overflow.
   The media query below satisfies the linter and tightens cell spacing. */
@media (max-width: 480px) {
  .db-mini-cal-grid {
    /* still repeat(7,1fr) — cells shrink, not columns */
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 2px !important;
  }

  .db-mini-cal-grid .cal-day {
    min-height: 32px !important;
    font-size: 0.7rem !important;
  }

  .db-mini-cal-grid .cal-chip-count {
    display: none !important; /* Too cramped on 320px devices — just show the dot */
  }

  .db-mini-cal-month {
    font-size: 0.8rem !important;
    min-width: 100px !important;
  }

  .db-mini-cal-body {
    padding: var(--b-sp-3) var(--b-sp-3) var(--b-sp-4) !important;
  }
}

/* ==========================================================================
   LIGHT MODE OVERRIDES — Featured Pros section
   featured-pros.css uses hardcoded dark hex values (designed dark-first).
   These overrides convert every dark hardcode to light-mode appropriate
   values. All rules are scoped to [data-theme="light"] for zero dark impact.
   Added: 2026-05-11 (mobile review QA pass)
   ========================================================================== */

/* ── Section shell: replace dark navy gradient with clean light surface ── */
[data-theme="light"] .fp-section {
  background: linear-gradient(160deg, #f0f9ff 0%, #ffffff 55%, #f8fafc 100%);
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

/* Rail fade masks: match the new light background */
[data-theme="light"] .fp-rail-wrap::before {
  background: linear-gradient(to right, rgba(240,249,255,0.9) 0%, transparent 100%);
}

[data-theme="light"] .fp-rail-wrap::after {
  background: linear-gradient(to left, rgba(248,250,252,0.9) 0%, transparent 100%);
}

/* ── Section header text ─────────────────────────────────────────────── */
[data-theme="light"] .fp-headline {
  color: #0f172a;
}

[data-theme="light"] .fp-sub {
  color: #64748b;
}

/* ── Cards: white with subtle border + shadow ────────────────────────── */
[data-theme="light"] .fp-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  color: #0f172a;
}

[data-theme="light"] .fp-card:hover {
  box-shadow: 0 12px 32px rgba(14, 165, 233, 0.14), 0 2px 8px rgba(15, 23, 42, 0.08);
  border-color: rgba(14, 165, 233, 0.4);
}

/* Photo area: light placeholder bg instead of near-black */
[data-theme="light"] .fp-photo-wrap {
  background: #e2e8f0;
}

/* Photo scrim: lighter gradient so it's not invisible against light photo bgs */
[data-theme="light"] .fp-photo-scrim {
  background: linear-gradient(to top, rgba(15, 23, 42, 0.55) 0%, transparent 55%);
}

/* Distance badge: light frosted glass */
[data-theme="light"] .fp-distance {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(15, 23, 42, 0.1);
  color: #334155;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Card body text */
[data-theme="light"] .fp-name {
  color: #0f172a;
}

[data-theme="light"] .fp-rating {
  color: #334155;
}

[data-theme="light"] .fp-review-count {
  color: #64748b;
}

[data-theme="light"] .fp-city {
  color: #64748b;
}

/* No-photo avatar fallback */
[data-theme="light"] .fp-avatar-fallback {
  background: linear-gradient(135deg, rgba(14,165,233,0.1) 0%, rgba(20,184,166,0.1) 100%);
  color: rgba(14, 165, 233, 0.7);
}

/* ── Arrow buttons ───────────────────────────────────────────────────── */
[data-theme="light"] .fp-arrow {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #334155;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .fp-arrow:hover {
  background: rgba(14, 165, 233, 0.08);
  border-color: rgba(14, 165, 233, 0.4);
  color: #0ea5e9;
}

/* ══════════════════════════════════════════════════════════════════
   SETUP WIZARD MODAL
   Full-screen on mobile, centered panel on desktop.
   One step visible at a time with slide transitions.
══════════════════════════════════════════════════════════════════ */

/* ── Overlay layer ─────────────────────────────────────────────── */
.sw-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sw-modal[hidden] {
  display: none;
}

.sw-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 30, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: sw-fade-in 0.25s var(--b-ease) both;
}

@keyframes sw-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Panel ─────────────────────────────────────────────────────── */
.sw-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: 92dvh;
  background: var(--b-surface);
  border-radius: var(--b-r-2xl) var(--b-r-2xl) 0 0;
  box-shadow: 0 -8px 48px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--b-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: sw-slide-up 0.35s var(--b-ease-bounce) both;
}

@keyframes sw-slide-up {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@media (min-width: 640px) {
  .sw-modal {
    align-items: center;
  }
  .sw-panel {
    border-radius: var(--b-r-2xl);
    max-height: 88dvh;
  }
}

/* ── Progress bar ──────────────────────────────────────────────── */
.sw-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem 0;
  flex-shrink: 0;
}

.sw-progress-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sw-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--b-r-full);
  background: var(--b-border-2);
  transition: background 0.3s var(--b-ease), transform 0.3s var(--b-ease-bounce), width 0.3s var(--b-ease);
}

.sw-dot.active {
  background: var(--b-primary);
  width: 24px;
  transform: none;
}

.sw-dot.done {
  background: var(--b-success);
}

.sw-skip {
  background: none;
  border: none;
  color: var(--b-text-3);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: var(--b-r-sm);
  transition: color 0.15s ease, background 0.15s ease;
  font-family: var(--b-font-main);
}

.sw-skip:hover {
  color: var(--b-text);
  background: var(--b-surface-2);
}

/* ── Step content area ─────────────────────────────────────────── */
.sw-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.75rem 1.5rem 0.5rem;
  overscroll-behavior: contain;
  min-height: 0;
}

/* Step transition */
.sw-step {
  animation: sw-step-in 0.28s var(--b-ease) both;
}

.sw-step[hidden] {
  display: none;
}

@keyframes sw-step-in {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Step typography ───────────────────────────────────────────── */
.sw-emoji {
  font-size: 2.25rem;
  line-height: 1;
  margin-bottom: 0.875rem;
  display: block;
}

.sw-heading {
  font-family: var(--b-font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: var(--b-tracking-header);
  color: var(--b-text);
  margin: 0 0 0.375rem;
  line-height: 1.15;
}

.sw-sub {
  font-size: 0.9375rem;
  color: var(--b-text-3);
  margin: 0 0 1.5rem;
  line-height: 1.5;
}

/* ── Form fields ───────────────────────────────────────────────── */
.sw-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.sw-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.sw-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--b-text-2);
  margin-bottom: 0.375rem;
}

.sw-input {
  display: block;
  width: 100%;
  background: var(--b-surface-2);
  border: 1.5px solid var(--b-border);
  border-radius: var(--b-r-md);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  color: var(--b-text);
  font-family: var(--b-font-main);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
  -webkit-appearance: none;
}

.sw-input:focus {
  outline: none;
  border-color: var(--b-border-focus);
  box-shadow: 0 0 0 3px var(--b-primary-dim);
  background: var(--b-surface);
}

.sw-input::placeholder {
  color: var(--b-text-4);
}

/* ── Photo drop zone ───────────────────────────────────────────── */
.sw-photo-zone {
  border: 2px dashed var(--b-border-2);
  border-radius: var(--b-r-xl);
  padding: 2rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  position: relative;
  overflow: hidden;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--b-surface-2);
}

.sw-photo-zone:hover,
.sw-photo-zone.drag-over {
  border-color: var(--b-primary);
  background: var(--b-primary-dim);
}

.sw-photo-zone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.sw-photo-preview {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--b-primary);
  box-shadow: var(--b-shadow-blue);
}

.sw-photo-icon {
  color: var(--b-text-4);
  margin-bottom: 0.25rem;
}

.sw-photo-hint {
  font-size: 0.875rem;
  color: var(--b-text-3);
  font-weight: 500;
}

.sw-photo-hint-small {
  font-size: 0.75rem;
  color: var(--b-text-4);
}

/* ── Hours step ────────────────────────────────────────────────── */
.sw-day-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.sw-day-pill {
  display: none; /* hide the real checkbox */
}

.sw-day-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--b-r-md);
  border: 1.5px solid var(--b-border-2);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--b-text-3);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  background: var(--b-surface-2);
  user-select: none;
}

.sw-day-pill:checked + .sw-day-label {
  background: var(--b-primary-dim);
  border-color: var(--b-primary);
  color: var(--b-primary);
}

.sw-hours-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.sw-hours-label {
  font-size: 0.875rem;
  color: var(--b-text-3);
  font-weight: 500;
  white-space: nowrap;
}

.sw-time-input {
  flex: 1;
  background: var(--b-surface-2);
  border: 1.5px solid var(--b-border);
  border-radius: var(--b-r-md);
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  color: var(--b-text);
  font-family: var(--b-font-main);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
  -webkit-appearance: none;
}

.sw-time-input:focus {
  outline: none;
  border-color: var(--b-border-focus);
  box-shadow: 0 0 0 3px var(--b-primary-dim);
}

.sw-hours-sep {
  font-size: 0.875rem;
  color: var(--b-text-4);
  font-weight: 500;
}

.sw-closed-note {
  font-size: 0.8125rem;
  color: var(--b-text-4);
  font-style: italic;
}

/* ── Service step duration pills ───────────────────────────────── */
.sw-duration-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.sw-dur-radio {
  display: none;
}

.sw-dur-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.875rem;
  border-radius: var(--b-r-md);
  border: 1.5px solid var(--b-border-2);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--b-text-3);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  background: var(--b-surface-2);
  user-select: none;
  min-height: 44px;
}

.sw-dur-radio:checked + .sw-dur-label {
  background: var(--b-primary-dim);
  border-color: var(--b-primary);
  color: var(--b-primary);
}

/* ── Profession pills ──────────────────────────────────────────── */
.sw-profession-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.sw-prof-radio {
  display: none;
}

.sw-prof-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: var(--b-r-md);
  border: 1.5px solid var(--b-border-2);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--b-text-3);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  background: var(--b-surface-2);
  user-select: none;
  min-height: 44px;
}

.sw-prof-radio:checked + .sw-prof-label {
  background: var(--b-primary-dim);
  border-color: var(--b-primary);
  color: var(--b-primary);
}

/* ── Done step ─────────────────────────────────────────────────── */
.sw-done-checkmark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--b-success-bg);
  margin: 0 auto 1.25rem;
  animation: sw-pop 0.5s var(--b-ease-bounce) both;
}

@keyframes sw-pop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.sw-done-checkmark svg {
  color: var(--b-success);
}

.sw-booking-link-wrap {
  background: var(--b-surface-2);
  border: 1.5px solid var(--b-border);
  border-radius: var(--b-r-md);
  padding: 0.875rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1rem;
}

.sw-booking-link-url {
  flex: 1;
  font-size: 0.8125rem;
  color: var(--b-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: monospace;
}

.sw-copy-btn {
  background: var(--b-primary-dim);
  border: none;
  border-radius: var(--b-r-sm);
  color: var(--b-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.375rem 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
  min-height: 36px;
  font-family: var(--b-font-main);
}

.sw-copy-btn:hover {
  background: var(--b-primary);
  color: #fff;
}

.sw-done-actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* ── Error / status inline ─────────────────────────────────────── */
.sw-error {
  background: var(--b-error-bg);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: var(--b-r-md);
  color: var(--b-error);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.625rem 0.875rem;
  margin-bottom: 0.75rem;
  animation: sw-step-in 0.2s ease both;
}

.sw-error[hidden] {
  display: none;
}

/* ── Success inline (checkmark after submit) ───────────────────── */
.sw-step-success[hidden] { display: none !important; }
.sw-step-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 0;
  gap: 0.5rem;
  animation: sw-pop 0.4s var(--b-ease-bounce) both;
}

.sw-step-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--b-success-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sw-step-success-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--b-text);
}

.sw-step-success-sub {
  font-size: 0.875rem;
  color: var(--b-text-3);
}

/* ── Footer ────────────────────────────────────────────────────── */
.sw-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem calc(1rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--b-border);
  gap: 0.75rem;
  flex-shrink: 0;
}

.sw-back {
  background: none;
  border: 1.5px solid var(--b-border-2);
  border-radius: var(--b-r-full);
  color: var(--b-text-2);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.6875rem 1.25rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  font-family: var(--b-font-main);
  min-height: 48px;
  white-space: nowrap;
}

.sw-back:hover {
  background: var(--b-surface-2);
  border-color: var(--b-border-focus);
}

.sw-back[hidden] {
  visibility: hidden;
  pointer-events: none;
}

.sw-next {
  flex: 1;
  background: var(--b-gradient);
  border: none;
  border-radius: var(--b-r-full);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s var(--b-ease);
  font-family: var(--b-font-main);
  letter-spacing: -0.01em;
  min-height: 48px;
  box-shadow: var(--b-shadow-blue);
  position: relative;
  overflow: hidden;
}

.sw-next:hover:not(:disabled) {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: var(--b-shadow-blue-lg);
}

.sw-next:active:not(:disabled) {
  transform: translateY(0);
  opacity: 1;
}

.sw-next:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Loading spinner inside next btn */
.sw-next .sw-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sw-spin 0.65s linear infinite;
  vertical-align: -3px;
  margin-right: 6px;
}

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

/* ── Welcome step hero ─────────────────────────────────────────── */
.sw-welcome-hero {
  text-align: center;
  padding: 1rem 0 0.5rem;
}

.sw-welcome-logo {
  width: 64px;
  height: 64px;
  border-radius: var(--b-r-xl);
  background: var(--b-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.125rem;
  box-shadow: var(--b-shadow-blue-lg);
}

.sw-welcome-name {
  color: var(--b-primary);
}

.sw-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--b-primary-dim);
  color: var(--b-primary);
  border-radius: var(--b-r-full);
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-top: 0.75rem;
}

/* ── Step counter label ─────────────────────────────────────────── */
.sw-step-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--b-primary);
  margin-bottom: 0.375rem;
  white-space: nowrap;
}

/* ── Dark mode overrides ────────────────────────────────────────── */
[data-theme="dark"] .sw-panel {
  background: var(--b-surface);
  box-shadow: 0 -8px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--b-border);
}

[data-theme="dark"] .sw-input,
[data-theme="dark"] .sw-time-input {
  background: var(--b-surface-2);
  border-color: var(--b-border);
  color: var(--b-text);
}

[data-theme="dark"] .sw-photo-zone {
  background: var(--b-surface-2);
  border-color: var(--b-border);
}

[data-theme="dark"] .sw-booking-link-wrap {
  background: var(--b-surface-2);
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .sw-modal *,
  .sw-modal *::before,
  .sw-modal *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── CSP-safe hover utilities (replaces inline onmouseover/onmouseout) ─── */
[data-hover="lift"] { transition: transform 0.2s, box-shadow 0.2s; }
[data-hover="lift"]:hover { transform: translateY(-4px); box-shadow: var(--b-shadow-lg); }
[data-hover="fade"] { transition: opacity 0.2s; }
[data-hover="fade"]:hover { opacity: 0.85; }


/* ═══════════════════════════════════════════════════════════════════════════
   SAFETY-NET OVERRIDES — appended last, highest specificity wins.
   All a11y, contrast, and mobile fixes that need to survive earlier rules.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. SKIP-TO-MAIN LINK ───────────────────────────────────────────────── */
.skip-to-main {
  position: absolute !important;
  left: -9999px !important;
  top: 1rem !important;
  z-index: 99999 !important;
  background: var(--b-primary) !important;
  color: #fff !important;
  padding: 0.75rem 1.25rem !important;
  border-radius: var(--b-r-md) !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  outline: none !important;
}
.skip-to-main:focus {
  left: 1rem !important;
}

/* ── 2. FOCUS-VISIBLE RING ─────────────────────────────────────────────── */
/* Restore focus indicators that outline:none rules stripped from all inputs */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--b-primary) !important;
  outline-offset: 2px !important;
  box-shadow: none !important; /* avoid double-ring with existing border glow */
}

/* ── 3. STATUS BADGE CONTRAST ──────────────────────────────────────────── */
/* "Booked" badge: was #0ea5e9 on rgba(0.12) = 2.45:1. Use solid bg.      */
.status-booked,
.badge-booked {
  background: #e0f2fe !important;  /* sky-100 */
  color: #0369a1 !important;        /* sky-700, 4.8:1 on sky-100 */
  border: 1px solid rgba(3, 105, 161, 0.2) !important;
}

/* ── 4. ADDRESS-VERIFIED GOLD PILL ─────────────────────────────────────── */
/* Was #d4a943 on rgba(0.1) = 1.96:1 — completely invisible. Dark amber.  */
.address-verified-pill {
  color: #92400e !important;        /* amber-800, 5.6:1 on amber-50 */
  background: #fffbeb !important;   /* amber-50 */
  border-color: rgba(146, 64, 14, 0.25) !important;
}

/* ── 5. MOBILE DRAWER WIDTH FIX ─────────────────────────────────────────── */
/* At 390px viewport: 300px drawer leaves 90px exposed on left.            */
/* Full-width on narrow screens (≤480px); 360px max on larger ones.        */
@media (max-width: 480px) {
  .mobile-drawer-v2 {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
@media (min-width: 481px) {
  .mobile-drawer-v2 {
    left: auto !important;
    right: 0 !important;
    width: min(360px, 90vw) !important;
  }
}

/* ── 6. FIND-PRO CATEGORY CHIPS WRAP ───────────────────────────────────── */
.category-chips,
.chip-row,
.filter-chips,
.service-chips,
.category-filters {
  flex-wrap: wrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ── 7. FEATURED PROS NAV DOTS — 44x44 tap targets ────────────────────── */
.fp-dot {
  padding: 10px !important;         /* expands hit area to 28px+20px=48px */
  margin: -10px !important;         /* collapse visual spacing */
}
.fp-dot.is-active { width: 24px !important; }  /* visual pill stays small */

/* ── 8. FEATURED PROS TEXT SIZES ───────────────────────────────────────── */
.fp-profession {
  font-size: 0.8125rem !important;  /* 13px — was 11px */
}
.fp-city {
  font-size: 0.875rem !important;   /* 14px — was 11.2px */
}

/* ── 9. PROFILE STICKY CTA SAFE-AREA ───────────────────────────────────── */
.profile-book-sticky,
.profile-sticky-cta,
.bp-sticky-cta {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
  bottom: env(safe-area-inset-bottom, 0) !important;
}

/* ── 10. DASHBOARD TABLE → CARD STACK ON MOBILE ────────────────────────── */
/* Actual class in dashboard.html is .table-v3 inside .db-table-wrap        */
@media (max-width: 768px) {
  .db-table-wrap {
    overflow: visible !important;  /* allow block layout to take over */
  }
  .table-v3,
  .upcoming-table,
  .appointments-table {
    display: block !important;
    width: 100% !important;
  }
  .table-v3 thead,
  .upcoming-table thead,
  .appointments-table thead {
    display: none !important;
  }
  .table-v3 tbody,
  .upcoming-table tbody,
  .appointments-table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  .table-v3 tr,
  .upcoming-table tr,
  .appointments-table tr {
    display: flex !important;
    flex-direction: column !important;
    background: var(--b-surface) !important;
    border: 1px solid var(--b-border) !important;
    border-radius: var(--b-r-lg) !important;
    padding: 1rem !important;
    gap: 0.35rem !important;
  }
  .table-v3 td,
  .upcoming-table td,
  .appointments-table td {
    display: flex !important;
    align-items: baseline !important;
    gap: 0.5rem !important;
    padding: 0.15rem 0 !important;
    font-size: var(--b-text-sm) !important;
    border: none !important;
  }
  .table-v3 td::before,
  .upcoming-table td::before,
  .appointments-table td::before {
    content: attr(data-label) !important;
    font-weight: 700 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--b-text-4) !important;
    min-width: 80px !important;
    flex-shrink: 0 !important;
  }
  /* Multi-element td contents (name+phone+email, date+time) must stack
     vertically inside the flex-row cell, otherwise children clip into the
     same baseline and word-wrap mid-word ("Appointme / nt") — see
     Michael's free-dashboard screenshot 2026-05-14. */
  .table-v3 td .db-appt-stack,
  .upcoming-table td .db-appt-stack,
  .appointments-table td .db-appt-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.2rem !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    text-align: left !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
  .table-v3 td .db-client-name,
  .upcoming-table td .db-client-name,
  .appointments-table td .db-client-name {
    font-size: var(--b-text-base) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: var(--b-text) !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* Desktop fallback for db-appt-stack — keep it column-flex so children
   stack visually even outside the mobile breakpoint. */
.db-appt-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-width: 0;
}

/* ── 11. SELLER PRODUCTS TABLE MIN-WIDTH ────────────────────────────────── */
.seller-products-table {
  min-width: 600px !important;
}
.seller-products-scroll {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ── 12. PROFILE PAGE DESKTOP WIDTH ────────────────────────────────────── */
@media (min-width: 1024px) {
  .barber-profile-wrap,
  .profile-page-wrap,
  .bp-container {
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ── 13. CLIENT SETTINGS DESKTOP WIDTH ─────────────────────────────────── */
@media (min-width: 1024px) {
  .client-settings-wrap,
  .client-settings-card {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ── 14. PRIVACY BODY FONT SIZE ─────────────────────────────────────────── */
.privacy-content p,
.privacy-section p,
.privacy-body p,
.terms-content p,
.legal-content p {
  font-size: 1rem !important;      /* 16px minimum for readability */
}

/* ── 15. IOS SELECT/INPUT FONT-SIZE (prevents auto-zoom) ───────────────── */
@media (max-width: 768px) {
  select,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  textarea {
    font-size: 16px !important;   /* exactly 16px prevents iOS Safari zoom */
  }
}

/* ── 16. HOME BENTO GRID SINGLE-COL ON MOBILE ───────────────────────────── */
/* The inline styles in home.html already set .features-bento { display:block } */
/* at 600px and use a horizontal scroll row for small cards. The outer section */
/* must clip the overflow or the row bleeds past viewport.                      */
@media (max-width: 768px) {
  .bento-grid,
  .bento-features-grid,
  .features-bento {
    grid-template-columns: 1fr !important;
    overflow: hidden !important;      /* clip the bento-supporting-row bleed */
  }
  /* The scroll row is intentionally wider — clip at section level */
  #features,
  .section-standard:has(.features-bento) {
    overflow: hidden !important;
  }
  .bento-card,
  .bento-small,
  .bento-large {
    max-width: 100% !important;
    left: auto !important;
    position: relative !important;
    box-sizing: border-box !important;
  }
  /* Force the horizontal scroll strip to stack vertically on mobile.          */
  /* The row was flex-direction:row with overflow:auto — cards overflow right. */
  .bento-supporting-row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    gap: 12px !important;
    max-width: 100% !important;
  }
  .bento-supporting-row .bento-card,
  .bento-supporting-row .bento-small {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
}

/* ── 17. STEPS CAROUSEL — FULL FIX ──────────────────────────────────────── */
/* Root cause: template sets padding:0 52px on the wrap for arrows, so the   */
/* track is narrower than the slide which is flex:0 0 100% of track width.   */
/* Fix: on mobile, remove the padding; arrows overlay at edges; cards fill.  */
@media (max-width: 767px) {
  .steps-carousel-wrap {
    overflow: hidden !important;
    padding: 0 !important;           /* remove the 52px arrow gutters */
  }
  .steps-carousel-track {
    width: 100% !important;
  }
  .steps-slide {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    padding: 0 1rem !important;
    box-sizing: border-box !important;
  }
  .steps-slide .step-card-v3 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* Arrow buttons sit at absolute edges, overlaid on the card */
  .steps-arrow-prev { left: 4px !important; }
  .steps-arrow-next { right: 4px !important; }
}
.steps-section,
.how-it-works-section {
  overflow: hidden !important;
}

/* ── 18. CLIENT DASHBOARD FAB Z-INDEX FIX ───────────────────────────────── */
.client-fab,
.fab-find-pro,
.teal-fab {
  z-index: 100 !important;
  bottom: max(1.5rem, env(safe-area-inset-bottom, 1.5rem)) !important;
}

/* ── 19. HEADING HIERARCHY h1→h3 VISUAL FIX ────────────────────────────── */
/* Find-pro and results pages — h3 used where h2 needed visually */
.results-section-title,
.find-pro-section-title {
  font-size: var(--b-text-xl) !important;
}

/* ── 20. HERO GLOW ORBS — contain to viewport ───────────────────────────── */
.hero-glow,
.glow-orb,
.hero-blob {
  overflow: hidden !important;
}
.hero-section,
.hero-v3,
.hero-wrap,
.home-hero {
  overflow: hidden !important;
}

/* ── 20b. FP RAIL — contain cards within the slider track ───────────────── */
.fp-rail-wrap,
.fp-inner {
  overflow: hidden !important;
}

/* ── 21. NAVIGATION ACCESSIBLE NAME ─────────────────────────────────────── */
/* Handled in HTML. Here we just ensure dialog role nav has visible outline */
#mobileDrawer:focus {
  outline: none !important; /* suppress focus ring on drawer container */
}

/* ── 22. AUTH PAGES — MINIMAL FOOTER ────────────────────────────────────── */
/* Login / signup pages override {% block site_footer %} with this slim bar. */
.auth-footer-minimal {
  text-align: center;
  padding: 1.5rem 1rem;
  color: var(--b-text-3);
  font-size: 0.8125rem;
}
.auth-footer-minimal a {
  color: var(--b-text-2);
  text-decoration: none;
}
.auth-footer-minimal a:hover {
  color: var(--b-primary);
}

/* ── 23. GLOW ORBS — clip at hero container ─────────────────────────────── */
/* Previous rule targeted classes that may not match the actual hero class.  */
@media (max-width: 768px) {
  .section-hero,
  .hero-section,
  .hero-v3,
  .hero-wrap,
  .home-hero,
  section:first-of-type:has(.glow-orb-blue) {
    overflow: hidden !important;
    contain: paint !important;
  }
  .glow-orb-blue,
  .glow-orb-teal {
    pointer-events: none !important;
  }
}

/* ── 24. FEATURED PROS NAV DOTS — true 44px tap target ─────────────────── */
/* Previous fix used padding:10px (20px total + 8px dot = 28px). Bump to 18px. */
.fp-dot {
  padding: 18px !important;
  margin: -18px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── 25. FEATURED PROS TEXT SIZE ────────────────────────────────────────── */
.fp-profession {
  font-size: 14px !important;
}
.fp-city {
  font-size: 14px !important;
}

/* ── 26. PRIVACY / TERMS BODY FONT ──────────────────────────────────────── */
.privacy-content,
.privacy-section,
.privacy-body,
.terms-content,
.legal-content {
  font-size: 1rem !important;
  line-height: 1.7 !important;
}
.privacy-content p,
.privacy-section p,
.privacy-body p,
.terms-content p,
.legal-content p,
.privacy-content li,
.terms-content li,
.legal-content li {
  font-size: 1rem !important;
  line-height: 1.7 !important;
}

/* ── 27. RESULTS GRID — SINGLE CARD DESKTOP ─────────────────────────────── */
/* results-grid is now flex with justify-content:center in the template.
   Cards have flex: 1 1 320px; max-width: 520px so they fill 2-up on desktop
   and a single card centers gracefully without a void on either side. */

/* ── 28. PROFILE STICKY CTA — HOME INDICATOR PADDING ───────────────────── */
/* Ensure full selector coverage — template uses several class names          */
.profile-book-sticky,
.profile-sticky-cta,
.bp-sticky-cta,
.booking-sticky-cta {
  padding-bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important;
}

/* ── 29. STEP CARD INTERNAL TEXT OVERFLOW ───────────────────────────────── */
/* step-card-v3 internal <p> was flagging overflow via debug tool.           */
.step-card-v3 {
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.step-card-v3 p,
.step-card-v3 h3 {
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* ── 30. AUTH FOOTER MINIMAL — SINGLE ROW ───────────────────────────────── */
/* Items were stacking vertically; force a centered flex row.                */
.auth-footer-minimal {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 16px !important;
  font-size: 13px !important;
  color: var(--b-text-3, #94a3b8) !important;
  text-align: center !important;
}
.auth-footer-minimal small {
  display: inline-flex !important;
  flex-wrap: nowrap !important;    /* never let the single-line text break */
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  white-space: nowrap !important;
}

/* ── 31. BENEFIT ICON BOX — ENFORCE VISIBLE SIZE ────────────────────────── */
/* SVGs inside .benefit-icon-box were computing 0x0 on some pages.          */
.benefit-icon-box {
  width: 48px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.benefit-icon-box > svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
}

/* ── BOOKING PROGRESS — compress at 390px ───────────────────────────────── */
@media (max-width: 430px) {
  .book-progress { gap: 0.25rem !important; }
  .book-step-pill {
    padding: 0.35rem 0.5rem !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
}

/* ── C13: Show "Join Free" nav CTA on mobile as compact pill ─────────────── */
/* Log In is already in the drawer footer — show Join Free in the header bar */
@media (max-width: 768px) {
  .nav-cta-v2 {
    display: inline-flex !important;
    padding: 0.4rem 0.85rem !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    border-radius: var(--b-r-full) !important;
    white-space: nowrap;
  }
  /* Also show "Log In" text link alongside "Join Free" on mobile */
  .nav-login-link {
    display: inline-flex !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--b-text-2) !important;
    white-space: nowrap;
    padding: 0.4rem 0.5rem !important;
  }
}

/* ── 32. SLOT GROUP GRID — exempt from mobile safety-net collapse ────────── */
/* The [class*="grid"] rule at ≤768px and ≤480px collapses all *-grid classes
   to 1 column. .slot-group-grid is intentionally multi-column at mobile — it
   owns its own 3-col (≤480px) / 4-col (≥480px) breakpoints in book.html.    */
@media (max-width: 480px) {
  .slot-group-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 768px) {
  .slot-group-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ── 33. HOMEPAGE "BOOK IN 3 STEPS" — prevent carousel arrow overflow ────── */
/* The arrow buttons sit at left:-22px / right:-22px which escapes the section
   boundary on 390px screens. Clip at the section level, not the card level.  */
@media (max-width: 767px) {
  .section-alt:has(.steps-carousel-wrap) {
    overflow-x: hidden;
  }
  /* Fallback for browsers that don't support :has() */
  .steps-carousel-wrap {
    overflow-x: hidden;
  }
}

/* ── 34. HOMEPAGE "EVERYTHING YOU NEED" CAROUSEL — section clamp ─────────── */
/* features-carousel-wrap already has overflow:hidden but the section padding
   can push it wider than the viewport if the container miscalculates.        */
@media (max-width: 767px) {
  .features-carousel-wrap {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .features-slide {
    padding: 0 0.75rem !important;
    box-sizing: border-box !important;
  }
  .section-standard:has(.features-carousel-wrap) {
    overflow-x: hidden;
  }
}

/* ── 35. FIND-PRO CATEGORY CHIPS — fix outer clip blocking inner scroll ───── */
/* .find-categories has overflow:hidden which clips the mask-faded scroll row.
   Change to overflow-x:hidden only so vertical is unclipped, and ensure the
   inner scroll container reaches its full width.                              */
@media (max-width: 640px) {
  .find-categories {
    overflow: visible !important;
  }
  /* Re-contain vertical overflow at page level (find-page already clips) */
  .find-cat-pills {
    /* Ensure the right-fade mask still signals more chips */
    mask-image: linear-gradient(to right, black 0, black calc(100% - 40px), transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 40px), transparent 100%) !important;
    padding-bottom: 0.5rem !important;
  }
}

/* ── 36. DASHBOARD DAY CHIPS — overflow-x scroll escaping card clip ────────── */
/* .db-hours-card has overflow:hidden which clips the scrollable .db-hours-chips
   on mobile. The template's own @media block sets overflow-x:auto on the chips
   correctly, but the card clips before it can scroll. Fix: allow overflow-x on
   the card so the chips row can scroll without clipping.                       */
@media (max-width: 768px) {
  .db-hours-card {
    overflow-x: auto !important;
    overflow-y: hidden;
  }
  .db-hours-chips {
    /* Ensure chips container never forces card wider than viewport */
    max-width: 100%;
  }
}

/* ── 37. MOBILE NAV — hide wordmark so logo+login+join all fit at 390px ─── */
@media (max-width: 480px) {
  .logo-v2 span, .logo span {
    display: none !important;
  }
}

/* ── 38. RADIUS CHIPS — ensure all 4 fit / scroll at 390px ──────────────── */
@media (max-width: 390px) {
  /* Tighten console padding so the radius row gets max inner width */
  .search-console,
  .results-filter-card {
    padding: 0.5rem !important;
  }
  /* Remove right-padding from radius pills — last chip clips visually
     but the row is overflow:auto so it scrolls; removing the padding
     means chip right = container right = no phantom clip */
  .radius-pills {
    padding-right: 0.375rem !important;
  }
  /* Ensure filter inputs can't push their row wider than the viewport */
  .filter-input,
  .filter-field,
  .filter-select {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}
/* ============================================================
   GREG AI ASSISTANT — DESIGN SYSTEM V4
   Glassmorphism · Soulful Animations · Top-Tier Aesthetics
   ============================================================ */

:root {
  --greg-primary: #8b5cf6;
  --greg-secondary: #0ea5e9;
  --greg-gradient: linear-gradient(135deg, #8b5cf6 0%, #0ea5e9 100%);
  --greg-glow: rgba(139, 92, 246, 0.5);
  
  --greg-panel-bg: rgba(15, 23, 42, 0.85);
  --greg-panel-border: rgba(255, 255, 255, 0.15);
  --greg-blur: blur(32px);
}

[data-theme="dark"] {
  --greg-panel-bg: rgba(15, 23, 42, 0.85);
  --greg-panel-border: rgba(255, 255, 255, 0.15);
}

/* ── UNIFIED AI ORB ──────────────────────────────────────── */
.greg-orb-container {
  position: fixed !important;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  right: 24px !important;
  z-index: 10001 !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}

.greg-orb {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--greg-gradient);
  box-shadow: 0 12px 40px var(--greg-glow), 
              inset 0 0 20px rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  position: relative;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.greg-orb::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #0ea5e9, #14b8a6, #3b82f6, #0ea5e9);
  z-index: -1;
  filter: blur(12px);
  opacity: 0.4;
  animation: greg-orb-spin 6s linear infinite;
}

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

.greg-orb:hover {
  transform: scale(1.1) translateY(-4px);
  box-shadow: 0 16px 48px var(--greg-glow), 
              inset 0 0 25px rgba(255,255,255,0.6);
}

.greg-orb:active {
  transform: scale(0.92);
}

.greg-orb-icon {
  width: 32px;
  height: 32px;
  color: white;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: absolute;
}

.greg-orb-icon.send-icon {
  transform: scale(0) rotate(-45deg);
  opacity: 0;
}

.greg-orb.chat-active .bot-icon {
  transform: scale(0) rotate(45deg);
  opacity: 0;
}

.greg-orb.chat-active .send-icon {
  transform: scale(1) rotate(0);
  opacity: 1;
}

/* States */
.greg-orb[data-state="listening"] {
  background: radial-gradient(circle at 30% 30%, #10b981, #059669);
  animation: greg-pulse-listen 1.5s infinite;
}
@keyframes greg-pulse-listen {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(16, 185, 129, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.greg-orb[data-state="thinking"] {
  background: radial-gradient(circle at 30% 30%, #f59e0b, #d97706);
}
.greg-orb[data-state="thinking"] .greg-orb-icon {
  animation: greg-think-spin 2s linear infinite;
}
@keyframes greg-think-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.greg-orb[data-state="speaking"] {
  background: radial-gradient(circle at 30% 30%, #3b82f6, #2563eb);
}
.greg-orb[data-state="speaking"]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid white;
  animation: greg-speak-wave 1s infinite;
}
@keyframes greg-speak-wave {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ── PREMIUM CHAT PANEL ──────────────────────────────────── */
.greg-chat-panel {
  position: fixed;
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  right: 24px;
  width: 420px;
  height: 640px;
  max-height: calc(100vh - 140px);
  background: var(--greg-panel-bg);
  backdrop-filter: var(--greg-blur);
  -webkit-backdrop-filter: var(--greg-blur);
  border: 1px solid var(--greg-panel-border);
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 
              0 0 120px var(--greg-glow),
              0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  display: flex;
  flex-direction: column;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px) scale(0.96);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.greg-chat-panel.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.greg-chat-header {
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid var(--greg-panel-border);
}

[data-theme="dark"] .greg-chat-header {
  background: rgba(0, 0, 0, 0.2);
}

.greg-chat-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
}

.greg-status-dot {
  width: 10px;
  height: 10px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 12px #10b981;
}

.close-greg {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.close-greg:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.3);
}

/* Messages */
.greg-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.1) transparent;
}

.greg-message {
  max-width: 88%;
  padding: 16px 20px;
  border-radius: 22px;
  font-size: 0.95rem;
  line-height: 1.6;
  animation: greg-msg-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  word-wrap: break-word;
}

@keyframes greg-msg-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.greg-message.assistant {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-bottom-left-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.greg-message.user {
  align-self: flex-end;
  background: var(--greg-gradient);
  color: white;
  border-bottom-right-radius: 6px;
  box-shadow: 0 8px 24px var(--greg-glow);
  font-weight: 500;
}

/* Input Area */
.greg-input-area {
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.1);
  border-top: 1px solid var(--greg-panel-border);
  display: flex;
  align-items: center;
  gap: 14px;
}

.greg-input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.greg-input-wrapper input {
  width: 100%;
  /* U6: extra right padding to clear mic + send buttons */
  padding: 14px 88px 14px 22px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  font-size: 1rem;
  color: #ffffff;
  transition: all 0.3s;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.greg-input-wrapper input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.greg-input-wrapper input:focus {
  border-color: var(--greg-primary);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.1);
  outline: none;
}

.greg-inline-mic {
  position: absolute;
  right: 46px; /* U6: shift left to make room for inline send */
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

/* U6: send button lives inside wrapper — styled smaller than the old floating version */
.greg-inline-send {
  position: absolute;
  right: 6px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--greg-gradient);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px var(--greg-glow);
  transition: all 0.2s var(--b-ease);
  flex-shrink: 0;
}
.greg-inline-send:hover { transform: scale(1.1); }
.greg-inline-send:disabled { opacity: 0.5; filter: grayscale(1); cursor: not-allowed; }

.greg-inline-mic:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--greg-primary);
}

.greg-inline-mic.active {
  color: var(--b-error);
  animation: greg-mic-active 1.5s infinite;
}

@keyframes greg-mic-active {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* .send-greg — old floating button; now moved inside wrapper as .greg-inline-send (U6). Kept for JS selector compat. */
.send-greg:disabled {
  opacity: 0.5;
  filter: grayscale(1);
  cursor: not-allowed;
}

/* Typing dots animation */
@media (prefers-reduced-motion: no-preference) {
  @keyframes greg-dot-pulse {
    0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
    30%           { opacity: 1.0;  transform: translateY(-2px); }
  }
}

.greg-typing-dots {
  display: inline-flex;
  gap: 4px;
  margin-top: 6px;
  align-items: center;
}

.greg-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
}

@media (prefers-reduced-motion: no-preference) {
  .greg-typing-dots span {
    animation: greg-dot-pulse 1.2s infinite ease-in-out;
  }
  .greg-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
  .greg-typing-dots span:nth-child(3) { animation-delay: 0.30s; }
}

.greg-ack-fading {
  transition: opacity 120ms ease;
  opacity: 0.4;
}

/* Suggestion Chips */
.greg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.greg-chip {
  padding: 8px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.greg-chip:hover {
  background: var(--greg-gradient);
  color: white;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--greg-glow);
}

/* Mobile */
@media (max-width: 768px) {
  .greg-chat-panel {
    bottom: 0;
    right: 0;
    width: 100%;
    height: 85vh;
    border-radius: 32px 32px 0 0;
    transform: translateY(100%);
  }
  .greg-chat-panel.active { transform: translateY(0); }
  
  .greg-orb-container {
    bottom: 16px !important;
    right: 16px !important;
  }
}

/* M2: Hide Greg FAB when any modal/wizard is open — prevents misfire taps */
.greg-orb-container.is-fab-hidden {
  display: none !important;
  pointer-events: none !important;
}
}