/**
 * MyBangladesh Main Stylesheet
 * Single Unified Delivery (Zero @import, Zero FOUC, 100% Stable)
 * Source of Truth: Homepage UI Permanent Design Reference
 */

/* ==========================================================================
   1. DESIGN TOKENS & CSS CUSTOM PROPERTIES
   ========================================================================== */
:root {
    /* Color Palette - Light Theme */
    --color-primary: #00503a;
    --color-primary-container: #006a4e;
    --color-primary-fixed: #9ef4d0;
    --color-primary-fixed-dim: #83d7b4;
    --color-on-primary: #ffffff;
    --color-on-primary-container: #92e7c3;
    --color-on-primary-fixed: #002116;
    --color-on-primary-fixed-variant: #00513b;
    --color-inverse-primary: #83d7b4;

    --color-secondary: #bb0027;
    --color-secondary-container: #e41b38;
    --color-secondary-fixed: #ffdad8;
    --color-secondary-fixed-dim: #ffb3b1;
    --color-on-secondary: #ffffff;
    --color-on-secondary-container: #fffbff;
    --color-on-secondary-fixed: #410007;
    --color-on-secondary-fixed-variant: #92001c;

    --color-tertiary: #5c4000;
    --color-tertiary-container: #7a5600;
    --color-tertiary-fixed: #ffdea8;
    --color-tertiary-fixed-dim: #ffba20;
    --color-on-tertiary: #ffffff;
    --color-on-tertiary-container: #ffce76;
    --color-on-tertiary-fixed: #271900;
    --color-on-tertiary-fixed-variant: #5e4200;

    --color-background: #fcf9f8;
    --color-on-background: #1c1b1b;
    --color-surface: #fcf9f8;
    --color-on-surface: #1c1b1b;
    --color-surface-dim: #dcd9d9;
    --color-surface-bright: #fcf9f8;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #f6f3f2;
    --color-surface-container: #f0eded;
    --color-surface-container-high: #eae7e7;
    --color-surface-container-highest: #e5e2e1;
    --color-surface-variant: #e5e2e1;
    --color-on-surface-variant: #3f4944;
    --color-outline: #6f7a73;
    --color-outline-variant: #bec9c2;
    --color-surface-tint: #046c50;
    --color-inverse-surface: #313030;
    --color-inverse-on-surface: #f3f0ef;

    --color-error: #ba1a1a;
    --color-on-error: #ffffff;
    --color-error-container: #ffdad6;
    --color-on-error-container: #93000a;

    /* Typography */
    --font-family-body: 'Be Vietnam Pro', 'Hind Siliguri', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-headline: 'Plus Jakarta Sans', 'Hind Siliguri', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-base: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-gutter: 16px;
    --spacing-container: 20px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* Border Radius */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-DEFAULT: 8px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-bottom-nav: 0 -4px 12px rgba(0, 0, 0, 0.05);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout Max Width */
    --container-max-width: 1280px;
}

/* Dark Theme Tokens */
html.dark,
body.dark,
[data-theme="dark"] {
    --color-background: #1c1b1b;
    --color-on-background: #f3f0ef;
    --color-surface: #1c1b1b;
    --color-on-surface: #f3f0ef;
    --color-surface-dim: #141313;
    --color-surface-bright: #2d2c2c;
    --color-surface-container-lowest: #141313;
    --color-surface-container-low: #242222;
    --color-surface-container: #2b2929;
    --color-surface-container-high: #313030;
    --color-surface-container-highest: #3c3a3a;
    --color-surface-variant: #313030;
    --color-on-surface-variant: #bec9c2;
    --color-outline: #89938d;
    --color-outline-variant: #3f4944;
    --color-inverse-surface: #f3f0ef;
    --color-inverse-on-surface: #1c1b1b;

    --color-primary: #83d7b4;
    --color-primary-container: #00503a;
    --color-on-primary: #003827;
    --color-on-primary-container: #9ef4d0;
    --color-inverse-primary: #00503a;

    --color-secondary: #ffb3b1;
    --color-secondary-container: #92001c;
    --color-on-secondary: #680012;
    --color-on-secondary-container: #ffdad8;

    --color-tertiary: #ffba20;
    --color-tertiary-container: #5c4000;
    --color-on-tertiary: #422c00;
    --color-on-tertiary-container: #ffdea8;

    --color-error: #ffb4ab;
    --color-error-container: #93000a;
    --color-on-error: #690005;
    --color-on-error-container: #ffdad6;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.6);
    --shadow-bottom-nav: 0 -4px 16px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    min-height: 100vh;
    line-height: 1.5;
    background-color: var(--color-background);
    color: var(--color-on-background);
    font-family: var(--font-family-body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}


/* Fast Touch Performance & Zero Tap Delay */
html,
body,
a,
button,
input,
select,
textarea,
.category-item,
.service-card,
.property-card,
.job-card,
.matrimony-card,
.trending-card,
.story-card,
.icon-btn,
.header-auth-btn,
.bnav-item {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a:active,
button:active,
.category-item:active,
.service-card:active,
.property-card:active,
.job-card:active,
.matrimony-card:active,
.trending-card:active,
.bnav-item:active {
    opacity: 0.82;
    transform: scale(0.97);
    transition: transform 50ms ease, opacity 50ms ease;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
    background: transparent;
    border: none;
    outline: none;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Responsive Visibility Helpers */
@media (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.font-headline {
    font-family: var(--font-family-headline);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--color-on-surface);
}

.headline-xl {
    font-size: 1.875rem;
    font-weight: 800;
    line-height: 1.2;
}

.headline-lg {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
}

.headline-md {
    font-size: 1.125rem;
    font-weight: 700;
}

.headline-sm {
    font-size: 1rem;
    font-weight: 600;
}

.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.font-normal { font-weight: 400; }

.text-muted { color: var(--color-on-surface-variant); }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-tertiary { color: var(--color-tertiary); }
.text-center { text-align: center; }
.text-right { text-align: right; }

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    overflow: hidden;
    vertical-align: middle;
}

.material-symbols-outlined.fill {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.icon-sm { font-size: 18px; }
.icon-md { font-size: 24px; }
.icon-lg { font-size: 32px; }

/* ==========================================================================
   4. LAYOUT ARCHITECTURE
   ========================================================================== */
.app-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--color-background);
}
body.page-is-other .app-wrapper {
    padding-bottom: 80px;
}
body.page-is-homepage .app-wrapper {
    min-height: 100vh;
    padding-bottom: 64px !important;
    box-sizing: border-box !important;
}

.app-container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 var(--spacing-gutter);
    position: relative;
}

@media (min-width: 768px) {
    .app-wrapper {
        padding-bottom: 0;
    }
    .app-container {
        max-width: 720px;
    }
}

@media (min-width: 1024px) {
    .app-container {
        max-width: 1080px;
        padding: 0 var(--spacing-container);
    }
}

@media (min-width: 1280px) {
    .app-container {
        max-width: var(--container-max-width);
    }
}

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }

.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }

.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (min-width: 768px) {
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lg\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

.section-wrapper {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

.section-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-on-surface);
}

.section-action {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.scroll-horizontal {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    scrollbar-width: none;
}

.scroll-horizontal::-webkit-scrollbar {
    display: none;
}

.scroll-horizontal > * {
    width: 180px !important;
    min-width: 180px !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start;
}

.scroll-item {
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* ==========================================================================
   5. COMPONENTS & INTERFACES
   ========================================================================== */

/* Top Header — Rich Sunset Orange Design */
.top-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: linear-gradient(180deg, #00503a 0%, #006a4e 100%);
    color: #ffffff;
    padding: max(10px, env(safe-area-inset-top)) 0 10px 0;
    box-shadow: 0 4px 20px rgba(0, 80, 58, 0.25);
    transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

.top-header.scrolled {
    background: #00503a;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
    width: 100%;
}

.header-logo-link,
.dash-topbar-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: 12px;
}

.header-logo-img,
.footer-logo-img {
    height: 75px !important;
    width: auto !important;
    max-height: 75px !important;
    object-fit: contain;
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 12px;
}

.desktop-nav-link {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 6px 12px !important;
    border-radius: var(--radius-full) !important;
    transition: all var(--transition-fast) !important;
    white-space: nowrap !important;
}

.desktop-nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.18) !important;
}

.desktop-nav-link.active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.25) !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

@media (max-width: 768px) {
    .header-logo-link {
        display: none !important;
    }

    .top-header {
        padding-top: max(8px, env(safe-area-inset-top));
        padding-bottom: 8px;
    }

    .header-row {
        gap: 4px !important;
        width: 100% !important;
        justify-content: space-between !important;
    }

    .header-actions {
        width: 100% !important;
        justify-content: space-between !important;
        gap: 4px !important;
        margin-left: 0 !important;
    }

    .header-location-pill {
        max-width: 110px !important;
        font-size: 0.72rem !important;
        padding: 4px 8px !important;
        flex-shrink: 1 !important;
    }

    .header-lang-btn {
        min-width: 48px !important;
        padding: 0 8px !important;
        font-size: 0.75rem !important;
        flex-shrink: 0 !important;
    }

    .header-theme-btn {
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    .header-user-btn {
        padding: 4px 8px !important;
        max-width: 110px !important;
        flex-shrink: 0 !important;
    }

    .header-auth-btn {
        padding: 4px 8px !important;
        font-size: 0.72rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* ==========================================================================
       MOBILE HEADER & PAGE BACKGROUND SYSTEM
       - Homepage Mobile: Orange top header background
       - All Other Mobile Pages: Clean White (Light) or Dark (Dark) background
       ========================================================================== */

    /* Homepage phone layout lives in assets/css/home.css */

    /* Lift the header above page content while its search or account menu is open */
    body.search-active .top-header,
    .top-header.user-menu-open,
    .top-header:has(#header-user-dropdown[style*="block"]) {
        z-index: 999999 !important;
    }
}

.header-auth-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 16px;
    border-radius: 50px;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.18s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.btn-login-pill {
    background: rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: #ffffff !important;
}

.btn-login-pill:hover {
    background: rgba(255, 255, 255, 0.3);
}

.btn-register-pill {
    background: #ffffff !important;
    border: 1.5px solid #ffffff;
    color: #006A4E !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.btn-register-pill:hover {
    background: #f0fdf4 !important;
    color: #004d38 !important;
}

.header-lang-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    min-width: 58px !important;
    padding: 0 12px !important;
    border-radius: var(--radius-full) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transition: background-color var(--transition-fast), border-color var(--transition-fast) !important;
}

.header-lang-btn:hover {
    background-color: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
}

.header-theme-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--radius-full) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: background-color var(--transition-fast) !important;
}

.header-theme-btn:hover {
    background-color: rgba(255, 255, 255, 0.28) !important;
}

.top-header .header-auth-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    border-radius: var(--radius-full) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: all var(--transition-fast) !important;
}

.top-header .header-btn-login {
    padding: 6px 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.top-header .header-btn-login:hover {
    background-color: rgba(255, 255, 255, 0.3) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

.top-header .header-btn-register {
    padding: 6px 18px !important;
    background-color: #ffffff !important;
    color: #006A4E !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.top-header .header-btn-register:hover {
    background-color: #f0fdf4 !important;
    color: #004d38 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22) !important;
}

.icon-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-on-surface);
    background-color: var(--color-surface-container-low);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.icon-btn:hover {
    background-color: var(--color-surface-container-high);
    transform: translateY(-1px);
}

/* Search Bar */
.search-wrapper {
    margin-top: var(--spacing-sm);
    position: relative;
}

.search-input-group {
    display: flex;
    align-items: center;
    background-color: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-full);
    padding: 6px 14px;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-input-group:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(134, 38, 6, 0.12);
}

.search-input-group .search-icon {
    color: var(--color-on-surface-variant);
    margin-right: 8px;
}

.search-input {
    flex: 1;
    font-size: 0.9375rem;
    color: var(--color-on-surface);
    padding: 6px 0;
}

.search-input::placeholder {
    color: var(--color-on-surface-variant);
    opacity: 0.7;
}

/* Hero Banner — Warm Sunset Orange Design matching reference */
.hero-banner {
    position: relative;
    border-radius: 20px;
    background: linear-gradient(135deg, #00503a 0%, #006a4e 50%, #004d38 100%);
    color: #ffffff;
    padding: 24px 20px 28px 20px;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 80, 58, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.hero-banner-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center right;
    opacity: 0.42;
    mix-blend-mode: overlay;
    transition: transform var(--transition-slow);
}

.hero-banner:hover .hero-banner-bg {
    transform: scale(1.03);
}

.hero-banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to top, rgba(160, 46, 11, 0.95) 0%, rgba(184, 56, 20, 0.65) 55%, transparent 100%);
    pointer-events: none;
}

[data-theme="dark"] .hero-banner {
    background: linear-gradient(135deg, #5c1806 0%, #85260c 50%, #9a3412 100%);
    border-color: rgba(254, 147, 44, 0.3);
}

[data-theme="dark"] .hero-banner-overlay {
    background: linear-gradient(to top, rgba(92, 24, 6, 0.95) 0%, rgba(92, 24, 6, 0.6) 60%, transparent 100%);
}

.hero-banner-content {
    position: relative;
    z-index: 3;
    max-width: 95%;
}

.hero-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.18;
    color: #ffffff;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.hero-highlight {
    color: #fde047;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
    font-size: 0.875rem;
    color: #ffedd5;
    opacity: 0.95;
    max-width: 320px;
    line-height: 1.4;
    font-weight: 400;
    margin-bottom: 16px;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #d1fae5;
    color: #00503a;
    font-size: 0.875rem;
    font-weight: 800;
    padding: 10px 22px;
    border-radius: 50px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.hero-cta:hover {
    transform: translateY(-2px);
    background-color: #fffbeb;
    color: #451a03;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.hero-banner-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 4;
}

.hero-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
}

.hero-dot.active {
    width: 24px;
    height: 6px;
    background: #ffffff;
}

@media (min-width: 768px) {
    .hero-banner {
        padding: 36px 40px 44px 40px;
        min-height: 260px;
    }
    .hero-banner-content {
        max-width: 65%;
    }
    .hero-title {
        font-size: 2.25rem;
    }
    .hero-subtitle {
        font-size: 1.0625rem;
        max-width: 360px;
    }
}

/* Trust Badges Bar Section */
.trust-badges-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-surface-container-lowest, #ffffff);
    border-radius: 20px;
    padding: 16px 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--color-outline-variant, #e2d7c7);
    margin-top: 16px;
    margin-bottom: 20px;
}

.trust-badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1;
    gap: 4px;
    min-width: 0;
}

.trust-badge-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    flex-shrink: 0;
}

.trust-badge-icon.bg-error-light {
    background-color: var(--color-error-container, #ffdad6);
    color: var(--color-error, #ba1a1a);
}

.trust-badge-icon.bg-amber-light {
    background-color: #fef3c7;
    color: #d97706;
}

.trust-badge-icon.bg-olive-light {
    background-color: #ecfccb;
    color: #4d6b38;
}

.trust-badge-icon.bg-blue-light {
    background-color: #e0f2fe;
    color: #0284c7;
}

.trust-badge-text-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    min-width: 0;
}

.trust-badge-title {
    font-family: var(--font-family-label);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-on-surface, #1c1b1f);
    line-height: 1.2;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
}

.trust-badge-sub {
    font-family: var(--font-family-label);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-on-surface-variant, #79747e);
    line-height: 1.2;
    display: block;
    white-space: normal;
    text-align: center;
    word-break: break-word;
    margin-top: 2px;
}

.trust-badge-divider {
    width: 1px;
    height: 32px;
    background-color: var(--color-outline-variant, #e2d7c7);
    opacity: 0.4;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .trust-badges-bar {
        padding: 14px 6px;
    }
    .trust-badge-divider {
        display: none;
    }
    .trust-badge-sub {
        display: none;
    }
    .trust-badge-icon {
        width: 38px;
        height: 38px;
        margin-bottom: 2px;
    }
    .trust-badge-title {
        font-size: 0.75rem;
    }
}

/* Category Grid & Cards */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg) var(--spacing-xs);
    margin-top: var(--spacing-sm);
}

@media (min-width: 768px) {
    .category-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: var(--spacing-lg) var(--spacing-md);
    }
}

@media (min-width: 1024px) {
    .category-grid {
        grid-template-columns: repeat(9, 1fr);
    }
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--transition-fast);
}

.category-item:hover {
    transform: translateY(-3px);
}

.category-icon-box {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast);
}

.category-icon-box span {
    font-size: 28px;
}

.category-item:hover .category-icon-box {
    transform: scale(1.05);
}

.cat-color-amber {
    background-color: #f59e0b !important;
    color: #ffffff !important;
}

.cat-color-olive {
    background-color: #4d6b38 !important;
    color: #ffffff !important;
}

.cat-color-terracotta {
    background-color: #b83814 !important;
    color: #ffffff !important;
}

.cat-color-brown {
    background-color: #4a2e2b !important;
    color: #ffffff !important;
}

