/* =====================================================================
   CRIBS & RIDES - Core Stylesheet (Brand Edition)
   Palette: Deep Navy #0F1330 + Cyan #1FF2FD  |  Fonts: Sora + Manrope
   Premium Nigerian real-estate + automotive marketplace. Mobile-first.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------- */
:root {
    /* Brand core (from the live Cribs & Rides identity) */
    --navy:         #0F1330;
    --navy-2:       #171C44;
    --navy-3:       #0A0D24;
    --cyan:         #1FF2FD;
    --cyan-2:       #00D4E6;
    --cyan-ink:     #0A7C8C;      /* accessible cyan for text on white */
    --cyan-soft:    rgba(31, 242, 253, 0.12);
    --cyan-line:    rgba(31, 242, 253, 0.28);
    --cyan-glow:    rgba(31, 242, 253, 0.25);

    /* Neutrals */
    --ink:          #0F1330;
    --ink-2:        #3B4263;
    --muted:        #6C7392;
    --muted-2:      #9AA1BC;
    --line:         #E6E8F3;
    --line-2:       #EFF1F8;
    --surface:      #FFFFFF;
    --bg:           #F5F7FB;
    --bg-2:         #EDF0F8;

    /* Functional */
    --success:      #1B9E5A;
    --success-bg:   #E8F6EE;
    --warning:      #B26A0A;
    --warning-bg:   #FBF1E1;
    --danger:       #C8372D;
    --danger-bg:    #FBEAE9;
    --amber:        #E8A200;
    --amber-bg:     #FCF3DC;

    /* Elevation */
    --shadow-xs:    0 1px 2px rgba(15, 19, 48, .06);
    --shadow-sm:    0 2px 10px rgba(15, 19, 48, .06);
    --shadow-md:    0 10px 30px rgba(15, 19, 48, .10);
    --shadow-lg:    0 24px 60px rgba(15, 19, 48, .16);
    --shadow-cyan:  0 12px 30px rgba(31, 242, 253, .22);

    /* Radii */
    --radius-xs:    6px;
    --radius-sm:    10px;
    --radius:       14px;
    --radius-lg:    20px;
    --radius-pill:  999px;

    /* Typography */
    --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
    --font-body:    'Manrope', 'Segoe UI', system-ui, sans-serif;

    /* Spacing scale */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

    /* Layout */
    --header-h:     74px;
    --header-h-sm:  64px;
    --bottomnav-h:  64px;
    --container:    1240px;
}

/* ---------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--surface);
    line-height: 1.65;
    font-size: 15.5px;
    margin: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 .55rem;
}

h1 { font-size: clamp(2rem, 4.6vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.1vw, 2.2rem); font-weight: 800; }
h3 { font-size: clamp(1.18rem, 2.3vw, 1.5rem); }
h4 { font-size: 1.12rem; }

p { margin: 0 0 1rem; color: var(--ink-2); }

a { color: var(--cyan-ink); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--navy); }

img { max-width: 100%; }

::selection { background: var(--cyan); color: var(--navy); }

:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }

.container-cr {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding-left: 18px;
    padding-right: 18px;
}

.section { padding: 76px 0; }
.section-sm { padding: 44px 0; }
.section-tight { padding: 48px 0; }
.bg-soft { background: var(--bg); }
.bg-2 { background: var(--bg-2); }
.bg-brand { background: var(--navy); color: #fff; }
.bg-ink { background: var(--navy-3); color: #fff; }

/* Dark-surface text handling */
.bg-brand h1, .bg-brand h2, .bg-brand h3, .bg-brand h4,
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4,
.trust-band h1, .trust-band h2, .trust-band h3, .trust-band h4,
.cta-band h1, .cta-band h2, .cta-band h3, .cta-band h4,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 { color: #fff; }
.bg-brand p, .bg-ink p, .trust-band p, .cta-band p, .site-footer p { color: rgba(255,255,255,.76); }

.text-muted-2 { color: var(--muted) !important; }
.text-brand { color: var(--cyan-ink) !important; }
.text-accent { color: var(--cyan-ink) !important; }
.text-cyan { color: var(--cyan) !important; }

.section-head { max-width: 680px; margin-bottom: 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-display);
    font-size: .72rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--cyan-ink);
    background: var(--cyan-soft); border: 1px solid var(--cyan-line);
    padding: 6px 13px; border-radius: var(--radius-pill); margin-bottom: 16px;
}
.section-eyebrow.on-dark { color: var(--cyan); background: rgba(31,242,253,.1); border-color: var(--cyan-line); }
.section-head h2 { margin-bottom: .6rem; }
.section-head p { font-size: 1.02rem; color: var(--muted); margin: 0; }

/* ---------------------------------------------------------------------
   3. BUTTONS
   --------------------------------------------------------------------- */
.btn {
    font-family: var(--font-display);
    font-weight: 700;
    border-radius: var(--radius-sm);
    padding: 12px 22px;
    font-size: .92rem;
    transition: transform .18s ease, box-shadow .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    line-height: 1.2; letter-spacing: .01em;
    border: 1.5px solid transparent;
}
.btn:active { transform: translateY(1px) scale(.995); }
.btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.btn i { font-size: .95em; }

.btn-brand {
    background: linear-gradient(135deg, var(--cyan), var(--cyan-2));
    color: var(--navy); border-color: transparent;
    box-shadow: 0 6px 18px rgba(31,242,253,.22);
}
.btn-brand:hover { color: var(--navy); transform: translateY(-2px); box-shadow: var(--shadow-cyan); }

.btn-accent {
    background: var(--cyan); color: var(--navy); border-color: transparent;
}
.btn-accent:hover { background: var(--cyan-2); color: var(--navy); transform: translateY(-2px); box-shadow: var(--shadow-cyan); }

.btn-ink { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-ink:hover { background: var(--navy-3); border-color: var(--navy-3); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-outline-brand { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-outline-brand:hover { background: var(--navy); color: #fff; }

.btn-outline-light-2 { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.btn-outline-light-2:hover { background: #fff; color: var(--navy); border-color: #fff; }

.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink-2); }
.btn-ghost:hover { background: var(--bg); border-color: var(--muted-2); color: var(--navy); }

.btn-whatsapp { background: #25D366; border-color: #25D366; color: #06351b; }
.btn-whatsapp:hover { background: #1FB855; border-color: #1FB855; color: #04260f; }

.btn-lg { padding: 15px 30px; font-size: 1rem; border-radius: var(--radius-sm); }
.btn-sm { padding: 8px 15px; font-size: .82rem; }
.btn-block { width: 100%; }

/* ---------------------------------------------------------------------
   4. BADGES / CHIPS / PILLS
   --------------------------------------------------------------------- */
.badge-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-display);
    font-size: .69rem; font-weight: 700; letter-spacing: .02em;
    padding: 5px 10px; border-radius: var(--radius-pill);
    background: rgba(15,19,48,.78); color: #fff;
    line-height: 1.25; backdrop-filter: blur(4px);
}
.badge-chip i { font-size: .7rem; }
.badge-verified { background: var(--success); color: #fff; }
.badge-featured { background: var(--amber); color: #3a2c00; }
.badge-type { background: rgba(15,19,48,.82); color: #fff; }
.badge-available { background: var(--success-bg); color: var(--success); }
.badge-unavailable { background: var(--danger-bg); color: var(--danger); }
.badge-sm { font-size: .63rem; padding: 4px 8px; }

.pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .76rem; font-weight: 600; color: var(--ink-2);
    background: var(--bg); border: 1px solid var(--line);
    padding: 5px 11px; border-radius: var(--radius-pill);
}

/* ---------------------------------------------------------------------
   5. HEADER / NAVIGATION
   --------------------------------------------------------------------- */
.top-strip { background: var(--navy-3); color: rgba(255,255,255,.62); font-size: .78rem; padding: 8px 0; }
.top-strip a { color: rgba(255,255,255,.82); }
.top-strip a:hover { color: var(--cyan); }
.top-strip .sep { opacity: .3; margin: 0 10px; }
.top-strip .right { display: flex; align-items: center; gap: 16px; }
.top-strip i { color: var(--cyan); }

.site-header {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(15, 19, 48, .92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--cyan-line);
    transition: background .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.site-header.scrolled {
    background: rgba(10, 13, 36, .98);
    box-shadow: 0 10px 34px rgba(0,0,0,.38);
}
.navbar-cr {
    height: var(--header-h);
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    transition: height .28s ease;
}
@media (min-width: 992px) { .site-header.scrolled .navbar-cr { height: var(--header-h-sm); } }

.brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.brand-logo { height: 46px; width: auto; display: block; transition: height .28s ease, filter .25s ease; }
.site-header.scrolled .brand-logo { height: 40px; }
.brand-logo:hover { filter: drop-shadow(0 0 12px var(--cyan-glow)); }
.brand-mark {
    width: 40px; height: 40px; border-radius: 11px;
    background: linear-gradient(135deg, var(--cyan), var(--cyan-2)); color: var(--navy);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.02rem; flex-shrink: 0;
}
.brand span.amp { color: var(--cyan); }
.brand small { display: block; font-size: .56rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.55); font-weight: 700; }

.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-links > li > a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 13px; border-radius: 8px;
    font-family: var(--font-display); font-size: .9rem; font-weight: 600;
    color: rgba(255,255,255,.88); position: relative;
}
.nav-links > li > a::after {
    content: ''; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 2px;
    background: linear-gradient(90deg, var(--cyan), transparent);
    transform: scaleX(0); transform-origin: left; transition: transform .25s ease; border-radius: 2px;
}
.nav-links > li > a:hover, .nav-links > li > a.active { color: var(--cyan); }
.nav-links > li > a:hover::after, .nav-links > li > a.active::after { transform: scaleX(1); }
.nav-links .caret { font-size: .6rem; opacity: .6; }

.nav-dropdown { position: relative; }
.nav-dropdown-menu {
    position: absolute; top: calc(100% + 12px); left: 0; min-width: 250px;
    background: var(--navy-2); border: 1px solid var(--cyan-line);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    padding: 8px; margin: 0; list-style: none;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: all .2s ease; z-index: 40;
}
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-menu a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 8px;
    font-size: .87rem; font-weight: 500; color: rgba(255,255,255,.85);
}
.nav-dropdown-menu a:hover { background: rgba(31,242,253,.1); color: var(--cyan); }
.nav-dropdown-menu a i { width: 16px; text-align: center; color: var(--cyan); opacity: .8; }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-icon-btn {
    position: relative; width: 44px; height: 44px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04);
    font-size: 1rem; transition: all .18s ease;
}
.nav-icon-btn:hover { color: var(--cyan); border-color: var(--cyan-line); background: rgba(31,242,253,.08); }
.nav-icon-btn .count {
    position: absolute; top: -6px; right: -6px;
    background: var(--cyan); color: var(--navy);
    font-family: var(--font-display); font-size: .62rem; font-weight: 800;
    min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; justify-content: center;
}
.nav-toggle {
    display: none; width: 44px; height: 44px; border-radius: 11px;
    border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); color: #fff;
    align-items: center; justify-content: center; font-size: 1.05rem;
}
.nav-toggle:hover { color: var(--cyan); border-color: var(--cyan-line); }

/* Mobile drawer */
.mobile-drawer { position: fixed; inset: 0; z-index: 1060; visibility: hidden; pointer-events: none; }
.mobile-drawer.open { visibility: visible; pointer-events: auto; }
.mobile-drawer-overlay { position: absolute; inset: 0; background: rgba(6,9,26,.62); opacity: 0; transition: opacity .25s ease; }
.mobile-drawer.open .mobile-drawer-overlay { opacity: 1; }
.mobile-drawer-panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(370px, 90vw);
    background: var(--navy); display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow: -20px 0 50px rgba(0,0,0,.4);
}
.mobile-drawer.open .mobile-drawer-panel { transform: translateX(0); }
.mobile-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px; border-bottom: 1px solid var(--cyan-line); }
.mobile-drawer-head .brand-logo { height: 42px; }
.mobile-drawer-body { flex: 1; overflow-y: auto; padding: 10px 12px 28px; }
.mobile-drawer-body a {
    display: flex; align-items: center; gap: 13px;
    padding: 13px 13px; border-radius: 10px;
    font-family: var(--font-display); font-weight: 600; color: rgba(255,255,255,.88); font-size: .96rem;
}
.mobile-drawer-body a:hover, .mobile-drawer-body a.active { background: rgba(31,242,253,.1); color: var(--cyan); }
.mobile-drawer-body a i { width: 20px; text-align: center; color: var(--cyan); opacity: .85; }
.mobile-drawer-group-label { font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); padding: 18px 13px 6px; }
.mobile-drawer-foot { padding: 16px 18px 24px; border-top: 1px solid var(--cyan-line); }

