/**
 * MyBangladesh — Platform theme
 * Carries the homepage design language (New-Desgn/Homepage.png) to every page. Loaded last on the
 * main, dashboard, provider, agent and error layouts, so it refines the component styles in style.css
 * without replacing them.
 *
 * 1. Tokens          2. Base             3. Header (inner pages)   4. Footer
 * 5. Page heroes     6. Surfaces         7. Buttons                8. Forms
 * 9. Tabs & chips    10. Empty states    11. Dashboards            12. Auth
 * 13. Info pages     14. Error pages     16. Fixes & fill-ins      15. Motion
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
body {
    --home-ink: #0d3b2c;                 /* headline green */
    --home-brand: #0b6b47;
    --home-red: #e3202b;
    --home-gold: #ffc64a;
    --home-card: var(--color-surface-container-lowest);
    --home-line: rgba(13, 59, 44, 0.10);
    --home-shadow: 0 12px 32px -14px rgba(13, 59, 44, 0.24), 0 2px 6px rgba(13, 59, 44, 0.05);
    --home-shadow-sm: 0 4px 14px -6px rgba(13, 59, 44, 0.18);
    --home-gutter: 16px;
    --home-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --tint-primary: #e8f4ee;             /* quiet green wash for selected / highlighted things */
    --ui-radius: 20px;                   /* cards */
    --ui-radius-sm: 14px;                /* inputs, small tiles */
}

[data-theme="dark"] body {
    --home-ink: #eef7f2;
    --home-brand: #83d7b4;
    --home-red: #ff6b6f;
    --home-card: var(--color-surface-container-low);
    --home-line: rgba(255, 255, 255, 0.10);
    --home-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.3);
    --home-shadow-sm: 0 4px 14px -6px rgba(0, 0, 0, 0.6);
    --tint-primary: rgba(131, 215, 180, 0.13);
}

@media (min-width: 768px) {
    body { --home-gutter: 24px; }
}

