/* ==========================================================================
   LISTING SEARCH PAGE — Snalažljivi Roditelji
   ==========================================================================
   VISUAL STYLING ONLY. No layout/sticky/flex overrides.
   HivePress handles sidebar sticky via data-component="sticky".
   
   IMPORTANT: Disable the WPCode snippet "New Design of the Sidebar 
   Listing Filter" after activating this — they style the same elements.
   ========================================================================== */


/* ==========================================================================
   1. PAGE BACKGROUND
   ========================================================================== */
.hp-template--listings-view-page {
    background: var(--sr-bg) !important;
}


/* ==========================================================================
   2. SEARCH BAR — Rounded modern style
   ========================================================================== */
.hp-template--listings-view-page .hp-form--listing-search {
    background: #fff !important;
    border: 1px solid var(--sr-border) !important;
    border-radius: 16px !important;
    padding: 10px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 24px !important;
}

.hp-template--listings-view-page .hp-form--listing-search .hp-form__button {
    background-color: var(--sr-teal) !important;
    background-image: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
}

.hp-template--listings-view-page .hp-form--listing-search .hp-form__button:hover {
    background-color: var(--sr-teal-dark) !important;
}


/* ==========================================================================
   3. MAP — Rounded corners, landscape aspect ratio
   ========================================================================== */
.hp-template--listings-view-page .hp-map {
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid var(--sr-border) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 24px !important;
    height: 350px !important;
    max-height: 350px !important;
}

/* Also target the inner map container */
.hp-template--listings-view-page .hp-map > div {
    height: 350px !important;
}


/* ==========================================================================
   4. FILTER SIDEBAR — Visual styling ONLY (no sticky/layout changes)
   ========================================================================== */

/* Filter card appearance */
.widget_hivepress_listing_filter {
    background-color: #fff !important;
    padding: 28px !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #e5e7eb !important;
}

@media (max-width: 767px) {
    .widget_hivepress_listing_filter {
        padding: 20px !important;
        border-radius: 12px !important;
    }
}

/* Field Labels */
.hp-form--listing-filter .hp-field__label {
    color: #374151 !important;
    font-family: var(--sr-font-body) !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 14px !important;
}

/* All label text inside filter */
.hp-form--listing-filter label {
    font-size: 15px !important;
    color: #374151 !important;
    font-family: var(--sr-font-body) !important;
    cursor: pointer !important;
}

/* Inputs & Dropdowns */
.hp-form--listing-filter input[type="text"],
.hp-form--listing-filter input[type="search"],
.hp-form--listing-filter select {
    background-color: #f9f9f9 !important;
    border: 1px solid #eee !important;
    border-radius: 10px !important;
    padding: 12px 15px !important;
    font-size: 15px !important;
    font-family: var(--sr-font-body) !important;
    color: #374151 !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
}

.hp-form--listing-filter input[type="text"]:focus-visible,
.hp-form--listing-filter select:focus-visible {
    border-color: #1a9e8f !important;
    background-color: #fff !important;
    outline: 2px solid #1a9e8f !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(26, 158, 143, 0.15) !important;
}

/* Custom Checkboxes */
.hp-form--listing-filter input[type="checkbox"],
.hp-form--listing-filter input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    border: 2px solid #ddd !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    cursor: pointer !important;
    position: relative !important;
    margin-right: 10px !important;
    transition: all 0.2s ease !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

.hp-form--listing-filter input[type="radio"] {
    border-radius: 50% !important;
}

.hp-form--listing-filter input[type="checkbox"]:checked,
.hp-form--listing-filter input[type="radio"]:checked {
    background-color: #1a9e8f !important;
    border-color: #1a9e8f !important;
}

.hp-form--listing-filter input[type="checkbox"]:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 6px !important;
    top: 2px !important;
    width: 5px !important;
    height: 10px !important;
    border: solid white !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

