/*
 * Listdom Enhancer — Modern Directory Redesign
 * Primary: #e63946  |  Background: #ffffff  |  Text: #111111
 *
 * DEBUG: Add  body::before { content:"LSDE LOADED"; position:fixed; top:0;
 *        left:0; background:#e63946; color:#fff; padding:4px 8px; z-index:9999; }
 * to this file temporarily to confirm the stylesheet is loading.
 */

/* ══════════════════════════════════════════════════════════════
   0. GLOBAL VARIABLES
   ══════════════════════════════════════════════════════════════ */
:root {
    --lsde-red:          #e63946;
    --lsde-red-dark:     #c1121f;
    --lsde-red-light:    #fde8ea;
    --lsde-red-rgb:      230, 57, 70;
    --lsde-white:        #ffffff;
    --lsde-text:         #111111;
    --lsde-text-muted:   #6b7280;
    --lsde-border:       #e5e7eb;
    --lsde-input-bg:     #f9fafb;
    --lsde-radius:       10px;
    --lsde-radius-sm:    6px;
    --lsde-shadow:       0 1px 3px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
    --lsde-shadow-hover: 0 4px 12px rgba(230,57,70,.20);
    --lsde-trans:        all .15s ease;
}

/* ══════════════════════════════════════════════════════════════
   1. SEARCH WRAPPER — compact card
   ══════════════════════════════════════════════════════════════ */
.lsd-search {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif !important;
}

.lsd-search .lsd-search-row {
    background: var(--lsde-white) !important;
    border: 1px solid var(--lsde-border) !important;
    border-radius: var(--lsde-radius) !important;
    box-shadow: var(--lsde-shadow) !important;
    padding: 10px 12px !important;
    margin-bottom: 0 !important;
}

.lsd-search .lsd-search-form > .lsd-search-row:first-child {
    padding: 10px 12px !important;
}

/* "More options" toggle pill */
.lsd-search .lsd-search-form .lsd-search-row-more-options {
    background: var(--lsde-red-light) !important;
    border: 1px solid rgba(var(--lsde-red-rgb), .18) !important;
    border-top: none !important;
    border-radius: 0 0 var(--lsde-radius-sm) var(--lsde-radius-sm) !important;
    margin-top: -1px !important;
    padding: 4px 12px !important;
}

.lsd-search .lsd-search-form .lsd-search-row-more-options span,
.lsd-search .lsd-search-form .lsd-search-row-more-options span i {
    color: var(--lsde-red) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
}

/* ══════════════════════════════════════════════════════════════
   2. FILTER FIELDS — compact height + tighter gaps
   ══════════════════════════════════════════════════════════════ */
.lsd-search .lsd-search-row > .lsd-row {
    gap: 8px !important;
    align-items: flex-start !important;
}

.lsd-search .lsd-search-row > .lsd-row .lsd-search-filter {
    background: var(--lsde-input-bg) !important;
    border: 1px solid var(--lsde-border) !important;
    border-radius: var(--lsde-radius-sm) !important;
    color: var(--lsde-text) !important;
    min-height: 38px !important;
    padding: 3px 8px !important;
    transition: border-color .15s, box-shadow .15s !important;
}

.lsd-search .lsd-search-row > .lsd-row .lsd-search-filter:focus-within {
    border-color: var(--lsde-red) !important;
    box-shadow: 0 0 0 2px rgba(var(--lsde-red-rgb), .10) !important;
    background: var(--lsde-white) !important;
}

/* Labels — smaller, tighter */
.lsd-search .lsd-search-row label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--lsde-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
    margin-bottom: 2px !important;
    display: block !important;
}

/* Text inputs inside filters */
.lsd-search .lsd-search-row input[type="text"],
.lsd-search .lsd-search-row input[type="number"],
.lsd-search .lsd-search-row input[type="search"],
.lsd-search .lsd-search-row select {
    color: var(--lsde-text) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 13px !important;
    padding: 2px 0 !important;
}

.lsd-search .lsd-search-row input::placeholder {
    color: #b0b8c4 !important;
    font-size: 13px !important;
}

/* ── Category checkboxes — compact multi-column pill grid ── */
.lsd-search .lsd-search-row .lsd-hierarchy-list {
    gap: 4px 6px !important;
    padding: 2px 0 !important;
    margin: 0 !important;
}