.cat-color-crimson {
    background-color: #c0392b !important;
    color: #ffffff !important;
}

.cat-color-emerald {
    background-color: #16a34a !important;
    color: #ffffff !important;
}

.cat-color-yellow {
    background-color: #eab308 !important;
    color: #ffffff !important;
}

.cat-color-orange {
    background-color: #ea580c !important;
    color: #ffffff !important;
}

.cat-color-walnut {
    background-color: #795548;
    color: #ffffff;
}

.cat-color-neutral {
    background-color: var(--color-surface-container-high);
    border: 1px solid var(--color-outline-variant);
    color: var(--color-on-surface-variant);
}

.category-label {
    font-family: var(--font-family-label);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-on-surface);
    text-align: center;
    line-height: 1.25;
}

.category-icon-box.bg-primary {
    background-color: var(--color-surface-container-high);
    color: var(--color-primary);
}

.category-icon-box.bg-secondary {
    background-color: var(--color-secondary-fixed);
    color: var(--color-on-secondary-fixed-variant);
}

.category-icon-box.bg-tertiary {
    background-color: var(--color-tertiary-fixed);
    color: var(--color-on-tertiary-fixed-variant);
}

.category-icon-box.bg-outline {
    background-color: var(--color-surface-container-low);
    color: var(--color-on-surface-variant);
    border: 1px dashed var(--color-outline-variant);
}

/* Service Card (Horizontal & Vertical) */
.service-card {
    background-color: var(--color-surface-container-lowest);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-outline-variant);
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.service-card.scroll-item {
    width: 180px;
    min-width: 180px;
    flex-shrink: 0;
}

.service-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.service-card-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    background-color: var(--color-surface-container);
}

.service-card-body {
    padding: 10px 12px;
}

.service-card-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-on-surface);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.service-card-price {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-top: 4px;
}

/* Trending Card */
.trending-card {
    background-color: var(--color-surface-container-lowest);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-outline-variant);
    overflow: hidden;
    width: 200px;
    box-shadow: var(--shadow-sm);
    position: relative;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    flex-shrink: 0;
}

.trending-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.trending-card-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    background-color: var(--color-surface-container);
}

.trending-card-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-top-rated {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

.badge-best-value {
    background-color: var(--color-secondary);
    color: var(--color-on-secondary);
}

.trending-card-body {
    padding: 10px;
}

.trending-card-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-on-surface);
}

.trending-card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin-top: 4px;
}

.trending-card-rating .star {
    color: #ffba20;
    font-size: 14px;
}

/* Featured Job Card */
.job-card {
    background-color: var(--color-surface-container-lowest);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-outline-variant);
    padding: 14px;
    margin-bottom: var(--spacing-sm);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.job-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary);
}

.job-logo {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.job-info {
    flex: 1;
    min-width: 0;
}

.job-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-company {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin-top: 1px;
}

.job-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.job-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-container);
    color: var(--color-on-surface-variant);
}

.job-salary {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primary);
}

/* Customer Story Card */
.story-card {
    background-color: var(--color-surface-container-lowest);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-outline-variant);
    padding: 14px;
    box-shadow: var(--shadow-sm);
    width: 260px;
    flex-shrink: 0;
}

.story-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.story-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--color-primary);
    background-color: var(--color-primary-fixed);
}

.story-user {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-on-surface);
}

.story-stars {
    display: flex;
    color: #ffba20;
    font-size: 13px;
}

.story-text {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    line-height: 1.4;
    font-style: italic;
}

/* Bottom Navigation Bar (Mobile) — flat, minimal */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--color-surface-container-lowest);
    border-top: 1px solid color-mix(in srgb, var(--color-outline-variant) 55%, transparent);
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 56px;
    height: auto;
    padding: 4px 8px max(4px, env(safe-area-inset-bottom, 0px));
    transition: background-color var(--transition-base), border-color var(--transition-base);
}

@media (min-width: 768px) {
    .bottom-nav {
        display: none;
    }
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    min-height: 48px;
    color: var(--color-outline);
    padding: 4px 2px;
    text-decoration: none;
    text-align: center;
    transition: color var(--transition-fast);
}

.nav-item.active,
.nav-item:hover {
    color: var(--color-primary);
}

.nav-item .nav-icon {
    font-size: 23px;
    display: block;
    line-height: 1;
}

.nav-item .nav-label {
    font-size: 0.65rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
    display: block;
}

.nav-item.active .nav-label {
    font-weight: 700;
}

/* Desktop Navigation Header */
.desktop-nav {
    display: none;
}

@media (min-width: 768px) {
    .desktop-nav {
        display: flex;
        align-items: center;
        gap: var(--spacing-lg);
    }
    .desktop-nav-link {
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--color-on-surface-variant);
        transition: color var(--transition-fast);
    }
    .desktop-nav-link:hover,
    .desktop-nav-link.active {
        color: var(--color-primary);
    }
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    border-radius: var(--radius-md);
    padding: 10px 20px;
    transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

.btn-primary:hover {
    background-color: var(--color-primary-container);
    box-shadow: var(--shadow-sm);
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-on-secondary);
}

.btn-outline {
    border: 1px solid var(--color-outline);
    color: var(--color-on-surface);
}

.btn-outline:hover {
    background-color: var(--color-surface-container);
}

/* Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    padding: 6px 0;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 0.875rem;
    color: var(--color-on-surface);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.dropdown-item:hover {
    background-color: var(--color-surface-container);
    color: var(--color-primary);
}

.dropdown-divider {
    height: 1px;
    background-color: var(--color-outline-variant);
    margin: 4px 0;
}

/* ==========================================================================
   6. UTILITIES
   ========================================================================== */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }

.m-0 { margin: 0; }
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.p-0 { padding: 0; }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }

.w-full { width: 100%; }
.h-full { height: 100%; }
.rounded-full { border-radius: var(--radius-full); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transition {
    transition: all var(--transition-base);
}

.cursor-pointer {
    cursor: pointer;
}

/* ==========================================================================
   7. LIVE SEARCH & AUTOCOMPLETE DROPDOWN
   ========================================================================== */
.search-wrapper {
    position: relative;
}

.search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    max-height: 420px;
    overflow-y: auto;
    z-index: 1000;
    padding: 8px 0;
}

.search-section-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-outline);
    padding: 8px 16px 4px;
}

.search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--color-on-surface);
    transition: background-color var(--transition-fast);
    cursor: pointer;
}

.search-item:hover,
.search-item.active {
    background-color: var(--color-surface-container);
}

.search-item-thumb {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
}

.search-item-icon {
    font-size: 20px;
    color: var(--color-primary);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-container-high);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.search-item-info {
    flex: 1;
    min-width: 0;
}

.search-item-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-item-meta {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin-top: 2px;
}

.search-item-arrow {
    font-size: 18px;
    color: var(--color-outline);
    margin-left: auto;
    flex-shrink: 0;
}

.search-highlight {
    background: #ffea79;
    color: #1c1b1b;
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 700;
}

.dark .search-highlight {
    background: #b58900;
    color: #ffffff;
}

.search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 16px;
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
}

.search-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 16px;
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    text-align: center;
}

.search-tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 16px 12px;
}

.search-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--color-surface-container-high);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-on-surface);
    text-decoration: none;
    transition: background-color var(--transition-fast);
}

.search-tag:hover {
    background: var(--color-primary-fixed);
    color: var(--color-on-primary-fixed);
}

.search-view-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--color-outline-variant);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    margin-top: 4px;
}

.search-view-all:hover {
    background-color: var(--color-surface-container);
}

.spin {
    animation: spin 1s linear infinite;
    display: inline-block;
}

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

/* ==========================================================================
   8. PROPERTY & MATRIMONY SECTION CARDS
   ========================================================================== */
.property-card {
    width: 240px;
    min-width: 240px;
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    display: flex;
    flex-direction: column;
}

.property-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.property-card-img-wrap {
    position: relative;
    width: 100%;
    height: 140px;
    overflow: hidden;
}

.property-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.property-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

.badge-rent {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.badge-sale {
    background: var(--color-secondary);
    color: var(--color-on-secondary);
}

.property-tag-featured {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    backdrop-filter: blur(4px);
}

.property-card-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.property-price {
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--color-primary);
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.property-price .currency {
    font-size: 0.875rem;
    font-weight: 700;
}

.property-price .period {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-on-surface-variant);
}

.property-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.property-specs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    font-weight: 500;
    margin-top: 2px;
}

.spec-dot {
    color: var(--color-outline);
    font-size: 0.625rem;
}

.property-location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--color-outline);
    margin-top: 4px;
}

.property-location .loc-pin {
    font-size: 14px;
    color: var(--color-primary);
}

/* Matrimony Cards */
.matrimony-card {
    width: 260px;
    min-width: 260px;
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.matrimony-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

.matrimony-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.matrimony-avatar-wrap {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.matrimony-avatar {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.avatar-female {
    background: #ffe4e8;
    color: #d81b60;
}

.avatar-male {
    background: #e0f2fe;
    color: #0284c7;
}

.dark .avatar-female {
    background: rgba(216, 27, 96, 0.25);
    color: #ff80ab;
}

.dark .avatar-male {
    background: rgba(2, 132, 199, 0.25);
    color: #7dd3fc;
}

.matrimony-verified {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    background: var(--color-surface);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.matrimony-verified .material-symbols-outlined {
    font-size: 14px;
}

.matrimony-meta {
    flex: 1;
    min-width: 0;
}

.matrimony-id {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-outline);
    letter-spacing: 0.5px;
}

.matrimony-profession {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 2px 0 0;
}

.matrimony-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.matrimony-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.matrimony-tag {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-container-high);
    color: var(--color-on-surface-variant);
}

.matrimony-location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--color-outline);
}

.matrimony-location .loc-pin {
    font-size: 15px;
    color: var(--color-primary);
}

.matrimony-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    background: rgba(0, 80, 58, 0.08);
    color: var(--color-primary);
    border: 1px solid rgba(0, 80, 58, 0.16);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    transition: all var(--transition-fast);
    margin-top: 4px;
}

.matrimony-btn:hover {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

.dark .matrimony-btn {
    background: rgba(140, 250, 198, 0.12);
    color: #8cfac6;
    border: 1px solid rgba(140, 250, 198, 0.25);
}

.dark .matrimony-btn:hover {
    background: #8cfac6;
    color: #003827;
    border-color: #8cfac6;
}

/* ==========================================================================
   Authentication & User Management Styles (v0.3.0)
   ========================================================================== */

.auth-page-container {
    min-height: calc(100vh - 180px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 20px;
    background: radial-gradient(circle at 50% 10%, rgba(0, 80, 58, 0.05) 0%, transparent 65%);
}

.auth-card {
    width: 100%;
    max-width: 480px;
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: 24px;
    padding: 40px 36px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.09);
    animation: authFadeIn 0.3s ease-out;
}

.auth-card-wide {
    max-width: 620px;
    padding: 44px 40px;
}

@keyframes authFadeIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

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

.auth-logo-badge {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: rgba(0, 80, 58, 0.1);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.dark .auth-logo-badge {
    background: rgba(140, 250, 198, 0.15);
    color: #8cfac6;
}

.auth-title {
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--color-on-surface);
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.auth-subtitle {
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    margin: 0;
    line-height: 1.5;
}

/* Alerts */
.auth-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 24px;
    line-height: 1.4;
}

.auth-alert-danger {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.dark .auth-alert-danger {
    background: rgba(187, 0, 39, 0.15);
    color: #fca5a5;
    border-color: rgba(187, 0, 39, 0.3);
}

.auth-alert-success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.dark .auth-alert-success {
    background: rgba(0, 80, 58, 0.2);
    color: #86efac;
    border-color: rgba(0, 80, 58, 0.4);
}

.auth-alert .alert-icon {
    font-size: 22px;
    flex-shrink: 0;
}

/* Role Selector Tabs */
.auth-role-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: var(--color-surface-container);
    padding: 6px;
    border-radius: var(--radius-xl);
    margin-bottom: 24px;
}

.auth-role-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: var(--color-on-surface-variant);
    background: transparent;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition-base);
    word-break: break-word;
}

.auth-role-tab .material-symbols-outlined {
    font-size: 18px;
    flex-shrink: 0;
}

.auth-role-tab.active {
    background: var(--color-surface);
    color: var(--color-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.dark .auth-role-tab.active {
    background: var(--color-surface-container-high);
    color: #8cfac6;
}

@media (max-width: 480px) {
    .auth-role-tabs {
        padding: 4px;
        gap: 4px;
    }
    .auth-role-tab {
        padding: 8px 4px;
        font-size: 0.75rem;
        gap: 4px;
    }
    .auth-role-tab .material-symbols-outlined {
        font-size: 16px;
    }
}

/* Custom Select Component */
.custom-select-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 11px 14px;
    background: var(--color-surface);
    border: 1.5px solid var(--color-outline-variant);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-on-surface);
    cursor: pointer;
    transition: var(--transition-base);
    box-sizing: border-box;
    min-height: 46px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.input-with-icon .custom-select-trigger {
    padding-left: 44px;
}

.custom-select-trigger:hover,
.custom-select-trigger:focus-visible {
    border-color: var(--color-primary);
    background: var(--color-surface);
    outline: none;
}

.custom-select-wrapper.open .custom-select-trigger {
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px rgba(0, 106, 78, 0.14);
}

.custom-select-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 8px;
    flex: 1;
    text-align: left;
}

.custom-select-arrow {
    font-size: 20px;
    color: var(--color-on-surface-variant);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.custom-select-wrapper.open .custom-select-arrow {
    transform: rotate(180deg);
    color: var(--color-primary);
}

.custom-select-options {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 1.5px solid var(--color-outline-variant);
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2);
    z-index: 99999 !important;
    max-height: min(280px, 48vh);
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    display: none;
    padding: 6px;
    box-sizing: border-box;
    animation: authFadeIn 0.15s ease-out;
}

.custom-select-wrapper.drop-up .custom-select-options {
    top: auto;
    bottom: calc(100% + 6px);
    box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.2);
}

.custom-select-wrapper.open .custom-select-options {
    display: block;
}

/* Custom Scrollbar for Smooth Touch & Desktop Scrolling */
.custom-select-options::-webkit-scrollbar {
    width: 6px;
}
.custom-select-options::-webkit-scrollbar-track {
    background: transparent;
}
.custom-select-options::-webkit-scrollbar-thumb {
    background: var(--color-outline-variant, #ccc);
    border-radius: 6px;
}
.custom-select-options::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary, #006A4E);
}

.custom-select-search {
    padding: 6px 4px 8px 4px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--color-outline-variant);
    position: sticky;
    top: 0;
    background: var(--color-surface);
    z-index: 2;
}

.custom-select-search input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--color-outline-variant);
    border-radius: 10px;
    font-size: 0.875rem;
    color: var(--color-on-surface);
    background: var(--color-surface-container-low, #fcf9f8);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.18s ease;
}

.custom-select-search input:focus {
    border-color: var(--color-primary);
    background: var(--color-surface);
}

.custom-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-on-surface);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    box-sizing: border-box;
    min-height: 42px;
    -webkit-tap-highlight-color: transparent;
}

.custom-select-option:hover,
.custom-select-option:active {
    background: var(--color-surface-container-high, #f2e9dd);
    color: var(--color-primary, #00503a);
}

.custom-select-option.selected {
    background: rgba(0, 106, 78, 0.12);
    color: var(--color-primary);
    font-weight: 700;
}

.custom-select-option.selected::after {
    content: '✓';
    font-weight: 800;
    color: var(--color-primary);
    margin-left: 8px;
    font-size: 0.9375rem;
}

.dark .custom-select-option.selected {
    background: rgba(140, 250, 198, 0.18);
    color: #8cfac6;
}
.dark .custom-select-option.selected::after {
    color: #8cfac6;
}

/* Ensure Parent Cards Don't Clip Dropdowns */
.dash-section-card:has(.custom-select-wrapper.open),
.dash-form-group:has(.custom-select-wrapper.open),
.dash-form-grid:has(.custom-select-wrapper.open),
.form-group:has(.custom-select-wrapper.open) {
    overflow: visible !important;
}


/* Google Button */
.auth-btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 14px 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-full);
    color: var(--color-on-surface);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.auth-btn-google:hover {
    background: var(--color-surface-container);
    border-color: var(--color-outline);
    transform: translateY(-1px);
}

/* Auth Divider */
.auth-divider {
    position: relative;
    text-align: center;
    margin: 28px 0;
}

.auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-outline-variant);
}

.auth-divider span {
    position: relative;
    background: var(--color-surface);
    padding: 0 16px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-on-surface-variant);
}

/* Form Styles */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 576px) {
    .form-grid-2 {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .auth-card-wide {
        padding: 32px 24px;
    }
    .auth-card {
        padding: 32px 24px;
    }
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 2px;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-on-surface);
    margin-bottom: 2px;
}

