/* ===== Vapemorra Shop — Light, warm & readable ===== */

:root{
  --vm-red:#B6020D;
  --vm-red-light:#c42a32;
  --vm-glow:rgba(182,2,13,.1);
  --vm-page-bg:#f5f3f0;
}

/* Legacy variable names: light values so older inline gradients stay on-brand */
body.vm-light-theme{
  --vm-dark:#f5f3f0;
  --vm-dark2:#ebe8e4;
  --vm-dark3:#e2ded8;
  background:var(--vm-page-bg)!important;
  color:#292524;
}

.cinema-noise{position:absolute;inset:0;opacity:.035;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cinema-glow-top{position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:900px;height:600px;border-radius:9999px;filter:blur(160px);pointer-events:none;background:radial-gradient(ellipse,var(--vm-glow) 0%,transparent 70%)}
.cinema-section{position:relative;overflow:hidden}
body.vm-light-theme .cinema-card{background:#fff;border:1px solid rgba(28,25,23,.1);border-radius:1rem;box-shadow:0 1px 3px rgba(0,0,0,.05);backdrop-filter:none;-webkit-backdrop-filter:none;transition:all .3s ease}
body.vm-light-theme .cinema-card:hover{border-color:rgba(182,2,13,.22);box-shadow:0 8px 28px rgba(0,0,0,.07)}
.cinema-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(28,25,23,.1) 20%,rgba(28,25,23,.1) 80%,transparent)}
.cinema-section-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.28em;color:var(--vm-red)}
.cinema-section-title{font-size:1.75rem;font-weight:800;letter-spacing:-.03em;color:#1c1917;line-height:1.15}
@media(min-width:768px){.cinema-section-title{font-size:2.1rem}}
@keyframes subtlePulse{0%,100%{opacity:.12}50%{opacity:.22}}
.cinema-pulse{animation:subtlePulse 4s ease-in-out infinite}

/* ── Forms (account / legacy checkout-step) ───────────── */
body.vm-light-theme .checkout-step{background:#fff;border:1px solid rgba(28,25,23,.1)}
body.vm-light-theme .checkout-step h3,body.vm-light-theme .checkout-step label{color:#78716c}
body.vm-light-theme .checkout-step input[type="text"],body.vm-light-theme .checkout-step input[type="email"],body.vm-light-theme .checkout-step input[type="tel"],body.vm-light-theme .checkout-step select,body.vm-light-theme .checkout-step textarea{background:#fff;border-color:rgba(28,25,23,.15);color:#1c1917}
body.vm-light-theme .checkout-step input:focus,body.vm-light-theme .checkout-step select:focus,body.vm-light-theme .checkout-step textarea:focus{border-color:var(--vm-red);box-shadow:0 0 0 3px rgba(182,2,13,.12)}
body.vm-light-theme .account-tab{color:#57534e;background:#f5f5f4;border:1px solid transparent}
body.vm-light-theme .account-tab:hover{background:#e7e5e4;color:#1c1917}

/* ── Modals ───────────────────────────────────────────── */
body.vm-light-theme .s-modal{background:#fff;box-shadow:0 25px 60px rgba(0,0,0,.12)}
body.vm-light-theme .s-modal h2{color:#1c1917}
body.vm-light-theme .s-modal h3{color:#44403c}
body.vm-light-theme .s-modal p{color:#78716c}
body.vm-light-theme .s-modal-close{background:#f5f5f4;color:#78716c}
body.vm-light-theme .s-modal-close:hover{background:#e7e5e4;color:#1c1917}

/* ── Alerts ───────────────────────────────────────────── */
.alert-success{background:rgba(22,101,52,.12);border-color:rgba(22,101,52,.22);color:#166534}

/* ── Skeleton (top-level; detailed shimmer below) ─────── */
body.vm-light-theme .skeleton{background:linear-gradient(90deg,#f5f5f4 25%,#e7e5e4 50%,#f5f5f4 75%);background-size:200% 100%}

/* ── Typography: Outfit Premium ── */
h1, h2, h3, h4, h5, h6,
.text-2xl, .text-3xl, .text-4xl, .text-5xl {
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.text-lg, .text-xl {
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.text-sm {
    line-height: 1.5;
}

.text-xs, .text-\[11px\], .text-\[10px\] {
    letter-spacing: 0.04em;
}

/* ── Marquee ── */
@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee 35s linear infinite; padding-left: 100%; }
.animate-marquee:hover { animation-play-state: paused; }

/* ── Line Clamp ── */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Page entrance ── */
main { animation: pageIn 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes pageIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Scroll reveal ── */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.stagger-children .reveal-child {
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.stagger-children.visible .reveal-child { opacity: 1; transform: translateY(0); }
.stagger-children.visible .reveal-child:nth-child(1) { transition-delay: 0s; }
.stagger-children.visible .reveal-child:nth-child(2) { transition-delay: 0.06s; }
.stagger-children.visible .reveal-child:nth-child(3) { transition-delay: 0.06s; }
.stagger-children.visible .reveal-child:nth-child(4) { transition-delay: 0.12s; }
.stagger-children.visible .reveal-child:nth-child(5) { transition-delay: 0.16s; }
.stagger-children.visible .reveal-child:nth-child(6) { transition-delay: 0.20s; }
.stagger-children.visible .reveal-child:nth-child(7) { transition-delay: 0.24s; }
.stagger-children.visible .reveal-child:nth-child(8) { transition-delay: 0.28s; }

/* ── Button styles ── */
.btn-press {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 600;
}
.btn-press:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(182,2,13,0.25);
}
.btn-press:active { transform: translateY(0); box-shadow: none; }

button[type="submit"] {
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 600;
}

/* ── Hover underline ── */
.hover-underline { position: relative; }
.hover-underline::after {
    content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1.5px;
    background: #B6020D; transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-underline:hover::after { width: 100%; }

/* ── Review quote ── */
.review-quote { position: relative; }
.review-quote::before {
    content: '\201C'; position: absolute; top: -6px; left: 18px;
    font-size: 3.5rem; font-family: Georgia, serif; color: #B6020D; opacity: .08; line-height: 1;
}

/* ── Modals ── */
.s-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(16px);
    z-index: 200; display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.s-modal-overlay.active { opacity: 1; pointer-events: auto; }
.s-modal {
    border-radius: 1.5rem; max-width: 560px; width: 90%;
    max-height: 80vh; overflow-y: auto; padding: 2.5rem; position: relative;
    transform: translateY(20px) scale(0.96); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.s-modal-overlay.active .s-modal { transform: translateY(0) scale(1); }
.s-modal-close {
    position: absolute; top: 1rem; right: 1rem; border: none;
    font-size: 1.25rem; cursor: pointer; width: 2.25rem; height: 2.25rem;
    border-radius: 9999px; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.s-modal-close:hover { transform: rotate(90deg); }

/* ── Star select ── */
.star-select-wrap { display: flex; flex-direction: row-reverse; gap: 0.15rem; }
.star-select-wrap input:checked ~ label { color: #facc15; }
/* Hover: fill stars up to hovered position */
.star-select-wrap label:hover,
.star-select-wrap label:hover ~ label { color: #facc15 !important; cursor: pointer; }
/* Reset checked highlight on container hover so hover previews are clear */
.star-select-wrap:hover input:checked ~ label { color: #d1d5db; }
.star-select-wrap label:hover ~ label { color: #facc15 !important; }

/* ── Checkout steps ── */
.checkout-step {
    border-radius: 1rem;
    padding: 1.5rem; margin-bottom: 1rem;
}
.checkout-step h3 {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.12em; margin-bottom: 1rem;
}
.checkout-step label {
    font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.08em; display: block; margin-bottom: 0.3rem;
}
.checkout-step input[type="text"],
.checkout-step input[type="email"],
.checkout-step input[type="tel"],
.checkout-step select,
.checkout-step textarea {
    width: 100%; border-radius: 0.75rem;
    padding: 0.7rem 1rem; font-size: 0.85rem; font-family: 'Outfit', sans-serif;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* ── Account tabs ── */
.account-tabs { display: flex; gap: 0.4rem; margin-bottom: 2rem; flex-wrap: wrap; }
.account-tab {
    padding: 0.5rem 1rem; font-size: 0.75rem; font-weight: 600; border-radius: 9999px;
    text-decoration: none; transition: all 0.2s;
}
.account-tab.active { background: var(--vm-red); color: #fff; }

/* ── Alerts ── */
.alert { padding: 1rem; border-radius: 0.75rem; margin-bottom: 1rem; font-size: 0.85rem; }

/* ── Selection ── */
::selection { background: rgba(182, 2, 13, 0.12); }

/* ── Smooth scroll ── */
html {
    scroll-behavior: smooth;
    font-family: 'Outfit', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Scrollbar hide utility ── */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ── Section headers ── */
.font-bold, .font-extrabold, .font-semibold {
    line-height: 1.25;
}

/* ── Cart badge pop ── */
@keyframes cartPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}
.cart-badge-pop { animation: cartPop 0.35s cubic-bezier(0.16, 1, 0.3, 1); }

/* ── Skeleton loading ── */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, #f3f4f6 25%, #e9eaec 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.5rem;
}

/* ── Focus ring (accessibility) ── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid #B6020D;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Filter drawer transition ── */
#filterDrawer { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

/* ── Image transition ── */
img { transition: opacity 0.2s ease; }
img.loading { opacity: 0.5; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media (max-width: 768px) {
    .s-modal { padding: 1.5rem; border-radius: 1rem; }
}