/* Mobile bottom nav */
.mobile-bottom-nav {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    background: rgba(15,19,48,.97); backdrop-filter: blur(14px);
    border-top: 1px solid var(--cyan-line);
    padding: 7px 4px calc(7px + env(safe-area-inset-bottom));
}
.mobile-bottom-nav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 5px 2px; color: rgba(255,255,255,.6); font-size: .65rem; font-weight: 700;
    font-family: var(--font-display); border-radius: 10px; position: relative;
}
.mobile-bottom-nav a i { font-size: 1.12rem; transition: transform .2s ease; }
.mobile-bottom-nav a.active { color: var(--cyan); }
.mobile-bottom-nav a.active i { transform: translateY(-1px); }

/* Floating WhatsApp */
.float-wa {
    position: fixed; right: 18px; bottom: 24px; z-index: 1035;
    width: 54px; height: 54px; border-radius: 50%;
    background: #25D366; color: #fff; font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 28px rgba(37,211,102,.4);
    transition: transform .2s ease, box-shadow .2s ease;
}
.float-wa:hover { background: #1FB855; color: #fff; transform: translateY(-3px) scale(1.03); }

/* ---------------------------------------------------------------------
   6. HERO
   --------------------------------------------------------------------- */
.hero {
    position: relative; color: #fff; background: var(--navy);
    min-height: 640px; overflow: hidden;
}
.hero-slider { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
    position: absolute; inset: 0; display: flex; align-items: center;
    padding: 96px 0 120px;
    opacity: 0; visibility: hidden;
    transition: opacity 1s ease;
}
.hero-slide.active { opacity: 1; visibility: visible; z-index: 1; }
.hero-slide .slide-bg {
    position: absolute; inset: 0; z-index: 0;
    background: center/cover no-repeat;
    transform: scale(1.12) translateX(1.5%);
    transition: transform 7s cubic-bezier(.22,.61,.36,1);
    will-change: transform; backface-visibility: hidden;
}
.hero-slide.active .slide-bg { transform: scale(1) translateX(0); }
.hero-slide .slide-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(105deg, rgba(10,13,36,.9) 0%, rgba(10,13,36,.7) 45%, rgba(10,13,36,.32) 100%);
}
.hero-slide .container-cr { position: relative; z-index: 2; width: 100%; }
.hero-content {
    max-width: 840px;
    opacity: 0; transform: translateY(22px);
    transition: opacity .7s ease .22s, transform .7s cubic-bezier(.2,.7,.2,1) .22s;
}
.hero-slide.active .hero-content { opacity: 1; transform: none; }
.hero h1 { color: #fff; margin-bottom: 1rem; max-width: none; font-size: clamp(1.85rem, 3.9vw, 2.9rem); text-shadow: 0 4px 30px rgba(0,0,0,.4); }
.hero h1 .hl { color: var(--cyan); }
.hero-lead { color: rgba(255,255,255,.8); font-size: 1.08rem; max-width: 56ch; margin-bottom: 1.7rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 22px; }
.hero-trust .item { display: flex; align-items: center; gap: 9px; font-size: .85rem; color: rgba(255,255,255,.82); font-weight: 600; }
.hero-trust .item i { color: var(--cyan); font-size: .95rem; }

.hero-badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.hero-stat {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .78rem; font-weight: 700; font-family: var(--font-display);
    color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.06); border: 1px solid var(--cyan-line);
    padding: 7px 14px; border-radius: var(--radius-pill);
    backdrop-filter: blur(6px);
}
.hero-stat i { color: var(--cyan); font-size: .82rem; }

.hero-slider-nav { position: absolute; bottom: 30px; right: 24px; z-index: 4; display: flex; gap: 10px; }
.hero-slider-nav button {
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.35); background: rgba(15,19,48,.4); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: all .2s ease; backdrop-filter: blur(6px);
}
.hero-slider-nav button:hover { background: var(--cyan); color: var(--navy); border-color: var(--cyan); }
.hero-indicators { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 8px; }
.hero-indicators .indicator {
    width: 26px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.3);
    cursor: pointer; transition: all .3s ease;
}
.hero-indicators .indicator.active { background: var(--cyan); width: 42px; }

/* ---------------------------------------------------------------------
   7. SEARCH WIDGET
   --------------------------------------------------------------------- */
.search-widget {
    background: #fff; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); overflow: hidden;
    margin-top: -96px; position: relative; z-index: 5;
    border: 1px solid var(--line);
}
.search-tabs { display: flex; gap: 4px; padding: 12px 12px 0; border-bottom: 1px solid var(--line-2); background: #fff; }
.search-tab {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 14px 22px; border: none; background: transparent;
    font-family: var(--font-display); font-weight: 700; font-size: .95rem;
    color: var(--muted); border-radius: 10px 10px 0 0;
    border-bottom: 3px solid transparent; cursor: pointer; margin-bottom: -1px;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.search-tab i { font-size: 1rem; }
.search-tab.active { color: var(--navy); border-bottom-color: var(--cyan); background: var(--cyan-soft); }
.search-pane { display: none; padding: 22px; }
.search-pane.active { display: block; animation: fadeUp .35s ease; }
.search-subtabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.search-subtab {
    border: 1px solid var(--line); background: #fff; color: var(--ink-2);
    padding: 8px 16px; border-radius: var(--radius-pill);
    font-family: var(--font-display); font-size: .84rem; font-weight: 600; cursor: pointer;
    transition: all .18s ease;
}
.search-subtab:hover { border-color: var(--cyan-line); color: var(--navy); }
.search-subtab.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.search-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr) auto; align-items: end; }
.search-field label {
    display: block; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
    font-family: var(--font-display);
}
.search-field .form-control, .search-field .form-select { height: 50px; border-radius: 10px; }

/* ---------------------------------------------------------------------
   8. FORMS
   --------------------------------------------------------------------- */
.form-label { font-family: var(--font-display); font-size: .82rem; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.form-label .req { color: var(--danger); }
.form-control, .form-select {
    border: 1.5px solid var(--line); border-radius: 10px;
    padding: 12px 15px; font-size: .94rem; color: var(--ink);
    background-color: #fff; font-family: var(--font-body);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.form-control::placeholder { color: var(--muted-2); }
.form-control:focus, .form-select:focus {
    border-color: var(--cyan-2); box-shadow: 0 0 0 4px var(--cyan-soft); outline: none;
}
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger); }
.invalid-feedback { font-size: .8rem; color: var(--danger); margin-top: 5px; display: none; }
.field-error .invalid-feedback { display: block; }
.field-error .form-control, .field-error .form-select { border-color: var(--danger); box-shadow: 0 0 0 4px var(--danger-bg); }
.form-hint { font-size: .78rem; color: var(--muted); margin-top: 5px; }
.form-check-input:checked { background-color: var(--navy); border-color: var(--navy); }
.form-check-input:focus { border-color: var(--cyan-2); box-shadow: 0 0 0 3px var(--cyan-soft); }

.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.checkbox-grid label {
    display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--ink-2);
    padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer;
    transition: all .15s ease;
}
.checkbox-grid label:hover { border-color: var(--cyan-line); background: var(--cyan-soft); }

/* ---------------------------------------------------------------------
   9. CARDS
   --------------------------------------------------------------------- */
.card-cr {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; display: flex; flex-direction: column; height: 100%;
    transition: transform .22s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-cr:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--cyan-line); }

.card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.card-cr:hover .card-media img { transform: scale(1.06); }
.card-media .grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,13,36,.34), transparent 46%); }
.card-media .badges-top { position: absolute; top: 11px; left: 11px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 2; }
.card-media .badges-top-right { position: absolute; top: 11px; right: 11px; display: flex; gap: 6px; z-index: 2; }

.fav-btn {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.94); border: none; color: var(--ink-2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .96rem; cursor: pointer; transition: all .18s ease; box-shadow: var(--shadow-xs);
}
.fav-btn:hover { background: #fff; color: var(--danger); transform: scale(1.08); }
.fav-btn.active { color: var(--danger); }
.fav-btn.active i { font-weight: 900; }

/* Card photo navigation */
.card-nav {
    position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
    z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: none;
    background: rgba(255,255,255,.94); color: var(--navy); font-size: .84rem;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: var(--shadow-sm);
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.card-nav:hover { background: var(--cyan); color: var(--navy); transform: translateY(-50%) scale(1.06); }
.card-nav:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
@media (hover: hover) {
    .card-nav { opacity: 0; }
    .card-cr:hover .card-nav, .card-nav:focus-visible { opacity: 1; }
}
.card-count {
    position: absolute; left: 10px; bottom: 10px; z-index: 3;
    background: rgba(15,19,48,.72); color: #fff;
    font-family: var(--font-display); font-size: .66rem; font-weight: 700;
    padding: 3px 9px; border-radius: var(--radius-pill); backdrop-filter: blur(4px);
}

.card-body-cr { padding: 16px 16px 17px; display: flex; flex-direction: column; flex: 1; }
.card-price { font-family: var(--font-display); font-weight: 800; font-size: 1.24rem; color: var(--navy); line-height: 1.1; letter-spacing: -.02em; }
.card-price .price-period { font-size: .74rem; font-weight: 600; color: var(--muted); margin-left: 2px; }
.card-title {
    font-family: var(--font-display); font-size: .99rem; font-weight: 700; color: var(--ink); margin: 9px 0 5px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em;
    overflow-wrap: anywhere;
}
.card-title a { color: inherit; }
.card-title a:hover { color: var(--cyan-ink); }
/* Detail-page listing title: professional hierarchy and safe wrapping */
.listing-detail-title { font-weight: 800; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; word-break: break-word; }
.card-loc { display: flex; align-items: center; gap: 6px; font-size: .81rem; color: var(--muted); margin-bottom: 11px; }
.card-loc i { color: var(--cyan-2); font-size: .8rem; }
.card-specs { display: flex; flex-wrap: wrap; gap: 13px; padding-top: 12px; border-top: 1px solid var(--line-2); margin-top: auto; }
.card-specs .spec { display: inline-flex; align-items: center; gap: 6px; font-size: .79rem; color: var(--ink-2); font-weight: 600; }
.card-specs .spec i { color: var(--muted); font-size: .82rem; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line-2); background: #FBFCFE; }
.card-foot .seller { font-size: .77rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }

.card-rail { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.card-rail > * { flex: 0 0 auto; width: 300px; scroll-snap-align: start; }
.card-rail::-webkit-scrollbar { height: 6px; }
.card-rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

/* ---------------------------------------------------------------------
   10. GRIDS
   --------------------------------------------------------------------- */
.grid-listings { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 576px) { .grid-listings { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .grid-listings { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .grid-listings.cols-4 { grid-template-columns: repeat(4, 1fr); } }

.grid-services { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 576px) { .grid-services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .grid-services { grid-template-columns: repeat(3, 1fr); } }

/* ---------------------------------------------------------------------
   11. FEATURE / SERVICE / TRUST / PROCESS
   --------------------------------------------------------------------- */
.feature-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px; height: 100%; transition: box-shadow .25s ease, transform .2s ease, border-color .25s ease;
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--cyan-line); }
.feature-icon {
    width: 50px; height: 50px; border-radius: 13px;
    background: var(--cyan-soft); color: var(--cyan-ink);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: 15px;
    border: 1px solid var(--cyan-line);
}
.feature-card h4 { font-size: 1.02rem; margin-bottom: 6px; }
.feature-card p { font-size: .9rem; margin: 0; color: var(--muted); }

.service-card {
    position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px; height: 100%; display: flex; flex-direction: column;
    transition: box-shadow .25s ease, transform .2s ease, border-color .25s ease;
}
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--cyan-line); }
.service-card .service-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: var(--cyan-soft); color: var(--cyan-ink);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 16px;
    border: 1px solid var(--cyan-line);
}
.service-card.rides .service-icon { background: rgba(232,162,0,.12); color: #A9750A; border-color: rgba(232,162,0,.3); }
.service-card h4 { font-size: 1.05rem; margin-bottom: 7px; }
.service-card p { font-size: .89rem; color: var(--muted); flex: 1; }
.service-card .learn { font-family: var(--font-display); font-weight: 700; font-size: .87rem; display: inline-flex; align-items: center; gap: 7px; color: var(--cyan-ink); transition: gap .2s ease; }
.service-card .learn:hover { gap: 12px; color: var(--navy); }
.service-card .tagline { font-family: var(--font-display); font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px; }

.trust-band { background: linear-gradient(135deg, var(--navy-3), var(--navy) 60%, var(--navy-2)); color: #fff; position: relative; overflow: hidden; }
.trust-band::before { content: ''; position: absolute; top: -120px; right: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(31,242,253,.12), transparent 70%); }
.trust-band .feature-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.trust-band .feature-card:hover { border-color: var(--cyan-line); }
.trust-band .feature-icon { background: rgba(31,242,253,.1); color: var(--cyan); border-color: var(--cyan-line); }
.trust-band h2, .trust-band h4 { color: #fff; }
.trust-band p { color: rgba(255,255,255,.72); }

.step-list { display: grid; gap: 16px; }
.step-item { display: flex; gap: 16px; align-items: flex-start; }
.step-num {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    background: var(--cyan-soft); color: var(--cyan-ink); border: 1px solid var(--cyan-line);
    display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800;
}
.step-item h4 { font-size: 1rem; margin-bottom: 3px; }
.step-item p { font-size: .9rem; margin: 0; color: var(--muted); }

.process-flow { display: grid; gap: 0; }
.process-flow .pf-step { display: flex; gap: 18px; }
.process-flow .pf-rail { display: flex; flex-direction: column; align-items: center; }
.process-flow .pf-dot {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--cyan), var(--cyan-2)); color: var(--navy);
    font-family: var(--font-display); font-weight: 800; font-size: .85rem;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.process-flow .pf-line { width: 2px; flex: 1; background: var(--cyan-line); min-height: 26px; }
.process-flow .pf-content { padding-bottom: 24px; }
.process-flow .pf-step:last-child .pf-line { display: none; }
.process-flow .pf-content h4 { font-size: .98rem; margin-bottom: 3px; }
.process-flow .pf-content p { font-size: .88rem; color: var(--muted); margin: 0; }

/* ---------------------------------------------------------------------
   12. FILTERS
   --------------------------------------------------------------------- */
.marketplace-layout { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 992px) { .marketplace-layout { grid-template-columns: 300px 1fr; } }

.filter-panel {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px; position: sticky; top: calc(var(--header-h) + 16px);
}
.filter-panel h5 { font-family: var(--font-display); font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 12px; }
.filter-group { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line-2); }
.filter-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.filter-group > label { font-family: var(--font-display); font-size: .82rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; display: block; }

