/* =============================================================================
   slfa-location.css  v16.3.0
   Layout: [mode 120px | cat/radius ~110px] ← left-anchored | input | [submit 52px]
   Input uses padding-LEFT to clear the left-side dropdowns.
   ============================================================================= */

/* ── Brand tokens ───────────────────────────────────────────────────────── */
:root {
    --slfa-green:       #3a8a3a;
    --slfa-green-dark:  #2e7228;
    --slfa-green-light: #e8f5e8;
    --slfa-border:      rgba(129, 129, 129, 0.2);
    --slfa-shadow:      0 4px 12px rgba(0, 0, 0, 0.1);
    --slfa-height:      42px;
}

/* ── Hide utility ───────────────────────────────────────────────────────── */
.slfa-hidden {
    display: none !important;
}

/* =============================================================================
   MODE SWITCHER — left-anchored
   ============================================================================= */

.search-by-category.slfa-mode-dropdown {
    left: 1px;
    width: 120px;
    z-index: 100;
    overflow: visible;
    top: 2px;
    bottom: 0;
    height: var(--slfa-height);
    border-right: 1px solid var(--slfa-border);
    border-left: 1px solid var(--slfa-border);
    line-height: var(--slfa-height);
    text-align: left;
    font-size: 13px;
    box-sizing: border-box;
    background: #fff;
}

/* Two-line label: "Search by:" / "CATEGORY" or "LOCATION" */
.slfa-mode-dropdown .slfa-mode-label {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 20px 0 12px;
    height: var(--slfa-height);
    min-height: var(--slfa-height);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    box-sizing: border-box;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
}

/* "Search by:" prefix — small muted */
.slfa-mode-label .slfa-by-label {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #999;
    line-height: 1.1;
    margin-bottom: 2px;
}

/* "CATEGORY" / "LOCATION" value — bold green */
.slfa-mode-label .slfa-mode-text {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--slfa-green);
    line-height: 1.2;
}

/* Caret arrow */
.slfa-mode-label::after {
    content: '';
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid var(--slfa-green);
    transition: transform 0.15s ease;
}

.slfa-mode-dropdown.opened .slfa-mode-label::after {
    transform: translateY(-50%) rotate(180deg);
}

.slfa-mode-dropdown .slfa-mode-label:hover .slfa-mode-text {
    color: var(--slfa-green-dark);
}

/* Dropdown panel */
.slfa-mode-dropdown .input-dropdown-inner {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 160px !important;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0 0 3px 3px;
    z-index: 9999;
    box-shadow: var(--slfa-shadow);
    padding: 4px 0;
}

.slfa-mode-dropdown.opened .input-dropdown-inner {
    display: block !important;
    height: auto;
}

/* Mode list items */
.slfa-mode-item {
    list-style: none;
}

.slfa-mode-item > a {
    display: block;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.1s, color 0.1s;
}

.slfa-mode-item > a:hover {
    background: var(--slfa-green-light);
    color: var(--slfa-green-dark);
}

.slfa-mode-item.slfa-mode-active > a {
    color: var(--slfa-green);
    font-weight: 700;
}

.slfa-mode-item.slfa-mode-active > a::before {
    content: '✓ ';
    font-size: 10px;
}

/* =============================================================================
   CAT DROPDOWN — left-anchored, starts right of mode switcher
   ============================================================================= */

.search-by-category.slfa-cat-dropdown {
    left: 120px;
    right: auto;
    z-index: 100;
}

.slfa-cat-dropdown .input-dropdown-inner a:hover {
    color: var(--slfa-green) !important;
}

/* =============================================================================
   RADIUS DROPDOWN — left-anchored at same position as cat (replaces it)
   ============================================================================= */

.search-by-category.slfa-radius-dropdown {
    left: 120px;
    right: auto;
    width: 90px;
    z-index: 100;
}

.search-by-category.slfa-radius-dropdown .input-dropdown-inner {
    min-width: 0;
    width: 100%;
}