.form-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-link-subtle {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.form-link-subtle:hover {
    text-decoration: underline;
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.input-with-icon .input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: var(--color-on-surface-variant);
    pointer-events: none;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--color-surface-container);
    border: 1px solid var(--color-outline-variant);
    border-radius: 12px;
    font-size: 0.9375rem;
    color: var(--color-on-surface);
    font-family: inherit;
    transition: var(--transition-base);
    box-sizing: border-box;
}

.input-with-icon .form-input,
.input-with-icon input,
.input-with-icon select,
.input-with-icon textarea {
    padding-left: 46px !important;
}

.input-with-icon input[type="password"],
.input-with-icon .form-input:has(~ .btn-pwd-toggle),
.input-with-icon:has(.btn-pwd-toggle) .form-input,
.input-with-icon:has(.btn-pwd-toggle) input {
    padding-right: 46px !important;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px rgba(0, 80, 58, 0.12);
}

.btn-pwd-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    z-index: 3;
    line-height: 1;
}

.btn-pwd-toggle:hover {
    color: var(--color-on-surface);
}

/* 6-Digit OTP Inputs */
.otp-inputs-grid {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 24px 0;
}

.otp-digit-input {
    width: 48px;
    height: 56px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-primary);
    background: var(--color-surface-container);
    border: 2px solid var(--color-outline-variant);
    border-radius: 14px;
    transition: var(--transition-base);
    box-sizing: border-box;
}

.otp-digit-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 0 0 4px rgba(0, 80, 58, 0.15);
    transform: translateY(-2px);
}

.dark .otp-digit-input {
    color: #8cfac6;
}

@media (max-width: 480px) {
    .otp-inputs-grid {
        gap: 6px;
    }
    .otp-digit-input {
        width: 40px;
        height: 48px;
        font-size: 1.25rem;
        border-radius: 10px;
    }
}

.auth-btn-subtle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-full);
    background: var(--color-surface-container-high);
    color: var(--color-on-surface);
    border: 1px solid var(--color-outline-variant);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-base);
}

.auth-btn-subtle:hover {
    background: var(--color-surface-container);
    border-color: var(--color-primary);
    color: var(--color-primary);
}


/* Custom Checkbox */
.custom-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.84375rem;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox-box {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid var(--color-outline);
    background: var(--color-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-base);
    flex-shrink: 0;
}

.custom-checkbox input:checked ~ .checkbox-box {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.custom-checkbox input:checked ~ .checkbox-box::after {
    content: '✓';
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
}

.auth-inline-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

.auth-inline-link:hover {
    text-decoration: underline;
}

/* Submit Button */
.auth-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 24px;
    background: linear-gradient(135deg, var(--color-primary) 0%, #003827 100%);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-full);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: 0 4px 16px rgba(0, 80, 58, 0.25);
    margin-top: 6px;
}

.auth-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 80, 58, 0.35);
}

.dark .auth-submit-btn {
    background: linear-gradient(135deg, #00503a 0%, #007050 100%);
}

.auth-footer {
    text-align: center;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--color-outline-variant);
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
}

.auth-link-bold {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
}

.auth-link-bold:hover {
    text-decoration: underline;
}


/* Header Auth Buttons & User Dropdown */
.header-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition-base);
}

.header-btn-login {
    color: var(--color-primary);
    background: transparent;
    border: 1px solid var(--color-outline-variant);
}

.header-btn-login:hover {
    background: var(--color-surface-container);
    border-color: var(--color-primary);
}

.header-btn-register {
    background: var(--color-primary);
    color: #ffffff;
    border: 1px solid var(--color-primary);
}

.header-btn-register:hover {
    background: #003827;
    border-color: #003827;
}

.header-user-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 10px 4px 4px;
    background: var(--color-surface-container);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-base);
    color: var(--color-on-surface);
}

.header-user-btn:hover {
    background: var(--color-surface-container-high);
}

.header-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-user-name {
    font-size: 0.8125rem;
    font-weight: 600;
}

.header-user-menu-wrap {
    position: relative;
    z-index: 999999;
}

.header-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 250px;
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    padding: 8px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
    z-index: 999999 !important;
    animation: authFadeIn 0.2s ease-out;
}

.user-dropdown-header {
    padding: 8px 12px 10px 12px;
}

.user-dropdown-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.user-dropdown-email {
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 3px;
}

.user-dropdown-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: rgba(0, 80, 58, 0.12);
    color: var(--color-primary);
    font-size: 0.6875rem;
    font-weight: 800;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.dark .user-dropdown-badge {
    background: rgba(140, 250, 198, 0.18);
    color: #8cfac6;
}

.user-dropdown-divider {
    height: 1px;
    background: var(--color-outline-variant);
    margin: 6px 0;
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-on-surface);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: var(--transition-base);
    box-sizing: border-box;
}

.user-dropdown-item .material-symbols-outlined {
    font-size: 20px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.user-dropdown-item:hover {
    background: var(--color-surface-container);
}

.user-dropdown-logout {
    color: var(--color-secondary);
}

.dark .user-dropdown-logout {
    color: #fca5a5;
}

.user-dropdown-logout:hover {
    background: rgba(187, 0, 39, 0.08);
}

/* ============================================================
   CUSTOMER DASHBOARD STYLES (v0.5.0) — Full Rebuild
   ============================================================ */

/* ---- Full-Height Dashboard Shell ---- */
.dash-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: var(--color-background);
}

/* ---- Desktop Sidebar ---- */
.dash-sidebar {
    display: none;
    flex-direction: column;
    width: 260px;
    min-width: 260px;
    height: 100vh;
    overflow-y: auto;
    background: var(--color-surface);
    border-right: 1px solid var(--color-outline-variant);
    padding: var(--spacing-lg) var(--spacing-md);
    flex-shrink: 0;
}

.dash-sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
    padding: 0 var(--spacing-sm);
}

.dash-sidebar-brand .brand-icon {
    font-size: 32px;
    color: var(--color-primary);
    font-variation-settings: 'FILL' 1;
}

.dash-sidebar-brand h1 {
    font-family: var(--font-family-headline);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

.dash-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: 1;
}

.dash-nav-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    font-family: var(--font-family-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-on-surface-variant);
    text-decoration: none;
    transition: all var(--transition-fast);
    position: relative;
}

.dash-nav-link .nav-icon {
    font-size: 22px;
}

.dash-nav-link:hover {
    background: var(--color-surface-container-high);
    color: var(--color-on-surface);
}

.dash-nav-link.active {
    background: var(--color-primary-fixed);
    color: var(--color-on-primary-fixed);
    font-weight: 700;
    transform: scale(0.97);
}

.dash-nav-link .nav-badge {
    margin-left: auto;
    background: var(--color-secondary);
    color: var(--color-on-secondary);
    font-size: 0.6875rem;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash-nav-divider {
    border: 0;
    border-top: 1px solid var(--color-outline-variant);
    margin: var(--spacing-sm) 0;
}

.dash-nav-link.logout-link {
    color: var(--color-secondary);
    margin-top: var(--spacing-sm);
}

.dash-nav-link.logout-link:hover {
    background: var(--color-error-container);
}

/* Sidebar Help Card */
.dash-sidebar-help {
    margin-top: auto;
    padding-top: var(--spacing-lg);
}

.dash-help-card {
    background: rgba(0, 106, 78, 0.08);
    border-radius: var(--radius-xl);
    padding: var(--spacing-md);
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .dash-help-card {
    background: rgba(131, 215, 180, 0.08);
}

.dash-help-card h3 {
    font-family: var(--font-family-headline);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
}

.dash-help-card p {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin-bottom: var(--spacing-md);
    line-height: 1.5;
}

.dash-help-card .help-btn {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 0.875rem;
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    transition: opacity var(--transition-fast);
    text-decoration: none;
}

.dash-help-card .help-btn:hover {
    opacity: 0.9;
}

.dash-help-card .help-watermark {
    position: absolute;
    bottom: -16px;
    right: -16px;
    font-size: 100px;
    color: var(--color-primary);
    opacity: 0.08;
}

/* ---- Right Column (Topbar + Content) ---- */
.dash-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    min-width: 0;
}

/* ---- Dashboard Topbar (Desktop) ---- */
.dash-topbar {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-outline-variant);
    height: 72px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 50;
}

.dash-topbar-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.dash-topbar-location {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    color: var(--color-on-surface);
    transition: color var(--transition-fast);
}

.dash-topbar-location:hover {
    color: var(--color-primary);
}

.dash-topbar-location .loc-icon {
    color: var(--color-error);
}

.dash-topbar-location .loc-text {
    font-weight: 700;
    font-size: 0.875rem;
}

.dash-topbar-search {
    flex: 1;
    max-width: 600px;
    margin: 0 var(--spacing-lg);
    position: relative;
}

.dash-topbar-search input {
    width: 100%;
    background: var(--color-surface-container-low);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-full);
    padding: var(--spacing-sm) var(--spacing-xl);
    font-size: 0.875rem;
    font-family: var(--font-family-body);
    color: var(--color-on-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}

.dash-topbar-search input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 80, 58, 0.15);
}

.dash-topbar-search .search-icon-left {
    position: absolute;
    left: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-on-surface-variant);
    font-size: 22px;
}

.dash-topbar-search .search-icon-right {
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-on-surface-variant);
    cursor: pointer;
    font-size: 22px;
}

.dash-topbar-search .search-icon-right:hover {
    color: var(--color-primary);
}

.dash-topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.dash-topbar-actions .icon-btn {
    position: relative;
    color: var(--color-on-surface-variant);
    padding: var(--spacing-xs);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash-topbar-actions .icon-btn:hover {
    color: var(--color-primary);
    background: var(--color-surface-container-high);
}

.dash-topbar-actions .notif-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--color-secondary);
    color: var(--color-on-secondary);
    font-size: 10px;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border: 2px solid var(--color-surface);
}

.dash-topbar-user {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--radius-lg);
    transition: background var(--transition-fast);
}

.dash-topbar-user:hover {
    background: var(--color-surface-container-high);
}

.dash-topbar-user img {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 1px solid var(--color-outline-variant);
}

.dash-topbar-user .user-initials {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.dash-topbar-user-name {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--color-on-surface);
}

/* ---- Mobile Top App Bar ---- */
.dash-mobile-topbar {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-surface, #ffffff);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-outline-variant, #e5e7eb);
    padding: max(10px, env(safe-area-inset-top, 0px)) 12px 10px 12px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .dash-mobile-topbar {
    background: rgba(28, 27, 27, 0.95);
    border-bottom-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.dash-mobile-topbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.dash-mobile-topbar-left .back-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    border-radius: var(--radius-full);
    background: transparent;
    border: none;
    color: var(--color-on-surface);
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
    flex-shrink: 0;
}

.dash-mobile-topbar-left .back-btn:hover,
.dash-mobile-topbar-left .back-btn:active {
    background: var(--color-surface-container);
}

.dash-mobile-topbar-left h1 {
    font-family: var(--font-family-headline);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.dash-mobile-topbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.dash-mobile-topbar-right .icon-btn {
    position: relative;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: var(--radius-full);
    background: transparent;
    border: none;
    color: var(--color-on-surface);
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
    flex-shrink: 0;
}

.dash-mobile-topbar-right .icon-btn:hover,
.dash-mobile-topbar-right .icon-btn:active {
    background: var(--color-surface-container);
}

.dash-mobile-topbar-right .notif-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    background: #ef4444;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--color-surface);
    line-height: 1;
}

/* ---- Scrollable Content Area ---- */
.dash-content {
    flex: 1;
    overflow-y: auto;
    background: var(--color-surface-container-lowest);
    padding: var(--spacing-container);
}

.dash-content-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* ---- Profile Hero Card ---- */
.dash-profile-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-outline-variant);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-lg);
    position: relative;
    overflow: hidden;
}

.dash-profile-card-inner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.dash-profile-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.dash-profile-main {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    z-index: 1;
    position: relative;
}

.dash-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.dash-avatar-wrap img {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 4px solid var(--color-surface-container-lowest);
    box-shadow: var(--shadow-sm);
}

.dash-avatar-wrap .avatar-initials-lg {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.5rem;
    border: 4px solid var(--color-surface-container-lowest);
    box-shadow: var(--shadow-sm);
}

.dash-avatar-edit {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    border: 2px solid var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    box-shadow: var(--shadow-sm);
    transition: background var(--transition-fast);
}

.dash-avatar-edit:hover {
    background: var(--color-primary-container);
}

.dash-profile-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.dash-profile-name-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.dash-profile-name-row h2 {
    font-family: var(--font-family-headline);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.dash-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 80, 58, 0.1);
    color: var(--color-primary);
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[data-theme="dark"] .dash-verified-badge {
    background: rgba(131, 215, 180, 0.12);
}

.dash-verified-badge .material-symbols-outlined {
    font-size: 14px;
    font-variation-settings: 'FILL' 1;
}

.dash-profile-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px var(--spacing-lg);
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
}

.dash-profile-details .detail-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dash-profile-details .detail-item .material-symbols-outlined {
    font-size: 18px;
}

.dash-edit-profile-btn {
    z-index: 1;
    position: relative;
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--color-surface-container);
    border: 1px solid var(--color-outline-variant);
    color: var(--color-on-surface);
    font-size: 0.875rem;
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background var(--transition-fast);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.dash-edit-profile-btn:hover {
    background: var(--color-surface-container-high);
}

.dash-edit-profile-btn .material-symbols-outlined {
    font-size: 18px;
}

.dash-profile-deco {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    width: 33%;
    opacity: 0.25;
    pointer-events: none;
}

/* Mobile Profile Card Decorative Element */
.dash-profile-deco-mobile {
    position: absolute;
    top: 0;
    right: 0;
    width: 128px;
    height: 128px;
    border-bottom-left-radius: 50%;
    opacity: 0.5;
    background: rgba(0, 106, 78, 0.08);
    pointer-events: none;
}

[data-theme="dark"] .dash-profile-deco-mobile {
    background: rgba(131, 215, 180, 0.06);
}

/* Mobile Profile Stats Inline */
.dash-profile-stats-inline {
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--color-surface-container);
    text-align: center;
}

.dash-stat-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dash-stat-inline:not(:first-child) {
    border-left: 1px solid var(--color-surface-container);
}

.dash-stat-inline .stat-icon-sm {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    font-size: 1.125rem;
}

.dash-stat-inline .stat-icon-sm.red { background: #fef2f2; color: #f87171; }
.dash-stat-inline .stat-icon-sm.blue { background: #eff6ff; color: #3b82f6; }
.dash-stat-inline .stat-icon-sm.yellow { background: #fefce8; color: #eab308; }
.dash-stat-inline .stat-icon-sm.purple { background: #faf5ff; color: #a855f7; }

[data-theme="dark"] .dash-stat-inline .stat-icon-sm.red { background: rgba(248, 113, 113, 0.12); }
[data-theme="dark"] .dash-stat-inline .stat-icon-sm.blue { background: rgba(59, 130, 246, 0.12); }
[data-theme="dark"] .dash-stat-inline .stat-icon-sm.yellow { background: rgba(234, 179, 8, 0.12); }
[data-theme="dark"] .dash-stat-inline .stat-icon-sm.purple { background: rgba(168, 85, 247, 0.12); }

.dash-stat-inline .stat-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-on-surface);
    line-height: 1.2;
}

.dash-stat-inline .stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-on-surface-variant);
}

/* ---- Desktop Stats Grid ---- */
.dash-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.dash-stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-xl);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    cursor: pointer;
    transition: box-shadow var(--transition-base);
    text-decoration: none;
    color: inherit;
}

.dash-stat-card:hover {
    box-shadow: var(--shadow-md);
}

.dash-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 24px;
}

.dash-stat-icon.green { background: rgba(0, 80, 58, 0.1); color: var(--color-primary); }
.dash-stat-icon.purple { background: rgba(168, 85, 247, 0.1); color: #7c3aed; }
.dash-stat-icon.orange { background: rgba(249, 115, 22, 0.1); color: #ea580c; }
.dash-stat-icon.red { background: rgba(239, 68, 68, 0.1); color: var(--color-error); }

[data-theme="dark"] .dash-stat-icon.green { background: rgba(131, 215, 180, 0.12); }
[data-theme="dark"] .dash-stat-icon.purple { background: rgba(168, 85, 247, 0.12); }
[data-theme="dark"] .dash-stat-icon.orange { background: rgba(249, 115, 22, 0.12); }
[data-theme="dark"] .dash-stat-icon.red { background: rgba(239, 68, 68, 0.12); }

.dash-stat-value {
    font-family: var(--font-family-headline);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-on-surface);
    line-height: 1;
}

.dash-stat-label {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
}

/* ---- Content Grid (2-column desktop) ---- */
.dash-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-lg);
}