.marketplace-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.result-count { font-size: .9rem; color: var(--muted); }
.result-count strong { color: var(--navy); font-family: var(--font-display); }
.mobile-filter-actions { display: flex; gap: 10px; }
@media (min-width: 992px) { .mobile-filter-actions { display: none; } }

/* Filter drawer -> bottom sheet on mobile */
.filter-drawer { position: fixed; inset: 0; z-index: 1060; visibility: hidden; }
.filter-drawer.open { visibility: visible; }
.filter-drawer-overlay { position: absolute; inset: 0; background: rgba(6,9,26,.55); opacity: 0; transition: opacity .25s ease; }
.filter-drawer.open .filter-drawer-overlay { opacity: 1; }
.filter-drawer-panel {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh;
    background: #fff; border-radius: 22px 22px 0 0;
    transform: translateY(100%); transition: transform .32s cubic-bezier(.4,0,.2,1);
    display: flex; flex-direction: column; box-shadow: 0 -20px 50px rgba(0,0,0,.28);
}
.filter-drawer.open .filter-drawer-panel { transform: translateY(0); }
.filter-drawer-panel::before { content: ''; width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 12px auto 4px; }
.filter-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px 14px; border-bottom: 1px solid var(--line-2); }
.filter-drawer-body { flex: 1; overflow-y: auto; padding: 18px; }
.filter-drawer-foot { padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-2); display: flex; gap: 10px; background: #fff; }

/* ---------------------------------------------------------------------
   13. PAGINATION
   --------------------------------------------------------------------- */
.pager { display: flex; justify-content: center; gap: 6px; margin-top: 38px; flex-wrap: wrap; }
.pager a, .pager span {
    min-width: 42px; height: 42px; padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 10px;
    font-family: var(--font-display); font-size: .88rem; font-weight: 700; color: var(--ink-2); background: #fff;
    transition: all .18s ease;
}
.pager a:hover { border-color: var(--cyan-2); color: var(--navy); background: var(--cyan-soft); }
.pager .current { background: var(--navy); border-color: var(--navy); color: #fff; }
.pager .disabled { opacity: .4; pointer-events: none; }

/* ---------------------------------------------------------------------
   14. EMPTY / LOADING / SKELETON
   --------------------------------------------------------------------- */
.empty-state {
    text-align: center; padding: 64px 24px; background: #fff;
    border: 1px dashed var(--line); border-radius: var(--radius-lg);
}
.empty-state .icon {
    width: 76px; height: 76px; border-radius: 50%; background: var(--bg);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: var(--muted); margin-bottom: 18px;
}
.empty-state h3 { font-size: 1.2rem; margin-bottom: 8px; }
.empty-state p { color: var(--muted); max-width: 44ch; margin: 0 auto 20px; }

.skeleton { position: relative; overflow: hidden; background: var(--bg-2); border-radius: 8px; }
.skeleton::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
    animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skeleton-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.skeleton-card .sk-media { aspect-ratio: 4/3; }
.skeleton-card .sk-body { padding: 16px; display: grid; gap: 11px; }
.sk-line { height: 12px; border-radius: 6px; }
.sk-line.w-70 { width: 70%; } .sk-line.w-50 { width: 50%; } .sk-line.w-40 { width: 40%; }

.spinner {
    width: 18px; height: 18px; border: 2.5px solid rgba(15,19,48,.25);
    border-top-color: var(--navy); border-radius: 50%; animation: spin .7s linear infinite;
    display: inline-block; vertical-align: middle;
}
.btn-brand .spinner, .btn-accent .spinner, .btn-ink .spinner { border-color: rgba(15,19,48,.3); border-top-color: var(--navy); }
.btn-whatsapp .spinner { border-color: rgba(6,53,27,.3); border-top-color: #06351b; }
.spinner.brand { width: 34px; height: 34px; border-width: 3px; border-color: var(--cyan-soft); border-top-color: var(--cyan); }
@keyframes spin { 100% { transform: rotate(360deg); } }

.loading-overlay { position: fixed; inset: 0; z-index: 1090; background: rgba(255,255,255,.7); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; }
.loading-overlay.show { display: flex; }

/* ---------------------------------------------------------------------
   15. ALERTS / TOASTS
   --------------------------------------------------------------------- */
.alert-cr { display: flex; gap: 12px; align-items: flex-start; padding: 15px 17px; border-radius: 11px; font-size: .9rem; border: 1px solid transparent; }
.alert-cr i { margin-top: 2px; }
.alert-success { background: var(--success-bg); color: var(--success); border-color: #C4E3CF; }
.alert-danger { background: var(--danger-bg); color: var(--danger); border-color: #EFC9C6; }
.alert-warning { background: var(--warning-bg); color: var(--warning); border-color: #EFD9B4; }
.alert-info { background: var(--cyan-soft); color: var(--cyan-ink); border-color: var(--cyan-line); }

.toast-stack { position: fixed; top: 88px; right: 18px; z-index: 1095; display: grid; gap: 10px; width: min(370px, 92vw); }
.toast-cr {
    background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--cyan-2);
    border-radius: 11px; box-shadow: var(--shadow-lg); padding: 15px 17px;
    display: flex; gap: 12px; align-items: flex-start; animation: toastIn .28s ease;
}
.toast-cr.success { border-left-color: var(--success); }
.toast-cr.error { border-left-color: var(--danger); }
.toast-cr .t-body { flex: 1; }
.toast-cr strong { display: block; font-family: var(--font-display); font-size: .92rem; }
.toast-cr p { font-size: .84rem; margin: 2px 0 0; color: var(--muted); }
.toast-cr .t-close { background: none; border: none; color: var(--muted-2); cursor: pointer; font-size: .9rem; }
@keyframes toastIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------
   16. DETAIL PAGES
   --------------------------------------------------------------------- */
.detail-gallery { border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); position: relative; }
.detail-gallery .main-image { position: relative; aspect-ratio: 16 / 10; }
.detail-gallery .main-image img { width: 100%; height: 100%; object-fit: cover; }
.gallery-counter {
    position: absolute; bottom: 12px; right: 12px; z-index: 3;
    background: rgba(10,13,36,.72); color: #fff; font-family: var(--font-display);
    font-size: .74rem; font-weight: 700; padding: 5px 12px; border-radius: var(--radius-pill);
    backdrop-filter: blur(4px);
}
.gallery-nav {
    position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
    z-index: 4; width: 46px; height: 46px; border-radius: 50%; border: none;
    background: rgba(255,255,255,.92); color: var(--navy); font-size: 1.05rem;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: var(--shadow-md);
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.gallery-nav:hover { background: var(--cyan); color: var(--navy); transform: translateY(-50%) scale(1.06); }
.gallery-nav:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
@media (max-width: 575px) { .gallery-nav { width: 40px; height: 40px; right: 10px; font-size: .95rem; } }
.detail-gallery .thumbs { display: flex; gap: 8px; padding: 9px; overflow-x: auto; background: #fff; }
.detail-gallery .thumbs img { width: 94px; height: 68px; object-fit: cover; border-radius: 9px; cursor: pointer; border: 2px solid transparent; opacity: .78; transition: all .18s ease; flex-shrink: 0; }
.detail-gallery .thumbs img.active, .detail-gallery .thumbs img:hover { border-color: var(--cyan-2); opacity: 1; }

.detail-price { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3.5vw, 2.15rem); color: var(--navy); letter-spacing: -.02em; }
.detail-price .price-period { font-size: .9rem; font-weight: 600; color: var(--muted); }

.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .spec-grid { grid-template-columns: repeat(4, 1fr); } }
.spec-box { background: var(--bg); border: 1px solid var(--line); border-radius: 11px; padding: 15px; text-align: center; }
.spec-box .val { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--navy); }
.spec-box .lab { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }

.amenity-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; }
@media (min-width: 768px) { .amenity-list { grid-template-columns: repeat(3, 1fr); } }
.amenity-list .item { display: flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--ink-2); }
.amenity-list .item i { color: var(--cyan-2); font-size: .85rem; }

.seller-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; position: sticky; top: calc(var(--header-h) + 16px); box-shadow: var(--shadow-sm); }
.seller-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }

