/* ==========================================================================
 * 20 - Shop Frontend Chrome + Handoff (NON-MODAL)
 *
 * Historic name was "Modals and handoff" because this file used to own the
 * detail modal, buy-now modal, coupon, consent, progress and payment-button
 * styles. All of that has been moved out:
 *
 *   - Detail + buy-now modals  -> assets/css/shop/57-shop-modal-refresh.css
 *
 * What stays here (non-modal):
 *   - body.alv-modal-open scroll-lock utility (kept here so a single source
 *     owns the scroll-lock contract, independent of which modal opens)
 *   - Listing grid responsive breakpoints
 *   - Mobile / mid-range / reduced-motion performance overrides
 *   - Mobile filter toggle + panel + filter pills
 *   - Post-checkout success page
 *   - Reusable spinner (also used on success + standalone checkout page)
 *   - Empty-state notify-me + restock badge
 *   - Featured-card and offer-badge accents (listing grid)
 *   - Image lightbox (separate component triggered from detail-modal thumbs)
 *   - Trust checklist on the shop landing
 *
 * Selectors removed in Phase 1 of the modal cleanup:
 *   .alv-shop-modal, .alv-shop-modal-bg, .alv-shop-modal-panel,
 *   .alv-shop-modal-close, .alv-shop-modal-header, .alv-shop-modal-title,
 *   .alv-shop-modal-subtitle, .alv-shop-modal-game-badge,
 *   .alv-shop-modal-details, .alv-shop-modal-detail-tag,
 *   .alv-shop-modal-price-row, .alv-shop-modal-price*, .alv-shop-modal-email-wrap,
 *   .alv-shop-modal-label, .alv-shop-modal-required, .alv-shop-modal-input,
 *   .alv-shop-modal-hint, .alv-shop-modal-error, .alv-shop-modal-buttons,
 *   .alv-shop-modal-trust, .alv-shop-modal-methods, .alv-shop-modal-optional,
 *   .alv-shop-pay-btn / -stripe / -paypal / -loading / -error,
 *   #alv-shop-pay-stripe, #alv-shop-pay-paypal, .alv-shop-stripe-pay-hint,
 *   .alv-checkout-progress / -step / -step-dot / -step-line / -back,
 *   .alv-shop-coupon-* (details / summary / chevron / body / row / input /
 *   apply-btn / msg / sr-label),
 *   .alv-shop-consent-label, .alv-shop-direct-hint,
 *   .alv-det-* (panel / left / right / img-wrap / gallery-* / shield / banner*
 *   / stats-grid / stat-cell* / price* / desc / share-btn / actions-row /
 *   share-text / skins* / skin-chip),
 *   #alv-detail-tracker, _sModalIn keyframe.
 *
 * If you need any of those rules, see 57-shop-modal-refresh.css (sole owner).
 * ========================================================================== */

/* -- Scroll-lock utility (set by JS alvModalOpen/alvModalClose) ----------- */

body.alv-modal-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
}

/* Desktop scroll-lock: overflow:hidden is enough, no position:fixed jump.
   --alv-scrollbar-w is measured once in JS to avoid layout shift. */
@media (min-width: 769px) {
  body.alv-modal-open {
    overflow: hidden !important;
    position: static !important;
    padding-right: var(--alv-scrollbar-w, 0px) !important;
  }
}

/* -- Responsive breakpoints (non-modal chrome) ---------------------------- */

@media (max-width: 768px) {
  .alv-shop-container { padding: 36px 16px 60px; }
  .alv-shop-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .alv-shop-trust-badge { font-size: .7rem; padding: 4px 10px; }

  /* Success page */
  .alv-shop-success-card { padding: 28px 20px; }
  .alv-shop-cta-bottom { padding: 32px 18px 28px; }
  .alv-shop-custom-banner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .alv-shop-custom-banner-btn { width: 100%; justify-content: center; }
  .alv-shop-seo-panel { padding: 1.75rem 1.25rem; }
}

