/* ============================================================
   RentalSpaces.in - Main CSS
   ============================================================ */

/* Variables */
:root {
    --rs-primary: #1E3A5F;
    --rs-primary-dark: #152d4a;
    --rs-primary-light: #2a5080;
    --rs-accent: #F97316;
    --rs-accent-dark: #ea6a0a;
    --rs-success: #10B981;
    --rs-error: #EF4444;
    --rs-warning: #F59E0B;
    --rs-info: #3B82F6;

    --rs-text: #1F2937;
    --rs-text-light: #6B7280;
    --rs-text-lighter: #9CA3AF;
    --rs-border: #E5E7EB;
    --rs-border-dark: #D1D5DB;
    --rs-bg: #F9FAFB;
    --rs-bg-white: #FFFFFF;
    --rs-bg-card: #FFFFFF;

    --rs-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --rs-font-heading: 'Poppins', 'Inter', sans-serif;

    --rs-radius: 8px;
    --rs-radius-lg: 12px;
    --rs-radius-xl: 16px;
    --rs-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --rs-shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
    --rs-shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--rs-font); color: var(--rs-text); background: var(--rs-bg); line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rs-primary); text-decoration: none; }
a:hover { color: var(--rs-accent); }
ul { list-style: none; }
[x-cloak] { display: none !important; }

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 768px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

/* ============================================================
   HEADER / NAVBAR
   ============================================================ */
.rs-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--rs-bg-white);
    border-bottom: 1px solid var(--rs-border);
    box-shadow: var(--rs-shadow);
}

.rs-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 68px;
}

.rs-logo img { height: 36px; width: auto; }

.rs-nav-links {
    display: none;
    gap: 0;
    flex: 1;
}
@media (min-width: 1024px) { .rs-nav-links { display: flex; } }

.rs-nav-link {
    padding: 0.35rem 0.45rem;
    border-radius: var(--rs-radius);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--rs-text);
    transition: background 0.15s, color 0.15s;
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}
.rs-nav-link:hover { background: var(--rs-bg); color: var(--rs-primary); }

.rs-nav-more { position: relative; }
.rs-nav-more-btn { display: flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.rs-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--rs-bg-white);
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius-lg);
    box-shadow: var(--rs-shadow-lg);
    min-width: 180px;
    overflow: hidden;
    z-index: 50;
}
.rs-dropdown a {
    display: block;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--rs-text);
    transition: background 0.1s;
}
.rs-dropdown a:hover { background: var(--rs-bg); }

.rs-nav-cta {
    display: none;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}
@media (min-width: 768px) { .rs-nav-cta { display: flex; } }

.rs-mobile-toggle {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--rs-text);
    padding: 0.25rem;
}
/* Hide toggle only at desktop where nav links are visible */
@media (min-width: 1024px) { .rs-mobile-toggle { display: none; } }
/* On tablet (768–1023px): toggle visible, but margin-left: 0 since CTA is already there */
@media (min-width: 768px) and (max-width: 1023px) {
    .rs-mobile-toggle { margin-left: 0.5rem; }
}

.rs-mobile-menu {
    background: var(--rs-bg-white);
    border-top: 1px solid var(--rs-border);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.rs-mobile-menu a {
    padding: 0.625rem 0.75rem;
    border-radius: var(--rs-radius);
    font-weight: 500;
    color: var(--rs-text);
}
.rs-mobile-menu a:hover { background: var(--rs-bg); }
.rs-mobile-cta { margin-top: 0.5rem; text-align: center; }
.rs-mobile-menu hr { border: none; border-top: 1px solid var(--rs-border); margin: 0.25rem 0; }

/* User Menu */
.rs-user-menu { position: relative; }
.rs-user-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius);
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--rs-text);
}
.rs-user-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--rs-bg-white);
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius-lg);
    box-shadow: var(--rs-shadow-lg);
    min-width: 200px;
    overflow: hidden;
    z-index: 50;
}
.rs-user-dropdown a {
    display: block;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--rs-text);
    transition: background 0.1s;
}
.rs-user-dropdown a:hover { background: var(--rs-bg); }
.rs-user-dropdown hr { border: none; border-top: 1px solid var(--rs-border); margin: 0.25rem 0; }
.rs-logout { color: var(--rs-error) !important; }

.rs-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--rs-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.rs-user-avatar--sm { width: 28px; height: 28px; font-size: 0.75rem; }

/* ============================================================
   BUTTONS
   ============================================================ */