.detail-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 24px; overflow-x: auto; }
.detail-tab { padding: 13px 19px; border: none; background: none; white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--muted); border-bottom: 3px solid transparent; cursor: pointer; transition: all .18s ease; }
.detail-tab.active { color: var(--navy); border-bottom-color: var(--cyan); }
.detail-pane { display: none; }
.detail-pane.active { display: block; animation: fadeUp .3s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.mobile-action-bar {
    display: none; position: fixed; left: 0; right: 0; bottom: var(--bottomnav-h); z-index: 1038;
    background: rgba(15,19,48,.98); backdrop-filter: blur(14px);
    border-top: 1px solid var(--cyan-line); padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    gap: 10px; box-shadow: 0 -8px 26px rgba(0,0,0,.28);
}
.mobile-action-bar .btn { flex: 1; }
.mobile-action-bar .btn-icon { flex: 0 0 auto; width: 54px; }
.mobile-action-bar .btn-ink { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
.mobile-action-bar .btn-ink:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ---------------------------------------------------------------------
   17. BLOG
   --------------------------------------------------------------------- */
.blog-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .22s ease, box-shadow .25s ease, border-color .25s ease; }
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--cyan-line); }
.blog-card .media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-2); }
.blog-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.blog-card:hover .media img { transform: scale(1.05); }
.blog-card .body { padding: 19px; display: flex; flex-direction: column; flex: 1; }
.blog-cat { font-family: var(--font-display); font-size: .69rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-ink); margin-bottom: 9px; }
.blog-card h4 { font-size: 1.04rem; line-height: 1.35; margin-bottom: 8px; }
.blog-card h4 a { color: var(--ink); }
.blog-card h4 a:hover { color: var(--cyan-ink); }
.blog-card .excerpt { font-size: .89rem; color: var(--muted); flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-meta { display: flex; align-items: center; gap: 14px; font-size: .77rem; color: var(--muted); margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.blog-meta i { color: var(--cyan-2); }

/* Blog share buttons (visible on light backgrounds) */
.share-btn {
    width: 42px; height: 42px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); background: #fff; color: var(--navy);
    font-size: 1rem;
    transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.share-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.share-btn.whatsapp { color: #1FAF54; }
.share-btn.whatsapp:hover { background: #25D366; border-color: #25D366; color: #fff; }
.share-btn.x { color: #0F1419; }
.share-btn.x:hover { background: #0F1419; border-color: #0F1419; color: #fff; }
.share-btn.facebook { color: #1877F2; }
.share-btn.facebook:hover { background: #1877F2; border-color: #1877F2; color: #fff; }

.article-body { font-size: 1.05rem; color: var(--ink-2); }
.article-body h2 { font-size: 1.55rem; margin: 2rem 0 .8rem; }
.article-body h3 { font-size: 1.22rem; margin: 1.6rem 0 .6rem; }
.article-body p { margin-bottom: 1.1rem; }
.article-body ul, .article-body ol { margin: 0 0 1.1rem 1.2rem; color: var(--ink-2); }
.article-body li { margin-bottom: .4rem; }
.article-body img { border-radius: var(--radius); margin: 1.2rem 0; }

/* ---------------------------------------------------------------------
   18. TESTIMONIALS + CAROUSEL
   --------------------------------------------------------------------- */
.testimonial-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px; height: 100%; display: flex; flex-direction: column;
    transition: box-shadow .25s ease, transform .2s ease, border-color .25s ease;
}
.testimonial-card:hover { box-shadow: var(--shadow-md); border-color: var(--cyan-line); }
.testimonial-card .quote { color: var(--ink-2); font-size: .95rem; flex: 1; }
.testimonial-card .who { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.avatar-initials { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; background: var(--navy); color: var(--cyan); font-family: var(--font-display); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.stars { color: var(--amber); font-size: .82rem; letter-spacing: 1px; }
.stars .star-off { color: var(--line); }

.carousel-cr { position: relative; }
.carousel-viewport { overflow: hidden; }
.carousel-track { display: flex; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.carousel-slide { flex: 0 0 100%; padding: 0 10px; }
@media (min-width: 768px) { .carousel-slide { flex: 0 0 50%; } }
@media (min-width: 992px) { .carousel-slide { flex: 0 0 33.3333%; } }
.carousel-nav { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 26px; }
.carousel-nav button {
    width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--ink-2);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .18s ease;
}
.carousel-nav button:hover { border-color: var(--cyan-2); color: var(--navy); background: var(--cyan-soft); }
.carousel-dots { display: flex; gap: 7px; }
.carousel-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); cursor: pointer; transition: all .25s ease; }
.carousel-dots span.active { background: var(--cyan-2); width: 24px; border-radius: 4px; }

/* ---------------------------------------------------------------------
   19. FAQ
   --------------------------------------------------------------------- */
.faq-accordion .accordion-item { border: 1px solid var(--line); border-radius: var(--radius) !important; margin-bottom: 11px; overflow: hidden; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)) { border-color: var(--cyan-line); box-shadow: var(--shadow-sm); }
.faq-accordion .accordion-button { font-family: var(--font-display); font-weight: 700; font-size: .98rem; color: var(--ink); padding: 19px 21px; background: #fff; box-shadow: none; }
.faq-accordion .accordion-button:not(.collapsed) { background: var(--cyan-soft); color: var(--navy); }
.faq-accordion .accordion-button:focus { box-shadow: none; border-color: transparent; }
.faq-accordion .accordion-button::after { transition: transform .28s ease; }
.faq-accordion .accordion-body { padding: 0 21px 21px; color: var(--muted); font-size: .93rem; }

/* ---------------------------------------------------------------------
   20. CTA BANDS
   --------------------------------------------------------------------- */
.cta-band {
    background: linear-gradient(120deg, var(--navy-3), var(--navy) 55%, var(--navy-2));
    color: #fff; border-radius: var(--radius-lg); padding: 50px; position: relative; overflow: hidden;
    border: 1px solid var(--cyan-line);
}
.cta-band::after { content: ''; position: absolute; right: -80px; top: -80px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(31,242,253,.16), transparent 70%); }
.cta-band > * { position: relative; z-index: 2; }

/* ---------------------------------------------------------------------
   21. FOOTER
   --------------------------------------------------------------------- */
.site-footer { background: var(--navy-3); color: rgba(255,255,255,.62); padding: 64px 0 0; }
.site-footer h6 { color: #fff; font-family: var(--font-display); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; font-weight: 800; }
.site-footer a { color: rgba(255,255,255,.66); font-size: .89rem; }
.site-footer a:hover { color: var(--cyan); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-brand .brand-logo { height: 48px; margin-bottom: 4px; }
.footer-brand p { color: rgba(255,255,255,.6); font-size: .9rem; margin: 16px 0; max-width: 36ch; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: all .18s ease; }
.footer-social a:hover { background: var(--cyan); color: var(--navy); transform: translateY(-3px); }
.footer-contact-item { display: flex; gap: 11px; align-items: flex-start; font-size: .89rem; margin-bottom: 13px; color: rgba(255,255,255,.66); }
.footer-contact-item i { color: var(--cyan); margin-top: 3px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 48px; padding: 22px 0; font-size: .82rem; color: rgba(255,255,255,.5); }
.footer-bottom a { font-size: .82rem; }
.footer-newsletter .form-control { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: #fff; }
.footer-newsletter .form-control::placeholder { color: rgba(255,255,255,.45); }
.footer-newsletter .form-control:focus { background: rgba(255,255,255,.09); color: #fff; border-color: var(--cyan-line); box-shadow: 0 0 0 4px rgba(31,242,253,.12); }

/* ---------------------------------------------------------------------
   22. PAGE HEAD / BREADCRUMB
   --------------------------------------------------------------------- */
/* Inner-page hero: matches the navigation bar background (homepage .hero untouched) */
.page-head {
    background: var(--navy);
    border-bottom: 1px solid var(--cyan-line);
    padding: 46px 0;
    color: #fff;
    position: relative;
}
.page-head h1, .page-head h2, .page-head h3 { color: #fff; }
.page-head h1 { margin-bottom: 8px; }
.page-head p, .page-head .lead-lg { color: rgba(255,255,255,.78); max-width: 64ch; margin: 0; }
.page-head .text-muted-2 { color: rgba(255,255,255,.7) !important; }
.page-head .section-eyebrow { color: var(--cyan); background: rgba(31,242,253,.1); border-color: var(--cyan-line); }
.page-head .btn-ghost { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.3); }
.page-head .btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.5); }

.breadcrumb-cr { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); margin-bottom: 14px; flex-wrap: wrap; }
.breadcrumb-cr a { color: var(--muted); }
.breadcrumb-cr a:hover { color: var(--cyan-ink); }
.breadcrumb-cr .sep { opacity: .5; }
.page-head .breadcrumb-cr { color: rgba(255,255,255,.6); }
.page-head .breadcrumb-cr a { color: rgba(255,255,255,.8); }
.page-head .breadcrumb-cr a:hover { color: var(--cyan); }

/* ---------------------------------------------------------------------
   23. MISC
   --------------------------------------------------------------------- */
.divider { height: 1px; background: var(--line); border: 0; margin: 28px 0; }
.rounded-cr { border-radius: var(--radius); }
.shadow-cr { box-shadow: var(--shadow-md); }
.icon-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.icon-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--ink-2); }
.icon-list li i { color: var(--cyan-2); margin-top: 4px; }

.info-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.info-card .label { font-size: .73rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 4px; }
.info-card .value { font-family: var(--font-display); font-weight: 700; color: var(--ink); }

.stat-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (min-width: 768px) { .stat-strip { grid-template-columns: repeat(4, 1fr); } }
.stat-strip .stat .num { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--navy); }
.stat-strip .stat .lab { font-size: .82rem; color: var(--muted); }

/* ---------------------------------------------------------------------
   24. ANIMATION / REVEAL
   --------------------------------------------------------------------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.scroll-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.scroll-reveal.revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .scroll-reveal { opacity: 1 !important; transform: none !important; }
    .hero-slide { transition: opacity .25s ease !important; }
    .hero-slide .slide-bg { transition: none !important; transform: none !important; }
    .hero-slide .hero-content { transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------------------
   25. AUTH PAGES
   --------------------------------------------------------------------- */
.auth-container { padding: 52px 0 68px; background: var(--bg); }
.auth-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-sm); }
.auth-card .auth-title { font-size: 1.5rem; margin-bottom: 20px; }
.auth-footer { color: var(--muted); font-size: .9rem; }

/* ---------------------------------------------------------------------
   26. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .search-grid { grid-template-columns: repeat(3, 1fr) auto; }
}
@media (max-width: 991px) {
    .nav-links { display: none; }
    .nav-toggle { display: inline-flex; }
    .nav-actions .desktop-cta { display: none; }
    .mobile-bottom-nav { display: flex; }
    body { padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); }
    .float-wa { bottom: calc(var(--bottomnav-h) + 18px); }
    .mobile-action-bar { display: flex; }
    .section { padding: 54px 0; }
    .hero { min-height: 560px; }
    .hero-slide { padding: 62px 0 104px; }
    .hero-slider-nav { display: none; }
    .search-widget { margin-top: -74px; }
    .search-grid { grid-template-columns: repeat(2, 1fr); }
    .search-grid .search-submit-wrap { grid-column: 1 / -1; }
    .search-grid .search-submit-wrap .btn { width: 100%; }
    .cta-band { padding: 34px 24px; }
    .seller-card { position: static; }
    .filter-panel { display: none; }
    .filter-drawer-panel { max-width: 560px; margin: 0 auto; border-radius: 22px 22px 0 0; }
}
@media (max-width: 575px) {
    .container-cr { padding-left: 15px; padding-right: 15px; }
    .section { padding: 44px 0; }
    .top-strip .hide-sm { display: none; }
    .search-tabs { padding: 8px 8px 0; }
    .search-tab { padding: 12px 14px; font-size: .88rem; }
    .search-pane { padding: 16px; }
    .search-grid { grid-template-columns: 1fr; }
    .hero-slide { padding: 46px 0 92px; }
    .hero h1 { max-width: none; }
    .hero-indicators { bottom: 26px; }
    .detail-gallery .thumbs img { width: 76px; height: 56px; }
    .mobile-action-bar .btn span.label { display: none; }
    .mobile-action-bar .btn { padding-left: 10px; padding-right: 10px; }
    .card-rail > * { width: 82vw; }
    .grid-listings { gap: 18px; }
    .cta-band { padding: 28px 20px; }
    .testimonial-card { padding: 22px; }
}

/* ---------------------------------------------------------------------
   26b. LIST PROPERTY WIZARD (scoped to the List Property page)
   --------------------------------------------------------------------- */
.lw { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.lw-head { margin-bottom: 28px; }
.lw-progress { height: 6px; background: var(--line-2); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: 22px; }
.lw-progress-bar { display: block; height: 100%; width: 20%; background: linear-gradient(90deg, var(--cyan), var(--cyan-2)); border-radius: var(--radius-pill); transition: width .35s ease; }
.lw-steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0; padding: 0; }
.lw-steps li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--muted); font-family: var(--font-display); font-size: .76rem; font-weight: 600; cursor: default; }
.lw-steps li.done { cursor: pointer; }
.lw-dot { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); border: 1.5px solid var(--line); color: var(--muted); font-weight: 800; transition: all .25s ease; }
.lw-steps li.active .lw-dot { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 0 0 4px var(--cyan-soft); }
.lw-steps li.done .lw-dot { background: var(--cyan); border-color: var(--cyan); color: var(--navy); }
.lw-steps li.active .lw-label { color: var(--navy); }

.lw-panel { display: none; border: 0; padding: 0; margin: 0; }
.lw-panel.active { display: block; animation: fadeUp .35s ease; }
.lw-panel > h3 { font-size: 1.2rem; margin-bottom: 4px; }
.lw-panel > .lw-sub { color: var(--muted); font-size: .92rem; margin-bottom: 20px; }
.lw-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.lw-nav .btn { min-width: 132px; }
.lw-nav .spacer { flex: 1; }

