/* ============================================================
   Asvika Wear — enhance.css
   Dark mode, split-text, clip-path unveil, typeahead search,
   recently-viewed, exit-intent popup, PWA install, back-in-stock.
   v1
   ============================================================ */

/* ---------- Theme: dark mode ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #151113;
  --ink: #f2ebef;
  --muted: #b5a7ad;
  --line: #362c32;
  --white: #1f1a1d;
  --soft: #1b1619;
  --bg-alt: #1b1619;
  --rose: #c98ba6;
  --rose-dark: #e3a9c4;
  --marigold: #e8c58a;
  --danger: #e8838a;
  --shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 14px 34px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] body,
[data-theme="dark"] .topbar,
[data-theme="dark"] .site-footer,
[data-theme="dark"] .main-wrap { background-color: var(--paper); }

[data-theme="dark"] body { transition: background-color 0.35s ease, color 0.35s ease; }

/* Glass surfaces with hardcoded white gradients */
[data-theme="dark"] .topbar,
[data-theme="dark"] .mobile-nav,
[data-theme="dark"] .bottom-nav,
[data-theme="dark"] .pd-header-glass,
[data-theme="dark"] .admin-topbar {
  background: rgba(21, 17, 19, 0.9) !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--line);
}
[data-theme="dark"] .topbar { background: rgba(21, 17, 19, 0.88) !important; }