.hp-form--listing-filter input[type="radio"]:checked::after {
    content: '' !important;
    width: 8px !important;
    height: 8px !important;
    background-color: white !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.hp-form--listing-filter input[type="checkbox"]:hover,
.hp-form--listing-filter input[type="radio"]:hover {
    border-color: #1a9e8f !important;
}

/* Number inputs (price range) */
.hp-form--listing-filter input[type="number"] {
    background-color: #f9f9f9 !important;
    border: 1px solid #eee !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    font-size: 15px !important;
    font-family: var(--sr-font-body) !important;
    color: #374151 !important;
    text-align: center !important;
}

/* Range slider */
.hp-form--listing-filter input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 6px !important;
    border-radius: 3px !important;
    background: #eee !important;
    outline: none !important;
    margin: 12px 0 !important;
}

.hp-form--listing-filter input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: #1a9e8f !important;
    cursor: pointer !important;
    border: 3px solid #fff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* Filter button */
.hp-form--listing-filter .hp-form__footer button {
    width: 100% !important;
    background-color: #374151 !important;
    background-image: none !important;
    color: white !important;
    border-radius: 50px !important;
    padding: 16px !important;
    font-family: var(--sr-font-body) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
}

.hp-form--listing-filter .hp-form__footer button:hover {
    background-color: #1a9e8f !important;
    transform: translateY(-2px) !important;
}

.hp-form--listing-filter .hp-form__footer button:focus-visible {
    outline: 3px solid rgba(26, 158, 143, 0.5) !important;
    outline-offset: 2px !important;
}


/* ==========================================================================
   5. RESULTS BAR
   ========================================================================== */
.hp-template--listings-view-page .hp-result-count {
    font-family: var(--sr-font-body) !important;
    font-size: 15px !important;
    color: var(--sr-text-light) !important;
    font-weight: 600 !important;
}

.hp-form--listing-sort select {
    font-family: var(--sr-font-body) !important;
    border: 1px solid var(--sr-border) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    background: #fff !important;
}


/* ==========================================================================
   6. LISTING CARDS GRID — 2 columns
   ========================================================================== */

/* Add gap between sidebar and content */
.hp-template--listings-view-page .hp-page__content {
    padding-left: 24px !important;
}

/* Force 2-column grid */
.hp-template--listings-view-page .hp-listings,
.hp-template--listings-view-page .hp-listings .hp-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
}

/* Remove HivePress column constraints */
.hp-template--listings-view-page .hp-listings [class*="hp-col"] {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    .hp-template--listings-view-page .hp-listings,
    .hp-template--listings-view-page .hp-listings .hp-row {
        grid-template-columns: 1fr !important;
    }

    .hp-template--listings-view-page .hp-page__content {
        padding-left: 0 !important;
    }
}


/* ==========================================================================
   7. LISTING CARDS — Enhanced for search page
   ========================================================================== */
.hp-template--listings-view-page .hp-listing--view-block {
    border-radius: 16px !important;
    border: 1px solid var(--sr-border) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    height: auto !important;
    min-height: auto !important;
}

.hp-template--listings-view-page .hp-listing--view-block:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-4px) !important;
}

.hp-template--listings-view-page .hp-listing--view-block .hp-listing__image {
    height: 200px !important;
    overflow: hidden !important;
}

.hp-template--listings-view-page .hp-listing--view-block .hp-listing__image img {
    transition: transform 0.5s ease !important;
}

.hp-template--listings-view-page .hp-listing--view-block:hover .hp-listing__image img {
    transform: scale(1.05) !important;
}


/* ==========================================================================
   8. PAGINATION
   ========================================================================== */
.hp-template--listings-view-page .pagination {
    margin-top: 32px !important;
}

.hp-template--listings-view-page .pagination > span:not(.dots),
.hp-template--listings-view-page .pagination .nav-links > span:not(.dots),
.hp-template--listings-view-page .pagination ul li span.current:not(.dots) {
    border-color: var(--sr-teal) !important;
    background: var(--sr-teal) !important;
    color: #fff !important;
}


/* ==========================================================================
   9. REDUCE MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .hp-form--listing-filter input,
    .hp-form--listing-filter button,
    .hp-form--listing-filter select,
    .hp-template--listings-view-page .hp-listing--view-block {
        transition: none !important;
    }

    .hp-form--listing-filter .hp-form__footer button:hover,
    .hp-template--listings-view-page .hp-listing--view-block:hover {
        transform: none !important;
    }
}