/* ═══════════════════════════════════════════════════════════
   REM Mobile Enhancement CSS
   Only loaded on screens ≤768px via <link media="(max-width:768px)">
   This file ONLY ADDS/OVERRIDES — never removes desktop styles.
   ═══════════════════════════════════════════════════════════ */

/* ─── Better Touch Targets ─────────────────────────────── */
a,
button,
input[type="submit"],
.btn {
        min-height: 44px;
}

/* ─── Typography — Larger on Mobile ────────────────────── */
body {
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
}

h1 {
        font-size: 1.5rem !important;
        line-height: 1.25;
}

h2 {
        font-size: 1.25rem;
}

h3 {
        font-size: 1.1rem;
}

/* ─── Sticky Mobile CTA ───────────────────────────────── */
.mobile-cta-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        gap: 0;
        z-index: 9990;
        background: rgba(10, 22, 40, 0.94);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding: 0;
}

.mobile-cta-bar a,
.mobile-cta-bar button {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 10px;
        color: white;
        text-decoration: none;
        font-size: 0.85rem;
        font-weight: 600;
        border: none;
        cursor: pointer;
        background: transparent;
        transition: background 0.2s;
        min-height: 52px;
}

.mobile-cta-bar a:first-child {
        border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-cta-bar a:first-child:hover {
        background: rgba(59, 130, 246, 0.15);
}

.mobile-cta-bar a:nth-child(2):hover {
        background: rgba(37, 211, 102, 0.15);
}

.mobile-cta-bar button:hover {
        background: rgba(212, 175, 55, 0.15);
}

.mobile-cta-bar a:nth-child(2) svg {
        color: #25D366;
}

.mobile-cta-bar button svg {
        color: #e0bb6a;
}

/* Safe area + space for CTA bar */
body {
        padding-bottom: max(56px, env(safe-area-inset-bottom, 56px));
}

/* ─── Cards — Full Width ───────────────────────────────── */
.listing-card,
.property-card,
.card {
        border-radius: 12px;
}

/* ─── Search — Full Width Stack ────────────────────────── */
.search-form {
        flex-direction: column;
}

.search-form input,
.search-form select {
        min-height: 48px;
        font-size: 1rem;
}

/* ─── Image Optimization (Mobile) ──────────────────────── */
.property-image,
.listing-img,
.card-img,
img[loading="lazy"] {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: 8px;
        filter: contrast(1.06) saturate(1.05);
        transition: transform 0.3s ease, opacity 0.4s ease;
        image-rendering: -webkit-optimize-contrast;
}

.property-image:hover,
.listing-img:hover {
        transform: scale(1.02);
}

/* Blur-up placeholder → fade-in */
img[loading="lazy"] {
        background: linear-gradient(135deg, #e2e8f0, #f1f5f9);
        opacity: 0;
}

img[loading="lazy"].loaded,
img[loading="lazy"][src]:not([src=""]) {
        opacity: 1;
}

/* ─── Image Skeleton Loading ───────────────────────────── */
@keyframes shimmer {
        0% {
                background-position: -200% 0;
        }

        100% {
                background-position: 200% 0;
        }
}

img[loading="lazy"]:not([src]),
.img-placeholder {
        background: linear-gradient(90deg,
                        #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
}

/* ─── MeiliSearch Overlay — Better Mobile ──────────────── */
#meili-overlay input {
        font-size: 16px !important;
        padding: 14px 16px !important;
}

.meili-chip {
        padding: 8px 14px !important;
        font-size: 14px !important;
}

/* ─── Prevent Horizontal Overflow ──────────────────────── */
html,
body {
        overflow-x: hidden;
}

/* ─── Reduce Animations for Performance ────────────────── */
@media (prefers-reduced-motion: reduce) {
        * {
                animation-duration: 0.01ms !important;
                transition-duration: 0.01ms !important;
        }
}
/* ═══════════════════════════════════════════════════════════
   REM Mobile-First Enhancement — Phase 2 (2026-04-23)
   Now active up to 1024px (iPad Air, Pro 11")
   ═══════════════════════════════════════════════════════════ */

/* ─── iPad Layout (769px–1024px) ──────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
    .hp-pgrid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .hp-stats {
        flex-direction: row !important;
        flex-wrap: wrap;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 24px;
    }
    .ls-card {
        gap: 12px;
    }
    .ls-card-img {
        flex: 0 0 180px;
        height: 180px;
    }
    #header .container {
        padding: 0 16px;
    }
    .widget-content {
        display: none !important;
    }
}

/* ─── Header — Hamburger Visible for iPads ─────────────── */
@media (max-width: 1024px) {
    .mmenu-trigger {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    #navigation:not(.open) {
        display: none !important;
    }
    .widget-content {
        display: none !important;
    }
    .header-widget .with-btn {
        display: none !important;
    }
}

/* ─── Home Page — Hero & Search ────────────────────────── */
.hp-hero {
    min-height: auto !important;
    padding: 32px 0 24px !important;
}

.hp-hero h1 {
    font-size: clamp(1.6rem, 5vw, 2.4rem) !important;
}

.hp-search {
    padding: 16px 18px 20px !important;
    border-radius: 16px !important;
}

.hp-search-row {
    flex-direction: column !important;
    gap: 8px !important;
}

.hp-nlp-input {
    font-size: 16px !important;
    padding: 14px 16px !important;
}

.hp-go-btn {
    width: 100% !important;
    padding: 14px !important;
    font-size: 1rem !important;
}

.hp-intent-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding-bottom: 4px;
}

.hp-intent-tabs::-webkit-scrollbar {
    display: none;
}

.hp-intent-tab {
    flex-shrink: 0;
    padding: 10px 18px !important;
    font-size: 0.88rem !important;
    min-height: 44px;
}

/* Stats bar — horizontal scroll on phone */
.hp-stats {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: -28px 12px 0 !important;
    padding: 16px 12px !important;
    gap: 16px !important;
}

.hp-stats::-webkit-scrollbar {
    display: none;
}

.hp-stat {
    flex: 0 0 auto;
    min-width: 90px;
}

.hp-stat-n {
    font-size: 1.4rem !important;
}

/* Property grid & cards */
.hp-pgrid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
}