.dash-grid-left {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.dash-grid-right {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* ---- Section Card ---- */
.dash-section-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.dash-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.dash-section-header h3 {
    font-family: var(--font-family-headline);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-on-surface);
    margin: 0;
}

.dash-section-header .view-all-link {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: text-decoration var(--transition-fast);
}

.dash-section-header .view-all-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.dash-section-header .view-all-link .material-symbols-outlined {
    font-size: 16px;
}

/* ---- Enquiry Cards ---- */
.dash-enquiry-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.dash-enquiry-card {
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    padding: var(--spacing-sm);
    display: flex;
    gap: var(--spacing-md);
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--transition-base);
}

.dash-enquiry-card:hover {
    box-shadow: var(--shadow-md);
}

.dash-enquiry-card .accent-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    transition: width var(--transition-base);
}

.dash-enquiry-card:hover .accent-bar {
    width: 6px;
}

.dash-enquiry-card .accent-bar.green { background: var(--color-primary); }
.dash-enquiry-card .accent-bar.blue { background: #3b82f6; }

.dash-enquiry-thumb {
    width: 128px;
    height: 96px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    flex-shrink: 0;
}

.dash-enquiry-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) 0;
}

.dash-enquiry-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.dash-enquiry-title {
    font-family: var(--font-family-headline);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-on-surface);
    margin: 0;
    line-height: 1.3;
}

.dash-enquiry-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin-top: 4px;
}

.dash-enquiry-meta .dot {
    width: 4px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--color-outline-variant);
}

.dash-status-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-md);
    white-space: nowrap;
}

.dash-status-badge.responded {
    background: rgba(0, 80, 58, 0.1);
    color: var(--color-primary);
}

.dash-status-badge.pending {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.dash-status-badge.closed {
    background: var(--color-surface-container-high);
    color: var(--color-on-surface-variant);
}

[data-theme="dark"] .dash-status-badge.responded {
    background: rgba(131, 215, 180, 0.12);
}

[data-theme="dark"] .dash-status-badge.pending {
    background: rgba(59, 130, 246, 0.12);
}

.dash-enquiry-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dash-enquiry-location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
}

.dash-enquiry-location .material-symbols-outlined {
    font-size: 16px;
}

.dash-view-details-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--color-outline-variant);
    background: transparent;
    color: var(--color-on-surface);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.dash-view-details-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.dash-view-details-btn .material-symbols-outlined {
    font-size: 16px;
}

.dash-new-enquiry-btn {
    width: 100%;
    border: 2px dashed var(--color-primary);
    background: transparent;
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 600;
    padding: var(--spacing-sm);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: var(--spacing-xs);
}

.dash-new-enquiry-btn:hover {
    background: rgba(0, 80, 58, 0.04);
}

[data-theme="dark"] .dash-new-enquiry-btn:hover {
    background: rgba(131, 215, 180, 0.06);
}

.dash-new-enquiry-btn .material-symbols-outlined {
    font-size: 18px;
}

/* ---- Mobile Enquiry Card (with stepper) ---- */
.dash-mobile-enquiry {
    background: var(--color-surface-container-lowest);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-surface-container);
}

.dash-mobile-enquiry-top {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.dash-mobile-enquiry-top img {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-xl);
    object-fit: cover;
}

.dash-mobile-enquiry-info h4 {
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0 0 4px 0;
}

.dash-mobile-enquiry-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    margin-bottom: 4px;
}

.dash-mobile-enquiry-loc {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
}

.dash-chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--color-on-surface);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.dash-chat-btn:hover {
    background: var(--color-surface-container);
}

/* Stepper Progress */
.dash-stepper {
    position: relative;
    padding: 24px 8px 0;
}

.dash-stepper-line {
    position: absolute;
    top: 42px;
    left: 32px;
    right: 32px;
    height: 2px;
    background: var(--color-outline-variant);
    border-top: 2px dashed var(--color-outline-variant);
}

.dash-stepper-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.dash-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.dash-step-dot {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.dash-step-dot.done {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.dash-step-dot.pending {
    background: var(--color-surface-container);
    border: 2px solid var(--color-outline-variant);
}

.dash-step-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-on-surface);
}

.dash-step.future .dash-step-label {
    font-weight: 500;
    color: var(--color-on-surface-variant);
}

/* ---- Mobile Favourites Scroll ---- */
.dash-mobile-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.dash-mobile-section-header h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0;
}

.dash-mobile-section-header a {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.dash-favourites-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
}

.dash-favourites-scroll::-webkit-scrollbar { display: none; }

.dash-fav-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-surface-container-lowest);
    padding: 10px;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-surface-container);
    min-width: 150px;
    flex-shrink: 0;
}

.dash-fav-chip .fav-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.dash-fav-chip .fav-icon.red { background: #fef2f2; color: #f87171; }
.dash-fav-chip .fav-icon.green { background: #f0fdf4; color: var(--color-primary); }
.dash-fav-chip .fav-icon.orange { background: #fff7ed; color: #f97316; }
.dash-fav-chip .fav-icon.purple { background: #faf5ff; color: #a855f7; }

[data-theme="dark"] .dash-fav-chip .fav-icon.red { background: rgba(248, 113, 113, 0.1); }
[data-theme="dark"] .dash-fav-chip .fav-icon.green { background: rgba(131, 215, 180, 0.1); }
[data-theme="dark"] .dash-fav-chip .fav-icon.orange { background: rgba(249, 115, 22, 0.1); }
[data-theme="dark"] .dash-fav-chip .fav-icon.purple { background: rgba(168, 85, 247, 0.1); }

.dash-fav-chip .fav-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-on-surface);
    line-height: 1.3;
}

.dash-fav-chip .fav-count {
    font-size: 10px;
    color: var(--color-on-surface-variant);
    margin-top: 2px;
}

/* ---- Activity Summary Grid ---- */
.dash-activity-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.dash-activity-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.dash-activity-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dash-activity-icon.green { background: #f0fdf4; color: #15803d; }
.dash-activity-icon.purple { background: #faf5ff; color: #7c3aed; }
.dash-activity-icon.orange { background: #fff7ed; color: #ea580c; }
.dash-activity-icon.red { background: #fef2f2; color: #dc2626; }

[data-theme="dark"] .dash-activity-icon.green { background: rgba(21, 128, 61, 0.12); }
[data-theme="dark"] .dash-activity-icon.purple { background: rgba(124, 58, 237, 0.12); }
[data-theme="dark"] .dash-activity-icon.orange { background: rgba(234, 88, 12, 0.12); }
[data-theme="dark"] .dash-activity-icon.red { background: rgba(220, 38, 38, 0.12); }

.dash-activity-val {
    font-family: var(--font-family-headline);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-on-surface);
}

.dash-activity-lbl {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-on-surface-variant);
}

/* ---- Recently Viewed List ---- */
.dash-recent-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.dash-recent-item {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    padding: var(--spacing-sm);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.dash-recent-item:hover {
    border-color: var(--color-outline-variant);
    box-shadow: var(--shadow-sm);
}

.dash-recent-item img {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    object-fit: cover;
}

.dash-recent-item .recent-info {
    flex: 1;
}

.dash-recent-item .recent-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-on-surface);
    transition: color var(--transition-fast);
}

.dash-recent-item:hover .recent-name {
    color: var(--color-primary);
}

.dash-recent-item .recent-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-on-surface-variant);
}

.dash-recent-item .recent-rating .star-icon {
    color: #f59e0b;
    font-size: 14px;
    font-variation-settings: 'FILL' 1;
}

.dash-recent-item .recent-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.dash-recent-item .fav-btn {
    background: transparent;
    border: none;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    padding: 0;
    font-size: 18px;
    transition: color var(--transition-fast);
}

.dash-recent-item .fav-btn:hover {
    color: var(--color-error);
}

.dash-recent-item .recent-price {
    font-family: var(--font-family-headline);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
}

.dash-recent-divider {
    height: 1px;
    background: var(--color-outline-variant);
    opacity: 0.3;
}

/* Mobile Recently Viewed Scroll */
.dash-recent-scroll {
    display: flex;
    gap: var(--spacing-md);
    overflow-x: auto;
    padding-bottom: var(--spacing-md);
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    scrollbar-width: none;
}

.dash-recent-scroll::-webkit-scrollbar { display: none; }

.dash-recent-scroll-card {
    background: var(--color-surface-container-lowest);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-surface-container);
    overflow: hidden;
    min-width: 160px;
    flex-shrink: 0;
}

.dash-recent-scroll-card img {
    width: 100%;
    height: 96px;
    object-fit: cover;
}

.dash-recent-scroll-card .card-body {
    padding: 12px;
}

.dash-recent-scroll-card .card-name {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--color-on-surface);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-recent-scroll-card .card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin-bottom: 8px;
}

.dash-recent-scroll-card .card-rating .star-icon {
    color: #f59e0b;
    font-size: 14px;
    font-variation-settings: 'FILL' 1;
}

.dash-recent-scroll-card .card-price {
    font-weight: 700;
    color: var(--color-primary);
}

/* ---- Explore CTA Card ---- */
.dash-explore-cta {
    background: var(--color-surface-container);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 192px;
    border: 1px solid var(--color-outline-variant);
}

.dash-explore-cta .cta-content {
    position: relative;
    z-index: 1;
    width: 66%;
}

.dash-explore-cta h3 {
    font-family: var(--font-family-headline);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-on-surface);
    margin: 0 0 var(--spacing-xs) 0;
}

.dash-explore-cta p {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin-bottom: var(--spacing-md);
    line-height: 1.5;
}

.dash-explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.dash-explore-btn:hover {
    opacity: 0.9;
}

.dash-explore-btn .material-symbols-outlined {
    font-size: 16px;
}

/* ---- Mobile Account/Settings List ---- */
.dash-settings-list {
    background: var(--color-surface-container-lowest);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-surface-container);
    overflow: hidden;
}

.dash-settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    text-decoration: none;
    color: var(--color-on-surface);
    transition: background var(--transition-fast);
}

.dash-settings-item:not(:last-child) {
    border-bottom: 1px solid var(--color-surface-container);
}

.dash-settings-item:hover {
    background: var(--color-surface-container-low);
}

.dash-settings-item .item-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dash-settings-item .item-icon {
    color: var(--color-primary);
    font-size: 1.125rem;
    width: 24px;
    text-align: center;
}

.dash-settings-item .item-label {
    font-weight: 500;
}

.dash-settings-item .item-arrow {
    color: var(--color-outline-variant);
    font-size: 0.875rem;
}

/* ---- Mobile Bottom Nav (Dashboard Specific) ---- */
.dash-mobile-bottomnav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-surface-container-lowest);
    border-top: 1px solid var(--color-surface-container);
    box-shadow: 0 -4px 20px -2px rgba(0, 0, 0, 0.05);
    padding: 8px 24px;
    border-radius: 24px 24px 0 0;
    z-index: 50;
}

[data-theme="dark"] .dash-mobile-bottomnav {
    box-shadow: 0 -4px 20px -2px rgba(0, 0, 0, 0.3);
}

.dash-mobile-bottomnav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dash-bnav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    color: var(--color-outline);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.dash-bnav-item:hover,
.dash-bnav-item.active {
    color: var(--color-primary);
}

.dash-bnav-item .bnav-icon {
    font-size: 1.25rem;
    margin-bottom: 4px;
}

.dash-bnav-item .bnav-label {
    font-size: 10px;
    font-weight: 500;
}

.dash-bnav-item.active .bnav-label {
    font-weight: 700;
}

.dash-bnav-fab {
    position: relative;
    top: -20px;
}

.dash-bnav-fab button {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    border: 4px solid var(--color-surface-container-lowest);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.dash-bnav-fab button:hover {
    opacity: 0.9;
}

/* ---- Dashboard Footer ---- */
.dash-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--color-outline-variant);
    background: var(--color-surface-container-low);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.dash-footer p {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin: 0;
}

.dash-footer-links {
    display: flex;
    gap: var(--spacing-md);
    font-size: 0.6875rem;
    font-weight: 600;
}

.dash-footer-links a {
    color: var(--color-on-surface-variant);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.dash-footer-links a:hover {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ---- Customer Dashboard Subpages Unified CSS ---- */
.dash-subnav-tabs {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: var(--spacing-md);
    scrollbar-width: none;
}
.dash-subnav-tabs::-webkit-scrollbar { display: none; }

.dash-subtab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.dash-subtab:hover {
    background: var(--color-surface-container-high);
    color: var(--color-on-surface);
}

.dash-subtab.active {
    background: var(--color-primary-fixed);
    color: var(--color-on-primary-fixed);
    border-color: var(--color-primary);
    font-weight: 700;
}

.dash-subtab .badge-count {
    background: var(--color-surface-container);
    color: var(--color-on-surface);
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.dash-subtab.active .badge-count {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

/* Subpage Form Grid */
.dash-form-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--spacing-md);
}
@media (min-width: 640px) {
    .dash-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.dash-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dash-form-group label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-on-surface);
}

.dash-form-input,
.dash-form-select,
.dash-form-textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-family: var(--font-family-body);
    color: var(--color-on-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}

.dash-form-input:focus,
.dash-form-select:focus,
.dash-form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 80, 58, 0.15);
}

.dash-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 600;
    font-size: 0.875rem;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: opacity var(--transition-fast);
}
.dash-btn-primary:hover { opacity: 0.92; }

.dash-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    color: var(--color-on-surface);
    font-weight: 600;
    font-size: 0.875rem;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-outline-variant);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast);
}
.dash-btn-outline:hover { background: var(--color-surface-container); }

.dash-btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #25d366;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.875rem;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: opacity var(--transition-fast);
}
.dash-btn-whatsapp:hover { opacity: 0.9; }

.dash-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
    font-weight: 600;
    font-size: 0.875rem;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(220, 38, 38, 0.2);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast);
}
.dash-btn-danger:hover { background: rgba(220, 38, 38, 0.2); }

/* Table System */
.dash-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-outline-variant);
}

.dash-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.875rem;
}

.dash-table th {
    background: var(--color-surface-container-low);
    color: var(--color-on-surface);
    font-weight: 700;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-outline-variant);
}

.dash-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-outline-variant);
    color: var(--color-on-surface-variant);
    vertical-align: middle;
}

.dash-table tr:last-child td {
    border-bottom: none;
}

/* Empty State Card */
.dash-empty-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl) var(--spacing-lg);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.dash-empty-icon {
    font-size: 48px;
    color: var(--color-on-surface-variant);
    opacity: 0.6;
}

.dash-empty-card h4 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0;
}

.dash-empty-card p {
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    margin: 0;
    max-width: 400px;
}

/* ---- Desktop-only / Mobile-only Utility ---- */
.dash-desktop-only { display: none; }
.dash-mobile-only { display: block; }

/* ============================================================
   RESPONSIVE: DESKTOP (md+)
   ============================================================ */
@media (min-width: 769px) {
    .dash-sidebar { display: flex; }
    .dash-topbar { display: flex; }
    .dash-mobile-topbar { display: none; }
    .dash-mobile-bottomnav { display: none; }
    .dash-desktop-only { display: block; }
    .dash-mobile-only { display: none !important; }

    .dash-content {
        padding: var(--spacing-lg);
    }

    .dash-avatar-wrap img,
    .dash-avatar-wrap .avatar-initials-lg {
        width: 128px;
        height: 128px;
        font-size: 2.5rem;
    }

    .dash-profile-name-row h2 {
        font-size: 2rem;
    }

    .dash-profile-stats-inline {
        display: none !important;
    }
}

/* ============================================================
   RESPONSIVE: MOBILE (below 769px)
   ============================================================ */
@media (max-width: 768px) {
    .dash-shell {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }

    .dash-right {
        height: auto;
        overflow: visible;
    }

    .dash-content {
        overflow: visible;
        padding: var(--spacing-md);
        padding-bottom: 96px;
    }

    .dash-stats-grid { display: none; }

    .dash-profile-stats-inline { display: grid; }

    .dash-profile-details {
        grid-template-columns: 1fr;
    }

    .dash-profile-top {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .dash-profile-deco { display: none; }

    .dash-grid {
        grid-template-columns: 1fr;
    }

    .dash-grid-right {
        display: none;
    }

    .dash-mobile-bottomnav {
        display: block;
    }

    .dash-enquiry-card {
        flex-direction: column;
    }

    .dash-enquiry-thumb {
        width: 100%;
        height: 120px;
    }

    .dash-activity-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dash-edit-profile-btn {
        font-size: 0.75rem;
        padding: 6px 12px;
        border-radius: var(--radius-full);
    }
}

@media (max-width: 480px) {
    .dash-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.dashboard-container {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-xxl);
    min-height: calc(100vh - 140px);
}

/* Desktop Sidebar */
.dashboard-sidebar {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    height: fit-content;
    position: sticky;
    top: 90px;
}

.sidebar-user-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-outline-variant);
}

.sidebar-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-primary-container);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-user-avatar .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-initials {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-on-primary-container);
}

.sidebar-user-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0;
    line-height: 1.2;
}

.sidebar-user-role {
    font-size: 0.75rem;
    color: var(--color-muted);
}

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

.sidebar-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-muted);
    margin: var(--spacing-sm) 0 4px var(--spacing-sm);
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-on-surface-variant);
    text-decoration: none;
    transition: var(--transition-base);
}