@media (min-width: 1100px) {
    body { --home-gutter: 32px; }
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
body,
body.page-is-other,
body.page-is-other .app-wrapper,
body.page-is-other .main-content {
    background-color: var(--color-background);
    color: var(--color-on-background);
}

h1, h2, h3, h4,
.headline-xl, .headline-lg, .headline-md {
    color: var(--home-ink);
    letter-spacing: -0.025em;
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

::selection {
    background: color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.section-title {
    font-family: var(--font-family-headline);
    font-weight: 800;
    color: var(--home-ink);
}

/* ==========================================================================
   2b. BRAND LOCKUP (header, footer, dashboards)
   ========================================================================== */
.home-brand {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    flex-shrink: 0;
}

.home-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 23%;
    box-shadow: 0 4px 10px -4px rgba(13, 59, 44, 0.45);
}

.home-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1;
}

.home-brand-name {
    font-family: var(--font-family-headline);
    font-size: clamp(0.875rem, 4.1vw, 1.0625rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--home-brand);
}

.home-brand-red {
    color: var(--home-red);
}

.home-brand-tag {
    display: none;
    margin-top: 3px;
    font-size: 0.5rem;
    font-weight: 500;
    white-space: nowrap;
    color: color-mix(in srgb, var(--home-ink) 78%, transparent);
}

@media (max-width: 339px) {
    .top-header .home-brand-text { display: none; }
}

@media (min-width: 430px) {
    .home-brand-tag { display: block; }
    .home-brand-mark { width: 38px; height: 38px; }
}

@media (min-width: 768px) {
    .home-brand { gap: 10px; }
    .home-brand-mark { width: 44px; height: 44px; }
    .home-brand-name { font-size: 1.375rem; }
    .home-brand-tag { font-size: 0.6875rem; margin-top: 4px; }
}

/* ==========================================================================
   3. HEADER — inner pages: solid, sticky, search inside
   ========================================================================== */
.top-header.home-header.is-inner {
    position: sticky;
    top: 0;
    z-index: 60;
    border-radius: 0;
    background: color-mix(in srgb, var(--color-background) 92%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    box-shadow: 0 1px 0 var(--home-line);
}

.top-header.home-header.is-inner.scrolled {
    box-shadow: 0 1px 0 var(--home-line), 0 10px 24px -18px rgba(13, 59, 44, 0.45);
}

.is-inner .home-header-row {
    flex-wrap: wrap;
    height: auto;
    min-height: 56px;
    padding-block: 9px 10px;
    row-gap: 9px;
}

.home-header-search {
    order: 5;
    flex: 1 0 100%;
    min-width: 0;
}

/* Compact search bar */
.home-search--bar {
    margin-top: 0;
    max-width: none;
}

.home-search--bar .home-search-box {
    height: 44px;
    padding: 0 4px 0 14px;
    background: var(--color-surface-container-low);
    border-color: transparent;
    box-shadow: none;
}

.home-search--bar .home-search-box:focus-within {
    background: var(--home-card);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.home-search--bar .home-search-icon { font-size: 21px; }
.home-search--bar .home-search-input { font-size: 0.9375rem; }
.home-search--bar .home-search-btn { width: 36px; height: 36px; }
.home-search--bar .home-search-btn .material-symbols-outlined { font-size: 20px; }
.home-search--bar .home-search-divider { height: 20px; }

.home-search--bar .search-dropdown {
    background: var(--home-card);
}

@media (min-width: 768px) {
    .is-inner .home-header-row {
        padding-block: 12px;
        row-gap: 10px;
    }

    /* Row 2: navigation on the left, search on the right */
    .is-inner .home-nav {
        flex: 0 1 auto;
        margin-inline: -8px 16px;
    }

    .home-header-search {
        order: 4;
        flex: 1 1 220px;
    }

    .home-search--bar .home-search-box { height: 42px; }
}

@media (min-width: 1100px) {
    /* Row 1: brand, navigation, controls. Row 2: search. */
    .is-inner .home-nav { margin-inline: 20px 0; }
    .home-header-search { flex-basis: 100%; }
    .home-search--bar { max-width: 560px; }
}

/* ==========================================================================
   4. FOOTER
   ========================================================================== */
.site-footer {
    margin-top: 56px;
    padding: 32px 0 22px;
    border-top: 1px solid var(--home-line);
    background: var(--color-surface-container-low);
}

.site-footer-inner {
    display: grid;
    gap: 18px;
}

.site-footer-about {
    margin-top: 12px;
    max-width: 460px;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-on-surface-variant);
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--home-brand);
}

.site-footer-links a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-footer-copy {
    font-size: 0.75rem;
    color: var(--color-outline);
}

@media (min-width: 900px) {
    .site-footer-inner {
        grid-template-columns: 1fr auto;
        align-items: end;
    }

    .site-footer-copy { grid-column: 1 / -1; }
}

/* ==========================================================================
   5. PAGE HEROES — the homepage sky, washed, behind every landing page
   ========================================================================== */
.cat-hero-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 14px var(--home-gutter) 24px;
    padding: 28px 18px 26px;
    border: 1px solid var(--home-line);
    border-radius: 26px;
    background: var(--home-card);
    box-shadow: var(--home-shadow);
}

.cat-hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../images/home/hero-960.webp") 78% 30% / cover no-repeat;
    opacity: 0.34;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 34%, transparent 62%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 34%, transparent 62%);
    pointer-events: none;
}

[data-theme="dark"] .cat-hero-card::before {
    opacity: 0.2;
}

.cat-hero-art {
    width: 84px;
    height: 84px;
    margin-bottom: 10px;
    object-fit: contain;
    filter: drop-shadow(0 12px 14px rgba(13, 59, 44, 0.22));
}

.cat-hero-badge {
    background: var(--home-card);
    border: 1px solid var(--home-line);
    color: var(--home-brand);
    box-shadow: var(--home-shadow-sm);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
}

.cat-hero-headline {
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: var(--home-ink);
}

.cat-highlight {
    color: var(--home-red);
}

.cat-hero-subtitle {
    color: color-mix(in srgb, var(--home-ink) 78%, transparent);
    text-wrap: balance;
}

.cat-btn-primary-pill {
    background: var(--color-primary);
    color: var(--color-on-primary) !important;
    font-weight: 700;
    box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--color-primary) 80%, transparent);
}

.cat-btn-primary-pill:hover {
    background: var(--color-primary-container);
    color: var(--color-on-primary-container) !important;
}

.cat-btn-outline-pill {
    background: var(--home-card);
    border: 1px solid var(--home-line);
    color: var(--home-ink) !important;
    box-shadow: var(--home-shadow-sm);
}

.cat-btn-outline-pill:hover {
    background: var(--home-card);
    border-color: var(--color-primary);
}