@media (max-width: 540px) {
  .alv-shop-grid { grid-template-columns: 1fr; }
  .alv-shop-nav-item { padding: 7px 11px; font-size: .76rem; }
  .alv-shop-hero-title { font-size: clamp(1.5rem, 6.5vw, 2rem); }
  .alv-shop-search-wrap { flex: 1 1 100%; min-width: unset; }
  .alv-shop-stat { padding: 0 8px; }
  .alv-shop-stat-num { font-size: .9rem; }
}

/* -- Performance overrides ------------------------------------------------ */
/* Mobile GPU relief - disable expensive filters/animations on small screens */

@media (max-width: 768px) {
  .alv-shop-cta-bottom-deco {
    filter: none;
    opacity: .06;
  }
  .alv-shop-grad { animation: none; -webkit-text-fill-color: var(--gold); }
  .alv-card-scarcity { animation: none; }
}

/* Touch devices: remove card hover effects (browser fakes hover, looks broken) */
@media (hover: none) {
  .alv-shop-card { transition: none; }
  .alv-shop-card:hover {
    transform: none;
    border-color: rgba(255, 255, 255, .11);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .25);
  }
  .alv-shop-card:hover::before { opacity: .25; }
  .alv-shop-card:hover .alv-card-img img { transform: none; }
}

/* Mid-range devices (tablets + budget laptops): lighter page blur */
@media (min-width: 769px) and (max-width: 1279px) {
  .alv-shop-bg::before { filter: blur(35px); }
  .alv-shop-bg::after  { filter: blur(35px); }
}

/* Respect user motion preference (spinner stays animated intentionally) */
@media (prefers-reduced-motion: reduce) {
  .alv-shop-bg::before,
  .alv-shop-bg::after,
  .alv-shop-grad,
  .alv-card-scarcity,
  .alv-hero-eyebrow-dot,
  .alv-shop-empty-illustration,
  .alv-card-restock-icon,
  .alv-shop-hero,
  .alv-shop-nav,
  .alv-shop-controls,
  .alv-shop-custom-banner,
  .alv-shop-skeleton::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Stagger decorative animations so they don't fight initial paint */
.alv-shop-grad { animation-delay: 1.8s; }
.alv-card-scarcity { animation-delay: 2s; }

/* -- Filter UI (toggle, pills, mobile panel) ------------------------------ */

.alv-shop-filter-toggle {
  display: none; /* hidden on desktop, shown via mobile media query */
}

.alv-filter-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: rgba(249, 200, 108, .15); border: 1px solid rgba(249, 200, 108, .3);
  color: var(--gold);
  font-size: .58rem; font-weight: 800; margin-left: 4px;
}

.alv-filter-pills {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}

.alv-filter-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 9px;
  background: rgba(249, 200, 108, .07); border: 1px solid rgba(249, 200, 108, .18);
  border-radius: 20px;
  color: rgba(249, 200, 108, .85);
  font-family: var(--font); font-size: .7rem; font-weight: 600;
  cursor: pointer; transition: background .2s;
}

.alv-filter-pill::after {
  content: 'x'; font-size: .55rem; opacity: .6; margin-left: 2px;
}

.alv-filter-pill:hover { background: rgba(249, 200, 108, .12); }

@media (max-width: 768px) {
  .alv-shop-filter-toggle {
    display: inline-flex; align-items: center; gap: 7px;
    width: 100%; justify-content: center;
    padding: 8px 15px; margin-bottom: 7px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .08); border-radius: 9px;
    color: var(--muted);
    font-family: var(--font); font-size: .8rem; font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, color .2s;
  }
  .alv-shop-filter-toggle:hover {
    border-color: rgba(249, 200, 108, .22);
    color: var(--text);
  }
  .alv-shop-filter-toggle svg { stroke: currentColor; }

  /* Filter panel: collapsed by default, opened via .alv-filter-panel--open */
  .alv-filter-panel {
    display: none !important;
    flex-direction: column !important;
    gap: 7px !important;
    margin-top: 4px; padding: 10px !important;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .07); border-radius: 11px;
  }
  .alv-filter-panel.alv-filter-panel--open { display: flex !important; }
  .alv-filter-panel .alv-shop-search-wrap { flex: 1 1 100%; min-width: unset; }
  .alv-filter-panel .alv-shop-select {
    max-width: 100% !important; width: 100% !important; height: 40px !important;
    background: rgba(255, 255, 255, .04) !important;
  }
}