.sidebar-link .icon {
    font-size: 20px;
    color: var(--color-muted);
    transition: var(--transition-base);
}

.sidebar-link:hover, .sidebar-link.active {
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
}

.sidebar-link:hover .icon, .sidebar-link.active .icon {
    color: var(--color-primary);
}

.sidebar-link .badge {
    margin-left: auto;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 12px;
}

.logout-link {
    color: var(--color-secondary);
}

.logout-link .icon {
    color: var(--color-secondary);
}

/* Dashboard Main Content */
.dashboard-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.dashboard-header-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.dashboard-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-on-surface);
    margin: 0;
}

.dashboard-subtitle {
    font-size: 0.875rem;
    color: var(--color-muted);
    margin: 4px 0 0 0;
}

/* Metrics Cards */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.metric-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    text-decoration: none;
    color: inherit;
    transition: var(--transition-base);
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.metric-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metric-icon.primary { background: rgba(0, 80, 58, 0.1); color: var(--color-primary); }
.metric-icon.secondary { background: rgba(187, 0, 39, 0.1); color: var(--color-secondary); }
.metric-icon.tertiary { background: rgba(2, 132, 199, 0.1); color: #0284c7; }
.metric-icon.warning { background: rgba(217, 119, 6, 0.1); color: #d97706; }
.metric-icon.success { background: rgba(16, 185, 129, 0.1); color: #10b981; }

.metric-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-on-surface);
    line-height: 1.1;
}

.metric-label {
    font-size: 0.8125rem;
    color: var(--color-muted);
    font-weight: 500;
}

/* Completion Card */
.dashboard-completion-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    padding: var(--spacing-lg);
}

.completion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.completion-score {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-primary);
}

.progress-bar-bg {
    width: 100%;
    height: 8px;
    background: var(--color-surface-container);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-tertiary));
    border-radius: 4px;
    transition: width 0.4s ease;
}

.completion-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-top: var(--spacing-md);
}

/* Grid Layouts */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--spacing-lg);
}

.dashboard-col { grid-column: span 6; }
.col-small { grid-column: span 4; }
.col-large { grid-column: span 8; }
.col-half { grid-column: span 6; }

/* Tabs Component */
.dashboard-tabs {
    display: flex;
    gap: var(--spacing-sm);
    border-bottom: 1px solid var(--color-outline-variant);
    margin-bottom: var(--spacing-md);
    overflow-x: auto;
}

.tab-btn {
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition-base);
}

.tab-btn:hover, .tab-btn.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.tab-btn.danger.active {
    color: var(--color-secondary);
    border-bottom-color: var(--color-secondary);
}

/* Data Table */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table th, .data-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--color-outline-variant);
}

.data-table th {
    font-weight: 700;
    color: var(--color-muted);
    background: var(--color-surface-container);
}

/* WhatsApp Brand Button */
.btn-whatsapp {
    background: #25D366;
    color: #ffffff !important;
    border: 1px solid #20ba5a;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-base);
}

.btn-whatsapp:hover {
    background: #1ebc57;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.35);
}

/* Subnav Filter Tabs */
.dashboard-subnav-tabs {
    display: flex;
    gap: var(--spacing-sm);
    border-bottom: 1px solid var(--color-outline-variant);
    overflow-x: auto;
    padding-bottom: 4px;
}

.subnav-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-muted);
    text-decoration: none;
    transition: var(--transition-base);
}

.subnav-tab:hover {
    background: var(--color-surface-container);
    color: var(--color-on-surface);
}

.subnav-tab.active {
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
}

.subnav-count {
    background: rgba(0, 0, 0, 0.08);
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 10px;
}

.dark .subnav-count {
    background: rgba(255, 255, 255, 0.12);
}

/* Inquiries Components */
.inquiry-cards-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.inquiry-card {
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: var(--spacing-lg);
    transition: var(--transition-base);
}

.inquiry-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.inquiry-title-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.inquiry-icon-box {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inquiry-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0;
}

.inquiry-date {
    font-size: 0.75rem;
    color: var(--color-muted);
}

.inquiry-body-text {
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    line-height: 1.5;
}

.inquiry-listing-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--color-surface-container);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-primary);
    font-size: 0.875rem;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.inquiry-listing-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.inquiry-listing-label {
    color: var(--color-muted);
}

.inquiry-listing-link {
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.inquiry-listing-link:hover {
    text-decoration: underline;
}

.inquiry-listing-price {
    font-weight: 700;
    color: var(--color-secondary);
}

.inquiry-footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-outline-variant);
}

.inquiry-action-buttons {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* Manage Listings & Favorites Grid */
.dashboard-listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--spacing-lg);
}

.listing-manage-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transition-base);
}

.listing-manage-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.manage-card-thumb {
    position: relative;
    height: 160px;
    background: var(--color-surface-container);
    overflow: hidden;
}

.manage-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.btn-fav-toggle, .btn-card-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    color: var(--color-muted);
    transition: var(--transition-base);
}

.dark .btn-fav-toggle, .dark .btn-card-remove {
    background: rgba(30, 30, 30, 0.9);
    color: var(--color-on-surface);
}

.btn-fav-toggle.active {
    color: var(--color-secondary);
}

.btn-fav-toggle.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
}

.manage-card-body {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.manage-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: 6px;
}

.category-pill {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-primary-container);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.price-tag {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--color-secondary);
}

.manage-card-title {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 6px 0;
}

.manage-card-title a {
    color: var(--color-on-surface);
    text-decoration: none;
}

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

.manage-card-address {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--color-muted);
    margin: 0;
}

.card-direct-actions {
    display: flex;
    gap: 6px;
    margin-top: auto;
}

.viewed-time-stamp {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6875rem;
    color: var(--color-muted);
}

/* Reviews Styling */
.reviews-list-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.review-item-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.review-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.review-item-main {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.review-listing-thumb {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    object-fit: cover;
    background: var(--color-surface-container);
}

.review-listing-title {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.review-listing-title a {
    color: var(--color-on-surface);
    text-decoration: none;
}

.review-listing-title a:hover {
    color: var(--color-primary);
}

.review-comment-text {
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    font-style: italic;
    line-height: 1.5;
}

.review-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    border-top: 1px solid var(--color-outline-variant);
    padding-top: var(--spacing-md);
}

/* Notifications List */
.notifications-list-card {
    overflow: hidden;
}

.notification-item {
    transition: var(--transition-base);
}

.notification-item.unread {
    background: rgba(0, 80, 58, 0.04);
}

.dark .notification-item.unread {
    background: rgba(0, 80, 58, 0.15);
}

.notif-icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-surface-container);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Mobile Dashboard Bar and Drawer */
.dashboard-mobile-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-outline-variant);
    position: sticky;
    top: 60px;
    z-index: 40;
}

.dashboard-drawer-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    backdrop-filter: blur(2px);
    transition: opacity 0.3s ease;
}

.dashboard-drawer-backdrop.open {
    display: block;
}

/* Responsive Dashboard Queries */
@media (max-width: 991px) {
    .dashboard-mobile-bar {
        display: flex;
    }

    .dashboard-container {
        grid-template-columns: 1fr;
        padding-top: var(--spacing-md);
    }
    
    .dashboard-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        z-index: 999;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        border-radius: 0;
        box-shadow: var(--shadow-lg);
    }

    .dashboard-sidebar.open {
        transform: translateX(0);
    }

    .dashboard-col {
        grid-column: span 12;
    }
}

@media (max-width: 640px) {
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-listings-grid {
        grid-template-columns: 1fr;
    }

    .inquiry-header-row, .review-header-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   Mobile Navigation Drawer System (v0.6.3)
   ============================================================ */
.dash-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 998;
}

.dash-mobile-overlay.open {
    opacity: 1;
    visibility: visible;
}

.dash-mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 290px;
    max-width: 85vw;
    background: var(--color-surface);
    box-shadow: var(--shadow-xl);
    z-index: 999;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}

.dash-mobile-drawer.open {
    transform: translateX(0);
}

.dash-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--color-outline-variant);
}

.dash-drawer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.dash-drawer-brand .dash-brand-logo {
    height: 32px;
    width: auto;
}

.dash-drawer-brand .dash-drawer-title {
    font-family: var(--font-family-headline);
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-primary);
}

.dash-drawer-close {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--color-surface-container-low);
    color: var(--color-on-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s ease;
}

.dash-drawer-close:hover {
    background: var(--color-surface-container);
}

.dash-drawer-user-card {
    margin: 12px 16px 4px 16px;
    padding: 12px;
    background: var(--color-surface-container-low);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: 12px;
}

.dash-drawer-user-card .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.dash-drawer-user-card .user-info {
    overflow: hidden;
}

.dash-drawer-user-card .user-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-drawer-nav {
    padding: 12px 16px 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Mobile Responsive Adjustments for Provider Pages */
@media (max-width: 768px) {
    .dash-form-row {
        flex-direction: column !important;
        gap: var(--spacing-md) !important;
    }

    .dash-form-group {
        width: 100% !important;
    }

    .dash-section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .dash-section-header .dash-btn-primary,
    .dash-section-header .dash-btn-outline {
        width: 100% !important;
        justify-content: center !important;
    }

    .dash-subnav-tabs {
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
        margin-bottom: var(--spacing-md) !important;
    }

    .dash-subtab {
        flex-shrink: 0;
    }

    .dash-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .dash-profile-top {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .dash-profile-main {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .dash-profile-details {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    .dash-profile-stats-inline {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .dash-btn-primary, .dash-btn-outline {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .dash-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-lg);
    }
}

/* ============================================================
   LISTING DETAIL ENGINE STYLES (v0.7.0)
   Category-Specific Dynamic Layout System
   ============================================================ */

.ld-container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
}

/* Breadcrumb */
.ld-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.ld-breadcrumb a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.ld-breadcrumb a:hover {
    text-decoration: underline;
}

.ld-breadcrumb .material-symbols-outlined {
    font-size: 16px;
    color: var(--color-outline);
}

.ld-breadcrumb-current {
    color: var(--color-on-surface);
    font-weight: 600;
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Main Layout Grid */
.ld-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 16px;
}

@media (min-width: 1024px) {
    .ld-grid {
        grid-template-columns: 1fr 340px;
        align-items: start;
    }
}

.ld-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* Gallery Component */
.ld-gallery {
    width: 100%;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--color-surface-container-low);
    border: 1px solid var(--color-outline-variant);
    position: relative;
}

.ld-gallery-main {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
    background: #111;
}

@media (min-width: 640px) {
    .ld-gallery-main { height: 380px; }
}

@media (min-width: 1024px) {
    .ld-gallery-main { height: 440px; }
}

.ld-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s ease;
}

.ld-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background 0.2s;
}

.ld-gallery-nav:hover {
    background: rgba(0, 0, 0, 0.85);
}

.ld-gallery-prev { left: 12px; }
.ld-gallery-next { right: 12px; }

.ld-gallery-counter {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 5;
}

.ld-gallery-fullscreen-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.ld-gallery-thumbs {
    display: flex;
    gap: 8px;
    padding: 10px;
    overflow-x: auto;
    background: var(--color-surface);
    scrollbar-width: thin;
}

.ld-gallery-thumb {
    width: 70px;
    height: 52px;
    object-fit: cover;
    border-radius: var(--radius-md);
    cursor: pointer;
    opacity: 0.6;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ld-gallery-thumb:hover,
.ld-gallery-thumb.active {
    opacity: 1;
    border-color: var(--color-primary);
}

/* Lightbox */
.ld-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ld-lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
}

.ld-lightbox-img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    position: relative;
    z-index: 10;
    border-radius: var(--radius-md);
}

.ld-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.ld-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.ld-lightbox-prev { left: 20px; }
.ld-lightbox-next { right: 20px; }

.ld-lightbox-counter {
    position: absolute;
    bottom: 20px;
    color: #fff;
    font-weight: 600;
    z-index: 20;
}

/* Title Bar */
.ld-title-bar {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 16px;
    border: 1px solid var(--color-outline-variant);
}

.ld-title-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.ld-category-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ld-category-label .material-symbols-outlined { font-size: 16px; }

.ld-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-full);
}

.ld-badge .material-symbols-outlined { font-size: 14px; }

.ld-badge-featured { background: #fff3cd; color: #856404; }
.ld-badge-verified,
.ld-badge-verified-inline { background: #d4edda; color: #155724; }
.ld-badge-trending { background: #cce5ff; color: #004085; }
.ld-badge-custom { background: var(--color-surface-container-high); color: var(--color-on-surface); }

.ld-title {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--color-on-surface);
    margin: 0 0 10px 0;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .ld-title { font-size: 1.625rem; }
}

.ld-title-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
    flex-wrap: wrap;
}

.ld-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ld-meta-item .material-symbols-outlined { font-size: 16px; }
.ld-meta-rating .material-symbols-outlined { color: #ffb400; }

.ld-meta-divider { color: var(--color-outline); }

/* Price Banner */
.ld-price-banner {
    background: linear-gradient(135deg, #00503a 0%, #006a4e 100%);
    color: #ffffff !important;
    border-radius: var(--radius-xl);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 14px rgba(0, 80, 58, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.ld-price-main {
    display: flex;
    flex-direction: column;
}

.ld-price-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.9) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.ld-price-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff !important;
    letter-spacing: -0.5px;
}

@media (min-width: 768px) {
    .ld-price-value { font-size: 1.875rem; }
}

.ld-price-badge {
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(4px);
}

/* Common Section Container */
.ld-section {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 20px;
    border: 1px solid var(--color-outline-variant);
}

.ld-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-outline-variant);
}

.ld-section-title .material-symbols-outlined {
    color: var(--color-primary);
    font-size: 22px;
}

/* Key Details Grid */
.ld-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 640px) {
    .ld-details-grid { grid-template-columns: repeat(2, 1fr); }
}

.ld-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
}

.ld-detail-icon {
    font-size: 22px;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.ld-detail-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ld-detail-label {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    font-weight: 500;
}

.ld-detail-value {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-on-surface);
    word-break: break-word;
}

.ld-detail-badge {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-primary);
}

/* Services Offered */
.ld-services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 640px) {
    .ld-services-grid { grid-template-columns: repeat(2, 1fr); }
}

.ld-service-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-on-surface);
}

.ld-service-check {
    font-size: 20px;
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Pricing Table */
.ld-pricing-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .ld-pricing-cards { grid-template-columns: repeat(2, 1fr); }
}

.ld-pricing-card {
    padding: 20px;
    border-radius: var(--radius-xl);
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
    position: relative;
    display: flex;
    flex-direction: column;
}

.ld-pricing-featured {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 80, 58, 0.12);
}

.ld-pricing-popular {
    position: absolute;
    top: -12px;
    right: 16px;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
}

.ld-pricing-name {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 6px 0;
}

.ld-pricing-price {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.ld-pricing-desc {
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
    margin-bottom: 14px;
}

.ld-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ld-pricing-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--color-on-surface);
}

.ld-pricing-features .material-symbols-outlined {
    font-size: 16px;
    color: var(--color-primary);
}

/* Portfolio Gallery */
.ld-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (min-width: 640px) {
    .ld-portfolio-grid { grid-template-columns: repeat(3, 1fr); }
}

.ld-portfolio-item {
    position: relative;
    height: 140px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    background: var(--color-surface-container-low);
}

.ld-portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ld-portfolio-item:hover img {
    transform: scale(1.05);
}

.ld-portfolio-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Amenities Grid */
.ld-amenity-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ld-amenity-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-on-surface);
}

.ld-amenity-pill .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-primary);
}

/* Floor Plan Grid */
.ld-floor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (min-width: 640px) {
    .ld-floor-grid { grid-template-columns: repeat(3, 1fr); }
}

.ld-floor-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: var(--radius-lg);
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
    text-align: center;
}

.ld-floor-item .material-symbols-outlined {
    font-size: 28px;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.ld-floor-value {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-on-surface);
}

.ld-floor-label {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    font-weight: 500;
}

/* Job Requirements */
.ld-req-block {
    margin-bottom: 16px;
}

.ld-req-block:last-child { margin-bottom: 0; }

.ld-req-subtitle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0 0 8px 0;
}

.ld-req-subtitle .material-symbols-outlined { font-size: 18px; color: var(--color-primary); }

.ld-req-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ld-req-tag {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
    font-size: 0.75rem;
    font-weight: 600;
}

.ld-req-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ld-req-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--color-on-surface);
}

.ld-req-list .material-symbols-outlined {
    font-size: 16px;
    color: var(--color-primary);
    margin-top: 2px;
}

/* Matrimony Personal Details */
.ld-personal-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 640px) {
    .ld-personal-cards { grid-template-columns: repeat(2, 1fr); }
}

.ld-personal-card {
    padding: 16px;
    border-radius: var(--radius-lg);
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
}

.ld-personal-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-outline-variant);
}

.ld-personal-card-title .material-symbols-outlined { font-size: 18px; color: var(--color-primary); }

.ld-personal-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ld-personal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
}