.hp-pimg {
    height: 160px !important;
}

.hp-pbody {
    padding: 12px 14px 16px !important;
}

.hp-pname {
    font-size: 0.92rem !important;
    line-height: 1.3;
}

/* Persona grid */
.hp-persona-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

.hp-persona {
    padding: 20px 16px !important;
}

.hp-persona h2 {
    font-size: 1rem !important;
}

/* Location grid */
.hp-loc-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
}

.hp-loc-card {
    padding: 14px 10px !important;
}

.hp-loc-card h4 {
    font-size: 0.82rem !important;
}

/* Why choose us */
.hp-why-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

/* Section spacing */
.hp-sec {
    padding: 36px 0 !important;
}

.hp-title {
    font-size: 1.4rem !important;
}

.hp-sub {
    font-size: 0.95rem !important;
    margin-bottom: 28px !important;
}

/* ─── Listings Page — Mobile Optimization ──────────────── */
.ls-page {
    padding: 0 14px 60px !important;
}

.ls-hero {
    margin: 0 -14px !important;
    padding: 24px 14px 20px !important;
}

.ls-hero h1 {
    font-size: 1.2rem !important;
}

.ls-filters {
    margin: -14px 0 16px !important;
    padding: 14px !important;
    border-radius: 12px !important;
}

.ls-filters-row {
    gap: 8px !important;
}

.ls-fg {
    flex: 1 1 100% !important;
}

.ls-fg select,
.ls-fg input {
    font-size: 16px !important;
    min-height: 44px;
    padding: 10px 14px !important;
}

.ls-fg-price {
    flex: 1 1 48% !important;
}

.ls-btn-row {
    width: 100%;
}

.ls-btn {
    flex: 1;
    min-height: 44px;
    font-size: 0.92rem !important;
}

.ls-card {
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 14px !important;
}

.ls-card-img {
    flex: none !important;
    width: 100% !important;
    height: 220px !important;
    border-radius: 14px 14px 0 0 !important;
}

.ls-card-body {
    padding: 12px 14px !important;
}

.ls-card-title {
    font-size: 1.05rem !important;
    white-space: normal !important;
}

.ls-card-right {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 14px 14px !important;
    border-top: 1px solid #f1f5f9;
}

.ls-card-price {
    font-size: 1.15rem !important;
}

.ls-contact-btns {
    gap: 6px !important;
}

.ls-wa-btn,
.ls-call-btn {
    padding: 10px 14px !important;
    font-size: 0.88rem !important;
    min-height: 44px;
}

/* Results header stack */
.ls-results-header {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
}

/* Sort strip — scrollable */
.ls-sort-strip {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
}

.ls-sort-strip::-webkit-scrollbar {
    display: none;
}

.ls-sort-strip a {
    flex-shrink: 0;
    padding: 6px 12px !important;
    min-height: 36px;
}

/* Pagination touch targets */
.ls-pager a,
.ls-pager span {
    width: 44px !important;
    height: 44px !important;
    font-size: 0.88rem !important;
}

/* ─── Property Detail — Mobile Optimization ────────────── */
.pd-gallery {
    border-radius: 0 !important;
    margin: 0 -14px !important;
}

.pd-specs {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
}

.pd-main-col,
.pd-side-col {
    width: 100% !important;
    float: none !important;
}

.pd-side-col {
    margin-top: 16px;
}

.pd-highlights {
    grid-template-columns: 1fr 1fr !important;
}

/* ─── Project Search — Mobile Optimization ─────────────── */
.ps-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
}

.ps-filters {
    flex-direction: column !important;
    gap: 8px !important;
}

.ps-filters select,
.ps-filters input {
    width: 100% !important;
    font-size: 16px !important;
    min-height: 44px;
}

/* ─── WhatsApp Widget — Hide on Mobile (CTA bar replaces) */
.whatsapp_chat_support {
    display: none !important;
}

/* ─── Meili Search Overlay — Full Mobile ───────────────── */
#meili-overlay {
    padding: 0 !important;
}

