/* clone/site/assets/site.css */

/* Mobile nav drawer (header nav is `hidden md:flex` — below md we need our own toggle) */
/* Was a normal-flow block (position:static), so it rendered at the top of
   the document flow -- directly behind the fixed header/banner (which sit
   above it via z-index) instead of below them, and only as tall as its own
   content instead of filling the screen. Fixed + inset to below the
   header/banner and down to the viewport bottom so it's fully visible and
   covers the whole remaining screen on every phone size. */
.mobile-nav { display: none; position: fixed; top: 99px; left: 0; right: 0; bottom: 0; flex-direction: column; gap: 1rem; padding: 1.5rem; background: rgba(0,0,0,0.97); overflow-y: auto; z-index: 45; }
.mobile-nav.open { display: flex; }
.mobile-nav a { color: #a1a1aa; font-size: 0.95rem; font-weight: 500; }
.mobile-nav a:hover { color: #fff; }
.mobile-menu-btn { display: inline-flex; }
@media (min-width: 768px) { .mobile-menu-btn { display: none; } }

/* Language switcher dropdown */
.lang-dropdown { position: relative; }
.lang-menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); background: #0a0a0a; border: 1px solid rgba(255,255,255,0.1); border-radius: 0.75rem; padding: 0.5rem; min-width: 8rem; z-index: 60; }
.lang-menu.open { display: block; }
.lang-menu a { display: block; padding: 0.5rem 0.75rem; border-radius: 0.5rem; color: #a1a1aa; font-size: 0.875rem; }
.lang-menu a:hover { background: rgba(255,255,255,0.05); color: #fff; }

/* Mobile-only header simplification: logo + menu icon only. The header's
   language dropdown, "Explore Plans" CTA, and wordmark text are hidden
   below 768px (desktop keeps all three, unchanged). The language links
   move into the mobile drawer instead -- see .mobile-nav-lang below. */
@media (max-width: 767px) {
  .lang-dropdown, .header-cta, .header-brand-text { display: none; }
}

/* Language section inside the mobile nav drawer (mobile-only reachability
   already comes from .mobile-nav itself only being openable via the
   hamburger button, which is hidden on desktop). */
.mobile-nav-lang { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.1); }
.mobile-nav-lang-label { color: #6b7280; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

/* Scroll fade-in (replaces the removed framer-motion opacity/translateY animation) */
.fade-in { opacity: 0; transform: translateY(40px); transition: opacity 0.9s ease, transform 0.9s ease; }
.fade-in.in-view { opacity: 1; transform: translateY(0); }

/* FAQ accordion */
.faq-answer { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease; }
.faq-item.open .faq-answer { max-height: 600px; opacity: 1; }
.faq-item.open .faq-icon-plus { display: none; }
.faq-item:not(.open) .faq-icon-minus { display: none; }

/* Pricing device tabs */
.device-tab { cursor: pointer; }
.device-tab.active { background: #FFD700; color: #000; }
/* Deliberately generous: the device selector needs to read as fully done
   with before the (visually distinct) price-mode control below it starts --
   see .price-mode-wrap. */
.device-tabs { margin-bottom: 2.5rem; }

/* Monthly/Total price-display switch. A compact sliding segmented control
   with its own small uppercase label, NOT styled like the device tabs
   above it -- a first version reused the device-tab pill style directly
   underneath them and it visually read as one continuous row of 7
   identical pills (like two more device-count options), not two separate
   controls. This is intentionally a different shape (single pill-shaped
   track with a sliding highlight, rather than discrete pill buttons) so
   it's unmistakably its own thing.
   margin-bottom stays generous for the same reason as before: the
   "Popular" card's scale-105 transform visually shifts its whole box --
   badge included -- upward relative to its unscaled layout position, so
   the badge pokes up further above the card grid than a naive -top-4
   offset suggests. */
.price-mode-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.65rem; margin-bottom: 4.5rem; }
.price-mode-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #71717a; }
.price-mode-slider { position: relative; display: inline-flex; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; padding: 4px; }
.price-mode-thumb { position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px); background: #FFD700; border-radius: 999px; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }
.price-mode-slider.total .price-mode-thumb { transform: translateX(100%); }
.price-mode-btn { position: relative; z-index: 1; min-width: 5.5rem; padding: 0.55rem 1.1rem; border-radius: 999px; border: none; background: none; font-size: 0.82rem; font-weight: 700; color: #9ca3af; cursor: pointer; transition: color 0.3s ease; white-space: nowrap; }
.price-mode-btn.active { color: #000; }
@media (prefers-reduced-motion: reduce) {
  .price-mode-thumb { transition: none; }
}
/* Default (monthly mode): show the monthly block, hide the total one. */
.price-block-total { display: none; }
/* Total mode: #pricing carries this class (see SITE.initPricingDisplayToggle,
   site.js) -- flips every card in every device panel at once via CSS only,
   no per-card JS math or DOM rewriting since both values are pre-rendered. */
#pricing.price-mode-total .price-block-monthly { display: none; }
#pricing.price-mode-total .price-block-total { display: block; }

/* Pricing card grid: explicit rules, not Tailwind utility classes.
   The HTML carries `xl:grid-cols-5`, but this site's Tailwind CSS is a
   frozen, pre-compiled bundle captured from the original site, which only
   ever needed up to 4 pricing tiers -- `.xl\:grid-cols-5` was never compiled
   into it, so that class silently does nothing and the grid was stuck on
   the `.md\:grid-cols-2` rule (which DOES exist) at every width >=768px.
   Defining it here, after that stylesheet in <head>, wins the cascade
   without needing another guessed-at utility class name. Widened from the
   original's 1400px so 5 cards can sit at close to the same per-card width
   the original's 4-card row used, rather than 5 cramped-in cards. */
.device-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .device-panel { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
  .device-panel { grid-template-columns: repeat(5, 1fr); max-width: 1760px; }
}

/* Mobile-only collapsed feature list on pricing cards (every card except
   3 Months, which always shows its full list -- see redesign-pricing-cards.mjs).
   Mobile-first: collapsed by default to a short "peek" (not 0) that reveals
   the first hidden feature ("Fast & Stable") faded out via a mask-image
   gradient, rather than a hard cut -- the mask fades the real card pixels
   to transparent so whatever's actually behind the card (its own
   semi-transparent background) still shows through correctly, unlike an
   opaque overlay which would need to guess/match the card's exact color.
   The toggle sits pulled up into that faded zone (negative margin cancels
   the parent's space-y-4 gap) so it reads as part of the same preview
   strip instead of a separate element below it. Forced fully open on
   desktop regardless of JS state, and the toggle itself only ever renders
   on mobile -- desktop cards are visually identical to before. */
.pricing-features-visible { display: flex; flex-direction: column; gap: 1rem; }
.pricing-features-extra {
  max-height: 1.35rem; overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1);
  mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 92%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 92%);
}
.pricing-features-extra.expanded { max-height: 26rem; mask-image: none; -webkit-mask-image: none; }
/* No padding-top here -- the parent's space-y-4 already puts a 1rem gap
   above this whole block (matching every other row-to-row gap); adding one
   here too would double it, pushing "Fast & Stable" further down than any
   other feature-to-feature spacing on the card. */
.pricing-features-extra-inner { display: flex; flex-direction: column; gap: 1rem; }
.pricing-features-toggle { display: none; align-items: center; justify-content: center; gap: 0.35rem; width: 100%; background: none; border: none; padding: 0.5rem 0 0; cursor: pointer; color: #9ca3af; font-size: 0.78rem; font-weight: 600; }
.pricing-features-toggle:hover { color: #d4d4d8; }
.pricing-features-toggle svg { width: 0.85rem; height: 0.85rem; transition: transform 0.3s ease; }
.pricing-features-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (max-width: 767px) {
  .pricing-features-toggle { display: flex; margin-top: -1.1rem; }
}
/* >=768px: desktop cards stay exactly as before -- full list always shown,
   no collapse, no toggle, no fade mask -- regardless of whether JS ever
   toggled .expanded (e.g. a user who expanded on mobile then resized/
   rotated to a wider view). */
@media (min-width: 768px) {
  .pricing-features-extra { max-height: none !important; overflow: visible; mask-image: none !important; -webkit-mask-image: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-features-extra, .pricing-features-extra-inner { transition: none; }
}

/* Order popup modal — gold theme (matches pricing cards), backdrop blur,
   mobile bottom-sheet slide-up. Overlay stays in the layout (opacity/
   visibility-driven, not display:none/flex) so the inner modal's transform
   transition can actually animate when .open is toggled. */
.order-modal-overlay {
  display: flex; position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  z-index: 100; align-items: center; justify-content: center; padding: 1rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.order-modal-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.order-modal { position: relative; background: #0a0a0a; border: 1px solid rgba(255,215,0,0.3); border-radius: 1.25rem; padding: 2rem; max-width: 28rem; width: 100%; max-height: 90vh; overflow-y: auto; transition: transform 0.35s ease; }
.order-modal-header { min-height: 0.5rem; margin-bottom: 0.5rem; }
.order-modal-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.order-badge { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; font-weight: 600; color: #FFD700; background: rgba(255,215,0,0.1); border: 1px solid rgba(255,215,0,0.3); border-radius: 999px; padding: 0.3rem 0.65rem; white-space: nowrap; }
.order-modal h3 { color: #fff; font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
.order-modal-desc { color: #a1a1aa; font-size: 0.85rem; margin-bottom: 1.25rem; line-height: 1.4; }
.order-choice-box { display: flex; flex-direction: column; gap: 0.6rem; background: rgba(255,215,0,0.08); border: 1px solid rgba(255,215,0,0.3); border-radius: 0.75rem; padding: 1rem; margin-bottom: 1.25rem; }
.order-choice-label { color: #a1a1aa; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.order-choice-details { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.order-choice-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.order-choice-pill { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #e5e5e5; font-size: 0.8rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 999px; }
.order-choice-price { color: #FFD700; font-weight: 800; font-size: 1.35rem; white-space: nowrap; }
.order-form-heading { color: #FFD700; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin: 0; }
.order-modal label { display: block; color: #a1a1aa; font-size: 0.85rem; margin-bottom: 0.35rem; margin-top: 1rem; }
.order-modal input { width: 100%; background: #2a2a30; border: 1px solid rgba(255,255,255,0.18); border-radius: 0.5rem; padding: 0.6rem 0.75rem; color: #fff; font-size: 0.95rem; }
.order-modal input::placeholder { color: #9ca3af; }
.order-modal input:focus { outline: none; border-color: #FFD700; background: #303038; }
.order-modal .submit-btn { margin-top: 1.5rem; width: 100%; background: #FFD700; color: #000; font-weight: 700; border-radius: 999px; padding: 0.75rem; border: none; cursor: pointer; transition: background 0.2s ease; }
.order-modal .submit-btn:hover:not(:disabled) { background: rgba(255,215,0,0.85); }
.order-modal .submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.order-modal .close-btn { position: absolute; top: 1rem; right: 1rem; color: #a1a1aa; background: none; border: none; cursor: pointer; font-size: 1.25rem; line-height: 1; }
.order-modal .status-msg { margin-top: 0.75rem; font-size: 0.85rem; }
.order-modal .status-msg.error { color: #f87171; }
.order-modal .status-msg.success { color: #FFD700; }
.order-modal-footer { display: flex; align-items: center; justify-content: center; gap: 0.35rem; text-align: center; font-size: 0.75rem; color: #a1a1aa; margin-top: 1.25rem; }
.order-lock-icon { width: 0.85rem; height: 0.85rem; flex-shrink: 0; }

/* Success view: replaces the form after a successful submission. The modal
   auto-closes 5s after this appears (see site.js), but the customer can
   still dismiss it sooner via the close button or backdrop click. Reset to
   hidden/form-visible each time a new plan is selected, in site.js. */
.order-success { display: none; flex-direction: column; align-items: center; text-align: center; padding: 1rem 0 0.5rem; }
.order-success.show { display: flex; }
.order-success-icon { width: 4rem; height: 4rem; border-radius: 50%; background: rgba(255,215,0,0.15); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.order-success-icon svg { width: 2rem; height: 2rem; color: #FFD700; }
.order-success p { color: #e5e5e5; font-size: 1rem; font-weight: 500; line-height: 1.4; margin: 0; }

/* Contact page form -- unscoped (unlike the order modal's own input/status
   rules above, which are deliberately scoped under .order-modal), since
   this form lives in a plain page card, not the modal. Reuses
   .order-success/.order-success-icon as-is for the sent-message state
   (same gold checkmark treatment as a completed order). */
.contact-input { width: 100%; background: #18181b; border: 1px solid rgba(255,255,255,0.18); border-radius: 0.5rem; padding: 0.75rem 1rem; color: #fff; font-size: 0.95rem; }
.contact-input::placeholder { color: #6b7280; }
.contact-input:focus { outline: none; border-color: hsl(83 78% 55%); background: #1f1f23; }
.status-msg { margin-top: 0.5rem; font-size: 0.85rem; min-height: 1.2rem; }
.status-msg.error { color: #f87171; }
.status-msg.success { color: hsl(83 78% 55%); }

/* Confetti celebration burst (order-success), built and torn down by
   SITE.launchConfetti() in site.js -- no external library. */
.confetti-container { position: fixed; inset: 0; pointer-events: none; z-index: 200; overflow: hidden; }
.confetti-piece {
  position: absolute; top: -12px; width: 8px; height: 14px; opacity: 0.9;
  animation-name: confetti-fall; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(var(--confetti-rotate, 480deg)); opacity: 0; }
}

@media (max-width: 767px) {
  .order-modal-overlay { align-items: flex-end; padding: 0; }
  .order-modal { transform: translateY(100%); border-radius: 1.25rem 1.25rem 0 0; max-width: 100%; width: 100%; max-height: 92vh; }
  .order-modal-overlay.open .order-modal { transform: translateY(0); }
}

/* Continuous auto-scroll marquees (logo strip, poster/testimonial/chat carousels).
   The original site drove these with JS; this is a pure-CSS replacement so it
   can never be silently disabled again by a future de-hydration pass. Each
   track's content is duplicated exactly 2x in the markup, so looping back to
   -50% is seamless. */
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { animation: marquee-scroll linear infinite; width: max-content; }
.marquee-track:hover { animation-play-state: paused; }
.marquee-logos { animation-duration: 25s; }
.marquee-posters { animation-duration: 60s; }
.marquee-testimonials { animation-duration: 40s; }
.marquee-chats { animation-duration: 50s; }
.marquee-announcement { animation-duration: 26s; }
/* Logos/posters (Unlimited Entertainment) and testimonials (What our
   customers say) must never pause -- not on hover, and not on the lingering
   :hover state some mobile browsers apply after a tap -- so these three
   override the shared .marquee-track:hover pause rule above, the same way
   .site-announcement-track already does. .marquee-chats keeps the default
   pause-on-hover behavior; it wasn't part of this request. */
.marquee-logos:hover, .marquee-posters:hover, .marquee-testimonials:hover { animation-play-state: running !important; }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* Site-wide announcement banner, fixed above the header. The header's own
   `top-0` Tailwind class is overridden by pushing it down exactly the
   banner's height (higher specificity than a single class selector, since
   `header.fixed` combines an element + a class -- verified this wins the
   cascade without needing !important, but !important is added anyway for
   certainty given this site's frozen/unpredictable Tailwind bundle). Body
   gets the same offset as top padding so every page's existing spacing
   below the header (which varies per page template) shifts down by exactly
   the same amount, preserving whatever gap each page already had. */
.site-announcement { position: fixed; top: 0; left: 0; right: 0; height: 34px; z-index: 70; background: #0a0a0a; border-bottom: 1px solid rgba(163,230,53,0.15); overflow: hidden; display: flex; align-items: center; }
.site-announcement-track { display: flex; }
.site-announcement-text { display: inline-flex; align-items: center; white-space: nowrap; font-size: 0.75rem; font-weight: 500; color: #9ca3af; letter-spacing: 0.01em; }
.announcement-icon { width: 13px; height: 13px; margin-right: 0.4rem; color: hsl(83 78% 55%); flex-shrink: 0; }
.announcement-highlight { color: hsl(83 78% 55%); font-weight: 700; }
.announcement-sep { color: hsl(83 78% 55%); opacity: 0.55; margin: 0 1rem; font-size: 0.6rem; }
/* Unlike the other marquees (logos/posters/testimonials/chats), this one
   must never pause on hover -- overrides the shared .marquee-track:hover
   rule for this specific track only (same specificity, wins on source
   order, !important added for certainty). */
.site-announcement-track:hover { animation-play-state: running !important; }
header.fixed { top: 34px !important; }
body { padding-top: 34px; }

/* FOMO purchase-notification toast. Built/torn down entirely in JS
   (SITE.initFomoPopup, site.js) -- a fresh node per notification, same
   pattern as .confetti-container. Sits bottom-left so it never collides
   with the bottom-right .whatsapp-float button; z-index keeps it above
   page content but below the order modal (100) so the modal always wins
   if both are ever visible at once. */
.fomo-toast {
  position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 90;
  display: flex; align-items: flex-start; gap: 0.75rem;
  background: rgba(18,18,20,0.92); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1rem; padding: 0.85rem 2rem 0.85rem 1rem; max-width: 320px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(163,230,53,0.08);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; transform: translateY(18px) scale(0.96);
  transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1), transform 0.55s cubic-bezier(0.16,1,0.3,1);
}
.fomo-toast.fomo-show { opacity: 1; transform: translateY(0) scale(1); }
.fomo-toast.fomo-hide { opacity: 0; transform: translateY(10px) scale(0.97); transition: opacity 0.4s ease, transform 0.4s ease; }
.fomo-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #a1a1aa; }
.fomo-avatar svg { width: 1.15rem; height: 1.15rem; }
.fomo-body { min-width: 0; }
.fomo-name-row { font-size: 0.85rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fomo-name-row .fomo-city { font-weight: 500; color: #9ca3af; }
.fomo-purchase { font-size: 0.82rem; color: #d4d4d8; margin-top: 0.15rem; }
.fomo-purchase strong { color: hsl(83 78% 55%); font-weight: 700; }
.fomo-meta { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.4rem; font-size: 0.72rem; color: #71717a; }
.fomo-meta svg { width: 0.8rem; height: 0.8rem; color: hsl(83 78% 55%); flex-shrink: 0; }
.fomo-close { position: absolute; top: 0.5rem; right: 0.55rem; background: none; border: none; color: #71717a; cursor: pointer; font-size: 0.85rem; line-height: 1; padding: 0.2rem; }
.fomo-close:hover { color: #fff; }
@media (max-width: 640px) {
  .fomo-toast { left: 0.65rem; bottom: 0.65rem; max-width: 250px; padding: 0.65rem 1.7rem 0.65rem 0.75rem; gap: 0.55rem; border-radius: 0.85rem; }
  .fomo-avatar { width: 1.8rem; height: 1.8rem; }
  .fomo-avatar svg { width: 0.95rem; height: 0.95rem; }
  .fomo-name-row { font-size: 0.76rem; }
  .fomo-purchase { font-size: 0.72rem; }
  .fomo-meta { font-size: 0.62rem; margin-top: 0.3rem; }
  .fomo-close { font-size: 0.7rem; top: 0.4rem; right: 0.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fomo-toast { transition: opacity 0.2s ease; transform: none !important; }
}

/* Mobile scroll/animation performance: backdrop-filter blur is expensive to
   recompute every frame, especially on mid-range Android GPUs and older
   iPhones. Three places stack that cost on top of continuous scrolling or
   animation, which is what actually causes visible jank (not one-off blur,
   which is cheap):
   - header.fixed is position:fixed + backdrop-blur-xl (24px) + present on
     every page -> recomputed on literally every scroll frame, site-wide.
     This is the single biggest jank source; solid background reads almost
     identically.
   - .fomo-toast blurs (12px) while simultaneously animating transform+
     opacity in and out every ~20s -- blur-during-transform is the classic
     expensive combo.
   - the testimonial cards blur (4px) while their track continuously
     transforms via the marquee-scroll animation -- same combo, just
     lower-severity given the smaller blur radius.
   Desktop keeps the original blur everywhere; only mobile trades it for a
   plain (already-present) semi-opaque background, which looks close to
   identical at this size while removing the per-frame compositing cost. */
@media (max-width: 767px) {
  header.fixed { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: rgba(0,0,0,0.85); }
  .fomo-toast { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(14,14,16,0.97); }
  .marquee-testimonials > div { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .order-modal-overlay { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
}