/* In-hero search field */
.cat-hero-container form input[type="text"] {
    height: 48px !important;
    border-radius: var(--radius-full) !important;
    border: 1px solid var(--home-line) !important;
    background: var(--home-card) !important;
    box-shadow: var(--home-shadow-sm);
}

.cat-hero-container form input[type="text"]:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.cat-hero-container form button[type="submit"] {
    height: 48px !important;
}

@media (min-width: 768px) {
    .cat-hero-card {
        margin-top: 20px;
        padding: 44px 32px 40px;
        border-radius: 32px;
    }

    .cat-hero-card::before {
        background-image: url("../images/home/hero-1672.webp");
        background-position: 70% 38%;
        opacity: 0.4;
    }

    [data-theme="dark"] .cat-hero-card::before { opacity: 0.22; }

    .cat-hero-art { width: 112px; height: 112px; margin-bottom: 14px; }
}

@media (min-width: 1344px) {
    .cat-hero-card { margin-inline: auto; max-width: 1216px; }
}

/* Dark scenic banner (info pages, flights): artwork with a deep-green reading side */
.legal-hero,
.flight-hero-card {
    position: relative;
    isolation: isolate;
    background:
        linear-gradient(100deg, rgba(6, 44, 32, 0.96) 0%, rgba(6, 44, 32, 0.86) 42%, rgba(6, 44, 32, 0.45) 100%),
        url("../images/home/banner-1-800.webp") 78% 50% / cover no-repeat !important;
}

@media (min-width: 768px) {
    .legal-hero,
    .flight-hero-card {
        background:
            linear-gradient(100deg, rgba(6, 44, 32, 0.96) 0%, rgba(6, 44, 32, 0.82) 38%, rgba(6, 44, 32, 0.18) 100%),
            url("../images/home/banner-1-1600.webp") 80% 50% / cover no-repeat !important;
    }
}

.legal-hero {
    margin: 14px var(--home-gutter) 0;
    border-radius: 26px;
    box-shadow: var(--home-shadow);
}

.legal-hero h1,
.flight-hero-card h1 {
    color: #ffffff;
    letter-spacing: -0.03em;
}

@media (min-width: 1344px) {
    .legal-hero { margin-inline: auto; max-width: 1216px; }
}

/* ==========================================================================
   6. SURFACES — one card look everywhere
   ========================================================================== */
.service-card,
.trending-card,
.job-card,
.story-card,
.property-card,
.matrimony-card,
.flight-card,
.legal-card,
.contact-channel-card,
.faq-accordion-item,
.account-card-section,
.account-cat-card,
.account-membership-card,
.account-hub-item,
.listing-manage-card,
.dash-section-card,
.dash-profile-card,
.dash-stat-card,
.dash-card,
.dash-table-wrap,
.dash-empty-card,
.stat-card,
.cat-filter-bar,
.mybd-modal-card {
    background: var(--home-card);
    border: 1px solid var(--home-line);
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--home-shadow-sm);
}

.service-card,
.trending-card,
.job-card,
.property-card,
.matrimony-card,
.account-hub-item,
.account-cat-card {
    transition: transform 0.2s var(--home-ease), box-shadow 0.2s var(--home-ease), border-color 0.2s var(--home-ease);
}

.service-card:hover,
.trending-card:hover,
.job-card:hover,
.property-card:hover,
.matrimony-card:hover,
.account-hub-item:hover,
.account-cat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--home-shadow);
    border-color: color-mix(in srgb, var(--color-primary) 30%, var(--home-line)) !important;
}

.service-card-title,
.trending-card-title,
.job-title,
.property-title {
    font-family: var(--font-family-headline);
    color: var(--home-ink);
}

.service-card-price,
.job-salary,
.property-price {
    color: var(--home-brand);
}

.mybd-modal-card {
    border-radius: 26px !important;
    box-shadow: var(--home-shadow);
}

/* Alerts */
.alert,
.auth-alert,
.dash-alert {
    border-radius: var(--ui-radius-sm);
}

/* ==========================================================================
   7. BUTTONS — pills, like the homepage
   ========================================================================== */
.btn,
.dash-btn-primary,
.dash-btn-outline,
.dash-btn-danger,
.auth-submit-btn,
.auth-btn-google,
.auth-btn-subtle,
.account-btn-primary,
.account-btn-secondary,
.btn-modal-cancel,
.btn-modal-submit,
.ld-cta-btn,
.dash-edit-profile-btn,
.dash-view-details-btn {
    border-radius: var(--radius-full) !important;
    font-weight: 700;
    transition: transform 0.18s var(--home-ease), box-shadow 0.18s var(--home-ease), background-color 0.18s var(--home-ease), border-color 0.18s var(--home-ease);
}

