/* ==========================================================================
   Athenian Site Search UI — MODERN / COMPACT / MOBILE-FIRST (SAFE)
   - Panel visibility: ONLY [hidden] (never display:none to hide)
   - Hovercard visibility: ONLY [data-open="1"] using visibility/opacity
   - Portal-safe hovercard (mounted under #ath-popover-layer)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Root / Tokens (align w/ AB header token patterns)
   -------------------------------------------------------------------------- */

:where(.ath-search){
  /* map to site tokens w/ safe fallbacks */
  --ath-accent:  var(--ctl-c1, #ec8639);
  --ath-accent2: var(--ctl-c2, #60a5fa);
  --ath-accent3: var(--ctl-c3, #63b3ed);

  --ath-fg:   var(--text-high, #f2f3f5);
  --ath-mid:  var(--text-mid,  #b7bcc7);
  --ath-low:  var(--text-low,  #8a90a0);

  --ath-s0:   var(--surface-0, #0b0b12);
  --ath-s1:   var(--surface-1, rgba(15,18,26,.72));
  --ath-s2:   var(--surface-2, rgba(15,18,26,.90));

  --ath-line:  var(--line-1, rgba(255,255,255,.10));
  --ath-line2: var(--line-2, rgba(255,255,255,.07));

  --ath-radius:    var(--radius, 12px);
  --ath-radius-lg: var(--radius-lg, 16px);

  --ath-shadow:  var(--shadow-lg, 0 18px 64px rgba(0,0,0,.58));
  --ath-shadow2: var(--shadow-md, 0 12px 30px rgba(0,0,0,.45));

  --ath-ring: color-mix(in oklch, var(--ath-accent2) 60%, transparent);

  /* compact knobs */
  --ath-bar-py: 8px;
  --ath-bar-px: 10px;
  --ath-bar-gap: 8px;
  --ath-icon: 18px;

  --ath-panel-gap: 8px;
  --ath-panel-pad: 10px;

  --ath-row-pad: 10px;
  --ath-row-gap: 10px;
  --ath-thumb: 42px;

  --ath-chip-gap: 8px;
  --ath-chip-py: 6px;
  --ath-chip-px: 10px;

  --ath-hint-fs: 11px;

  --ath-panel-left:  12px;
  --ath-panel-right: 12px;
  --ath-panel-top:   60px;

  position: relative;
  color: var(--ath-fg);
  isolation: isolate;
}

/* modes
   - default: uses site tokens if present
   - data-ath-style="plain": ignore site tokens; use plugin fallbacks only
   - data-ath-style="custom": use inline --ath-* vars (admin UI later)
*/
:where(.ath-search[data-ath-style="plain"]){
  --ath-accent:  #ec8639;
  --ath-accent2: #60a5fa;
  --ath-accent3: #63b3ed;

  --ath-fg:  #f2f3f5;
  --ath-mid: #b7bcc7;
  --ath-low: #8a90a0;

  --ath-s0: #0b0b12;
  --ath-s1: rgba(15,18,26,.72);
  --ath-s2: rgba(15,18,26,.90);

  --ath-line:  rgba(255,255,255,.10);
  --ath-line2: rgba(255,255,255,.07);

  --ath-radius: 12px;
  --ath-radius-lg: 16px;

  --ath-shadow: 0 18px 64px rgba(0,0,0,.58);
  --ath-shadow2: 0 12px 30px rgba(0,0,0,.45);

  --ath-ring: color-mix(in oklch, var(--ath-accent2) 60%, transparent);
}

/* --------------------------------------------------------------------------
   Search Bar (more “pill-like”, compact, mobile-friendly)
   -------------------------------------------------------------------------- */

:where(.ath-search__bar){
  display:grid;
  grid-template-columns: var(--ath-icon) 1fr auto;
  gap: var(--ath-bar-gap);
  align-items:center;

  padding: var(--ath-bar-py) var(--ath-bar-px);
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--ath-line) 85%, transparent);

  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--ath-accent2) 6%, transparent),
      transparent 62%),
    color-mix(in oklch, var(--ath-s1) 42%, transparent);

  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  min-width: 0;

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

:where(.ath-search__bar:hover){
  transform: translateY(-1px);
  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--ath-accent2) 8%, transparent),
      transparent 62%),
    color-mix(in oklch, var(--ath-s1) 60%, transparent);

  border-color: color-mix(in oklch, var(--ath-accent) 45%, var(--ath-line));
  box-shadow: 0 12px 30px rgba(0,0,0,.24);
}

