/* ============================================================================
   Documentpsd — shared UI layer ("legacy" stylesheet)
   Provides the search/cart/wishlist overlays + drawers, toast notifications,
   drawer item rows and block buttons used across the site.

   These rules reuse the homepage design tokens (var(--color-*) emitted by the
   inline Tailwind @theme block). Every var() also carries a light-theme
   fallback so the overlays look correct even before Tailwind finishes
   compiling (this file is intentionally loaded first).
   ============================================================================ */

:root { --dp-shadow: 0 24px 60px -20px rgba(15, 23, 42, .35); }

/* lock the page behind an open overlay */
body.dp-no-scroll { overflow: hidden; }

/* ---------- overlay shell ---------------------------------------------------*/
.overlay {
  position: fixed; inset: 0; z-index: 1000;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s ease, visibility 0s linear .28s;
}
.overlay.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .28s ease;
}
.overlay__backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--color-ink, #0F172A) 55%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.overlay__panel {
  position: absolute;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-line, #E2E8F0);
  box-shadow: var(--dp-shadow);
  display: flex; flex-direction: column;
  transition: transform .32s cubic-bezier(.16, 1, .3, 1);
}

/* top sheet — search */
.overlay__panel--top {
  top: 0; left: 0; width: 100%;
  border-top: 0; border-radius: 0 0 20px 20px;
  padding: 22px 0 30px;
  transform: translateY(-100%);
}
.overlay.is-open .overlay__panel--top { transform: translateY(0); }

/* right drawer — cart / wishlist */
.overlay__panel--right {
  top: 0; right: 0; height: 100%;
  width: min(420px, 100%);
  border-top: 0; border-right: 0; border-bottom: 0; border-radius: 0;
  transform: translateX(100%);
}
.overlay.is-open .overlay__panel--right { transform: translateX(0); }

/* ---------- search overlay --------------------------------------------------*/
.container { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 24px; }

