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

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

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

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

h2 {
        font-size: 1.25rem;
}

h3 {
        font-size: 1.1rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ─── Reduce Animations for Performance ────────────────── */
@media (prefers-reduced-motion: reduce) {
        * {
                animation-duration: 0.01ms !important;
                transition-duration: 0.01ms !important;
        }
}