/* ======================================================================
   SKYE SEARCH — single source of truth for FiboSearch + fallback WP search
   Dark is the default; the light palette is switched by html[data-theme].
   Every colour used by the search input, dropdown, product-details panel
   and the mobile search modal comes from the tokens below, so text and
   background can never drift out of contrast again.
====================================================================== */

:root {
    --lolli-search-input-bg: #1d1b28;
    --lolli-search-input-bg-focus: #242130;
    --lolli-search-input-border: rgba(255,255,255,.14);
    --lolli-search-border-focus: rgba(255,130,218,.55);
    --lolli-search-ring: rgba(255,130,218,.14);
    --lolli-search-text: #f5eff8;
    --lolli-search-muted: #b7adbf;
    --lolli-search-placeholder: #9d92a6;
    --lolli-search-accent: #ff9cea;
    --lolli-search-panel-bg: #171620;
    --lolli-search-panel-border: rgba(255,255,255,.10);
    --lolli-search-panel-shadow: 0 20px 50px rgba(0,0,0,.50);
    --lolli-search-row-hover: rgba(255,130,218,.12);
    --lolli-search-divider: rgba(255,255,255,.07);
}

html[data-theme="light"] {
    --lolli-search-input-bg: #f6f4f8;
    --lolli-search-input-bg-focus: #ffffff;
    --lolli-search-input-border: rgba(62,44,67,.14);
    --lolli-search-border-focus: rgba(204,72,159,.45);
    --lolli-search-ring: rgba(204,72,159,.10);
    --lolli-search-text: #29212d;
    --lolli-search-muted: #6f6374;
    --lolli-search-placeholder: #857a89;
    --lolli-search-accent: #b33c88;
    --lolli-search-panel-bg: #ffffff;
    --lolli-search-panel-border: rgba(53,39,58,.12);
    --lolli-search-panel-shadow: 0 20px 50px rgba(55,38,59,.15);
    --lolli-search-row-hover: #f8f1f6;
    --lolli-search-divider: rgba(53,39,58,.08);
}

/* ----------------------------------------------------------------------
   Input
   The plugin paints a white background on the field wrapper; with a
   translucent input it showed through. Wrappers are transparent and the
   input backgrounds are opaque, so the field never depends on what is
   behind it.
------------------------------------------------------------------------ */
.dgwt-wcas-search-wrapp,
.dgwt-wcas-search-form,
.dgwt-wcas-sf-wrapp {
    background: transparent !important;
    box-shadow: none !important;
}

.dgwt-wcas-search-input,
.lolli-header-search .search-field,
.lolli-search-modal .search-field {
    padding: 10px 14px !important;
    border: 1px solid var(--lolli-search-input-border) !important;
    border-radius: var(--lolli-radius-md, 14px) !important;
    background: var(--lolli-search-input-bg) !important;
    color: var(--lolli-search-text) !important;
    -webkit-text-fill-color: var(--lolli-search-text) !important;
    box-shadow: none !important;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease !important;
}

.dgwt-wcas-search-input:focus,
.lolli-header-search .search-field:focus,
.lolli-search-modal .search-field:focus {
    background: var(--lolli-search-input-bg-focus) !important;
    border-color: var(--lolli-search-border-focus) !important;
    box-shadow: 0 0 0 3px var(--lolli-search-ring) !important;
}

.dgwt-wcas-search-input::placeholder,
.lolli-header-search .search-field::placeholder,
.lolli-search-modal .search-field::placeholder {
    color: var(--lolli-search-placeholder) !important;
    -webkit-text-fill-color: var(--lolli-search-placeholder) !important;
    opacity: 1 !important;
}

/* Browser autofill paints its own background; keep text readable. */
.dgwt-wcas-search-input:-webkit-autofill,
.dgwt-wcas-search-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--lolli-search-text) !important;
    box-shadow: 0 0 0 1000px var(--lolli-search-input-bg-focus) inset !important;
    caret-color: var(--lolli-search-text);
}

/* The theme draws its own field chrome: hide the plugin's icon/submit. */
.dgwt-wcas-search-submit,
.dgwt-wcas-search-icon,
.dgwt-wcas-search-icon svg {
    display: none !important;
}