/* Packages */
.lw-packages { display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 22px; }
@media (min-width: 576px) { .lw-packages { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .lw-packages { grid-template-columns: repeat(4, 1fr); } }
.lw-package { position: relative; display: block; cursor: pointer; }
.lw-package input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lw-package .pkg { position: relative; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 18px; height: 100%; background: #fff; transition: all .2s ease; }
.lw-package:hover .pkg { border-color: var(--cyan-line); }
.lw-package input:checked + .pkg { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-soft); }
.lw-package input:focus-visible + .pkg { outline: 3px solid var(--cyan); outline-offset: 2px; }
.lw-package .pkg-name { font-family: var(--font-display); font-weight: 800; color: var(--navy); font-size: .98rem; }
.lw-package .pkg-price { font-family: var(--font-display); font-weight: 800; font-size: 1.32rem; color: var(--navy); margin: 6px 0 2px; }
.lw-package .pkg-price small { font-size: .7rem; color: var(--muted); font-weight: 600; }
.lw-package .pkg-tag { font-size: .78rem; color: var(--muted); }
.lw-package ul { list-style: none; margin: 13px 0 0; padding: 0; display: grid; gap: 7px; font-size: .82rem; color: var(--ink-2); }
.lw-package ul li { display: flex; gap: 7px; align-items: flex-start; }
.lw-package ul li i { color: var(--cyan-2); margin-top: 3px; font-size: .78rem; }
.pkg-badge { position: absolute; top: -10px; right: 12px; background: var(--amber); color: #3a2c00; font-family: var(--font-display); font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); }
.pkg-check { position: absolute; top: 14px; right: 14px; color: var(--cyan-2); opacity: 0; transition: opacity .2s ease; }
.lw-package input:checked + .pkg .pkg-check { opacity: 1; }
.pkg-planned { font-size: .62rem; font-weight: 700; color: var(--warning); background: var(--warning-bg); border-radius: var(--radius-pill); padding: 2px 7px; margin-left: 4px; }

/* Payment summary */
.lw-payment { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 18px 20px; margin-bottom: 22px; }
.lw-payment .amt { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--cyan); }
.lw-payment .note { color: rgba(255,255,255,.7); font-size: .82rem; margin: 6px 0 0; }

/* Upload */
.lw-drop { border: 2px dashed var(--line); border-radius: var(--radius); padding: 34px 20px; text-align: center; cursor: pointer; transition: all .2s ease; background: var(--bg); }
.lw-drop:hover, .lw-drop.dragover { border-color: var(--cyan-2); background: var(--cyan-soft); }
.lw-drop i { font-size: 1.7rem; color: var(--cyan-2); margin-bottom: 8px; display: block; }
.lw-drop strong { font-family: var(--font-display); color: var(--navy); }
.lw-drop span { display: block; color: var(--muted); font-size: .84rem; margin-top: 4px; }
.lw-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; margin-top: 16px; }
.lw-preview { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.lw-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lw-preview button { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(15,19,48,.72); color: #fff; cursor: pointer; font-size: .85rem; line-height: 1; }
.lw-preview button:hover { background: var(--danger); }
.lw-preview .cover { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(15,19,48,.72); color: #fff; font-size: .62rem; text-align: center; padding: 3px; font-weight: 600; }
.lw-error { color: var(--danger); font-size: .82rem; margin-top: 8px; }

/* Review summary */
.lw-summary { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 22px; }
.lw-summary h4 { font-size: .95rem; margin-bottom: 10px; }
.lw-summary .row-line { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: .87rem; }
.lw-summary .row-line:last-child { border-bottom: 0; }
.lw-summary .k { color: var(--muted); }
.lw-summary .v { color: var(--navy); font-weight: 600; text-align: right; max-width: 60%; }

/* Success */
.lw-success { text-align: center; padding: 24px 12px; }
.lw-success[hidden] { display: none; }
.lw-success .ok { width: 82px; height: 82px; border-radius: 50%; background: var(--success-bg); color: var(--success); display: inline-flex; align-items: center; justify-content: center; font-size: 2.1rem; margin-bottom: 16px; animation: popIn .45s cubic-bezier(.2,.8,.2,1); }
@keyframes popIn { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.lw-ref { display: inline-block; background: var(--navy); color: var(--cyan); font-family: var(--font-display); font-weight: 800; padding: 8px 18px; border-radius: var(--radius-pill); letter-spacing: .05em; margin: 6px 0 14px; }

.lw-disclaimer { display: flex; gap: 10px; align-items: flex-start; background: var(--warning-bg); color: var(--warning); border: 1px solid #EFD9B4; border-radius: 10px; padding: 13px 15px; font-size: .85rem; }
.lw-disclaimer i { margin-top: 2px; }

@media (max-width: 575px) {
    .lw { padding: 18px; }
    .lw-steps .lw-label { display: none; }
    .lw-nav .btn { min-width: 0; flex: 1; }
    .lw-payment { padding: 16px; }
}

/* ---------------------------------------------------------------------
   User dashboard
   --------------------------------------------------------------------- */
.dash-layout { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 992px) { .dash-layout { grid-template-columns: 250px 1fr; } }
.dash-nav { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; position: sticky; top: calc(var(--header-h) + 16px); display: flex; gap: 6px; overflow-x: auto; }
@media (min-width: 992px) { .dash-nav { flex-direction: column; overflow: visible; } }
.dash-nav a { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 10px; font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--ink-2); white-space: nowrap; }
.dash-nav a i { width: 18px; text-align: center; color: var(--muted); }
.dash-nav a:hover { background: var(--bg); color: var(--navy); }
.dash-nav a.active { background: var(--navy); color: #fff; }
.dash-nav a.active i { color: var(--cyan); }
.dash-nav .dash-logout { color: var(--danger); }
.dash-nav .dash-logout i { color: var(--danger); }
@media (min-width: 992px) { .dash-nav .dash-logout { margin-top: 6px; border-top: 1px solid var(--line-2); padding-top: 12px; } }

.dash-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 768px) { .dash-stats { grid-template-columns: repeat(4, 1fr); } }
.dash-stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.dash-stat .num { font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; color: var(--navy); line-height: 1; }
.dash-stat .lab { font-size: .8rem; color: var(--muted); margin-top: 5px; }

.dash-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.dash-card h4 { margin-bottom: 12px; }

.dash-list { display: grid; gap: 12px; }
.dash-item { display: flex; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; transition: box-shadow .2s ease, border-color .2s ease; }
.dash-item:hover { box-shadow: var(--shadow-sm); border-color: var(--cyan-line); }
.dash-item img { width: 104px; height: 78px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.dash-item-body { flex: 1; min-width: 0; }
.dash-item-title { font-family: var(--font-display); font-weight: 700; color: var(--ink); display: block; margin-bottom: 2px; }
.dash-item-title:hover { color: var(--cyan-ink); }

.dash-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-width: 620px; }
.dash-table th, .dash-table td { padding: 12px 14px; text-align: left; font-size: .86rem; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.dash-table th { font-family: var(--font-display); font-weight: 700; color: var(--ink); background: var(--bg); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.dash-table tr:last-child td { border-bottom: 0; }
@media (max-width: 575px) { .dash-item img { width: 84px; height: 64px; } }

/* ---------------------------------------------------------------------
   Premium authentication
   --------------------------------------------------------------------- */
.auth-shell { display: grid; grid-template-columns: 1fr; background: var(--bg); }
@media (min-width: 992px) { .auth-shell { grid-template-columns: 1.05fr 1fr; } }
.auth-visual { position: relative; background: var(--navy) center/cover no-repeat; color: #fff; padding: 28px 22px; min-height: 190px; display: flex; align-items: flex-end; }
.auth-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(10,13,36,.5), rgba(10,13,36,.93)); }
.auth-visual-inner { position: relative; z-index: 2; max-width: 480px; animation: fadeUp .5s ease both; }
.auth-visual-inner h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: .5rem; }
.auth-visual-inner p { color: rgba(255,255,255,.82); margin: 0 0 1rem; }
.auth-visual .hero-stat { margin: 0 6px 6px 0; }
@media (min-width: 992px) { .auth-visual { padding: 52px; min-height: auto; align-items: flex-end; } }
.auth-panel { display: flex; align-items: center; justify-content: center; padding: 32px 16px 56px; }
@media (min-width: 992px) { .auth-panel { padding: 56px 40px; } }
.auth-panel .auth-card { width: 100%; max-width: 480px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-sm); animation: fadeUp .5s ease both; }
@media (max-width: 575px) { .auth-panel .auth-card { padding: 22px 18px; } }
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-head .mark { width: 56px; height: 56px; border-radius: 15px; background: linear-gradient(135deg, var(--cyan), var(--cyan-2)); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; margin-bottom: 12px; }
.auth-head h1 { font-size: 1.5rem; margin-bottom: 4px; }
.auth-head p { color: var(--muted); font-size: .92rem; margin: 0; }

.pw-wrap { position: relative; }
.pw-wrap .form-control { padding-right: 48px; }
.pw-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 38px; height: 38px; border: none; background: transparent; color: var(--muted); border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color .18s ease, background .18s ease; }
.pw-toggle:hover { color: var(--navy); background: var(--bg); }
.pw-toggle:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

.pw-strength { display: flex; gap: 5px; margin-top: 8px; }
.pw-strength span { height: 5px; flex: 1; border-radius: 3px; background: var(--line); transition: background .25s ease; }
.pw-strength.s1 span:nth-child(1) { background: var(--danger); }
.pw-strength.s2 span:nth-child(-n+2) { background: var(--warning); }
.pw-strength.s3 span:nth-child(-n+3) { background: #3FAE5A; }
.pw-strength.s4 span { background: var(--success); }
.pw-strength-label { font-size: .76rem; color: var(--muted); margin-top: 4px; }

.field-msg { font-size: .78rem; margin-top: 5px; display: none; }
.field-msg.show { display: block; }
.field-msg.ok { color: var(--success); }
.field-msg.bad { color: var(--danger); }

.seg-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.seg-card { position: relative; display: block; cursor: pointer; margin: 0; }
.seg-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-card .seg-body { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px; display: flex; gap: 10px; align-items: center; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; background: #fff; }
.seg-card .seg-body i { color: var(--cyan-ink); font-size: 1rem; width: 18px; text-align: center; }
.seg-card .seg-body strong { font-family: var(--font-display); font-size: .88rem; color: var(--navy); line-height: 1.2; }
.seg-card:hover .seg-body { border-color: var(--cyan-line); }
.seg-card input:checked + .seg-body { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-soft); }
.seg-card input:focus-visible + .seg-body { outline: 3px solid var(--cyan); outline-offset: 2px; }

.auth-alt { text-align: center; color: var(--muted); font-size: .9rem; margin-top: 18px; }
.auth-note { display: flex; gap: 10px; align-items: flex-start; background: var(--cyan-soft); border: 1px solid var(--cyan-line); color: var(--cyan-ink); border-radius: 10px; padding: 12px 14px; font-size: .85rem; }

/* Dashboard responsive transaction cards */
.dash-mobile-list { display: grid; gap: 10px; }
.dash-mobile-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.dash-mobile-card .row-line { display: flex; justify-content: space-between; gap: 12px; font-size: .84rem; padding: 4px 0; }
.dash-mobile-card .k { color: var(--muted); }
.dash-mobile-card .v { color: var(--navy); font-weight: 600; text-align: right; }
.dash-item-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
@media (max-width: 991px) { .dash-nav { position: sticky; top: calc(var(--header-h) + 8px); z-index: 6; } }

/* List-property process stepper */
.lp-process { background: #fff; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.lp-step { position: relative; text-align: center; padding: 0 8px; }
.lp-step::before { content: ''; position: absolute; top: 27px; left: 50%; width: 100%; height: 2px; background: var(--line); z-index: 1; }
.lp-step:last-child::before { display: none; }
.lp-step-num {
    position: relative; z-index: 2; width: 54px; height: 54px; margin: 0 auto 14px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; color: var(--navy);
    background: #fff; border: 2px solid var(--cyan-line);
    box-shadow: 0 6px 18px rgba(31,242,253,.14);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease, color .25s ease;
}
.lp-step:hover .lp-step-num { border-color: var(--cyan); transform: translateY(-3px); box-shadow: 0 14px 28px rgba(31,242,253,.26); background: linear-gradient(135deg, var(--cyan), var(--cyan-2)); color: var(--navy); }
.lp-step-body h4 { font-size: .98rem; margin-bottom: 4px; }
.lp-step-body p { font-size: .82rem; color: var(--muted); margin: 0; }
@media (max-width: 767px) {
    .lp-steps { grid-template-columns: 1fr; gap: 0; }
    .lp-step { display: flex; text-align: left; gap: 16px; padding: 0 0 22px; }
    .lp-step-num { margin: 0; flex-shrink: 0; width: 46px; height: 46px; font-size: 1rem; }
    .lp-step::before { top: 46px; left: 23px; width: 2px; height: calc(100% - 46px); }
    .lp-step-body { padding-top: 6px; }
}

/* ---------------------------------------------------------------------
   27. ANCHOR / SECTION NAVIGATION (service pages)
   --------------------------------------------------------------------- */
html { scroll-padding-top: calc(var(--header-h) + 18px); }
[id] { scroll-margin-top: calc(var(--header-h) + 18px); }

.section-nav {
    position: sticky; top: var(--header-h); z-index: 1020;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    transition: top .28s ease;
}
.section-nav .container-cr {
    display: flex; gap: 8px; overflow-x: auto; padding-top: 13px; padding-bottom: 13px;
    scrollbar-width: none; -ms-overflow-style: none;
}
.section-nav .container-cr::-webkit-scrollbar { display: none; }
.section-nav a {
    white-space: nowrap; font-family: var(--font-display); font-weight: 600; font-size: .85rem;
    color: var(--muted); padding: 9px 16px; border-radius: var(--radius-pill);
    border: 1px solid var(--line); background: #fff; transition: all .18s ease;
    display: inline-flex; align-items: center; gap: 7px;
}
.section-nav a i { font-size: .82rem; color: var(--cyan-2); }
.section-nav a:hover { color: var(--navy); border-color: var(--cyan-line); background: var(--cyan-soft); }
.section-nav a.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.section-nav a.active i { color: var(--cyan); }

/* ---------------------------------------------------------------------
   28. PAGE-SPECIFIC REFINEMENTS
   --------------------------------------------------------------------- */
/* Process / steps hover */
.process-flow .pf-step { transition: transform .2s ease; }
.process-flow .pf-step:hover { transform: translateX(3px); }
.process-flow .pf-step:hover .pf-dot { box-shadow: 0 6px 18px var(--cyan-glow); }
.step-item { transition: transform .2s ease; }
.step-item:hover { transform: translateX(3px); }
.step-item:hover .step-num { background: var(--cyan); color: var(--navy); border-color: var(--cyan); }

/* Feature card lists on service pages */
.icon-list li { transition: transform .18s ease, color .18s ease; }
.icon-list li:hover { transform: translateX(2px); color: var(--navy); }

/* Section lead paragraph used under page heads */
.page-head .lead-lg { font-size: 1.05rem; color: var(--muted); max-width: 66ch; margin: 0; }

/* Value strip (About) */
.value-strip { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 576px) { .value-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .value-strip { grid-template-columns: repeat(4, 1fr); } }

/* Media panel used on service intros */
.media-panel { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-md); background: var(--bg-2); }
.media-panel img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Slightly larger form controls on service forms for touch */
.service-form .form-control, .service-form .form-select { padding: 13px 15px; }
.service-form .form-label { margin-bottom: 8px; }

@media print {
    .site-header, .mobile-bottom-nav, .float-wa, .site-footer, .mobile-action-bar, .top-strip, .hero-slider-nav, .hero-indicators, .section-nav { display: none !important; }
}

/* =====================================================================
   PREMIUM USER DASHBOARD SHELL
   ===================================================================== */
.dash-shell { display: grid; grid-template-columns: 264px 1fr; background: var(--bg); min-height: calc(100vh - var(--header-h)); }
@media (max-width: 991px) { .dash-shell { grid-template-columns: 1fr; } }
.dash-side { background: linear-gradient(180deg, var(--navy-3), var(--navy)); color: #fff; position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; }
@media (max-width: 991px) { .dash-side { display: none; } }
.dash-side-brand { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.dash-side-brand img { height: 36px; }
.dash-side-nav { flex: 1; overflow-y: auto; padding: 12px; }
.dash-side-nav::-webkit-scrollbar { width: 6px; }
.dash-side-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
.ds-label { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.38); padding: 16px 12px 8px; font-family: var(--font-display); font-weight: 800; }
.ds-link { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 10px; color: rgba(255,255,255,.78); font-family: var(--font-display); font-weight: 600; font-size: .91rem; margin-bottom: 2px; transition: background .18s ease, color .18s ease; }
.ds-link i { width: 20px; text-align: center; font-size: .95rem; color: rgba(255,255,255,.5); transition: color .18s ease; flex-shrink: 0; }
.ds-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.ds-link:hover i { color: var(--cyan); }
.ds-link.active { background: rgba(31,242,253,.12); color: #fff; box-shadow: inset 3px 0 0 var(--cyan); }
.ds-link.active i { color: var(--cyan); }
.ds-link.ds-logout { color: #ff9a92; margin-top: 6px; }
.ds-link.ds-logout i { color: #ff9a92; }
.ds-link.ds-logout:hover { background: rgba(255,90,80,.12); color: #ffb3ad; }

.dash-side-foot { flex-shrink: 0; border-top: 1px solid rgba(255,255,255,.08); padding: 12px; }
.ds-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.05); margin-bottom: 6px; }
.ds-user-meta { min-width: 0; }
.ds-user .nm { font-family: var(--font-display); font-weight: 700; font-size: .84rem; color: #fff; display: block; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-user .rl { font-size: .7rem; color: rgba(255,255,255,.55); display: block; }

.dash-close { margin-left: auto; width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dash-close:hover { background: rgba(255,255,255,.12); }

.dash-main { min-width: 0; }
.dash-top { position: sticky; top: var(--header-h); z-index: 25; display: flex; align-items: center; gap: 12px; padding: 12px 22px; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.dash-menu { display: none; width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--line); background: #fff; color: var(--navy); align-items: center; justify-content: center; flex-shrink: 0; }
@media (max-width: 991px) { .dash-menu { display: inline-flex; } }
.dash-search { position: relative; flex: 1; max-width: 460px; }
.dash-search input { width: 100%; height: 44px; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 14px 0 40px; font-size: .9rem; background: #fff; }
.dash-search input:focus { border-color: var(--cyan-2); box-shadow: 0 0 0 4px var(--cyan-soft); outline: none; }
.dash-search > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted-2); }
.dash-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 30; max-height: 360px; overflow-y: auto; display: none; }
.dash-search-results.show { display: block; }
.dash-search-results a { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 9px; color: var(--ink); }
.dash-search-results a:hover { background: var(--bg); }
.dash-search-results img { width: 46px; height: 36px; object-fit: cover; border-radius: 7px; flex-shrink: 0; }
.dash-search-results .sr-title { font-weight: 600; font-size: .85rem; }
.dash-search-results .sr-meta { font-size: .74rem; color: var(--muted); }
.dash-search-results .sr-empty { padding: 14px; text-align: center; color: var(--muted); font-size: .85rem; }

.dash-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.dash-icon-btn { position: relative; width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.dash-icon-btn:hover { color: var(--navy); border-color: var(--cyan-line); background: var(--cyan-soft); }
.dash-dot { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .62rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.dash-profile { display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.dash-profile:hover { border-color: var(--cyan-line); }
.dash-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: var(--cyan); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: .8rem; }
.dash-profile .nm { font-family: var(--font-display); font-weight: 700; font-size: .82rem; line-height: 1.1; }
.dash-profile .rl { font-size: .68rem; color: var(--muted); }
@media (max-width: 575px) { .dash-profile .meta { display: none; } }

.dash-body { padding: 22px; }
@media (max-width: 575px) { .dash-body { padding: 15px; } }
.dash-section { margin-bottom: 26px; }
.dash-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.dash-section-head h2 { font-size: 1.15rem; margin: 0; }

.welcome-hero { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--navy); color: #fff; padding: 34px; margin-bottom: 22px; border: 1px solid var(--cyan-line); min-height: 190px; display: flex; align-items: center; }
.welcome-hero .bg { position: absolute; inset: 0; background: center/cover no-repeat; opacity: .3; }
.welcome-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10,13,36,.93), rgba(10,13,36,.5)); }
.welcome-hero > * { position: relative; z-index: 2; }
.welcome-hero h1 { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 6px; }
.welcome-hero p { color: rgba(255,255,255,.84); margin: 0 0 16px; }
@media (max-width: 575px) { .welcome-hero { padding: 22px; min-height: 160px; } }

.sum-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 992px) { .sum-cards { grid-template-columns: repeat(4, 1fr); } }
.sum-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease; }
.sum-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--cyan-line); }
.sum-card .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--cyan-soft); color: var(--cyan-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; margin-bottom: 12px; }
.sum-card .num { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--navy); line-height: 1; }
.sum-card .lab { color: var(--muted); font-size: .82rem; margin-top: 5px; }
.sum-card .sub { color: var(--cyan-ink); font-size: .76rem; font-weight: 600; margin-top: 4px; }

