/**
 * Super Aesthetic Search Bar — @code_candy
 * Cercle idle → expansion .awake (cubic-bezier .22,1,.36,1)
 * Couleurs alignées par boutique
 */

.lgk-search-awake {
  --sa-size: 52px;
  --sa-max: min(420px, 52vw);
  --sa-panel-w: min(32rem, calc(100vw - 1.5rem));
  --sa-bg: #0d2a2e;
  --sa-ring: rgba(0, 212, 255, 0.45);
  --sa-icon: #5ce1ff;
  --sa-glow: rgba(0, 212, 255, 0.35);
  --sa-text: #e8f7fb;
  --sa-muted: rgba(200, 220, 230, 0.55);
  --sa-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: var(--sa-size);
  max-width: var(--sa-max);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transition: width 0.58s var(--sa-ease);
}

.lgk-search-awake.is-awake {
  width: var(--sa-max);
  align-items: stretch;
}

.lgk-search-awake__shell {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--sa-size);
  border-radius: 999px;
  background: var(--sa-bg);
  border: 1px solid color-mix(in srgb, var(--sa-icon) 35%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sa-ring) 40%, transparent),
    0 0 22px var(--sa-glow),
    inset 0 0 18px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transition:
    width 0.58s var(--sa-ease),
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease;
}

.lgk-search-awake.has-panel .lgk-search-awake__shell {
  overflow: visible;
  border-bottom-left-radius: 1.1rem;
  border-bottom-right-radius: 1.1rem;
}

.lgk-search-awake.is-awake .lgk-search-awake__shell {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sa-icon) 55%, transparent),
    0 0 32px var(--sa-glow),
    0 12px 36px rgba(0, 0, 0, 0.35),
    inset 0 0 20px rgba(0, 0, 0, 0.28);
}

.lgk-search-awake__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: var(--sa-text) !important;
  font-size: 0.92rem !important;
  padding: 0 0.85rem 0 1.1rem !important;
  opacity: 0;
  width: 0;
  pointer-events: none;
  transition:
    opacity 0.28s ease 0.08s,
    width 0.58s var(--sa-ease),
    padding 0.35s ease;
}

.lgk-search-awake.is-awake .lgk-search-awake__input {
  opacity: 1;
  width: auto;
  pointer-events: auto;
  padding: 0 4.6rem 0 1.15rem !important;
}

/* Une seule croix custom — masquer les clear natifs navigateur */
.lgk-search-awake__input::-webkit-search-cancel-button,
.lgk-search-awake__input::-webkit-search-decoration,
.lgk-search-awake__input::-webkit-search-results-button,
.lgk-search-awake__input::-webkit-search-results-decoration,
.lgk-search-awake__input::-ms-clear,
.lgk-search-awake__input::-ms-reveal {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.lgk-search-awake__input::placeholder {
  color: var(--sa-muted) !important;
}

.lgk-search-awake__toggle,
.lgk-search-awake__submit {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: var(--sa-size);
  height: var(--sa-size);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sa-icon);
  cursor: pointer;
  z-index: 2;
  transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.lgk-search-awake__toggle:hover,
.lgk-search-awake__submit:hover {
  color: #fff;
  transform: translateY(-50%) scale(1.04);
}

.lgk-search-awake__toggle:focus-visible,
.lgk-search-awake__submit:focus-visible {
  outline: 2px solid var(--sa-icon);
  outline-offset: 2px;
}

.lgk-search-awake__toggle svg,
.lgk-search-awake__submit svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.lgk-search-awake.is-awake .lgk-search-awake__toggle {
  opacity: 0;
  pointer-events: none;
}

.lgk-search-awake:not(.is-awake) .lgk-search-awake__submit {
  opacity: 0;
  pointer-events: none;
}

.lgk-search-awake__close {
  position: absolute;
  right: calc(var(--sa-size) - 0.1rem);
  top: 50%;
  transform: translateY(-50%) scale(0.6);
  width: 1.65rem;
  height: 1.65rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sa-icon) 18%, transparent);
  color: var(--sa-text);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  z-index: 3;
  transition:
    opacity 0.25s ease 0.12s,
    transform 0.35s var(--sa-ease);
}

