/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: #121212;
    --swiper-stack-max: 560px;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile browsers */
    overflow: hidden;
    margin: 0;
    /* Swiper includes `header.html`, which loads `static/header.css` and sets
       `body{ padding-top: var(--topbar-h); }`. On the Swiper page we manage
       the header offset inside `.app-container`, so force body padding to 0
       to avoid double-spacing above the card deck. */
    padding: 0 !important;
    padding-top: 0 !important;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    overscroll-behavior: none; /* Prevent overscroll bounce */
}

* {
    font-family: 'Inter', sans-serif;
}

/* In-app WebView: avoid `vh` reflow bugs when the native bottom bar is shown/hidden.
   Use percentage heights so layout tracks the actual WebView size. */
html.is-app-webview,
html.is-app-webview body{
    height: 100%;
    min-height: 100%;
}
html.is-app-webview body{
    height: 100% !important;
    min-height: 100% !important;
}

/* ===== Header compatibility fix (desktop web) =====
   Swiper uses a global border-box reset. The rest of the site header relies on
   the default content-box sizing for `.mast-search` / `.mast-input`, which affects
   the computed header row height (and makes Swiper look slightly "different").
   Override ONLY the shared header box model back to the site default. */
header.topbar.topbar--brand form.mast-search,
header.topbar.topbar--brand .mast-input{
    box-sizing: content-box !important;
}

/* In-app WebView: the Flutter app uses a native header that includes the OS status-bar inset.
   Reserve enough space so the swiper deck never sits under the native header. */
html.is-app-webview{
    /* Native header ≈ (status bar inset) + 12 + 45 + 12 */
    --topbar-h: var(--ss-native-header-h, calc(93px + env(safe-area-inset-top)));
}

/* Header search sizing is standardized in static/header.css (shared). */

.app-container {
    /* Full-width on desktop so the shared site header looks identical to other pages.
       Keep the *deck* centered using `.swiper-stack` max-width instead. */
    max-width: 100%;
    margin: 0 auto;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile browsers */
    background: #121212;
    position: relative;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    overflow: visible; /* changed from hidden to allow auth menu to show */
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    /* Header is fixed (from global header.css). Reserve space so content isn't hidden behind it. */
    padding-top: var(--topbar-h);
}

html.is-app-webview .app-container{
    height: 100% !important;
    min-height: 100% !important;
}

/* Header */
.header {
    background: #121212;
    padding: 12px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.favourites-btn {
    background: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    transition: all 0.3s ease, border-width 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.favourites-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.auth-btn {
    background: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease, border-width 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.auth-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.auth-dropdown {
    position: relative;
    display: inline-block;
}

.auth-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: #121212;
    border: 1px solid #757575;
    border-radius: 8px;
    padding: 8px 0;
    min-width: 160px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease, border-width 0.3s ease;
    z-index: 1000;
}

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

/* Global header dropdown uses `.open` (not `.show`) */
.auth-menu.open{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.auth-menu-item {
    width: 100%;
    background: transparent;
    color: #ffffff;
    border: none;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s ease;
    font-family: 'Inter', sans-serif;
    text-align: left;
}

.auth-menu-item:hover {
    background: #2a2a2a;
}

.auth-menu-item i {
    width: 16px;
    color: #757575;
}

/* Auth Modal Styles */
.auth-modal {
    max-width: 400px !important;
    width: 70% !important;
    min-height: 500px !important;
}

/* Login Modal Specific Styles */
#loginModalOverlay .auth-modal {
    max-height: none !important;
    max-width: 350px !important;
    width: 60% !important;
    min-height: 400px !important;
}

#loginModalOverlay {
    padding: 100px !important;
}

#loginModalOverlay .auth-modal-body {
    padding: 30px 40px 60px 40px !important;
}

/* Signup Modal Specific Styles */
#signupModalOverlay .auth-modal {
    max-height: none !important;
    max-width: 450px !important;
    width: 80% !important;
    min-height: 600px !important;
}

#signupModalOverlay {
    padding: 100px !important;
}

#signupModalOverlay .auth-modal-body {
    padding: 30px 40px 60px 40px !important;
}

.auth-input-group {
    margin-bottom: 20px;
}

.auth-input-group label {
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

.auth-input-group input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #757575;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
    background: #121212;
    color: #ffffff;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.auth-input-group input:focus {
    border-color: #ffffff;
}

.auth-input-group input::placeholder {
    color: #757575;
}

.auth-submit-btn {
    width: 100%;
    background: #667eea;
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 10px;
}

.auth-submit-btn:hover {
    background: #5a6fd8;
}


/* Search and Filters */
.search-filters-container {
    background: #121212;
    padding: 10px 20px;
    border-bottom: 1px solid #757575;
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.search-bar i {
    color: #ffffff;
    font-size: 16px;
    transition: color 0.3s ease;
}

.search-bar input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #ffffff;
    border-radius: 25px;
    font-size: 16px;
    outline: none;
    background: #121212;
    color: #ffffff;
    transition: all 0.3s ease, border-width 0.3s ease;
    height: 48px;
    -webkit-appearance: none; /* Remove iOS input styling */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight */
    touch-action: manipulation; /* Prevent double-tap zoom */
}

.search-bar input:hover {
    background: rgba(255, 255, 255, 0.1);
}

.search-bar input:focus {
    border-color: #ffffff;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.search-bar input::placeholder {
    color: #ffffff;
    transition: color 0.3s ease;
}

.search-bar input:focus::placeholder {
    color: #ffffff;
}

.search-bar:focus-within .search-icon {
    color: #ffffff;
}

.filter-toggle-btn {
    background: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 12px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease, border-width 0.3s ease;
    height: 48px;
}

.filter-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.filter-toggle-btn i {
    color: #ffffff !important;
    transition: all 0.3s ease, border-width 0.3s ease;
}

.filter-toggle-btn:hover i {
    color: #ffffff !important;
}


.filter-section {
    margin-bottom: 20px;
}

