/* ══════════════════════════════════════════════════
   ABCA SERVICES — Customer Website CSS
   Ultra-Modern, Premium, Responsive Marketplace Design
   ══════════════════════════════════════════════════ */

/* ── Modern Design System Variables ──────────────── */
:root {
    --primary:          #0366ff;
    --primary-dark:     #0252d1;
    --primary-light:    #eaf2ff;
    --primary-soft:     #cfe2ff;
    --secondary:        #0c182e;
    --secondary-light:  #1e293b;
    --amber:            #f9d90a;
    --amber-dark:       #e0bd00;
    --amber-light:      #fff8cc;
    --success:          #10b981;
    --success-light:    #ecfdf5;
    --danger:           #ef4444;
    --danger-light:     #fef2f2;
    --info:             #0284c7;
    --info-light:       #e0f2fe;
    --text-primary:     #0c182e;
    --text-secondary:   #475569;
    --text-muted:       #94a3b8;
    --border:           #e2e8f0;
    --border-light:     #f1f5f9;
    --bg-light:         #f8fafc;
    --bg-white:         #ffffff;
    --shadow-xs:        0 1px 2px 0 rgba(15, 23, 42, 0.04);
    --shadow-sm:        0 2px 4px -1px rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
    --shadow-md:        0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
    --shadow-lg:        0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
    --shadow-glow:      0 0 25px rgba(3, 102, 255, 0.18);
    --radius-sm:        8px;
    --radius-md:        12px;
    --radius-lg:        18px;
    --radius-xl:        24px;
    --radius-pill:      9999px;
    --font:             'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading:     'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --transition:       all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: var(--font);
    color: var(--text-primary);
    background: #0c182e;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

main#main-content {
    flex: 1 0 auto;
    background: #ffffff;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}
a:hover { color: var(--primary-dark); }
img { max-width: 100%; height: auto; }
.xsmall { font-size: .72rem; }
.tracking-wide { letter-spacing: 0.06em; }

/* ── Utility Typography & Accents ───────────────── */
.text-gradient {
    background: linear-gradient(135deg, #0252d1 0%, #0366ff 50%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.min-vh-60 { min-height: 56vh; }

.section {
    padding: 72px 0;
}

.section-header {
    margin-bottom: 40px;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--primary-soft);
    margin-bottom: 12px;
}

.section-badge-light {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: 12px;
}

.section-title {
    font-size: clamp(1.65rem, 3.5vw, 2.3rem);
    font-weight: 800;
    color: var(--secondary);
    margin-bottom: 10px;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.section-subtitle {
    color: var(--text-secondary);
    font-size: 1.05rem;
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ── Header / Navbar ────────────────────────────── */
.site-header {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    z-index: 1030;
    transition: var(--transition);
}

.navbar {
    padding: 10px 0;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--secondary) !important;
    text-decoration: none;
    flex-shrink: 0;
    letter-spacing: -0.03em;
}

.logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #0c182e 0%, #1e293b 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 11px;
    gap: 3px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.logo-icon .fa-bolt { color: #f9d90a; font-size: 1rem; filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.5)); }
.logo-icon .fa-faucet { color: #f9d90a; font-size: .95rem; filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.5)); }

.logo-text {
    font-family: var(--font-heading);
    font-size: 1.28rem;
    font-weight: 800;
    color: var(--secondary);
    letter-spacing: -0.03em;
}

/* Location Bar */
.location-bar { align-items: center; }

.btn-location {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg-white);
    transition: var(--transition);
    box-shadow: var(--shadow-xs);
}

.btn-location:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

.btn-location-mobile {
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 5px 10px;
    color: var(--text-secondary);
    font-size: .8rem;
    white-space: nowrap;
}

/* Search Pill in Header */
.search-pill {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-xs);
    transition: var(--transition);
}

.search-pill:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(3, 102, 255, 0.12);
}

.search-pill .form-control,
.search-pill .input-group-text {
    border: none;
    background: transparent;
}

.search-pill .form-control:focus {
    box-shadow: none;
}

/* Action Buttons */
.btn-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: #fff;
    transition: var(--transition);
    padding: 0;
    box-shadow: var(--shadow-xs);
}

.btn-icon:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

.btn-icon.btn-cart {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    color: var(--secondary);
    background: #ffffff;
    border: 1.5px solid var(--border);
    position: relative;
    overflow: visible;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition);
}
.btn-icon.btn-cart:hover {
    color: var(--primary);
    background: var(--primary-light);
    border-color: var(--primary);
    transform: translateY(-1px);
}

.cart-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    left: auto !important;
    transform: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ef4444 !important;
    color: #ffffff !important;
    font-size: .64rem !important;
    font-weight: 700 !important;
    min-width: 18px;
    height: 18px;
    line-height: 1;
    padding: 0 4px;
    border-radius: 9999px !important;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
}

.btn-user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: .88rem;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 5px 14px 5px 6px;
    background: #fff;
    box-shadow: var(--shadow-xs);
    transition: var(--transition);
}

.btn-user:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.avatar-xs {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-initial-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0366ff, #0252d1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
}

.avatar-initial-md {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0366ff, #0252d1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

/* Category Nav Bar — modern pill tabs */
.category-nav {
    background: transparent;
    border-top: 1px solid var(--border-light);
    padding: 8px 0;
}

.category-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.category-nav-list::-webkit-scrollbar { display: none; }

.category-nav-list li a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: .86rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    transition: var(--transition);
    white-space: nowrap;
}

.category-nav-list li a i {
    font-size: .88rem;
    color: #94a3b8;
    width: 16px;
    text-align: center;
    transition: var(--transition);
}

.category-nav-list li a .nav-ico-amber,
.category-nav-list li a.nav-ico-amber { color: var(--amber); }
.category-nav-list li a .nav-ico-green { color: var(--success); }

.category-nav-list li a:hover {
    color: var(--primary);
    background: var(--primary-light);
}
.category-nav-list li a:hover i { color: var(--primary); }

.category-nav-list li a.active {
    color: #fff;
    background: var(--secondary);
    border-color: var(--secondary);
    box-shadow: 0 6px 16px -4px rgba(15, 23, 42, 0.35);
}
.category-nav-list li a.active i { color: #fff; }

.category-nav-list li a.nav-support {
    background: var(--success-light);
    color: #047857;
    border-color: rgba(16, 185, 129, 0.25);
}
.category-nav-list li a.nav-support:hover { background: #d1fae5; color: #047857; }
.category-nav-list li a.nav-support.active { background: #047857; color: #fff; border-color: #047857; }

.category-nav-sep {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 6px;
    flex-shrink: 0;
}

/* Mobile hamburger toggle */
.btn-menu-toggle {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #fff;
}
.btn-menu-toggle:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ── Mobile Offcanvas Drawer ── */
.mobile-offcanvas {
    width: 340px !important;
    max-width: 88vw;
    border: 0;
    background: #f8fafc;
    box-shadow: 20px 0 50px rgba(15, 23, 42, 0.25);
}

.drawer-hero {
    position: relative;
    padding: 18px 18px 20px;
    color: #fff;
    background:
        radial-gradient(circle at 90% 0%, rgba(59, 130, 246, 0.45) 0, transparent 55%),
        linear-gradient(145deg, #0b1220 0%, #16233f 60%, #1e3a8a 130%);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 24px;
    flex-shrink: 0;
}

.drawer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff !important;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}
.logo-icon-light {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: none;
}

.drawer-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.drawer-close:hover { background: rgba(255, 255, 255, 0.22); transform: rotate(90deg); }

.drawer-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    backdrop-filter: blur(8px);
}
.drawer-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    color: #fff;
    background: linear-gradient(135deg, #3d8bff, #7c3aed);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}
.drawer-user-name { font-weight: 700; font-size: .98rem; line-height: 1.2; }
.drawer-user-sub { font-size: .76rem; color: rgba(255, 255, 255, 0.7); margin-top: 2px; }
.drawer-user-link { color: rgba(255, 255, 255, 0.8); padding: 6px 8px; }

.drawer-body { padding: 16px 14px 24px; }

.drawer-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 4px 4px 4px 14px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-xs);
    transition: var(--transition);
}
.drawer-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(3, 102, 255, 0.12); }
.drawer-search i.fa-search { color: #94a3b8; font-size: .9rem; }
.drawer-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: .9rem;
    padding: 9px 0;
    color: var(--text-primary);
}
.drawer-search button {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 11px;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    transition: var(--transition);
}
.drawer-search button:hover { background: var(--primary-dark); }

