/**
 * SparkWash — Premium SaaS Design System v2.0
 * Tema: Modern Car Wash · Biru Premium · Glassmorphism
 */

// ═══════════════════════════════════════════════════════════
// 1. BOOTSTRAP VARIABLE OVERRIDES
// ═══════════════════════════════════════════════════════════
$primary:          #1E88E5;
$primary-dark:     #1565C0;
$primary-light:    #BBDEFB;
$secondary:        #64748B;
$success:          #10B981;
$danger:           #EF4444;
$warning:          #F59E0B;
$info:             #06B6D4;
$light:            #F0F7FF;
$dark:             #0D1B2A;
$body-bg:          #EEF4FF;
$body-color:       #1E293B;
$border-radius:    0.75rem;
$border-radius-sm: 0.5rem;
$border-radius-lg: 1rem;
$border-radius-xl: 1.5rem;
$card-border-width: 0;
$font-family-sans-serif: 'Inter', 'Poppins', system-ui, -apple-system, sans-serif;
$font-size-base:   0.9375rem;
$input-border-radius:      $border-radius;
$input-focus-border-color: $primary;
$input-focus-box-shadow:   0 0 0 0.2rem rgba(30,136,229,0.18);
$btn-border-radius: 50rem;
$btn-font-weight:   600;
$btn-padding-y:     0.55rem;
$btn-padding-x:     1.5rem;

// ═══════════════════════════════════════════════════════════
// 2. IMPORTS
// ═══════════════════════════════════════════════════════════
@import "bootstrap/scss/bootstrap";
@import "@fortawesome/fontawesome-free/scss/fontawesome";
@import "@fortawesome/fontawesome-free/scss/solid";
@import "@fortawesome/fontawesome-free/scss/regular";
@import "@fortawesome/fontawesome-free/scss/brands";

