/*
 * Rex Woo Search — style presets.
 *
 * Each preset is a `rws-style-{name}` class on the search bar wrapper.
 * The same class is mirrored by JS onto the suggestions dropdown and
 * the details panel, so presets can restyle them too.
 *
 * The preset identity (`rws-style-X` and the panel class) is wrapped in
 * :where() so it contributes ZERO specificity. Presets still beat the base
 * rws-search.css by source order (this file is enqueued after it), while the
 * per-site dynamic color CSS — printed after this file at the same low
 * specificity — wins the tie and overrides presets, as intended.
 */

/* ------------------------------------------------------------------ */
/* 1. default (Classic) — base look, defined in rws-search.css        */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* 2. pill — fully rounded                                            */
/* ------------------------------------------------------------------ */

:where(.rws-style-pill) .rws-search-input {
	border-radius: 999px;
	padding-left: 20px;
	padding-right: 44px;
}

:where(.rws-style-pill) .rws-search-submit {
	border-radius: 999px;
	padding: 0 22px;
}

:where(.rws-style-pill).rws-suggestions-wrapp {
	border-radius: 14px;
	margin-top: 6px;
}

:where(.rws-style-pill).rws-details-wrapp {
	border-radius: 14px;
}

/* ------------------------------------------------------------------ */
/* 3. underline — minimal, bottom border only                          */
/* ------------------------------------------------------------------ */

:where(.rws-style-underline) .rws-search-input {
	border: none;
	border-bottom: 2px solid #ccc;
	border-radius: 0;
	background: transparent;
	padding-left: 2px;
}

:where(.rws-style-underline) .rws-search-input:focus {
	border-bottom-color: #333;
	box-shadow: none;
}

:where(.rws-style-underline) .rws-search-submit {
	background: transparent;
	color: #333;
	border-bottom: 2px solid #ccc;
	border-radius: 0;
}

:where(.rws-style-underline).rws-suggestions-wrapp {
	border-radius: 0;
	border-top: 2px solid #333;
}

/* ------------------------------------------------------------------ */
/* 4. solid — filled input, borderless                                 */
/* ------------------------------------------------------------------ */

:where(.rws-style-solid) .rws-search-input {
	border: none;
	background: #f0f2f5;
	border-radius: 8px;
}

:where(.rws-style-solid) .rws-search-input:focus {
	background: #e8eaef;
	box-shadow: none;
}

:where(.rws-style-solid) .rws-search-submit {
	border-radius: 8px;
}

:where(.rws-style-solid).rws-suggestions-wrapp {
	border: none;
	border-radius: 8px;
	margin-top: 4px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
}

/* ------------------------------------------------------------------ */
/* 5. dark — dark input and dark dropdown                              */
/* ------------------------------------------------------------------ */

:where(.rws-style-dark) .rws-search-input {
	background: #1f2229;
	border-color: #33363f;
	color: #e8e8e8;
}

:where(.rws-style-dark) .rws-search-input::placeholder {
	color: #9aa0ab;
}

:where(.rws-style-dark) .rws-input-magnifier,
:where(.rws-style-dark) .rws-preloader {
	color: #9aa0ab;
}

:where(.rws-style-dark) .rws-search-submit {
	background: #4a5160;
	color: #fff;
}

:where(.rws-style-dark).rws-suggestions-wrapp,
:where(.rws-style-dark).rws-details-wrapp {
	background: #23262e;
	border-color: #33363f;
}

:where(.rws-style-dark.rws-suggestions-wrapp) .rws-suggestion {
	color: #d6d9de;
	border-bottom-color: #2c2f38;
}

:where(.rws-style-dark.rws-suggestions-wrapp) .rws-suggestion.rws-selected {
	background: #2e323c;
}

:where(.rws-style-dark.rws-suggestions-wrapp) .rws-suggestion-headline {
	background: #1d2027;
	color: #8b919c;
}

:where(.rws-style-dark.rws-suggestions-wrapp) .rws-suggestion-more {
	background: #1d2027;
	color: #c3c7cd;
}

:where(.rws-style-dark.rws-suggestions-wrapp) .rws-price,
:where(.rws-style-dark.rws-details-wrapp) .rws-details-price {
	color: #fff;
}

:where(.rws-style-dark.rws-suggestions-wrapp) .rws-sku,
:where(.rws-style-dark.rws-suggestions-wrapp) .rws-desc,
:where(.rws-style-dark.rws-suggestions-wrapp) .rws-breadcrumbs {
	color: #8b919c;
}

:where(.rws-style-dark.rws-suggestions-wrapp) .rws-tax-count {
	background: #2e323c;
	color: #c3c7cd;
}

:where(.rws-style-dark.rws-details-wrapp) .rws-details-title,
:where(.rws-style-dark.rws-details-wrapp) .rws-details-desc,
:where(.rws-style-dark.rws-details-wrapp) .rws-details-term-product {
	color: #d6d9de;
}

:where(.rws-style-dark.rws-details-wrapp) .rws-details-sku,
:where(.rws-style-dark.rws-details-wrapp) .rws-details-rating {
	color: #8b919c;
}