.drawer-location {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 6px;
    box-shadow: var(--shadow-xs);
    transition: var(--transition);
}
.drawer-location:hover { border-color: var(--primary-soft); box-shadow: var(--shadow-sm); }
.drawer-label { font-size: .72rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.drawer-value { font-weight: 700; font-size: .95rem; color: var(--secondary); }
.drawer-change {
    font-size: .76rem;
    font-weight: 700;
    color: var(--primary);
    background: var(--primary-light);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
}

.drawer-heading {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 20px 6px 8px;
}

.drawer-list {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.drawer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    color: var(--secondary);
    font-weight: 600;
    font-size: .93rem;
    border-bottom: 1px solid var(--border-light);
    transition: var(--transition);
}
.drawer-item:last-child { border-bottom: 0; }
.drawer-item:hover, .drawer-item:active { background: var(--primary-light); color: var(--primary); }
.drawer-item:hover .drawer-chevron { transform: translateX(3px); color: var(--primary); }
.drawer-item-text { flex: 1; min-width: 0; }
.drawer-chevron { font-size: .72rem; color: #cbd5e1; transition: var(--transition); }
.drawer-item-danger { color: var(--danger); }
.drawer-item-danger:hover { background: var(--danger-light); color: var(--danger); }

.drawer-tile {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
}
.tile-blue   { background: #cfe2ff; color: #0366ff; }
.tile-indigo { background: #e0e7ff; color: #4f46e5; }
.tile-amber  { background: #fff8cc; color: #e0bd00; }
.tile-green  { background: #d1fae5; color: #059669; }
.tile-red    { background: #fee2e2; color: #dc2626; }
.tile-cyan   { background: #cffafe; color: #0891b2; }
.tile-slate  { background: #e2e8f0; color: #475569; }

.drawer-badge {
    font-size: .68rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    letter-spacing: .03em;
}
.badge-amber { background: var(--amber); color: #422006; }
.badge-green { background: #d1fae5; color: #047857; }

.drawer-sla {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
    padding: 16px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, #0252d1, #0366ff 55%, #7c3aed);
    box-shadow: 0 12px 24px -8px rgba(3, 102, 255, 0.5);
}
.drawer-sla > i { font-size: 1.6rem; opacity: .95; }


/* Flash Toast */
.alert-toast {
    position: fixed;
    top: 80px;
    right: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-weight: 600;
    font-size: .9rem;
    max-width: 380px;
    animation: slideInRight 0.3s ease;
    transition: opacity 0.4s ease;
}

.alert-toast.success { background: #ecfdf5; color: #065f46; border-left: 4px solid var(--success); }
.alert-toast.error { background: #fef2f2; color: #7f1d1d; border-left: 4px solid var(--danger); }

.btn-close-toast {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 0 0 10px;
    opacity: .5;
    transition: var(--transition);
    color: inherit;
}
.btn-close-toast:hover { opacity: 1; }

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ── HERO SECTION ───────────────────────────────── */
.hero-section {
    background:
        radial-gradient(900px circle at 85% 20%, rgba(3, 102, 255, 0.08), transparent 50%),
        radial-gradient(700px circle at 15% 80%, rgba(245, 158, 11, 0.06), transparent 45%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 72px 0 60px;
    position: relative;
    overflow: hidden;
}

.hero-bg-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
}
.shape-luxury-1 { width: 550px; height: 550px; background: radial-gradient(circle, rgba(99,102,241,0.2) 0%, rgba(3, 102, 255,0.08) 70%, transparent 100%); top: -120px; right: -50px; }
.shape-luxury-2 { width: 450px; height: 450px; background: radial-gradient(circle, rgba(56,189,248,0.18) 0%, rgba(245,158,11,0.06) 70%, transparent 100%); bottom: -60px; left: -80px; }

.hero-mesh-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.7;
}

/* Luxury Pill */
.luxury-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(245, 158, 11, 0.35);
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.1);
    backdrop-filter: blur(10px);
}
.luxury-pill-icon { font-size: .85rem; }
.luxury-pill-text {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #92400e;
    text-transform: uppercase;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.3rem, 5vw, 3.6rem);
    font-weight: 800;
    color: var(--secondary);
    line-height: 1.12;
    letter-spacing: -0.035em;
    margin: 18px 0;
}

.text-luxury-gradient {
    background: linear-gradient(135deg, #0243a8 0%, #0366ff 45%, #0284c7 80%, #059669 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.12rem;
    color: var(--text-secondary);
    margin-bottom: 28px;
    max-width: 530px;
    line-height: 1.6;
}

/* Luxury Search Console */
.luxury-search-box {
    background: #ffffff;
    border: 1.5px solid rgba(226, 232, 240, 0.95);
    border-radius: 20px;
    padding: 8px;
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.09), 0 1px 3px rgba(0,0,0,0.02);
    transition: var(--transition);
}
.luxury-search-box:focus-within {
    border-color: var(--primary);
    box-shadow: 0 20px 45px -8px rgba(3, 102, 255, 0.18);
}
.luxury-search-btn {
    border-radius: 14px;
    padding: 12px 28px;
    background: linear-gradient(135deg, #0366ff 0%, #0252d1 100%);
    border: none;
    box-shadow: 0 4px 14px rgba(3, 102, 255, 0.35);
    transition: var(--transition);
}
.luxury-search-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(3, 102, 255, 0.45);
}

.quick-links {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}
.quick-links-scroll {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
    padding-bottom: 2px;
}
.quick-links-scroll::-webkit-scrollbar {
    display: none;
}
.quick-link-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.luxury-tag {
    font-size: .78rem;
    font-weight: 600;
    color: var(--secondary);
    background: #f8fafc;
    border: 1px solid var(--border);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    transition: var(--transition);
}
.luxury-tag:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transform: translateY(-1px);
}
.luxury-tag:hover i { color: #fff !important; }

/* ── Mobile Quick-Access Category Cards ─────────── */
.mobile-quick-categories {
    margin-top: 14px;
}
.quick-cat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-radius: 16px;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    border: 1.5px solid rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}
.quick-cat-card:active {
    transform: scale(0.97);
}
.cat-card-electrical {
    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
    border-color: #fde68a;
}
.cat-card-plumbing {
    background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
    border-color: #bae6fd;
}
.cat-card-ac,
.cat-card-ac-service {
    background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 100%);
    border-color: #99f6e4;
}
.cat-card-carpentry {
    background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
    border-color: #fed7aa;
}
.quick-cat-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.cat-card-electrical .quick-cat-icon {
    background: #fff8cc;
    color: #e0bd00;
}
.cat-card-plumbing .quick-cat-icon {
    background: #e0f2fe;
    color: #0284c7;
}
.cat-card-ac .quick-cat-icon,
.cat-card-ac-service .quick-cat-icon {
    background: #ccfbf1;
    color: #0d9488;
}
.cat-card-carpentry .quick-cat-icon {
    background: #ffedd5;
    color: #c2410c;
}
.quick-cat-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    flex-grow: 1;
    min-width: 0;
}
.quick-cat-name {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: .88rem;
    color: #0c182e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.quick-cat-price {
    font-size: .72rem;
    font-weight: 600;
    color: #64748b;
    margin-top: 2px;
}
.quick-cat-arrow {
    font-size: .72rem;
    color: #94a3b8;
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Mobile Sleek Trust Bar ──────────────────────── */
.mobile-trust-bar {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    font-size: .76rem;
    color: #475569;
}
.trust-bar-item {
    font-size: .76rem;
    color: #334155;
    white-space: nowrap;
}
.trust-bar-dot {
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    user-select: none;
}

/* ── Mobile Category Filter Pills (PLP) ──────────── */
.mobile-category-pill-bar {
    width: 100%;
    overflow: hidden;
}
.pill-bar-scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
    padding: 4px 2px 8px;
}
.pill-bar-scroll::-webkit-scrollbar {
    display: none;
}
.plp-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.plp-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 4px 18px;
    max-width: 460px;
    box-shadow: var(--shadow-xs);
    transition: var(--transition);
}
.plp-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(3, 102, 255, 0.12); }
.plp-search i { color: #94a3b8; font-size: .9rem; }
.plp-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 9px 0; font-size: .92rem; }
.plp-count {
    white-space: nowrap;
    font-size: .82rem;
    color: var(--text-secondary);
    background: var(--bg-light);
    border: 1px solid var(--border);
    padding: 7px 14px;
    border-radius: var(--radius-pill);
}
.plp-count strong { color: var(--secondary); }

@media (max-width: 767.98px) {
    .luxury-plp-header { padding: 18px 0 20px !important; }
    .luxury-plp-header .luxury-breadcrumb { margin-bottom: 6px !important; }
    .luxury-plp-title { font-size: 1.5rem; }
    .luxury-plp-subtitle { font-size: .86rem; }
}

.filter-pill {
    gap: 8px;
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    background: #ffffff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--secondary);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
    transition: all 0.2s ease;
}
.filter-pill:hover,
.filter-pill.active {
    background: var(--primary);
    color: #ffffff !important;
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(3, 102, 255, 0.3);
}
.filter-pill.active i,
.filter-pill:hover i {
    color: #ffffff !important;
}

/* Luxury Stats */
.luxury-stat {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 12px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
    transition: var(--transition);
}
.luxury-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -4px rgba(15, 23, 42, 0.08);
    border-color: #bfdbfe;
}
.luxury-stat .stat-number {
    font-family: var(--font-heading);
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--secondary);
    letter-spacing: -0.02em;
}
.luxury-stat .stat-label {
    font-size: .76rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Luxury Hero Photo Frame & Glass Badges */
.hero-luxury-frame-wrap {
    position: relative;
    max-width: 540px;
    margin: 0 auto;
}
.frame-ambient-glow {
    position: absolute;
    inset: -15px;
    background: linear-gradient(135deg, rgba(3, 102, 255,0.2) 0%, rgba(245,158,11,0.15) 100%);
    border-radius: 36px;
    filter: blur(25px);
    z-index: 0;
}
.hero-luxury-frame {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.22);
    border: 4px solid #ffffff;
    z-index: 1;
    background: #0c182e;
    aspect-ratio: 16 / 10.5;
}
.hero-luxury-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-luxury-frame:hover .hero-luxury-img {
    transform: scale(1.03);
}

.luxury-overlay-badge {
    position: absolute;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    padding: 10px 14px;
    box-shadow: 0 16px 32px -4px rgba(15, 23, 42, 0.16);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 5;
    pointer-events: none;
}
.badge-top-right {
    top: 18px;
    right: 18px;
}
.badge-bottom-left {
    bottom: 18px;
    left: 18px;
}
.badge-bottom-right {
    bottom: 18px;
    right: 18px;
}
.badge-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.bg-gold-gradient {
    background: linear-gradient(135deg, #f9d90a 0%, #e0bd00 100%);
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
}
.luxury-overlay-badge .badge-title {
    font-size: .82rem;
    font-weight: 700;
    color: var(--secondary);
    line-height: 1.2;
}
.luxury-overlay-badge .badge-sub {
    font-size: .72rem;
    color: var(--text-muted);
}

/* Radar Pulse Beacon */
.pulse-beacon {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #10b981;
    position: relative;
    flex-shrink: 0;
}
.pulse-beacon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.5);
    animation: beaconPulse 1.8s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
@keyframes beaconPulse {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* ── LUXURY SERVICE DISCIPLINES (CATEGORIES) ──────── */
.luxury-categories-section {
    background: #fbfcfe;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}
.luxury-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eaf2ff;
    color: var(--primary);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid #bfdbfe;
    margin-bottom: 12px;
}

.luxury-discipline-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: 0 20px 45px -12px rgba(15, 23, 42, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.luxury-discipline-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -15px rgba(15, 23, 42, 0.25);
}
.discipline-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 0;
}
.luxury-discipline-card:hover .discipline-bg {
    transform: scale(1.05);
}
.discipline-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(7, 11, 20, 0.95) 0%, rgba(7, 11, 20, 0.72) 45%, rgba(7, 11, 20, 0.2) 100%);
    z-index: 1;
}
.discipline-content {
    position: relative;
    z-index: 2;
    padding: 32px 28px;
}
.discipline-tag-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.discipline-tag {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
}
.tag-electrical {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fde68a;
}
.tag-plumbing {
    background: rgba(56, 189, 248, 0.2);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #bae6fd;
}
.tag-ac,
.tag-ac-service {
    background: rgba(20, 184, 166, 0.2);
    border: 1px solid rgba(20, 184, 166, 0.4);
    color: #99f6e4;
}
.tag-carpentry {
    background: rgba(249, 115, 22, 0.2);
    border: 1px solid rgba(249, 115, 22, 0.4);
    color: #fed7aa;
}
.discipline-sla-badge {
    font-size: .72rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    backdrop-filter: blur(8px);
}
.discipline-title {
    font-family: var(--font-heading);
    font-size: 1.55rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 8px 0 10px;
}
.discipline-desc {
    font-size: .92rem;
    color: #cbd5e1;
    line-height: 1.5;
    margin-bottom: 16px;
    max-width: 520px;
}
.discipline-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}
.discipline-chip {
    font-size: .78rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    backdrop-filter: blur(6px);
}
.discipline-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.discipline-price {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    line-height: 1;
}
.btn-luxury-white {
    background: #ffffff;
    color: #0c182e;
    font-weight: 700;
    font-size: .88rem;
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    display: inline-flex;
    align-items: center;
    transition: var(--transition);
    border: none;
}
.btn-luxury-white:hover {
    background: #f8fafc;
    color: var(--primary);
    transform: translateX(3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* ── SLA BANNER ─────────────────────────────────── */
.sla-banner {
    background: linear-gradient(135deg, #0c182e 0%, #1e3a8a 50%, #0252d1 100%);
    padding: 44px 0;
    position: relative;
    overflow: hidden;
}

.sla-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 50%, rgba(245, 158, 11, 0.15), transparent 40%);
    pointer-events: none;
}

.sla-banner-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 30px 36px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--radius-xl);
}