/* -- Success page (post-checkout landing, NOT a modal) -------------------- */

.alv-shop-success-wrap {
  min-height: 100vh; display: flex; align-items: center;
}

.alv-shop-success-container { max-width: 560px; }

.alv-shop-success-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid var(--border); border-radius: 22px;
  padding: 44px 32px; text-align: center;
  backdrop-filter: blur(6px);
}

.alv-shop-success-icon {
  width: 60px; height: 60px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(52, 211, 153, .1);
  border: 1px solid rgba(52, 211, 153, .25); border-radius: 50%;
}

.alv-shop-success-icon svg { width: 26px; height: 26px; stroke: var(--green); }

.alv-shop-success-title { font-size: 1.5rem; margin-bottom: 6px; }
.alv-shop-success-sub   { font-size: .92rem; color: var(--muted); margin-bottom: 28px; line-height: 1.6; }

.alv-shop-success-steps {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 28px; text-align: left;
}

.alv-shop-success-step {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--border); border-radius: 10px;
  color: var(--dim); font-size: .82rem;
  transition: border-color .4s ease, color .4s ease;
}

.alv-shop-success-step.done   { border-color: rgba(52, 211, 153, .25); color: var(--green); }
.alv-shop-success-step.active { border-color: rgba(249, 200, 108, .25); color: var(--gold); }

.alv-shop-success-step-dot {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
  font-size: .72rem; font-weight: 700;
}

.alv-shop-success-step.done .alv-shop-success-step-dot {
  background: rgba(52, 211, 153, .12); border-color: var(--green); color: var(--green);
}

.alv-shop-success-step.active .alv-shop-success-step-dot {
  background: rgba(249, 200, 108, .08); border-color: rgba(249, 200, 108, .25);
}

.alv-shop-success-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-bottom: 16px;
}

.alv-shop-success-note   { font-size: .78rem; color: var(--dim); }
.alv-shop-success-note a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }

/* -- Reusable animations -------------------------------------------------- */
/* _sFadeUp is used by 00-base-foundation, 10-navigation-filters-cards.
   alv-shop-fadeUp is a public-namespace alias. */

@keyframes _sFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes alv-shop-fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -- Spinner (used on success page + standalone checkout page) ------------ */
/* NOTE: the new buy-modal in 57-shop-modal-refresh.css has its OWN spinner
   styling scoped to #alv-shop-modal. The rule below is the unscoped fallback
   used by the success-step dot and inc/shop-checkout-page.php. */

.alv-shop-spinner {
  width: 18px; height: 18px;
  display: inline-block;
  border: 2px solid var(--border-l);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: _sSpin .6s linear infinite;
}

.alv-shop-spinner-sm { width: 12px; height: 12px; }

@keyframes _sSpin { to { transform: rotate(360deg); } }

/* -- Empty state (notify-me form + restock badge) ------------------------- */

.alv-shop-empty-icon {
  animation: _sEmptyPulse 3s ease-in-out infinite;
}

@keyframes _sEmptyPulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.06); opacity: .75; }
}

.alv-shop-notify {
  width: 100%; max-width: 420px;
  margin: 24px auto 0;
}

.alv-shop-notify-inner {
  display: flex; align-items: center; gap: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px;
  transition: border-color .25s;
}

.alv-shop-notify-inner:focus-within {
  border-color: rgba(249, 200, 108, .3);
  box-shadow: 0 0 0 3px rgba(249, 200, 108, .06);
}