.dash-listings { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .dash-listings { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1400px) { .dash-listings { grid-template-columns: repeat(3, 1fr); } }

.pkg-hero { background: linear-gradient(135deg, var(--navy-3), var(--navy) 60%, var(--navy-2)); color: #fff; border-radius: var(--radius-lg); padding: 24px; border: 1px solid var(--cyan-line); position: relative; overflow: hidden; height: 100%; }
.pkg-hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(31,242,253,.18), transparent 70%); }
.pkg-hero > * { position: relative; z-index: 2; }
.pkg-hero h3 { color: #fff; margin: 0 0 4px; font-size: 1.25rem; }
.pkg-hero .type { color: var(--cyan); font-size: .82rem; font-weight: 700; font-family: var(--font-display); }
.pkg-progress { height: 9px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; margin: 16px 0 12px; }
.pkg-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--cyan-2)); border-radius: 999px; transition: width .6s ease; }
.pkg-hero .stats { display: flex; gap: 22px; font-size: .85rem; color: rgba(255,255,255,.75); }
.pkg-hero .stats strong { font-family: var(--font-display); font-size: 1.15rem; display: block; color: #fff; }

.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.quick-card { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: all .18s ease; }
.quick-card:hover { border-color: var(--cyan-line); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.quick-card .ic { width: 42px; height: 42px; border-radius: 11px; background: var(--cyan-soft); color: var(--cyan-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.quick-card .tt { font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: .92rem; }
.quick-card .ds { font-size: .78rem; color: var(--muted); }

.activity-feed { display: grid; gap: 0; }
.activity-item { display: flex; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--line-2); }
.activity-item:last-child { border-bottom: 0; }
.activity-item .ai { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .9rem; }
.activity-item.t-info .ai { background: var(--cyan-soft); color: var(--cyan-ink); }
.activity-item.t-success .ai { background: var(--success-bg); color: var(--success); }
.activity-item.t-danger .ai { background: var(--danger-bg); color: var(--danger); }
.activity-item.t-warning .ai { background: var(--warning-bg); color: var(--warning); }
.activity-item .at { font-weight: 700; font-family: var(--font-display); font-size: .9rem; }
.activity-item .am { color: var(--muted); font-size: .84rem; }
.activity-item .as { color: var(--muted-2); font-size: .74rem; margin-top: 2px; }

.dash-dd { min-width: 340px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.dash-dd .dd-head { padding: 13px 16px; border-bottom: 1px solid var(--line-2); font-family: var(--font-display); font-weight: 700; }
.dash-dd .dd-body { max-height: 380px; overflow-y: auto; }
.dash-notif { display: flex; gap: 11px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
.dash-notif:last-child { border-bottom: 0; }
.dash-notif .ni { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .82rem; }
.dash-notif.warning .ni { background: var(--warning-bg); color: var(--warning); }
.dash-notif.danger .ni { background: var(--danger-bg); color: var(--danger); }
.dash-notif.success .ni { background: var(--success-bg); color: var(--success); }
.dash-notif.info .ni { background: var(--cyan-soft); color: var(--cyan-ink); }
.dash-notif .nt { font-weight: 700; font-size: .84rem; font-family: var(--font-display); }
.dash-notif .nm2 { color: var(--muted); font-size: .8rem; }
.dash-notif .ntime { color: var(--muted-2); font-size: .72rem; margin-top: 2px; }

.dash-drawer { position: fixed; inset: 0; z-index: 1060; visibility: hidden; }
.dash-drawer.open { visibility: visible; }
.dash-drawer-overlay { position: absolute; inset: 0; background: rgba(6,9,26,.6); opacity: 0; transition: opacity .25s ease; }
.dash-drawer.open .dash-drawer-overlay { opacity: 1; }
.dash-drawer-panel { position: absolute; top: 0; left: 0; bottom: 0; width: min(300px, 86vw); background: linear-gradient(180deg, var(--navy-3), var(--navy)); color: #fff; transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; }
.dash-drawer.open .dash-drawer-panel { transform: translateX(0); }

.support-panel { background: linear-gradient(135deg, var(--navy-3), var(--navy)); color: #fff; border-radius: var(--radius-lg); padding: 26px; border: 1px solid var(--cyan-line); position: relative; overflow: hidden; }
.support-panel::after { content: ''; position: absolute; right: -50px; bottom: -50px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(31,242,253,.16), transparent 70%); }
.support-panel > * { position: relative; z-index: 2; }

.ds-skel { background: var(--bg-2); border-radius: 8px; position: relative; overflow: hidden; }
.ds-skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent); animation: shimmer 1.4s infinite; }

/* =====================================================================
   DASHBOARD - MOBILE APP-LIKE EXPERIENCE
   ===================================================================== */
.dash-top-logo { display: none; height: 30px; }
.dash-bottom-nav { display: none; }

@media (max-width: 991px) {
    /* Dashboard uses its own app bar; hide the global site chrome */
    body.dashboard-page .site-header,
    body.dashboard-page .top-strip,
    body.dashboard-page .site-footer,
    body.dashboard-page .float-wa { display: none !important; }
    body.dashboard-page .mobile-bottom-nav { display: none !important; }
    body.dashboard-page { padding-bottom: 0; }

    .dash-top {
        top: 0; flex-wrap: wrap; gap: 10px;
        padding: 10px 14px;
        padding-top: calc(10px + env(safe-area-inset-top));
    }
    /* White logo on the light mobile app bar: sit it on a navy chip so it shows */
    .dash-top-logo { display: block; height: 32px; width: auto; background: var(--navy); padding: 3px 9px; border-radius: 8px; }
    .dash-search { order: 3; flex-basis: 100%; max-width: none; margin-top: 2px; }
    .dash-search input { height: 42px; }
    .dash-profile .meta { display: none; }
    .dash-body { padding: 14px; padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
    .welcome-hero { padding: 20px; min-height: 150px; border-radius: var(--radius); }
    .welcome-hero h1 { font-size: 1.35rem; }
    .welcome-hero p { font-size: .9rem; }
    .sum-cards { gap: 10px; }
    .sum-card { padding: 14px; }
    .sum-card .num { font-size: 1.45rem; }
    .sum-card .ic { width: 40px; height: 40px; margin-bottom: 10px; font-size: .95rem; }
    .dash-section { margin-bottom: 20px; }
    .dash-section-head h2 { font-size: 1.05rem; }
    .dash-bottom-nav { display: flex; }
    .search-subtabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; scrollbar-width: none; }
    .search-subtabs::-webkit-scrollbar { display: none; }
    .dash-side { top: 0; }
    .dash-drawer-panel .dash-side-brand { padding-top: calc(16px + env(safe-area-inset-top)); }
    .dash-drawer-panel .dash-side-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}

.dash-bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    background: rgba(15,19,48,.98);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--cyan-line);
    padding: 7px 4px calc(7px + env(safe-area-inset-bottom));
}
.dash-bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 2px; color: rgba(255,255,255,.6); font-family: var(--font-display); font-weight: 700; font-size: .64rem; border-radius: 10px; }
.dash-bottom-nav a i { font-size: 1.12rem; transition: transform .18s ease; }
.dash-bottom-nav a.active { color: var(--cyan); }
.dash-bottom-nav a.active i { transform: translateY(-1px); }

@media (max-width: 575px) {
    .dash-listings { gap: 14px; }
    .dash-listings .card-media { aspect-ratio: 16 / 10; }
    .quick-grid { gap: 10px; }
    .quick-card { padding: 13px; }
    .quick-card .ic { width: 38px; height: 38px; font-size: .95rem; }
    .pkg-hero { padding: 20px; }
    .dash-mobile-card { padding: 13px; }
    .support-panel { padding: 20px; }
    .activity-item { padding: 11px 2px; }
    .dash-top { padding-left: 12px; padding-right: 12px; }
}

/* =====================================================================
   VERIFICATION & VALUATION SERVICES
   Premium multi-step request experience + request details interface.
   ===================================================================== */

/* ---- Landing service panels ---- */
.svc-hero {
    position: relative; overflow: hidden; color: #fff;
    background:
        radial-gradient(1100px 460px at 82% -10%, rgba(31,242,253,.20), transparent 60%),
        linear-gradient(150deg, var(--navy-3), var(--navy) 55%, var(--navy-2));
}
.svc-hero .container-cr { position: relative; z-index: 2; padding-top: 62px; padding-bottom: 62px; }
.svc-hero h1 { color: #fff; max-width: 20ch; }
.svc-hero p { color: rgba(255,255,255,.78); max-width: 62ch; font-size: 1.05rem; }
.svc-hero .breadcrumb-cr { color: rgba(255,255,255,.6); margin-bottom: 14px; }
.svc-hero .breadcrumb-cr a { color: rgba(255,255,255,.82); }
.svc-hero .breadcrumb-cr a:hover { color: var(--cyan); }
.svc-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.svc-landing { padding: 64px 0; }
.svc-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 26px; height: 100%; display: flex; flex-direction: column;
    box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .22s ease, border-color .22s ease;
}
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--cyan-line); }
.svc-card .svc-ic {
    width: 54px; height: 54px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.35rem; color: var(--cyan-ink); background: var(--cyan-soft); border: 1px solid var(--cyan-line);
    margin-bottom: 16px;
}
.svc-card.rides .svc-ic { color: #A9750A; background: rgba(232,162,0,.12); border-color: rgba(232,162,0,.3); }
.svc-card h3 { font-size: 1.22rem; margin-bottom: 8px; }
.svc-card p { color: var(--muted); font-size: .93rem; flex: 1; }
.svc-card .svc-points { list-style: none; padding: 0; margin: 6px 0 18px; display: grid; gap: 9px; }
.svc-card .svc-points li { display: flex; gap: 10px; font-size: .89rem; color: var(--ink-2); }
.svc-card .svc-points i { color: var(--cyan-2); margin-top: 4px; }

/* Service overview cards: category, CTA and learn-more */
.service-card-actions {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.service-card-actions .btn { padding: 9px 16px; font-size: .85rem; }
.service-card-actions .learn { margin-top: 0; }

/* ---- Wizard ---- */
.wizard-wrap { max-width: 1040px; margin: 0 auto; }
.wizard-shell {
    position: relative;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md); overflow: hidden;
}
.wizard-shell::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 3;
    background: linear-gradient(90deg, var(--cyan), var(--cyan-2));
}
.wizard-head { padding: 26px 26px 22px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #fff, var(--bg)); }
.wizard-head h2 { font-size: 1.35rem; margin-bottom: 5px; }
.wizard-head p { margin: 0; color: var(--muted); font-size: .92rem; }

.wizard-steps {
    list-style: none; margin: 0; padding: 16px 26px; display: flex; align-items: center; gap: 6px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.wizard-steps::-webkit-scrollbar { display: none; }
.wizard-steps li { display: flex; align-items: center; gap: 10px; flex-shrink: 0; color: var(--muted); scroll-snap-align: start; }
.wizard-steps li .ws-num {
    position: relative;
    width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: .84rem;
    background: #fff; border: 2px solid var(--line); color: var(--muted);
    transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.wizard-steps li .ws-label { font-family: var(--font-display); font-weight: 600; font-size: .84rem; white-space: nowrap; }
.wizard-steps li.active .ws-num { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 0 0 4px rgba(15,19,48,.08); }
.wizard-steps li.active .ws-label { color: var(--navy); }
.wizard-steps li.done .ws-num { background: var(--cyan); border-color: var(--cyan); color: transparent; }
.wizard-steps li.done .ws-num::after {
    content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--navy); font-size: .78rem;
}
.wizard-steps li.done .ws-label { color: var(--ink-2); }
.wizard-steps .ws-sep { width: 24px; height: 2px; background: var(--line); border-radius: 2px; flex-shrink: 0; align-self: center; }

.wizard-body { padding: 28px 26px; }
.wizard-panel { display: none; animation: fadeUp .3s ease; }
.wizard-panel.active { display: block; }
.wizard-panel .panel-title { position: relative; font-size: 1.08rem; margin-bottom: 4px; padding-left: 15px; }
.wizard-panel .panel-title::before {
    content: ''; position: absolute; left: 0; top: .12em; bottom: .12em; width: 4px; border-radius: 2px;
    background: linear-gradient(180deg, var(--cyan), var(--cyan-2));
}
.wizard-panel .panel-sub { color: var(--muted); font-size: .88rem; margin-bottom: 20px; padding-left: 15px; }

.wizard-nav {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 26px; border-top: 1px solid var(--line);
    background: linear-gradient(180deg, var(--bg), #fff);
}
.wizard-nav .wn-spacer { flex: 1; }
.wizard-nav .btn { min-height: 46px; }
.wizard-progress { padding: 0 26px 18px; }
.wizard-progress .bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.wizard-progress .bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--cyan-2)); transition: width .3s ease; }