.ld-personal-label { color: var(--color-on-surface-variant); font-weight: 500; }
.ld-personal-value { color: var(--color-on-surface); font-weight: 700; text-align: right; }

/* Availability */
.ld-avail-badge-24x7 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    background: #d4edda;
    color: #155724;
    font-weight: 700;
    font-size: 0.875rem;
    margin-bottom: 14px;
}

.ld-avail-schedule {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ld-avail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    background: var(--color-surface-container-lowest);
    font-size: 0.8125rem;
}

.ld-avail-day { font-weight: 600; color: var(--color-on-surface); }
.ld-avail-hours { color: var(--color-on-surface-variant); }

.ld-avail-days {
    display: flex;
    gap: 6px;
    margin-top: 12px;
}

.ld-avail-day-pill {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--color-surface-container-low);
    color: var(--color-on-surface-variant);
}

.ld-avail-day-pill.active {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

/* Vehicle Info */
.ld-vehicle-card {
    padding: 16px;
    border-radius: var(--radius-lg);
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
}

.ld-vehicle-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.ld-vehicle-spec {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ld-vehicle-spec .material-symbols-outlined { font-size: 24px; color: var(--color-primary); }

.ld-spec-label { display: block; font-size: 0.75rem; color: var(--color-on-surface-variant); }
.ld-spec-value { font-size: 0.875rem; font-weight: 700; color: var(--color-on-surface); }

.ld-vehicle-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--color-outline-variant);
}

/* Description Component */
.ld-description-content {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-on-surface);
}

.ld-description-truncated {
    max-height: 120px;
    overflow: hidden;
    position: relative;
}

.ld-description-truncated::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(transparent, var(--color-surface));
}

.ld-read-more-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    background: none;
    border: none;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0;
}

/* Reviews Component */
.ld-rating-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: var(--radius-lg);
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
    margin-bottom: 16px;
}

.ld-rating-big {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--color-on-surface);
    line-height: 1;
}

.ld-rating-stars {
    display: flex;
    flex-direction: column;
}

.ld-star { color: var(--color-outline); font-size: 18px; }
.ld-star.filled { color: #ffb400; }

.ld-rating-count {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin-top: 2px;
}

.ld-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ld-review-card {
    padding: 14px;
    border-radius: var(--radius-lg);
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
}

.ld-review-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.ld-review-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.ld-review-meta {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ld-review-name { font-weight: 700; font-size: 0.875rem; color: var(--color-on-surface); }
.ld-review-date { font-size: 0.75rem; color: var(--color-on-surface-variant); }

.ld-review-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--color-on-surface);
}

.ld-review-rating .material-symbols-outlined { font-size: 16px; color: #ffb400; }
.ld-review-text { font-size: 0.875rem; color: var(--color-on-surface); margin: 0; line-height: 1.5; }

/* Related Scroll */
.ld-related-scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
}

.ld-related-scroll > * {
    flex: 0 0 240px;
    max-width: 240px;
}

@media (min-width: 640px) {
    .ld-related-scroll > * {
        flex: 0 0 260px;
        max-width: 260px;
    }
}

/* Provider Sidebar */
.ld-sidebar {
    position: relative;
}

@media (min-width: 1024px) {
    .ld-sidebar {
        position: sticky;
        top: 80px;
    }
}

.ld-sidebar-inner {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 20px;
    border: 1px solid var(--color-outline-variant);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ld-sidebar-divider {
    height: 1px;
    background: var(--color-outline-variant);
}

.ld-provider-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ld-provider-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ld-provider-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.ld-provider-avatar-initial {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.25rem;
}

.ld-provider-info {
    display: flex;
    flex-direction: column;
}

.ld-provider-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0;
}

.ld-provider-since {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin-top: 2px;
}

.ld-provider-about {
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
    margin: 0;
    line-height: 1.4;
}

/* Sidebar CTAs */
.ld-cta-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ld-cta-btn {
    width: 100%;
    min-height: 46px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.ld-cta-btn:active {
    transform: scale(0.98);
}

.ld-cta-primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.ld-cta-whatsapp {
    background: #25d366;
    color: #fff;
}

.ld-cta-tertiary {
    background: var(--color-surface-container-high);
    color: var(--color-on-surface);
}

.ld-action-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.ld-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--color-on-surface-variant);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    padding: 6px;
}

.ld-action-btn .material-symbols-outlined { font-size: 20px; }
.ld-action-report { color: var(--color-error, #ba1a1a); }

/* Mobile Sticky Bottom Contact Bar */
.ld-contact-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-outline-variant);
    padding: 10px 16px;
    display: flex;
    gap: 10px;
    z-index: 999;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}

@media (min-width: 1024px) {
    .ld-contact-bar { display: none; }
}

.ld-contact-bar-btn {
    flex: 1;
    min-height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.ld-contact-call { background: var(--color-primary); color: var(--color-on-primary); }
.ld-contact-whatsapp { background: #25d366; color: #fff; }
.ld-contact-enquiry { background: var(--color-primary); color: var(--color-on-primary); }

/* Empty state */
.ld-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 16px;
    text-align: center;
    color: var(--color-on-surface-variant);
}

.ld-empty-state .material-symbols-outlined {
    font-size: 40px;
    margin-bottom: 8px;
    opacity: 0.6;
}

.ld-empty-state p { margin: 0; font-size: 0.875rem; }

/* Custom Modal & Toast Design System Components */
.mybd-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 16px;
    animation: mybdFadeIn 0.2s ease-out;
}

.mybd-modal-card {
    background: var(--color-surface);
    color: var(--color-on-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl, 16px);
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    animation: mybdSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.mybd-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-outline-variant);
}

.mybd-modal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.0625rem;
    font-weight: 700;
}

.mybd-modal-close {
    background: transparent;
    border: none;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    border-radius: 50%;
}
.mybd-modal-close:hover {
    background: var(--color-surface-container-high);
}

.mybd-modal-body {
    padding: 20px;
}

.mybd-radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--color-surface-container-low);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
}
.mybd-radio-label:hover {
    border-color: var(--color-primary);
}
.mybd-radio-label input[type="radio"] {
    accent-color: var(--color-primary);
    width: 16px;
    height: 16px;
}

.mybd-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 20px;
    background: var(--color-surface-container-lowest);
    border-top: 1px solid var(--color-outline-variant);
}

.btn-modal-cancel {
    padding: 8px 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-outline);
    background: transparent;
    color: var(--color-on-surface);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
}
.btn-modal-submit {
    padding: 8px 20px;
    border-radius: var(--radius-md);
    border: none;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
}
.btn-modal-submit:hover {
    opacity: 0.9;
}

/* Custom Toast Notification */
.mybd-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #1e293b;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    z-index: 11000;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mybd-toast.active {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.mybd-toast-success .toast-icon { color: #34d399; }
.mybd-toast-error .toast-icon { color: #f87171; }
.mybd-toast-warning .toast-icon { color: #fbbf24; }
.mybd-toast-info .toast-icon { color: #60a5fa; }

@keyframes mybdFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mybdSlideUp { from { transform: translateY(20px) scale(0.95); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

/* ============================================================
   Real-Time Enquiry & Messaging Engine Styles (v0.8.0)
   Strictly follows MASTER.md (Design Tokens, Dark/Light Mode)
   ============================================================ */
.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    z-index: 9999 !important; /* Extremely high z-index to overlap trust badges */
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    display: flex;
}

.app-wrapper {
    background-color: var(--color-surface);
}

.msg-portal-container {
    display: grid;
    grid-template-columns: 340px 1fr;
    height: calc(100vh - 190px);
    max-height: calc(100vh - 190px);
    min-height: 480px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-outline-variant);
    overflow: hidden;
    margin-bottom: 0;
}
.msg-sidebar {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-outline-variant);
    background: var(--color-surface-variant);
    overflow: hidden;
}
.msg-sidebar-header {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-outline-variant);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.msg-sidebar-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.msg-sidebar-title h2 {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-on-surface);
}
.msg-total-badge {
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
}
.msg-filter-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 2px;
}
.msg-tab {
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-on-surface-variant);
    text-decoration: none;
    white-space: nowrap;
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    transition: all 0.2s ease;
}
.msg-tab.active, .msg-tab:hover {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}
.msg-sidebar-list {
    flex: 1;
    overflow-y: auto;
}
.msg-conv-item {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-outline-variant);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
    position: relative;
}
.msg-conv-item:hover, .msg-conv-item.active {
    background: var(--color-surface);
}
.msg-conv-item.unread {
    background: rgba(0, 80, 58, 0.05);
}
.msg-avatar-wrapper {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}
.msg-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.msg-avatar-initials {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--color-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
}
.msg-online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #10b981;
    border: 2px solid var(--color-surface);
}
.msg-conv-info {
    flex: 1;
    min-width: 0;
}
.msg-conv-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2px;
}
.msg-partner-name {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-time {
    font-size: 0.6875rem;
    color: var(--color-on-surface-variant);
}
.msg-listing-tag {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.75rem;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 4px;
}
.msg-listing-tag span {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-conv-snippet {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.msg-conv-snippet p {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-unread-badge {
    background: var(--color-primary);
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 6px;
}

/* Chat Window */
.msg-chat-window {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    position: relative;
    height: 100%;
}
.msg-chat-window.provider-chat-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
.msg-chat-main-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}
.msg-chat-header {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-outline-variant);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-surface-variant);
}
.msg-header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.msg-back-btn {
    display: none;
    color: var(--color-on-surface);
    text-decoration: none;
}
.msg-header-details h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-on-surface);
}
.msg-header-sub {
    display: flex;
    align-items: center;
    gap: 8px;
}
.msg-listing-link {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 0.75rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}
.msg-status-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    background: rgba(0,0,0,0.06);
}
.msg-status-badge.status-new { background: #dbeafe; color: #1e40af; }
.msg-status-badge.status-active { background: #dcfce7; color: #166534; }
.msg-status-badge.status-completed { background: #fef9c3; color: #854d0e; }
.msg-status-badge.status-closed { background: #f3f4f6; color: #4b5563; }

.msg-header-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}
.msg-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    z-index: 50;
    min-width: 200px;
    padding: 6px 0;
}
.msg-dropdown-menu.active { display: block; }
.msg-dropdown-menu button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--color-on-surface);
    font-size: 0.875rem;
    cursor: pointer;
    text-align: left;
}
.msg-dropdown-menu button:hover {
    background: var(--color-surface-variant);
}

/* Chat Body */
.msg-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
    background: rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
}
.msg-thread-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.msg-date-divider {
    text-align: center;
    margin: var(--spacing-md) 0;
    position: relative;
}
.msg-date-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-outline-variant);
    z-index: 1;
}
.msg-date-divider span {
    position: relative;
    z-index: 2;
    background: var(--color-surface-variant);
    color: var(--color-on-surface-variant);
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 10px;
}

/* System Message Card */
.msg-bubble-system {
    display: flex;
    justify-content: center;
    margin: var(--spacing-sm) 0;
}
.msg-system-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    max-width: 480px;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.msg-system-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-primary);
    font-size: 0.9375rem;
    border-bottom: 1px dashed var(--color-outline-variant);
    padding-bottom: 6px;
    margin-bottom: 8px;
}
.msg-field-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    padding: 3px 0;
}
.msg-field-row .field-label {
    font-weight: 600;
    color: var(--color-on-surface-variant);
}
.msg-field-row .field-val {
    color: var(--color-on-surface);
    font-weight: 500;
}

/* Chat Bubbles */
.msg-bubble-row {
    display: flex;
    margin-bottom: 4px;
}
.msg-bubble-row.mine { justify-content: flex-end; }
.msg-bubble-row.partner { justify-content: flex-start; }

.msg-bubble {
    max-width: 70%;
    padding: 8px 12px;
    border-radius: 16px;
    font-size: 0.875rem;
    line-height: 1.4;
    position: relative;
    word-break: break-word;
}
.msg-bubble-row.mine .msg-bubble {
    background: #00503a;
    color: #ffffff;
    border-bottom-right-radius: 2px;
}
.msg-bubble-row.partner .msg-bubble {
    background: var(--color-surface-variant);
    color: var(--color-on-surface);
    border-bottom-left-radius: 2px;
}
.msg-text { margin: 0; }
.msg-bubble-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 4px;
    font-size: 0.6875rem;
    opacity: 0.8;
}
.msg-bubble-row.mine .read-icon { font-size: 14px; }
.msg-bubble-row.mine .read-icon.read { color: #60a5fa; }

/* Sticky Message Input Footer */
.msg-chat-footer {
    position: relative;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface);
    border-top: 1px solid var(--color-outline-variant);
}
.msg-input-form {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.msg-input-field {
    flex: 1;
    background: var(--color-surface-variant);
    border: 1px solid var(--color-outline-variant);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.875rem;
    color: var(--color-on-surface);
    outline: none;
}
.msg-input-field:focus {
    border-color: var(--color-primary);
}
.msg-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.msg-send-btn:active { transform: scale(0.95); }

/* Attachment Sheet */
.msg-attachment-sheet {
    position: absolute;
    bottom: 100%;
    left: 16px;
    margin-bottom: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    z-index: 40;
}
.sheet-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 0.6875rem;
    color: var(--color-on-surface);
    cursor: pointer;
    border: none;
    background: transparent;
}
.sheet-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Provider Details Side Panel */
.msg-provider-details-panel {
    border-left: 1px solid var(--color-outline-variant);
    background: var(--color-surface-variant);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    overflow-y: auto;
    height: 100%;
    min-height: 0;
}
.panel-header h4 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-on-surface);
}
.panel-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.panel-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-on-surface-variant);
    text-transform: uppercase;
}
.panel-contact-box {
    background: var(--color-surface);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-outline-variant);
}
.panel-contact-box .contact-name { font-weight: 700; font-size: 0.875rem; }
.panel-contact-box .contact-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-primary);
    font-size: 0.8125rem;
    text-decoration: none;
    margin-top: 4px;
}

/* Dashboard Mobile Bottom Navigation */
.dash-mobile-bottomnav {
    display: none;
}

