/* Mobile floating actions: keep filter, Quizzy and quick actions separated. */
@media (max-width: 768px) {
    .quiz-hero-banner {
        display: none !important;
    }

    .mobile-filter-btn {
        left: 16px;
        right: auto;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        width: 52px;
        height: 52px;
        padding: 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 20px rgba(220, 38, 38, 0.34);
    }

    .mobile-filter-btn-label {
        display: none;
    }

    .mobile-filter-btn svg {
        width: 22px;
        height: 22px;
    }

    .quiz-float-btn {
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        width: 52px;
        height: 52px;
        padding: 9px;
        justify-content: center;
    }

    .quiz-float-btn .quizzy-robot-icon {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 640px) {
    .currency-bar-inner {
        min-height: 38px;
        padding: 5px 8px;
        flex-wrap: nowrap;
        gap: 6px;
    }

    .currency-rates-ticker {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        overflow: visible;
        flex: 1;
        min-width: 0;
        flex-wrap: nowrap;
    }

    .currency-rate-item {
        min-width: 0;
        gap: 2px;
        padding: 2px 0;
        flex-shrink: 1;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .currency-flag { font-size: 0.68rem; }
    .currency-code { font-size: 0.62rem; letter-spacing: 0; }
    .currency-value { font-size: 0.69rem; }
    .currency-selector { flex: 0 0 70px; min-width: 0; }
    .currency-selector select { width: 100%; padding: 3px 4px; font-size: 0.65rem; }
}

@media (max-width: 340px) {
    .currency-bar-inner { padding: 4px 6px; gap: 4px; }
    .currency-rates-ticker { gap: 3px; }
    .currency-flag { display: none; }
    .currency-selector { flex-basis: 64px; }
    .currency-selector select { font-size: 0.62rem; }
}

/* Keep the logo and menu inside very narrow phone headers. */
@media (max-width: 380px) {
    .header-logo {
        flex: 1 1 auto;
        min-width: 0;
    }

    .header-logo img {
        width: auto !important;
        max-width: calc(100vw - 84px) !important;
        height: auto !important;
        max-height: 45px;
    }

    .mobile-menu-btn {
        flex: 0 0 36px;
        justify-content: center;
    }
}

/* The off-canvas menu must cover every floating page action. */
@media (max-width: 767px) {
    body.mobile-menu-open .header,
    .header:has(.mobile-menu.active) {
        z-index: 10000;
    }
}

/* Property feature badges wrap instead of being clipped on narrow cards. */
@media (max-width: 768px) {
    .property-card .card-details-row {
        flex-wrap: wrap;
        min-width: 0;
        overflow: visible;
    }

    .property-card .card-details {
        width: 100%;
        min-width: 0;
        flex-wrap: wrap !important;
        overflow: visible;
    }

    .property-card .card-detail-badge {
        flex: 0 0 auto;
        max-width: 100%;
    }
}