/**
 * Property Search Widget v2 - Responsive Styles
 * 
 * @package EstatifyMLS
 * @version 2.0.0
 */

/* ===== Mobile First (Default) ===== */
@media screen and (max-width: 767px) {
    .emls-property-search-v2 {
        --emls-v2-columns: 1;
    }

    .emls-v2-field {
        flex: 0 0 var(--emls-v2-field-width-mobile, 100%) !important;
        width: var(--emls-v2-field-width-mobile, 100%) !important;
        max-width: var(--emls-v2-field-width-mobile, 100%) !important;
        min-width: 0 !important;
    }

    .emls-v2-search__fields {
        flex-direction: column;
    }

    .emls-v2-dropdown__menu {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 70vh;
        margin: 0;
        border-radius: 12px 12px 0 0;
        animation: emls-v2-slide-up 250ms ease-out;
    }

    @keyframes emls-v2-slide-up {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }

    .emls-v2-range__inputs {
        flex-direction: column;
    }

    .emls-v2-results__grid {
        grid-template-columns: 1fr;
        gap: var(--emls-v2-gap-md);
    }

    .emls-v2-pagination {
        gap: var(--emls-v2-gap-xs);
    }

    .emls-v2-pagination__link,
    .emls-v2-pagination__current {
        min-width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .emls-v2-property-card img {
        height: 220px;
    }
}

/* ===== Tablet (768px - 1024px) ===== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .emls-property-search-v2 {
        --emls-v2-columns: 2;
    }

    .emls-v2-field {
        flex: 0 0 var(--emls-v2-field-width-tablet, 50%) !important;
        width: var(--emls-v2-field-width-tablet, 50%) !important;
        max-width: var(--emls-v2-field-width-tablet, 50%) !important;
        min-width: 0 !important;
    }

    .emls-v2-field--submit {
        flex: 0 0 var(--emls-v2-field-width-tablet, 100%) !important;
        width: var(--emls-v2-field-width-tablet, 100%) !important;
        max-width: var(--emls-v2-field-width-tablet, 100%) !important;
    }

    .emls-v2-results__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Desktop (> 1024px) ===== */
@media screen and (min-width: 1025px) {
    .emls-property-search-v2 {
        --emls-v2-columns: var(--emls-v2-columns-desktop, 3);
    }

    /* Horizontal layout option */
    .emls-v2-search--horizontal .emls-v2-search__form {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .emls-v2-search--horizontal .emls-v2-search__fields {
        flex: 1;
    }

    .emls-v2-search--horizontal .emls-v2-field {
        flex: 0 0 var(--emls-v2-field-width, auto);
        min-width: 0;
    }

    .emls-v2-search--horizontal .emls-v2-field--submit {
        flex: 0 0 var(--emls-v2-field-width, auto);
        width: var(--emls-v2-field-width, auto);
    }

    /* Compact field widths */
    .emls-v2-field--small {
        flex: 0 1 150px;
    }

    .emls-v2-field--medium {
        flex: 0 1 250px;
    }

    .emls-v2-field--large {
        flex: 0 1 350px;
    }
}

/* ===== Large Desktop (> 1440px) ===== */
@media screen and (min-width: 1440px) {
    .emls-v2-results__grid {
        gap: var(--emls-v2-gap-lg);
    }
}

/* ===== High DPI / Retina Displays ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .emls-v2-spinner__icon {
        border-width: 2px;
    }
}

/* ===== Print Styles ===== */
@media print {
    .emls-property-search-v2 {
        display: none;
    }
}

/* ===== Dark Mode Support (Optional) ===== */
@media (prefers-color-scheme: dark) {
    .emls-property-search-v2 {
        --emls-v2-text: #e0e0e0;
        --emls-v2-text-light: #a0a0a0;
        --emls-v2-bg: #2a2a2a;
        --emls-v2-bg-hover: #3a3a3a;
        --emls-v2-bg-alt: #333333;
        --emls-v2-border: #444444;
    }

    .emls-v2-field__input,
    .emls-v2-field__select,
    .emls-v2-dropdown__trigger {
        background: var(--emls-v2-bg);
        border-color: var(--emls-v2-border);
        color: var(--emls-v2-text);
    }

    .emls-v2-dropdown__menu {
        background: var(--emls-v2-bg);
        border-color: var(--emls-v2-border);
    }

    .emls-v2-dropdown__option:hover {
        background: var(--emls-v2-bg-hover);
    }

    .emls-v2-range {
        background: var(--emls-v2-bg-alt);
    }

    .emls-v2-range .ui-slider {
        background: var(--emls-v2-border);
    }

    .emls-v2-property-card {
        background: var(--emls-v2-bg);
        border-color: var(--emls-v2-border);
    }

    .emls-v2-pagination__link {
        background: var(--emls-v2-bg);
        border-color: var(--emls-v2-border);
        color: var(--emls-v2-text);
    }

    .emls-v2-pagination__link:hover {
        background: var(--emls-v2-bg-hover);
    }
}