.auth-submit-btn,
.dark .auth-submit-btn {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.btn-primary,
.dash-btn-primary,
.auth-submit-btn,
.account-btn-primary,
.btn-modal-submit {
    background: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--color-primary) 85%, transparent);
}

.btn-primary:hover,
.dash-btn-primary:hover,
.auth-submit-btn:hover,
.account-btn-primary:hover,
.btn-modal-submit:hover {
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
    transform: translateY(-1px);
    opacity: 1;
}

.btn-outline,
.dash-btn-outline,
.auth-btn-google,
.account-btn-secondary,
.btn-modal-cancel {
    background: var(--home-card);
    border: 1px solid var(--home-line);
    color: var(--home-ink);
}

.btn-outline:hover,
.dash-btn-outline:hover,
.auth-btn-google:hover,
.account-btn-secondary:hover,
.btn-modal-cancel:hover {
    border-color: var(--color-primary);
    background: var(--home-card);
    transform: translateY(-1px);
}

/* ==========================================================================
   8. FORMS
   ========================================================================== */
.form-input,
.form-select,
.form-textarea,
.dash-form-input,
.dash-form-select,
.dash-form-textarea,
.msg-input-field {
    border-radius: var(--ui-radius-sm) !important;
    border: 1px solid color-mix(in srgb, var(--color-outline-variant) 80%, transparent);
    background-color: var(--home-card);
    color: var(--color-on-surface);
    transition: border-color 0.18s var(--home-ease), box-shadow 0.18s var(--home-ease);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.dash-form-input:focus,
.dash-form-select:focus,
.dash-form-textarea:focus,
.msg-input-field:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 16%, transparent);
    outline: none;
}

.form-label,
.dash-form-group label {
    font-weight: 600;
    color: var(--home-ink);
}

/* ==========================================================================
   9. TABS & CHIPS
   ========================================================================== */
.dash-subtab,
.faq-cat-pill,
.auth-role-tab,
.flight-radio-chip .chip-label {
    border-radius: var(--radius-full) !important;
}

.dash-subtab {
    background: var(--home-card);
    border: 1px solid var(--home-line);
    color: var(--color-on-surface-variant);
}

.dash-subtab:hover {
    border-color: color-mix(in srgb, var(--color-primary) 40%, var(--home-line));
    color: var(--home-ink);
}

.dash-subtab.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--color-primary) 85%, transparent);
}

.dash-subnav-tabs {
    scrollbar-width: none;
}

.dash-subnav-tabs::-webkit-scrollbar {
    display: none;
}

.dash-status-badge,
.ld-badge,
.job-badge {
    border-radius: var(--radius-full);
}

/* ==========================================================================
   10. EMPTY STATES — a tinted medallion instead of a bare grey icon
   ========================================================================== */
.dash-empty-card {
    padding: 36px 20px !important;
    text-align: center;
}

.dash-empty-card > .material-symbols-outlined:first-child,
.dash-empty-icon,
.account-empty-state > .material-symbols-outlined:first-child {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin-bottom: 14px !important;
    border-radius: 50%;
    background: var(--tint-primary);
    color: var(--home-brand) !important;
    font-size: 38px !important;
}

.dash-empty-card h4,
.dash-empty-card h3 {
    font-family: var(--font-family-headline);
    font-weight: 800;
    color: var(--home-ink) !important;
}

/* ==========================================================================
   11. DASHBOARDS (customer, provider, agent, account)
   ========================================================================== */
.dash-shell,
body.page-is-other .dash-shell,
body.page-is-other .dash-right {
    background: var(--color-background);
}

.dash-sidebar {
    background: var(--color-background);
    border-right: 1px solid var(--home-line);
}

.dash-sidebar-brand {
    margin-bottom: 22px;
    padding: 4px 8px;
}

.dash-sidebar .home-brand-mark { width: 40px; height: 40px; }
.dash-sidebar .home-brand-name { font-size: 1.1875rem; }

.dash-nav-link {
    border-radius: var(--radius-full);
    color: var(--color-on-surface-variant);
}

