/* AWTSearch — iOS 26 / macOS Tahoe glass */
/* 2.4.1: a new file name (awt-search.css was 2.4.0) so WP Rocket minifies it fresh: its minified copy is keyed on the
   path and never rebuilt for a changed file. Same rules as 2.4.0 plus the footer block at the end. */
.awt-search { position: relative; width: 100%; max-width: 480px; font: 14px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #fff; }

.awt-search__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  height: 38px; min-height: 38px; max-height: 38px;
  border-radius: 999px;
  box-sizing: border-box;
  background: rgba(255,255,255,0.16);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
          backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 6px 22px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.30);
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease, transform .15s ease;
}
.awt-search__bar:focus-within {
  background: rgba(255,255,255,0.20);
  border-color: rgba(255,255,255,0.45);
  box-shadow: 0 8px 28px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.35);
}

.awt-search__icon { width: 16px; height: 16px; opacity: .85; flex: none; }
input[type="search"].awt-search__input,
.awt-search__input {
  flex: 1 1 auto; min-width: 0; max-width: 100%;
  border: 0 !important; outline: 0 !important; box-shadow: none !important;
  background: transparent !important; color: inherit !important;
  font-size: 14px !important; line-height: 1.2 !important;
  padding: 0 !important; margin: 0 !important;
  height: 22px !important; min-height: 0 !important;
  box-sizing: content-box !important;
  -webkit-appearance: none !important; appearance: none !important;
  vertical-align: middle;
}
.awt-search__input::-webkit-search-decoration,
.awt-search__input::-webkit-search-cancel-button,
.awt-search__input::-webkit-search-results-button,
.awt-search__input::-webkit-search-results-decoration { -webkit-appearance: none; display: none; }
.awt-search__input::placeholder { color: rgba(255,255,255,0.65); }

/* X clear button — bigger glyph, no hover background, just brightens.
   Hard !important resets to defeat Flatsome's button defaults (min-height 33.95, margin, border-radius, line-height). */
button.awt-search__clear,
.awt-search__clear {
  display: none !important;
  align-items: center !important; justify-content: center !important;
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  color: inherit !important;
  width: 22px !important; min-width: 0 !important;
  height: 22px !important; min-height: 0 !important; max-height: 22px !important;
  padding: 0 !important;
  margin: 0 0 0 4px !important;
  cursor: pointer !important;
  line-height: 1 !important;
  font-size: 0 !important;
  border-radius: 50% !important;
  opacity: .5 !important;
  transition: opacity .15s ease !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  vertical-align: middle !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  -webkit-appearance: none !important; appearance: none !important;
  text-shadow: none !important;
}
.awt-search.is-active button.awt-search__clear,
.awt-search.is-active .awt-search__clear { display: inline-flex !important; }
button.awt-search__clear:hover,
button.awt-search__clear:focus,
.awt-search__clear:hover,
.awt-search__clear:focus {
  opacity: 1 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  transform: none !important;
}
.awt-search__clear svg { width: 14px !important; height: 14px !important; display: block !important; }
.awt-search.is-active .awt-search__clear { display: inline-flex; align-items: center; justify-content: center; }