.search-by-category.slfa-radius-dropdown .input-dropdown-inner > a,
.search-by-category.slfa-radius-dropdown li a {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.slfa-radius-dropdown .input-dropdown-item.active > a {
    color: var(--slfa-green);
    font-weight: 700;
}

/* =============================================================================
   SEARCH INPUT
   padding-LEFT clears the left-anchored dropdowns.
   Category mode: mode(120) + cat(~110) = ~235px
   Location mode: mode(120) + radius(90) = ~215px
   padding-RIGHT only needs to clear the submit button (52px).
   ============================================================================= */

/* Category mode (default) */
.search-by-category .woodmart-search-form input[name="s"],
.search-by-category input[name="s"] {
    padding-left: 290px !important;
    padding-right: 45px !important;
    box-sizing: border-box;
}

/* Location mode — radius is narrower so less left padding needed */
.search-by-category.slfa-loc-active .woodmart-search-form input[name="s"],
.search-by-category.slfa-loc-active input[name="s"] {
    padding-left: 270px !important;
}

.woodmart-search-form input[name="s"] {
    transition: none;
}

/* =============================================================================
   LOCATION INPUT — separate element, visually identical to input[name="s"]
   ============================================================================= */

/* The location input gets Woodmart's .s class so it inherits the
   same height, border-radius, font-size etc. as the original input.
   We only need to override padding to clear our left-side dropdowns. */

.slfa-location-input {
    padding-left: 220px !important;
    padding-right: 45px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    /* Match original input[name="s"] dimensions exactly */
    height: 46px !important;
    font-size: 15px !important;
    line-height: 24px !important;
    /* Reset type="search" browser defaults so it matches type="text" */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* =============================================================================
   INLINE SUGGESTIONS (location autocomplete)
   ============================================================================= */

.slfa-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: var(--slfa-shadow);
    max-height: 280px;
    overflow-y: auto;
    margin: 0 10px;
}

.slfa-suggestions.facetwp-hidden {
    display: none !important;
}

.slfa-suggestions .slfa-suggestion {
    display: flex;
    flex-direction: column;
    padding: 8px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    line-height: 1.4;
    transition: background 0.1s;
}

.slfa-suggestions .slfa-suggestion:last-of-type {
    border-bottom: none;
}

.slfa-suggestions .slfa-suggestion:hover,
.slfa-suggestions .slfa-suggestion.active {
    background: var(--slfa-green-light);
}

.slfa-suggestions .slfa-sug-main {
    font-weight: 600;
    color: #333;
}

.slfa-suggestions .slfa-sug-sec {
    color: #888;
    font-size: 11px;
    margin-top: 1px;
}

.slfa-suggestions .slfa-attribution,
.slfa-suggestions .location-attribution {
    padding: 6px 12px;
    text-align: right;
    border-top: 1px solid #f0f0f0;
}

.search-by-category .search-field,
.search-by-category .wd-search-form {
    position: relative;
}

/* =============================================================================
   SUBMIT BUTTON
   ============================================================================= */

.searchform .searchsubmit {
    background-color: #008300 !important;
    color: #fff !important;
    top: 2px !important;
    bottom: 2px !important;
    border-radius: 4px !important;
}

/* =============================================================================
   TABLET (769px – 1024px) — tighten widths, keep in-row
   ============================================================================= */

@media (max-width: 1024px) and (min-width: 769px) {

    .search-by-category.slfa-mode-dropdown {
        width: 105px;
    }

    .search-by-category.slfa-cat-dropdown,
    .search-by-category.slfa-radius-dropdown {
        left: 105px;
    }

    .search-by-category.slfa-radius-dropdown {
        width: 80px;
    }

    .search-by-category .woodmart-search-form input[name="s"],
    .search-by-category input[name="s"] {
        padding-left: 290px !important;
        padding-right: 45px !important;
    }

    .slfa-location-input {
        padding-left: 195px !important;
        padding-right: 45px !important;
    }
}

/* =============================================================================
   MOBILE (≤ 768px) — dropdowns stack below the text input
   ============================================================================= */

@media (max-width: 768px) {

    /* Wrapper: flex column so input is first, dropdowns row is second */
    .woodmart-search-form.search-by-category,
    form.searchform.has-categories-dropdown {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch;
        position: relative;
    }

    /* Input row — full width, natural padding */
    .search-by-category .woodmart-search-form input[name="s"],
    .search-by-category input[name="s"] {
        padding-left: 16px !important;
        padding-right: 60px !important;
        width: 100%;
        order: 0;
    }

    /* Location input: same layout as original on mobile */
    .slfa-location-input {
        padding-left: 16px !important;
        padding-right: 60px !important;
        width: 100%;
        order: 0;
    }

    /* Submit button stays in its natural place */
    .search-by-category .wd-search-submit,
    .search-by-category button[type="submit"] {
        order: 1;
    }

    /* All three dropdowns: detach from absolute, flow into second row */
    .search-by-category.slfa-mode-dropdown,
    .search-by-category.slfa-cat-dropdown,
    .search-by-category.slfa-radius-dropdown {
        position: static !important;
        display: block !important;
        left: auto !important;
        right: auto !important;
        float: none;
        height: 40px;
        line-height: 40px;
        border-top: 1px solid var(--slfa-border);
        border-left: none;
        border-right: none;
        box-sizing: border-box;
        order: 2;
        width: 50% !important;
        float: left;
    }

    /* Mode takes its own full-width row */
    .search-by-category.slfa-mode-dropdown {
        width: 100% !important;
        float: none;
        border-bottom: 1px solid var(--slfa-border);
    }

    /* Mode label: horizontal on mobile */
    .slfa-mode-dropdown .slfa-mode-label {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 5px;
        padding: 0 28px 0 14px;
        height: 40px;
        min-height: 40px;
    }

    .slfa-mode-label .slfa-by-label {
        font-size: 9px;
        margin-bottom: 0;
    }

    /* Dropdown panel opens downward */
    .slfa-mode-dropdown .input-dropdown-inner {
        top: 100% !important;
        left: 0 !important;
        min-width: 180px !important;
    }
}

/* =============================================================================
   CATEGORY DROPDOWN — constrain width & truncate long names
   The dropdown sits between mode switcher (120px) and search input text
   area (~290px padding-left).  Cap the whole container at 160px so it
   never overlaps the placeholder/typed text.
   ============================================================================= */

.search-by-category.slfa-cat-dropdown {
    width: 160px !important;
    max-width: 160px !important;
    /* Do NOT use overflow:hidden here — it clips the dropdown list */
}

/* The inner wrapper that holds the label + list */
.slfa-cat-dropdown .input-dropdown-inner {
    max-width: 160px !important;
}

/* The visible label ("Select category" / selected name) */
.slfa-cat-dropdown .input-dropdown-inner > a.input-dropdown-label,
.slfa-cat-dropdown .input-dropdown-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 130px !important;
    display: inline-block !important;
    vertical-align: middle;
}