.dash-nav-link:hover {
    background: color-mix(in srgb, var(--home-card) 70%, transparent);
    color: var(--home-ink);
}

.dash-nav-link.active {
    background: var(--home-card);
    color: var(--home-brand);
    box-shadow: var(--home-shadow-sm);
    transform: none;
}

.dash-topbar {
    background: color-mix(in srgb, var(--color-background) 92%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--home-line);
}

.dash-topbar-title {
    font-family: var(--font-family-headline);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--home-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-topbar-search {
    border-radius: var(--radius-full);
    background: var(--color-surface-container-low);
    border-color: transparent;
}

.dash-topbar .icon-btn,
.dash-mobile-topbar .icon-btn,
.dash-mobile-topbar .back-btn {
    background: var(--home-card);
    border: 1px solid var(--home-line);
    color: var(--home-ink);
    box-shadow: var(--home-shadow-sm);
}

.dash-mobile-topbar,
body.page-is-other .dash-mobile-topbar {
    background: color-mix(in srgb, var(--color-background) 92%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--home-line);
    box-shadow: none;
    color: var(--home-ink);
}

.dash-mobile-topbar h1 {
    font-family: var(--font-family-headline);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--home-ink);
}

.dash-section-card h2,
.dash-section-card h3,
.dash-section-header h2,
.dash-section-header h3,
.account-section-header h2 {
    font-family: var(--font-family-headline);
    font-weight: 800;
    color: var(--home-ink);
}

.dash-stat-value,
.stat-value,
.stat-val {
    font-family: var(--font-family-headline);
    font-weight: 800;
    color: var(--home-ink);
}

.dash-table th {
    background: var(--color-surface-container-low);
    color: var(--color-on-surface-variant);
    font-weight: 700;
}

.dash-footer {
    border-top: 1px solid var(--home-line);
    background: transparent;
}

.dash-mobile-drawer {
    background: var(--color-background);
}

/* ==========================================================================
   12. AUTH — the sign-in card floats over the homepage scene
   ========================================================================== */
.auth-page-container {
    position: relative;
    isolation: isolate;
    padding: 28px 16px 40px;
    background: none;
}

.auth-page-container::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 300px;
    z-index: -1;
    background: url("../images/home/hero-960.webp") 80% 40% / cover no-repeat;
    opacity: 0.6;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.7) 40%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.7) 40%, transparent 100%);
    pointer-events: none;
}

[data-theme="dark"] .auth-page-container::before {
    opacity: 0.28;
}

.auth-card {
    background: var(--home-card) !important;
    border: 1px solid var(--home-line) !important;
    border-radius: 28px !important;
    box-shadow: var(--home-shadow);
}

.auth-title {
    font-family: var(--font-family-headline);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--home-ink);
}

.auth-logo-badge {
    background: var(--tint-primary);
    color: var(--home-brand);
}

.auth-role-tabs {
    border-radius: var(--radius-full);
    background: var(--color-surface-container-low);
}

@media (min-width: 768px) {
    .auth-page-container {
        padding: 56px 24px 72px;
    }

    .auth-page-container::before {
        height: 420px;
        background-image: url("../images/home/hero-1672.webp");
        background-position: 70% 45%;
    }
}

/* ==========================================================================
   13. INFO PAGES (contact, help, privacy, terms)
   ========================================================================== */
.legal-badge {
    border-radius: var(--radius-full);
}

.legal-card-icon,
.contact-channel-icon {
    border-radius: 16px;
}

.faq-accordion-item {
    overflow: hidden;
}

.faq-cat-title {
    font-family: var(--font-family-headline);
    font-weight: 800;
    color: var(--home-ink);
}

/* ==========================================================================
   14. ERROR PAGES
   ========================================================================== */
body.page-is-other.flex.items-center > div > div {
    border-radius: 28px !important;
    border: 1px solid var(--home-line) !important;
    background: var(--home-card) !important;
    box-shadow: var(--home-shadow) !important;
}

/* ==========================================================================
   16. FIXES & FILL-INS found while carrying the theme across every page
   ========================================================================== */

/* Signed-in phones: the avatar joins the row, so the location pill shows its pin only */
.is-inner .home-brand { flex-shrink: 1; }
.is-inner .home-header-actions { flex-shrink: 0; }

@media (max-width: 479px) {
    .home-header--authed .home-loc-name,
    .home-header--authed .home-loc-caret { display: none; }
    .home-header--authed .home-loc-pill { width: 34px; padding: 0; }
    .home-header--authed .home-brand-tag { display: none; }
}