.lgk-search-awake.is-awake .lgk-search-awake__close {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

.lgk-search-awake__close svg {
  width: 0.85rem;
  height: 0.85rem;
  display: block;
  pointer-events: none;
}

.lgk-search-awake__panel {
  position: absolute;
  right: 0;
  left: auto;
  top: calc(100% + 0.45rem);
  z-index: 80;
  width: var(--sa-panel-w);
  max-width: calc(100vw - 1.25rem);
  max-height: min(78vh, 34rem);
  overflow: auto;
  padding: 0.65rem 0.45rem 0.55rem;
  border-radius: 1.05rem;
  border: 1px solid color-mix(in srgb, var(--sa-icon) 32%, transparent);
  background: color-mix(in srgb, var(--sa-bg) 94%, #000);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sa-ring) 35%, transparent),
    0 22px 48px rgba(0, 0, 0, 0.5),
    0 0 32px var(--sa-glow);
  text-align: left;
  -webkit-overflow-scrolling: touch;
}

.lgk-search-awake__panel-status {
  margin: 0;
  padding: 0.65rem 0.85rem;
  font-size: 0.82rem;
  color: var(--sa-muted);
}

.lgk-search-awake__group {
  margin: 0.15rem 0 0.35rem;
}

.lgk-search-awake__group-label {
  margin: 0;
  padding: 0.35rem 0.85rem 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sa-icon);
}

.lgk-search-awake__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lgk-search-awake__hit {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.15rem 0.3rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.75rem;
  color: var(--sa-text);
  text-decoration: none;
  transition: background 0.15s ease;
}

.lgk-search-awake__hit:hover,
.lgk-search-awake__hit:focus-visible {
  background: color-mix(in srgb, var(--sa-icon) 16%, transparent);
  outline: none;
}

.lgk-search-awake__hit--product {
  min-height: 3.35rem;
}

.lgk-search-awake__hit-media {
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  border-radius: 0.55rem;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid color-mix(in srgb, var(--sa-icon) 22%, transparent);
  display: grid;
  place-items: center;
}

.lgk-search-awake__hit-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.lgk-search-awake__hit-ph {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--sa-icon);
  line-height: 1;
}

.lgk-search-awake__hit-label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.9rem;
  line-height: 1.35;
  font-weight: 600;
  flex: 1 1 auto;
  min-width: 0;
}

.lgk-search-awake__see-all {
  display: block;
  margin: 0.35rem 0.35rem 0.15rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.65rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--sa-icon);
  text-decoration: none;
  background: color-mix(in srgb, var(--sa-icon) 12%, transparent);
}

.lgk-search-awake__see-all:hover {
  background: color-mix(in srgb, var(--sa-icon) 22%, transparent);
  color: #fff;
}

.lgk-search-awake__ready {
  margin: 0.35rem 0 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--sa-muted);
  text-transform: lowercase;
  opacity: 1;
  transition: opacity 0.25s ease;
  line-height: 1;
}

.lgk-search-awake.is-awake .lgk-search-awake__ready {
  opacity: 0;
}

.lgk-search-awake--compact {
  --sa-size: 2.35rem;
  --sa-max: min(340px, 42vw);
  --sa-panel-w: min(30rem, calc(100vw - 1.5rem));
}

.lgk-search-awake--compact .lgk-search-awake__ready {
  display: none;
}

.lgk-search-awake--page {
  --sa-size: 56px;
  --sa-max: min(520px, 100%);
  width: var(--sa-size);
  margin-inline: auto;
}

.lgk-search-awake--page.is-awake {
  width: var(--sa-max);
}

/* Topbar integration */
.lgk-topbar--v2 .lgk-search-awake {
  display: inline-flex !important;
  flex: 0 0 auto;
  max-width: none;
}

.lgk-topbar--v2 .lgk-search-awake.is-awake {
  flex: 1 1 auto;
}

.lgk-topbar--v2:has(.lgk-search-awake.has-panel),
.lgk-topbar--v2:has(.lgk-search-awake.has-panel) .lgk-topbar__slot--right {
  overflow: visible !important;
}