#meili-overlay > div {
    margin: 0 !important;
    padding: 16px !important;
    max-width: 100% !important;
}

#meili-overlay input {
    font-size: 16px !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
}

#meili-results {
    max-height: calc(100vh - 200px) !important;
}

#meili-results a {
    padding: 12px 14px !important;
    border-radius: 10px !important;
}

/* ─── Footer — Mobile Optimization ─────────────────────── */
.footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px 14px !important;
}

.footer-grid > .footer-col:first-child {
    grid-column: 1 / -1;
}

.footer-grid > .footer-col:last-child {
    grid-column: 1 / -1;
}

.footer-seo {
    display: none !important;
}

#footer {
    padding: 36px 0 0 !important;
}

.footer-bottom {
    margin-top: 20px !important;
    padding: 14px 0 !important;
}

/* ─── Phone-Only (<= 480px) ────────────────────────────── */
@media (max-width: 480px) {
    .hp-pgrid {
        grid-template-columns: 1fr !important;
    }

    .hp-persona-grid {
        grid-template-columns: 1fr !important;
    }

    .hp-loc-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .hp-pimg {
        height: 200px !important;
    }

    .ls-card-img {
        height: 200px !important;
    }

    .hp-cats-row {
        grid-template-columns: 1fr !important;
    }

    .hp-news-grid {
        grid-template-columns: 1fr !important;
    }

    .hp-hero-p {
        font-size: 0.95rem !important;
    }

    .hp-example-chips {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .hp-example-chips::-webkit-scrollbar {
        display: none;
    }

    .hp-example-chip {
        flex-shrink: 0;
        padding: 8px 14px !important;
        font-size: 0.82rem !important;
    }
}

/* ─── Safe Area — iPhone Notch ─────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mobile-cta-bar {
        padding-bottom: env(safe-area-inset-bottom);
    }
}


/* ═══════════════════════════════════════════════════════════
   Phase 3 — Building, Project Detail, Location Detail
   ═══════════════════════════════════════════════════════════ */

/* ─── Building Page — Table Overflow + Touch ───────────── */
.bw {
    padding: 10px !important;
    max-width: 100% !important;
}

.bw table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: .8rem !important;
}

.bw table td,
.bw table th {
    padding: 6px 8px !important;
    white-space: nowrap;
}

.b-hero img {
    height: 220px !important;
    border-radius: 8px !important;
}

.b-cta {
    flex-direction: column !important;
    gap: 6px !important;
}

.b-cta a {
    padding: 12px 0 !important;
    font-size: .9rem !important;
    min-height: 44px;
}

.b-section h2 {
    font-size: .95rem !important;
}

.b-fold .fold-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.b-disc {
    font-size: .72rem !important;
}

/* Gallery overlay on mobile */
.b-gallery-overlay {
    padding: 10px !important;
}

.b-gallery-overlay img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
}

/* ─── Project Detail Public — Mobile ───────────────────── */
.pd-page {
    padding: 12px !important;
}

.pd-layout {
    flex-direction: column !important;
}

.pd-lead-panel {
    width: 100% !important;
    position: static !important;
    order: -1;
}

.pd-lead-card {
    padding: 16px !important;
    margin-bottom: 16px !important;
}

.pd-lead-card h1 {
    font-size: 1.15rem !important;
}

.pd-hero img {
    max-height: 220px !important;
    border-radius: 8px !important;
}

.pd-thumbs {
    gap: 6px !important;
}

.pd-thumbs img {
    width: 70px !important;
    height: 55px !important;
}

.pd-distances {
    gap: 8px !important;
    justify-content: space-between;
}

.pd-dist {
    flex: 1 1 calc(25% - 8px);
    min-width: 70px;
    padding: 8px 6px !important;
    font-size: .75rem;
}

.pd-dist span {
    font-size: 1.2rem !important;
}

.pd-price-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pd-price-table th,
.pd-price-table td {
    padding: 8px 10px !important;
    font-size: .82rem !important;
    white-space: nowrap;
}

.pd-related {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    padding-bottom: 8px;
}

.pd-related-card {
    flex-shrink: 0 !important;
    width: 120px !important;
}

.pd-related-card img {
    width: 120px !important;
    height: 85px !important;
}

.pd-section h2 {
    font-size: 1rem !important;
}

.pd-gate-form {
    flex-direction: column !important;
    gap: 8px !important;
}

.pd-gate-form input[type=tel] {
    width: 100% !important;
    font-size: 16px !important;
    min-height: 44px;
}

/* Sticky CTA on project detail */
#stickyCtaBar {
    padding: 8px 12px !important;
    gap: 6px !important;
    bottom: 52px !important;
}

#stickyCtaBar a {
    font-size: 12px !important;
    padding: 10px 12px !important;
    min-height: 40px;
}

/* Lead popup on mobile — full width bottom sheet */
#leadPopupREM {
    width: calc(100% - 20px) !important;
    right: 10px !important;
    left: 10px !important;
    bottom: 120px !important;
    max-width: 100% !important;
}

/* ─── Location Detail — Mobile ─────────────────────────── */
.loc-page,
.ld-page {
    padding: 0 12px !important;
}