/* Items inside the opened dropdown list */
.slfa-cat-dropdown .list-wrapper li a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =============================================================================
   HIDE SEARCH BAR IN NO-PRODUCTS FOOTER
   When location search returns 0 results, WooCommerce shows a search form
   below the “no products found” message.  Hide it — the header search is enough.
   ============================================================================= */

.no-products-footer .woodmart-search-form {
    display: none !important;
}

/* Also hide the default WP search form on search-no-results pages */
body.search-no-results .site-content .woodmart-search-form,
body.search-no-results .site-content form.search-form,
body.search-no-results .site-content form.searchform:not(:first-of-type) {
    display: none !important;
}

/* =============================================================================
   CLEAR BUTTON — × inside location input
   ============================================================================= */

.slfa-clear-btn {
    position: absolute;
    right: 52px;            /* left of the green submit button */
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 22px;
    height: 22px;
    line-height: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #999;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s;
    user-select: none;
    -webkit-user-select: none;
}

.slfa-clear-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #333;
}

/* =============================================================================
   FIX #1 — Pagination active-page highlight
   WooCommerce uses span.page-numbers.current for the active page.
   Ensure it’s visually distinct on search results pages.
   ============================================================================= */

.woocommerce-pagination ul.page-numbers li span.page-numbers.current {
    background-color: var(--slfa-green) !important;
    color: #fff !important;
    border-color: var(--slfa-green) !important;
    border-radius: 3px;
    padding: 4px 10px;
    font-weight: 700;
}

.woocommerce-pagination ul.page-numbers li a.page-numbers {
    padding: 4px 10px;
}

/* =============================================================================
   SMALL MOBILE (≤ 480px) — single column
   ============================================================================= */

@media (max-width: 480px) {

    .search-by-category.slfa-mode-dropdown,
    .search-by-category.slfa-cat-dropdown,
    .search-by-category.slfa-radius-dropdown {
        width: 100% !important;
        float: none;
    }
}