/* Review summary */
.review-block { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; background: var(--surface); overflow: hidden; }
.review-block h4 {
    font-size: .95rem; margin: 0; padding: 13px 18px;
    display: flex; align-items: center; gap: 9px;
    background: var(--bg); border-bottom: 1px solid var(--line);
}
.review-block h4 i { color: var(--cyan-ink); }
.review-block h4 .edit-link { margin-left: auto; font-size: .78rem; font-family: var(--font-body); font-weight: 600; color: var(--cyan-ink); cursor: pointer; }
.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; padding: 14px 18px; }
.review-grid .rv { display: flex; flex-direction: column; min-width: 0; }
.review-grid .rv .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); }
.review-grid .rv .v { font-size: .9rem; color: var(--ink); font-weight: 600; word-break: break-word; }
.review-files { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 18px 14px; }
.review-files .rf { border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; font-size: .8rem; display: inline-flex; align-items: center; gap: 7px; background: var(--bg); max-width: 100%; }
.review-files .rf i { color: var(--cyan-ink); }
.review-files .rf img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; }
.review-files .rf span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Repeatable upload rows (wizard file fields) */
.file-rows { display: grid; gap: 12px; }
.file-row { border: 1px dashed var(--cyan-line); background: #fff; border-radius: var(--radius); padding: 14px 14px 10px; }
.file-row .form-label { margin-bottom: 5px; }
.file-row .upload-list { margin-top: 10px; }
.file-row .upload-list:empty { display: none; }

/* ---- Uploads ---- */
.upload-field { margin-bottom: 14px; }
.upload-field .uf-label { font-family: var(--font-display); font-weight: 600; font-size: .84rem; color: var(--ink-2); margin-bottom: 7px; display: block; }
.upload-drop {
    position: relative; border: 1.5px dashed var(--line); border-radius: var(--radius);
    background: var(--bg); padding: 18px; text-align: center; transition: border-color .2s ease, background .2s ease;
}
.upload-drop:hover, .upload-drop.dragover { border-color: var(--cyan-2); background: var(--cyan-soft); }
.upload-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload-drop .ud-ic { font-size: 1.3rem; color: var(--cyan-ink); margin-bottom: 6px; }
.upload-drop .ud-title { font-family: var(--font-display); font-weight: 600; font-size: .88rem; color: var(--ink); }
.upload-drop .ud-hint { font-size: .76rem; color: var(--muted); margin-top: 3px; }
.upload-list { display: grid; gap: 8px; margin-top: 12px; }
.upload-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
    animation: fadeUp .25s ease;
}
.upload-item img { width: 42px; height: 42px; object-fit: cover; border-radius: 7px; border: 1px solid var(--line); flex-shrink: 0; }
.upload-item .ui-file { width: 42px; height: 42px; border-radius: 7px; background: var(--cyan-soft); color: var(--cyan-ink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.upload-item .ui-meta { min-width: 0; flex: 1; }
.upload-item .ui-name { font-size: .82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-item .ui-size { font-size: .72rem; color: var(--muted); }
.upload-item .ui-remove { background: none; border: none; color: var(--muted-2); cursor: pointer; font-size: .9rem; padding: 4px; }
.upload-item .ui-remove:hover { color: var(--danger); }

.wizard-upload-progress { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 12px; display: none; }
.wizard-upload-progress.show { display: block; }
.wizard-upload-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--cyan-2)); transition: width .15s linear; }

/* ---- Success panel ---- */
.svc-success { text-align: center; padding: 42px 24px; }
.svc-success .s-ic {
    width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center; font-size: 1.9rem;
    background: var(--success-bg); color: var(--success); border: 1px solid #C4E3CF;
}
.svc-success h2 { font-size: 1.4rem; margin-bottom: 6px; }
.svc-success p { color: var(--muted); max-width: 52ch; margin: 0 auto 14px; }
.svc-success .s-code {
    display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: var(--radius);
    background: var(--bg); border: 1px dashed var(--cyan-line); font-family: var(--font-display); font-weight: 700;
    color: var(--navy); font-size: 1.05rem; margin-bottom: 8px;
}
.svc-success .s-status { margin-bottom: 20px; }

/* ---- Status timeline ---- */
.service-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.service-timeline li { position: relative; padding: 0 0 20px 40px; }
.service-timeline li:last-child { padding-bottom: 0; }
.service-timeline li::before {
    content: ''; position: absolute; left: 13px; top: 22px; bottom: -2px; width: 2px; background: var(--line);
}
.service-timeline li:last-child::before { display: none; }
.service-timeline .st-dot {
    position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: .72rem;
    background: var(--bg); border: 1.5px solid var(--line); color: var(--muted); z-index: 1;
}
.service-timeline li.done .st-dot { background: var(--cyan-soft); border-color: var(--cyan-2); color: var(--cyan-ink); }
.service-timeline li.current .st-dot { background: var(--navy); border-color: var(--navy); color: #fff; }
.service-timeline .st-body { display: block; padding-top: 2px; }
.service-timeline .st-label { font-family: var(--font-display); font-weight: 600; font-size: .92rem; color: var(--ink); display: block; }
.service-timeline .st-time { font-size: .78rem; color: var(--muted); }

/* ---- Details page ---- */
.svc-detail-head {
    background: linear-gradient(150deg, var(--navy-3), var(--navy) 60%, var(--navy-2));
    color: #fff; padding: 40px 0;
}
.svc-detail-head h1 { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); }
.svc-detail-head .code { font-family: var(--font-display); color: var(--cyan); font-weight: 800; letter-spacing: .04em; }
.svc-detail-head .meta { color: rgba(255,255,255,.72); font-size: .87rem; display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.svc-detail-head .breadcrumb-cr { color: rgba(255,255,255,.6); margin-bottom: 12px; }
.svc-detail-head .breadcrumb-cr a { color: rgba(255,255,255,.82); }

.detail-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-xs); padding: 20px; height: 100%; }
.detail-card h3 { font-size: 1rem; margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
.detail-rows { display: grid; gap: 12px; }
.detail-rows.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-rows .dr { min-width: 0; }
.detail-rows .dr .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); display: block; }
.detail-rows .dr .v { font-size: .92rem; color: var(--ink); font-weight: 600; word-break: break-word; white-space: pre-wrap; }
.detail-notes { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; font-size: .9rem; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }

.doc-list { display: grid; gap: 10px; }
.doc-item { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.doc-item .di-ic { width: 40px; height: 40px; border-radius: 9px; background: var(--cyan-soft); color: var(--cyan-ink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.doc-item .di-meta { flex: 1; min-width: 0; }
.doc-item .di-name { font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-item .di-sub { font-size: .74rem; color: var(--muted); }
.doc-item .di-action { flex-shrink: 0; }

.svc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.svc-gallery a { display: block; border-radius: 11px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 3; background: var(--bg); }
.svc-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.svc-gallery a:hover img { transform: scale(1.05); }

/* ---- Result card ---- */
.result-card {
    border: 1px solid var(--cyan-line); border-radius: var(--radius-lg); overflow: hidden;
    background: linear-gradient(180deg, #fff, #F7FDFE); box-shadow: var(--shadow-sm);
}
.result-card .rc-top { background: linear-gradient(150deg, var(--navy-3), var(--navy)); color: #fff; padding: 22px 24px; }
.result-card .rc-top .eyebrow { font-family: var(--font-display); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.result-card .rc-top h3 { color: #fff; font-size: 1rem; margin: 4px 0 0; }
.result-card .rc-body { padding: 24px; }
.result-value { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 4.5vw, 2.5rem); color: var(--navy); letter-spacing: -.02em; }
.result-range { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--cyan-ink); }
.result-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); margin-bottom: 2px; }
.result-note { font-size: .84rem; color: var(--muted); border-left: 3px solid var(--amber); background: var(--amber-bg); padding: 10px 14px; border-radius: 0 9px 9px 0; }

/* ---- Dashboard service requests ---- */
.svc-req-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px; box-shadow: var(--shadow-xs); height: 100%; display: flex; flex-direction: column; gap: 10px; transition: box-shadow .2s ease, transform .2s ease; }
.svc-req-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.svc-req-card .src-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.svc-req-card .src-code { font-family: var(--font-display); font-weight: 700; font-size: .84rem; color: var(--navy); }
.svc-req-card .src-service { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.svc-req-card .src-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.svc-req-card .src-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .78rem; color: var(--muted); }
.svc-req-card .src-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* ---- Responsive ---- */
@media (max-width: 767px) {
    .svc-hero .container-cr { padding-top: 42px; padding-bottom: 42px; }
    .svc-landing { padding: 44px 0; }
    .wizard-head, .wizard-body, .wizard-nav, .wizard-progress { padding-left: 16px; padding-right: 16px; }
    .wizard-head { padding-top: 22px; padding-bottom: 18px; }
    .wizard-head h2 { font-size: 1.2rem; }
    .wizard-steps { padding: 12px 14px; gap: 4px; scroll-snap-type: x mandatory; }
    .wizard-steps li { gap: 7px; }
    .wizard-steps li .ws-num { width: 30px; height: 30px; font-size: .8rem; }
    .wizard-steps li .ws-label { display: none; }
    .wizard-steps li.active .ws-label { display: inline; }
    .wizard-steps .ws-sep { width: 12px; }
    .wizard-body { padding-top: 20px; padding-bottom: 20px; }
    .wizard-nav { flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
    .wizard-nav .btn { flex: 1; min-width: 0; min-height: 48px; }
    .wizard-nav [data-wizard-counter] { order: 3; flex-basis: 100%; text-align: center; }
    .review-grid, .detail-rows.two { grid-template-columns: 1fr; }
    .review-block h4 { padding: 12px 14px; }
    .review-grid { padding: 12px 14px; }
    .review-files { padding: 0 14px 12px; }
    .file-row { padding: 12px 12px 8px; }
    .svc-detail-head { padding: 30px 0; }
}
@media (max-width: 400px) {
    .wizard-body { padding-left: 13px; padding-right: 13px; }
    .svc-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   HOME - VEHICLE IMPORTATION PROCESS
   Mobile-first cards that become a connected horizontal stepper on wide
   screens. Scoped to .import-section so other process flows are unaffected.
   ===================================================================== */
.import-section .section-head { margin-bottom: 40px; }

.import-track {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.import-step {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 15px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    transition: transform .2s ease, box-shadow .22s ease, border-color .22s ease;
}
.import-step:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--cyan-line); }

.import-step .is-node {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--cyan), var(--cyan-2));
    color: var(--navy);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .9rem;
    letter-spacing: .01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(31, 242, 253, .3);
}
.import-step .is-body { min-width: 0; }
.import-step h4 { font-size: .95rem; margin: 0 0 3px; }
.import-step p { font-size: .84rem; color: var(--muted); margin: 0; line-height: 1.55; }

/* Tablet: two columns of step cards */
@media (min-width: 768px) {
    .import-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

/* Desktop: connected horizontal stepper */
@media (min-width: 1200px) {
    .import-track { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; margin-top: 12px; }
    .import-track::before {
        content: '';
        position: absolute;
        z-index: 0;
        top: 24px;
        left: calc(100% / 14);
        right: calc(100% / 14);
        height: 2px;
        background: var(--cyan-line);
    }
    .import-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0;
        padding: 0 10px;
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    .import-step:hover { transform: none; box-shadow: none; }
    .import-step .is-node {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 4px solid var(--bg);
        font-size: .98rem;
    }
    .import-step:hover .is-node { transform: translateY(-4px); box-shadow: var(--shadow-cyan); }
    .import-step .is-body { margin-top: 14px; }
    .import-step h4 { font-size: .9rem; }
    .import-step p { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .import-step,
    .import-step .is-node { transition: none; }
    .import-step:hover,
    .import-step:hover .is-node { transform: none; }
}

/* =====================================================================
   LISTING TITLES - responsive refinement
   Ensures professional titles wrap cleanly and remain readable on small
   screens without overflowing the card.
   ===================================================================== */
@media (max-width: 575px) {
    .card-title { font-size: .95rem; line-height: 1.32; min-height: 2.55em; }
}
@media (max-width: 380px) {
    .card-title { font-size: .92rem; }
}

/* =====================================================================
   SOLD OUT + GUEST INSPECTION BOOKING
   ===================================================================== */
.badge-soldout { background: #0F1330; color: #fff; }
.badge-soldout i { color: var(--cyan); }

/* Inspection booking page */
.bkin-listing-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.bk-media { aspect-ratio: 16 / 10; background: var(--bg-2); }
.bk-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-body { padding: 18px; }
.bk-type { font-family: var(--font-display); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-ink); }
.bk-body h3 { font-size: 1.15rem; margin: 6px 0 8px; overflow-wrap: anywhere; }
.bk-loc { font-size: .85rem; color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.bk-loc i { color: var(--cyan-2); }
.bk-price { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--navy); margin-bottom: 10px; }

@media (max-width: 575px) {
    .bk-body { padding: 15px; }
    .bk-body h3 { font-size: 1.05rem; }
}

/* Sold-out page section nav count pill */
.section-nav .count-pill { display: inline-block; margin-left: 6px; background: var(--cyan-soft); color: var(--cyan-ink); font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-pill); }
.section-nav a.active .count-pill { background: rgba(255,255,255,.2); color: #fff; }

/* =====================================================================
   LISTING PACKAGES - premium pricing interface (packages.php)
   Scoped to .pkg-plans so no other module is affected. Mobile-first.
   ===================================================================== */
.pkg-plans {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto 8px;
    align-items: stretch;
}
@media (min-width: 576px) { .pkg-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .pkg-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

.pkg-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px 22px 22px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .22s ease, border-color .22s ease;
}
.pkg-plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--cyan-line); }
.pkg-plan--featured { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-soft), var(--shadow-sm); }
.pkg-plan--featured:hover { box-shadow: 0 0 0 3px var(--cyan-soft), var(--shadow-md); }

.pkg-plan-flag {
    position: absolute; top: -12px; left: 22px;
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, var(--cyan), var(--cyan-2)); color: var(--navy);
    font-family: var(--font-display); font-size: .64rem; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 5px 12px; border-radius: var(--radius-pill);
    box-shadow: var(--shadow-cyan);
}
.pkg-plan-flag i { font-size: .62rem; }

.pkg-plan-name { font-size: 1.02rem; font-weight: 700; color: var(--navy); margin: 0 0 6px; overflow-wrap: anywhere; }
.pkg-plan-price {
    font-family: var(--font-display); font-weight: 800; font-size: 1.9rem;
    color: var(--navy); letter-spacing: -.02em; line-height: 1.1;
}
.pkg-plan-price .period { display: inline-block; font-size: .78rem; font-weight: 600; color: var(--muted); margin-left: 7px; letter-spacing: 0; }

.pkg-plan-stats { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pkg-plan-stats li {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .78rem; font-weight: 600; color: var(--ink-2);
    background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--radius-pill); padding: 5px 12px;
}
.pkg-plan-stats i { color: var(--cyan-ink); font-size: .8rem; }

.pkg-plan-divider { height: 1px; background: var(--line); margin: 18px 0; }

.pkg-plan-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .86rem; color: var(--ink-2); }
.pkg-plan-benefits li { display: flex; gap: 10px; align-items: flex-start; }
.pkg-plan-benefits li span { overflow-wrap: anywhere; }
.pkg-plan-benefits i { color: var(--cyan-2); margin-top: 3px; font-size: .82rem; flex-shrink: 0; }

.pkg-plan-foot { margin-top: auto; padding-top: 20px; }
.pkg-plan-note { font-size: .72rem; line-height: 1.5; color: var(--muted); margin: 0 0 12px; }
.pkg-plan-foot .btn { width: 100%; }
.pkg-plan-foot .btn i { font-size: .82em; transition: transform .2s ease; }
.pkg-plan-foot .btn:hover i { transform: translateX(3px); }

/* Current active package summary */
.pkg-current {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: var(--success-bg); border: 1px solid #C4E3CF; border-radius: var(--radius);
    padding: 15px 18px;
}
.pkg-current .ic {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: var(--success); border: 1px solid #C4E3CF; font-size: 1.05rem;
}
.pkg-current .body { flex: 1; min-width: 0; }
.pkg-current .body strong { color: var(--success); }
.pkg-current .body p { margin: 2px 0 0; font-size: .84rem; color: var(--ink-2); }

@media (max-width: 575px) {
    .pkg-plans { gap: 18px; }
    .pkg-plan { padding: 24px 18px 18px; }
    .pkg-plan-price { font-size: 1.65rem; }
    .pkg-plan-stats li { font-size: .74rem; padding: 4px 10px; }
    .pkg-plan-flag { left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .pkg-plan, .pkg-plan-foot .btn i { transition: none; }
    .pkg-plan:hover { transform: none; }
    .pkg-plan-foot .btn:hover i { transform: none; }
}

/* Listing context on a service request started from a listing */
.wizard-context { margin-top: 10px; font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.wizard-context i { color: var(--cyan-ink); }
.wizard-context strong { color: var(--ink); overflow-wrap: anywhere; }
.wizard-context .wc-link { color: var(--cyan-ink); font-weight: 600; }

/* Bank transfer payment instructions */
.bk-instructions { margin: 0; padding-left: 20px; font-size: .85rem; color: var(--ink-2); }
.bk-instructions li { margin-bottom: 6px; }
.bk-instructions strong { color: var(--navy); overflow-wrap: anywhere; }

/* Inline validation: make checkbox/radio errors visible too */
.field-error .form-check-input { outline: 2px solid var(--danger); outline-offset: 2px; }
.field-error .form-check-label { color: var(--danger); }
.field-error .invalid-feedback { display: block; }

/* Property-use tag (Residential / Commercial ...) */
.badge-use { background: var(--cyan-soft); color: var(--cyan-ink); border: 1px solid var(--cyan-line); }
.badge-use i { color: var(--cyan-2); }

/* =====================================================================
   ABOUT PAGE - premium enhancement (scoped to .about-page)
   ===================================================================== */
.about-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 576px) { .about-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.about-stat {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px 14px; box-shadow: var(--shadow-xs);
    transition: transform .2s ease, box-shadow .22s ease, border-color .22s ease;
}
.about-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--cyan-line); }
.about-stat .ic {
    width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--cyan-soft); color: var(--cyan-ink); border: 1px solid var(--cyan-line); font-size: .95rem; margin-bottom: 10px;
}
.about-stat .num { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.55rem; color: var(--navy); line-height: 1; }
.about-stat .lab { display: block; font-size: .78rem; color: var(--muted); margin-top: 5px; }

.about-media { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: var(--bg-2); }
.about-media img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.about-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,19,48,0) 48%, rgba(15,19,48,.62)); pointer-events: none; }
.about-media-badge {
    position: absolute; left: 16px; bottom: 16px; z-index: 2;
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(15,19,48,.82); color: #fff; border: 1px solid rgba(31,242,253,.35);
    border-radius: var(--radius-pill); padding: 8px 15px;
    font-family: var(--font-display); font-weight: 600; font-size: .8rem;
}
.about-media-badge i { color: var(--cyan); }

.about-page .pillar { position: relative; overflow: hidden; }
.about-page .pillar::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--cyan), var(--cyan-2));
    transform: scaleX(0); transform-origin: left; transition: transform .28s ease;
}
.about-page .pillar:hover::before { transform: scaleX(1); }

@media (max-width: 767px) {
    .about-media img { aspect-ratio: 16 / 11; }
    .about-stat .num { font-size: 1.35rem; }
    .about-stat { padding: 14px 12px; }
    .about-media-badge { left: 12px; bottom: 12px; padding: 7px 12px; font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) {
    .about-stat, .about-page .pillar::before { transition: none; }
    .about-stat:hover { transform: none; }
}