.awt-search__results {
  position: absolute; left: 0; right: auto; top: calc(100% + 10px); z-index: 99999;
  min-width: 475px;
  width: max-content; max-width: min(560px, calc(100vw - 24px));
  max-height: 70vh; overflow: auto;
  border-radius: 20px;
  background: rgba(20,20,22,0.86);
  -webkit-backdrop-filter: saturate(180%) blur(32px);
          backdrop-filter: saturate(180%) blur(32px);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 24px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.14);
  padding: 8px;
  color: #fff;
  animation: awt-search-pop .18s ease-out;
}
@keyframes awt-search-pop {
  from { opacity: 0; transform: translateY(-4px) scale(.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.awt-search__results[hidden] { display: none; }

/* When dropdown is wider than the input column, let it spill right. */
.awt-search--spill .awt-search__results { right: auto; min-width: 380px; max-width: 460px; }

.awt-search__item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 14px; cursor: pointer; text-decoration: none; color: inherit;
  transition: background .12s ease, transform .12s ease;
}
.awt-search__item + .awt-search__item { border-top: 1px solid rgba(255,255,255,0.05); }
.awt-search__item:hover, .awt-search__item.is-focused {
  background: rgba(255,255,255,0.10);
  transform: translateY(-1px);
}
.awt-search__thumb {
  width: 48px; height: 48px; flex: none; border-radius: 12px; background: rgba(255,255,255,0.06);
  object-fit: cover; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
.awt-search__body { flex: 1; min-width: 0; }
.awt-search__title { font-weight: 600; font-size: 14px; margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.awt-search__snippet { font-size: 12px; opacity: .82; margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
.awt-search__meta { font-size: 11px; opacity: .6; margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }
.awt-search__price { font-size: 13px; opacity: .98; margin-top: 4px; color: #ffd476 !important; font-weight: 600; line-height: 1.4; }
.awt-search__price:empty { display: none; }
.awt-search__price del,
.awt-search__price del *,
.awt-search__price del .amount,
.awt-search__price del .woocommerce-Price-amount,
.awt-search__price del span,
.awt-search__price del bdi {
  text-decoration: line-through !important;
  text-decoration-color: rgba(255, 212, 118, 0.85) !important;
  text-decoration-thickness: 2px !important;
}
.awt-search__price del { opacity: .7 !important; font-weight: 500; margin-right: 6px; color: rgba(255,212,118,0.7) !important; }
.awt-search__price ins { font-weight: 700; }
.awt-search__price ins { text-decoration: none !important; }
.awt-search__price .amount,
.awt-search__price .woocommerce-Price-amount,
.awt-search__price .woocommerce-Price-currencySymbol,
.awt-search__price bdi,
.awt-search__price span,
.awt-search__price del,
.awt-search__price ins { color: inherit !important; background: transparent !important; visibility: visible !important; }
.awt-search__price .woocommerce-Price-amount,
.awt-search__price .amount { display: inline-block !important; }
.awt-search__price del,
.awt-search__price ins,
.awt-search__price bdi { display: inline !important; }
.awt-search__price .screen-reader-text { display: none !important; }
.awt-search__stars { color: #d3a13d; opacity: 1; letter-spacing: 1px; font-size: 13px; text-transform: none; }
.awt-search__empty, .awt-search__loading {
  padding: 18px; text-align: center; opacity: .82; font-size: 13px;
}

/* Skeleton shimmer loading state — sheer gradient sweep across thumb + lines */
.awt-search__skel {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 14px;
  animation: awt-skel-fade .5s ease-out both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.awt-search__skel + .awt-search__skel { border-top: 1px solid rgba(255,255,255,0.05); }
.awt-search__skel-thumb {
  width: 48px; height: 48px; flex: none; border-radius: 12px;
  background: rgba(255,255,255,0.06);
  position: relative; overflow: hidden;
}
.awt-search__skel-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.awt-search__skel-line {
  height: 10px; border-radius: 6px;
  background: rgba(255,255,255,0.06);
  position: relative; overflow: hidden;
}
.awt-search__skel-title { height: 14px; }
.awt-search__skel-thumb::after,
.awt-search__skel-line::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255,255,255,0.04) 35%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.04) 65%,
    transparent 100%);
  background-size: 220% 100%;
  animation: awt-skel-shimmer 1.4s linear infinite;
}
.awt-search__skel-line::after { animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes awt-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -120% 0; }
}
@keyframes awt-skel-fade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Light-mode skeleton */
@media (prefers-color-scheme: light) {
  .awt-search__skel-thumb,
  .awt-search__skel-line { background: rgba(0,0,0,0.06); }
  .awt-search__skel-thumb::after,
  .awt-search__skel-line::after {
    background: linear-gradient(110deg,
      transparent 0%, rgba(0,0,0,0.02) 35%, rgba(0,0,0,0.10) 50%, rgba(0,0,0,0.02) 65%, transparent 100%);
    background-size: 220% 100%;
  }
}
/* Force dark skeleton in footer regardless of preference */
.dark .awt-search__skel-thumb,
.dark .awt-search__skel-line,
.footer-widgets .awt-search__skel-thumb,
.footer-widgets .awt-search__skel-line,
footer .awt-search__skel-thumb,
footer .awt-search__skel-line { background: rgba(255,255,255,0.06) !important; }
.dark .awt-search__skel-thumb::after,
.dark .awt-search__skel-line::after,
.footer-widgets .awt-search__skel-thumb::after,
.footer-widgets .awt-search__skel-line::after,
footer .awt-search__skel-thumb::after,
footer .awt-search__skel-line::after {
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.04) 35%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.04) 65%, transparent 100%) !important;
  background-size: 220% 100% !important;
}
.awt-search__type { display: none; }