/* Utilities the older provider pages use but no stylesheet defined */
.card { background: var(--home-card); border: 1px solid var(--home-line); border-radius: var(--ui-radius); box-shadow: var(--home-shadow-sm); }
.min-h-screen { min-height: 100vh; }
.bg-surface-container-lowest { background-color: transparent; }
.pb-2 { padding-bottom: 0.5rem; }
.px-8 { padding-inline: 2rem; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.object-cover { object-fit: cover; }
.no-underline { text-decoration: none; }
.w-100 { width: 100%; }
.border-outline-variant\/30,
.border-outline-variant\/20 { border-color: var(--home-line); }
.rounded-3xl { border-radius: var(--ui-radius); }

.btn-secondary {
    background: var(--home-card);
    border: 1px solid var(--home-line);
    color: var(--home-ink);
    box-shadow: var(--home-shadow-sm);
}

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

/* Account area: on phones the long side menu becomes one swipeable row of pills */
.account-sidebar {
    background: var(--home-card);
    border: 1px solid var(--home-line);
    border-radius: var(--ui-radius);
    box-shadow: var(--home-shadow-sm);
}

.account-nav-item { border-radius: var(--radius-full); }

.account-nav-item.active {
    background: var(--tint-primary);
    color: var(--home-brand);
}

@media (max-width: 899px) {
    .account-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 14px var(--home-gutter) 90px !important;
        gap: 14px !important;
    }

    .account-sidebar {
        position: static;
        padding: 12px;
        min-width: 0;
    }

    .account-user-card {
        padding-bottom: 12px;
        margin-bottom: 10px;
        gap: 12px;
    }

    .account-nav-menu {
        flex-direction: row;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .account-nav-menu::-webkit-scrollbar { display: none; }
    .account-nav-group-label { display: none; }

    .account-nav-menu > * { flex-shrink: 0; }
    .account-nav-menu > div:not(.account-nav-group-label) { display: none; }   /* dividers */

    .account-nav-item {
        padding: 8px 14px;
        gap: 6px;
        font-size: 0.8125rem;
        white-space: nowrap;
        border: 1px solid var(--home-line);
        scroll-snap-align: start;
    }

    .account-nav-item.active {
        border-color: transparent;
        background: var(--color-primary);
        color: var(--color-on-primary);
    }

    .account-nav-item .material-symbols-outlined { font-size: 18px; }
}

/* Messaging */
.msg-portal-container {
    background: var(--home-card);
    border-color: var(--home-line);
    border-radius: var(--ui-radius);
    box-shadow: var(--home-shadow-sm);
}

.msg-sidebar { background: var(--color-surface-container-low); }

/* Two-pane chat cards written with inline widths: stack them on phones */
@media (max-width: 767px) {
    .dash-section-card[style*="flex-direction: row"] {
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .dash-section-card[style*="flex-direction: row"] > div {
        width: 100% !important;
        min-width: 0 !important;
        border-right: 0 !important;
    }
}

/* Flight result sort tabs (styled in the page itself with a literal white) */
body .sort-tab-btn:not(.active) {
    background: var(--home-card);
    border-color: var(--home-line);
    color: var(--color-on-surface);
}

/* ==========================================================================
   17. DETAIL PASS — listing pages, cards, agent portal, creator studio
   ========================================================================== */

/* Badge over a listing photo */
.card-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--home-card) 92%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--home-brand);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: var(--home-shadow-sm);
}

.card-badge::before {
    content: "verified";
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    font-size: 13px;
    line-height: 1;
}

/* Search filter chips */
.chip {
    background: var(--home-card) !important;
    border: 1px solid var(--home-line) !important;
    color: var(--color-on-surface-variant) !important;
    white-space: nowrap;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
}

.chip.chip-active {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
}

/* ---- Listing detail ---- */
.ld-gallery {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--home-shadow);
}

.ld-gallery-main { background: var(--color-surface-container-low); }

.ld-section,
.ld-sidebar-inner {
    background: var(--home-card);
    border: 1px solid var(--home-line);
    border-radius: var(--ui-radius);
    box-shadow: var(--home-shadow-sm);
}

.ld-section-title {
    font-family: var(--font-family-headline);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--home-ink);
}

.ld-section-title .material-symbols-outlined { color: var(--home-brand); }