.filter-section h3 {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

.range-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.range-inputs input {
    width: 100%;
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    background: #121212;
    color: #ffffff;
    transition: border-color 0.3s ease;
}

.range-inputs input:focus {
    border-color: #667eea;
}

.range-inputs span {
    color: #ffffff;
    font-weight: 500;
}

.filter-section input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    background: #121212;
    color: #ffffff;
    transition: border-color 0.3s ease;
}

.filter-section input[type="text"]:focus {
    border-color: #667eea;
}

.filter-section input[type="text"]::placeholder {
    color: #757575;
}

.select-inputs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.select-inputs select {
    flex: 1;
    min-width: 0;
    padding: 10px 30px 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    background: #121212;
    color: #ffffff;
    cursor: pointer;
    transition: border-color 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
}

.select-inputs select:focus {
    border-color: #667eea;
}

.amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.amenity-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #121212;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease, border-width 0.3s ease;
}

.amenity-checkbox:hover {
    border-color: #667eea;
}

.amenity-checkbox input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.amenity-checkbox label {
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
}

.amenity-checkbox.checked {
    background: #667eea;
    color: #fff;
    border-color: #667eea;
}

.filter-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.clear-filters-btn, .apply-filters-btn {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease, border-width 0.3s ease;
}

.clear-filters-btn {
    background: #e0e0e0;
    color: #2c3e50;
}

.clear-filters-btn:hover {
    background: #d0d0d0;
}

.apply-filters-btn {
    background: #27ae60;
    color: #fff;
}

.apply-filters-btn:hover {
    background: #229954;
}

/* Swiper Container */
.swiper-container {
    flex: 1;
    padding: 10px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
}

.swiper-ai-cta-wrap{
    position: absolute;
    left: 50%;
    top: 6px;
    transform: translateX(-50%);
    z-index: 20;
    width: min(calc(100% - 32px), var(--swiper-stack-max));
    max-width: var(--swiper-stack-max);
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.swiper-ai-cta{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 0;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(20,20,20,.88);
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.12);
    font-size: clamp(11px, 1.1vw, 12px);
    font-weight: 800;
    line-height: 1.2;
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
    text-align: center;
    pointer-events: auto;
    max-width: min(100%, 280px);
    white-space: nowrap;
}

.swiper-ai-cta:hover{
    transform: translateY(-1px);
    background: rgba(28,28,28,.94);
    border-color: rgba(255,255,255,.18);
}

.swiper-ai-cta i{
    flex: 0 0 auto;
}

.swiper-ai-cta span{
    min-width: 0;
}

.swiper-stack {
    position: relative;
    width: min(100%, var(--swiper-stack-max));
    max-width: var(--swiper-stack-max);
    height: clamp(420px, calc(100dvh - var(--topbar-h) - 210px), 760px);
    perspective: 1000px;
    margin-top: 0;
}

.swiper-chooser{
    width: 100%;
    max-width: min(430px, 100%);
    margin: 12px auto 0;
}

.swiper-chooser[hidden]{
    display: none !important;
}

.swiper-chooser-card{
    background: linear-gradient(180deg, rgba(27,27,27,.98), rgba(18,18,18,.98));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;
    padding: 26px 22px;
    box-shadow: 0 18px 50px rgba(0,0,0,.38);
    text-align: center;
}

.swiper-chooser-eyebrow{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    color: #d7d7d7;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.swiper-chooser-card h2{
    color: #fff;
    font-size: 28px;
    line-height: 1.1;
    margin-bottom: 12px;
}

.swiper-chooser-card p{
    color: #b9b9b9;
    font-size: 15px;
    line-height: 1.5;
}

.swiper-chooser-actions{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.swiper-chooser-btn{
    width: 100%;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: #fff;
    border-radius: 18px;
    padding: 16px 18px;
    min-height: 58px;
    font-size: 16px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}

.swiper-chooser-btn:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.2);
}

.swiper-chooser-btn:disabled{
    opacity: .65;
    cursor: wait;
    transform: none;
}

.swiper-chooser-btn--primary{
    background: linear-gradient(180deg, rgba(255,215,0,.98), rgba(240,183,0,.95));
    color: #111;
    border-color: rgba(255,215,0,.5);
}

.swiper-chooser-btn--primary:hover{
    background: linear-gradient(180deg, rgba(255,223,44,.98), rgba(247,191,17,.95));
}

.swiper-chooser-note{
    margin-top: 16px;
    font-size: 13px !important;
    color: #989898 !important;
}

.action-buttons.is-hidden{
    display: none !important;
}

/* Property Card */
.property-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #121212;
    border-radius: 20px;
    /* Softer, deeper shadow (the "second card" you see is mostly the stacked card) */
    box-shadow:
      0 18px 50px rgba(0,0,0,.55),
      0 6px 18px rgba(0,0,0,.35);
    overflow: hidden;
    cursor: grab;
    /* Faster swipe-away so the next card appears sooner */
    transition: transform 0.18s cubic-bezier(.2,.8,.2,1), opacity 0.18s ease;
    transform-origin: center center;
    z-index: 1;
    touch-action: pan-y; /* Allow vertical scrolling but handle horizontal swipes */
    will-change: transform, opacity;
    user-select: none; /* Prevent text selection during swipe */
    -webkit-user-select: none;
    -webkit-touch-callout: none; /* Disable iOS callout menu */
}

.property-card:active {
    cursor: grabbing;
}

/* Mobile device specific styles */
.mobile-device {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
}