.rs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: var(--rs-radius);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
}
.rs-btn-primary { background: var(--rs-accent); color: white; border-color: var(--rs-accent); }
.rs-btn-primary:hover { background: var(--rs-accent-dark); border-color: var(--rs-accent-dark); color: white; }
.rs-btn-secondary { background: var(--rs-primary); color: white; border-color: var(--rs-primary); }
.rs-btn-secondary:hover { background: var(--rs-primary-dark); border-color: var(--rs-primary-dark); color: white; }
.rs-btn-outline { background: transparent; color: var(--rs-primary); border-color: var(--rs-primary); }
.rs-btn-outline:hover { background: var(--rs-primary); color: white; }
.rs-btn-ghost { background: transparent; color: var(--rs-text); border-color: var(--rs-border); }
.rs-btn-ghost:hover { background: var(--rs-bg); }
.rs-btn-danger { background: var(--rs-error); color: white; border-color: var(--rs-error); }
.rs-btn-sm { padding: 0.375rem 0.875rem; font-size: 0.8rem; }
.rs-btn-lg { padding: 0.75rem 1.75rem; font-size: 1rem; }
.rs-btn-block { width: 100%; }
.rs-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ============================================================
   FORMS
   ============================================================ */
.rs-form-group { margin-bottom: 1.25rem; }
.rs-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--rs-text);
    margin-bottom: 0.375rem;
}
.rs-label-required::after { content: ' *'; color: var(--rs-error); }
.rs-input,
.rs-select,
.rs-textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1.5px solid var(--rs-border-dark);
    border-radius: var(--rs-radius);
    font-size: 0.9rem;
    font-family: var(--rs-font);
    color: var(--rs-text);
    background: var(--rs-bg-white);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    appearance: none;
}
.rs-input:focus,
.rs-select:focus,
.rs-textarea:focus {
    border-color: var(--rs-primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}
.rs-input::placeholder { color: var(--rs-text-lighter); }
.rs-textarea { min-height: 100px; resize: vertical; }
.rs-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.5rem; }
.rs-input-error { border-color: var(--rs-error) !important; }
.rs-form-error { font-size: 0.8rem; color: var(--rs-error); margin-top: 0.25rem; }
.rs-form-hint { font-size: 0.8rem; color: var(--rs-text-light); margin-top: 0.25rem; }

/* ============================================================
   CARDS
   ============================================================ */
.rs-card {
    background: var(--rs-bg-white);
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--rs-shadow);
}
.rs-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rs-border);
}
.rs-card-title { font-family: var(--rs-font-heading); font-size: 1.1rem; font-weight: 600; }

/* ============================================================
   PROPERTY CARD
   ============================================================ */
.rs-property-card {
    background: var(--rs-bg-white);
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius-lg);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
}
.rs-property-card:hover { box-shadow: var(--rs-shadow-lg); transform: translateY(-2px); }

.rs-property-img {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: var(--rs-bg);
}
/* <picture> is inline by default, which would break the img's height:100% */
.rs-property-img picture { display: block; width: 100%; height: 100%; }
.rs-property-img img { width: 100%; height: 100%; object-fit: cover; }
.rs-property-badge {
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    padding: 0.25rem 0.625rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rs-badge-featured { background: var(--rs-accent); color: white; }
.rs-badge-new { background: var(--rs-success); color: white; }
.rs-property-save {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: transform 0.1s;
}
.rs-property-save:hover { transform: scale(1.1); }

.rs-property-body { padding: 1rem; flex: 1; }
.rs-property-price { font-family: var(--rs-font-heading); font-size: 1.25rem; font-weight: 700; color: var(--rs-primary); margin-bottom: 0.25rem; }
.rs-property-price span { font-size: 0.8rem; font-weight: 400; color: var(--rs-text-light); }
.rs-property-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.375rem; line-height: 1.4; color: var(--rs-text); }
.rs-property-location { display: flex; align-items: center; gap: 0.35rem; font-size: 0.825rem; color: var(--rs-text-light); margin-bottom: 0.75rem; }
.rs-property-location svg { flex-shrink: 0; }
.rs-property-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.rs-tag {
    padding: 0.2rem 0.5rem;
    background: var(--rs-bg);
    border: 1px solid var(--rs-border);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--rs-text-light);
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.rs-breadcrumbs {
    background: var(--rs-bg-white);
    border-bottom: 1px solid var(--rs-border);
    padding: 0.5rem 0;
}
.rs-breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.8rem;
    /* It is an <ol>, so without these the markers render inline and the trail
       reads "1. Home2. Navi Mumbai3. Kharghar". flex alone does not remove them. */
    list-style: none;
    margin: 0;
    padding: 0;
}
.rs-breadcrumb-list a { color: var(--rs-text-light); }
.rs-breadcrumb-list a:hover { color: var(--rs-primary); }
.rs-breadcrumb-list li:last-child { color: var(--rs-text); font-weight: 500; }
.rs-breadcrumb-sep { color: var(--rs-text-lighter); }

/* ============================================================
   ALERTS
   ============================================================ */
.rs-alert {
    padding: 0.875rem 1.25rem;
    border-radius: var(--rs-radius);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}