.lsd-search .lsd-search-row .lsd-hierarchy-list li {
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
}

.lsd-search .lsd-search-row .lsd-search-checkbox-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 12px !important;
    color: var(--lsde-text) !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    background: var(--lsde-white) !important;
    border: 1px solid var(--lsde-border) !important;
    border-radius: 4px !important;
    padding: 3px 7px !important;
    transition: var(--lsde-trans) !important;
    line-height: 1.3 !important;
    user-select: none !important;
}

.lsd-search .lsd-search-row .lsd-search-checkbox-label:hover {
    border-color: rgba(var(--lsde-red-rgb), .4) !important;
    background: var(--lsde-red-light) !important;
    color: var(--lsde-red) !important;
}

.lsd-search .lsd-search-row .lsd-search-checkbox-label input[type="checkbox"] {
    width: 12px !important;
    height: 12px !important;
    accent-color: var(--lsde-red) !important;
    margin: 0 !important;
    cursor: pointer !important;
}

/* Checked pill state */
.lsd-search .lsd-search-row .lsd-search-checkbox-label:has(input:checked) {
    background: var(--lsde-red) !important;
    border-color: var(--lsde-red) !important;
    color: #fff !important;
}

.lsd-search .lsd-search-row .lsd-search-checkbox-label:has(input:checked) input {
    accent-color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════
   3. SELECT2 INSIDE SEARCH FORM
   ══════════════════════════════════════════════════════════════ */
.lsd-search .lsd-search-row .select2-container--default
    .select2-selection--single .select2-selection__rendered,
.lsd-search .lsd-search-row .select2-container--default
    .select2-selection--multiple .select2-selection__rendered {
    color: var(--lsde-text) !important;
    font-size: 13px !important;
    line-height: 32px !important;
}

.lsd-search .lsd-search-row .select2-container--default
    .select2-selection--single .select2-selection__placeholder {
    color: #b0b8c4 !important;
}

/* Selected tags */
.lsd-search .lsd-search-row .select2-container--default
    .select2-selection--multiple .select2-selection__rendered
    .select2-selection__choice {
    background: var(--lsde-red-light) !important;
    border: 1px solid rgba(var(--lsde-red-rgb), .25) !important;
    color: var(--lsde-red) !important;
    border-radius: 3px !important;
    font-size: 11px !important;
    padding: 1px 6px !important;
    margin: 1px 2px 1px 0 !important;
}

.lsd-search .lsd-search-row .select2-container--default
    .select2-selection--multiple .select2-selection__rendered
    .select2-selection__choice .select2-selection__choice__remove {
    color: var(--lsde-red) !important;
}

/* Dropdown panel */
.lsd-search .select2-dropdown {
    border: 1px solid var(--lsde-border) !important;
    border-radius: var(--lsde-radius-sm) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.10) !important;
    overflow: hidden;
}

.lsd-search .select2-results__option {
    color: var(--lsde-text) !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
}

.lsd-search .select2-results__option--highlighted[aria-selected] {
    background: var(--lsde-red-light) !important;
    color: var(--lsde-red) !important;
}

.lsd-search .select2-results__option[aria-selected="true"] {
    background: var(--lsde-red) !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════
   4. SUBMIT / SEARCH BUTTON
   ══════════════════════════════════════════════════════════════ */
button.lsd-search-button,
a.lsd-search-button {
    background: var(--lsde-red) !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--lsde-radius-sm) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .3px !important;
    padding: 8px 18px !important;
    box-shadow: 0 1px 6px rgba(var(--lsde-red-rgb), .30) !important;
    transition: var(--lsde-trans) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

button.lsd-search-button:hover,
button.lsd-search-button:focus,
a.lsd-search-button:hover,
a.lsd-search-button:focus {
    background: var(--lsde-red-dark) !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow: var(--lsde-shadow-hover) !important;
    transform: translateY(-1px);
}

button.lsd-search-button i,
a.lsd-search-button i {
    color: #fff !important;
}

/* Default-style overrides */
.lsd-search.lsd-search-default-style .lsd-search-row
    .lsd-search-buttons .lsd-search-buttons-submit .lsd-search-button,
.lsd-search .lsd-search-row
    .lsd-search-buttons .lsd-search-buttons-submit .lsd-search-button {
    background: var(--lsde-red) !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--lsde-radius-sm) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 8px 18px !important;
    box-shadow: 0 1px 6px rgba(var(--lsde-red-rgb), .30) !important;
}