.sla-icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #f9d90a, #e0bd00);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    color: #fff;
    flex-shrink: 0;
    animation: pulse 2.2s infinite;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45); }
    50% { box-shadow: 0 0 0 16px rgba(245, 158, 11, 0); }
}

.sla-content { flex: 1; color: #fff; }
.sla-title { font-size: 1.45rem; font-weight: 800; margin-bottom: 6px; letter-spacing: -0.02em; }
.sla-text { opacity: .9; font-size: .95rem; margin: 0; line-height: 1.5; }

.sla-btn {
    color: var(--secondary) !important;
    background: #fff;
    font-weight: 700;
    white-space: nowrap;
    border-radius: var(--radius-pill);
    padding: 12px 28px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    transition: var(--transition);
}
.sla-btn:hover {
    transform: translateY(-2px);
    background: #f8fafc;
}

/* ── LUXURY PLP HEADER ──────────────────────────── */
.luxury-plp-header {
    background: linear-gradient(135deg, #070b14 0%, #0c182e 60%, #1e3a8a 100%);
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}
.luxury-plp-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.5;
    pointer-events: none;
}
.luxury-breadcrumb .breadcrumb-item,
.luxury-breadcrumb .breadcrumb-item a {
    color: #94a3b8;
    font-size: .84rem;
}
.luxury-breadcrumb .breadcrumb-item.active {
    color: #e2e8f0;
    font-weight: 600;
}
.luxury-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #64748b;
}
.luxury-pill-sm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fde68a;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
}
.luxury-plp-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.03em;
}
.luxury-plp-subtitle {
    color: #cbd5e1;
    font-size: 1rem;
    max-width: 600px;
    line-height: 1.5;
}
.luxury-header-stat {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 10px 18px;
    text-align: center;
    min-width: 90px;
}
.luxury-header-stat .stat-val {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 800;
    color: #ffffff;
    display: block;
    line-height: 1.1;
}
.luxury-header-stat .stat-lbl {
    font-size: .72rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}

/* ── SERVICE CARDS (PREMIUM MARKETPLACE LOOK) ───── */
.service-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    transition: var(--transition);
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xs);
    position: relative;
}

.service-card:hover {
    border-color: #bfdbfe;
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.service-card-img {
    height: 180px;
    overflow: hidden;
    position: relative;
    background: var(--bg-light);
}

.service-card-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 55px;
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.35) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.service-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.service-card:hover .service-card-img img {
    transform: scale(1.06);
}

/* Visual Headers for Services Without Images */
.service-card-visual {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.category-bg-electrical {
    background: linear-gradient(135deg, #1e3a8a 0%, #0366ff 55%, #4f46e5 100%);
}

.category-bg-plumbing {
    background: linear-gradient(135deg, #0e7490 0%, #0284c7 55%, #0369a1 100%);
}

.visual-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px);
    background-size: 16px 16px;
    opacity: 0.7;
}

.visual-icon-glow {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.8rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transition: var(--transition);
}

.service-card:hover .visual-icon-glow {
    transform: scale(1.12);
    background: rgba(255, 255, 255, 0.26);
}

/* Badges on Service Card Header */
.service-card-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    z-index: 2;
}

.sla-badge-card {
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.35);
    font-size: .68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.service-card-cat-badge {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    margin-left: auto;
}

.service-duration-pill {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    z-index: 2;
}

.service-card-body {
    padding: 16px 18px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.service-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 6px;
    line-height: 1.35;
}

.service-card-title a {
    color: var(--secondary);
}
.service-card-title a:hover {
    color: var(--primary);
}

.service-card-desc {
    font-size: .84rem;
    color: var(--text-secondary);
    line-height: 1.45;
    margin-bottom: 10px;
}

.service-card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .82rem;
    margin-bottom: 8px;
}

.service-card-rating .fa-star {
    font-size: .75rem;
}

.rating-value {
    color: var(--secondary);
}

.service-price .price-current {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: #0c182e;
    letter-spacing: -0.02em;
}

.service-price .price-original {
    font-size: .84rem;
    color: #94a3b8;
    text-decoration: line-through;
}