.mobile-device .property-card {
    touch-action: pan-y;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.mobile-device button, .mobile-device .action-btn, .mobile-device .favourites-btn, .mobile-device .filter-toggle-btn, .mobile-device .auth-btn {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Improve touch feedback on mobile */
@media (hover: none) and (pointer: coarse) {
    .property-card {
        cursor: default;
    }
    
    .property-card:active {
        cursor: default;
        transform: scale(0.98);
    }
    
    /* Improve button touch feedback */
    .action-btn:active {
        transform: scale(0.95);
    }
    
    .favourites-btn:active {
        transform: scale(0.95);
    }
    
    .filter-toggle-btn:active {
        transform: scale(0.95);
    }
    
    /* Improve modal touch interactions */
    .modal-close:active {
        transform: scale(0.9);
    }
    
    /* Improve auth button touch feedback */
    .auth-btn:active {
        transform: scale(0.95);
    }
    
    .auth-menu-item:active {
        background: #3a3a3a;
    }
}

.property-card.dragging {
    transition: none;
    z-index: 100 !important; /* Even higher z-index during drag */
}

.property-card.swipe-left {
    transform: translateX(-100%) rotate(-30deg);
    opacity: 0;
}

.property-card.swipe-right {
    transform: translateX(100%) rotate(30deg);
    opacity: 0;
}

.property-card.next {
    /* Make the stacked card feel like a shadow/backdrop, not a crisp second card */
    transform: scale(0.965) translateY(18px);
    z-index: 1;
    pointer-events: none; /* Prevent background cards from receiving events */
    opacity: 0.35;
    filter: blur(1.2px);
    box-shadow: none;
}

.property-card.current {
    z-index: 10 !important; /* Much higher z-index for current card */
    pointer-events: auto; /* Ensure current card can receive events */
}

.property-card.property-card--skeleton{
    background: linear-gradient(180deg, #1a1a1a, #151515);
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    cursor: default;
    pointer-events: none;
    overflow: hidden;
}

.property-card.property-card--skeleton::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
    transform: translateX(-100%);
    animation: swiperSkeletonShimmer 1.4s infinite;
}

@keyframes swiperSkeletonShimmer {
    to { transform: translateX(100%); }
}

.property-skeleton-image{
    width: 100%;
    height: 60%;
    background: rgba(255,255,255,.03);
}

.property-skeleton-body{
    padding: 18px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.property-skeleton-line{
    height: 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
}

.property-skeleton-line--price{
    height: 22px;
    width: 52%;
}

.property-skeleton-line--meta{
    width: 62%;
}

.property-skeleton-line--meta.short{
    width: 42%;
}

.property-skeleton-line--address{
    width: 74%;
}

/* Property Image */
.property-image {
    width: 100%;
    height: 60%;
    position: relative;
    overflow: hidden;
}

.property-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}

.property-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.property-price {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 8px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 16px;
}

.property-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #121212;
    color: #fff;
    padding: 6px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
    opacity: 0.9;
}

/* Swiper DETAILS modal: keep type + price aligned (no overlap) */
.property-image.modal-hero .property-topbar{
    position: absolute;
    top: 12px;
    left: 12px;
    right: 64px; /* leave room for the modal close button */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    pointer-events: none; /* don't block tapping image */
    z-index: 5;
}
.property-image.modal-hero .property-topbar .property-badge,
.property-image.modal-hero .property-topbar .property-price{
    position: static;
    top: auto; left: auto; right: auto;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: rgba(255,255,255,.92);
    font-weight: 700;
    letter-spacing: -.01em;
    padding: 7px 10px;
    line-height: 1;
}
.property-image.modal-hero .property-topbar .property-badge{
    flex: 0 0 auto;
    max-width: 100%;
    font-size: 13px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
.property-image.modal-hero .property-topbar .property-price{
    flex: 0 0 auto;
    font-size: 14px;
    white-space: nowrap;
}

/* Property Info */
/* Match results-feed stack underneath the image */
.property-card .pad{
    padding:14px 18px 16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    height:40%;
    overflow:hidden;
    min-height:0;
    background:transparent;
}
.property-card h4{
    margin:0;
    font-size:20px;
    font-weight:800;
    letter-spacing:-0.02em;
    color:#ffffff;
}
.property-card .result-meta{
    color:#d0d0d0;
    font-size:14px;
    line-height:1.45;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.property-card .result-meta i{
    color:#b0b0b0;
    margin-right:0;
    width:14px;
    text-align:center;
    flex:0 0 auto;
}
.property-card .result-meta.meta-icons{
    display:flex;
    gap:14px;
    align-items:center;
    white-space:nowrap;
    overflow:hidden;
}
.property-card .result-meta.meta-icons .mi{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#d0d0d0;
    font-size:14px;
    flex:0 0 auto;
}
/* Fallback spacing for Android WebView (flex gap can be unreliable) */
.property-card .result-meta.meta-icons .mi i{
    /* Force identical icon box so bed/bath spacing matches */
    width: 16px;
    display: inline-block;
    text-align: center;
    margin-right: 6px;
}
/* Optical alignment: FontAwesome bed glyph reads tighter than bath */
.property-card .result-meta.meta-icons .mi i.fa-bed{
    margin-right: 8px;
}
.property-card .result-meta.meta-addr{
    display:flex;
    align-items:center;
    gap:6px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
.property-card .result-meta:nth-of-type(1){
    font-weight:600;
    color:#f5f5f5;
}
.property-card .result-meta:nth-of-type(2){
    color:#c0c0c0;
}
.property-card .result-meta:nth-of-type(3){
    color:#aaaaaa;
}

.property-title {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
    line-height: 1.3;
}

.property-location {
    color: #b0b0b0;
    font-size: 14px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.property-details {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #b0b0b0;
    font-size: 14px;
}

.property-description {
    color: #d0d0d0;
    font-size: 14px;
    line-height: 1.4;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    max-height: 4.2em; /* 3 lines * 1.4 line-height */
    word-wrap: break-word;
    word-break: break-word;
}

/* Fallback for browsers that don't support -webkit-line-clamp */
@supports not (-webkit-line-clamp: 3) {
    .property-description {
        display: block;
        max-height: 4.2em;
        overflow: hidden;
        position: relative;
    }
    
    .property-description::after {
        content: '...';
        position: absolute;
        bottom: 0;
        right: 0;
        background: #121212;
        padding-left: 20px;
    }
}

/* Action Buttons */
.action-buttons {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 50;
    width: min(100%, var(--swiper-stack-max));
    max-width: var(--swiper-stack-max);
    padding: 0 16px;
}

.main-buttons {
    display: flex;
    gap: 0px;
    align-items: flex-end;
}

.favourites-btn {
    position: absolute;
    right: 0px;
    bottom: 15px;
}

.action-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease, border-width 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    min-height: 44px; /* Minimum touch target size */
    min-width: 44px;
    touch-action: manipulation; /* Prevent double-tap zoom */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on iOS */
}

.pass-btn {
    background: rgba(231, 76, 60, 0.45);
    color: #fff;
    border: 1px solid #ffffff;
}

.pass-btn:hover {
    background: #c0392b;
}

.like-btn {
    background: rgba(39, 174, 96, 0.45);
    color: #fff;
    border: 1px solid #ffffff;
}

.like-btn:hover {
    background: #229954;
}

.undo-btn {
    background: #5a5a5a;
    color: #fff;
    width: 35px;
    height: 35px;
    font-size: 14px;
    margin: 0 -10px;
    z-index: 10;
    position: relative;
    border: 1px solid #ffffff;
}

.undo-btn:hover {
    background: #757575;
}

.undo-btn:disabled,
.undo-btn[aria-disabled="true"]{
    opacity: 0.45;
    filter: grayscale(0.35);
    cursor: not-allowed;
}

.action-btn:active {
    transform: scale(0.95);
}

/* Empty State */
.empty-state {
    text-align: center;
    color: #b0b0b0;
}

.empty-state-content i {
    font-size: 64px;
    color: #bdc3c7;
    margin-bottom: 20px;
}

.empty-state-content h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #ffffff;
}

.empty-state-content p {
    margin-bottom: 30px;
    font-size: 16px;
    color: #b0b0b0;
}

.refresh-btn {
    background: #667eea;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
    transition: all 0.3s ease, border-width 0.3s ease;
}

.refresh-btn:hover {
    background: #5a6fd8;
    transform: translateY(-2px);
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* prevent intercepting clicks while hidden */
    transition: all 0.3s ease, border-width 0.3s ease;
    padding: 40px;
}

.property-image.modal-hero{
    height: 400px;
}
.property-image.modal-hero::after{
    /* avoid extra gradient that can make images look "zoomed/dark" */
    height: 0;
    background: transparent;
}
.property-image.modal-hero img{
    width: 100%;
    height: 100%;
    object-fit: contain; /* show full image without cropping */
    background: #121212;
}
@media (max-width: 720px){
    .swiper-chooser{
        max-width: 360px;
        margin-top: 2px;
    }
    .swiper-chooser-card{
        border-radius: 22px;
        padding: 22px 18px;
    }
    .swiper-chooser-card h2{
        font-size: 24px;
    }
    .property-image.modal-hero{ height: 320px; }
}

#modalOverlay {
    z-index: 2000;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* enable interaction when visible */
}

.modal-content {
    background: #121212;
    border-radius: 20px;
    width: min(920px, 92vw);
    max-width: 92vw;
    max-height: 90%;
    overflow: hidden;
    position: relative;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

/* Favourites modal specific width */
#favouritesModalOverlay .modal-content {
    width: min(550px, 92vw);
    max-width: 92vw;
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s ease;
}

.modal-close:hover {
    background: rgba(0, 0, 0, 0.7);
}

.modal-body {
    padding: 0;
    max-height: 80vh;
    max-height: 80dvh; /* Dynamic viewport height for mobile */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* =========================
   Main-feed style details modal (used by Swiper card tap)
   ========================= */
.detail-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: none;
    z-index: 13000; /* above the mobile tab bar */
}
.detail-modal{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: min(980px, 94vw);
    max-width: 94vw;
    max-height: 92vh;
    overflow-x: hidden;
    overflow-y: auto;
    background: #121212;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,.35);
    display: none;
    z-index: 13001;
    font-size: 13px;
    --d-title-fs: 20px;
    --d-price-fs: 17px;
}
.detail-modal.open,
.detail-backdrop.open{
    display: block;
}
/* Mobile web: fit above fixed bottom tab bar */
html.is-mobile-web .detail-modal{
    top: calc(env(safe-area-inset-top) + 12px);
    bottom: calc(var(--bottom-nav-h, 0px) + 12px);
    transform: translateX(-50%);
    max-height: none;
}
.detail-close{
    position: sticky;
    top: 10px;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid #3a3a3a;
    background: #3a3a3a;
    color: transparent;
    cursor: pointer;
    font-size: 0;
    line-height: 1;
    z-index: 10002;
    display: block;
    box-sizing: border-box;
    padding: 0;
    margin: 0 10px 0 auto;
}
.detail-close::after{
    content: "×";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-56%);
    color: #ffffff;
    font-size: 20px;
    line-height: 1;
    pointer-events: none;
}
.detail-body{
    display: grid;
    grid-template-columns: 1.2fr 1.6fr;
    gap: 18px;
    padding: 16px;
    min-width: 0;
    overflow-x: hidden;
}
.detail-media,
.detail-main{
    min-width: 0;
    max-width: 100%;
}
.detail-media .ss-card-carousel,
.detail-media .ss-card-carousel-view{
    max-width: 100%;
}
.detail-media img{
    width: 100%;
    max-width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}
.d-title{
    margin: 0 0 4px;
    font-size: var(--d-title-fs);
    font-weight: 800;
    letter-spacing: -.01em;
    color: #ffffff;
}
.d-sub{
    color: #d0d0d0;
    margin-bottom: 5px;
    font-size: 12px;
}
.d-price{
    font-size: var(--d-price-fs);
    font-weight: 800;
    margin: 6px 0;
    color: #ffffff;
}
.d-meta{
    color: #c0c0c0;
    margin: 5px 0 8px;
    font-size: 12px;
}
.d-amen{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 8px;
}
.d-chip{
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 11px;
    background: #2a2a2a;
    border: none;
    color: #f5f5f5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.d-desc{
    margin-top: 8px;
    line-height: 1.55;
    white-space: pre-line;
    font-size: 13px;
    color: #e5e5e5;
}
.detail-modal .d-actions{
    display: flex;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
    min-width: 0;
}
.detail-modal .d-actions .btn{
    background: #3a3a3a;
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 13px;
    min-width: 0;
}
.detail-modal .d-actions #dOpen,
.detail-modal .d-actions #dOpenTop{
    padding: 12px 18px;
    font-size: 14px;
    border-radius: 14px;
    background: linear-gradient(90deg,#ffd700,#ffed4e,#fff8dc);
    color: #111;
    border: none;
}
/* Small favourites button between Open + Close */
.detail-modal .d-actions #dFavBtn{
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 14px;
    background: #3a3a3a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: none;
    cursor: pointer;
    position: relative;
    opacity: .92;
}
.detail-modal .d-actions #dFavTopBtn{
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 14px;
    background: #3a3a3a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: none;
    cursor: pointer;
    position: relative;
    opacity: .92;
}
.detail-modal .d-actions #dFavTopBtn::before{
    content: "";
    width: 22px;
    height: 22px;
    display: block;
    background: rgba(255,255,255,.86);
    -webkit-mask-image: url("/static/nav_favourites.png");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url("/static/nav_favourites.png");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}