[data-theme="dark"] .instagram-section { background: linear-gradient(135deg, #1a1518 0%, #251a1d 100%); }
[data-theme="dark"] .site-footer { background: linear-gradient(180deg, #1a1518, #120f11); }

[data-theme="dark"] .cart-toast,
[data-theme="dark"] .back-to-top,
[data-theme="dark"] .lightbox-panel,
[data-theme="dark"] .ps-panel,
[data-theme="dark"] .mini-cart-panel {
  background: #201a1d;
  color: var(--ink);
  border-color: var(--line);
}

[data-theme="dark"] .premium-cursor-dot { background: var(--rose); }
[data-theme="dark"] .premium-cursor { border-color: rgba(201, 138, 163, 0.7); }

/* Cards & sections that rely on --white/paper */
[data-theme="dark"] .featured-banner-card,
[data-theme="dark"] .bts-card,
[data-theme="dark"] .modal-box,
[data-theme="dark"] .cart-modal-box,
[data-theme="dark"] .review-modal-box,
[data-theme="dark"] .size-guide-box,
[data-theme="dark"] .pm-info-box,
[data-theme="dark"] .txn-fields,
[data-theme="dark"] .story-card,
[data-theme="dark"] .instagram-card,
[data-theme="dark"] .order-band,
[data-theme="dark"] .bundle-card {
  background: var(--white);
  border-color: var(--line);
}

/* Inputs & selects */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #221c1f;
  color: var(--ink);
  border-color: #3d3238;
  color-scheme: dark;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #8d7f86; }
[data-theme="dark"] .product-search,
[data-theme="dark"] .sort-select { background: #221c1f; color: var(--ink); }

/* Product page hardcoded whites */
[data-theme="dark"] .pd-layout,
[data-theme="dark"] .pd-reviews-section,
[data-theme="dark"] .pd-image-wrap,
[data-theme="dark"] .pd-meta-item,
[data-theme="dark"] .pd-size-btn,
[data-theme="dark"] .pd-qty-btn,
[data-theme="dark"] .pd-action-btn,
[data-theme="dark"] .ps-actions {
  background: #1f1a1d;
  color: var(--ink);
  border-color: #3d3238;
}
[data-theme="dark"] .pd-size-btn,
[data-theme="dark"] .pd-qty-btn,
[data-theme="dark"] .pd-action-btn { background: #2a2226; }
[data-theme="dark"] .pd-meta-item { background: #2a2226; color: var(--muted); }
[data-theme="dark"] .pd-size-btn.selected { background: var(--rose); color: #fff; }

/* AI widget */
[data-theme="dark"] .asvika-ai-bot { background: #261f23; color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .asvika-ai-chips,
[data-theme="dark"] .asvika-ai-input-wrap { background: #1f1a1d; border-color: var(--line); }
[data-theme="dark"] .ai-chip { background: #2a2226; color: var(--rose-dark); border-color: rgba(201, 138, 163, 0.35); }
[data-theme="dark"] .asvika-ai-input { background: #221c1f; color: var(--ink); border-color: #3d3238; }
[data-theme="dark"] .asvika-ai-status { color: rgba(255, 255, 255, 0.8); }

/* Reduced-motion: keep everything safe */
@media (prefers-reduced-motion: reduce) {
  [data-theme="dark"] body { transition: none; }
}

/* ---------- Theme toggle ---------- */
.theme-toggle {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 940;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  transition: transform 0.2s, box-shadow 0.2s, background 0.3s;
}
.theme-toggle:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22); }
@media (max-width: 720px) {
  .theme-toggle { width: 38px; height: 38px; font-size: 16px; left: 12px; bottom: 84px; }
}

/* ---------- Split-text reveals ---------- */
.split-text .st-word { display: inline-block; overflow: hidden; vertical-align: top; }
.split-text .st-word > span { display: inline-block; transform: translateY(115%); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.split-text .st-word.in > span { transform: translateY(0); }
.split-text .st-space { display: inline-block; width: 0.28em; }
@media (prefers-reduced-motion: reduce) {
  .split-text .st-word > span { transform: none; }
}

/* ---------- Clip-path unveil ---------- */
.unveil { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1); will-change: clip-path; }
.unveil.in { clip-path: inset(0 0 0% 0); }
@media (prefers-reduced-motion: reduce) {
  .unveil { clip-path: none; }
}

/* ---------- Hero day-part badge ---------- */
.hero-daypart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6d3b52;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(201, 138, 163, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(183, 122, 145, 0.18);
}
[data-theme="dark"] .hero-daypart { color: #ffd9e7; background: rgba(38, 27, 33, 0.8); border-color: rgba(227, 169, 196, 0.4); }
.hero-daypart .hd-greet { font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .hero-daypart { box-shadow: none; } }

/* ---------- Recently viewed ---------- */
.recently-viewed { padding: 0 clamp(18px, 5vw, 72px) 46px; }
.recently-viewed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.recently-viewed-head h3 { margin: 0; font-size: 19px; font-family: var(--font-heading); letter-spacing: 0.02em; }
.recently-viewed-head .rv-sub { font-size: 12px; color: var(--muted); }
.rv-strip { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.rv-strip::-webkit-scrollbar { height: 6px; }
.rv-strip::-webkit-scrollbar-thumb { background: var(--rose); border-radius: 6px; }
.rv-card {
  flex: 0 0 132px;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
}
.rv-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.rv-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; background: var(--bg-alt); }
.rv-body { padding: 8px 10px 10px; }
.rv-name { font-size: 12px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 4px; }
.rv-price { font-size: 12.5px; color: var(--rose-dark); font-weight: 700; }
.rv-price small { color: var(--muted); text-decoration: line-through; margin-right: 5px; font-weight: 500; }

/* ---------- Typeahead search ---------- */
.search-sort-row { position: relative; }
.search-dd {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}
.search-dd.hidden { display: none; }
.sd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.sd-item:last-child { border-bottom: none; }
.sd-item:hover, .sd-item.hover { background: color-mix(in srgb, var(--rose) 12%, var(--white)); }
.sd-item img { width: 40px; height: 52px; object-fit: cover; border-radius: 6px; background: var(--bg-alt); }
.sd-main { flex: 1; min-width: 0; }
.sd-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-name .sq-hit { background: rgba(245, 166, 35, 0.35); border-radius: 3px; color: inherit; padding: 0 1px; }
.sd-code { font-size: 11px; color: var(--muted); }
.sd-price { font-size: 12.5px; font-weight: 700; color: var(--rose-dark); white-space: nowrap; }
.sd-empty { padding: 14px; font-size: 13px; color: var(--muted); text-align: center; }

/* ---------- Exit-intent popup ---------- */
.exit-card {
  width: min(420px, calc(100vw - 40px));
  background: var(--white);
  border-radius: 18px;
  overflow: hidden;
  text-align: center;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  animation: exitIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes exitIn { from { opacity: 0; transform: translateY(22px) scale(0.96); } to { opacity: 1; transform: none; } }
.exit-card-hero {
  background: linear-gradient(135deg, #b77a91 0%, #8f5870 100%);
  color: #fff;
  padding: 26px 22px 20px;
  position: relative;
}
.exit-card-hero .exit-emoji { font-size: 34px; display: block; margin-bottom: 8px; }
.exit-card-hero h3 { margin: 0 0 6px; font-size: 22px; font-family: var(--font-heading); letter-spacing: 0.02em; }
.exit-card-hero p { margin: 0; font-size: 13px; opacity: 0.92; }
.exit-card-body { padding: 22px 22px 26px; }
.exit-card-body p { margin: 0 0 16px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.exit-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 12px;
  background: #25d366;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  font-family: inherit;
}
.exit-wa-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(37, 211, 102, 0.35); background: #1fbd59; }
.exit-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.exit-close:hover { background: rgba(255, 255, 255, 0.35); }
@media (prefers-reduced-motion: reduce) { .exit-card { animation: none; } }

/* ---------- PWA install banner ---------- */
.pwa-install {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 96px;
  z-index: 950;
  width: min(460px, calc(100vw - 28px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  animation: pwaUp 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pwa-install.hidden { display: none; }
@keyframes pwaUp { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.pwa-install-icon { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: linear-gradient(135deg, #b77a91, #9e5f76); }
.pwa-install-text { flex: 1; min-width: 0; }
.pwa-install-text strong { display: block; font-size: 13px; }
.pwa-install-text span { font-size: 11.5px; color: var(--muted); }
.pwa-install-btn {
  border: none;
  border-radius: 9px;
  padding: 9px 14px;
  background: linear-gradient(135deg, var(--rose), var(--rose-dark));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.pwa-install-btn:hover { filter: brightness(1.06); }
.pwa-install-x {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
}
.pwa-install-x:hover { color: var(--ink); background: color-mix(in srgb, var(--muted) 15%, transparent); }
@media (min-width: 721px) { .pwa-install { bottom: 20px; } }
@media (prefers-reduced-motion: reduce) { .pwa-install { animation: none; } }

/* ---------- Back in stock notify ---------- */
.pd-bis {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 13px;
  border: 1.5px solid #25d366;
  border-radius: 12px;
  background: rgba(37, 211, 102, 0.12);
  color: #128c4b;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  font-family: inherit;
}
.pd-bis:hover { background: rgba(37, 211, 102, 0.22); transform: translateY(-1px); }
[data-theme="dark"] .pd-bis { color: #6fe0a3; border-color: #25d366; }
.pd-bis.hidden { display: none; }