.ld-price-banner {
    border-radius: var(--ui-radius);
    background: linear-gradient(120deg, #0d3b2c 0%, #0b6b47 100%);
    box-shadow: 0 14px 28px -16px rgba(13, 59, 44, 0.7);
}

.ld-price-label {
    letter-spacing: 0.06em;
    opacity: 0.85;
}

.ld-detail-item {
    border-radius: var(--ui-radius-sm);
    border-color: var(--home-line);
    background: var(--color-surface-container-low);
}

/* Rating summary: stars in a row */
.ld-rating-summary {
    border-radius: var(--ui-radius-sm);
    border-color: var(--home-line);
    background: var(--color-surface-container-low);
}

.ld-rating-big {
    font-family: var(--font-family-headline);
    color: var(--home-ink);
}

.ld-rating-stars {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1px;
}

.ld-star.filled { font-variation-settings: 'FILL' 1; }

.ld-rating-count {
    flex-basis: 100%;
    margin-top: 4px;
}

/* Phone action bar: floats above the bottom navigation instead of hiding behind it */
@media (max-width: 1023px) {
    .ld-contact-bar {
        bottom: 12px;
        z-index: 1001;
        padding: 0 var(--home-gutter);
        background: transparent;
        border: 0;
        box-shadow: none;
        pointer-events: none;
    }

    .ld-contact-bar > * {
        pointer-events: auto;
        min-height: 52px;
        border-radius: var(--radius-full) !important;
        box-shadow: 0 16px 30px -12px rgba(13, 59, 44, 0.7);
    }

    .ld-container { padding-bottom: 96px; }
}

@media (max-width: 767px) {
    .ld-contact-bar { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
    .ld-container { padding-bottom: 150px; }
}

/* ---- Dashboards on phones: nothing may push the page wider than the screen ---- */
.dash-content-inner,
.dash-content-inner > *,
.dash-content-inner .grid > *,
.dash-content-inner .flex > * {
    min-width: 0;
}

.dash-content-inner > * { max-width: 100%; }

@media (max-width: 767px) {
    .dash-content-inner .flex.items-center.justify-between,
    .dash-content-inner .flex.justify-between {
        flex-wrap: wrap;
        gap: 10px;
    }

    .dash-content-inner table:not(.dash-table) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dash-table-wrap { overflow-x: auto; }
}

/* Help accordions (agent support) */
.support-faq {
    border: 1px solid var(--home-line);
    border-radius: var(--ui-radius-sm);
    background: var(--color-surface-container-low);
    padding: 12px 14px;
}

.support-faq summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--home-ink);
}

.support-faq p {
    margin-top: 8px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-on-surface-variant);
}

/* ---- Creator studio (create reel, analytics) ---- */
.analytics-container .metric-card,
.analytics-container .analytics-section {
    border-color: var(--home-line);
    border-radius: var(--ui-radius);
    box-shadow: var(--home-shadow-sm);
}

.analytics-container .metric-value,
.analytics-container .section-title {
    font-family: var(--font-family-headline);
    color: var(--home-ink);
}

.analytics-container .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
    .analytics-container .metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.analytics-container .table-reels { display: block; overflow-x: auto; }

.dash-content-inner > .analytics-container { width: 100%; max-width: 100%; margin-inline: 0; padding-inline: 0; overflow-x: clip; }

.ld-contact-bar .ld-contact-bar-btn,
.ld-contact-bar .ld-contact-bar-btn span {
    background-color: var(--color-primary);
    color: var(--color-on-primary) !important;
}

.ld-contact-bar .ld-contact-bar-btn span { background: none; }
.analytics-container .metric-card { min-width: 0; padding: 16px; flex-direction: column; align-items: flex-start; gap: 4px; }
.analytics-container .metric-value { font-size: 1.5rem; }

body .video-dropzone {
    background: var(--color-surface-container-low);
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--home-line));
    color: var(--color-on-surface);
}

body .video-dropzone:hover {
    background: var(--tint-primary);
}

/* ==========================================================================
   15. MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .service-card,
    .trending-card,
    .job-card,
    .property-card,
    .matrimony-card,
    .account-hub-item,
    .account-cat-card,
    .btn,
    .dash-btn-primary,
    .dash-btn-outline,
    .cat-btn-primary-pill,
    .cat-btn-outline-pill {
        transition-duration: 0.01ms !important;
        transform: none !important;
    }
}