.search-big {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 2px 14px;
  border-bottom: 2px solid var(--color-line, #E2E8F0);
}
.search-big > i { font-size: 20px; color: var(--color-muted, #64748B); }
.search-big input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 22px; color: var(--color-ink, #0F172A);
}
.search-big input::placeholder { color: var(--color-muted-2, #94A3B8); }

.search-big__suggest {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px;
}
.search-big__label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--color-muted, #64748B); margin-right: 2px;
}
.search-big__suggest a {
  font-size: 13px; padding: 7px 13px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--color-line, #E2E8F0); color: var(--color-ink-2, #1E293B);
  transition: color .16s, border-color .16s, background .16s;
}
.search-big__suggest a:hover {
  color: var(--color-brand, #4F46E5);
  border-color: var(--color-brand, #4F46E5);
  background: color-mix(in srgb, var(--color-brand, #4F46E5) 8%, transparent);
}

/* ---------- drawer chrome ---------------------------------------------------*/
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px; border-bottom: 1px solid var(--color-line, #E2E8F0);
}
.drawer__head h3 {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-weight: 700; font-size: 17px; color: var(--color-ink, #0F172A);
}
.drawer__head h3 i { color: var(--color-brand, #4F46E5); }
.drawer__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: var(--color-surface-2, #F1F5F9); color: var(--color-muted, #64748B);
  font-size: 12px; font-weight: 700;
}
.drawer__body { flex: 1; overflow-y: auto; padding: 14px 16px; }
.drawer__foot { padding: 18px 20px; border-top: 1px solid var(--color-line, #E2E8F0); }

.cart__row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; color: var(--color-ink, #0F172A); margin-bottom: 8px;
}
.cart__row strong { font-size: 18px; }
.cart__row--small { font-size: 12px; color: var(--color-muted, #64748B); margin-bottom: 14px; }
.cart__note { margin: 12px 0 0; text-align: center; font-size: 12px; color: var(--color-muted, #64748B); }

/* close button (search + drawers) */
.overlay__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 auto; border: 0; cursor: pointer;
  border-radius: 10px; background: var(--color-surface, #F8FAFC);
  color: var(--color-muted, #64748B);
  transition: color .18s, background .18s;
}
.overlay__close:hover { background: var(--color-surface-2, #F1F5F9); color: var(--color-ink, #0F172A); }

/* ---------- block buttons ---------------------------------------------------*/
.btn-block {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; cursor: pointer; padding: 13px 18px; border-radius: 12px;
  border: 1px solid var(--color-line-2, #CBD5E1);
  background: var(--color-bg, #fff); color: var(--color-ink, #0F172A);
  font-family: var(--font-sans, system-ui, sans-serif); font-weight: 600; font-size: 14px;
  transition: color .18s, background .18s, border-color .18s;
}
.btn-block:hover { border-color: var(--color-ink, #0F172A); background: var(--color-surface, #F8FAFC); }
.btn-block--primary {
  background: var(--color-brand, #4F46E5); border-color: var(--color-brand, #4F46E5); color: #fff;
}
.btn-block--primary:hover {
  background: var(--color-brand-2, #6366F1); border-color: var(--color-brand-2, #6366F1);
}

/* ---------- drawer item rows (rendered by script.js) ------------------------*/
.dp-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; transition: background .16s; }
.dp-item:hover { background: var(--color-surface, #F8FAFC); }
.dp-item + .dp-item { margin-top: 2px; }
.dp-item__img {
  width: 56px; height: 56px; flex: 0 0 auto; border-radius: 10px;
  background: var(--color-surface-2, #F1F5F9) center / cover no-repeat;
  border: 1px solid var(--color-line, #E2E8F0);
}
.dp-item__info { flex: 1; min-width: 0; }
.dp-item__title {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--color-ink, #0F172A);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dp-item__meta { margin: 2px 0 0; font-size: 12px; color: var(--color-muted, #64748B); }
.dp-item__end { display: flex; align-items: center; gap: 8px; }
.dp-item__price { font-weight: 700; font-size: 14px; color: var(--color-ink, #0F172A); }
.dp-item__remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 0; cursor: pointer; border-radius: 8px;
  background: transparent; color: var(--color-muted-2, #94A3B8); transition: color .16s, background .16s;
}
.dp-item__remove:hover { background: color-mix(in srgb, #ef4444 12%, transparent); color: #ef4444; }

/* empty state */
.dp-empty { text-align: center; padding: 52px 22px; color: var(--color-muted, #64748B); }
.dp-empty i { color: var(--color-line-2, #CBD5E1); }
.dp-empty p { margin: 14px 0 4px; font-size: 15px; font-weight: 600; color: var(--color-ink, #0F172A); }
.dp-empty span { font-size: 13px; }

/* ---------- toasts ----------------------------------------------------------*/
.dp-toast-wrap {
  position: fixed; right: 18px; top: 80px; z-index: 2000;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.dp-toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 12px; box-shadow: var(--dp-shadow);
  background: var(--color-ink, #0F172A); color: var(--color-bg, #fff);
  font-family: var(--font-sans, system-ui, sans-serif); font-size: 14px; font-weight: 500;
  opacity: 0; transform: translateY(-12px) scale(.98);
  transition: opacity .26s cubic-bezier(.16, 1, .3, 1), transform .26s cubic-bezier(.16, 1, .3, 1);
}
.dp-toast.is-in { opacity: 1; transform: none; }
.dp-toast i { color: var(--color-brand-2, #6366F1); }

/* size the lucide SVGs injected into our components */
.overlay svg, .dp-toast svg, #themeToggle svg { width: 18px; height: 18px; }
.dp-empty svg { width: 40px; height: 40px; }

/* ---------- toggle switch (accessible checkbox replacement) -----------------*/
.dp-switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.dp-switch > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dp-switch__track {
  position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px;
  background: var(--color-line-2, #cbd5e1); transition: background .2s ease;
}
.dp-switch__thumb {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .2s ease;
}
.dp-switch > input:checked + .dp-switch__track { background: var(--color-brand, #6366F1); }
.dp-switch > input:checked + .dp-switch__track .dp-switch__thumb { transform: translateX(16px); }
.dp-switch > input:focus-visible + .dp-switch__track {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand, #6366F1) 35%, transparent);
}

/* ---------- inline field validation feedback (2026) -------------------------*/
.dp-hint {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 500; line-height: 1.35; margin-top: 2px;
  opacity: 0; transform: translateY(-3px);
  transition: opacity .22s ease, transform .22s ease, color .2s ease;
}
.dp-hint:not([hidden]) { opacity: 1; transform: none; }
.dp-hint[hidden] { display: none; }
.dp-hint__icon { flex: none; width: 15px; height: 15px; }
.dp-hint--error { color: #ef4444; }
.dp-hint--ok    { color: #22c55e; }

/* input border + soft ring reflecting validity */
.dp-input-validate { transition: border-color .2s ease, box-shadow .2s ease; }
.dp-input-validate.is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 16%, transparent);
}
.dp-input-validate.is-valid {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 16%, transparent);
}

/* unified focus ring for form fields */
.dp-field:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand, #6366F1) 22%, transparent); }
.dp-field.dp-input-validate.is-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 22%, transparent); }
.dp-field.dp-input-validate.is-valid:focus   { box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 22%, transparent); }

/* theme-aware alert box (replaces hardcoded light red) */
.dp-alert {
  display: flex; gap: 9px; align-items: flex-start;
  border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.45;
  border: 1px solid transparent;
}
.dp-alert__icon { flex: none; width: 17px; height: 17px; margin-top: 1px; }
.dp-alert--error {
  color: #fca5a5;
  background: color-mix(in srgb, #ef4444 12%, transparent);
  border-color: color-mix(in srgb, #ef4444 35%, transparent);
}
.dp-alert--error .dp-alert__icon { color: #ef4444; }

/* password strength meter */
.dp-strength { margin-top: 8px; }
.dp-strength[hidden] { display: none; }
.dp-strength__bars { display: flex; gap: 5px; }
.dp-strength__bars > span {
  flex: 1; height: 5px; border-radius: 999px;
  background: var(--color-line-2, #cbd5e1); transition: background .25s ease;
}
.dp-strength__label { display: block; margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--color-muted, #94a3b8); transition: color .25s ease; }
.dp-strength[data-level="1"] .dp-strength__bars > span:nth-child(-n+1),
.dp-strength[data-level="2"] .dp-strength__bars > span:nth-child(-n+2),
.dp-strength[data-level="3"] .dp-strength__bars > span:nth-child(-n+3),
.dp-strength[data-level="4"] .dp-strength__bars > span:nth-child(-n+4) { background: currentColor; }
.dp-strength[data-level="1"] { color: #ef4444; }
.dp-strength[data-level="2"] { color: #f59e0b; }
.dp-strength[data-level="3"] { color: #3b82f6; }
.dp-strength[data-level="4"] { color: #22c55e; }
.dp-strength[data-level] .dp-strength__label { color: currentColor; }

/* custom checkbox (terms consent) */
.dp-check { display: inline-flex; align-items: flex-start; gap: 9px; cursor: pointer; user-select: none; font-size: 13px; line-height: 1.45; color: var(--color-muted, #94a3b8); }
.dp-check > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dp-check__box {
  flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 7px;
  border: 1.5px solid var(--color-line-2, #cbd5e1); background: var(--color-bg, transparent);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .18s ease, border-color .18s ease;
}
.dp-check__box svg { width: 13px; height: 13px; color: #fff; opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .15s ease; }
.dp-check > input:checked + .dp-check__box { background: var(--color-brand, #6366F1); border-color: var(--color-brand, #6366F1); }
.dp-check > input:checked + .dp-check__box svg { opacity: 1; transform: none; }
.dp-check > input:focus-visible + .dp-check__box { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand, #6366F1) 30%, transparent); }
.dp-check a { color: var(--color-brand, #6366F1); font-weight: 600; }
.dp-check a:hover { text-decoration: underline; }

/* button loading state */
.dp-btn-label { display: inline-flex; align-items: center; }
.dp-spinner {
  display: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.45); border-top-color: #fff;
  animation: dp-spin .6s linear infinite;
}
.is-loading .dp-btn-label { display: none; }
.is-loading .dp-spinner { display: inline-block; }
.is-loading { pointer-events: none; opacity: .85; }
@keyframes dp-spin { to { transform: rotate(360deg); } }

/* ---------- site popup (admin controlled) -----------------------------------*/
.dp-popup[hidden] { display: none; }
.dp-popup { position: fixed; inset: 0; z-index: 3000; display: flex; opacity: 0; transition: opacity .3s ease; }
.dp-popup.is-open { opacity: 1; }
.dp-popup__backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--color-ink, #0F172A) 60%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.dp-popup__card {
  position: relative; margin: auto; overflow: hidden;
  width: min(440px, calc(100% - 32px));
  background: var(--color-bg, #fff); border: 1px solid var(--color-line, #E2E8F0);
  border-radius: 20px; box-shadow: var(--dp-shadow);
  transform: translateY(14px) scale(.97); transition: transform .32s cubic-bezier(.16, 1, .3, 1);
}
.dp-popup.is-open .dp-popup__card { transform: none; }
.dp-popup__x {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border: 0; cursor: pointer; border-radius: 9px;
  background: color-mix(in srgb, var(--color-bg, #fff) 65%, transparent);
  color: var(--color-muted, #64748B); transition: background .16s, color .16s;
}
.dp-popup__x:hover { background: var(--color-surface-2, #F1F5F9); color: var(--color-ink, #0F172A); }
.dp-popup__x svg { width: 18px; height: 18px; }
.dp-popup__img img { display: block; width: 100%; height: 168px; object-fit: cover; }
.dp-popup__content { padding: 30px 26px 26px; text-align: center; }
.dp-popup__title { margin: 0; font-family: var(--font-sans, system-ui, sans-serif); font-weight: 700; font-size: 22px; letter-spacing: -.02em; color: var(--color-ink, #0F172A); }
.dp-popup__msg { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--color-muted, #64748B); }
.dp-popup__btn {
  display: inline-flex; align-items: center; justify-content: center; margin-top: 20px;
  padding: 12px 24px; border-radius: 11px; text-decoration: none; font-weight: 600; font-size: 14px;
  background: var(--color-brand, #4F46E5); color: #fff;
  box-shadow: 0 1px 2px rgba(79,70,229,.25), 0 4px 14px -4px rgba(79,70,229,.45);
  transition: background .18s, box-shadow .2s;
}
.dp-popup__btn:hover { background: var(--color-brand-2, #6366F1); }

/* bottom-right corner variant — banner-style, no page dimming */
.dp-popup--bottom-right { display: block; pointer-events: none; }
.dp-popup--bottom-right .dp-popup__backdrop { display: none; }
.dp-popup--bottom-right .dp-popup__card {
  pointer-events: auto; position: absolute; right: 20px; bottom: 20px; margin: 0;
  width: min(380px, calc(100% - 40px));
  opacity: 0; transform: translateY(20px);
  transition: transform .32s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
}
.dp-popup--bottom-right.is-open .dp-popup__card { opacity: 1; transform: none; }

/* ---------- splash screen (first open, once per session) --------------------*/
.splash-seen .dp-splash { display: none; }
.dp-splash {
  position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center;
  background: var(--color-bg, #fff); transition: opacity .5s ease, visibility .5s ease;
}
.dp-splash.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.dp-splash__inner { display: flex; flex-direction: column; align-items: center; gap: 13px; animation: dp-splash-in .5s cubic-bezier(.16,1,.3,1) both; }
.dp-splash__logo { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 18px; background: var(--color-brand, #4F46E5); color: #fff; font-weight: 800; font-size: 24px; letter-spacing: -.02em; box-shadow: 0 18px 44px -12px rgba(79,70,229,.7); }
.dp-splash__name { font-family: var(--font-sans, system-ui, sans-serif); font-weight: 700; font-size: 22px; letter-spacing: -.02em; color: var(--color-ink, #0F172A); }
.dp-splash__tag { font-size: 13px; color: var(--color-muted, #64748B); }
.dp-splash__bar { margin-top: 8px; width: 150px; height: 4px; border-radius: 999px; background: var(--color-line, #E2E8F0); overflow: hidden; }
.dp-splash__barfill { display: block; height: 100%; width: 40%; border-radius: 999px; background: var(--color-brand, #4F46E5); animation: dp-splash-bar 1.1s ease-in-out infinite; }
@keyframes dp-splash-bar { 0% { transform: translateX(-120%); } 100% { transform: translateX(380%); } }
@keyframes dp-splash-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .overlay, .overlay__panel, .dp-toast, .dp-popup, .dp-popup__card, .dp-splash { transition: none !important; }
  .dp-splash__barfill, .dp-splash__inner { animation: none !important; }
}