.btn-primary-soft,
a.btn-primary-soft {
    background: #0366ff;
    color: #ffffff !important;
    border: 1px solid #0366ff;
    font-size: .82rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    transition: var(--transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(3, 102, 255, 0.22);
}

.btn-primary-soft:hover,
a.btn-primary-soft:hover {
    background: #0252d1;
    border-color: #0252d1;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(3, 102, 255, 0.35);
    transform: translateY(-1px);
}


/* ── OFFERS ─────────────────────────────────────── */
.offer-card {
    background: linear-gradient(135deg, #0243a8 0%, #3d8bff 100%);
    color: #fff;
    border-radius: var(--radius-md);
    padding: 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.offer-card::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    background: rgba(255,255,255,.1);
    border-radius: 50%;
}

.offer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.offer-discount {
    font-size: 2rem;
    font-weight: 800;
    color: var(--amber);
    margin-bottom: 8px;
}

.offer-name { font-weight: 600; font-size: 1rem; margin-bottom: 4px; }
.offer-cond { opacity: .8; }
.offer-expires { opacity: .7; }

/* ── HOW IT WORKS ───────────────────────────────── */
.how-card {
    text-align: center;
    padding: 32px 24px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    position: relative;
    transition: var(--transition);
}

.how-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.how-step {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
}

.how-icon {
    font-size: 2.5rem;
    color: var(--primary);
    margin: 12px 0;
}

.how-card h4 { font-weight: 700; font-size: 1rem; margin-bottom: 8px; }
.how-card p { font-size: .85rem; color: var(--text-secondary); margin: 0; }

/* ── WHY CHOOSE US ──────────────────────────────── */
.section-why { background: var(--secondary); }

.why-card {
    padding: 24px;
    border: 1.5px solid rgba(255,255,255,.08);
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.why-card:hover {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.15);
}

.why-icon { font-size: 2rem; margin-bottom: 12px; }
.why-title { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 8px; }
.why-desc { font-size: .85rem; color: rgba(255,255,255,.55) !important; margin: 0; }

/* ── REVIEWS ────────────────────────────────────── */
.review-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px;
    transition: var(--transition);
    height: 100%;
}

.review-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}

.review-stars { margin-bottom: 12px; }
.review-text { font-size: .9rem; color: var(--text-secondary); font-style: italic; flex: 1; margin-bottom: 16px; }
.review-author { display: flex; align-items: center; gap: 12px; margin-top: auto; }

.review-avatar {
    width: 42px;
    height: 42px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.review-name { font-weight: 600; font-size: .9rem; }

/* ── CTA SECTION ────────────────────────────────── */
.section-cta {
    padding: 24px 0 0 0;
    background: linear-gradient(180deg, #ffffff 42%, #0c182e 42%);
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

@media (max-width: 767.98px) {
    .section-cta {
        padding: 16px 0 0 0;
        background: linear-gradient(180deg, #ffffff 38%, #0c182e 38%);
    }
}

.cta-card {
    background: linear-gradient(135deg, #0252d1 0%, #0366ff 50%, #3d8bff 100%);
    color: #fff;
    border-radius: 24px;
    padding: 40px 44px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px -15px rgba(2, 82, 209, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

.cta-card-bg-glow {
    position: absolute;
    top: -60px;
    right: -40px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

.cta-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    font-size: .8rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: .03em;
    margin-bottom: 12px;
}

.cta-title {
    font-size: 1.85rem;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
    color: #ffffff;
    line-height: 1.25;
}

.cta-subtitle {
    opacity: .92;
    font-size: 1.02rem;
    margin: 0;
    color: #e0e7ff;
}

.cta-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
}

.btn-cta-primary {
    background: #ffffff !important;
    color: #0243a8 !important;
    font-weight: 700;
    font-size: .95rem;
    padding: 13px 26px;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    border: none;
    transition: all .2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
}

.btn-cta-primary:hover {
    background: #f8fafc !important;
    color: #0252d1 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.btn-cta-secondary {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    font-weight: 600;
    font-size: .95rem;
    padding: 13px 24px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    transition: all .2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
}

.btn-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    border-color: #ffffff;
    transform: translateY(-2px);
}
.btn-white { background: #fff; color: var(--primary) !important; border: 2px solid #fff; font-weight: 600; }
.btn-white:hover { background: transparent; color: #fff !important; }
.btn-outline-white { border: 2px solid rgba(255,255,255,.5); color: #fff !important; font-weight: 600; }
.btn-outline-white:hover { background: rgba(255,255,255,.1); border-color: #fff; }

/* ── SEARCH RESULTS ─────────────────────────────── */
.search-results-dropdown {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: min(600px, 90vw);
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 9000;
    max-height: 320px;
    overflow-y: auto;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    transition: var(--transition);
    text-decoration: none;
    gap: 10px;
}

.search-result-item:hover { background: var(--bg-light); }
.search-result-item:last-child { border-bottom: none; }
.search-result-name { font-weight: 600; font-size: .9rem; }
.search-result-price { font-weight: 700; color: var(--primary); font-size: .9rem; }

/* ── FOOTER ─────────────────────────────────────── */
.site-footer {
    background: #0c182e;
    color: #cbd5e1;
    margin-top: 0;
    position: relative;
    z-index: 1;
}

.footer-main {
    padding: 56px 0 36px;
}

.footer-brand .footer-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 1.28rem;
    color: #fff;
    text-decoration: none;
    letter-spacing: -0.02em;
}

.footer-brand-desc {
    color: #94a3b8;
    font-size: .88rem;
    line-height: 1.55;
    max-width: 380px;
}

.footer-contact-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.footer-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: .82rem;
    font-weight: 500;
    color: #e2e8f0;
    text-decoration: none;
    transition: all .2s ease;
}

.footer-chip:hover {
    background: rgba(3, 102, 255, 0.25);
    border-color: #3d8bff;
    color: #ffffff;
    transform: translateY(-1px);
}

.footer-chip i {
    color: #f9d90a;
    font-size: .78rem;
}

.footer-heading {
    color: #f8fafc;
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 16px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 9px;
}

.footer-links a {
    color: #94a3b8;
    font-size: .88rem;
    text-decoration: none;
    transition: color .2s, transform .2s;
    display: inline-block;
}

.footer-links a:hover {
    color: #6aa6ff;
    transform: translateX(3px);
}

.footer-link-highlight {
    color: #f9d90a !important;
    font-weight: 600;
}

.social-links {
    display: flex;
    gap: 10px;
}

.social-link {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    text-decoration: none;
    font-size: .85rem;
    transition: all .2s ease;
}

.social-link:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(3, 102, 255, 0.35);
}



.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 0;
}

.footer-bottom p,
.footer-bottom .text-muted {
    color: #94a3b8 !important;
}

.site-footer .text-muted {
    color: #94a3b8 !important;
}

@media (max-width: 991.98px) {
    .site-footer .footer-main {
        padding: 40px 0 28px;
    }
    .site-footer .footer-heading {
        margin-bottom: 12px;
        font-size: .78rem;
    }
    .site-footer .footer-links a {
        font-size: .86rem;
    }

    .site-footer .footer-bottom .container {
        flex-direction: column;
        gap: 6px;
        text-align: center;
        justify-content: center !important;
    }
}

.divider-text {
    position: relative;
    text-align: center;
}

.divider-text::before,
.divider-text::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: var(--border);
}

.divider-text::before { left: 0; }
.divider-text::after { right: 0; }
.divider-text span { background: #fff; padding: 0 12px; color: var(--text-muted); font-size: .82rem; }

/* ── AUTH PAGES ─────────────────────────────────── */
.auth-page {
    background: #f8fafc;
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

.auth-container { width: 100%; }

.auth-split {
    display: flex;
    min-height: 100vh;
}

/* Left Hero Panel (Desktop) */
.auth-left {
    flex: 0 0 44%;
    background: linear-gradient(145deg, #0f172a 0%, #1e3a8a 50%, #0366ff 100%);
    padding: 60px 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.auth-left::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(3, 102, 255, 0.4) 0%, rgba(3, 102, 255, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.auth-left::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -100px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.auth-brand {
    position: relative;
    z-index: 2;
}

.auth-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.auth-logo .site-logo {
    height: 48px;
    width: auto;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.25));
}

.auth-left-content {
    position: relative;
    z-index: 2;
    margin: auto 0;
}

.auth-left-content h2 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2rem, 3.2vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: #ffffff;
    margin-bottom: 16px;
}

.auth-left-content p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 36px;
    max-width: 380px;
}

.auth-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-feature {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    max-width: 380px;
}

.auth-feature i {
    font-size: 1.15rem;
}

.auth-left-footer {
    position: relative;
    z-index: 2;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Right Form Area */
.auth-right {
    flex: 1;
    padding: 48px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
}

.auth-form-wrap {
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.02);
    border: 1px solid #eef2f6;
    padding: 40px 36px;
}

.auth-form-header {
    text-align: center;
    margin-bottom: 24px;
}

.auth-mobile-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
.auth-mobile-logo .site-logo {
    height: 44px;
    width: auto;
    filter: drop-shadow(0 4px 12px rgba(3, 102, 255, 0.22));
}

.auth-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.025em;
    margin-bottom: 6px;
}
.auth-subtitle {
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 0;
}

/* ── AUTH SEGMENTED TABS ───────────────────────── */
.auth-nav-pills {
    background: #f1f5f9;
    padding: 4px;
    border-radius: 12px;
    display: flex;
    gap: 4px;
    border: 1px solid #e2e8f0;
    margin-bottom: 22px;
}
.auth-nav-pills .nav-item {
    flex: 1 1 0;
    min-width: 0;
}
.auth-nav-pills .nav-link {
    width: 100%;
    height: 44px;
    color: #64748b;
    font-weight: 600;
    font-size: 0.86rem;
    padding: 0 10px;
    border-radius: 9px;
    border: none;
    background: transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap !important;
    text-overflow: ellipsis;
}
.auth-nav-pills .nav-link .tab-icon {
    font-size: 0.95rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    transition: transform 0.2s ease;
}
.auth-nav-pills .nav-link .fa-whatsapp {
    color: #10b981;
}
.auth-nav-pills .nav-link .fa-envelope {
    color: #64748b;
}
.auth-nav-pills .nav-link:hover {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.6);
}
.auth-nav-pills .nav-link.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    font-weight: 700;
}
.auth-nav-pills .nav-link.active .tab-icon {
    transform: scale(1.08);
}
.auth-nav-pills .nav-link.active .fa-whatsapp {
    color: #25D366;
}
.auth-nav-pills .nav-link.active .fa-envelope {
    color: #0366ff;
}

/* ── UNIFIED PHONE INPUT ────────────────────────── */
.auth-phone-group {
    display: flex;
    align-items: stretch;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    transition: all 0.2s ease;
    overflow: hidden;
    height: 52px;
}
.auth-phone-group:focus-within {
    border-color: #25D366;
    box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.16);
}
.auth-phone-group.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}
.auth-phone-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    background: #f8fafc;
    border-right: 1.5px solid #cbd5e1;
    font-weight: 700;
    font-size: 0.95rem;
    color: #1e293b;
    user-select: none;
    white-space: nowrap;
    gap: 6px;
}
.auth-phone-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0 16px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #0f172a;
    background: transparent;
    min-width: 0;
    letter-spacing: 0.5px;
}
.auth-phone-input::placeholder {
    font-size: 0.92rem;
    font-weight: 400;
    color: #94a3b8;
    letter-spacing: normal;
}