/* Mobile UX Media Queries */
@media (max-width: 768px) {
    .dash-mobile-bottomnav {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        background: var(--color-surface, #ffffff) !important;
        border-top: 1px solid var(--color-outline-variant, #e5e7eb) !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
        z-index: 1000 !important;
    }

    [data-theme="dark"] .dash-mobile-bottomnav {
        background: rgba(28, 27, 27, 0.98) !important;
        border-top-color: rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35) !important;
    }

    .dash-mobile-bottomnav-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-around !important;
        height: 62px !important;
        position: relative !important;
        padding: 0 4px !important;
        max-width: 100% !important;
    }

    .dash-bnav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        color: var(--color-on-surface-variant, #6b7280) !important;
        text-decoration: none !important;
        font-size: 0.65rem !important;
        font-weight: 500 !important;
        flex: 1 1 0px !important;
        min-width: 0 !important;
        padding: 4px 2px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
    }

    .dash-bnav-item.active,
    .dash-bnav-item:hover {
        color: var(--color-primary, #00503a) !important;
    }

    [data-theme="dark"] .dash-bnav-item.active,
    [data-theme="dark"] .dash-bnav-item:hover {
        color: var(--color-primary, #83d7b4) !important;
    }

    .dash-bnav-item .bnav-icon {
        font-size: 1.15rem !important;
        line-height: 1 !important;
    }

    .dash-bnav-item .bnav-label {
        font-size: 0.625rem !important;
        font-weight: 600 !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .dash-bnav-item.active .bnav-label {
        font-weight: 700 !important;
    }

    .dash-bnav-fab {
        flex: 1 1 0px !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        top: -14px !important;
        flex-shrink: 0 !important;
    }

    .dash-bnav-fab button {
        width: 46px !important;
        height: 46px !important;
        border-radius: 50% !important;
        background: var(--color-primary, #00503a) !important;
        color: #ffffff !important;
        border: 3px solid var(--color-surface, #ffffff) !important;
        box-shadow: 0 4px 12px rgba(0, 80, 58, 0.35) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.2rem !important;
        cursor: pointer !important;
        transition: transform 0.15s ease, background 0.15s ease !important;
    }

    .dash-bnav-fab button:active {
        transform: scale(0.92) !important;
    }

    body.msg-portal-page .dash-content-inner,
    body.msg-portal-page .dash-content {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }
    body.msg-portal-page .dash-shell {
        padding: 0 !important;
        padding-bottom: 65px !important;
    }
    .msg-portal-container {
        grid-template-columns: 1fr !important;
        height: calc(100vh - 130px) !important;
        min-height: calc(100vh - 130px) !important;
        border-radius: 0 !important;
        border: none !important;
        margin: 0 !important;
    }
    .msg-sidebar {
        width: 100% !important;
        height: 100% !important;
    }
    .msg-chat-window {
        width: 100% !important;
        height: calc(100vh - 130px) !important;
        position: relative !important;
    }
    .msg-chat-window.provider-chat-layout {
        grid-template-columns: 1fr !important;
    }
    .msg-provider-details-panel {
        display: none !important;
    }
    .msg-chat-body {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 12px !important;
        padding-bottom: 20px !important;
    }
    .msg-chat-footer {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 50 !important;
        background: var(--color-surface) !important;
        border-top: 1px solid var(--color-outline-variant) !important;
        padding: 10px 12px !important;
        margin-bottom: 0 !important;
    }
    .msg-chat-header {
        padding: 8px 12px !important;
        gap: 8px !important;
    }
    .msg-header-left {
        min-width: 0 !important;
        flex: 1 !important;
        gap: 8px !important;
    }
    .msg-header-details {
        min-width: 0 !important;
        flex: 1 !important;
    }
    .msg-header-details h3 {
        font-size: 0.875rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .msg-header-sub {
        flex-wrap: nowrap !important;
        gap: 4px !important;
        min-width: 0 !important;
    }
    .msg-listing-link {
        font-size: 0.75rem !important;
        max-width: 140px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .dash-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .dash-table {
        min-width: 580px !important;
    }
    .msg-sidebar-mobile-hide { display: none !important; }
    .msg-chat-mobile-hide { display: none !important; }
    .msg-back-btn { display: flex !important; }
    .msg-bubble { max-width: 85%; }
    .msg-attachment-sheet {
        position: fixed !important;
        bottom: 130px !important;
        left: 12px !important;
        right: 12px !important;
        margin: 0 !important;
        justify-content: space-around !important;
        border-radius: var(--radius-lg) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
        z-index: 100 !important;
    }
}

/* ==========================================================================
   Category Service Page Hero Section (Customer vs Provider Role Differentiation)
   ========================================================================== */
.cat-hero-card {
    background: var(--color-surface-container-low, #faf6f0);
    border: 1px solid var(--color-outline-variant, #e2d7c7);
    color: var(--color-on-surface, #1c1b1f);
    padding: var(--spacing-2xl, 40px) var(--spacing-container, 24px);
    border-radius: var(--radius-2xl, 24px);
    margin-bottom: var(--spacing-xl, 24px);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.04));
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cat-hero-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cat-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: rgba(0, 106, 78, 0.08);
    border: 1.5px solid rgba(0, 106, 78, 0.22);
    color: #006A4E;
    border-radius: 50px;
    font-size: 0.8125rem;
    font-weight: 700;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.cat-hero-headline {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 900;
    font-family: var(--font-family-headline, sans-serif);
    margin: 0 0 16px 0;
    color: var(--color-on-surface, #1c1b1f);
    line-height: 1.18;
    letter-spacing: -0.5px;
}

.cat-highlight {
    color: #006A4E;
    display: inline-block;
    position: relative;
}

.cat-hero-subtitle {
    font-size: 1rem;
    color: var(--color-on-surface-variant, #49454f);
    margin: 0 0 28px 0;
    line-height: 1.6;
    max-width: 680px;
}

.cat-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    width: 100%;
}

.cat-btn-primary-pill {
    padding: 14px 28px;
    border-radius: 50px;
    background: #006A4E;
    color: #ffffff !important;
    font-weight: 800;
    font-size: 0.9375rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(0, 106, 78, 0.25);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.cat-btn-primary-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 106, 78, 0.35);
    background: #00543e;
}

.cat-btn-outline-pill {
    padding: 14px 28px;
    border-radius: 50px;
    background: var(--color-surface, #ffffff);
    color: var(--color-on-surface, #1c1b1f) !important;
    font-weight: 700;
    font-size: 0.9375rem;
    border: 1.5px solid var(--color-outline-variant, #e2d7c7);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.cat-btn-outline-pill:hover {
    background: var(--color-surface-container-high, #f5efe8);
    border-color: #006A4E;
}

@media (max-width: 600px) {
    .cat-hero-card {
        padding: 24px 16px !important;
        border-radius: var(--radius-xl, 16px) !important;
    }
    .cat-hero-headline {
        font-size: 1.5rem !important;
    }
    .cat-hero-subtitle {
        font-size: 0.875rem !important;
        margin-bottom: 20px !important;
    }
    .cat-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
.cat-btn-primary-pill, .cat-btn-outline-pill {
        justify-content: center;
        width: 100%;
        padding: 12px 20px;
    }
}

/* ============================================================
   MOBILE FIT-TO-SCREEN & FOOTER HIDING UTILITIES
   ============================================================ */
@media (max-width: 767px) {
    footer {
        display: none !important;
    }

    body {
        /* Default padding for mobile with bottom nav */
    }
    
    body.page-is-homepage {
        padding-bottom: 0px !important; /* Zero padding on body prevents artificial scrolling */
        overflow-x: hidden !important;
    }

    .app-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .trust-badges-bar {
        margin-top: 6px !important;
        margin-bottom: 8px !important;
        padding: 8px 4px !important;
        border-radius: 16px !important;
    }

    .trust-badge-icon {
        width: 34px !important;
        height: 34px !important;
        margin-bottom: 2px !important;
    }

    .trust-badge-icon span {
        font-size: 18px !important;
    }

    .trust-badge-title {
        font-size: 0.6875rem !important;
    }

    .section-wrapper {
        margin-top: 0 !important;
        margin-bottom: 4px !important;
    }

    .section-header {
        margin-top: 12px !important;
        margin-bottom: 10px !important;
    }

    .section-title {
        font-size: 1.1rem !important;
        font-weight: 800 !important;
    }

    .section-action {
        font-size: 0.8125rem !important;
        font-weight: 700 !important;
    }

    .category-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px 10px !important;
        margin-top: 10px !important;
        padding-bottom: 0px !important;
    }

    .category-icon-box {
        width: 58px !important;
        height: 58px !important;
        border-radius: 16px !important;
    }

    .category-icon-box span {
        font-size: 28px !important;
    }

    .category-label {
        font-size: 0.725rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }
}



/* ==========================================================================
   Legal & Utility Pages (Privacy, Terms, Contact, Help)
   ========================================================================== */

.legal-page-wrapper {
    background-color: var(--color-background);
    min-height: 80vh;
}

.legal-hero {
    background: linear-gradient(135deg, var(--color-primary-container) 0%, var(--color-primary) 100%);
    color: #ffffff;
    padding: var(--spacing-2xl) 0 var(--spacing-xl);
    position: relative;
    overflow: hidden;
}

.legal-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.legal-hero-content {
    max-width: 800px;
}

.legal-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.legal-hero-title {
    font-family: var(--font-family-headline);
    font-size: 2.25rem;
    font-weight: 800;
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.25;
    color: #ffffff;
}

.legal-hero-desc {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin: 0;
}

/* Legal Layout & TOC */
.legal-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

.legal-toc-nav {
    position: sticky;
    top: 80px;
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-sm);
}

.legal-toc-scroll {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.legal-toc-link {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    color: var(--color-on-surface-variant);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.legal-toc-link:hover,
.legal-toc-link.active {
    background: var(--color-surface-container-high);
    color: var(--color-primary);
    font-weight: 700;
}

.legal-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.legal-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    scroll-margin-top: 100px;
}

.legal-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-outline-variant);
    padding-bottom: var(--spacing-sm);
}

.legal-card-icon {
    color: var(--color-primary);
    font-size: 28px;
}

.legal-card-header h2 {
    font-family: var(--font-family-headline);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0;
}

.legal-card p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-on-surface-variant);
    margin-bottom: var(--spacing-md);
}

.legal-card ul {
    margin: 0 0 var(--spacing-md) 0;
    padding-left: 20px;
}

.legal-card ul li {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-on-surface-variant);
    margin-bottom: 8px;
}

.legal-sub-box {
    background: var(--color-surface-container-low);
    border-radius: var(--radius-xl);
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
    border-left: 4px solid var(--color-primary);
}

.legal-sub-box h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0 0 var(--spacing-xs) 0;
}

/* Permission Grid */
.permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.permission-item {
    display: flex;
    gap: var(--spacing-md);
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
    padding: var(--spacing-md);
    border-radius: var(--radius-xl);
}

.permission-item .perm-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    background: var(--color-primary-fixed);
    color: var(--color-on-primary-fixed);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.permission-item h4 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0 0 4px 0;
    word-break: break-all;
}

.permission-item p {
    font-size: 0.8125rem;
    margin: 0;
    line-height: 1.4;
}

.highlight-callout {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    background: rgba(187, 0, 39, 0.08);
    border: 1px solid var(--color-secondary-fixed);
    border-radius: var(--radius-xl);
    padding: var(--spacing-md);
    color: var(--color-on-surface);
}

.highlight-callout span {
    font-size: 32px;
    color: var(--color-secondary);
}

.contact-pill-list {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-top: var(--spacing-md);
}

.contact-pill-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-surface-container-high);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-on-surface);
}

/* Contact Page Styles */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--spacing-2xl);
    align-items: start;
}

.contact-section-title {
    font-family: var(--font-family-headline);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-on-surface);
    margin: 0 0 var(--spacing-md) 0;
}

.contact-info-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.contact-channel-card {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.contact-channel-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 24px;
}

.bg-primary-light { background: var(--color-primary-fixed); color: var(--color-on-primary-fixed); }
.bg-secondary-light { background: var(--color-secondary-fixed); color: var(--color-on-secondary-fixed); }
.bg-tertiary-light { background: var(--color-tertiary-fixed); color: var(--color-on-tertiary-fixed); }

.contact-channel-text h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0 0 4px 0;
}

.contact-channel-text .contact-val {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 4px 0;
}

.contact-channel-text .contact-val a {
    color: inherit;
    text-decoration: none;
}

.contact-channel-text .contact-val a:hover {
    text-decoration: underline;
}

.contact-subtext {
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
}

.contact-form-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-md);
}

.contact-form-subtitle {
    font-size: 0.9375rem;
    color: var(--color-on-surface-variant);
    margin: -8px 0 var(--spacing-lg) 0;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-on-surface);
}

.form-label .required {
    color: var(--color-error);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    background: var(--color-surface-container-lowest);
    color: var(--color-on-surface);
    font-family: inherit;
    font-size: 0.9375rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 80, 58, 0.15);
}

/* Help Center FAQs */
.help-hero {
    text-align: center;
}

.help-hero .legal-hero-content {
    margin: 0 auto;
}

.faq-search-box {
    position: relative;
    max-width: 640px;
    margin: var(--spacing-lg) auto 0;
}

.faq-search-box .search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-outline);
    font-size: 24px;
}

.faq-search-input {
    width: 100%;
    padding: 16px 48px 16px 54px;
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background: #ffffff;
    color: var(--color-on-surface);
    font-size: 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    outline: none;
}

.faq-search-input:focus {
    border-color: var(--color-primary-fixed);
}

.search-clear-btn {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-surface-container-high);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-on-surface);
}

.faq-cat-nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: var(--spacing-xl);
}

.faq-cat-pill {
    padding: 8px 20px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-outline-variant);
    background: var(--color-surface);
    color: var(--color-on-surface-variant);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.faq-cat-pill:hover,
.faq-cat-pill.active {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

.faq-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    max-width: 900px;
    margin: 0 auto;
}

.faq-cat-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-family-headline);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 var(--spacing-md) 0;
    border-bottom: 2px solid var(--color-primary-fixed);
    padding-bottom: var(--spacing-xs);
}

.faq-accordion-item {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    margin-bottom: var(--spacing-sm);
    overflow: hidden;
    transition: box-shadow var(--transition-fast);
}

.faq-accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background: transparent;
    border: none;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-on-surface);
    cursor: pointer;
}

.faq-accordion-header .icon-toggle {
    transition: transform var(--transition-base);
    color: var(--color-outline);
}

.faq-accordion-item.active .faq-accordion-header .icon-toggle {
    transform: rotate(180deg);
    color: var(--color-primary);
}

.faq-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow) ease-out, padding var(--transition-base);
    padding: 0 var(--spacing-lg);
}

.faq-accordion-item.active .faq-accordion-content {
    max-height: 500px;
    padding: 0 var(--spacing-lg) var(--spacing-lg);
}

.faq-accordion-content p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-on-surface-variant);
}

.faq-no-results {
    text-align: center;
    padding: var(--spacing-2xl);
    background: var(--color-surface);
    border-radius: var(--radius-2xl);
    border: 1px dashed var(--color-outline-variant);
    max-width: 600px;
    margin: 0 auto;
}

.faq-no-results h3 {
    margin: var(--spacing-md) 0 var(--spacing-xs) 0;
    color: var(--color-on-surface);
}

.help-cta-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
    background: linear-gradient(135deg, var(--color-surface-container-low) 0%, var(--color-surface-container-high) 100%);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-xl);
    margin-top: var(--spacing-2xl);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.help-cta-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.help-cta-icon {
    font-size: 40px;
    color: var(--color-primary);
}

.help-cta-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--color-on-surface);
}