.lgk-topbar.lgk-topbar--v2:has(.lgk-search-awake.has-panel) {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  z-index: 100060;
}

.lgk-topbar--v2:has(.lgk-search-awake) .lgk-topbar__icon--search-mobile {
  display: none !important;
}

@media (min-width: 1100px) {
  .lgk-topbar--v2 .lgk-search-awake {
    --sa-max: min(380px, 36vw);
    --sa-panel-w: min(34rem, calc(100vw - 3rem));
  }
}

@media (max-width: 1099px) {
  .lgk-topbar--v2 .lgk-topbar__slot--right {
    position: relative;
  }

  .lgk-topbar--v2 .lgk-search-awake {
    --sa-max: min(260px, 62vw);
    --sa-panel-w: min(22rem, calc(100vw - 1.25rem));
  }

  .lgk-topbar--v2 .lgk-search-awake.is-awake {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    --sa-max: min(320px, calc(100vw - 4.5rem));
  }

  .lgk-topbar--v2 .lgk-search-awake.has-panel {
    transform: none;
    top: 0.35rem;
    right: 0.5rem;
  }
}

/* Storefront accents */
html.lgk-storefront--legeekshop .lgk-search-awake {
  --sa-bg: #0a2420;
  --sa-icon: #00d4aa;
  --sa-ring: rgba(0, 212, 170, 0.45);
  --sa-glow: rgba(0, 212, 170, 0.32);
}

html.lgk-storefront--wayne .lgk-search-awake,
html.storefront-wayne-outfitters .lgk-search-awake {
  --sa-bg: #1a1712;
  --sa-icon: #d4af37;
  --sa-ring: rgba(212, 175, 55, 0.4);
  --sa-glow: rgba(212, 175, 55, 0.28);
}

html.lgk-storefront--candy-geekland .lgk-search-awake,
html.storefront-candy-geekland .lgk-search-awake {
  --sa-bg: #2a121c;
  --sa-icon: #ff4d8d;
  --sa-ring: rgba(255, 77, 141, 0.45);
  --sa-glow: rgba(255, 77, 141, 0.3);
}

html.lgk-storefront--deal-geekland .lgk-search-awake,
html.storefront-deal-geekland .lgk-search-awake {
  --sa-bg: #24180a;
  --sa-icon: #f59e0b;
  --sa-ring: rgba(245, 158, 11, 0.45);
  --sa-glow: rgba(245, 158, 11, 0.3);
}

html.lgk-storefront--digital-geekland .lgk-search-awake,
html.storefront-digital-geekland .lgk-search-awake {
  --sa-bg: #14122a;
  --sa-icon: #22d3ee;
  --sa-ring: rgba(167, 139, 250, 0.45);
  --sa-glow: rgba(34, 211, 238, 0.3);
}

html.lgk-storefront--fivem .lgk-search-awake,
html.storefront-fivem .lgk-search-awake {
  --sa-bg: #0c1a0c;
  --sa-icon: #39ff14;
  --sa-ring: rgba(57, 255, 20, 0.4);
  --sa-glow: rgba(57, 255, 20, 0.28);
}

html.lgk-storefront--gotham-airsoft .lgk-search-awake,
html.storefront-gotham-airsoft .lgk-search-awake {
  --sa-bg: #141a0e;
  --sa-icon: #84cc16;
  --sa-ring: rgba(132, 204, 22, 0.4);
  --sa-glow: rgba(132, 204, 22, 0.28);
}

html.lgk-storefront--erotica .lgk-search-awake,
html.storefront-erotica .lgk-search-awake {
  --sa-bg: #241016;
  --sa-icon: #fb7185;
  --sa-ring: rgba(251, 113, 133, 0.45);
  --sa-glow: rgba(251, 113, 133, 0.3);
}

html.lgk-theme--light .lgk-search-awake {
  --sa-bg: #f4f1ea;
  --sa-text: #1c1917;
  --sa-muted: rgba(28, 25, 23, 0.45);
  --sa-glow: color-mix(in srgb, var(--sa-icon) 22%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .lgk-search-awake,
  .lgk-search-awake__shell,
  .lgk-search-awake__input,
  .lgk-search-awake__close {
    transition-duration: 0.01ms !important;
  }
}