:where(.ath-search__bar:focus-within){
  border-color: color-mix(in oklch, var(--ath-accent2) 55%, var(--ath-line));
  box-shadow: 0 0 0 4px var(--ath-ring), 0 12px 30px rgba(0,0,0,.26);
  transform: translateY(-1px);
}

:where(.ath-search__icon){
  width: var(--ath-icon);
  height: var(--ath-icon);
  opacity: .92;
  color: var(--ath-mid);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 18a8 8 0 1 1 5.293-14.293A8 8 0 0 1 10 18m11.707 2.293-5.387-5.387A9.95 9.95 0 0 0 20 10a10 10 0 1 0-10 10 9.95 9.95 0 0 0 4.906-1.68l5.387 5.387z'/%3E%3C/svg%3E")
    center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 18a8 8 0 1 1 5.293-14.293A8 8 0 0 1 10 18m11.707 2.293-5.387-5.387A9.95 9%3E%3C/path%3E%3C/svg%3E")
    center/contain no-repeat;
}

:where(.ath-search__input){
  width:100%;
  min-width:0;
  padding:0;
  border:0;
  outline:none;
  background:transparent;
  color:var(--ath-fg);

  font-size: 14px;
  line-height: 1.2;
}

:where(.ath-search__input::placeholder){
  color: color-mix(in oklch, var(--ath-mid) 70%, transparent);
}

:where(.ath-search__hint){
  color: var(--ath-low);
  font-size: var(--ath-hint-fs);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--ath-line2) 90%, transparent);
  background: color-mix(in oklch, var(--ath-s2) 55%, transparent);
  user-select:none;

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Hide the hint on very tight widths to keep bar compact */
@media (max-width: 520px){
  :where(.ath-search__bar){
    grid-template-columns: var(--ath-icon) 1fr;
  }
  :where(.ath-search__hint){
    display:none;
  }
}

/* --------------------------------------------------------------------------
   Results Panel (visibility ONLY by [hidden])
   -------------------------------------------------------------------------- */