.rs-alert--success { background: #D1FAE5; color: #065F46; border-color: #6EE7B7; }
.rs-alert--error { background: #FEE2E2; color: #991B1B; border-color: #FECACA; }
.rs-alert--warning { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.rs-alert--info { background: #DBEAFE; color: #1E40AF; border-color: #BFDBFE; }

/* ============================================================
   BADGES
   ============================================================ */
.rs-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.rs-badge-primary { background: #DBEAFE; color: #1E40AF; }
.rs-badge-success { background: #D1FAE5; color: #065F46; }
.rs-badge-error { background: #FEE2E2; color: #991B1B; }
.rs-badge-warning { background: #FEF3C7; color: #92400E; }
.rs-badge-gray { background: #F3F4F6; color: #374151; }

/* ============================================================
   FOOTER
   ============================================================ */
.rs-footer {
    background: var(--rs-primary);
    color: rgba(255,255,255,0.85);
    padding: 3rem 0 1.5rem;
    margin-top: 4rem;
}
.rs-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
@media (min-width: 768px) { .rs-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.rs-footer-brand p { font-size: 0.875rem; margin-top: 0.75rem; line-height: 1.6; }
.rs-footer-logo { display: inline-block; margin-bottom: 0.75rem; }
.rs-footer-col h4 { font-family: var(--rs-font-heading); font-size: 0.9rem; font-weight: 600; color: white; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; }
.rs-footer-col ul { display: flex; flex-direction: column; gap: 0.5rem; }
.rs-footer-col a { font-size: 0.875rem; color: rgba(255,255,255,0.7); transition: color 0.15s; }
.rs-footer-col a:hover { color: var(--rs-accent); }
.rs-footer-bottom { padding-top: 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.rs-footer-bottom p { font-size: 0.8rem; color: rgba(255,255,255,0.6); }
.rs-footer-last-updated { font-size: 0.75rem !important; }

/* ============================================================
   GRID & LAYOUT HELPERS
   ============================================================ */
.rs-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .rs-grid-2 { grid-template-columns: 1fr 1fr; } }
.rs-grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .rs-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .rs-grid-3 { grid-template-columns: 1fr 1fr 1fr; } }
.rs-grid-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (min-width: 1024px) { .rs-grid-4 { grid-template-columns: repeat(4, 1fr); } }

.rs-section { padding: 3rem 0; }
.rs-section-title { font-family: var(--rs-font-heading); font-size: 1.75rem; font-weight: 700; color: var(--rs-primary); margin-bottom: 0.5rem; }
.rs-section-subtitle { color: var(--rs-text-light); font-size: 1rem; margin-bottom: 2rem; }

/* ============================================================
   UTILITIES
   ============================================================ */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-primary { color: var(--rs-primary); }
.text-accent { color: var(--rs-accent); }
.text-light { color: var(--rs-text-light); }
.text-success { color: var(--rs-success); }
.text-error { color: var(--rs-error); }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ============================================================
   MEGA MENU
   ============================================================ */

.rs-has-mega { position: static !important; }
.rs-caret { font-size: 10px; opacity: 0.55; margin-left: 3px; transition: transform 0.2s; }
.rs-has-mega:hover .rs-caret { transform: rotate(180deg); }

.rs-mega {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 3px solid #0066FF;
    box-shadow: 0 16px 48px rgba(0,0,0,0.13);
    z-index: 999;
}

.rs-mega-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 22px 32px 28px;
}

.rs-mega-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}
.rs-mega-top strong { font-size: 14px; font-weight: 600; color: #0A1628; }
.rs-mega-view-all { font-size: 13px; color: #0066FF; font-weight: 500; }
.rs-mega-view-all:hover { text-decoration: underline; }

.rs-mega-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.15fr;
    gap: 0 28px;
}

.rs-mega-col-head {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #555;
    font-weight: 700;
    margin-bottom: 9px;
    padding-bottom: 6px;
    border-bottom: 2px solid #0066FF20;
}

.rs-mega-col a {
    display: block;
    font-size: 13.5px;
    color: #444;
    padding: 4px 0;
    transition: color 0.12s, padding-left 0.12s;
}
.rs-mega-col a:hover { color: #0066FF; padding-left: 4px; }

.rs-mega-col--types a {
    font-size: 13px;
    color: #555;
    padding: 5px 0;
    border-bottom: 1px solid #f8f8f8;
}
.rs-mega-col--types a:last-child { border-bottom: none; }
.rs-mega-col--types a:hover { color: #FF6B00; padding-left: 0; }

/* ── Tab Mega Menu (More Cities) ── */
.rs-mega--tab .rs-mega-inner {
    display: grid;
    grid-template-columns: 190px 1fr;
    min-height: 420px;
    padding: 0;
}

.rs-mega-tab-sidebar {
    border-right: 1px solid #eee;
    padding: 14px 0;
    background: #fafafa;
}

.rs-mega-tab-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 20px;
    font-size: 13.5px;
    color: #555;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.1s, color 0.12s, border-color 0.12s;
}
.rs-mega-tab-btn:hover { background: #f0f5ff; color: #0066FF; }
.rs-mega-tab-btn.is-active {
    background: #f0f5ff;
    color: #0066FF;
    font-weight: 600;
    border-left-color: #0066FF;
}

.rs-mega-tab-panels { padding: 24px 32px; }

.rs-mega-tab-panel { display: none; }
.rs-mega-tab-panel.is-active { display: block; }

.rs-mega-tab-city { font-size: 17px; font-weight: 700; color: #0A1628; margin-bottom: 3px; }
.rs-mega-tab-hint { font-size: 11.5px; color: #aaa; margin-bottom: 18px; }

.rs-mega-tab-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
}

.rs-mega-tab-col-head {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #555;
    font-weight: 700;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 2px solid #0066FF20;
}

.rs-mega-tab-col a {
    display: block;
    font-size: 13px;
    color: #555;
    padding: 4px 0;
    transition: color 0.12s, padding-left 0.12s;
}
.rs-mega-tab-col a:hover { color: #0066FF; padding-left: 3px; }
.rs-mega-tab-col.is-types a:hover { color: #FF6B00; padding-left: 0; }

.rs-mega-tab-all {
    display: inline-block;
    margin-top: 16px;
    font-size: 12.5px;
    color: #0066FF;
    font-weight: 500;
    border-top: 1px solid #eee;
    padding-top: 12px;
    width: 100%;
}

/* ============================================================
   LOGO — HTML wordmark (Poppins loaded, crisp at all sizes)
   ============================================================ */
.rs-logo {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    flex-shrink: 0;
}
.rs-logo img { display: block; }
.rs-logo-text {
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.6px;
    line-height: 1;
    white-space: nowrap;
}
.rs-logo-rental { color: #0066FF; }
.rs-logo-spaces { color: #FF6B00; }

/* ============================================================
   MOBILE RESPONSIVENESS — comprehensive fixes
   ============================================================ */

/* ── Viewport meta safety: prevent horizontal overflow ── */
html, body { overflow-x: hidden; width: 100%; }

/* ── Nav: fix tablet gap (768–1023px) where CTA shows but no nav links ── */
@media (min-width: 768px) and (max-width: 1023px) {
    .rs-nav-cta { gap: 0.5rem; }
    .rs-nav-cta .rs-btn { padding: 0.4rem 0.875rem; font-size: 0.8rem; }
}

/* ── Mobile toggle visible below 1024px (not 768px) to keep nav consistent ── */
@media (min-width: 768px) and (max-width: 1023px) {
    .rs-mobile-toggle { display: flex; }
}

/* ── Mobile menu: better touch targets ── */
@media (max-width: 767px) {
    .rs-mobile-menu a {
        padding: 0.75rem 0.875rem;
        font-size: 0.95rem;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .rs-mobile-cta {
        display: flex;
        justify-content: center;
        margin-top: 0.75rem;
    }
    .rs-mobile-cta.rs-btn {
        display: flex;
        width: 100%;
        justify-content: center;
    }
}

/* ── Property card grid: 1 col mobile, 2 col tablet, 3 col desktop ── */
@media (max-width: 639px) {
    .rs-grid-3 { grid-template-columns: 1fr; }
    .rs-grid-2 { grid-template-columns: 1fr; }
}

/* ── Property card image: slightly smaller on mobile ── */
@media (max-width: 480px) {
    .rs-property-img { height: 180px; }
}

/* ── Minimum font sizes on mobile (nothing under 14px / 0.875rem) ── */
@media (max-width: 767px) {
    /* Spec labels, gallery counter, badges, meta text — bump to 14px */
    .rs-spec-label { font-size: 0.875rem; }
    .rs-gallery-counter { font-size: 0.875rem; }
    .rs-property-badge { font-size: 0.875rem; padding: 0.3rem 0.75rem; }
    .rs-trust-item span { font-size: 0.875rem; }
    .rs-trust-item strong { font-size: 1.1rem; }
    .rs-suggestion-meta { font-size: 0.875rem; }
    .rs-property-location { font-size: 0.875rem; }
    .rs-tag { font-size: 0.8125rem; }
    .rs-breadcrumb-list { font-size: 0.875rem; }
    .rs-seo-content p { font-size: 0.9rem; }
}

/* ── Search box: stack cleanly on mobile ── */
@media (max-width: 600px) {
    .rs-search-tabs {
        gap: 0.375rem;
    }
    .rs-search-tab {
        flex: 1;
        padding: 0.4rem 0.5rem;
        font-size: 0.8rem;
        text-align: center;
    }
    .rs-search-row {
        flex-direction: column;
        gap: 0.625rem;
    }
    .rs-search-location {
        min-width: unset;
        width: 100%;
    }
    .rs-search-select {
        width: 100%;
        min-width: unset;
    }
    .rs-search-btn {
        width: 100%;
        padding: 0.75rem;
        font-size: 1rem;
    }
}

/* ── Hero: smaller font on small screens ── */
@media (max-width: 479px) {
    .rs-hero-title { font-size: 1.75rem !important; }
    .rs-hero-subtitle { font-size: 0.9375rem; }
    .rs-hero { padding: 2.5rem 0 2rem; }
}
@media (min-width: 480px) and (max-width: 767px) {
    .rs-hero-title { font-size: 2rem !important; }
}

/* ── Trust bar: wrap gracefully on mobile ── */
@media (max-width: 479px) {
    .rs-trust-items {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem 0.5rem;
        text-align: center;
    }
    .rs-trust-divider { display: none; }
}

/* ── Property types grid (rs-grid-4): 2 col on mobile ── */
/* Already 2-col by default — just ensure text isn't clipped */
@media (max-width: 479px) {
    .rs-type-label { font-size: 0.8rem; padding: 0.5rem 0.5rem; }
    .rs-type-img { height: 80px; }
}

/* ── Cities grid: 2 col on very small screens ── */
@media (max-width: 479px) {
    .rs-cities-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Section titles: scale down on mobile ── */
@media (max-width: 767px) {
    .rs-section-title { font-size: 1.375rem; }
    .rs-section-subtitle { font-size: 0.9rem; }
    .rs-section { padding: 2rem 0; }
}

/* ── Partners card: better mobile layout ── */
@media (max-width: 600px) {
    .rs-partners-card {
        padding: 1.5rem;
        gap: 1rem;
        flex-direction: column;
        align-items: flex-start;
    }
    .rs-partners-icon { font-size: 2.5rem; }
    .rs-partners-content h2 { font-size: 1.15rem; }
    .rs-partners-content p { font-size: 0.875rem; }
}

/* ── CTA section: stack buttons vertically on small screens ── */
@media (max-width: 479px) {
    .rs-cta-card { padding: 2rem 1.25rem; }
    .rs-cta-content h2 { font-size: 1.375rem; }
    .rs-cta-content > div { flex-direction: column; gap: 0.75rem; }
    .rs-cta-content .rs-btn { width: 100%; justify-content: center; }
}

/* ── Featured listings header: stack on mobile ── */
@media (max-width: 479px) {
    .rs-section > .container > div[style*="display:flex"] {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ── Property detail page ── */

/* Gallery: smaller fixed height on mobile */
@media (max-width: 767px) {
    .rs-gallery-main { height: 240px; border-radius: var(--rs-radius); }
    .rs-gallery-placeholder { height: 240px; }
    .rs-gallery-prev, .rs-gallery-next { width: 36px; height: 36px; font-size: 1.1rem; }
}
@media (max-width: 479px) {
    .rs-gallery-main { height: 200px; }
    .rs-gallery-placeholder { height: 200px; }
}

/* Gallery thumbs: horizontal scroll — already set, ensure no overflow */
.rs-gallery-thumbs {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.rs-gallery-thumbs::-webkit-scrollbar { display: none; }
@media (max-width: 767px) {
    .rs-gallery-thumb { width: 60px; height: 50px; }
}

/* Detail header: always stack title above price on mobile */
@media (max-width: 767px) {
    .rs-detail-header {
        flex-direction: column;
        gap: 0.75rem;
    }
    .rs-detail-price-box { order: -1; }
    .rs-detail-title { font-size: 1.15rem; }
    .rs-detail-price { font-size: 1.5rem; }
}

/* Specs grid: 2 col on mobile is fine, but reduce padding */
@media (max-width: 479px) {
    .rs-detail-specs { padding: 1rem; gap: 0.625rem; }
    .rs-spec-value { font-size: 0.875rem; }
}

/* Amenities: 2 col is fine on mobile */
@media (max-width: 479px) {
    .rs-amenity-item { font-size: 0.875rem; }
}

/* Contact card: on mobile, add a sticky "Contact Owner" bar at the bottom */
@media (max-width: 1023px) {
    .rs-contact-card { position: static; }
}

/* ── Sticky contact bar on mobile property detail page ── */
@media (max-width: 1023px) {
    /* Sits ABOVE the global .rs-bottomnav, which already owns the bottom 66px of
       every page. This was bottom:0, which stacked the two bars on the same strip —
       and at z-index 90 over the nav's 40 it swallowed every tap, so all five nav
       items were unreachable on every property page below 1024px. */
    .rs-mobile-contact-bar {
        display: flex;
        position: fixed;
        bottom: calc(66px + env(safe-area-inset-bottom, 0px));
        left: 0;
        right: 0;
        z-index: 90;
        background: white;
        border-top: 1px solid var(--rs-border);
        padding: 0.75rem 1rem;
        gap: 0.75rem;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
    }
    .rs-mobile-contact-bar .rs-btn { flex: 1; min-height: 44px; }
    /* Add bottom padding to body so content doesn't hide behind the bar */
    .rs-detail-has-mobile-bar {
        padding-bottom: 80px;
    }
    /* The rule above never applied: .rs-detail-has-mobile-bar also carries an
       inline padding-bottom, which wins. Clear both stacked bars (66px nav +
       69px contact bar) from the body instead, where nothing competes. */
    body.rs-body:has(.rs-mobile-contact-bar) {
        padding-bottom: calc(135px + env(safe-area-inset-bottom, 0px));
    }
}
@media (min-width: 1024px) {
    .rs-mobile-contact-bar { display: none !important; }
}

/* ── Search page: filter improvements on mobile ── */
@media (max-width: 1023px) {
    .rs-search-filters { margin-bottom: 0.75rem; }
    .rs-filter-toggle {
        padding: 0.625rem 0;
        font-size: 0.95rem;
        min-height: 44px;
    }
    .rs-filter-body.open {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--rs-border);
    }
}

@media (max-width: 767px) {
    .rs-search-h1 { font-size: 1.2rem; }
    .rs-filter-range {
        gap: 0.375rem;
    }
    .rs-filter-range .rs-input {
        min-width: 0;
        padding: 0.5rem 0.5rem;
        font-size: 0.875rem;
    }
    .rs-filter-checkbox { font-size: 0.9rem; }
    .rs-filter-checkbox input[type="checkbox"] {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }
}

/* ── Auth pages: full-width card on very small screens ── */
@media (max-width: 479px) {
    .rs-auth-right { padding: 1.5rem 0.75rem; }
    .rs-auth-card { padding: 1.5rem 1.25rem; border-radius: var(--rs-radius-lg); }
    .rs-auth-card-title { font-size: 1.25rem; }
    .rs-role-label { padding: 0.625rem 0.375rem; font-size: 0.75rem; }
    .rs-role-icon { font-size: 1.25rem; }
}

/* ── City/Locality page: section block spacing on mobile ── */
@media (max-width: 767px) {
    .rs-city-hero { padding: 1.5rem 0 1rem; }
    .rs-city-h1 { font-size: 1.375rem; }
    .rs-city-subtitle { font-size: 0.9rem; }
    .rs-section-block { margin-bottom: 2rem; }
    .rs-block-title { font-size: 1rem; }
    .rs-locality-name { font-size: 0.875rem; }
    .rs-locality-count { font-size: 0.75rem; }
}

/* On very small screens locality grid is 1 col */
@media (max-width: 479px) {
    .rs-locality-grid { grid-template-columns: 1fr; }
}

/* ── General: touch-friendly tap targets ── */
@media (max-width: 1023px) {
    .rs-btn { min-height: 44px; }
    .rs-btn-sm { min-height: 36px; }
    .rs-input, .rs-select, .rs-textarea { min-height: 44px; font-size: 16px; /* prevents iOS zoom */ }
    .rs-search-input { font-size: 16px; }
}

/* ── Footer: better mobile spacing ── */
@media (max-width: 767px) {
    .rs-footer { padding: 2rem 0 1rem; margin-top: 3rem; }
    .rs-footer-grid { gap: 1.5rem; }
    .rs-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.375rem;
    }
}

/* ── Cards: prevent content from overflowing narrow screens ── */
@media (max-width: 767px) {
    .rs-card { padding: 1.25rem; }
    .rs-card-header { gap: 0.75rem; }
    .rs-card-title { font-size: 1rem; }
}

/* ── Section heading + view-all flex on mobile ── */
@media (max-width: 479px) {
    .rs-view-all-link { font-size: 0.8rem; }
}

/* ── Mobile app-shell bottom nav ── */
.rs-bottomnav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 40;
    background: var(--rs-bg-white);
    border-top: 1px solid var(--rs-border);
    padding: 0.375rem 0.25rem calc(0.375rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
}
@media (max-width: 1023px) {
    .rs-bottomnav { display: flex; align-items: flex-start; justify-content: space-around; }
    body.rs-body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}
.rs-bottomnav-item {
    display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
    color: var(--rs-text-light); font-size: 0.65rem; font-weight: 600;
    padding: 0.25rem 0.4rem; text-decoration: none; min-width: 52px;
}
.rs-bottomnav-item:hover, .rs-bottomnav-item.is-active { color: var(--rs-primary); }
.rs-bottomnav-cta { margin-top: -1.1rem; }
.rs-bottomnav-cta-circle {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--rs-accent); color: #fff;
    box-shadow: 0 3px 8px rgba(249,115,22,0.35);
}
.rs-bottomnav-cta span:last-child { color: var(--rs-accent); }
.rs-bottomnav-avatar {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--rs-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700;
}

/* ── Market rent ranges table (city + locality pages) ─────────────────────── */
.rs-rent-table-intro {
    color: var(--rs-text-light);
    margin: 0 0 1rem;
    font-size: .95rem;
}
.rs-rent-table-wrap {
    overflow-x: auto;                 /* narrow phones scroll the table, not the page */
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--rs-border);
    border-radius: 10px;
    background: var(--rs-bg-white);
}
.rs-rent-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
    min-width: 30rem;
}
.rs-rent-table thead th {
    text-align: left;
    font-family: var(--rs-font-heading);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--rs-text-light);
    background: var(--rs-bg);
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--rs-border);
    white-space: nowrap;
}
.rs-rent-table tbody th {
    text-align: left;
    font-weight: 600;
    color: var(--rs-text);
}
.rs-rent-table tbody th,
.rs-rent-table tbody td {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--rs-border);
    white-space: nowrap;
}
.rs-rent-table tbody tr:last-child th,
.rs-rent-table tbody tr:last-child td {
    border-bottom: 0;
}
.rs-rent-table tbody tr:hover {
    background: var(--rs-bg);
}
.rs-rent-table tbody td:first-of-type {
    font-variant-numeric: tabular-nums;   /* rent columns line up digit-for-digit */
    font-weight: 600;
    color: var(--rs-primary);
}
.rs-rent-na {
    color: var(--rs-text-lighter);
    font-weight: 400;
}
.rs-rent-table-note {
    color: var(--rs-text-lighter);
    font-size: .85rem;
    margin: .75rem 0 0;
}

/* ── Legal pages (privacy policy, terms of service) ───────────────────────── */
.rs-legal { max-width: 46rem; }
.rs-legal-head { margin-bottom: 2rem; }
.rs-legal-head h1 { font-family: var(--rs-font-heading); margin: 0 0 .35rem; }
.rs-legal-meta { color: var(--rs-text-light); font-size: .9rem; margin: 0; }
.rs-legal-callout {
    background: var(--rs-bg);
    border-left: 3px solid var(--rs-accent);
    border-radius: 0 8px 8px 0;
    padding: 1rem 1.1rem;
    margin-bottom: 2rem;
    font-size: .95rem;
    line-height: 1.65;
}
.rs-legal-body h2 {
    font-family: var(--rs-font-heading);
    font-size: 1.1rem;
    margin: 2rem 0 .6rem;
    padding-top: .35rem;
    border-top: 1px solid var(--rs-border);
}
.rs-legal-body p, .rs-legal-body li { line-height: 1.7; color: var(--rs-text); }
.rs-legal-body ul { padding-left: 1.15rem; margin: .5rem 0 1rem; }
.rs-legal-body li { margin-bottom: .45rem; }
.rs-legal-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9rem; display: block; overflow-x: auto; }
.rs-legal-table th, .rs-legal-table td {
    text-align: left; padding: .6rem .75rem;
    border-bottom: 1px solid var(--rs-border); vertical-align: top;
}
.rs-legal-table th { background: var(--rs-bg); font-weight: 600; white-space: nowrap; }
.rs-legal-related { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rs-border); }

/* ── Mobile footer: bottom nav is the navigation, footer is just credits ──────
   The desktop footer renders 1,022px tall on a 812px phone — a full screen of
   link columns sitting above a bottom nav that already navigates. Below 1024px
   the columns collapse out and a compact essentials row carries the legal and
   company pages. The columns stay in the DOM, so crawling is unaffected and the
   same city links remain in the nav at every viewport. */
.rs-footer-mobile-links { display: none; }

@media (max-width: 1023px) {
    .rs-footer-grid > .rs-footer-col { display: none; }
    .rs-footer-grid {
        grid-template-columns: 1fr;
        gap: 0;
        padding-bottom: .25rem;
    }
    .rs-footer-brand p { font-size: .825rem; }

    .rs-footer-mobile-links {
        display: flex;
        flex-wrap: wrap;
        gap: .35rem 1.1rem;
        padding: 1rem 0 .25rem;
        border-top: 1px solid rgba(255, 255, 255, .1);
    }
    .rs-footer-mobile-links a {
        color: rgba(255, 255, 255, .72);
        font-size: .85rem;
        text-decoration: none;
        padding: .2rem 0;          /* keeps the tap target reasonable */
    }
    .rs-footer-mobile-links a:hover,
    .rs-footer-mobile-links a:focus-visible { color: #fff; }

    /* The last-updated stamp is a maintenance detail, not something a renter needs. */
    .rs-footer-last-updated { display: none; }
}

/* Residential vs commercial split inside the rent-range block */
.rs-rent-table-caption {
    font-family: var(--rs-font-heading);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--rs-text-light);
    margin: 1.25rem 0 .5rem;
}
.rs-rent-table-caption:first-of-type { margin-top: 0; }

/* ── Locality / area grid ─────────────────────────────────────────────────────
   These classes were styled inside city.php only, so locality.php used them with
   no CSS at all and the "Areas in {locality}" block rendered as a run-on
   paragraph. Shared here so every page using them looks the same. */
.rs-locality-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem;
}
@media (min-width: 640px)  { .rs-locality-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .rs-locality-grid { grid-template-columns: repeat(4, 1fr); } }
.rs-locality-card {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .6rem .75rem;
    background: var(--rs-bg-white);
    border: 1px solid var(--rs-border);
    border-radius: 8px;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.rs-locality-card:hover,
.rs-locality-card:focus-visible {
    border-color: var(--rs-primary);
    box-shadow: var(--rs-shadow-sm, 0 1px 4px rgba(0,0,0,.07));
    transform: translateY(-1px);
}
.rs-locality-name  { font-weight: 600; font-size: .9rem; color: var(--rs-text); }
.rs-locality-count { font-size: .78rem; color: var(--rs-text-light); }

/* Filter box — only rendered when a locality has enough areas to need it */
.rs-area-filter {
    display: flex; align-items: center; gap: .5rem;
    margin: 0 0 .85rem;
}
.rs-area-filter input {
    flex: 1 1 auto; max-width: 22rem;
    padding: .5rem .75rem;
    border: 1px solid var(--rs-border);
    border-radius: 8px;
    font-size: .9rem;
    font-family: inherit;
}
.rs-area-filter input:focus-visible {
    outline: 2px solid var(--rs-primary); outline-offset: 1px; border-color: var(--rs-primary);
}
.rs-area-filter-count { font-size: .82rem; color: var(--rs-text-light); white-space: nowrap; }
.rs-area-empty { color: var(--rs-text-light); font-size: .9rem; padding: .5rem 0; }

/* Screen-reader-only label — the filter input needs a name, not a placeholder. */
.rs-visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Alias line under a search H1 — names the other words for the same product. */
.rs-search-aliases {
    font-size: .88rem;
    color: var(--rs-text-light);
    margin: .15rem 0 0;
}

.rs-search-help {
    font-size: .92rem;
    line-height: 1.6;
    color: var(--rs-text-light);
    margin: .6rem 0 0;
    max-width: 62ch;
}

/* ── Header mega menu (Residential / Commercial) ──────────────────────────────
   Cities down the left act as tabs; hovering one swaps the locality panel on the
   right. Generated from live inventory, so it cannot drift out of sync. */
.rs-has-mega { position: relative; }
.rs-mega--tabbed {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    /* The legacy .rs-mega sets right:0, stretching this to the full viewport.
       Reset it and let the grid decide the width. */
    right: auto;
    width: max-content;
    max-width: min(56rem, calc(100vw - 2rem));
    border-top: 0;
    background: var(--rs-bg-white);
    border: 1px solid var(--rs-border);
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(0,0,0,.12);
    z-index: 60;
    overflow: hidden;
}
.rs-mega--tabbed .rs-mega-inner {
    display: grid;
    grid-template-columns: 13rem minmax(30rem, 42rem);
}
.rs-mega-cities {
    background: var(--rs-bg);
    border-right: 1px solid var(--rs-border);
    padding: .6rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.rs-mega-cities .rs-mega-col-head {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--rs-text-lighter);
    padding: .3rem .55rem .5rem;
}
.rs-mega-city {
    display: block;
    width: 100%;
    text-align: left;
    padding: .45rem .55rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font: inherit;
    font-size: .88rem;
    color: var(--rs-text);
    cursor: pointer;
    text-decoration: none;
}
.rs-mega-city:hover,
.rs-mega-city:focus-visible { background: rgba(0,0,0,.04); }
.rs-mega-city.is-active {
    background: var(--rs-bg-white);
    color: var(--rs-primary);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--rs-primary);
}
.rs-mega-city--all { color: var(--rs-text-light); font-size: .82rem; margin-top: .35rem; }
.rs-mega-panels { padding: .85rem 1rem 1rem; }
.rs-mega-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .5rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--rs-border);
}
.rs-mega-panel-head strong { font-size: .9rem; }
.rs-mega-panel-head a { font-size: .82rem; color: var(--rs-primary); text-decoration: none; white-space: nowrap; }
.rs-mega-panel-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
.rs-mega-panel-col a {
    display: block;
    padding: .3rem 0;
    font-size: .85rem;
    color: var(--rs-text);
    text-decoration: none;
}
.rs-mega-panel-col a:hover,
.rs-mega-panel-col a:focus-visible { color: var(--rs-primary); text-decoration: underline; }

/* The mega menu is desktop-only; the mobile menu carries the same links. */
@media (max-width: 1023px) { .rs-mega--tabbed { display: none !important; } }