@supports not ((-webkit-mask-image: url("x")) or (mask-image: url("x"))){
    .detail-modal .d-actions #dFavTopBtn::before{
        background: transparent;
        -webkit-mask-image: none;
        mask-image: none;
        background-image: url("/static/footer%20favourites.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 22px 22px;
    }
}
.detail-modal .d-actions #dFavTopBtn.is-fav{
    opacity: 1;
}
.detail-modal .d-actions #dFavTopBtn.is-fav::before{
    background: #ffd700;
}
.detail-modal .d-actions #dFavBtn::before{
    content: "";
    width: 22px;
    height: 22px;
    display: block;
    background: rgba(255,255,255,.86);
    -webkit-mask-image: url("/static/nav_favourites.png");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url("/static/nav_favourites.png");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}
@supports not ((-webkit-mask-image: url("x")) or (mask-image: url("x"))){
    .detail-modal .d-actions #dFavBtn::before{
        background: transparent;
        -webkit-mask-image: none;
        mask-image: none;
        background-image: url("/static/footer%20favourites.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 22px 22px;
    }
}
.detail-modal .d-actions #dFavBtn.is-fav{
    opacity: 1;
}
.detail-modal .d-actions #dFavBtn.is-fav::before{
    background: #ffd700;
}
.detail-modal .d-actions #dCloseBtn{
    padding: 10px 14px;
    font-size: 13px;
    border-radius: 14px;
    background: #4a4a4a;
    border: none;
}
.d-group{ margin-top: 10px; }
.d-group-title{
    font-weight: 800;
    color: #e0e0e0;
    margin: 6px 0 2px;
    font-size: 12px;
    letter-spacing: -.01em;
}
@media (max-width: 840px){
    .detail-body{ grid-template-columns: 1fr; }
    .detail-media img{ max-height: 300px; }
}
@media (max-width: 720px){
    .detail-modal{ --d-title-fs: var(--d-price-fs); }
}