.alv-shop-notify-icon {
  display: flex; align-items: center; justify-content: center;
  padding: 0 12px 0 16px; flex-shrink: 0;
  color: rgba(243, 241, 250, .25);
}

.alv-shop-notify-input {
  flex: 1; min-width: 0;
  padding: 13px 4px;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-size: .88rem !important;
}

.alv-shop-notify-input::placeholder { color: rgba(243, 241, 250, .25) !important; }

.alv-shop-notify-btn {
  flex-shrink: 0;
  padding: 11px 20px; margin: 4px;
  background: linear-gradient(160deg, #c49a3a 0%, #8f6a1a 100%);
  border: none; border-radius: 10px;
  color: #fff;
  font-family: var(--font); font-size: .82rem; font-weight: 700;
  white-space: nowrap; cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}

.alv-shop-notify-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(180, 140, 50, .25);
}

.alv-shop-notify-btn:disabled {
  opacity: .4; cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.alv-shop-notify-hint {
  margin-top: 8px !important;
  color: rgba(243, 241, 250, .2) !important;
  font-size: .68rem !important;
  text-align: center;
}

.alv-shop-notify-msg {
  margin-top: 8px !important;
  font-size: .78rem !important; font-weight: 600;
  text-align: center;
}

/* Success state */
.alv-shop-notify.notify-done .alv-shop-notify-inner {
  background: rgba(52, 211, 153, .04);
  border-color: rgba(52, 211, 153, .3);
}

.alv-shop-empty-restock {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 20px;
  color: rgba(243, 241, 250, .22);
  font-size: .72rem; font-weight: 500;
}

.alv-shop-empty-restock svg {
  flex-shrink: 0; stroke: rgba(243, 241, 250, .18);
  animation: _sRestockSpin 4s linear infinite;
}

@keyframes _sRestockSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (max-width: 480px) {
  .alv-shop-notify-inner { flex-wrap: wrap; }
  .alv-shop-notify-icon  { display: none; }
  .alv-shop-notify-input { padding: 12px 14px !important; }
  .alv-shop-notify-btn   { width: calc(100% - 8px); margin: 0 4px 4px; }
}

/* -- Featured cards + offer badges (listing grid) ------------------------- */

.alv-shop-card.alv-card-featured {
  border-color: rgba(249, 200, 108, .35);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .3), 0 0 0 1px rgba(249, 200, 108, .12) inset;
}

.alv-shop-card.alv-card-featured::before {
  background: linear-gradient(90deg, transparent, rgba(249, 200, 108, .5), transparent);
  opacity: .6;
}

.alv-shop-card.alv-card-featured:hover {
  border-color: rgba(249, 200, 108, .5);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .4), 0 0 30px rgba(249, 200, 108, .12);
}

.alv-card-badge.featured {
  background: #F9C86C;
  border: none;
  color: #0C0C0C;
  font-weight: 900;
  box-shadow: 0 1px 6px rgba(249, 200, 108, .35);
}

.alv-card-badge.offer {
  background: #DC2626;
  border: none;
  color: #fff;
  font-weight: 900; letter-spacing: .02em;
  box-shadow: 0 1px 6px rgba(220, 38, 38, .4);
}

.alv-stat-icon {
  display: inline-block; vertical-align: -2px;
  flex-shrink: 0;
  margin-right: 2px;
}

/* -- Card gallery count chip (small, sits on listing card) --------------- */

.alv-card-gallery-count {
  position: absolute; right: 10px; bottom: 10px;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(8, 8, 12, .85);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .86);
  font-size: .66rem; font-weight: 800;
}

/* -- Image lightbox (separate component, opens from detail-modal thumbs) -- */
/* The lightbox sits on top of the detail modal when a user clicks the
   main image. It manages its own backdrop and animations. */

.alv-shop-lightbox {
  position: fixed; inset: 0; z-index: 200000;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}

