/* =========================================================
   TAXONOMY SELECT DROPDOWNS  —  .ls-radio-dropdown
   ---------------------------------------------------------
   Styles a Forminator TEXT field as one of the site's
   filter-style pill dropdowns: down-arrow at rest, up-arrow
   open, brown pill + X once a choice is made (X clears it).

   The visitor's choice is written into the real text input
   (hidden below), so Forminator submits + stores it as text.

   Loaded automatically by the LS Taxonomy Select Dropdowns
   plugin. Edit this file freely — the plugin cache-busts it
   on every save (filemtime versioning), no PHP changes needed.

   REQUIRES:
   • class  ls-radio-dropdown  on each TEXT field
     (Forminator -> field -> Styling -> custom CSS classes)
   • the ls-radio-dropdown JS (builds pill + panel)
   • the plugin PHP (feeds the term list to the JS)
   ========================================================= */

/* The field column is the positioning context; the open panel
   OVERLAYS whatever sits below instead of pushing it down
   (same trick as the .multi-filter pills). */
.ls-form .ls-radio-dropdown {
    position: relative;
}
.ls-form .ls-radio-dropdown .forminator-field {
    position: static !important;
}

/* Only hide the label + native input once the JS has actually taken
   the field over (.ls-dd-ready). If a taxonomy has no terms the field
   stays a normal, labelled text box so the form still works. */
.ls-form .ls-radio-dropdown.ls-dd-ready .forminator-label {
    display: none !important;
}
.ls-form .ls-radio-dropdown.ls-dd-ready .forminator-input--wrap {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* ---------- The pill (injected by the JS) ---------- */
.ls-form .ls-dd-title {
    position: relative;
    z-index: 11;                       /* stays above the open panel */
    display: block;
    width: 100%;
    margin: 0;
    padding: 1.1rem 3.6rem 1.1rem 1.5rem;
    text-align: left;
    font-family: inherit;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.2;
    color: #9c9997;
    background: #fff;
    border: 1px solid #C9BBA9;
    border-radius: 30px;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ls-form .ls-radio-dropdown:not(.ls-dd-selected) .ls-dd-title:hover {
    border-color: #1C625F;             /* matches the input hover green */
}

/* Icon — down arrow at rest, up arrow open, X when selected.
   Same SVGs as the Stone Collection filters. */
.ls-form .ls-dd-title::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-image: url('https://glow.ipte.uk/landford-stone/wp-content/uploads/filter-arrow-down.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.ls-form .ls-radio-dropdown.ls-dd-open .ls-dd-title::after {
    background-image: url('https://glow.ipte.uk/landford-stone/wp-content/uploads/filter-arrow-up.svg');
}

/* Choice made -> brown pill, white text, X icon (click = clear) */
.ls-form .ls-radio-dropdown.ls-dd-selected .ls-dd-title {
    background: var(--color-brown);
    border-color: var(--color-brown);
    color: var(--color-white);
}
.ls-form .ls-radio-dropdown.ls-dd-selected .ls-dd-title::after {
    background-image: url('https://glow.ipte.uk/landford-stone/wp-content/uploads/filter-icon-x.svg');
}


/* ---------- The open panel ---------- */
.ls-form .ls-dd-panel {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;                       /* under the pill (11), over the form */
    padding-top: 68px;                 /* clears the pill sitting on top —
                                          nudge if you change pill padding */
    padding-bottom: 0.4rem;
    background: var(--color-white);
    border: 1px solid #C9BBA9;
    border-radius: 30px;
    max-height: 380px;                 /* long taxonomies scroll instead of
                                          swallowing the page */
    overflow-y: auto;
}
.ls-form .ls-radio-dropdown.ls-dd-open .ls-dd-panel {
    display: block;
}


/* ---------- The options (injected buttons) ---------- */
.ls-form .ls-dd-panel .ls-dd-option {
    display: block;
    width: 100%;
    margin: 0;
    padding: 10px 1.5rem;
    text-align: left;
    font-family: inherit;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.4;
    color: #1D1D1C;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.ls-form .ls-dd-panel .ls-dd-option:hover {
    background: var(--color-warm-grey);
}
.ls-form .ls-dd-panel .ls-dd-option.is-selected {
    background: var(--color-brown);
    color: var(--color-white);
}


/* ---------- Responsive (mirrors the ls-form breakpoints) ---------- */

/* Laptops */
@media (max-width: 1320px) {
    .ls-form .ls-dd-title {
        padding-left: 1.3rem !important;
        padding-right: 3.4rem !important;
    }
    .ls-form .ls-dd-panel .ls-dd-option {
        padding-left: 1.3rem !important;
        padding-right: 1.3rem !important;
    }
}

/* Mobiles */
@media (max-width: 600px) {
    .ls-form .ls-dd-title {
        padding: 0.95rem 3.2rem 0.95rem 1.2rem !important;
        border-radius: 26px;
    }
    .ls-form .ls-dd-title::after {
        width: 26px;
        height: 26px;
    }
    .ls-form .ls-dd-panel {
        border-radius: 26px;
        padding-top: 58px;             /* matches the shorter mobile pill */
    }
    .ls-form .ls-dd-panel .ls-dd-option {
        padding: 10px 1.2rem !important;
    }
}