/* ==========================================================
   DELIOX SEARCH BAR — v2.2.0
========================================================== */

.dlx-search-wrap {
    display: flex;
    width: 100%;
}

.dlx-search {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
}

/* ── Input ───────────────────────────────────────────── */
.dlx-search-input {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    color: #111;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.3;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.dlx-search-input:focus {
    border-color: #2196F3;
    box-shadow: 0 0 0 4px var(--dlx-search-focus-shadow, rgba(33,150,243,0.18));
}
.dlx-search-input::placeholder { color: rgba(0,0,0,0.4); }
.dlx-search-input::-webkit-search-cancel-button { display: none; } /* Hide browser X — we use our own */

/* ── Icon position adjustments ───────────────────────── */
/* When the search icon shows on the LEFT, pad the input on the left. */
.dlx-search.has-icon.icon-left  .dlx-search-input { padding-left: 40px; }
.dlx-search.has-icon.icon-right .dlx-search-input { padding-right: 40px; }

/* When a clear button is visible, reserve room on the right. */
.dlx-search:has(.dlx-search-clear:not([style*="display:none"])) .dlx-search-input {
    padding-right: 40px;
}

/* Search icon — absolutely positioned within the search box */
.dlx-search-icon {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(0,0,0,0.5);
    pointer-events: none;
    z-index: 2;
}
.dlx-search-icon svg { width: 16px; height: 16px; }
.dlx-search.icon-left  .dlx-search-icon { left: 14px; }
.dlx-search.icon-right .dlx-search-icon { right: 14px; }

/* ── Clear (X) button ────────────────────────────────── */
.dlx-search-clear {
    position: absolute;
    right: 10px;
    top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px;
    background: transparent;
    border: none;
    color: rgba(0,0,0,0.5);
    cursor: pointer;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    transition: background .15s ease, color .15s ease, transform .15s ease;
    outline: none;
    z-index: 3;
}
.dlx-search-clear:hover {
    background: rgba(0,0,0,0.06);
    color: #111;
}
.dlx-search-clear:active { transform: translateY(-50%) scale(0.9); }
.dlx-search-clear:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.dlx-search-clear svg { width: 14px; height: 14px; }

/* If both an icon-right AND clear visible, push the icon further right */
.dlx-search.icon-right:has(.dlx-search-clear:not([style*="display:none"])) .dlx-search-icon {
    right: 44px;
}

/* ── Spinner (shown while AJAX fetches) ──────────────── */
.dlx-search-spinner {
    position: absolute;
    right: 14px;
    top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px;
    border: 2px solid rgba(0,0,0,0.15);
    border-top-color: rgba(0,0,0,0.6);
    border-radius: 50%;
    animation: dlxSpin .6s linear infinite;
    display: none;
    z-index: 4;
}
.dlx-search.is-searching .dlx-search-spinner { display: block; }
/* When the spinner shows, hide the clear icon underneath to avoid overlap */
.dlx-search.is-searching .dlx-search-clear,
.dlx-search.is-searching.icon-right .dlx-search-icon { visibility: hidden; }

@keyframes dlxSpin { to { transform: translateY(-50%) rotate(360deg); } }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    /* Touch targets ≥44px on phones */
    .dlx-search-input { padding-top: 14px; padding-bottom: 14px; font-size: 16px; /* avoids iOS zoom */ }
    .dlx-search-clear { width: 36px; height: 36px; }
    .dlx-search.has-icon.icon-left  .dlx-search-input { padding-left: 44px; }
    .dlx-search.has-icon.icon-right .dlx-search-input { padding-right: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .dlx-search-input,
    .dlx-search-clear,
    .dlx-search-spinner {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}