#filtersModalBody {
    padding: 20px;
}

#favouritesModalBody {
    padding: 20px;
}

.favourites-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    gap: 25px;
    padding: 0 5px;
}

.favourites-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.favourites-sort-select {
    background: #1a1a1a;
    color: #ffffff;
    border: 1px solid #757575;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    padding-right: 30px;
    min-width: 150px;
}

.favourites-sort-select:focus {
    border-color: #667eea;
    outline: none;
}

.favourites-sort-select:hover {
    border-color: #ffffff;
}

.remove-all-btn {
    background: #e74c3c;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease, border-width 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.remove-all-btn:hover {
    background: #c0392b;
    transform: translateY(-1px);
}

.favourite-item {
    background: #1a1a1a;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #333;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.favourite-item:hover {
    background: #2a2a2a;
}

.favourite-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.favourite-item-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.favourite-item-price {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.favourite-item-location {
    color: #b0b0b0;
    font-size: 14px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.favourite-item-details {
    display: flex;
    gap: 15px;
    margin-bottom: 8px;
}

.favourite-item-detail {
    color: #b0b0b0;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}
/* Ensure icon/text spacing even if flex-gap misbehaves */
.favourite-item-detail i{
    margin-right: 6px;
}
/* Optical alignment in favourites row too */
.favourite-item-detail i.fa-bed{
    margin-right: 8px;
}

.favourite-item-description {
    color: #d0d0d0;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    max-height: 2.8em; /* 2 lines * 1.4 line-height */
    word-wrap: break-word;
    word-break: break-word;
}

/* Fallback for browsers that don't support -webkit-line-clamp */
@supports not (-webkit-line-clamp: 2) {
    .favourite-item-description {
        display: block;
        max-height: 2.8em;
        overflow: hidden;
        position: relative;
    }
    
    .favourite-item-description::after {
        content: '...';
        position: absolute;
        bottom: 0;
        right: 0;
        background: #1a1a1a;
        padding-left: 20px;
    }
}

.favourite-item-image {
    width: 100%;
    height: 150px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    margin-bottom: 10px;
    position: relative;
    object-fit: cover;
}

.favourite-item-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #121212;
    color: #fff;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    opacity: 0.9;
}

.remove-favourite-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #e74c3c;
    color: #fff;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease, border-width 0.3s ease;
    opacity: 0.9;
}

.remove-favourite-btn:hover {
    background: #c0392b;
    transform: scale(1.1);
    opacity: 1;
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
}

.toast {
    background: #2c3e50;
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    margin-bottom: 10px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.toast.show {
    transform: translateX(0);
}

.toast.success {
    background: #27ae60;
}

.toast.error {
    background: #e74c3c;
}

/* Minimal swipe indicator (heart/X) */
.swipe-indicator{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    font-size: 56px;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    z-index: 3000;
    transition: transform .2s ease, opacity .2s ease;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
    color: #cfcfcf; /* default neutral gray */
}
.swipe-indicator.show{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.swipe-indicator i{
    color: #cfcfcf; /* force gray on icon glyphs */
    font-size: 56px;
}

/* Mobile-First Responsive Design */
@media (max-width: 768px) {
    .app-container {
        max-width: 100%;
        box-shadow: none;
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height for mobile browsers */
    }
    
    .header {
        padding: 10px 15px;
    }
    
    .logo {
        font-size: 20px;
    }
    
    .auth-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .search-filters-container {
        padding: 8px 15px;
    }
    
    .search-bar input {
        font-size: 16px; /* Prevents zoom on iOS */
        height: 44px; /* Minimum touch target size */
    }
    
    .filter-toggle-btn {
        padding: 10px 16px;
        font-size: 13px;
        height: 44px;
    }
    
    .swiper-container {
        /* Bring cards up to touch the header (no extra top padding) */
        padding: 0 15px 6px 15px;
    }

    .swiper-ai-cta-wrap{
        top: 4px;
        width: min(calc(100% - 24px), var(--swiper-stack-max));
    }

    .swiper-ai-cta{
        padding: 6px 10px;
        font-size: 11px;
        max-width: min(100%, 240px);
    }
    
    .swiper-stack {
        max-width: 100%;
        /* You requested: reduce deck height, then move the deck DOWN so we don't create
           extra dead space at the bottom. We do that by reserving more space for the
           bottom controls and adding a larger top margin. */
        margin-top: 8px;
        height: clamp(360px, calc(100dvh - var(--topbar-h) - 150px), 620px);
    }
    
    .property-card {
        border-radius: 16px;
    }
    
    .property-info {
        padding: 15px;
    }
    
    .property-title {
        font-size: 18px;
        line-height: 1.3;
    }
    
    .property-location {
        font-size: 13px;
        margin-bottom: 10px;
    }
    
    .property-details {
        gap: 12px;
        margin-bottom: 12px;
    }
    
    .detail-item {
        font-size: 13px;
    }
    
    .property-description {
        font-size: 13px;
        line-height: 1.4;
        -webkit-line-clamp: 2;
        max-height: 2.8em;
    }
    
    .action-buttons {
        bottom: 20px;
        padding: 0 15px;
    }
    
    .action-btn {
        width: 56px;
        height: 56px;
        font-size: 22px;
        min-height: 44px; /* Minimum touch target */
    }
    
    .undo-btn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .favourites-btn {
        padding: 8px 16px;
        font-size: 14px;
        min-height: 44px;
    }
    
    /* Modal improvements for mobile */
    .modal-overlay {
        padding: 20px;
    }
    
    .modal-content {
        max-width: 100%;
        max-height: 90vh;
        max-height: 90dvh;
        border-radius: 16px;
    }
    
    #favouritesModalOverlay .modal-content {
        max-width: 100%;
        width: 100%;
    }
    
    .favourite-item-image {
        height: 120px;
    }
    
    .favourites-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 20px;
    }
    
    .favourites-controls {
        width: 100%;
        justify-content: space-between;
        gap: 10px;
    }
    
    .favourites-sort-select {
        flex: 1;
        min-width: 0;
        font-size: 14px;
    }
    
    .remove-all-btn {
        font-size: 13px;
        padding: 6px 12px;
    }
    
    /* Filter modal mobile improvements */
    #filtersModalBody {
        padding: 15px;
        max-height: 80vh;
        max-height: 80dvh;
        overflow-y: auto;
    }
    
    .filter-section {
        margin-bottom: 18px;
    }
    
    .filter-section h3 {
        font-size: 15px;
        margin-bottom: 8px;
    }
    
    .range-inputs {
        flex-direction: column;
        gap: 8px;
    }
    
    .range-inputs input {
        width: 100%;
        font-size: 16px; /* Prevents zoom on iOS */
        height: 44px;
    }
    
    .range-inputs span {
        text-align: center;
        font-size: 14px;
    }
    
    .select-inputs {
        flex-direction: column;
        gap: 8px;
    }
    
    .select-inputs select {
        font-size: 16px; /* Prevents zoom on iOS */
        height: 44px;
        padding: 10px 12px;
    }
    
    .amenities-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 8px;
    }
    
    .amenity-checkbox {
        padding: 6px 10px;
        font-size: 13px;
    }
    
    .filter-actions {
        flex-direction: column;
        gap: 8px;
        margin-top: 15px;
    }
    
    .clear-filters-btn, .apply-filters-btn {
        height: 44px;
        font-size: 16px;
    }
    
    /* Auth modal mobile improvements */
    .auth-modal {
        max-width: 100% !important;
        width: 100% !important;
        min-height: auto !important;
    }
    
    #loginModalOverlay, #signupModalOverlay {
        padding: 20px !important;
    }
    
    #loginModalOverlay .auth-modal-body,
    #signupModalOverlay .auth-modal-body {
        padding: 20px !important;
    }
    
    .auth-input-group input {
        font-size: 16px; /* Prevents zoom on iOS */
        height: 44px;
    }
    
    .auth-submit-btn {
        height: 44px;
        font-size: 16px;
    }
    
    /* Toast notifications mobile positioning */
    .toast-container {
        top: 10px;
        right: 10px;
        left: 10px;
    }
    
    .toast {
        font-size: 14px;
        padding: 10px 15px;
    }
}