.loc-hero,
.ld-hero {
    padding: 18px 12px !important;
}

.loc-hero h1,
.ld-hero h1 {
    font-size: 1.2rem !important;
}

.loc-grid,
.ld-grid,
.loc-card-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

.loc-sidebar,
.ld-sidebar {
    display: none !important;
}

.loc-card,
.ld-card {
    border-radius: 12px !important;
}

.loc-card img,
.ld-card img {
    height: 200px !important;
    object-fit: cover;
    border-radius: 12px 12px 0 0 !important;
}

/* Location detail inline tables */
.loc-page table,
.ld-page table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.loc-page table td,
.loc-page table th,
.ld-page table td,
.ld-page table th {
    padding: 6px 8px !important;
    white-space: nowrap;
    font-size: .8rem !important;
}

/* ─── Sublocation Page — Mobile ────────────────────────── */
.sl-page {
    padding: 0 12px !important;
}

.sl-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

/* ─── Neighborhoods — Mobile ───────────────────────────── */
.nb-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

@media (max-width: 480px) {
    .nb-grid {
        grid-template-columns: 1fr !important;
    }
    .pd-dist {
        flex: 1 1 calc(50% - 8px);
    }
    .pd-distances {
        flex-wrap: wrap !important;
    }
}

/* ─── About Page — Mobile ──────────────────────────────── */
.about-grid {
    grid-template-columns: 1fr !important;
}

.about-hero img {
    max-height: 250px !important;
    object-fit: cover;
}

/* ─── Submit Listing — Mobile ──────────────────────────── */
.submit-form {
    padding: 14px !important;
}

.submit-form input,
.submit-form select,
.submit-form textarea {
    width: 100% !important;
    font-size: 16px !important;
    min-height: 44px;
    box-sizing: border-box !important;
}

.submit-form .form-row {
    flex-direction: column !important;
    gap: 8px !important;
}


/* Sticky bars sit at the very bottom */
.mobile-cta-bar {
    bottom: 0 !important;
}

/* Mobile bottom nav stays at very bottom */
.mobile-bottom-nav {
    z-index: 9999 !important;
}


/* ─── EMI Calculator — Mobile ──────────────────────── */
#emi-calc .pd-section-title {
    font-size: 1rem !important;
}
#emi-calc div[style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}
#emi-calc input[type="number"],
#emi-calc input[type="text"] {
    font-size: 16px !important;
    min-height: 44px;
}
#emi-amount {
    font-size: 1.3rem !important;
}

/* ─── Map Toggle — Mobile ──────────────────────────── */
#ls-map-container {
    height: 50vh !important;
    border-radius: 10px !important;
    margin: 0 -14px 16px !important;
}
.ls-map-toggle {
    min-height: 44px !important;
}

/* ─── Phase 1 Fixes (2026-05-21 Phone Audit) ───────────── */

/* FIX 2: Limit property cards to 4 per section on mobile */
.hp-pgrid > .hp-pcard:nth-child(n+5) {
    display: none !important;
}
/* Project cards same limit */
.hp-pgrid > a.hp-pcard:nth-child(n+5) {
    display: none !important;
}

/* FIX 3: Top bar — hide non-essential items on mobile */
#top-bar {
    display: none !important;
}

/* FIX 4: Stats bar — horizontal scroll with minimal height */
.hp-stats {
    flex-direction: row !important;
    gap: 12px !important;
    padding: 12px !important;
    margin: -20px 12px 0 !important;
}

/* FIX 5: "Why Choose Us" — show 4 cards max, 2-col grid */
.hp-why-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}
.hp-why-grid > .hp-why-card:nth-child(n+5) {
    display: none !important;
}
.hp-why-card {
    padding: 18px 14px !important;
}
.hp-why-ico {
    font-size: 1.5rem !important;
    margin-bottom: 8px !important;
}
.hp-why-card h3 {
    font-size: 0.88rem !important;
}
.hp-why-card p {
    font-size: 0.78rem !important;
}

/* FIX 6: Persona grid — already 2x2, ensure compact */
.hp-persona-grid {
    gap: 10px !important;
}
.hp-persona-ico {
    width: 42px !important;
    height: 42px !important;
    font-size: 1.3rem !important;
}
.hp-persona p {
    font-size: 0.82rem !important;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* FIX 7: Property card images — 3:2 ratio instead of square */
.hp-pimg {
    aspect-ratio: 3/2 !important;
    height: auto !important;
}

/* FIX 8: Hamburger — add overlay + close button styles */
#navigation.open {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9990 !important;
    background: #fff !important;
    overflow-y: auto !important;
    padding: 70px 20px 100px !important;
    animation: slideInNav 0.3s ease !important;
}

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

/* Nav overlay behind */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9980;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
.nav-overlay.active {
    display: block;
}

