/* ==========================================================================
   Ivory Search – circle-to-pill search bar overrides
   Targets: [ivory-search id="16695"] and [ivory-search id="16703"]

   Uses the class .is-search-open (toggled by JS) instead of :focus/:focus-within
   to control the open/closed state. This prevents the "stuck open" bug.

   Ivory Search outputs:
     form.is-search-form.is-form-style.is-form-style-3.is-form-id-XXXXX
       > label  (wraps input)
       > button.is-search-submit
           > span.is-search-icon  (the visible "button" box)
               > svg

   The plugin's own CSS sets hard defaults on .is-form-style,
   .is-search-icon, etc. with !important, so we must beat specificity.
   ========================================================================== */

/* ---------- 1. Form container ---------- */
form.is-search-form.is-form-style.is-form-id-16695,
form.is-search-form.is-form-style.is-form-id-16703 {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 42px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    line-height: normal !important;
}

/* ---------- 2. Label wrapper ---------- */
form.is-form-style.is-form-id-16695 label,
form.is-form-style.is-form-id-16703 label {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* ---------- 3. Input – closed state (small circle behind button) ---------- */
form.is-form-style.is-form-id-16695 input.is-search-input,
form.is-form-style.is-form-id-16703 input.is-search-input {
    box-sizing: border-box !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    background: transparent !important;
    background-color: transparent !important;
    color: transparent !important;
    font-family: inherit !important;
    font-size: 15px !important;
    outline: none !important;
    cursor: pointer !important;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.3s ease,
                -webkit-text-fill-color 0.3s ease !important;
    z-index: 2 !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    /* Keep typed text hidden while closed */
    -webkit-text-fill-color: transparent !important;
}

/* Hide placeholder when closed */
form.is-form-style.is-form-id-16695 input.is-search-input::placeholder,
form.is-form-style.is-form-id-16703 input.is-search-input::placeholder {
    color: transparent !important;
}

/* ---------- 4. Input – open state (pill shape, driven by .is-search-open) ---------- */
form.is-form-style.is-form-id-16695.is-search-open input.is-search-input,
form.is-form-style.is-form-id-16703.is-search-open input.is-search-input {
    width: 310px !important;
    border: 2px solid #ffffff !important;
    border-radius: 99px !important;
    padding: 0 45px 0 20px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    cursor: text !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Show placeholder when open */
form.is-form-style.is-form-id-16695.is-search-open input.is-search-input::placeholder,
form.is-form-style.is-form-id-16703.is-search-open input.is-search-input::placeholder {
    color: #6E5A32 !important;
    opacity: 0.7 !important;
}

/* ---------- 5. Submit button (the <button> element) ---------- */
form.is-form-style.is-form-id-16695 button.is-search-submit,
form.is-form-style.is-form-id-16703 button.is-search-submit {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 42px !important;
    height: 42px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    transition: background-color 0.4s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    line-height: 0 !important;
}

/* ---------- 6. The .is-search-icon span (Ivory's visible button box) ---------- */
form.is-form-style.is-form-id-16695 .is-search-icon,
form.is-form-style.is-form-id-16703 .is-search-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    line-height: 0 !important;
    transition: all 0.4s ease !important;
}

/* ---------- 7. SVG icon ---------- */
form.is-form-style.is-form-id-16695 .is-search-icon svg,
form.is-form-style.is-form-id-16703 .is-search-icon svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    transition: all 0.3s ease !important;
}

/* Closed state: white magnifying glass */
form.is-form-style.is-form-id-16695 .is-search-submit path,
form.is-form-style.is-form-id-16703 .is-search-submit path {
    fill: #ffffff !important;
    transition: fill 0.3s ease !important;
}

/* ---------- 8. Open-state button behaviour (driven by .is-search-open) ---------- */
form.is-form-style.is-form-id-16695.is-search-open button.is-search-submit,
form.is-form-style.is-form-id-16703.is-search-open button.is-search-submit {
    background-color: #ffffff !important;
    z-index: 4 !important;
    cursor: pointer !important;
}

form.is-form-style.is-form-id-16695.is-search-open .is-search-icon,
form.is-form-style.is-form-id-16703.is-search-open .is-search-icon {
    background: transparent !important;
}

/* Open state: dark magnifying glass on white circle */
form.is-form-style.is-form-id-16695.is-search-open .is-search-submit path,
form.is-form-style.is-form-id-16703.is-search-open .is-search-submit path {
    fill: #1E1E19 !important;
}

/* ---------- 9. Hide the plugin's default AJAX loader image ---------- */
form.is-form-style.is-form-id-16695 .is-loader-image,
form.is-form-style.is-form-id-16703 .is-loader-image {
    display: none !important;
}

/* ---------- 10. Custom loading spinner (replaces magnifying glass while loading) ---------- */

/* Spinner keyframes */
@keyframes is-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* When .processing is active, hide the magnifying glass SVG */
form.is-form-style.is-form-id-16695.processing .is-search-icon svg,
form.is-form-style.is-form-id-16703.processing .is-search-icon svg {
    opacity: 0 !important;
    transition: opacity 0.15s ease !important;
}

/* Create a spinner via ::after on the .is-search-icon span */
form.is-form-style.is-form-id-16695 .is-search-icon::after,
form.is-form-style.is-form-id-16703 .is-search-icon::after {
    content: '' !important;
    display: none;
    position: absolute !important;
    width: 18px !important;
    height: 18px !important;
    border: 2.5px solid transparent !important;
    border-top-color: #1E1E19 !important;
    border-right-color: #1E1E19 !important;
    border-radius: 50% !important;
    animation: is-spin 0.6s linear infinite !important;
    box-sizing: border-box !important;
}

/* Show spinner only when processing */
form.is-form-style.is-form-id-16695.processing .is-search-icon::after,
form.is-form-style.is-form-id-16703.processing .is-search-icon::after {
    display: block !important;
}