.lsd-search.lsd-search-default-style .lsd-search-row
    .lsd-search-buttons .lsd-search-buttons-submit .lsd-search-button:hover,
.lsd-search .lsd-search-row
    .lsd-search-buttons .lsd-search-buttons-submit .lsd-search-button:hover {
    background: var(--lsde-red-dark) !important;
    background-image: none !important;
}

/* Reset button */
.lsd-search .lsd-search-row
    .lsd-search-buttons .lsd-search-buttons-reset .lsd-search-button {
    background: transparent !important;
    background-image: none !important;
    color: var(--lsde-text-muted) !important;
    border: 1.5px solid var(--lsde-border) !important;
    box-shadow: none !important;
}

.lsd-search .lsd-search-row
    .lsd-search-buttons .lsd-search-buttons-reset .lsd-search-button:hover {
    border-color: var(--lsde-red) !important;
    color: var(--lsde-red) !important;
    background: var(--lsde-red-light) !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ══════════════════════════════════════════════════════════════
   5. SORT BAR (above listings)
   ══════════════════════════════════════════════════════════════ */
.lsd-view-sortbar-wrapper {
    background: var(--lsde-white) !important;
    border: 1.5px solid var(--lsde-border) !important;
    border-radius: var(--lsde-radius) !important;
    box-shadow: var(--lsde-shadow) !important;
    padding: 6px 8px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

/* Sort tabs */
.lsd-view-sortbar-wrapper ul.lsd-sortbar-list {
    background: transparent !important;
    padding: 2px !important;
    gap: 4px !important;
}

.lsd-view-sortbar-wrapper ul.lsd-sortbar-list li {
    border: 1.5px solid var(--lsde-border) !important;
    border-radius: var(--lsde-radius-sm) !important;
    color: var(--lsde-text-muted) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 7px 14px !important;
    transition: var(--lsde-trans) !important;
    background: var(--lsde-white) !important;
    /* Undo Listdom's connected-pill border style */
    border-inline-end-width: 1.5px !important;
    border-start-start-radius: var(--lsde-radius-sm) !important;
    border-end-start-radius: var(--lsde-radius-sm) !important;
    border-start-end-radius: var(--lsde-radius-sm) !important;
    border-end-end-radius: var(--lsde-radius-sm) !important;
}

.lsd-view-sortbar-wrapper ul.lsd-sortbar-list li:hover {
    background: var(--lsde-red-light) !important;
    border-color: rgba(var(--lsde-red-rgb), .3) !important;
    color: var(--lsde-red) !important;
}

.lsd-view-sortbar-wrapper ul.lsd-sortbar-list li.lsd-active {
    background: var(--lsde-red) !important;
    border-color: var(--lsde-red) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(var(--lsde-red-rgb), .3) !important;
}

.lsd-view-sortbar-wrapper ul.lsd-sortbar-list li.lsd-active:hover {
    background: var(--lsde-red-dark) !important;
    border-color: var(--lsde-red-dark) !important;
}

.lsd-view-sortbar-wrapper ul.lsd-sortbar-list li i.fas {
    color: #fff !important;
}

/* Dropdown variant */
.lsd-view-sortbar-wrapper .lsd-sortbar-dropdown {
    margin-left: auto;
}

.lsd-view-sortbar-wrapper .lsd-sortbar-dropdown > span {
    color: var(--lsde-text-muted) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.lsd-view-sortbar-wrapper .lsd-sortbar-dropdown > span i {
    color: var(--lsde-red) !important;
}

.lsd-view-sortbar-wrapper .lsd-sortbar-dropdown select {
    border: 1.5px solid var(--lsde-border) !important;
    border-radius: var(--lsde-radius-sm) !important;
    color: var(--lsde-text) !important;
    background: var(--lsde-white) !important;
    font-size: 13px !important;
    padding: 6px 14px !important;
    cursor: pointer !important;
    outline: none !important;
    transition: var(--lsde-trans) !important;
}

.lsd-view-sortbar-wrapper .lsd-sortbar-dropdown select:focus {
    border-color: var(--lsde-red) !important;
    box-shadow: 0 0 0 3px rgba(var(--lsde-red-rgb), .12) !important;
}

/* ══════════════════════════════════════════════════════════════
   6. VIEW SWITCHER (Grid / List toggle buttons)
   ══════════════════════════════════════════════════════════════ */
.lsd-view-switcher-sortbar-wrapper {
    background: var(--lsde-white) !important;
    border: 1.5px solid var(--lsde-border) !important;
    border-radius: var(--lsde-radius) !important;
    box-shadow: var(--lsde-shadow) !important;
    padding: 4px !important;
    margin-bottom: 10px !important;
}

.lsd-view-switcher-sortbar-wrapper ul.lsd-view-switcher-buttons li {
    border-radius: var(--lsde-radius-sm) !important;
    transition: var(--lsde-trans) !important;
}

.lsd-view-switcher-sortbar-wrapper ul.lsd-view-switcher-buttons li.lsd-active {
    background: var(--lsde-red-light) !important;
}

.lsd-view-switcher-sortbar-wrapper ul.lsd-view-switcher-buttons li.lsd-active i,
.lsd-view-switcher-sortbar-wrapper ul.lsd-view-switcher-buttons li:hover i,
.lsd-view-switcher-sortbar-wrapper ul.lsd-view-switcher-buttons li:focus i {
    color: var(--lsde-red) !important;
}

/* ══════════════════════════════════════════════════════════════
   7. SIDEBAR SEARCH STYLE
   ══════════════════════════════════════════════════════════════ */
.lsd-search.lsd-search-style-sidebar .lsd-search-row {
    background: var(--lsde-white) !important;
    border: 1.5px solid var(--lsde-border) !important;
    border-radius: var(--lsde-radius) !important;
    box-shadow: var(--lsde-shadow) !important;
}

.lsd-search.lsd-search-style-sidebar .lsd-search-row
    > .lsd-row .lsd-search-filter {
    background: var(--lsde-input-bg) !important;
    border: 1.5px solid var(--lsde-border) !important;
    border-radius: var(--lsde-radius-sm) !important;
}

.lsd-search.lsd-search-style-sidebar .lsd-search-row
    > .lsd-row .lsd-search-filter:focus-within {
    border-color: var(--lsde-red) !important;
    box-shadow: 0 0 0 3px rgba(var(--lsde-red-rgb), .1) !important;
}

/* ══════════════════════════════════════════════════════════════
   8. ACTIVE SEARCH CRITERIA BADGES
   ══════════════════════════════════════════════════════════════ */
.lsd-search .lsd-search-criteria-item {
    background: var(--lsde-red-light) !important;
    border: 1px solid rgba(var(--lsde-red-rgb), .25) !important;
    color: var(--lsde-red) !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.lsd-search .lsd-search-criteria-item .lsd-search-criteria-remove {
    color: var(--lsde-red) !important;
}


/* ══════════════════════════════════════════════════════════════
   10. RADIO / CHECKBOX TOGGLES
   ══════════════════════════════════════════════════════════════ */
.lsd-search .lsd-search-row .lsd-search-radio-label input[type="radio"]:checked + span,
.lsd-search .lsd-search-row .lsd-search-radio-label input[type="checkbox"]:checked + span {
    color: var(--lsde-red) !important;
    border-color: var(--lsde-red) !important;
    background: var(--lsde-red-light) !important;
}

/* ══════════════════════════════════════════════════════════════
   11. NOUI RANGE SLIDER
   ══════════════════════════════════════════════════════════════ */
.lsd-search .lsd-search-row .noUi-connect,
.lsd-search .lsd-search-row .noUi-base .noUi-fill {
    background: var(--lsde-red) !important;
}

.lsd-search .lsd-search-row .noUi-handle {
    border-color: var(--lsde-red) !important;
    box-shadow: 0 0 0 3px rgba(var(--lsde-red-rgb), .15) !important;
}

/* ══════════════════════════════════════════════════════════════
   12. RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media only screen and (max-width: 768px) {
    .lsd-view-sortbar-wrapper {
        padding: 6px !important;
    }
    .lsd-view-sortbar-wrapper ul.lsd-sortbar-list li {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
    .lsd-search .lsd-search-row {
        padding: 14px 14px !important;
    }
}