/* =====================================================================
   Ronelle Perfume — Premium Live Search (Phase 10)
   ---------------------------------------------------------------------
   Token-driven, RTL via logical properties, `rcs-*` namespaced. Served
   directly (no Tailwind build). Reuses tokens + the Phase 6.5 global infra
   (image fade, skeleton). One panel = desktop dropdown + mobile fullscreen
   (.is-fullscreen). The global reduced-motion rule calms rcs- animation? It
   targets rui-* only, so motion here is explicitly gated below.
   ===================================================================== */

.rcs { position: fixed; inset: 0; z-index: calc(var(--rui-z-header, 1020) + 30); visibility: hidden; pointer-events: none; }
.rcs.is-open { visibility: visible; pointer-events: auto; }

.rcs__overlay {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.18);
  opacity: 0; transition: opacity var(--rui-duration-base, 250ms) var(--rui-ease-standard, ease);
}
.rcs.is-open .rcs__overlay { opacity: 1; }

/* ---- Panel (desktop dropdown; JS sets top/inset-inline/width) ---- */
.rcs__panel {
  position: fixed;
  inset-block-start: 72px;
  inset-inline: 0;
  margin-inline: auto;
  width: min(640px, calc(100vw - 2rem));
  max-height: min(70vh, 560px);
  display: flex; flex-direction: column;
  background: var(--rui-bg, #fff);
  border: 1px solid var(--rui-border);
  border-radius: var(--rui-radius-xl);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  opacity: 0; transform: translateY(-8px);
  transition: opacity var(--rui-duration-base, 250ms) var(--rui-ease-standard, ease),
              transform var(--rui-duration-base, 250ms) var(--rui-ease-soft, ease);
}
.rcs.is-open .rcs__panel { opacity: 1; transform: translateY(0); }

/* ---- Fullscreen bar (hidden on desktop) ---- */
.rcs__bar { display: none; }

/* ---- Body ---- */
.rcs__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--rui-space-sm); }
.rcs__section + .rcs__section, .rcs__section + .rcs__empty { margin-block-start: var(--rui-space-sm); }
.rcs__section-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--rui-space-sm);
  padding: var(--rui-space-xs) var(--rui-space-sm);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; color: var(--rui-text-muted);
}
.rcs__section-head svg { vertical-align: middle; }
.rcs__clear { border: none; background: transparent; color: var(--rui-accent-strong, var(--rui-accent)); font-size: 0.74rem; font-weight: 600; cursor: pointer; }
.rcs__clear:hover { text-decoration: underline; }