/* Close button for nav */
.nav-close-btn {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9995;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    color: #334155;
    font-size: 20px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
#navigation.open ~ .nav-close-btn,
.nav-close-btn.active {
    display: flex !important;
}

/* FIX 9: Bottom CTA bar — proper spacing */
.mobile-cta-bar {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* FIX 10: Section spacing reduction for less scroll */
.hp-sec {
    padding: 28px 0 !important;
}

/* FIX 11: News grid — compact */
.hp-news-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}
.hp-news-card {
    padding: 14px !important;
    gap: 10px !important;
}
.hp-news-card img {
    width: 60px !important;
    height: 60px !important;
}

/* FIX 12: Process/Family Office — 2x2 grid */
.hp-proc-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}
.hp-proc-card {
    padding: 18px 14px !important;
}
.hp-proc-num {
    font-size: 1.6rem !important;
}

/* FIX 13: Dark mode toggle — position above CTA bar */
.dm-toggle {
    bottom: 140px !important;
}

/* FIX 14: Footer — stack to 1 column */
.footer-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}
.footer-seo .footer-grid {
    grid-template-columns: 1fr !important;
}

/* FIX 15: Search example chips — limit to 3 */
.hp-example-chip:nth-child(n+4) {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════
   PHASE 2: Mobile CSS for new sections
   Appended to mobile.css — 21 May 2026
   ══════════════════════════════════════════════════════════ */

/* ── "Settle in Mumbai" — 2x2 on mobile ───────────────── */
.hp-settle-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
}

.hp-settle-card {
    padding: 18px 14px !important;
}

.hp-settle-ico {
    font-size: 1.6rem !important;
    margin-bottom: 8px !important;
}

.hp-settle-card h3 {
    font-size: 0.88rem !important;
}

.hp-settle-card p {
    font-size: 0.78rem !important;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hp-settle-cta {
    flex-direction: column !important;
    gap: 10px !important;
}

.hp-settle-btn {
    width: 100% !important;
    text-align: center !important;
    padding: 14px 20px !important;
}

/* ── CEO / Founder — stack on mobile ──────────────────── */
.hp-founder-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
}

.hp-founder-mark {
    font-size: 3rem !important;
    margin-bottom: -10px !important;
}

.hp-founder-quote blockquote {
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

.hp-founder-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

.hp-fstat {
    padding: 16px 12px !important;
}

.hp-fstat-n {
    font-size: 1.6rem !important;
}

.hp-founder-media {
    gap: 6px !important;
}

.hp-media-tag {
    font-size: .68rem !important;
    padding: 3px 8px !important;
}

/* ── Zone-grouped locations ───────────────────────────── */
.hp-zone {
    margin-bottom: 20px !important;
}

.hp-zone-title {
    font-size: .78rem !important;
}

.hp-loc-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
}

/* ══════════════════════════════════════════════════════════
   GLASSMORPHISM PWA EXPERIENCE — 21 May 2026
   Makes the entire mobile UI feel like a native app
   ══════════════════════════════════════════════════════════ */

/* ── App-like behavior ────────────────────────────────── */
html {
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
    scroll-behavior: smooth;
}

body {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

/* No long-press context menu on images/links */
img, a {
    -webkit-touch-callout: none;
}

/* ── Clean White Mobile Header ─────────────────────────── */
#header {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

#logo img {
    filter: none !important;
}

/* Header widget icons — dark on white */
.header-widget a,
.header-widget button {
    color: #334155 !important;
}

/* Hamburger lines — dark color only, no dimension changes */
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    background-color: #1e293b !important;
}

/* ══════════════════════════════════════════════════════════
   CLEAN WHITE MOBILE THEME (glassmorphism removed)
   ══════════════════════════════════════════════════════════ */

/* ── Clean Search Box ─────────────────────────────────── */
.hp-search {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.hp-nlp-input {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    color: #1e293b !important;
    font-size: 16px !important;
    padding: 14px 16px !important;
}

.hp-nlp-input::placeholder {
    color: #94a3b8 !important;
}

.hp-nlp-input:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1) !important;
}

.hp-example-chip {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    border-radius: 100px !important;
}

.hp-example-chip:active {
    border-color: #2563eb !important;
    color: #2563eb !important;
    background: #eff6ff !important;
}

/* ── Clean Navigation Drawer ──────────────────────────── */
#navigation.open {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#navigation.open ul li a {
    color: #1e293b !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 14px 16px !important;
    font-size: 1rem !important;
}

#navigation.open ul li a:active {
    color: #2563eb !important;
    background: #f8fafc !important;
}