/* Type badge — sits beside title, real labeled pill */
.awt-search__head { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.awt-search__head .awt-search__title { flex: 1; min-width: 0; margin-bottom: 0; }
.awt-search__badge {
  display: inline-flex; align-items: center; flex: none;
  font-size: 8px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .06em;
  line-height: 1.2;
  background: rgba(255,255,255,0.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.awt-search__badge--product { background: linear-gradient(135deg,#5b8eff,#3a6dff); border-color: rgba(255,255,255,0.18); color: #fff; }
.awt-search__badge--page    { background: linear-gradient(135deg,#7c5cff,#5a3dff); border-color: rgba(255,255,255,0.18); color: #fff; }
.awt-search__badge--post    { background: linear-gradient(135deg,#34c87b,#1f9a5a); border-color: rgba(255,255,255,0.18); color: #fff; }
.awt-search__badge--review  { background: linear-gradient(135deg,#d3a13d,#a87a1f); border-color: rgba(255,255,255,0.18); color: #fff; }

/* Highlight matched substring */
.awt-search__hl { background: rgba(255, 212, 118, 0.30); border-radius: 4px; padding: 0 2px; color: inherit; }

/* Mobile: dropdown spans column width, smaller min, smaller items, ALWAYS LEFT-ALIGNED */
@media (max-width: 600px) {
  .awt-search { max-width: none; margin-left: 0 !important; margin-right: auto !important; text-align: left !important; }
  .awt-search__bar { margin-left: 0 !important; margin-right: auto !important; padding: 0 12px !important; }
  .awt-search__results {
    min-width: 0 !important; width: 100% !important; max-width: calc(100vw - 24px);
    max-height: 55vh; left: 0 !important; right: auto !important;
    margin-left: 0 !important;
  }
  .awt-search--up .awt-search__results { top: auto; bottom: calc(100% + 10px); }
  .awt-search__thumb { width: 40px; height: 40px; border-radius: 10px; }
  .awt-search__title { font-size: 13px; }
  .awt-search__snippet { font-size: 11px; -webkit-line-clamp: 2; }
  .awt-search__item { justify-content: flex-start; text-align: left; }
}

/* Light scheme */
@media (prefers-color-scheme: light) {
  .awt-search { color: #1c1c1e; }
  .awt-search__bar { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.10); box-shadow: 0 6px 24px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.7); }
  .awt-search__bar:focus-within { background: rgba(255,255,255,0.92); border-color: rgba(0,0,0,0.20); }
  .awt-search__input::placeholder { color: rgba(0,0,0,0.5); }
  .awt-search__clear { background: rgba(0,0,0,0.08); }
  .awt-search__results { background: rgba(255,255,255,0.92); color: #1c1c1e; border-color: rgba(0,0,0,0.10); }
  .awt-search__item:hover, .awt-search__item.is-focused { background: rgba(0,0,0,0.05); }
  .awt-search__thumb { background: rgba(0,0,0,0.04); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
  .awt-search__type { background: rgba(0,0,0,0.07); }
  .awt-search__price { color: #1f7a3a; }
}

/* Footer override — Ella's footer is dark, force dark glass even when light scheme is preferred.
   Uses .dark (Flatsome footer adds this) + .footer-widgets selectors at high specificity. */
.dark .awt-search,
.footer-widgets .awt-search,
.footer .awt-search,
.footer-2 .awt-search,
footer .awt-search { color: #fff !important; }

.dark .awt-search__bar,
.footer-widgets .awt-search__bar,
.footer .awt-search__bar,
.footer-2 .awt-search__bar,
footer .awt-search__bar {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.24) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.30) !important;
}

.dark .awt-search__bar:focus-within,
.footer-widgets .awt-search__bar:focus-within,
.footer .awt-search__bar:focus-within,
.footer-2 .awt-search__bar:focus-within,
footer .awt-search__bar:focus-within {
  background: rgba(255,255,255,0.20) !important;
  border-color: rgba(255,255,255,0.55) !important;
}

.dark .awt-search__input,
.footer-widgets .awt-search__input,
.footer .awt-search__input,
.footer-2 .awt-search__input,
footer .awt-search__input {
  background: transparent !important; color: #fff !important;
  -webkit-text-fill-color: #fff !important; /* Safari forced color override */
}
.dark .awt-search__input::placeholder,
.footer-widgets .awt-search__input::placeholder,
.footer .awt-search__input::placeholder,
.footer-2 .awt-search__input::placeholder,
footer .awt-search__input::placeholder { color: rgba(255,255,255,0.7) !important; }

.dark .awt-search__results,
.footer-widgets .awt-search__results,
.footer .awt-search__results,
.footer-2 .awt-search__results,
footer .awt-search__results {
  background: rgba(20,20,22,0.94) !important; color: #fff !important;
  border-color: rgba(255,255,255,0.18) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.14) !important;
  min-width: 380px;
}

.dark .awt-search__title,
.footer-widgets .awt-search__title,
footer .awt-search__title { color: #fff !important; }

.dark .awt-search__price,
.footer-widgets .awt-search__price,
.footer .awt-search__price,
.footer-2 .awt-search__price,
footer .awt-search__price { color: #ffd476 !important; }

.dark .awt-search__item:hover,
.dark .awt-search__item.is-focused,
.footer-widgets .awt-search__item:hover,
.footer-widgets .awt-search__item.is-focused,
footer .awt-search__item:hover,
footer .awt-search__item.is-focused { background: rgba(255,255,255,0.10) !important; }

/* Theme override: kill input UA fill background that WP / Flatsome forces */
.awt-search__input,
input.awt-search__input,
input[type="search"].awt-search__input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
input.awt-search__input:focus,
input[type="search"].awt-search__input:focus { box-shadow: none !important; outline: none !important; }

/* Ensure footer overflow doesn't clip the dropdown */
.footer-widgets, .footer-widgets .col, .footer .col, .footer-2 .col { overflow: visible !important; }

/* 2.4.1 (2026-11-01): the results open behind the next footer column on a phone. Up to 849px wide the newsletter
   plugin locks every footer box to `overflow: hidden !important` (body .footer-widgets, .row, .col, .widget,
   .textwidget, .custom-html-widget), so a wide child cannot push the footer past the screen. Its selectors outrank the
   2.4.0 rule above, so the open results were cut off at the bottom of the search's own column and the next column
   showed where they should be. At those widths only the boxes that hold the search let the results out; every other
   footer box keeps the newsletter's lock, each column is still held to the screen's width by it, and the page itself
   clips sideways (body), so nothing scrolls wider. One class more than `body .footer-widgets .col` wins; above 849px
   the 2.4.0 rule already applies. */
@media (max-width: 849px) {
  body .footer-widgets:has(.awt-search),
  body .footer-widgets .row:has(.awt-search),
  body .footer-widgets .col:has(.awt-search),
  body .footer-widgets .widget:has(.awt-search),
  body .footer-widgets .textwidget:has(.awt-search),
  body .footer-widgets .custom-html-widget:has(.awt-search) {
    overflow: visible !important;
  }
  /* the footer column centres its text; the open results read left-aligned, as they do under 600px */
  body .footer-widgets .awt-search__results { text-align: left; }
}