:where(.ath-search__panel){
  position:absolute;
  left:0;
  right:0;
  top: calc(100% + var(--ath-panel-gap));

  z-index: 1000000;

  border-radius: var(--ath-radius-lg);
  border: 1px solid var(--ath-line);

  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--ath-accent2) 7%, transparent),
      transparent 58%),
    var(--ath-s2);

  box-shadow: var(--ath-shadow);
  overflow:hidden;

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* explicit “shown” safety */
:where(.ath-search__panel:not([hidden])){
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

/* fixed panel mode */
:where(.ath-search.is-fixedPanel .ath-search__panel){
  position: fixed;
  left: var(--ath-panel-left);
  right: var(--ath-panel-right);
  top: var(--ath-panel-top);
}

/* mobile: keep panel within viewport and scroll nicely */
@media (max-width: 720px){
  :where(.ath-search.is-fixedPanel .ath-search__panel){
    top: calc(var(--ath-panel-top) - 8px);
    max-height: min(70vh, 560px);
    overflow: hidden;
  }
}

/* --------------------------------------------------------------------------
   Panel Header (tighter, more “header pill” vibe)
   -------------------------------------------------------------------------- */

:where(.ath-search__panelHeader){
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;

  padding: 10px 12px;
  border-bottom: 1px solid var(--ath-line2);
}

:where(.ath-search__meta){
  font-size: 12px;
  color: var(--ath-mid);
  font-weight: 650;
}

:where(.ath-search__close){
  appearance:none;
  border: 1px solid color-mix(in oklch, var(--ath-line) 85%, transparent);
  background: color-mix(in oklch, var(--ath-s1) 38%, transparent);
  color: var(--ath-fg);
  border-radius: 999px;
  padding: 6px 10px;
  cursor:pointer;

  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

:where(.ath-search__close:hover){
  transform: translateY(-1px);
  background: color-mix(in oklch, var(--ath-s1) 58%, transparent);
  border-color: color-mix(in oklch, var(--ath-accent) 45%, var(--ath-line));
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}

:where(.ath-search__close:focus-visible){
  outline: 2px solid color-mix(in oklch, var(--ath-accent2) 60%, transparent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Chips (compact, scroll on mobile)
   -------------------------------------------------------------------------- */

:where(.ath-search__chips){
  display:flex;
  gap: var(--ath-chip-gap);
  padding: 10px 12px 0;
  flex-wrap: wrap;
}

:where(.ath-chip){
  border: 1px solid color-mix(in oklch, var(--ath-line) 85%, transparent);
  background: color-mix(in oklch, var(--ath-s1) 42%, transparent);
  color: var(--ath-fg);
  border-radius: 999px;
  padding: var(--ath-chip-py) var(--ath-chip-px);
  font-size: 12px;
  font-weight: 750;
  cursor:pointer;

  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

:where(.ath-chip:hover){
  transform: translateY(-1px);
  background: color-mix(in oklch, var(--ath-s1) 60%, transparent);
  border-color: color-mix(in oklch, var(--ath-accent2) 35%, var(--ath-line));
}

:where(.ath-chip.is-active){
  border-color: color-mix(in oklch, var(--ath-accent) 55%, var(--ath-line));
  background: color-mix(in oklch, var(--ath-accent) 14%, var(--ath-s1) 86%);
}

/* on narrow screens, keep chips in one row and allow swipe scroll */
@media (max-width: 520px){
  :where(.ath-search__chips){
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  :where(.ath-search__chips::-webkit-scrollbar){ display:none; }
  :where(.ath-chip){ white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   Results List (compact + readable)
   -------------------------------------------------------------------------- */

:where(.ath-search__list){
  display:grid;
  gap: 6px;
  padding: 10px 12px 12px;
}

:where(.ath-search__empty){
  color: var(--ath-mid);
  padding: 8px 2px;
  font-size: 13px;
  font-weight: 650;
}

/* Result Row (more compact, better truncation) */

:where(.ath-srow){
  display:grid;
  grid-template-columns: var(--ath-thumb) 1fr auto;
  gap: var(--ath-row-gap);
  align-items:center;

  padding: var(--ath-row-pad);
  border-radius: calc(var(--ath-radius) + 2px);
  border: 1px solid transparent;

  background: color-mix(in oklch, var(--ath-s1) 52%, transparent);
  color: inherit;
  text-decoration:none;
  position:relative;

  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

:where(.ath-srow:hover){
  transform: translateY(-1px);
  border-color: color-mix(in oklch, var(--ath-accent2) 35%, var(--ath-line));
  background: color-mix(in oklch, var(--ath-accent2) 10%, color-mix(in oklch, var(--ath-s1) 55%, transparent));
}

:where(.ath-srow.is-active),
:where(.ath-srow:focus-visible){
  outline:none;
  border-color: color-mix(in oklch, var(--ath-accent2) 55%, var(--ath-line));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ath-accent2) 35%, transparent);
  background: color-mix(in oklch, var(--ath-accent2) 12%, color-mix(in oklch, var(--ath-s1) 58%, transparent));
}

:where(.ath-srow__img){
  width: var(--ath-thumb);
  height: var(--ath-thumb);
  border-radius: 12px;
  border: 1px solid color-mix(in oklch, var(--ath-line2) 90%, transparent);
  background: color-mix(in oklch, var(--ath-s2) 55%, transparent);
  display:grid;
  place-items:center;
  overflow:hidden;
  flex: 0 0 auto;
}

:where(.ath-srow__img img){
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

:where(.ath-srow__main){
  min-width: 0; /* enables ellipsis */
}

:where(.ath-srow__title){
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: .1px;

  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

:where(.ath-srow__sub){
  margin-top: 3px;
  font-size: 12px;
  font-weight: 650;
  color: var(--ath-mid);

  display:-webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

:where(.ath-srow__price){
  font-weight: 950;
  color: color-mix(in oklch, var(--ath-accent) 70%, var(--ath-fg));
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: .15px;
}

/* tighter columns on very small screens */
@media (max-width: 420px){
  :where(.ath-search){ --ath-thumb: 38px; --ath-row-gap: 8px; --ath-row-pad: 9px; }
  :where(.ath-srow){ grid-template-columns: var(--ath-thumb) 1fr; }
  :where(.ath-srow__price){ display:none; } /* keep list compact */
}

/* --------------------------------------------------------------------------
   Hovercard Portal Layer
   -------------------------------------------------------------------------- */

#ath-popover-layer{
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 0 !important;
  height: 0 !important;
  z-index: 2147483647 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   ATH Hovercard — SAFE VISIBILITY (NO display:none)
   - Keep measurable at all times
   - Hide via visibility/opacity; show via [data-open="1"]
   ========================================================================== */

:where(.ath-hovercard){
  display: block !important;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483647;

  width: min(380px, calc(100vw - 24px));
  max-width: 380px;

  border-radius: var(--ath-radius-lg);
  border: 1px solid var(--ath-line);
  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--ath-accent2) 7%, transparent),
      transparent 58%),
    var(--ath-s2);

  box-shadow: var(--ath-shadow);
  padding: 12px;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  transform: translate3d(0,0,0) scale(.98);
  transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

:where(.ath-hovercard[data-open="1"]){
  visibility: visible;
  opacity: 1;
  pointer-events: auto;

  transform: translate3d(0,0,0) scale(1);
  transition: opacity 120ms ease, transform 120ms ease;
}

/* --------------------------------------------------------------------------
   Hovercard inner layout (compact, consistent type)
   -------------------------------------------------------------------------- */

:where(.ath-hovercard__grid){
  display:grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: start;
}

:where(.ath-hovercard__thumb){
  width: 64px;
  height: 64px;
  border-radius: 14px;
  border: 1px solid var(--ath-line2);
  background: color-mix(in oklch, var(--ath-s1) 55%, transparent);
  overflow:hidden;
}

:where(.ath-hovercard__thumb img){
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

:where(.ath-hovercard__kicker){
  font-size: 11px;
  color: var(--ath-low);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 2px;
  font-weight: 750;
}

:where(.ath-hovercard__title){
  font-weight: 900;
  line-height: 1.15;

  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

:where(.ath-hovercard__price){
  margin-top: 5px;
  font-weight: 950;
  color: color-mix(in oklch, var(--ath-accent) 70%, var(--ath-fg));
}

:where(.ath-hovercard__desc){
  margin-top: 6px;
  font-size: 12px;
  color: var(--ath-mid);
  line-height: 1.35;

  display:-webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

:where(.ath-hovercard__cta){
  display:flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* Buttons */
:where(.ath-cta){
  border: 1px solid color-mix(in oklch, var(--ath-line) 85%, transparent);
  background: color-mix(in oklch, var(--ath-s1) 45%, transparent);
  color: var(--ath-fg);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 800;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap: 8px;

  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

:where(.ath-cta:hover){
  transform: translateY(-1px);
  border-color: color-mix(in oklch, var(--ath-accent2) 35%, var(--ath-line));
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}

:where(.ath-cta--primary){
  border-color: color-mix(in oklch, var(--ath-accent) 55%, var(--ath-line));
  background: color-mix(in oklch, var(--ath-accent) 14%, var(--ath-s1) 86%);
}

/* --------------------------------------------------------------------------
   Loading
   -------------------------------------------------------------------------- */

:where(.ath-search.is-loading .ath-search__hint){
  opacity: .65;
}

/* --------------------------------------------------------------------------
   OPTIONAL: if your row markup can wrap main text in .ath-srow__main,
   keep this helper (no harm if unused).
   -------------------------------------------------------------------------- */
:where(.ath-srow__main){ min-width: 0; }