.dgwt-wcas-preloader,
.dgwt-wcas-close {
    color: var(--lolli-search-muted) !important;
}

/* ----------------------------------------------------------------------
   Dropdown (autocomplete suggestions)
------------------------------------------------------------------------ */
.dgwt-wcas-suggestions-wrapp,
.dgwt-wcas-details-wrapp {
    background: var(--lolli-search-panel-bg) !important;
    border: 1px solid var(--lolli-search-panel-border) !important;
    border-radius: var(--lolli-radius-md, 14px) !important;
    box-shadow: var(--lolli-search-panel-shadow) !important;
    color: var(--lolli-search-text) !important;
}

.dgwt-wcas-suggestions-wrapp {
    overflow: hidden;
}

.dgwt-wcas-suggestion,
.dgwt-wcas-suggestion .dgwt-wcas-st,
.dgwt-wcas-suggestion .dgwt-wcas-st *,
.dgwt-wcas-suggestion a {
    color: var(--lolli-search-text) !important;
}

.dgwt-wcas-suggestion {
    background: transparent !important;
    border-color: var(--lolli-search-divider) !important;
}

.dgwt-wcas-suggestion.dgwt-wcas-suggestion-selected,
.dgwt-wcas-suggestion:hover {
    background: var(--lolli-search-row-hover) !important;
}

/* Secondary text: description, SKU, price, category/brand tags. */
.dgwt-wcas-suggestion .dgwt-wcas-sd,
.dgwt-wcas-suggestion .dgwt-wcas-sku,
.dgwt-wcas-suggestion .dgwt-wcas-st-breadcrumbs,
.dgwt-wcas-suggestion .dgwt-wcas-sp,
.dgwt-wcas-suggestion .dgwt-wcas-sp * {
    color: var(--lolli-search-muted) !important;
}

/* Matched fragment and "show all results" row. */
.dgwt-wcas-suggestion .dgwt-wcas-st strong,
.dgwt-wcas-suggestion .dgwt-wcas-sp ins,
.dgwt-wcas-suggestion .dgwt-wcas-sp ins *,
.dgwt-wcas-suggestion-more,
.dgwt-wcas-suggestion-more * {
    color: var(--lolli-search-accent) !important;
    font-weight: 700;
}

.dgwt-wcas-suggestion-headline,
.dgwt-wcas-suggestion-headline * {
    color: var(--lolli-search-muted) !important;
}

.dgwt-wcas-suggestion-headline,
.dgwt-wcas-suggestion-more {
    background: transparent !important;
}

/* ----------------------------------------------------------------------
   Product details panel (right side of the dropdown)
------------------------------------------------------------------------ */
.dgwt-wcas-details-wrapp :is(h1, h2, h3, h4, h5, h6, p, span, div, li, del, ins, bdi, label),
.dgwt-wcas-details-wrapp a:not(.button):not(.add_to_cart_button) {
    color: var(--lolli-search-text) !important;
}

.dgwt-wcas-details-wrapp :is(.dgwt-wcas-pd-desc, .dgwt-wcas-pd-rating, .dgwt-wcas-pd-rating *, del, del *) {
    color: var(--lolli-search-muted) !important;
}

.dgwt-wcas-details-wrapp :is(.dgwt-wcas-pd-price, .dgwt-wcas-pd-price ins, .dgwt-wcas-pd-price ins *) {
    color: var(--lolli-search-accent) !important;
    font-weight: 700;
}

/* ----------------------------------------------------------------------
   Fallback WordPress search form (used when FiboSearch is not active)
------------------------------------------------------------------------ */
.lolli-header-search .search-form,
.lolli-search-modal .search-form {
    display: flex;
    gap: 8px;
    width: 100%;
}

.lolli-header-search .search-form label,
.lolli-search-modal .search-form label {
    flex: 1 1 auto;
}

.lolli-header-search .search-field,
.lolli-search-modal .search-field {
    width: 100%;
}

.lolli-header-search .search-submit,
.lolli-search-modal .search-submit {
    padding: 10px 16px;
    border: 0;
    border-radius: var(--lolli-radius-md, 14px);
    background: var(--lolli-accent-gradient, linear-gradient(135deg, #ff82da, #bd7dff));
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}