/* ---- Recent search chips ---- */
.rcs__chips { display: flex; flex-wrap: wrap; gap: var(--rui-space-xs); padding-inline: var(--rui-space-sm); }
.rcs__chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--rui-border); border-radius: var(--rui-radius-pill);
  padding: 5px 12px; background: var(--rui-bg, #fff); cursor: pointer;
  font-size: 0.8rem; color: var(--rui-text); transition: var(--rui-transition-colors, color .2s);
}
.rcs__chip:hover { border-color: var(--rui-accent); color: var(--rui-accent-strong, var(--rui-accent)); }
.rcs__chip__x { border: none; background: transparent; color: var(--rui-text-subtle); cursor: pointer; line-height: 0; padding: 0; }
.rcs__chip__x:hover { color: #dc2626; }

/* ---- Result rows (ARIA options) ---- */
.rcs__list { display: flex; flex-direction: column; }
.rcs-row {
  display: grid; grid-template-columns: 56px 1fr auto; gap: var(--rui-space-sm);
  align-items: center; padding: var(--rui-space-sm);
  border-radius: var(--rui-radius-md); text-decoration: none; color: inherit;
  transition: background-color var(--rui-duration-fast, 150ms) var(--rui-ease-standard, ease);
}
.rcs-row:hover, .rcs-row.is-active { background: var(--rui-surface-sunken); }
.rcs-row.is-active { box-shadow: inset 0 0 0 1px var(--rui-border-strong); }
.rcs-row__media { width: 56px; height: 70px; }
.rcs-row__img { width: 56px; height: 70px; object-fit: cover; border-radius: var(--rui-radius-sm); background: var(--rui-surface-sunken); border: 1px solid var(--rui-border); display: block; }
.rcs-row__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rcs-row__name { font-size: 0.88rem; font-weight: 600; color: var(--rui-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcs-row__inspired { font-size: 0.72rem; color: var(--rui-accent-strong, var(--rui-accent)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcs-row__meta { display: flex; align-items: center; gap: var(--rui-space-xs); font-size: 0.72rem; color: var(--rui-text-muted); margin-block-start: 2px; }
.rcs-row__avail--in { color: #16a34a; }
.rcs-row__avail--out { color: #dc2626; }
.rcs-row__side { text-align: end; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.rcs-row__price { font-size: 0.84rem; font-weight: 700; color: var(--rui-text); white-space: nowrap; }
.rcs-row__compare { font-size: 0.7rem; color: var(--rui-text-subtle); text-decoration: line-through; white-space: nowrap; }
.rcs-row__disc { font-size: 0.66rem; font-weight: 700; color: #dc2626; }

/* ---- Skeleton rows (uses the global .rui-skeleton shimmer) ---- */
.rcs-skel { display: grid; grid-template-columns: 56px 1fr; gap: var(--rui-space-sm); padding: var(--rui-space-sm); align-items: center; }
.rcs-skel__img { width: 56px; height: 70px; border-radius: var(--rui-radius-sm); }
.rcs-skel__lines { display: flex; flex-direction: column; gap: 6px; }

/* ---- Empty ---- */
.rcs__empty { text-align: center; padding: var(--rui-space-lg) var(--rui-space-md) var(--rui-space-sm); }
.rcs__empty-icon { display: inline-flex; color: var(--rui-text-subtle); }
.rcs__empty-title { font-size: 0.95rem; font-weight: 700; color: var(--rui-text); margin: var(--rui-space-xs) 0 2px; }
.rcs__empty-text { font-size: 0.8rem; color: var(--rui-text-muted); margin: 0; }

/* ---- View all ---- */
.rcs__viewall {
  display: flex; align-items: center; justify-content: center; gap: var(--rui-space-xs);
  margin: var(--rui-space-sm); padding: var(--rui-space-sm);
  border-radius: var(--rui-radius-md); border: 1px solid var(--rui-border);
  font-size: 0.84rem; font-weight: 600; color: var(--rui-accent-strong, var(--rui-accent)); text-decoration: none;
  transition: var(--rui-transition-colors, color .2s);
}
.rcs__viewall:hover { background: var(--rui-surface-sunken); border-color: var(--rui-accent); }

/* ===================== Mobile fullscreen ===================== */
.rcs.is-fullscreen .rcs__overlay { background: rgba(0, 0, 0, 0.32); }
.rcs.is-fullscreen .rcs__panel {
  inset: 0; margin: 0; width: 100%; max-height: 100%; border: 0; border-radius: 0;
  transform: translateY(0); box-shadow: none;
}
.rcs.is-fullscreen .rcs__bar {
  display: flex; align-items: center; gap: var(--rui-space-xs);
  padding: var(--rui-space-sm) var(--rui-space-md);
  padding-block-start: calc(var(--rui-space-sm) + env(safe-area-inset-top, 0px));
  border-block-end: 1px solid var(--rui-border); position: sticky; inset-block-start: 0; background: var(--rui-bg, #fff); z-index: 1;
}
.rcs__bar-icon { color: var(--rui-text-subtle); display: inline-flex; }
.rcs__input {
  flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 1rem; color: var(--rui-text); padding: var(--rui-space-xs) 0;
}
.rcs__close {
  flex-shrink: 0; width: 40px; height: 40px; border: none; background: transparent;
  color: var(--rui-text-muted); border-radius: var(--rui-radius-pill); cursor: pointer;
}
.rcs__close:hover { background: var(--rui-surface-sunken); color: var(--rui-text); }
.rcs__bar:focus-within .rcs__bar-icon { color: var(--rui-accent); }

@media (prefers-reduced-motion: reduce) {
  .rcs__overlay, .rcs__panel { transition: none; }
}