/* ── AUTH TRUST BADGE / HELPER ──────────────────── */
.auth-trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 10px;
    line-height: 1.4;
}

/* ── ACTION BUTTONS ─────────────────────────────── */
.btn-whatsapp {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
    color: #ffffff !important;
    border: none !important;
    height: 52px;
    border-radius: 12px !important;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 18px rgba(18, 140, 126, 0.32);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-whatsapp:hover {
    background: linear-gradient(135deg, #22bf5b 0%, #0e786b 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(18, 140, 126, 0.42);
}
.btn-whatsapp:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(18, 140, 126, 0.3);
}

.btn-primary-auth {
    background: linear-gradient(135deg, #0366ff 0%, #0052cc 100%) !important;
    color: #ffffff !important;
    border: none !important;
    height: 52px;
    border-radius: 12px !important;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(3, 102, 255, 0.3);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-primary-auth:hover {
    background: linear-gradient(135deg, #0056e0 0%, #0043a8 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(3, 102, 255, 0.4);
}

/* Form controls polish */
.auth-form-wrap .form-control {
    height: 50px;
    border-radius: 12px;
    border: 1.5px solid #cbd5e1;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}
.auth-form-wrap .form-control:focus {
    border-color: #0366ff;
    box-shadow: 0 0 0 4px rgba(3, 102, 255, 0.12);
}
.auth-form-wrap .input-group-text {
    border-radius: 12px 0 0 12px;
    border: 1.5px solid #cbd5e1;
    border-right: none;
    background: #f8fafc;
}
.auth-form-wrap .input-group .form-control {
    border-left: none;
    border-radius: 0 12px 12px 0;
}
.auth-form-wrap .input-group .btn-outline-secondary {
    border: 1.5px solid #cbd5e1;
    border-left: none;
    border-radius: 0 12px 12px 0;
    color: #64748b;
}

/* OTP Input */
.otp-input-group {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.otp-input {
    width: 48px !important;
    height: 54px;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    padding: 0;
    transition: all 0.2s ease;
}
.otp-input:focus {
    border-color: #25d366;
    box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.15);
    background: #f0fdf4;
    outline: none;
}
.otp-input.is-valid {
    border-color: #10b981;
}

.otp-sent-info {
    font-size: 0.9rem;
    border: 1px solid #e2e8f0;
}

/* Mobile Responsiveness */
@media (max-width: 767.98px) {
    .auth-page {
        background: #f8fafc;
        align-items: center;
        padding: 20px 12px;
    }
    .auth-split {
        flex-direction: column;
        min-height: auto;
        width: 100%;
        justify-content: center;
    }
    .auth-left {
        display: none !important;
    }
    .auth-right {
        padding: 0;
        background: transparent;
        width: 100%;
    }
    .auth-form-wrap {
        padding: 30px 20px;
        box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
        border-radius: 20px;
        max-width: 100%;
    }
    .auth-title {
        font-size: 1.55rem;
    }
    .auth-subtitle {
        font-size: 0.88rem;
    }
    .otp-input {
        width: 42px !important;
        height: 48px;
        font-size: 1.2rem;
    }
}

/* ── LOCATION MODAL ─────────────────────────────── */
.modal-backdrop { z-index: 1040; }
.modal { z-index: 1045; }

/* ── COMPREHENSIVE RESPONSIVE DESIGN ───────────── */

/* Mobile bottom bar removed as requested */
.mobile-bottom-bar {
    display: none !important;
}

/* Small Devices / Phones (< 576px) */
@media (max-width: 575.98px) {
    .section { padding: 36px 0; }
    .section-header { margin-bottom: 22px; }
    .section-title { font-size: 1.45rem; letter-spacing: -0.02em; }
    .section-subtitle { font-size: .86rem; }

    /* Header */
    .navbar { padding: 8px 0; }
    .logo-text { font-size: 1.08rem; }
    .btn-icon { width: 36px; height: 36px; font-size: .92rem; }
    .btn-icon.btn-cart { width: 36px; height: 36px; font-size: .9rem; }
    .btn-icon.btn-cart .cart-badge { top: -3px !important; right: -3px !important; min-width: 16px; height: 16px; font-size: .56rem !important; padding: 0 3px; }
    .btn-location-mobile { padding: 4px 10px; font-size: .74rem; max-width: 125px; border-radius: 20px; }

    /* Hero Section */
    .hero-section { padding: 20px 0 16px; }
    .hero-title { 
        font-size: clamp(1.68rem, 6.2vw, 2.05rem); 
        line-height: 1.15; 
        margin: 8px 0 10px; 
        letter-spacing: -0.03em;
    }
    .hero-subtitle { 
        font-size: .88rem; 
        line-height: 1.42; 
        margin-bottom: 16px; 
        color: #475569;
    }
    .luxury-pill { 
        padding: 4px 12px; 
        font-size: .72rem; 
        margin-bottom: 8px;
    }

    /* Hero Search on Mobile */
    .luxury-search-box {
        padding: 5px;
        border-radius: 16px;
        box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08);
    }
    .luxury-search-box .hero-search {
        flex-direction: row !important;
        align-items: center;
        gap: 0;
    }
    .luxury-search-box .hero-search .input-group-text {
        padding: 8px 6px 8px 10px;
        font-size: .9rem;
    }
    .luxury-search-box .hero-search .form-control {
        padding: 8px 6px;
        font-size: .88rem;
    }
    .luxury-search-box .luxury-search-btn {
        width: auto !important;
        padding: 9px 14px;
        font-size: .84rem;
        border-radius: 12px;
        flex-shrink: 0;
    }

    /* Quick Links on Mobile */
    .quick-links {
        margin-top: 6px;
    }
    .quick-link-label {
        font-size: .72rem;
    }
    .luxury-tag {
        font-size: .72rem;
        padding: 4px 10px;
    }

    /* Hero Photo Frame & Glass Badges */
    .hero-luxury-frame-wrap {
        margin-top: 22px;
    }
    .hero-luxury-frame {
        border-radius: 20px;
        border-width: 3px;
        box-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.2);
    }
    .luxury-overlay-badge {
        padding: 6px 10px;
        border-radius: 12px;
        gap: 8px;
    }
    .luxury-overlay-badge .badge-icon-box {
        width: 30px;
        height: 30px;
        font-size: .85rem;
        border-radius: 8px;
    }
    .luxury-overlay-badge .badge-title {
        font-size: .72rem;
    }
    .luxury-overlay-badge .badge-sub {
        font-size: .64rem;
    }
    .badge-top-right {
        top: 10px;
        right: 10px;
    }
    .badge-bottom-left {
        bottom: 10px;
        left: 10px;
    }

    /* Master Disciplines on Mobile */
    .luxury-categories-section {
        padding: 38px 0;
    }
    .luxury-discipline-card {
        border-radius: 20px;
    }
    .discipline-content {
        padding: 22px 18px;
    }
    .discipline-title {
        font-size: 1.25rem;
        margin: 6px 0 8px;
    }
    .discipline-desc {
        font-size: .84rem;
        margin-bottom: 14px;
        line-height: 1.45;
    }
    .discipline-features {
        gap: 6px;
        margin-bottom: 18px;
    }
    .discipline-chip {
        font-size: .72rem;
        padding: 3px 10px;
    }
    .discipline-footer {
        flex-wrap: nowrap;
        gap: 8px;
    }
    .discipline-price {
        font-size: 1.15rem;
    }
    .btn-luxury-white {
        padding: 8px 16px;
        font-size: .82rem;
        flex-shrink: 0;
    }

    /* Category Cards */
    .category-card {
        padding: 16px 14px;
        gap: 12px;
        border-radius: var(--radius-md);
    }
    .category-card-icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
        border-radius: 12px;
    }
    .category-card-title { font-size: .98rem; }
    .category-card-text { font-size: .78rem; }

    /* SLA Banner */
    .sla-banner { padding: 28px 0; }
    .sla-banner-inner {
        flex-direction: column;
        text-align: center;
        padding: 20px 16px;
        gap: 14px;
        border-radius: 20px;
    }
    .sla-icon { width: 54px; height: 54px; font-size: 1.45rem; }
    .sla-title { font-size: 1.18rem; }
    .sla-text { font-size: .85rem; }
    .sla-btn { width: 100%; padding: 10px 18px; font-size: .88rem; }

    /* Service Cards (Mobile 2-Column App Grid) */
    .service-card {
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid rgba(226, 232, 240, 0.85);
        background: #ffffff;
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .service-card-img {
        height: 124px;
    }
    .service-card-img::after {
        background: linear-gradient(to bottom, rgba(15, 23, 42, 0.3) 0%, transparent 50%);
        height: 48px;
    }
    .service-card-badges { top: 6px; left: 6px; right: 6px; }
    .sla-badge-card {
        font-size: .62rem;
        padding: 2px 7px;
        border-radius: 9999px;
    }
    .service-card-cat-badge { display: none !important; }
    .service-duration-pill { display: none !important; }
    .service-card-body {
        padding: 10px 10px 12px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .service-card-title {
        font-size: .84rem;
        line-height: 1.25;
        margin-bottom: 6px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 2.1em;
        font-weight: 700;
        color: #0c182e;
    }
    .service-card-desc { display: none; }
    .service-card-footer {
        padding-top: 8px !important;
        margin-top: auto;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-top: 1px solid #f1f5f9 !important;
        gap: 4px !important;
    }
    .service-card-footer .service-price {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1.1;
    }
    .service-price .price-current {
        font-size: .92rem !important;
        font-weight: 800 !important;
        color: #0c182e !important;
    }
    .service-price .price-original {
        font-size: .68rem !important;
        color: #94a3b8 !important;
        text-decoration: line-through;
    }
    .service-card-footer .btn {
        width: auto !important;
        flex-shrink: 0;
        text-align: center;
        font-size: .74rem !important;
        font-weight: 700 !important;
        padding: 5px 12px !important;
        border-radius: 9999px !important;
        background: #0366ff !important;
        color: #ffffff !important;
        border: 1px solid #0366ff !important;
        box-shadow: 0 2px 6px rgba(3, 102, 255, 0.22);
    }

    /* How It Works & CTA */
    .how-card { padding: 22px 14px; }
    .section-cta {
        padding: 16px 0 0 0 !important;
        background: linear-gradient(180deg, #ffffff 38%, #0c182e 38%) !important;
    }
    .cta-card {
        padding: 24px 18px;
        text-align: center;
        border-radius: 18px;
    }
    .cta-badge { margin: 0 auto 8px; }
    .cta-title { font-size: 1.32rem; margin-bottom: 6px; }
    .cta-subtitle { font-size: .88rem; margin-bottom: 16px; }
    .cta-actions {
        display: flex;
        flex-direction: row;
        gap: 10px;
        width: 100%;
    }
    .cta-actions .btn {
        flex: 1;
        width: auto;
        padding: 11px 10px;
        font-size: .88rem;
    }

    /* Footer */
    .footer-main { padding: 32px 0 20px; }

}

/* Medium Devices / Phablets & Tablets (576px to 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .section { padding: 52px 0; }
    .hero-section { padding: 48px 0 36px; }
    .hero-title { font-size: 2.2rem; }
    .sla-banner-inner { flex-direction: column; text-align: center; }
    .sla-btn { width: auto; }
}

/* Tablets / iPads (768px to 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .section { padding: 60px 0; }
    .hero-section { padding: 56px 0 44px; }
    .hero-title { font-size: 2.5rem; }
    .hero-illustration { height: 380px; }
    .floating-card { padding: 8px 12px; font-size: .78rem; }
    .sla-banner-inner { padding: 26px 28px; }
}

/* Laptops (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hero-title { font-size: 2.85rem; }
    .hero-illustration { height: 420px; }
    .floating-card.card-1 { left: 0; }
    .floating-card.card-2 { right: 0; }
}

/* ── Bootstrap System Polish ────────────────────── */
.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    font-weight: 600;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 6px rgba(3, 102, 255, 0.25);
    transition: var(--transition);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    box-shadow: 0 4px 12px rgba(3, 102, 255, 0.35);
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 3px 10px rgba(3, 102, 255, 0.2);
}

.btn-xs { font-size: .75rem; padding: 4px 10px; border-radius: 6px; }

.form-control {
    border-color: var(--border);
    border-radius: var(--radius-sm);
    font-size: .95rem;
    transition: var(--transition);
}
.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(3, 102, 255, 0.12);
}

.badge { font-weight: 600; }
.card { border-color: var(--border); }

/* ══════════════════════════════════════════════════
   CUSTOMER ACCOUNT PORTAL & SIDEBAR (DESKTOP + MOBILE)
   ══════════════════════════════════════════════════ */

.account-page-header {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.account-avatar-sm {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0c182e 0%, #334155 100%);
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);
}

.account-avatar-lg {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0366ff 0%, #0252d1 100%);
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(3, 102, 255, 0.28);
}

.account-verified-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #10b981;
    color: #ffffff;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.account-sidebar {
    background: #ffffff;
    border: 1px solid #eef2f6 !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
}

.account-sidebar-header {
    background: linear-gradient(to bottom, #f8fafc 0%, #ffffff 100%);
}

.account-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 0.9rem;
    color: #475569;
    text-decoration: none;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.account-nav-link:hover {
    background: #f8fafc;
    color: #0c182e;
    transform: translateX(2px);
}

.account-nav-link.active {
    background: #eaf2ff;
    color: #0366ff;
    font-weight: 600;
}

.account-nav-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.account-nav-link:hover .account-nav-icon {
    transform: scale(1.05);
}

.account-nav-logout {
    color: #ef4444 !important;
}

.account-nav-logout:hover {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}

/* Mobile Horizontal Scrollable Tabs */
.account-mobile-tabs-wrap {
    margin: 0 -4px;
    padding: 2px 4px;
}

.account-mobile-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.account-mobile-tabs::-webkit-scrollbar {
    display: none;
}

.account-tab-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 0.84rem;
    font-weight: 600;
    background: #ffffff;
    color: #64748b;
    border: 1px solid #e2e8f0;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: all 0.18s ease;
}

.account-tab-pill:hover {
    background: #f8fafc;
    color: #0c182e;
}

.account-tab-pill.active {
    background: #0c182e;
    color: #ffffff;
    border-color: #0c182e;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

/* Stat Cards */
.account-stat-card {
    border: 1px solid #f1f5f9 !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.account-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -6px rgba(15, 23, 42, 0.08) !important;
}

.stat-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.stat-card-link {
    text-decoration: none;
    transition: gap 0.18s ease;
}

.stat-card-link:hover i {
    transform: translateX(3px);
}

/* Empty State & Quick Pills */
.account-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin: 0 auto;
}

.quick-pill-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    background: #f8fafc;
    color: #334155;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    transition: all 0.15s ease;
}

.quick-pill-btn:hover {
    background: #eaf2ff;
    color: #0366ff;
    border-color: #bfdbfe;
    transform: translateY(-1px);
}

/* Utility Color Badges */
.bg-indigo-subtle { background-color: #e0e7ff !important; }
.text-indigo { color: #4f46e5 !important; }
.bg-slate-subtle { background-color: #f1f5f9 !important; }
.text-slate { color: #475569 !important; }


/* ══════════════════════════════════════════════════
   Fractional spacing utilities (used in views, not in Bootstrap 5.3 core)
   ══════════════════════════════════════════════════ */
.me-1\.5 { margin-right: .375rem !important; }
.ms-1\.5 { margin-left: .375rem !important; }
.mb-1\.5 { margin-bottom: .375rem !important; }
.gap-1\.5 { gap: .375rem !important; }
.px-2\.5 { padding-left: .625rem !important; padding-right: .625rem !important; }
.py-0\.5 { padding-top: .125rem !important; padding-bottom: .125rem !important; }
.py-1\.5 { padding-top: .375rem !important; padding-bottom: .375rem !important; }
.p-2\.5 { padding: .625rem !important; }

/* ══════════════════════════════════════════════════
   ACCOUNT PORTAL — PHONE LAYOUT (< 576px)
   ══════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    body { padding-bottom: 0; }

    /* Compact page header: title only (bottom bar already has navigation) */
    .account-page-header { padding-top: .6rem !important; padding-bottom: .6rem !important; margin-bottom: 1rem !important; }
    .account-page-header .breadcrumb { display: none; }
    .account-page-header h1 { font-size: 1.15rem; }
    .account-page-header .btn-primary { padding: .3rem .8rem; font-size: .8rem; }

    /* Identity strip + tabs */
    .account-avatar-sm { width: 38px; height: 38px; font-size: 1rem; }
    .account-tab-pill { padding: 7px 13px; font-size: .8rem; }

    /* Headline block */
    .account-welcome h3 { font-size: 1.2rem; }
    .account-welcome p { font-size: .8rem; }

    /* Stat cards: compact 2-up tiles, no decorative badge */
    .account-stat-card .card-body { padding: .85rem !important; }
    .account-stat-card .badge { display: none; }
    .account-stat-card .stat-icon-wrap { width: 34px; height: 34px; font-size: .95rem; border-radius: 10px; }
    .account-stat-card .d-flex.mb-3 { margin-bottom: .55rem !important; }
    .account-stat-card h4 { font-size: 1.05rem; margin-bottom: .35rem !important; }
    .account-stat-card h4 .fs-6 { font-size: .72rem !important; }
    .account-stat-card .small { font-size: .74rem !important; }

    /* Cards & lists */
    .account-page-header ~ .container .card-header,
    .account-page-header ~ .container .card-body { padding: .9rem !important; }
    .account-empty-icon { width: 52px; height: 52px; font-size: 1.3rem; }
    .quick-pill-btn { padding: 5px 11px; font-size: .74rem; }
}

/* ── Service page: "How it works" timeline ───────── */
.hiw-steps { position: relative; padding: 0; margin: 0; }
.hiw-step { position: relative; display: flex; gap: 18px; padding-bottom: 26px; }
.hiw-step:last-child { padding-bottom: 0; }
.hiw-step:not(:last-child)::before {
    content: ""; position: absolute; left: 19px; top: 40px; bottom: 2px; width: 2px;
    background: linear-gradient(to bottom, rgba(3, 102, 255,.35), rgba(3, 102, 255,.08));
}
.hiw-num {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #0366ff, #0252d1); color: #fff;
    font-weight: 700; font-size: .95rem; line-height: 1;
    box-shadow: 0 4px 12px rgba(3, 102, 255,.28), 0 0 0 4px #eaf2ff;
}
.hiw-body { padding-top: 6px; min-width: 0; }
@media (max-width: 575.98px) {
    .hiw-step { gap: 14px; padding-bottom: 20px; }
    .hiw-num { flex-basis: 34px; width: 34px; height: 34px; font-size: .85rem; }
    .hiw-step:not(:last-child)::before { left: 16px; top: 34px; }
    .hiw-body h6 { font-size: .92rem; }
}

/* ══════════════════════════════════════════════════
   SOFT UTILITY TINTS (Badges, Alerts, Card Boxes)
   ══════════════════════════════════════════════════ */
.bg-success-soft {
    background-color: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    color: #15803d !important;
}
.bg-danger-soft {
    background-color: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #b91c1c !important;
}
.bg-warning-soft {
    background-color: #fffbeb !important;
    border: 1px solid #fde68a !important;
    color: #b45309 !important;
}
.bg-primary-soft {
    background-color: #eaf2ff !important;
    border: 1px solid #bfdbfe !important;
    color: #0252d1 !important;
}
.bg-info-soft {
    background-color: #f0f9ff !important;
    border: 1px solid #bae6fd !important;
    color: #0369a1 !important;
}

.badge.bg-success-soft,
.badge.bg-danger-soft,
.badge.bg-warning-soft,
.badge.bg-primary-soft,
.badge.bg-info-soft {
    border-radius: var(--radius-pill);
    padding: 4px 10px !important;
    font-weight: 600;
}

/* ══════════════════════════════════════════════════
   SERVICE DETAIL PAGE — polish (desktop + mobile)
   ══════════════════════════════════════════════════ */
.svc-title { color: var(--text-primary); letter-spacing: -.01em; }
.svc-hero-img { height: 400px; box-shadow: var(--shadow-md); }
.svc-hero-img img { object-fit: cover; }

/* Included / Excluded Cards */
.svc-boxes-row {
    --bs-gutter-x: 14px;
    --bs-gutter-y: 12px;
}
.svc-box {
    border-radius: 14px;
    padding: 1rem 1.15rem;
    height: 100%;
    transition: var(--transition);
}
.svc-box-included {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
}
.svc-box-excluded {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
}
.svc-box-head {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.svc-box-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.svc-box-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: #334155;
    margin-bottom: 0.42rem;
    line-height: 1.35;
}
.svc-box-list li:last-child {
    margin-bottom: 0;
}
.svc-box-list li i {
    font-size: 0.78rem;
    margin-top: 0.24rem;
    flex-shrink: 0;
}

/* Warranty banner */
.svc-warranty-banner {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.65rem 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: #475569;
    font-size: 0.88rem;
    box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.svc-warranty-banner i {
    color: #10b981;
    font-size: 0.95rem;
}
.svc-warranty-banner strong {
    color: #0c182e;
}

/* Add-on checkbox rows: keep the box inside the card */
.custom-checkbox-box { padding-left: 1rem !important; gap: .75rem; transition: var(--transition); }
.custom-checkbox-box .form-check-input { float: none; margin-left: 0; flex-shrink: 0; width: 1.15em; height: 1.15em; }
.custom-checkbox-box:has(.form-check-input:checked) { border-color: var(--primary) !important; background: var(--primary-light); }
.custom-checkbox-box .form-check-label { cursor: pointer; }

/* Sticky booking bar (mobile only) */
.svc-sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 18px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.1);
}
.svc-sticky-price small { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.svc-sticky-price strong { font-size: 1.25rem; font-weight: 800; color: var(--primary); white-space: nowrap; }
.svc-sticky-cta .btn { border-radius: var(--radius-pill); padding: .7rem 1.4rem; font-weight: 700; box-shadow: 0 4px 12px rgba(3, 102, 255,.28); }

@media (max-width: 991.98px) {
    .svc-page { padding-bottom: 96px !important; }
    /* The in-page booking card isn't sticky on tablets/phones */
    .svc-page .sticky-top { position: static !important; }
}

@media (max-width: 575.98px) {
    /* Breadcrumb: one tidy line with ellipsis */
    .svc-breadcrumb { flex-wrap: nowrap; font-size: .78rem; overflow: hidden; }
    .svc-breadcrumb .breadcrumb-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .svc-breadcrumb .breadcrumb-item:last-child { flex: 1 1 auto; color: var(--text-primary); font-weight: 600; }
    .svc-breadcrumb .breadcrumb-item + .breadcrumb-item { padding-left: .35rem; }
    .svc-breadcrumb .breadcrumb-item + .breadcrumb-item::before { padding-right: .35rem; }

    /* Title + meta */
    .svc-title { font-size: 1.45rem; line-height: 1.25; }
    .svc-page .badge { font-size: .72rem; }

    /* Hero image: compact, not full screen */
    .svc-hero-img { height: 210px; border-radius: 16px !important; }

    /* Section headings & lists */
    .svc-page h4 { font-size: 1.1rem; margin-bottom: 0.65rem !important; }
    .svc-box { padding: 0.85rem 0.95rem; border-radius: 12px; }
    .svc-box-head { font-size: 0.9rem; margin-bottom: 0.4rem; }
    .svc-box-list li { font-size: 0.84rem; margin-bottom: 0.35rem; }
    .svc-warranty-banner { font-size: 0.82rem; padding: 0.55rem 0.8rem; width: 100%; border-radius: 10px; }

    /* Booking card */
    .svc-page .card.shadow-lg { box-shadow: var(--shadow-md) !important; border: 1px solid var(--border-light) !important; }
    .svc-page .card-body { padding: 1rem !important; }
    .svc-page .card-body h2 { font-size: 1.6rem; }
    .custom-checkbox-box { padding: .7rem .8rem !important; font-size: .9rem; }

    /* Similar services: 2-up */
    .svc-page ~ .bg-light .col-md-6 { width: 50%; }

    /* PLP Toolbar mobile adjustments */
    .plp-toolbar { gap: 8px; margin-bottom: 14px; }
    .plp-search { padding: 2px 14px; border-radius: var(--radius-pill); }
    .plp-search input { padding: 7px 0; font-size: .86rem; }
    .plp-count { font-size: .76rem; padding: 5px 10px; }
}

/* ══════════════════════════════════════════════════
   GLOBAL MOBILE POLISH: Breadcrumbs & Cart
   ══════════════════════════════════════════════════ */
.breadcrumb {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.breadcrumb::-webkit-scrollbar { display: none; }
.breadcrumb-item {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

/* Cart Page Polish */
.empty-cart-circle {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #eaf2ff;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    box-shadow: 0 10px 25px rgba(3, 102, 255, 0.12);
}
.cart-item-thumb {
    width: 84px;
    height: 84px;
    border-radius: 12px;
}
.cart-item-thumb img {
    object-fit: cover;
}
.cart-item-card {
    border: 1px solid var(--border-light) !important;
    transition: var(--transition);
}
.cart-item-card:hover {
    border-color: #bfdbfe !important;
    box-shadow: var(--shadow-sm) !important;
}

@media (max-width: 575.98px) {
    .cart-item-thumb {
        width: 70px;
        height: 70px;
        border-radius: 10px;
    }
    .cart-item-card .card-body {
        padding: 12px !important;
    }
    .cart-summary-card {
        box-shadow: var(--shadow-sm) !important;
        border: 1px solid var(--border-light) !important;
    }
}

/* Enhanced Cart Interactive Elements */
.cart-qty-group {
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 9999px;
    overflow: hidden;
    padding: 2px;
}
.cart-qty-group .btn-qty-minus,
.cart-qty-group .btn-qty-plus {
    border: none !important;
    background: transparent !important;
    color: #475569 !important;
    width: 28px;
    height: 28px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    transition: all 0.2s ease;
}
.cart-qty-group .btn-qty-minus:hover,
.cart-qty-group .btn-qty-plus:hover {
    background: #e2e8f0 !important;
    color: #0c182e !important;
}
.cart-qty-group .qty-input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.88rem;
    color: #0c182e;
    width: 32px;
}
.btn-remove-item {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fef2f2 !important;
    color: #ef4444 !important;
    border: 1px solid #fee2e2 !important;
    transition: all 0.2s ease;
    text-decoration: none;
    padding: 0 !important;
}
.btn-remove-item:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    transform: scale(1.08);
}
.text-uppercase-input {
    text-transform: uppercase;
}
.text-uppercase-input::placeholder {
    text-transform: none;
}



/* ── SITE LOGO ── */
.site-logo { height: 46px; width: auto; display: inline-block; border-radius: 0; box-shadow: none; filter: drop-shadow(0 4px 10px rgba(3, 102, 255, 0.2)); }
.site-logo-footer { height: 58px; filter: none; }
@media (max-width: 575.98px) { .site-logo { height: 42px; } .site-logo-footer { height: 52px; } }

/* ── LOCATION MODAL ── */
.divider-text { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: .8rem; }
.divider-text::before, .divider-text::after { content: ''; position: static; flex: 1; width: auto; height: 1px; background: var(--border); }
#locationSuggestions { max-height: 240px; overflow-y: auto; }

/* ── ADDRESS FORM STYLING ── */
.address-type-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.address-type-pill {
    padding: 8px 18px;
    border-radius: 10px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    user-select: none;
}
.address-type-pill:hover {
    border-color: #94a3b8;
    color: #0f172a;
    background: #f8fafc;
}
.address-type-pill.active {
    background: #0366ff;
    border-color: #0366ff;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(3, 102, 255, 0.25);
}
#addAddressCard .form-control,
#addAddressCard .form-select {
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    font-size: 0.95rem;
    padding: 10px 14px;
    transition: all 0.2s ease;
}
#addAddressCard .form-control:focus,
#addAddressCard .form-select:focus {
    border-color: #0366ff;
    box-shadow: 0 0 0 4px rgba(3, 102, 255, 0.12);
}
#addAddressCard textarea.form-control {
    min-height: 70px;
}

/* ── Order Status Badges & Utilities ───────────────── */
.badge-status {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
    letter-spacing: 0.01em;
}
.badge-status i {
    font-size: 0.82rem;
}
.badge-status-pending    { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.badge-status-confirmed  { background: #eaf2ff; color: #0252d1; border: 1px solid #bfdbfe; }
.badge-status-assigned   { background: #e0f2fe; color: #0369a1; border: 1px solid #7dd3fc; }
.badge-status-in_progress{ background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.badge-status-completed  { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.badge-status-cancelled  { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.badge-status-active     { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.badge-status-inactive   { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }

.bg-success-soft   { background: #ecfdf5 !important; color: #065f46 !important; border: 1px solid #a7f3d0 !important; }
.bg-warning-soft   { background: #fffbeb !important; color: #b45309 !important; border: 1px solid #fde68a !important; }
.bg-danger-soft    { background: #fef2f2 !important; color: #991b1b !important; border: 1px solid #fecaca !important; }
.bg-info-soft      { background: #e0f2fe !important; color: #0369a1 !important; border: 1px solid #7dd3fc !important; }
.bg-primary-soft   { background: #eaf2ff !important; color: #0252d1 !important; border: 1px solid #bfdbfe !important; }
.bg-secondary-soft { background: #f1f5f9 !important; color: #475569 !important; border: 1px solid #e2e8f0 !important; }

/* ── Order Stepper Progress Bar ────────────────────── */
.order-tracker-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05);
}
.order-stepper {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 10px 0;
}
.order-stepper::before {
    content: '';
    position: absolute;
    top: 29px;
    left: 40px;
    right: 40px;
    height: 4px;
    background: #e2e8f0;
    z-index: 1;
    border-radius: 4px;
}
.order-stepper-progress {
    position: absolute;
    top: 29px;
    left: 40px;
    height: 4px;
    background: linear-gradient(90deg, #0366ff, #10b981);
    z-index: 2;
    border-radius: 4px;
    transition: width 0.4s ease;
}
.stepper-step {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}
.step-node {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: #94a3b8;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.stepper-step.completed .step-node {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25);
}
.stepper-step.active .step-node {
    background: #0366ff;
    border-color: #0366ff;
    color: #ffffff;
    box-shadow: 0 0 0 5px rgba(3, 102, 255, 0.18);
    animation: stepPulse 2s infinite;
}
@keyframes stepPulse {
    0%   { box-shadow: 0 0 0 0 rgba(3, 102, 255, 0.4); }
    70%  { box-shadow: 0 0 0 10px rgba(3, 102, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(3, 102, 255, 0); }
}
.step-text {
    margin-top: 10px;
    font-size: 0.84rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.3;
}
.stepper-step.active .step-text {
    color: #0366ff;
    font-weight: 700;
}
.stepper-step.completed .step-text {
    color: #0f172a;
}
.step-time {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 2px;
}
@media (max-width: 576px) {
    .order-stepper::before, .order-stepper-progress {
        top: 24px;
        left: 20px;
        right: 20px;
    }
    .step-node {
        width: 34px;
        height: 34px;
        font-size: 0.8rem;
    }
    .step-text {
        font-size: 0.72rem;
    }
    .step-time {
        display: none;
    }
}

/* ── Modern Order History Timeline ─────────────────── */
.order-timeline-v2 {
    position: relative;
    padding-left: 20px;
}
.order-timeline-v2::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 20px;
    bottom: 20px;
    width: 2px;
    background: #e2e8f0;
}
.timeline-item-v2 {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}
.timeline-item-v2:last-child {
    margin-bottom: 0;
}
.timeline-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: #64748b;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.timeline-item-v2.is-latest .timeline-icon-box {
    background: #0366ff;
    border-color: #0366ff;
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(3, 102, 255, 0.18);
}
.timeline-item-v2.is-success .timeline-icon-box {
    background: #ecfdf5;
    border-color: #10b981;
    color: #10b981;
}
.timeline-item-v2.is-primary .timeline-icon-box {
    background: #eaf2ff;
    border-color: #0366ff;
    color: #0366ff;
}
.timeline-body-v2 {
    flex: 1;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 12px 16px;
    transition: all 0.2s ease;
}
.timeline-item-v2.is-latest .timeline-body-v2 {
    background: #ffffff;
    border-color: #bfdbfe;
    box-shadow: 0 4px 12px rgba(3, 102, 255, 0.06);
}
.timeline-title-v2 {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}
.timeline-note-v2 {
    font-size: 0.84rem;
    color: #475569;
    margin-bottom: 6px;
    line-height: 1.4;
}
.timeline-time-v2 {
    font-size: 0.75rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Modern Card Styling for Order Details ─────────── */
.order-detail-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    margin-bottom: 24px;
}
.order-detail-card .card-head {
    padding: 18px 24px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
}
.order-detail-card .card-head h5 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.order-detail-card .card-body-content {
    padding: 24px;
}
.service-item-tile {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px dashed #e2e8f0;
}
.service-item-tile:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.service-item-tile:first-child {
    padding-top: 0;
}
.service-icon-tile {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #eaf2ff;
    color: #0366ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.partner-highlight-card {
    background: linear-gradient(135deg, #0c182e 0%, #1e293b 100%);
    border-radius: 16px;
    padding: 24px;
    color: #ffffff;
    box-shadow: 0 10px 25px -5px rgba(12, 24, 46, 0.25);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}
.partner-highlight-card::after {
    content: '';
    position: absolute;
    right: -20px;
    top: -20px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(3, 102, 255, 0.2) 0%, transparent 70%);
    pointer-events: none;
}