:where(.rws-style-dark).rws-mobile-overlay {
	background: #1a1d23;
}

:where(.rws-style-dark.rws-mobile-overlay) .rws-mobile-back {
	color: #d6d9de;
}

:where(.rws-style-dark.rws-mobile-overlay) .rws-mobile-bar {
	border-bottom-color: #33363f;
}

/* ------------------------------------------------------------------ */
/* 6. outline-bold — thick border, square corners                      */
/* ------------------------------------------------------------------ */

:where(.rws-style-outline-bold) .rws-search-input {
	border: 2px solid #111;
	border-radius: 0;
}

:where(.rws-style-outline-bold) .rws-search-input:focus {
	box-shadow: 3px 3px 0 #111;
}

:where(.rws-style-outline-bold) .rws-search-submit {
	border-radius: 0;
	background: #111;
	margin-left: 8px;
}

:where(.rws-style-outline-bold).rws-suggestions-wrapp {
	border: 2px solid #111;
	border-radius: 0;
	box-shadow: 5px 5px 0 rgba(17, 17, 17, .85);
}

:where(.rws-style-outline-bold).rws-details-wrapp {
	border: 2px solid #111;
	border-radius: 0;
}

/* ------------------------------------------------------------------ */
/* 7. shadow — elevated, borderless, soft shadow                       */
/* ------------------------------------------------------------------ */

:where(.rws-style-shadow) .rws-search-input {
	border: none;
	border-radius: 10px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
}

:where(.rws-style-shadow) .rws-search-input:focus {
	box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}

:where(.rws-style-shadow) .rws-search-submit {
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

:where(.rws-style-shadow).rws-suggestions-wrapp {
	border: none;
	border-radius: 10px;
	margin-top: 8px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
}

:where(.rws-style-shadow).rws-details-wrapp {
	border: none;
	border-radius: 10px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
}

/* ------------------------------------------------------------------ */
/* 8. compact — reduced height and font size                           */
/* ------------------------------------------------------------------ */

:where(.rws-style-compact) .rws-search-input {
	min-height: 34px;
	padding: 4px 32px 4px 10px;
	font-size: 13px;
	border-radius: 4px;
}

:where(.rws-style-compact) .rws-input-magnifier {
	width: 14px;
	height: 14px;
	right: 9px;
}

:where(.rws-style-compact) .rws-search-submit {
	min-height: 34px;
	padding: 0 12px;
	font-size: 12px;
	border-radius: 4px;
}

:where(.rws-style-compact.rws-suggestions-wrapp) .rws-suggestion {
	padding: 6px 10px;
	font-size: 13px;
}

:where(.rws-style-compact.rws-suggestions-wrapp) .rws-si {
	width: 32px;
	height: 32px;
}

/* ------------------------------------------------------------------ */
/* 9. split — submit button attached to the input                      */
/* ------------------------------------------------------------------ */

:where(.rws-style-split) .rws-form-inner {
	gap: 0;
}

:where(.rws-style-split) .rws-search-input {
	border-radius: 6px 0 0 6px;
	border-right: none;
}

:where(.rws-style-split) .rws-search-submit {
	margin: 0;
	border-radius: 0 6px 6px 0;
}

:where(.rws-style-split.rws-rtl) .rws-search-input {
	border-radius: 0 6px 6px 0;
	border-right: 1px solid #ddd;
	border-left: none;
}

:where(.rws-style-split.rws-rtl) .rws-search-submit {
	border-radius: 6px 0 0 6px;
}

/* ------------------------------------------------------------------ */
/* 10. glass — translucent with backdrop blur                          */
/* ------------------------------------------------------------------ */

:where(.rws-style-glass) .rws-search-input {
	background: rgba(255, 255, 255, .55);
	border: 1px solid rgba(255, 255, 255, .65);
	border-radius: 12px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

:where(.rws-style-glass) .rws-search-input:focus {
	background: rgba(255, 255, 255, .75);
	border-color: rgba(255, 255, 255, .9);
}

:where(.rws-style-glass) .rws-search-submit {
	background: rgba(255, 255, 255, .45);
	color: #222;
	border-radius: 12px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

:where(.rws-style-glass).rws-suggestions-wrapp {
	background: rgba(255, 255, 255, .82);
	border: 1px solid rgba(255, 255, 255, .65);
	border-radius: 12px;
	margin-top: 6px;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

:where(.rws-style-glass.rws-suggestions-wrapp) .rws-suggestion {
	border-bottom-color: rgba(0, 0, 0, .05);
}

:where(.rws-style-glass.rws-suggestions-wrapp) .rws-suggestion.rws-selected {
	background: rgba(255, 255, 255, .8);
}

:where(.rws-style-glass.rws-suggestions-wrapp) .rws-suggestion-headline,
:where(.rws-style-glass.rws-suggestions-wrapp) .rws-suggestion-more {
	background: rgba(255, 255, 255, .4);
}

:where(.rws-style-glass).rws-details-wrapp {
	background: rgba(255, 255, 255, .85);
	border: 1px solid rgba(255, 255, 255, .65);
	border-radius: 12px;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}