.alv-shop-lightbox-bg {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.alv-shop-lightbox.alv-modal-visible .alv-shop-lightbox-bg {
  animation: _sLightboxBgIn .25s ease both;
}

.alv-shop-lightbox.alv-modal-visible .alv-shop-lightbox-wrap {
  animation: _sLightboxIn .35s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes _sLightboxBgIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes _sLightboxIn {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}

.alv-shop-lightbox-wrap {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  max-width: 92vw; max-height: 90vh;
}

.alv-shop-lightbox-wrap img {
  display: block;
  max-width: 100%; max-height: 88vh;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .6);
}

.alv-shop-lightbox-nav {
  position: absolute; top: 50%; z-index: 2;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%;
  color: #fff;
  font-size: 28px; line-height: 1;
  cursor: pointer;
  transition: background .2s, transform .2s;
}

.alv-shop-lightbox-nav:hover {
  background: rgba(255, 255, 255, .2);
  transform: translateY(-50%) scale(1.05);
}

.alv-shop-lightbox-nav.prev { left:  -58px; }
.alv-shop-lightbox-nav.next { right: -58px; }

.alv-shop-lightbox-count {
  position: absolute; left: 50%; bottom: -36px;
  transform: translateX(-50%);
  padding: 5px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .78);
  font-size: .78rem; font-weight: 700;
}

.alv-shop-lightbox-close {
  position: absolute; top: -12px; right: -12px; z-index: 2;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%;
  cursor: pointer;
  transition: background .2s, transform .2s;
}

.alv-shop-lightbox-close:hover {
  background: rgba(255, 255, 255, .2);
  transform: scale(1.1);
}

.alv-shop-lightbox-close svg {
  stroke: rgba(255, 255, 255, .8); stroke-width: 2.5;
}

@media (max-width: 768px) {
  .alv-shop-lightbox-nav.prev { left:  8px; }
  .alv-shop-lightbox-nav.next { right: 8px; }
  .alv-shop-lightbox-nav      { width: 38px; height: 38px; font-size: 24px; }
}

/* -- Trust checklist (shop landing) --------------------------------------- */

.alv-shop-wrap .alv-shop-trust-checklist {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  margin: 2.5rem 0 0 !important;
  text-align: left !important;
}

.alv-shop-wrap .alv-shop-trust-check-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: .85rem !important;
  padding: 1.1rem 1.25rem !important;
  background: rgba(52, 211, 153, .04) !important;
  border: 1px solid rgba(52, 211, 153, .14) !important;
  border-radius: 14px !important;
  text-align: left !important;
  transition: border-color .2s !important;
}

.alv-shop-wrap .alv-shop-trust-check-item:hover {
  border-color: rgba(52, 211, 153, .28) !important;
}

.alv-shop-wrap .alv-shop-trust-check-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  background: rgba(52, 211, 153, .1) !important;
  border: 1px solid rgba(52, 211, 153, .2) !important;
  border-radius: 9px !important;
}

.alv-shop-wrap .alv-shop-trust-check-icon svg {
  width: 16px !important; height: 16px !important;
  stroke: #34d399 !important; fill: none !important;
}

.alv-shop-wrap .alv-shop-trust-check-body {
  display: flex !important;
  flex-direction: column !important;
  gap: .2rem !important;
  text-align: left !important;
}

.alv-shop-wrap .alv-shop-trust-check-body strong {
  display: block !important;
  color: var(--text) !important;
  font-size: .85rem !important; font-weight: 700 !important; line-height: 1.2 !important;
}

.alv-shop-wrap .alv-shop-trust-check-body span {
  display: block !important;
  color: rgba(243, 241, 250, .45) !important;
  font-size: .75rem !important; line-height: 1.4 !important;
}

@media (max-width: 640px) {
  .alv-shop-wrap .alv-shop-trust-checklist {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .alv-shop-wrap .alv-shop-trust-check-item {
    padding: .9rem 1rem !important;
  }
}