@media (max-width: 480px) {
    .swiper-ai-cta-wrap{
        top: 2px;
    }

    .swiper-ai-cta{
        font-size: 10px;
        padding: 6px 9px;
        max-width: min(100%, 220px);
    }

    .swiper-stack {
        margin-top: 6px;
        height: clamp(340px, calc(100dvh - var(--topbar-h) - 142px), 560px);
    }
    
    .property-title {
        font-size: 16px;
    }
    
    .action-btn {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }
    
    .undo-btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    
    .favourites-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .modal-overlay {
        padding: 15px;
    }
    
    .favourite-item-image {
        height: 100px;
    }
    
    .favourite-item-title {
        font-size: 16px;
    }
    
    .favourite-item-price {
        font-size: 14px;
    }
}

@media (min-width: 768px) {
    .app-container {
        max-width: 100%;
    }
    
    .swiper-stack {
        --swiper-stack-max: 420px;
        height: clamp(500px, calc(100dvh - var(--topbar-h) - 220px), 640px);
    }
}

/* Desktop web: make the deck bigger and push it down from the header. */
@media (min-width: 900px) {
    .swiper-container{
        /* More breathing room under the fixed header */
        padding-top: 20px;
        /* Reserve space for the fixed action buttons */
        padding-bottom: 140px;
    }

    .swiper-stack{
        /* Larger deck on desktop */
        --swiper-stack-max: 560px;
        /* Keep it responsive to viewport height */
        height: min(760px, calc(100dvh - var(--topbar-h) - 200px));
        margin-top: 8px;
    }

    /* Keep action buttons aligned with the wider deck */
    .action-buttons{
        max-width: var(--swiper-stack-max);
    }

    /* ===== Desktop: make card text much larger (keep same rows) ===== */
    /* Give the text block more room inside the taller deck */
    .property-image{ height: 54%; }
    .property-card .pad{
        height: 46%;
        padding: 18px 22px 20px;
        gap: 14px;
    }

    /* Top line (price) */
    .property-card h4{
        font-size: 30px;
        font-weight: 900;
        letter-spacing: -0.02em;
    }

    /* Meta rows (type, beds/baths, address, city) */
    .property-card .result-meta{
        font-size: 18px;
        line-height: 1.5;
    }
    .property-card .result-meta.meta-icons .mi{
        font-size: 18px;
        gap: 8px;
    }
    .property-card .result-meta i{
        width: 16px;
        font-size: 16px;
    }

    /* Corner price pill on image */
    .property-price{
        font-size: 18px;
        padding: 10px 14px;
        border-radius: 999px;
    }
    .property-badge{
        font-size: 14px;
        padding: 8px 12px;
        border-radius: 999px;
    }
}