.help-cta-content p {
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    margin: 0;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .legal-layout {
        grid-template-columns: 1fr;
    }

    .legal-toc-nav {
        position: static;
        overflow-x: auto;
        padding: 8px;
    }

    .legal-toc-scroll {
        flex-direction: row;
        white-space: nowrap;
    }

    .legal-card {
        padding: var(--spacing-md);
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-form-card {
        padding: var(--spacing-lg);
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .help-cta-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   AGENT PORTAL & UTILITY CLASSES
   ========================================================================== */

/* Max Width Containers */
.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }
.mx-auto   { margin-left: auto; margin-right: auto; }

/* Spacing Helpers */
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.space-x-1 > * + * { margin-left: 0.25rem; }
.space-x-2 > * + * { margin-left: 0.5rem; }
.space-x-3 > * + * { margin-left: 0.75rem; }
.space-x-4 > * + * { margin-left: 1rem; }

/* Grid Columns */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-12 { grid-column: span 12 / span 12; }

/* Flexbox & Alignment */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-1 { flex: 1 1 0%; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.min-w-0 { min-width: 0; }

.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

/* Colors & Tokens */
.text-primary { color: var(--color-primary, #006A4E); }
.text-on-surface { color: var(--color-on-surface, #1e293b); }
.text-on-surface-variant { color: var(--color-on-surface-variant, #64748b); }
.text-emerald-500 { color: #10b981; }
.text-emerald-600 { color: #059669; }
.text-emerald-700 { color: #047857; }
.text-amber-500 { color: #f59e0b; }
.text-amber-600 { color: #d97706; }
.text-amber-700 { color: #b45309; }
.text-amber-800 { color: #92400e; }
.text-red-500 { color: #ef4444; }
.text-red-600 { color: #dc2626; }
.text-red-700 { color: #b91c1c; }
.text-blue-500 { color: #3b82f6; }
.text-blue-600 { color: #2563eb; }
.text-slate-950 { color: #020617; }
.text-white { color: #ffffff !important; }

.bg-primary { background-color: var(--color-primary, #006A4E); }
.bg-primary\/10 { background-color: rgba(0, 106, 78, 0.1); }
.bg-primary\/20 { background-color: rgba(0, 106, 78, 0.2); }
.bg-surface { background-color: var(--color-surface, #ffffff); }
.bg-surface-dim { background-color: var(--color-surface-dim, #f8f9fa); }
.bg-surface-variant { background-color: var(--color-surface-container, #f1f5f9); }
.bg-surface-container { background-color: var(--color-surface-container, #f8fafc); }
.bg-surface-container-high { background-color: var(--color-surface-container-high, #e2e8f0); }
.bg-emerald-50 { background-color: #ecfdf5; }
.bg-emerald-100 { background-color: #d1fae5; }
.bg-emerald-600 { background-color: #059669; }
.bg-amber-100 { background-color: #fef3c7; }
.bg-amber-400 { background-color: #fbbf24; }
.bg-amber-500 { background-color: #f59e0b; }
.bg-red-50 { background-color: #fef2f2; }
.bg-red-100 { background-color: #fee2e2; }
.bg-white { background-color: #ffffff; }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
.bg-white\/90 { background-color: rgba(255, 255, 255, 0.9); }
.bg-black\/20 { background-color: rgba(0, 0, 0, 0.2); }
.bg-black\/25 { background-color: rgba(0, 0, 0, 0.25); }

.border-outline { border-color: var(--color-outline, #cbd5e1); }
.border-outline-variant { border-color: var(--color-outline-variant, #e2e8f0); }
.border-primary { border-color: var(--color-primary, #006A4E); }
.border-emerald-200 { border-color: #a7f3d0; }
.border-emerald-800 { border-color: #065f46; }
.border-red-200 { border-color: #fecaca; }
.border-red-800 { border-color: #991b1b; }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }

/* Typography */
.text-\[10px\] { font-size: 10px; line-height: 14px; }
.text-\[11px\] { font-size: 11px; line-height: 15px; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }

/* Responsive Breakpoints */
@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sm\:col-span-1 { grid-column: span 1 / span 1; }
    .sm\:col-span-2 { grid-column: span 2 / span 2; }
    .sm\:flex-row { flex-direction: row; }
    .sm\:flex-col { flex-direction: column; }
    .sm\:items-center { align-items: center; }
    .sm\:items-end { align-items: flex-end; }
    .sm\:justify-between { justify-content: space-between; }
    .sm\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
    .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
    .sm\:p-6 { padding: 1.5rem; }
    .sm\:pt-0 { padding-top: 0; }
    .sm\:border-t-0 { border-top-width: 0; }
}

@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:col-span-2 { grid-column: span 2 / span 2; }
    .md\:col-span-3 { grid-column: span 3 / span 3; }
    .md\:flex-row { flex-direction: row; }
    .md\:items-center { align-items: center; }
    .md\:justify-between { justify-content: space-between; }
    .md\:block { display: block; }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lg\:col-span-1 { grid-column: span 1 / span 1; }
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
    .lg\:col-span-3 { grid-column: span 3 / span 3; }
    .lg\:col-span-4 { grid-column: span 4 / span 4; }
    .lg\:hidden { display: none; }
    .lg\:p-8 { padding: 2rem; }
}

/* Specific Agent Portal Card Classes */
.auth-card {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-outline-variant, #e5e7eb);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.auth-card-wide {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-outline-variant, #e5e7eb);
    border-radius: 24px;
    padding: 2.25rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.dash-card {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-outline-variant, #e5e7eb);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.05));
}

.stat-card {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-outline-variant, #e5e7eb);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.05));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-on-surface, #1e293b);
}

.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--color-outline, #cbd5e1);
    background: var(--color-surface, #ffffff);
    color: var(--color-on-surface, #1e293b);
    font-size: 0.875rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--color-primary, #b83814);
    box-shadow: 0 0 0 3px rgba(184, 56, 20, 0.15);
}

/* Positioning & Layers */
.fixed { position: fixed; }
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }

.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }

.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

.opacity-40 { opacity: 0.4; }
.opacity-60 { opacity: 0.6; }
.opacity-80 { opacity: 0.8; }

.divide-y > * + * { border-top: 1px solid var(--color-outline-variant, #e5e7eb); }
.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* ============================================================
   GLOBAL INPUT WITH ICON STYLES (IMMUNE TO OVERRIDES)
   ============================================================ */
.input-with-icon {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

.input-with-icon .input-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
    color: var(--color-on-surface-variant, #64748b) !important;
    pointer-events: none !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.input-with-icon .form-input,
.input-with-icon input,
.input-with-icon select,
.input-with-icon textarea {
    width: 100% !important;
    padding-left: 46px !important;
    box-sizing: border-box !important;
}

.input-with-icon .btn-pwd-toggle {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    color: var(--color-on-surface-variant, #64748b) !important;
    cursor: pointer !important;
    padding: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
    line-height: 1 !important;
    border-radius: var(--radius-sm, 6px) !important;
}

.input-with-icon input[type="password"],
.input-with-icon .form-input:has(~ .btn-pwd-toggle),
.input-with-icon:has(.btn-pwd-toggle) .form-input,
.input-with-icon:has(.btn-pwd-toggle) input {
    padding-right: 46px !important;
}

/* ==========================================================================
   UNIVERSAL ACCOUNT & 5-TAB NAVIGATION ECOSYSTEM (v2.3.0)
   ========================================================================== */

/* Bottom Nav centre action (Search / Post) — sits in line with the tabs */
.bottom-nav-fab {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: background-color var(--transition-fast);
}

.nav-item-post:hover .bottom-nav-fab,
.nav-item-post.active .bottom-nav-fab {
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
}

.bottom-nav-fab .material-symbols-outlined {
    font-size: 22px;
}

/* Account Layout Grid */
.account-layout {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 20px 80px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: flex-start;
}

@media (max-width: 960px) {
    .account-layout {
        grid-template-columns: 1fr;
        padding: 16px 16px 90px;
        gap: 20px;
    }
}

/* Account Sidebar */
.account-sidebar {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 90px;
}

.account-user-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-outline-variant);
    margin-bottom: 20px;
}

.account-avatar-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.account-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-primary);
}

.account-verified-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: var(--color-primary);
    color: #ffffff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-surface);
}

.account-user-meta {
    flex: 1;
    min-width: 0;
}

.account-user-name {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-on-surface);
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-user-email {
    font-size: 0.8rem;
    color: var(--color-on-surface-variant);
    margin: 0 0 6px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-role-pill {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 50px;
    background: rgba(0, 106, 78, 0.12);
    color: var(--color-primary);
}

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

.account-nav-group-label {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.75px;
    color: var(--color-on-surface-variant);
    padding: 12px 12px 6px;
    text-transform: uppercase;
}

.account-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    color: var(--color-on-surface-variant);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.account-nav-item:hover {
    background: var(--color-surface-container);
    color: var(--color-primary);
}

.account-nav-item.active {
    background: rgba(0, 106, 78, 0.12);
    color: var(--color-primary);
    font-weight: 700;
}

.account-nav-item .material-symbols-outlined {
    font-size: 20px;
}

.account-badge-pro {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 800;
    background: linear-gradient(135deg, #006A4E, #008964);
    color: #ffffff;
    padding: 2px 6px;
    border-radius: 4px;
}

.account-nav-logout {
    color: #dc2626 !important;
    margin-top: 12px;
    border-top: 1px solid var(--color-outline-variant);
    padding-top: 14px;
}

.account-nav-logout:hover {
    background: rgba(220, 38, 38, 0.08) !important;
}

/* Account Main Content */
.account-main-content {
    min-width: 0;
}

.account-welcome-banner {
    background: linear-gradient(135deg, #006A4E 0%, #004d38 100%);
    border-radius: var(--radius-xl);
    padding: 32px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
    box-shadow: var(--shadow-md);
}

@media (max-width: 640px) {
    .account-welcome-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 20px;
    }
}

.account-welcome-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.18);
    padding: 3px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.account-welcome-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 6px 0;
}

.account-welcome-sub {
    font-size: 0.9rem;
    opacity: 0.9;
    margin: 0;
    max-width: 580px;
    line-height: 1.5;
}

/* Stats Grid */
.account-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

@media (max-width: 860px) {
    .account-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .account-stats-grid {
        grid-template-columns: 1fr;
    }
}

.account-stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.account-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.account-stat-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.account-stat-icon-wrapper .material-symbols-outlined {
    font-size: 24px;
}

.account-stat-info {
    flex: 1;
    min-width: 0;
}

.account-stat-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-on-surface);
    line-height: 1.2;
}

.account-stat-label {
    font-size: 0.8rem;
    color: var(--color-on-surface-variant);
    font-weight: 600;
}

.account-stat-arrow {
    color: var(--color-outline);
}

/* Section Header */
.account-card-section {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    padding: 28px;
    margin-bottom: 28px;
    box-shadow: var(--shadow-sm);
}

.account-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.account-section-header-wrap {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.account-section-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-on-surface);
    margin: 0 0 4px 0;
}

.account-section-desc {
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    margin: 0;
}

.account-section-link {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
}

/* Category Profiles Grid */
.account-cat-profiles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 860px) {
    .account-cat-profiles-grid {
        grid-template-columns: 1fr;
    }
}

.account-cat-card {
    background: var(--color-surface-container-low, var(--color-surface));
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.account-cat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.account-cat-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-status-pill {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 50px;
}

.account-status-pill.active {
    background: rgba(0, 106, 78, 0.12);
    color: #006A4E;
}

.account-status-pill.pending {
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
}

.account-cat-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0 0 6px 0;
}

.account-cat-summary {
    font-size: 0.825rem;
    color: var(--color-on-surface-variant);
    margin: 0 0 16px 0;
    line-height: 1.45;
}

.account-cat-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    border-radius: 50px;
    border: 1px solid var(--color-outline-variant);
    background: var(--color-surface);
    color: var(--color-on-surface);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.account-cat-btn:hover {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

/* Quick Hub Grid */
.account-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 640px) {
    .account-hub-grid {
        grid-template-columns: 1fr;
    }
}

.account-hub-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border-radius: var(--radius-lg);
    background: var(--color-surface-container);
    border: 1px solid var(--color-outline-variant);
    text-decoration: none;
    color: var(--color-on-surface);
    transition: transform var(--transition-base), background var(--transition-base);
}

.account-hub-item:hover {
    transform: translateX(4px);
    background: rgba(0, 106, 78, 0.06);
}

.account-hub-item .material-symbols-outlined {
    font-size: 28px;
    color: var(--color-primary);
}

.account-hub-item h4 {
    margin: 0 0 2px 0;
    font-size: 0.95rem;
    font-weight: 700;
}

.account-hub-item p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-on-surface-variant);
}

/* Memberships Catalog Grid */
.account-membership-catalog {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.account-membership-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    padding: 28px;
    box-shadow: var(--shadow-sm);
}

.account-membership-card.is-active-sub {
    border-color: #006A4E;
    box-shadow: 0 4px 20px rgba(0, 106, 78, 0.12);
}

.account-membership-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-outline-variant);
}

.account-membership-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.account-membership-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: rgba(0, 106, 78, 0.12);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-membership-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 4px 0;
}

.account-membership-current-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--color-on-surface-variant);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot-active {
    background: #006A4E;
    box-shadow: 0 0 6px #006A4E;
}

.dot-free {
    background: var(--color-outline);
}

.account-active-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 106, 78, 0.12);
    color: #006A4E;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
}

.account-membership-plans-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 720px) {
    .account-membership-plans-grid {
        grid-template-columns: 1fr;
    }
}

.account-plan-box {
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.account-plan-box.premium-box {
    border-color: #006A4E;
    background: var(--color-surface-container-low, var(--color-surface));
}

.plan-popular-ribbon {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #006A4E;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.account-plan-name {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.account-plan-price {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--color-primary);
    margin-bottom: 16px;
}

.account-plan-price span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-on-surface-variant);
}

.account-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.85rem;
}

.account-plan-features li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.account-plan-features .check-icon {
    font-size: 18px;
    color: var(--color-primary);
}

/* Post Hub Grid */
.account-post-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 640px) {
    .account-post-hub-grid {
        grid-template-columns: 1fr;
    }
}

.post-hub-option-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
    color: var(--color-on-surface);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.post-hub-option-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

.post-hub-card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.post-hub-card-icon .material-symbols-outlined {
    font-size: 32px;
}

.post-hub-card-text {
    flex: 1;
}

.post-hub-card-text h3 {
    margin: 0 0 6px 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.post-hub-card-text p {
    margin: 0;
    font-size: 0.825rem;
    color: var(--color-on-surface-variant);
    line-height: 1.4;
}

.post-hub-arrow {
    color: var(--color-outline);
    transition: transform var(--transition-fast);
}

.post-hub-option-card:hover .post-hub-arrow {
    transform: translateX(4px);
    color: var(--color-primary);
}

/* Verification Cards */
.account-verification-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 720px) {
    .account-verification-grid {
        grid-template-columns: 1fr;
    }
}

.account-verif-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    padding: 24px;
    display: flex;
    gap: 18px;
}

.account-verif-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.account-verif-icon-wrap .material-symbols-outlined {
    font-size: 26px;
}

.account-verif-content {
    flex: 1;
}

.account-verif-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 10px;
    flex-wrap: wrap;
}

.account-verif-top h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.account-verif-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 50px;
}

.account-verif-badge.badge-verified {
    background: rgba(0, 106, 78, 0.12);
    color: #006A4E;
}

.account-verif-badge.badge-pending {
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
}

.account-verif-content p {
    margin: 0;
    font-size: 0.825rem;
    color: var(--color-on-surface-variant);
    line-height: 1.45;
}

/* Button & General Utilities */
.account-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 50px;
    background: var(--color-primary);
    color: #ffffff !important;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 106, 78, 0.25);
    transition: all var(--transition-fast);
}

.account-btn-primary:hover {
    background: #00543e;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 106, 78, 0.35);
}

.account-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 50px;
    background: var(--color-surface-container);
    color: var(--color-on-surface);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--color-outline-variant);
    transition: all var(--transition-fast);
}

.account-btn-secondary:hover {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

.account-empty-state {
    text-align: center;
    padding: 48px 24px;
    background: var(--color-surface);
    border: 1px dashed var(--color-outline);
    border-radius: var(--radius-xl);
}

.account-empty-state .empty-icon {
    font-size: 48px;
    color: var(--color-outline);
    margin-bottom: 12px;
}

.account-empty-state h3 {
    margin: 0 0 6px 0;
    font-size: 1.15rem;
    font-weight: 800;
}

.account-empty-state p {
    margin: 0 auto;
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    max-width: 440px;
}

/* ==========================================================================
   FLIGHT BOOKING ENGINE STYLES (Trip Designer API Integration)
   ========================================================================== */
.flight-radio-chip {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.flight-radio-chip input[type="radio"] {
    display: none;
}

.flight-radio-chip .chip-label {
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-on-surface, #333);
    background: var(--color-surface-container-low, #f0f4f1);
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.flight-radio-chip input[type="radio"]:checked + .chip-label {
    background: #00503a;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 80, 58, 0.25);
}

.airport-picker-box:hover {
    border-color: #00503a !important;
    box-shadow: 0 4px 12px rgba(0, 80, 58, 0.08);
}

.flight-swap-btn:hover {
    background: #00503a !important;
    color: #ffffff !important;
}

.pax-counter-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #00503a;
    background: #ffffff;
    color: #00503a;
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pax-counter-btn:hover {
    background: #00503a;
    color: #ffffff;
}

.popular-route-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important;
    border-color: #00503a !important;
}

.flight-card:hover {
    border-color: #00503a !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

.sort-tab-btn {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid #d9dfdb;
    background: #ffffff;
    color: #555;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sort-tab-btn.active {
    background: #00503a;
    color: #ffffff;
    border-color: #00503a;
}

.spin {
    animation: flight-spin 1s linear infinite;
}

@keyframes flight-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (max-width: 992px) {
    .flight-search-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .flight-swap-btn {
        display: none !important;
    }
    .flight-results-layout {
        grid-template-columns: 1fr !important;
    }
    .flight-filters-sidebar {
        position: static !important;
    }
    .flight-card-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .flight-card-grid > div:last-child {
        border-left: none !important;
        padding-left: 0 !important;
        border-top: 1px solid #f0f0f0;
        padding-top: 14px;
        align-items: flex-start !important;
    }
    .flight-review-grid, .flight-checkout-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 600px) {
    .flight-search-grid {
        grid-template-columns: 1fr !important;
    }
}











/* ── Chat: admin pause banner & report dialog (admin Phase 4) ── */
.msg-admin-paused { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; font-size: 12px; font-weight: 700; text-align: center; background: rgba(217, 119, 6, 0.12); color: #92400e; border-top: 1px solid rgba(217, 119, 6, 0.3); }
.msg-admin-paused .material-symbols-outlined { font-size: 18px; }
[data-theme="dark"] .msg-admin-paused { color: #fcd34d; }
.msg-report-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.45); }
.msg-report-modal[hidden] { display: none; }
.msg-report-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 16px; background: var(--color-surface, #fff); color: var(--color-on-surface); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2); }
.msg-report-card h3 { margin: 0; font-size: 1.05rem; }
.msg-report-help { margin: 0 0 4px; font-size: 0.8125rem; color: var(--color-on-surface-variant); }
.msg-report-card label { font-size: 0.8125rem; font-weight: 600; }
.msg-report-card select, .msg-report-card textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--color-outline-variant); border-radius: 10px; background: var(--color-surface, #fff); color: var(--color-on-surface); font: inherit; font-size: 0.875rem; }
.msg-report-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.msg-system-notice { align-self: center; max-width: 90%; margin: 8px auto; padding: 6px 12px; border-radius: 12px; background: var(--color-surface-container-low, #f3efe8); color: var(--color-on-surface-variant); font-size: 12px; text-align: center; overflow-wrap: anywhere; }
.msg-system-notice .msg-meta-time { margin-left: 6px; opacity: 0.7; font-size: 11px; }

/* ── Homepage promo cards (Admin → Marketing → Promotions) ───────────── */
.promo-strip { margin-top: 16px; }
.promo-strip-row { gap: 12px; }
.promo-card { --promo-bg: #00503a; flex: 0 0 min(86%, 360px); min-height: 120px; display: flex; align-items: stretch; gap: 12px; padding: 16px; border-radius: 18px;
  background: linear-gradient(135deg, var(--promo-bg) 0%, color-mix(in srgb, var(--promo-bg) 78%, #000) 100%); color: #fff; text-decoration: none; overflow: hidden; position: relative; }
.promo-card:hover, .promo-card:focus-visible { filter: brightness(1.05); }
.promo-card:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.promo-card-text { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; z-index: 1; }
.promo-card-title { font-size: 1.05rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.promo-card-sub { font-size: .8125rem; opacity: .9; line-height: 1.35; overflow-wrap: anywhere; }
.promo-card-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 4px; font-size: .8125rem; font-weight: 700; }
.promo-card-cta .material-symbols-outlined { font-size: 16px; }
.promo-card-img { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; align-self: center; flex-shrink: 0; }
@media (min-width: 900px) { .promo-card { flex-basis: 360px; } }