// ═══════════════════════════════════════════════════════════
// 3. DESIGN TOKENS
// ═══════════════════════════════════════════════════════════
:root {
    --sw-primary:        #1E88E5;
    --sw-primary-dark:   #1565C0;
    --sw-primary-light:  #BBDEFB;
    --sw-primary-soft:   #E3F2FD;
    --sw-accent:         #00BCD4;
    --sw-white:          #FFFFFF;
    --sw-bg:             #F0F4FC;
    --sw-bg-alt:         #E8EDF8;
    --sw-gray-50:        #F8FAFF;
    --sw-gray-100:       #EEF2FB;
    --sw-gray-200:       #DDE5F5;
    --sw-gray-400:       #94A3B8;
    --sw-gray-500:       #64748B;
    --sw-gray-600:       #475569;
    --sw-dark:           #0D1B2A;
    --sw-text:           #1E293B;
    --sw-shadow-xs:      0 1px 3px rgba(30,136,229,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --sw-shadow:         0 4px 20px rgba(30,136,229,0.10), 0 1px 4px rgba(0,0,0,0.05);
    --sw-shadow-md:      0 8px 32px rgba(30,136,229,0.14), 0 2px 8px rgba(0,0,0,0.06);
    --sw-shadow-lg:      0 20px 60px rgba(30,136,229,0.18), 0 4px 16px rgba(0,0,0,0.08);
    --sw-shadow-glow:    0 0 40px rgba(30,136,229,0.35);
    --sw-gradient:       linear-gradient(135deg, #1E88E5 0%, #1565C0 100%);
    --sw-gradient-soft:  linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
    --sw-gradient-hero:  linear-gradient(145deg, #0D47A1 0%, #1565C0 40%, #1E88E5 80%, #0097A7 100%);
    --sw-gradient-card:  linear-gradient(135deg, rgba(30,136,229,0.08) 0%, rgba(0,188,212,0.04) 100%);
    --sw-glass:          rgba(255,255,255,0.72);
    --sw-glass-border:   rgba(255,255,255,0.5);
    --sw-radius:         0.75rem;
    --sw-radius-lg:      1rem;
    --sw-radius-xl:      1.5rem;
    --sw-radius-2xl:     2rem;
    --sw-transition:     all 0.28s cubic-bezier(0.4,0,0.2,1);
    --sw-transition-fast:all 0.15s ease;
    --sw-transition-slow:all 0.45s cubic-bezier(0.4,0,0.2,1);
}

// ═══════════════════════════════════════════════════════════
// 4. KEYFRAME ANIMATIONS
// ═══════════════════════════════════════════════════════════
@keyframes sw-fade-up {
    from { opacity:0; transform:translateY(24px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes sw-fade-in {
    from { opacity:0; }
    to   { opacity:1; }
}
@keyframes sw-slide-left {
    from { opacity:0; transform:translateX(30px); }
    to   { opacity:1; transform:translateX(0); }
}
@keyframes sw-scale-in {
    from { opacity:0; transform:scale(0.9); }
    to   { opacity:1; transform:scale(1); }
}
@keyframes bubble-float {
    0%   { transform:translateY(0) scale(1);      opacity:0.6; }
    50%  { transform:translateY(-22px) scale(1.06); opacity:0.8; }
    100% { transform:translateY(-45px) scale(0.75); opacity:0; }
}
@keyframes wave-drift {
    0%   { transform:translateX(0); }
    100% { transform:translateX(-50%); }
}
@keyframes sw-spin {
    to { transform:rotate(360deg); }
}
@keyframes sw-pulse {
    0%,100% { opacity:1; }
    50%      { opacity:0.5; }
}
@keyframes sw-bounce-subtle {
    0%,100% { transform:translateY(0); }
    50%      { transform:translateY(-6px); }
}
@keyframes sw-glow-pulse {
    0%,100% { box-shadow:0 0 20px rgba(30,136,229,0.3); }
    50%      { box-shadow:0 0 40px rgba(30,136,229,0.6); }
}
@keyframes counter-up {
    from { opacity:0; transform:translateY(10px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes shimmer {
    0%   { background-position:-200% 0; }
    100% { background-position:200% 0; }
}
@keyframes float-particle {
    0%   { transform:translateY(0) rotate(0deg); opacity:0; }
    10%  { opacity:1; }
    90%  { opacity:0.8; }
    100% { transform:translateY(-100vh) rotate(720deg); opacity:0; }
}

// ═══════════════════════════════════════════════════════════
// 5. GLOBAL BASE
// ═══════════════════════════════════════════════════════════
*, *::before, *::after { box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
    font-family:'Poppins', system-ui, sans-serif;
    background:var(--sw-bg);
    color:var(--sw-text);
    font-size:0.9375rem;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

::selection { background:rgba(30,136,229,0.2); color:var(--sw-primary-dark); }

.fw-900 { font-weight:900 !important; }
.fw-800 { font-weight:800 !important; }
.fw-700 { font-weight:700 !important; }
.fw-600 { font-weight:600 !important; }
.fw-500 { font-weight:500 !important; }

a { transition:var(--sw-transition-fast); }

// ═══════════════════════════════════════════════════════════
// 6. AMBIENT BUBBLES (all layouts)
// ═══════════════════════════════════════════════════════════
.sw-page-bubbles {
    position:fixed; inset:0;
    pointer-events:none; z-index:0; overflow:hidden;
}
.sw-bubble {
    position:fixed; border-radius:50%;
    background:radial-gradient(circle at 35% 35%, rgba(255,255,255,0.9), rgba(187,222,251,0.25));
    border:1px solid rgba(30,136,229,0.12);
    box-shadow:inset 0 0 10px rgba(255,255,255,0.8), 0 2px 14px rgba(30,136,229,0.07);
    animation:bubble-float ease-in infinite;
    opacity:0; pointer-events:none;
}
.sw-bubble:nth-child(1)  { width:20px; height:20px; left: 7%; bottom:-60px; animation-duration:9s;  animation-delay:0s;   }
.sw-bubble:nth-child(2)  { width:14px; height:14px; left:19%; bottom:-60px; animation-duration:12s; animation-delay:2.5s; }
.sw-bubble:nth-child(3)  { width:26px; height:26px; left:33%; bottom:-60px; animation-duration:10s; animation-delay:4s;   }
.sw-bubble:nth-child(4)  { width:10px; height:10px; left:49%; bottom:-60px; animation-duration:14s; animation-delay:1s;   }
.sw-bubble:nth-child(5)  { width:22px; height:22px; left:62%; bottom:-60px; animation-duration:11s; animation-delay:5s;   }
.sw-bubble:nth-child(6)  { width:16px; height:16px; left:74%; bottom:-60px; animation-duration:8s;  animation-delay:3s;   }
.sw-bubble:nth-child(7)  { width:24px; height:24px; left:84%; bottom:-60px; animation-duration:13s; animation-delay:6.5s; }
.sw-bubble:nth-child(8)  { width: 9px; height: 9px; left:94%; bottom:-60px; animation-duration:7s;  animation-delay:1.8s; }

// ═══════════════════════════════════════════════════════════
// 7. AUTH / GUEST LAYOUT  — Split Screen Premium
// ═══════════════════════════════════════════════════════════
body.auth-bg {
    background: var(--sw-gradient-hero);
    min-height:100vh;
    overflow-x:hidden;
    &::before {
        content:'';
        position:fixed; inset:0;
        background:
            radial-gradient(ellipse 600px 600px at 20% 80%, rgba(0,188,212,0.18) 0%, transparent 70%),
            radial-gradient(ellipse 500px 500px at 80% 15%, rgba(30,136,229,0.22) 0%, transparent 70%),
            radial-gradient(ellipse 400px 400px at 50% 50%, rgba(13,71,161,0.15) 0%, transparent 70%);
        pointer-events:none; z-index:0;
    }
}

.auth-bubbles {
    position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;
    .bubble {
        position:absolute; bottom:-60px; border-radius:50%;
        background:rgba(255,255,255,0.08);
        border:1px solid rgba(255,255,255,0.15);
        animation:bubble-float linear infinite;
        &:nth-child(1)  { left:5%;  width:22px; height:22px; animation-duration:7s;  animation-delay:0s;   }
        &:nth-child(2)  { left:15%; width:14px; height:14px; animation-duration:9s;  animation-delay:1s;   }
        &:nth-child(3)  { left:28%; width:32px; height:32px; animation-duration:8s;  animation-delay:2s;   }
        &:nth-child(4)  { left:42%; width:18px; height:18px; animation-duration:10s; animation-delay:0.5s; }
        &:nth-child(5)  { left:58%; width:26px; height:26px; animation-duration:7.5s;animation-delay:1.5s; }
        &:nth-child(6)  { left:72%; width:16px; height:16px; animation-duration:9.5s;animation-delay:3s;   }
        &:nth-child(7)  { left:82%; width:22px; height:22px; animation-duration:8.5s;animation-delay:0.8s; }
        &:nth-child(8)  { left:91%; width:12px; height:12px; animation-duration:6.5s;animation-delay:2.5s; }
        &:nth-child(9)  { left:36%; width:10px; height:10px; animation-duration:11s; animation-delay:4s;   }
        &:nth-child(10) { left:66%; width:28px; height:28px; animation-duration:8s;  animation-delay:5s;   }
    }
}

.auth-wrapper {
    position:relative; z-index:1;
    min-height:100vh;
    display:flex; align-items:center; justify-content:center;
    padding:2rem 1rem;
}

// ── Auth Card — Glass Morphism ────────────────────────────
.auth-card {
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    border-radius:var(--sw-radius-2xl);
    box-shadow:
        0 24px 72px rgba(0,0,0,0.25),
        0 0 0 1px rgba(255,255,255,0.6),
        inset 0 1px 0 rgba(255,255,255,0.8);
    padding:2.5rem;
    width:100%;
    max-width:480px;
    animation:sw-scale-in 0.45s cubic-bezier(0.34,1.56,0.64,1);
    position:relative;
    overflow:hidden;
    &::before {
        content:'';
        position:absolute; top:0; left:0; right:0; height:4px;
        background:var(--sw-gradient);
    }
    .auth-logo {
        text-align:center;
        margin-bottom:1.75rem;
        .auth-logo-icon {
            width:70px; height:70px;
            background:var(--sw-gradient);
            border-radius:20px;
            display:inline-flex; align-items:center; justify-content:center;
            margin:0 auto 0.875rem;
            box-shadow:0 10px 30px rgba(30,136,229,0.45);
            font-size:1.6rem; color:#fff;
            position:relative;
            &::after {
                content:'';
                position:absolute; inset:-5px;
                border-radius:25px;
                background:var(--sw-gradient);
                opacity:0.15; z-index:-1;
                animation:sw-glow-pulse 2.5s ease-in-out infinite;
            }
        }
        .brand-name {
            font-size:1.8rem; font-weight:800;
            color:var(--sw-dark); letter-spacing:-0.5px;
            span { color:var(--sw-primary); }
        }
        .brand-tagline { font-size:0.82rem; color:var(--sw-gray-400); margin-top:0.2rem; }
    }
    .auth-title {
        font-size:1.2rem; font-weight:700;
        color:var(--sw-dark); margin-bottom:0.2rem;
    }
    .auth-subtitle { font-size:0.825rem; color:var(--sw-gray-400); margin-bottom:1.5rem; }
}

// ═══════════════════════════════════════════════════════════
// 8. PREMIUM SIDEBAR ADMIN
// ═══════════════════════════════════════════════════════════
.sidebar {
    width:272px; height:100vh;
    background:linear-gradient(180deg, #0D1B2A 0%, #1A2E45 60%, #0D2137 100%);
    position:fixed; top:0; left:0; z-index:1000;
    display:flex; flex-direction:column;
    transition:var(--sw-transition);
    box-shadow:4px 0 30px rgba(0,0,0,0.25);
    overflow:hidden;
    &::before {
        content:'';
        position:absolute; top:0; left:0; right:0; height:3px;
        background:var(--sw-gradient);
    }
    &::after {
        content:'';
        position:absolute; bottom:0; left:-50%; width:200%; height:200px;
        background:radial-gradient(ellipse at 50% 100%, rgba(30,136,229,0.12) 0%, transparent 70%);
        pointer-events:none;
    }
}

.sidebar-brand {
    padding:1.5rem 1.5rem 1.25rem;
    display:flex; align-items:center; gap:0.875rem;
    border-bottom:1px solid rgba(255,255,255,0.07);
    position:relative; z-index:1;
    .sidebar-logo-wrap {
        width:46px; height:46px;
        background:var(--sw-gradient);
        border-radius:14px;
        display:flex; align-items:center; justify-content:center;
        font-size:1.15rem; color:#fff; flex-shrink:0;
        box-shadow:0 6px 20px rgba(30,136,229,0.45);
    }
    .sidebar-brand-text {
        font-weight:800; font-size:1.3rem; color:#fff; letter-spacing:-0.3px;
        span { color:#64B5F6; }
        .sidebar-brand-sub {
            display:block; font-size:0.63rem; font-weight:500;
            color:rgba(255,255,255,0.4); letter-spacing:0.1em; text-transform:uppercase;
            margin-top:1px;
        }
    }
}

.sidebar-menu {
    flex:1; padding:0.875rem 0;
    overflow-y:auto;
    /* Sidebar scroll fix: min-height:0 agar flex child bisa shrink dan scroll bekerja */
    min-height:0;
    position:relative; z-index:1;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.15) transparent;
    &::-webkit-scrollbar { width:4px; }
    &::-webkit-scrollbar-track { background:transparent; }
    &::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.18); border-radius:4px; &:hover { background:rgba(255,255,255,0.3); } }
}

.sidebar-heading {
    font-size:0.6rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.14em; color:rgba(255,255,255,0.3);
    padding:0.875rem 1.5rem 0.3rem;
}

.sidebar-item {
    display:flex; align-items:center; gap:0.875rem;
    padding:0.65rem 1.25rem; color:rgba(255,255,255,0.6);
    font-weight:500; font-size:0.875rem;
    text-decoration:none; transition:var(--sw-transition-fast);
    position:relative; margin:0.1rem 0.875rem;
    border-radius:0.625rem; cursor:pointer; border:none;
    .sidebar-icon {
        width:34px; height:34px; border-radius:10px;
        background:rgba(255,255,255,0.07);
        display:flex; align-items:center; justify-content:center;
        font-size:0.88rem; flex-shrink:0;
        transition:var(--sw-transition-fast);
    }
    &:hover {
        color:#fff; background:rgba(255,255,255,0.09);
        transform:translateX(3px);
        .sidebar-icon { background:rgba(30,136,229,0.35); color:#64B5F6; }
    }
    &.active {
        color:#fff; background:rgba(30,136,229,0.2); font-weight:600;
        .sidebar-icon { background:var(--sw-primary); box-shadow:0 4px 14px rgba(30,136,229,0.5); color:#fff; }
        &::before {
            content:''; position:absolute; left:-0.875rem; top:50%;
            transform:translateY(-50%); width:4px; height:22px;
            background:linear-gradient(180deg,#64B5F6,#1E88E5);
            border-radius:0 3px 3px 0;
        }
    }
}

.sidebar-divider { height:1px; background:rgba(255,255,255,0.07); margin:0.5rem 1.5rem; }

.sidebar-footer {
    padding:1rem 1.5rem; border-top:1px solid rgba(255,255,255,0.07);
    font-size:0.72rem; color:rgba(255,255,255,0.3); text-align:center; position:relative; z-index:1;
}

// ═══════════════════════════════════════════════════════════
// 9. MAIN CONTENT + TOPBAR ADMIN
// ═══════════════════════════════════════════════════════════
.main-content {
    margin-left:272px; min-height:100vh;
    transition:var(--sw-transition); background:var(--sw-bg);
    @media (max-width:991.98px) { margin-left:0 !important; }
}

.topbar {
    background:rgba(255,255,255,0.9);
    backdrop-filter:blur(16px) saturate(180%);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(30,136,229,0.1);
    padding:0 1.5rem; height:68px;
    display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:900;
    box-shadow:0 2px 16px rgba(30,136,229,0.08);
    .topbar-title { font-weight:700; font-size:1.05rem; color:var(--sw-dark); line-height:1.2; }
    .topbar-subtitle { font-size:0.72rem; color:var(--sw-gray-400); margin-top:1px; }
    .topbar-actions { display:flex; align-items:center; gap:0.625rem; }
    .topbar-btn {
        width:40px; height:40px; border-radius:12px;
        border:1.5px solid var(--sw-gray-200);
        background:var(--sw-white); display:flex; align-items:center; justify-content:center;
        color:var(--sw-gray-500); cursor:pointer; transition:var(--sw-transition-fast);
        font-size:0.9rem; text-decoration:none;
        &:hover { background:var(--sw-primary-soft); color:var(--sw-primary); border-color:var(--sw-primary-light); }
    }
    .topbar-user {
        display:flex; align-items:center; gap:0.6rem;
        padding:0.4rem 0.75rem 0.4rem 0.4rem;
        border-radius:12px; cursor:pointer; transition:var(--sw-transition-fast);
        border:1.5px solid var(--sw-gray-200); background:var(--sw-white);
        &:hover { background:var(--sw-primary-soft); border-color:var(--sw-primary-light); }
        .topbar-avatar {
            width:36px; height:36px; border-radius:10px;
            background:var(--sw-gradient);
            display:flex; align-items:center; justify-content:center;
            color:#fff; font-weight:700; font-size:0.85rem;
        }
        .topbar-user-name { font-size:0.825rem; font-weight:600; color:var(--sw-dark); line-height:1.2; }
        .topbar-user-role { font-size:0.68rem; color:var(--sw-gray-400); }
    }
}

// ═══════════════════════════════════════════════════════════
// 10. PREMIUM NAVBAR CUSTOMER
// ═══════════════════════════════════════════════════════════
.navbar-sparkwash {
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(20px) saturate(200%);
    -webkit-backdrop-filter:blur(20px);
    box-shadow:0 2px 24px rgba(30,136,229,0.1);
    padding:0; border-bottom:1px solid rgba(30,136,229,0.08);
    position:sticky; top:0; z-index:900;
    .navbar-brand {
        font-weight:800; font-size:1.4rem; color:var(--sw-dark);
        letter-spacing:-0.5px; display:flex; align-items:center; gap:0.625rem; padding:0.75rem 0;
        .brand-icon {
            width:38px; height:38px; background:var(--sw-gradient);
            border-radius:11px; display:flex; align-items:center; justify-content:center;
            color:#fff; font-size:0.95rem;
            box-shadow:0 4px 14px rgba(30,136,229,0.4);
        }
        span { color:var(--sw-primary); }
        &:hover { opacity:0.9; }
    }
    .nav-link {
        color:var(--sw-gray-600); font-weight:500; font-size:0.875rem;
        padding:0.5rem 0.9rem; border-radius:0.625rem;
        transition:var(--sw-transition-fast);
        display:flex; align-items:center; gap:0.4rem;
        i { font-size:0.8rem; }
        &:hover, &.active { color:var(--sw-primary); background:var(--sw-primary-soft); }
        &.active { font-weight:600; }
    }
    .navbar-nav-pills { display:flex; align-items:center; gap:0.2rem; }
    .bubble-strip {
        position:absolute; bottom:0; left:0; right:0; height:2px;
        background:linear-gradient(90deg,transparent,rgba(30,136,229,0.4) 20%,rgba(30,136,229,0.7) 50%,rgba(30,136,229,0.4) 80%,transparent);
        pointer-events:none;
    }
}

// ── Customer Navbar Profile Pill ──────────────────────────────
.sw-profile-btn {
    display:inline-flex; align-items:center; gap:0.5rem;
    padding:0.3rem 0.75rem 0.3rem 0.3rem;
    background:var(--sw-white);
    border:1.5px solid var(--sw-gray-200);
    border-radius:50rem;
    font-size:0.825rem; font-weight:600;
    color:var(--sw-dark);
    cursor:pointer;
    transition:var(--sw-transition-fast);
    outline:none;
    box-shadow:none;
    // Remove Bootstrap default btn styles
    &:focus, &:focus-visible, &:active { outline:none; box-shadow:none; border-color:var(--sw-primary-light); }
    &:hover { border-color:var(--sw-primary-light); background:var(--sw-primary-soft); }
    // Remove dropdown-toggle caret from Bootstrap
    &.dropdown-toggle::after { display:none; }
}
.sw-profile-avatar {
    width:32px; height:32px;
    background:var(--sw-gradient);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:700; font-size:0.8rem; flex-shrink:0;
    box-shadow:0 3px 10px rgba(30,136,229,0.35);
}
.sw-profile-name {
    color:var(--sw-dark);
    max-width:120px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-weight:600;
}

// ═══════════════════════════════════════════════════════════
// 11. CARDS — Premium System
// ═══════════════════════════════════════════════════════════
.card {
    background:var(--sw-white);
    border:none; border-radius:var(--sw-radius-lg);
    box-shadow:var(--sw-shadow);
    transition:var(--sw-transition);
    overflow:hidden;
}

.card-hover {
    cursor:pointer;
    &:hover {
        box-shadow:var(--sw-shadow-md);
        transform:translateY(-4px);
    }
}

// Stat card
.stat-card {
    background:var(--sw-white); border-radius:var(--sw-radius-lg);
    padding:1.5rem; box-shadow:var(--sw-shadow);
    border-top:4px solid transparent; position:relative; overflow:hidden;
    transition:var(--sw-transition);
    &::before {
        content:''; position:absolute; top:0; right:0;
        width:90px; height:90px; border-radius:0 0 0 90px;
        background:var(--stat-color,var(--sw-primary)); opacity:0.07;
    }
    &:hover { box-shadow:var(--sw-shadow-md); transform:translateY(-3px); }
    .stat-icon {
        width:52px; height:52px; border-radius:14px;
        display:flex; align-items:center; justify-content:center;
        font-size:1.25rem; margin-bottom:1rem; flex-shrink:0;
    }
    .stat-value {
        font-size:2rem; font-weight:800; line-height:1.1;
        color:var(--sw-dark); letter-spacing:-0.5px;
    }
    .stat-label {
        font-size:0.72rem; color:var(--sw-gray-400); font-weight:600;
        text-transform:uppercase; letter-spacing:0.08em; margin-top:0.3rem;
    }
    .stat-change {
        font-size:0.75rem; font-weight:600; margin-top:0.5rem;
        display:flex; align-items:center; gap:0.25rem;
        &.up   { color:#10B981; }
        &.down { color:#EF4444; }
    }
    .stat-trend {
        position:absolute; bottom:1rem; right:1rem;
        font-size:0.72rem; font-weight:600; padding:0.2em 0.6em;
        border-radius:50px;
    }
}

// Hero gradient stat card
.stat-card-hero {
    background:var(--sw-gradient); border-radius:var(--sw-radius-lg);
    padding:1.5rem; color:#fff; position:relative; overflow:hidden;
    box-shadow:0 8px 32px rgba(30,136,229,0.35);
    &::before { content:''; position:absolute; top:-30px; right:-30px; width:130px; height:130px; border-radius:50%; background:rgba(255,255,255,0.12); }
    &::after  { content:''; position:absolute; bottom:-40px; left:10px; width:90px; height:90px; border-radius:50%; background:rgba(255,255,255,0.07); }
    .stat-icon { background:rgba(255,255,255,0.2); color:#fff; }
    .stat-value, .stat-label { color:rgba(255,255,255,0.9); }
}

// Glass card
.card-glass {
    background:var(--sw-glass);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--sw-glass-border);
    border-radius:var(--sw-radius-lg);
    box-shadow:var(--sw-shadow);
}

// Feature card (landing)
.feature-card {
    background:var(--sw-white); border-radius:var(--sw-radius-xl);
    padding:2rem 1.75rem; text-align:center;
    box-shadow:var(--sw-shadow); transition:var(--sw-transition);
    border:1px solid rgba(30,136,229,0.08);
    &:hover {
        box-shadow:var(--sw-shadow-lg); transform:translateY(-8px);
        border-color:rgba(30,136,229,0.2);
        .feature-icon { transform:scale(1.1) rotate(-5deg); box-shadow:0 12px 32px rgba(30,136,229,0.4); }
    }
    .feature-icon {
        width:72px; height:72px; border-radius:20px;
        background:var(--sw-gradient);
        display:flex; align-items:center; justify-content:center;
        font-size:1.6rem; color:#fff; margin:0 auto 1.25rem;
        box-shadow:0 8px 24px rgba(30,136,229,0.3);
        transition:var(--sw-transition);
    }
}

// ═══════════════════════════════════════════════════════════
// 12. BUTTONS — Premium Rounded
// ═══════════════════════════════════════════════════════════
.btn {
    font-weight:600; border-radius:50rem;
    transition:var(--sw-transition); position:relative; overflow:hidden;
    letter-spacing:0.01em;
    &::after {
        content:''; position:absolute; inset:0;
        background:rgba(255,255,255,0);
        transition:background 0.2s ease;
    }
    &:hover::after { background:rgba(255,255,255,0.1); }
    &:active { transform:scale(0.97); }
}

.btn-primary {
    background:var(--sw-gradient); border:none; color:#fff;
    box-shadow:0 4px 15px rgba(30,136,229,0.35);
    &:hover, &:focus {
        background:linear-gradient(135deg,#1565C0 0%,#0D47A1 100%);
        color:#fff; box-shadow:0 8px 24px rgba(30,136,229,0.5);
        transform:translateY(-2px);
    }
    &:disabled, &.disabled { background:#B0BEC5; box-shadow:none; transform:none; }
}

.btn-outline-primary {
    border:2px solid var(--sw-primary); color:var(--sw-primary); font-weight:600;
    &:hover { background:var(--sw-gradient); border-color:transparent; color:#fff; box-shadow:0 4px 15px rgba(30,136,229,0.35); }
}

.btn-white {
    background:#fff; color:var(--sw-primary); border:none; font-weight:700;
    box-shadow:0 4px 20px rgba(0,0,0,0.15);
    &:hover { background:var(--sw-primary-soft); color:var(--sw-primary-dark); transform:translateY(-2px); }
}

.btn-ghost {
    background:rgba(255,255,255,0.12); color:#fff; border:1.5px solid rgba(255,255,255,0.3);
    backdrop-filter:blur(8px);
    &:hover { background:rgba(255,255,255,0.22); color:#fff; border-color:rgba(255,255,255,0.5); }
}

.btn-light-primary {
    background:var(--sw-primary-soft); color:var(--sw-primary); border:none; font-weight:600;
    &:hover { background:var(--sw-primary-light); color:var(--sw-primary-dark); }
}

// Loading state
.btn-loading {
    pointer-events:none;
    .btn-text { opacity:0; }
    &::before {
        content:''; position:absolute;
        width:18px; height:18px; top:50%; left:50%;
        transform:translate(-50%,-50%);
        border:2px solid rgba(255,255,255,0.4);
        border-top-color:#fff; border-radius:50%;
        animation:sw-spin 0.7s linear infinite;
    }
}

// ═══════════════════════════════════════════════════════════
// 13. FORMS — Modern Floating Labels
// ═══════════════════════════════════════════════════════════
.form-control, .form-select {
    border:1.5px solid var(--sw-gray-200); border-radius:0.75rem;
    padding:0.625rem 1rem; font-size:0.9rem;
    transition:var(--sw-transition-fast);
    background:var(--sw-white); color:var(--sw-dark);
    &:focus {
        border-color:var(--sw-primary);
        box-shadow:0 0 0 3px rgba(30,136,229,0.14);
        background:var(--sw-white);
    }
    &::placeholder { color:var(--sw-gray-400); }
    &.is-invalid { border-color:#EF4444; box-shadow:0 0 0 3px rgba(239,68,68,0.1); }
}

.form-label {
    font-weight:600; font-size:0.82rem; color:var(--sw-gray-600); margin-bottom:0.4rem;
}

.input-group {
    .form-control { border-right:none; }
    .input-group-text {
        background:var(--sw-gray-50); border:1.5px solid var(--sw-gray-200);
        border-left:none; border-radius:0 0.75rem 0.75rem 0; color:var(--sw-gray-400);
        cursor:pointer; transition:var(--sw-transition-fast);
        &:hover { color:var(--sw-primary); background:var(--sw-primary-soft); }
    }
    .form-control:focus + .input-group-text { border-color:var(--sw-primary); }
}

.invalid-feedback { font-size:0.78rem; font-weight:600; color:#EF4444; margin-top:0.3rem; }

.form-check-input:checked {
    background-color:var(--sw-primary); border-color:var(--sw-primary);
    box-shadow:0 0 0 2px rgba(30,136,229,0.2);
}

// ═══════════════════════════════════════════════════════════
// 14. TABLES — Modern Sticky Header
// ═══════════════════════════════════════════════════════════
.table-sw, .table-sparkwash {
    font-size:0.875rem; width:100%;
    border-collapse:separate; border-spacing:0;
    thead th {
        background:var(--sw-gray-50); color:var(--sw-primary-dark);
        font-weight:700; font-size:0.72rem; text-transform:uppercase;
        letter-spacing:0.07em; padding:0.875rem 1.1rem; white-space:nowrap;
        border-bottom:2px solid rgba(30,136,229,0.15);
        position:sticky; top:0; z-index:1;
    }
    tbody td {
        padding:0.8rem 1.1rem; vertical-align:middle;
        border-bottom:1px solid var(--sw-gray-100); color:var(--sw-text);
    }
    tbody tr {
        transition:var(--sw-transition-fast);
        &:hover { background:var(--sw-primary-soft); }
        &:last-child td { border-bottom:none; }
    }
}

// ═══════════════════════════════════════════════════════════
// 15. STATUS BADGES
// ═══════════════════════════════════════════════════════════
.badge-status {
    display:inline-flex; align-items:center; gap:0.25rem;
    padding:0.28em 0.8em; border-radius:50px;
    font-size:0.72rem; font-weight:700; letter-spacing:0.02em; white-space:nowrap;
    &::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:0.7; flex-shrink:0; }
    &.status-pending    { background:#FEF3C7; color:#B45309; border:1px solid #FDE68A; }
    &.status-confirmed  { background:#DBEAFE; color:#1D4ED8; border:1px solid #BFDBFE; }
    &.status-checkin    { background:#EDE9FE; color:#6D28D9; border:1px solid #DDD6FE; }
    &.status-in-process { background:#D1FAE5; color:#065F46; border:1px solid #A7F3D0; }
    &.status-done       { background:#CCFBF1; color:#115E59; border:1px solid #99F6E4; }
    &.status-late       { background:#FFEDD5; color:#9A3412; border:1px solid #FED7AA; }
    &.status-void       { background:#FEE2E2; color:#991B1B; border:1px solid #FECACA; }
    &.status-cancelled  { background:#F1F5F9; color:#475569; border:1px solid #CBD5E1; }
    &.status-paid       { background:#D1FAE5; color:#065F46; border:1px solid #A7F3D0; }
    &.status-unpaid     { background:#FEF3C7; color:#B45309; border:1px solid #FDE68A; }
    &.status-expired    { background:#F1F5F9; color:#475569; border:1px solid #CBD5E1; }
}

// ═══════════════════════════════════════════════════════════
// 16. PAGE HEADER
// ═══════════════════════════════════════════════════════════
.page-header {
    background:var(--sw-white); padding:1.25rem 1.5rem;
    border-radius:var(--sw-radius-lg); box-shadow:var(--sw-shadow-xs);
    margin-bottom:1.5rem;
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:0.75rem;
    border-left:4px solid var(--sw-primary);
    animation:sw-fade-up 0.35s ease;
    .page-title {
        font-size:1.1rem; font-weight:700; color:var(--sw-dark); margin:0;
        i { color:var(--sw-primary); }
    }
    .breadcrumb { margin:0; font-size:0.78rem; background:none; padding:0; }
}

// ═══════════════════════════════════════════════════════════
// 17. QUEUE NUMBER + SPECIAL ELEMENTS
// ═══════════════════════════════════════════════════════════
.queue-number {
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:12px;
    background:var(--sw-gradient); color:#fff;
    font-weight:800; font-size:0.875rem;
    box-shadow:0 4px 14px rgba(30,136,229,0.4); flex-shrink:0;
}

// ═══════════════════════════════════════════════════════════
// 18. EMPTY STATE — Illustrated
// ═══════════════════════════════════════════════════════════
.sw-empty {
    text-align:center; padding:3.5rem 2rem; color:var(--sw-gray-400);
    .sw-empty-icon {
        font-size:3rem; color:var(--sw-primary-light);
        margin-bottom:1rem; display:block;
        animation:sw-bounce-subtle 3s ease-in-out infinite;
    }
    .sw-empty-title { font-weight:700; color:var(--sw-gray-500); margin-bottom:0.5rem; font-size:1rem; }
    .sw-empty-text  { font-size:0.875rem; max-width:280px; margin:0 auto; line-height:1.6; }
}

// ═══════════════════════════════════════════════════════════
// 19. SKELETON LOADING
// ═══════════════════════════════════════════════════════════
@keyframes skeleton-shimmer {
    0%   { background-position:-400px 0; }
    100% { background-position:400px 0; }
}
.skeleton {
    background:linear-gradient(90deg,var(--sw-gray-100) 25%,var(--sw-gray-50) 50%,var(--sw-gray-100) 75%);
    background-size:800px 100%;
    animation:skeleton-shimmer 1.5s infinite linear;
    border-radius:0.5rem;
}
.skeleton-text  { height:14px; border-radius:4px; margin-bottom:8px; }
.skeleton-title { height:22px; border-radius:6px; margin-bottom:12px; }
.skeleton-card  { height:120px; border-radius:var(--sw-radius-lg); }

// ═══════════════════════════════════════════════════════════
// 20. SPINNER / LOADER
// ═══════════════════════════════════════════════════════════
.sw-spinner {
    display:inline-block; width:16px; height:16px;
    border:2px solid var(--sw-primary-light); border-top-color:var(--sw-primary);
    border-radius:50%; animation:sw-spin 0.7s linear infinite; vertical-align:middle;
}
.sw-spinner-lg { width:32px; height:32px; border-width:3px; }

// ═══════════════════════════════════════════════════════════
// 21. PAGINATION
// ═══════════════════════════════════════════════════════════
.pagination {
    gap:0.25rem;
    .page-link {
        border-radius:0.625rem !important; border:1.5px solid var(--sw-gray-200);
        color:var(--sw-primary); font-weight:600; font-size:0.85rem;
        padding:0.4rem 0.8rem;
        &:hover { background:var(--sw-primary-soft); border-color:var(--sw-primary-light); }
    }
    .page-item.active .page-link {
        background:var(--sw-gradient); border-color:transparent;
        box-shadow:0 4px 12px rgba(30,136,229,0.3);
    }
    .page-item.disabled .page-link { opacity:0.4; }
}

// ═══════════════════════════════════════════════════════════
// 22. DROPDOWN
// ═══════════════════════════════════════════════════════════
.dropdown-menu {
    border:1px solid var(--sw-gray-200); border-radius:var(--sw-radius);
    box-shadow:var(--sw-shadow-md); padding:0.5rem; font-size:0.875rem;
    animation:sw-scale-in 0.18s ease;
}
.dropdown-item {
    border-radius:0.5rem; padding:0.5rem 0.75rem;
    color:var(--sw-gray-600); font-weight:500; transition:var(--sw-transition-fast);
    &:hover { background:var(--sw-primary-soft); color:var(--sw-primary); }
    i { width:16px; }
}

// ═══════════════════════════════════════════════════════════
// 23. LANDING PAGE SPECIFIC
// ═══════════════════════════════════════════════════════════
.landing-hero {
    background:var(--sw-gradient-hero);
    min-height:100vh; position:relative; overflow:hidden;
    display:flex; align-items:center;
    &::before {
        content:''; position:absolute; inset:0;
        background:
            radial-gradient(ellipse 700px 500px at 10% 90%,  rgba(0,188,212,0.15) 0%,transparent 60%),
            radial-gradient(ellipse 600px 600px at 90% 10%,  rgba(30,136,229,0.20) 0%,transparent 60%),
            radial-gradient(ellipse 400px 300px at 50% 50%,  rgba(100,181,246,0.08) 0%,transparent 60%);
        pointer-events:none;
    }
}

.hero-title {
    font-size:clamp(2rem,5vw,3.5rem);
    font-weight:900; color:#fff; line-height:1.15; letter-spacing:-1px;
    span { color:#64B5F6; }
}

.hero-subtitle { font-size:1.1rem; color:rgba(255,255,255,0.8); line-height:1.7; max-width:540px; }

.hero-car-svg {
    animation:sw-bounce-subtle 4s ease-in-out infinite;
    filter:drop-shadow(0 20px 40px rgba(0,0,0,0.3));
}

// Section
.section-badge {
    display:inline-flex; align-items:center; gap:0.5rem;
    background:var(--sw-primary-soft); color:var(--sw-primary);
    border:1px solid rgba(30,136,229,0.25);
    padding:0.4em 1em; border-radius:50rem;
    font-size:0.78rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
    margin-bottom:1rem;
}

.section-title {
    font-size:clamp(1.6rem,4vw,2.4rem); font-weight:800;
    color:var(--sw-dark); letter-spacing:-0.5px; line-height:1.2;
    span { color:var(--sw-primary); }
}

.section-subtitle { font-size:1rem; color:var(--sw-gray-500); line-height:1.7; max-width:560px; margin:0 auto; }

// Stats strip
.stat-strip {
    background:var(--sw-gradient); border-radius:var(--sw-radius-xl);
    padding:2.5rem; color:#fff;
    box-shadow:0 12px 40px rgba(30,136,229,0.3);
    position:relative; overflow:hidden;
    &::before { content:''; position:absolute; top:-50px; right:-50px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,0.07); }
    .strip-number { font-size:2.5rem; font-weight:900; color:#fff; line-height:1; }
    .strip-label  { font-size:0.82rem; color:rgba(255,255,255,0.75); font-weight:600; margin-top:0.25rem; }
}

// Steps
.step-item {
    display:flex; gap:1.25rem; align-items:flex-start;
    .step-number {
        width:48px; height:48px; border-radius:14px; flex-shrink:0;
        background:var(--sw-gradient); color:#fff;
        display:flex; align-items:center; justify-content:center;
        font-weight:800; font-size:1.1rem;
        box-shadow:0 6px 18px rgba(30,136,229,0.35);
    }
    .step-content h5 { font-weight:700; color:var(--sw-dark); margin-bottom:0.25rem; }
    .step-content p  { color:var(--sw-gray-500); font-size:0.9rem; margin:0; }
}

// Testimonial
.testimonial-card {
    background:var(--sw-white); border-radius:var(--sw-radius-xl); padding:2rem;
    box-shadow:var(--sw-shadow); border:1px solid rgba(30,136,229,0.08);
    transition:var(--sw-transition); position:relative;
    &::before {
        content:'\201C'; position:absolute; top:1rem; right:1.5rem;
        font-size:4rem; color:var(--sw-primary-light); font-family:Georgia,serif; line-height:1;
    }
    &:hover { box-shadow:var(--sw-shadow-md); transform:translateY(-4px); }
    .testi-stars { color:#F59E0B; font-size:0.85rem; letter-spacing:1px; }
    .testi-avatar {
        width:48px; height:48px; border-radius:14px;
        background:var(--sw-gradient); color:#fff;
        display:flex; align-items:center; justify-content:center;
        font-weight:800; font-size:1.1rem;
        box-shadow:0 4px 12px rgba(30,136,229,0.3);
    }
}

// FAQ
.faq-item {
    background:var(--sw-white); border-radius:var(--sw-radius-lg); overflow:hidden;
    box-shadow:var(--sw-shadow-xs); margin-bottom:0.75rem;
    border:1px solid rgba(30,136,229,0.08);
    .faq-btn {
        width:100%; text-align:left; padding:1.1rem 1.5rem;
        background:transparent; border:none; cursor:pointer;
        font-weight:600; color:var(--sw-dark); font-size:0.95rem;
        display:flex; align-items:center; justify-content:space-between;
        transition:var(--sw-transition-fast);
        &:hover { color:var(--sw-primary); }
        &[aria-expanded="true"] {
            color:var(--sw-primary);
            .faq-icon { transform:rotate(45deg); background:var(--sw-primary-soft); color:var(--sw-primary); }
        }
        .faq-icon {
            width:28px; height:28px; border-radius:8px;
            background:var(--sw-gray-100); color:var(--sw-gray-500);
            display:flex; align-items:center; justify-content:center;
            font-size:0.75rem; transition:var(--sw-transition); flex-shrink:0;
        }
    }
    .faq-body { padding:0 1.5rem 1.25rem; color:var(--sw-gray-500); font-size:0.9rem; line-height:1.7; }
}

// ═══════════════════════════════════════════════════════════
// 24. CUSTOMER DASHBOARD SPECIFIC
// ═══════════════════════════════════════════════════════════
.welcome-banner {
    background:var(--sw-gradient); border-radius:var(--sw-radius-xl);
    padding:1.75rem 2rem; color:#fff; position:relative; overflow:hidden;
    box-shadow:0 8px 30px rgba(30,136,229,0.35); margin-bottom:1.5rem;
    animation:sw-fade-up 0.4s ease;
    &::before { content:''; position:absolute; top:-40px; right:-40px; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,0.09); }
    &::after  { content:''; position:absolute; bottom:-30px; right:100px; width:100px; height:100px; border-radius:50%; background:rgba(255,255,255,0.06); }
}

.quick-action-card {
    background:var(--sw-white); border-radius:var(--sw-radius-lg); padding:1.25rem;
    text-align:center; box-shadow:var(--sw-shadow); cursor:pointer;
    transition:var(--sw-transition); border:1.5px solid transparent; text-decoration:none;
    display:block;
    &:hover {
        border-color:var(--sw-primary-light); background:var(--sw-primary-soft);
        transform:translateY(-4px); box-shadow:var(--sw-shadow-md);
        .qa-icon { transform:scale(1.15); }
    }
    .qa-icon {
        width:52px; height:52px; border-radius:14px;
        background:var(--sw-gradient);
        display:flex; align-items:center; justify-content:center;
        font-size:1.2rem; color:#fff; margin:0 auto 0.75rem;
        box-shadow:0 6px 16px rgba(30,136,229,0.35);
        transition:var(--sw-transition);
    }
    .qa-label { font-size:0.8rem; font-weight:700; color:var(--sw-dark); }
    .qa-desc  { font-size:0.72rem; color:var(--sw-gray-400); margin-top:0.15rem; }
}

.promo-banner {
    background:linear-gradient(135deg,#FF6B6B,#FF8E53);
    border-radius:var(--sw-radius-xl); padding:1.5rem 2rem;
    color:#fff; position:relative; overflow:hidden;
    box-shadow:0 8px 24px rgba(255,107,107,0.35);
    &::before { content:''; position:absolute; top:-20px; right:-20px; width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,0.1); }
}

.booking-progress-card {
    background:var(--sw-white); border-radius:var(--sw-radius-lg); overflow:hidden;
    box-shadow:var(--sw-shadow); border-left:4px solid var(--sw-primary);
    transition:var(--sw-transition);
    &:hover { box-shadow:var(--sw-shadow-md); transform:translateY(-2px); }
}

// ═══════════════════════════════════════════════════════════
// 25. UTILITIES & HELPERS
// ═══════════════════════════════════════════════════════════
.text-primary      { color:var(--sw-primary) !important; }
.text-primary-dark { color:var(--sw-primary-dark) !important; }
.text-muted        { color:var(--sw-gray-400) !important; }
.bg-primary-soft   { background-color:var(--sw-primary-soft) !important; }
.bg-sw-light       { background-color:var(--sw-bg) !important; }
.bg-sw-white       { background-color:var(--sw-white) !important; }
.shadow-sw         { box-shadow:var(--sw-shadow) !important; }
.shadow-sw-md      { box-shadow:var(--sw-shadow-md) !important; }
.rounded-sw        { border-radius:var(--sw-radius) !important; }
.rounded-sw-lg     { border-radius:var(--sw-radius-lg) !important; }
.rounded-sw-xl     { border-radius:var(--sw-radius-xl) !important; }
.fade-up           { animation:sw-fade-up 0.4s ease both; }
.fade-in           { animation:sw-fade-in 0.4s ease both; }
.slide-left        { animation:sw-slide-left 0.4s ease both; }

// Delay utilities
.delay-100 { animation-delay:0.1s; }
.delay-200 { animation-delay:0.2s; }
.delay-300 { animation-delay:0.3s; }
.delay-400 { animation-delay:0.4s; }
.delay-500 { animation-delay:0.5s; }

.notif-badge {
    position:absolute; top:-4px; right:-4px;
    width:18px; height:18px; background:#EF4444; color:#fff;
    border-radius:50%; font-size:0.6rem; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    border:2px solid #fff; box-shadow:0 2px 6px rgba(239,68,68,0.4);
}

// Landing footer
.landing-footer {
    background:var(--sw-dark); color:rgba(255,255,255,0.75);
    .footer-brand { font-weight:800; font-size:1.4rem; color:#fff; }
    .footer-link  { color:rgba(255,255,255,0.55); text-decoration:none; font-size:0.875rem; transition:var(--sw-transition-fast); &:hover { color:#fff; } }
    .footer-divider { border-color:rgba(255,255,255,0.1); }
}

.sw-footer {
    background:var(--sw-white); border-top:1px solid var(--sw-gray-200);
    padding:1rem 1.5rem; font-size:0.78rem; color:var(--sw-gray-400); text-align:center;
}

// ═══════════════════════════════════════════════════════════
// 26. RESPONSIVE
// ═══════════════════════════════════════════════════════════
@media (max-width:991.98px) {
    .sidebar { transform:translateX(-100%); &.sidebar-open { transform:translateX(0); } }
    .main-content { margin-left:0 !important; }
    .auth-card { padding:2rem 1.5rem; }
    .hero-title { font-size:2.2rem; }
}
@media (max-width:767.98px) {
    .stat-card .stat-value { font-size:1.5rem; }
    .section-title { font-size:1.7rem; }
    .welcome-banner { padding:1.25rem 1.25rem; }
}
@media (max-width:575.98px) {
    .auth-card { padding:1.75rem 1.25rem; border-radius:var(--sw-radius-xl); }
}

// ═══════════════════════════════════════════════════════════
// 27. BOOKING-SPECIFIC FORM ELEMENTS
// ═══════════════════════════════════════════════════════════
.sw-service-card {
    border:2px solid var(--sw-gray-200); border-radius:var(--sw-radius-lg);
    cursor:pointer; transition:var(--sw-transition); background:var(--sw-white); padding:1.1rem;
    &:hover { border-color:var(--sw-primary-light); box-shadow:0 4px 20px rgba(30,136,229,0.12); transform:translateY(-2px); }
}
.btn-check:checked + .sw-service-card {
    border-color:var(--sw-primary); background:var(--sw-primary-soft);
    box-shadow:0 4px 20px rgba(30,136,229,0.2);
}
.sw-detailer-card {
    border:2px solid var(--sw-gray-200); border-radius:var(--sw-radius-lg);
    cursor:pointer; transition:var(--sw-transition); background:var(--sw-white);
    &:hover { border-color:var(--sw-primary-light); box-shadow:0 3px 12px rgba(30,136,229,0.12); }
}
.btn-check:checked + .sw-detailer-card {
    border-color:var(--sw-primary); background:var(--sw-primary-soft);
    box-shadow:0 4px 16px rgba(30,136,229,0.2);
}
.sw-step-badge {
    width:28px; height:28px; border-radius:50%; background:var(--sw-gradient);
    color:#fff; display:inline-flex; align-items:center; justify-content:center;
    font-size:0.75rem; font-weight:700; flex-shrink:0;
    box-shadow:0 4px 10px rgba(30,136,229,0.3);
}
.sw-summary-card {
    background:var(--sw-white); border-radius:var(--sw-radius-lg);
    box-shadow:var(--sw-shadow-md); overflow:hidden;
    border:1px solid rgba(30,136,229,0.1); position:sticky; top:80px;
}
.sw-summary-header { background:var(--sw-gradient); color:#fff; padding:1rem 1.25rem; font-weight:600; font-size:0.9rem; }
.sw-summary-row { display:flex; justify-content:space-between; align-items:center; padding:0.5rem 0; border-bottom:1px solid var(--sw-gray-100); font-size:0.85rem; }
.sw-summary-total { display:flex; justify-content:space-between; align-items:center; padding:0.875rem 1.25rem; background:var(--sw-primary-soft); border-top:2px solid var(--sw-primary-light); font-size:0.875rem; font-weight:700; }
.sw-label { font-size:0.85rem; font-weight:600; color:var(--sw-gray-600); margin-bottom:0.35rem; }
.sw-input:focus { border-color:var(--sw-primary); box-shadow:0 0 0 3px rgba(30,136,229,0.14); }
.sw-btn-primary { background:var(--sw-gradient); border:none; color:#fff; font-weight:600; border-radius:50rem; transition:var(--sw-transition); }
.sw-btn-primary:hover:not(:disabled) { background:linear-gradient(135deg,#1565C0,#0D47A1); transform:translateY(-2px); box-shadow:0 6px 20px rgba(30,136,229,0.4); color:#fff; }
.sw-btn-primary:disabled { background:#B0BEC5; cursor:not-allowed; }