/* Animation Classes */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-50px);
    }
}

.property-card.animate-in {
    animation: slideIn 0.5s ease-out;
}

.property-card.animate-out {
    animation: slideOut 0.3s ease-in;
}

/* Loading State */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #b0b0b0;
}

.loading i {
    font-size: 32px;
    animation: spin 1s linear infinite;
}

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

/* Touch-specific optimizations for mobile devices */
@media (hover: none) and (pointer: coarse) {
    .property-card {
        touch-action: pan-y;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
    }
    
    .action-btn, .favourites-btn, .filter-toggle-btn, .auth-btn {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    .search-bar input {
        -webkit-appearance: none;
        appearance: none;
    }
    
    .modal-body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

/* Mobile device class for additional touch optimizations */
.mobile-device .property-card {
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.mobile-device .action-btn,
.mobile-device .favourites-btn,
.mobile-device .filter-toggle-btn,
.mobile-device .auth-btn {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ======================= Swiper tutorial (preview-only) ======================= */
.ss-tutorial-preview{
    position: fixed;
    left: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 10020;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(18,18,18,.88);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .2px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.ss-tutorial{
    position: fixed;
    inset: 0;
    z-index: 10010;
    pointer-events: auto;
}
.ss-tutorial.is-open{ display:block; }
.ss-tutorial__backdrop{
    position:absolute;
    inset:0;
    background: rgba(0,0,0,.55);
}

/* While tutorial is open, block interactions with the real app UI */
.ss-tutorial-open .app-container{
    pointer-events: none;
}
.ss-tutorial-open #swiperTutorialOverlay{
    pointer-events: auto;
}

.ss-tutorial-underHidden{
    opacity: 0 !important;
}

.ss-tutorial__panel{
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: calc(92px + env(safe-area-inset-bottom));
    z-index: 10030;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(18,18,18,.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    padding: 14px 14px 12px;
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
    transform: translateY(14px);
    opacity: 0;
    transition: transform .22s ease, opacity .22s ease;
}
.ss-tutorial.is-open .ss-tutorial__panel{
    transform: translateY(0);
    opacity: 1;
}
.ss-tutorial__panelTop{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.ss-tutorial__progress{
    color: rgba(255,255,255,.75);
    font-size: 12px;
    font-weight: 700;
}
.ss-tutorial__skip{
    border: 1px solid rgba(255,255,255,.22);
    background: transparent;
    color:#fff;
    border-radius: 999px;
    padding: 7px 12px;
    font-weight: 800;
    font-size: 12px;
}
.ss-tutorial__title{
    font-size: 16px;
    font-weight: 900;
    margin-bottom: 6px;
}
.ss-tutorial__body{
    color: rgba(255,255,255,.82);
    font-size: 13px;
    line-height: 1.35;
    margin-bottom: 12px;
}
.ss-tutorial__panelBottom{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
}
.ss-tutorial__dots{
    display:flex;
    align-items:center;
    gap: 6px;
    flex: 1 1 auto;
    justify-content: center;
}
.ss-tutorial__dot{
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.28);
}
.ss-tutorial__dot.is-active{
    background: linear-gradient(90deg,#ffd700,#ffed4e,#fff8dc);
}
.ss-tutorial__next{
    border: none;
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 900;
    font-size: 13px;
    color: #1a1a1a;
    background: linear-gradient(90deg,#ffd700,#ffed4e,#fff8dc);
}

.ss-tutorial__demoCardHost{
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10025;
}

.ss-tutorial-demoCard .property-image .ss-tutorial-demoImage{
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,215,0,.16), rgba(255,255,255,.08));
}

/* Hand indicator */
.ss-tutorial__hand{
    position: fixed;
    left: 60%;
    top: 56%;
    z-index: 10035;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.20);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}
.ss-tutorial__hand::before{
    content: "☝";
    display:block;
    width: 100%;
    height: 100%;
    line-height: 46px;
    text-align: center;
    font-size: 22px;
    color: rgba(255,255,255,.95);
    transform: translateY(-1px);
}
.ss-tutorial.is-open .ss-tutorial__hand{
    opacity: 1;
}
.ss-tutorial__hand.ss-tutorial-hand-left{
    animation: ssTutHandLeft 1.05s ease-in-out 1;
}
.ss-tutorial__hand.ss-tutorial-hand-right{
    animation: ssTutHandRight 1.05s ease-in-out 1;
}
.ss-tutorial__hand.ss-tutorial-hand-tap{
    animation: ssTutHandTap .85s ease-in-out 1;
}

@keyframes ssTutHandLeft{
    0%{ transform: translate(-50%,-50%) scale(1); opacity: 0; }
    15%{ opacity: 1; transform: translate(-50%,-50%) scale(1); }
    45%{ transform: translate(calc(-50% - 120px), calc(-50% + 4px)) scale(.98); }
    70%{ transform: translate(calc(-50% - 140px), calc(-50% + 4px)) scale(.98); }
    100%{ transform: translate(-50%,-50%) scale(1); opacity: 0; }
}
@keyframes ssTutHandRight{
    0%{ transform: translate(-50%,-50%) scale(1); opacity: 0; }
    15%{ opacity: 1; transform: translate(-50%,-50%) scale(1); }
    45%{ transform: translate(calc(-50% + 120px), calc(-50% + 4px)) scale(.98); }
    70%{ transform: translate(calc(-50% + 140px), calc(-50% + 4px)) scale(.98); }
    100%{ transform: translate(-50%,-50%) scale(1); opacity: 0; }
}
@keyframes ssTutHandTap{
    0%{ transform: translate(-50%,-50%) scale(1); opacity: 0; }
    20%{ opacity: 1; }
    40%{ transform: translate(-50%,-50%) scale(.92); }
    65%{ transform: translate(-50%,-50%) scale(1); }
    100%{ opacity: 0; }
}

/* Demo card animations */
.ss-tutorial-demoCard.ss-tutorial-swipe-left{
    animation: ssTutSwipeLeft 1.05s ease-in-out 1;
}
.ss-tutorial-demoCard.ss-tutorial-swipe-right{
    animation: ssTutSwipeRight 1.05s ease-in-out 1;
}
.ss-tutorial-demoCard.ss-tutorial-tap{
    animation: ssTutTap .85s ease-in-out 1;
}
@keyframes ssTutSwipeLeft{
    0%{ transform: translate(0,0) rotate(0deg); }
    38%{ transform: translate(-120px, 6px) rotate(-10deg); }
    62%{ transform: translate(-190px, 10px) rotate(-16deg); }
    100%{ transform: translate(0,0) rotate(0deg); }
}
@keyframes ssTutSwipeRight{
    0%{ transform: translate(0,0) rotate(0deg); }
    38%{ transform: translate(120px, 6px) rotate(10deg); }
    62%{ transform: translate(190px, 10px) rotate(16deg); }
    100%{ transform: translate(0,0) rotate(0deg); }
}
@keyframes ssTutTap{
    0%{ transform: translate(0,0) scale(1); }
    35%{ transform: translate(0,0) scale(.975); }
    100%{ transform: translate(0,0) scale(1); }
}

/* Pulse on real buttons */
.ss-tutorial-pulse{
    animation: ssTutPulse 1.1s ease-in-out 1;
}
@keyframes ssTutPulse{
    0%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(255,215,0,.0); }
    30%{ transform: scale(1.06); box-shadow: 0 0 0 10px rgba(255,215,0,.10); }
    60%{ transform: scale(1.02); box-shadow: 0 0 0 6px rgba(255,215,0,.06); }
    100%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(255,215,0,.0); }
}

/* Flicker highlight for bottom action buttons (no pointer hand over buttons) */
.ss-tutorial-flicker{
    animation: ssTutFlicker .92s ease-in-out infinite;
    /* Make it unmistakable */
    filter: brightness(1.45) saturate(1.25) contrast(1.08);
}
@keyframes ssTutFlicker{
    0%{
        transform: scale(1);
        box-shadow:
          0 0 0 0 rgba(255,215,0,.00),
          0 0 0 0 rgba(255,215,0,.00);
        opacity: 1;
    }
    45%{
        transform: scale(1.06);
        box-shadow:
          0 0 0 4px rgba(255,215,0,.55),
          0 0 22px 6px rgba(255,215,0,.22);
        opacity: 1;
    }
    55%{
        transform: scale(1.03);
        box-shadow:
          0 0 0 3px rgba(255,215,0,.35),
          0 0 16px 4px rgba(255,215,0,.14);
        opacity: .96;
    }
    100%{
        transform: scale(1);
        box-shadow:
          0 0 0 0 rgba(255,215,0,.00),
          0 0 0 0 rgba(255,215,0,.00);
        opacity: 1;
    }
}

/* Fake details panel */
.ss-tutorial__fakeDetails{
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: calc(170px + env(safe-area-inset-bottom));
    z-index: 10028;
    border-radius: 14px;
    background: rgba(0,0,0,.65);
    border: 1px solid rgba(255,255,255,.16);
    padding: 12px 12px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
}
.ss-tutorial__fakeDetails.is-show{
    opacity: 1;
    transform: translateY(0);
}
.ss-tutorial__fakeDetailsTitle{
    font-weight: 900;
    color: #fff;
    margin-bottom: 4px;
}
.ss-tutorial__fakeDetailsBody{
    font-size: 12px;
    color: rgba(255,255,255,.82);
}

/* Arrow down for favourites location (native tab bar) */
.ss-tutorial__arrowDown{
    position: fixed;
    left: 50%;
    bottom: calc(18px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 10040;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
}
.ss-tutorial__arrowDown.is-show{
    opacity: 1;
    animation: ssTutArrowBounce 1.2s ease-in-out infinite;
}
.ss-tutorial__arrowDownIcon{
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.20);
    color: #fff;
    font-size: 22px;
    line-height: 36px;
    text-align: center;
}
.ss-tutorial__arrowDownText{
    background: rgba(18,18,18,.88);
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.92);
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-align:center;
    white-space: nowrap;
}
@keyframes ssTutArrowBounce{
    0%, 100%{ transform: translateX(-50%) translateY(0); }
    50%{ transform: translateX(-50%) translateY(-10px); }
}