.nav-close-btn {
    background: #f1f5f9 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}

/* ── Clean Bottom CTA Bar ─────────────────────────────── */
.mobile-cta-bar {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 1px solid #e2e8f0 !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06) !important;
}

.mobile-cta-bar a {
    color: #1e293b !important;
    font-size: .78rem !important;
}

.mobile-cta-bar a:active {
    color: #2563eb !important;
}

/* ── Clean Property Cards ─────────────────────────────── */
.hp-pcard {
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    background: #ffffff !important;
}

.hp-pcard:active {
    transform: scale(0.98) !important;
}

/* ── Clean Stats Bar ──────────────────────────────────── */
.hp-stats {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.hp-stat-n {
    color: #059669 !important;
}

.hp-stat-l {
    color: #64748b !important;
}

/* ── Clean Section Cards ──────────────────────────────── */
.hp-settle-card,
.hp-why-card,
.hp-persona,
.hp-proc-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    border-radius: 16px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.hp-settle-card:active,
.hp-why-card:active,
.hp-persona:active {
    transform: scale(0.97) !important;
    border-color: #2563eb !important;
}

/* ── Clean Location Cards ─────────────────────────────── */
.hp-loc-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.hp-loc-card:active {
    transform: scale(0.96) !important;
    border-color: #2563eb !important;
}

/* ── Clean "More" Buttons ─────────────────────────────── */
.hp-more a {
    background: #1e293b !important;
    border: none !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 12px 28px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.hp-more a:active {
    transform: scale(0.97) !important;
}

/* ── Clean CEO Section Cards ──────────────────────────── */
.hp-fstat {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ── Clean News Cards ─────────────────────────────────── */
.hp-news-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.hp-news-card:active {
    transform: scale(0.97) !important;
}

/* ── Clean Lead Modal ─────────────────────────────────── */
.rem-lead-modal-content,
#remLeadModal .rem-lead-modal-body {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 24px 24px 0 0 !important;
    color: #1e293b !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#remLeadModal input,
#remLeadModal textarea {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    color: #1e293b !important;
    font-size: 16px !important;
}

#remLeadModal input::placeholder,
#remLeadModal textarea::placeholder {
    color: #94a3b8 !important;
}

/* ── Clean Settle CTA buttons ─────────────────────────── */
.hp-settle-btn {
    border-radius: 12px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.hp-settle-btn--outline {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
}

/* ── Smooth transitions for page sections ─────────────── */
.hp-ani {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease !important;
}

.hp-ani.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Scroll snap REMOVED 2026-05-25: was causing stuck-scroll on homepage ── */
/* .hp { scroll-snap-type: y proximity; } */
/* .hp-sec { scroll-snap-align: start; } */

/* ── Pull-to-refresh feel ─────────────────────────────── */
/* overscroll-behavior-y: contain removed — was trapping scroll on homepage */

/* ═══════════════════════════════════════════════════════════
   PREMIUM MOBILE UX & TOUCH TARGET OPTIMIZATIONS
   ═══════════════════════════════════════════════════════════ */

/* Ensure body has space for a single bottom bar on mobile */
@media (max-width: 768px) {
    body {
        padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Position the sticky CTA bar and bottom nav at the very bottom */
    .mobile-cta-bar {
        bottom: 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        z-index: 9998 !important;
    }
    .mobile-bottom-nav {
        bottom: 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        z-index: 9998 !important;
    }

    /* Position the property concierge chat bubble & open panel & nudge box above the bottom bar */
    .cc-bubble {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 10000 !important;
    }
    .cc-panel {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 9999 !important;
        height: 480px !important;
        max-height: calc(100vh - 120px) !important;
    }
    .cc-nudge {
        bottom: calc(134px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 10000 !important;
    }

    /* Ensure mobile bottom nav items have accessible 44x44px touch targets */
    .mob-nav-item {
        min-width: 52px !important;
        min-height: 48px !important;
        padding: 6px 4px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        transition: transform 0.15s ease, background-color 0.2s !important;
    }
    .mob-nav-item:active {
        transform: scale(0.92) !important;
    }

    /* Ensure the top navbar hamburger button has minimum 44x44px touch target size */
    #top-nav .navbar-toggle {
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}


/* ─── Area Guide Table Responsive Optimizations ─────────── */
.area-guide-table {
    width: 100% !important;
    table-layout: auto !important;
}
.area-guide-table th, 
.area-guide-table td {
    padding: 6px 8px !important;
    font-size: 0.76rem !important;
}


/* ── Mobile Header WhatsApp Button ────────────────────── */
.mobile-wa-btn {
    display: none;
}

@media (max-width: 767px) {
    .mobile-wa-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #f0fdf4;
        border: 1.5px solid #bbf7d0;
        flex-shrink: 0;
        transition: all .2s;
    }
    .mobile-wa-btn:active {
        transform: scale(0.9);
        background: #dcfce7;
    }
}


/* ══════════════════════════════════════════════════════════
   MOBILE WHITE OVERRIDES — Force white on all dark sections
   These override the dark backgrounds set in home.css
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Hero Section — white instead of dark gradient ───── */
    .hp-hero {
        background: #ffffff !important;
        color: #1e293b !important;
    }
    .hp-hero::before {
        display: none !important;
    }
    .hp-orb {
        display: none !important;
    }
    .hp-hero h1 {
        color: #1e293b !important;
    }
    .hp-hero h1 em {
        color: #2563eb !important;
    }
    .hp-hero-p {
        color: #64748b !important;
    }

    /* ── Search box — clean white ────────────────────────── */
    .hp-search {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
    }
    .hp-nlp-input {
        background: #f8fafc !important;
        color: #1e293b !important;
        border: 1.5px solid #e2e8f0 !important;
    }
    .hp-nlp-input::placeholder {
        color: #94a3b8 !important;
    }
    .hp-example-chip {
        background: #f1f5f9 !important;
        border-color: #e2e8f0 !important;
        color: #475569 !important;
    }

    /* ── Intent tabs — clean ─────────────────────────────── */
    .hp-intent-tab {
        background: #f1f5f9 !important;
        color: #475569 !important;
        border-color: #e2e8f0 !important;
    }
    .hp-intent-tab.active, .hp-intent-tab[aria-selected="true"] {
        background: #2563eb !important;
        color: #fff !important;
    }

    /* ── CEO / Founder Section — white ────────────────────── */
    .hp-founder {
        background: #f8fafc !important;
        color: #1e293b !important;
    }
    .hp-founder-quote blockquote {
        color: #334155 !important;
    }
    .hp-founder-name {
        color: #1e293b !important;
    }
    .hp-founder-role {
        color: #2563eb !important;
    }
    .hp-founder-media > span:first-child {
        color: #64748b !important;
    }
    .hp-fstat {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
    }
    .hp-fstat-n, .hp-stat-n {
        color: #059669 !important;
    }
    .hp-fstat-l {
        color: #64748b !important;
    }

    /* ── Stats bar — white ───────────────────────────────── */
    .hp-stats {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    }
    .hp-stat-l {
        color: #64748b !important;
    }

    /* ── CTA Section — clean navy (keep dark but lighter) ── */
    .hp-cta {
        background: #1e293b !important;
    }
    .hp-cta::before {
        display: none !important;
    }

    /* ── "More" Buttons — dark navy (these are OK dark) ──── */
    .hp-more a {
        background: #1e293b !important;
    }

    /* ── All section backgrounds — clean alternation ─────── */
    .hp-personas { background: #f8fafc !important; }
    .hp-settle { background: #ffffff !important; }
    .hp-featured { background: #f8fafc !important; }
    .hp-locations { background: #ffffff !important; }
    .hp-news { background: #f8fafc !important; }
    .hp-process { background: #ffffff !important; }

    /* ── Price badge in cards — green on light background ── */
    .hp-pprice {
        background: #f0fdf4 !important;
        color: #059669 !important;
        border: 1px solid #bbf7d0 !important;
        backdrop-filter: none !important;
    }

    /* ── All cards — white ────────────────────────────────── */
    .hp-pcard,
    .hp-settle-card,
    .hp-why-card,
    .hp-persona,
    .hp-proc-card,
    .hp-news-card,
    .hp-loc-card {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
    }

    /* ── Header layout: hamburger | logo | WhatsApp ─────── */
    #header .left-side {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .mmenu-trigger {
        display: flex !important;
    }

    #logo {
        flex: 1 !important;
        margin: 0 !important;
    }

    #logo img {
        max-height: 34px !important;
        width: auto !important;
    }

    .mobile-wa-btn {
        order: 10 !important;
        flex-shrink: 0 !important;
    }

    /* ── Bottom nav — clean white ─────────────────────────── */
    .mobile-bottom-nav {
        background: #ffffff !important;
        border-top: 1px solid #e2e8f0 !important;
        backdrop-filter: none !important;
    }

    /* ── Navigation drawer — white ────────────────────────── */
    #navigation.open {
        background: #ffffff !important;
    }
    #navigation.open ul li a {
        color: #1e293b !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }
}


/* ══════════════════════════════════════════════════════════
   LISTING PAGES — White mobile overrides
   Fixes eclipsed emojis and dark teal/green backgrounds
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Listing page hero — white bg with dark text ───── */
    .ls-hero,
    .listings-hero,
    .search-hero,
    [class*="hero"] {
        background: #ffffff !important;
        color: #1e293b !important;
    }
    .ls-hero h1,
    .listings-hero h1,
    .search-hero h1,
    [class*="hero"] h1 {
        color: #1e293b !important;
    }
    .ls-hero p,
    .listings-hero p,
    .search-hero p,
    [class*="hero"] p {
        color: #475569 !important;
    }

    /* ── Bottom nav — solid white, high contrast icons ──── */
    .mobile-bottom-nav {
        background: #ffffff !important;
        border-top: 1px solid #e2e8f0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .mob-nav-item {
        color: #475569 !important;
        font-weight: 600 !important;
    }
    .mob-nav-item.active {
        color: #2563eb !important;
    }
    /* Override inline orange color for Life Radius and WhatsApp */
    .mob-nav-item[style*="color:#f97316"] {
        color: #2563eb !important;
    }

    .mob-nav-icon {
        font-size: 1.4rem !important;
        line-height: 1 !important;
        display: block !important;
        filter: none !important;
        opacity: 1 !important;
    }

    /* ── Emoji visibility — ensure they're not washed out ── */
    .hp-settle-ico,
    .hp-proc-num,
    .hp-persona-ico,
    [class*="-ico"],
    [class*="-icon"] {
        opacity: 1 !important;
        filter: none !important;
    }

    /* ── Search button — solid blue, no gradient ─────────── */
    .hp-search-btn,
    .ls-search-btn,
    button[type="submit"] {
        background: #2563eb !important;
        color: #ffffff !important;
        border: none !important;
    }

    /* ── Stats section — white with dark text ─────────────── */
    .hp-stat-n {
        color: #059669 !important;
    }
    .hp-stat-l {
        color: #475569 !important;
    }

    /* ── Filters button — ensure visibility ───────────────── */
    .ls-filters-btn,
    .filters-btn,
    [class*="filter"] button {
        background: #ffffff !important;
        color: #1e293b !important;
        border: 1px solid #e2e8f0 !important;
    }

    /* ── Property cards on listing pages — white ──────────── */
    .ls-card {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
    }

    /* ── CTA bar — white with dark text ───────────────────── */
    .mobile-cta-bar {
        background: #ffffff !important;
        border-top: 1px solid #e2e8f0 !important;
    }
    .mobile-cta-bar a {
        color: #1e293b !important;
    }

    /* ── Concierge bubble — ensure visible above white bg ── */
    .cc-bubble {
        box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
    }
}


/* ══════════════════════════════════════════════════════════
   LIFE RADIUS WIZARD — Full-screen mobile fix (Fixed Positioning)
   Bypasses all parent overflow/flex constraints to show the
   wizard in a beautiful, dedicated full-screen flow on mobile.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Wizard container: fixed full-screen overlay */
    .lr-wizard {
        position: fixed !important;
        top: 60px !important; /* Align exactly below site header */
        left: 0 !important;
        right: 0 !important;
        bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important; /* Ends exactly above the mobile bottom nav bar */
        height: auto !important; /* Let browser compute height dynamically */
        width: 100vw !important;
        background: #fafaf9 !important; /* sidebar warm white */
        z-index: 9999 !important; /* sits on top of map/sidebar elements but ends above bottom nav */
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        padding-bottom: 0 !important;
    }

    /* Progress bar styling */
    .lr-wizard .lr-wiz-progress {
        height: 6px !important;
        background: #e2e8f0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    .lr-wizard .lr-wiz-bar {
        height: 100% !important;
        background: linear-gradient(90deg, #f97316, #fb923c) !important;
        border-radius: 0 !important;
    }

    /* Content card: scrollable area for question + options */
    .lr-wizard .lr-wiz-card {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important; /* Butter-smooth native iOS scroll */
        padding: 28px 20px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Question and subtext */
    .lr-wizard .lr-wiz-q {
        font-size: 1.25rem !important;
        font-weight: 800 !important;
        color: #1e293b !important;
        margin: 0 0 6px 0 !important;
        line-height: 1.3 !important;
    }
    .lr-wizard .lr-wiz-sub {
        font-size: 0.88rem !important;
        color: #64748b !important;
        margin: 0 0 24px 0 !important;
        line-height: 1.4 !important;
    }

    /* Options grid */
    .lr-wizard .lr-wiz-opts {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        margin-top: 8px !important;
    }

    /* Option card */
    .lr-wizard .lr-wiz-opt {
        background: #ffffff !important;
        border: 2px solid #e2e8f0 !important;
        border-radius: 16px !important;
        padding: 16px 12px !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        color: #334155 !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 calc(50% - 6px) !important;
        min-width: calc(50% - 6px) !important;
        min-height: 80px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
        transition: all 0.2s ease !important;
        box-sizing: border-box !important;
    }
    .lr-wizard .lr-wiz-opt:active {
        transform: scale(0.96) !important;
    }
    .lr-wizard .lr-wiz-opt.selected {
        background: #fff7ed !important;
        border-color: #f97316 !important;
        color: #f97316 !important;
        box-shadow: 0 4px 12px rgba(249,115,22,0.08) !important;
    }
    .lr-wizard .lr-wiz-opt .wiz-icon {
        font-size: 1.8rem !important;
        margin-bottom: 8px !important;
        display: block !important;
    }

    /* Inputs and textareas */
    .lr-wizard .lr-wiz-input {
        width: 100% !important;
        padding: 16px !important;
        border: 2px solid #e2e8f0 !important;
        border-radius: 16px !important;
        font-size: 1rem !important;
        color: #1e293b !important;
        background: #ffffff !important;
        outline: none !important;
        box-sizing: border-box !important;
        transition: border-color 0.2s ease !important;
    }
    .lr-wizard .lr-wiz-input:focus {
        border-color: #f97316 !important;
        box-shadow: 0 0 0 4px rgba(249,115,22,0.1) !important;
    }
    .lr-wizard .lr-wiz-textarea {
        width: 100% !important;
        padding: 16px !important;
        border: 2px solid #e2e8f0 !important;
        border-radius: 16px !important;
        font-size: 0.95rem !important;
        color: #1e293b !important;
        background: #ffffff !important;
        min-height: 120px !important;
        resize: none !important;
        outline: none !important;
        box-sizing: border-box !important;
        transition: border-color 0.2s ease !important;
    }
    .lr-wizard .lr-wiz-textarea:focus {
        border-color: #f97316 !important;
        box-shadow: 0 0 0 4px rgba(249,115,22,0.1) !important;
    }

    /* Pinned button bar at the bottom */
    .lr-wizard > div:last-child {
        margin-top: auto !important;
        padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        background: #ffffff !important;
        border-top: 1px solid #e2e8f0 !important;
        display: flex !important;
        gap: 10px !important;
        box-sizing: border-box !important;
    }
    .lr-wizard > div:last-child button {
        height: 48px !important;
        border-radius: 14px !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}