/*
Theme Name: GetSimfinity
Theme URI: https://getsimfinity.example
Author: GetSimfinity
Author URI: https://getsimfinity.example
Description: A premium, cinematic WordPress theme for global eSIM and connectivity brands. Includes a custom front page builder, an eSIM Destinations content type, and native WooCommerce support for selling data plans as products.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: getsimfinity
Tags: e-commerce, custom-colors, custom-menu, featured-images, full-width-template, threaded-comments, translation-ready, block-patterns
*/

/* =====================================================
   1. Design tokens
   ===================================================== */
:root {
  color-scheme: dark;
  --bg: #05070d;
  --bg-soft: #0a0e18;
  --ion: #4ce0d2;
  --violet: #6c5ce7;
  --ink: #f5f7fa;
  --slate: #8a93a6;
  --glass: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --radius: 20px;
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Manrope", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

/* =====================================================
   2. Reset & base
   ===================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* A subtle, mostly-dark gradient rather than a bright/saturated one —
     this needs to stay readable behind thousands of product pages, blog
     posts, and legal pages, not just look good on the homepage hero. The
     colors are the same brand palette already used sparingly elsewhere
     (logo, buttons, header wash), just extended site-wide at low
     intensity. background-attachment:fixed keeps it as one continuous
     gradient across the whole page rather than repeating per-section. */
  background: radial-gradient(ellipse 120% 60% at 15% 0%, rgba(108, 92, 231, 0.16), transparent 60%),
    radial-gradient(ellipse 120% 60% at 85% 100%, rgba(76, 224, 210, 0.1), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  overflow-x: hidden;
}

/* iOS Safari has a known scroll-performance quirk with fixed background
   attachments — switch to normal scrolling attachment on smaller screens,
   where it also matters most for smoothness. Gradient itself is unchanged,
   it just moves with the page instead of staying fixed on mobile. */
@media (max-width: 860px) {
  body {
    background-attachment: scroll;
  }
}

body.has-custom-cursor {
  cursor: none;
}

@media (max-width: 860px) {
  body.has-custom-cursor {
    cursor: auto;
  }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

::selection {
  background: var(--ion);
  color: var(--bg);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ion);
}

.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
}

.text-gradient {
  background: linear-gradient(90deg, var(--ion), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Matches the blue → violet → pink gradient used in the GetSimfinity
   wordmark/logo, for brand-name mentions in running text (e.g. footer). */
.brand-gradient {
  background: linear-gradient(90deg, #5B7FFF, var(--violet), #D946EF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}

/* =====================================================
   3. Custom cursor
   ===================================================== */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--ion);
  mix-blend-mode: difference;
}
.cursor-ring {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(76, 224, 210, 0.6);
  transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.cursor-ring.is-active {
  width: 70px;
  height: 70px;
  background: rgba(76, 224, 210, 0.08);
  border-color: var(--ion);
}
@media (max-width: 860px) {
  .cursor-dot,
  .cursor-ring {
    display: none;
  }
}

/* =====================================================
   4. Navigation
   ===================================================== */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  padding: 22px 0;
  backdrop-filter: blur(14px);
  background:
    linear-gradient(90deg, rgba(91, 127, 255, 0.10), rgba(108, 92, 231, 0.08) 45%, rgba(217, 70, 239, 0.08) 75%, rgba(76, 224, 210, 0.06)),
    linear-gradient(180deg, rgba(5, 7, 13, 0.85), rgba(5, 7, 13, 0.55));
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.site-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.site-logo:has(.site-logo-icon)::before {
  display: none;
}
.site-logo-icon {
  display: block;
  height: 32px;
  width: 32px;
  border-radius: 8px;
}
.site-logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
}
.site-logo::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ion);
  box-shadow: 0 0 12px var(--ion);
  flex-shrink: 0;
}
.primary-menu {
  display: flex;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: var(--slate);
}
.primary-menu a:hover {
  color: var(--ink);
}

/* ---- Icon nav items: Cart, My account ---- */
.menu-item-icon a {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--slate);
}
.menu-item-icon a:hover {
  color: var(--ink);
}
.nav-icon-count {
  position: absolute;
  top: -7px;
  right: -9px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 100px;
  background: var(--ion);
  color: var(--bg);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* ---- Mega menu: "Plans" ---- */
.menu-item-mega {
  position: relative;
}
.mega-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}
.mega-caret {
  transition: transform 0.2s ease;
}
.menu-item-mega:hover .mega-caret,
.menu-item-mega.is-open .mega-caret {
  transform: rotate(180deg);
}
.mega-menu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%);
  width: 480px;
  max-width: calc(100vw - 40px);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 28px;
  padding: 26px;
  border-radius: var(--radius);
  background: rgba(10, 14, 24, 0.97);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-deep, 0 20px 60px rgba(0, 0, 0, 0.5));
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 200;
}
.menu-item-mega:hover .mega-menu,
.menu-item-mega.is-open .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.mega-menu h6 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate);
  margin: 0 0 14px;
}
.mega-menu__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mega-menu__col ul a {
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}
.mega-menu__col ul a:hover {
  color: var(--ion);
}
.mega-menu__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.mega-menu__grid a {
  font-size: 13.5px;
  color: var(--slate);
}
.mega-menu__grid a:hover {
  color: var(--ink);
}
.nav-cta {
  padding: 10px 20px;
  border: none;
  border-radius: 100px;
  font-size: 13px;
  background: linear-gradient(90deg, #5b7fff, var(--violet), #d946ef);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}
.menu-toggle {
  display: none;
}
/* On narrow phones the logo + "Get eSIM" button + hamburger toggle don't
   fit in one row — the flex row was squeezing .site-logo down until the
   wordmark became unreadable/invisible. Drop the header CTA (still
   reachable in the mobile menu) and pin the logo to its natural size so
   it never gets compressed. */
@media (max-width: 480px) {
  .nav-cta {
    display: none;
  }
  .site-logo {
    flex-shrink: 0;
  }
  .site-logo-icon {
    flex-shrink: 0;
  }
  .site-logo-text {
    white-space: nowrap;
    font-size: 17px;
  }
  .site-header .wrap {
    padding: 0 20px;
  }
}
@media (max-width: 860px) {
  .primary-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .js .primary-menu {
    display: none;
  }
  .js .primary-menu.is-open {
    display: flex !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 16px;
    background: var(--bg-soft);
    padding: 24px 32px;
    border-top: 1px solid var(--glass-border);
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .js .menu-toggle {
    display: block;
    font-size: 13px;
    font-weight: 700;
    border: none;
    border-radius: 100px;
    padding: 8px 16px;
    background: var(--ion);
    color: var(--bg);
  }
  .menu-item-mega {
    display: flex;
    flex-direction: column;
  }
  .mega-caret {
    display: none;
  }
  .mega-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    max-width: none !important;
    grid-template-columns: 1fr;
    margin-top: 14px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
  }
  .mega-menu__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* =====================================================
   5. Hero
   ===================================================== */
/* CSS-only entrance animation, so hero content paints as soon as
   styles load instead of waiting on JS/GSAP to execute — this is
   the largest-contentful-paint element on the homepage, so gating
   its visibility behind a JS library load was directly hurting LCP. */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero .eyebrow,
  .js .hero h1,
  .js .hero p.hero-sub,
  .js .search-glass,
  .js .hero-stats,
  .js .scroll-cue {
    animation: none;
    opacity: 1;
  }
}
#globe-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
}
.js #globe-canvas {
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Bottom padding must comfortably exceed .scroll-cue's own reserved
     space (34px offset + ~53px height ≈ 87px) — it was previously only
     40px, so on shorter desktop viewports (common on laptops once browser
     chrome is accounted for), the vertically-centered hero content had
     nowhere to go but into the scroll indicator's territory, causing the
     stats row (e.g. "4.2M TRAVELERS") to visually collide with it. */
  padding: 100px 24px 120px;
}
.js .hero .eyebrow {
  animation: heroFadeUp 0.7s ease-out both;
}
.hero h1 {
  font-size: clamp(40px, 7vw, 88px);
  line-height: 1.02;
  margin: 20px 0 22px;
  max-width: 900px;
}
.js .hero h1 {
  animation: heroFadeUp 0.7s ease-out 0.1s both;
}
.hero h1 span {
  display: block;
}
.hero p.hero-sub {
  max-width: 520px;
  color: var(--slate);
  font-size: 17px;
  line-height: 1.6;
}
.js .hero p.hero-sub {
  animation: heroFadeUp 0.7s ease-out 0.2s both;
}
.search-glass {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 100px;
  width: min(480px, 90vw);
}
.js .search-glass {
  animation: heroFadeUp 0.7s ease-out 0.3s both;
}
.search-glass input {
  flex: 1;
  background: none;
  border: none;
  color: var(--ink);
  font-size: 14px;
  padding: 10px 16px;
  outline: none;
  font-family: var(--font-body);
}
.search-glass input::placeholder {
  color: var(--slate);
}
.search-glass button {
  background: var(--ion);
  color: var(--bg);
  padding: 10px 22px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.hero-stats {
  display: flex;
  gap: 48px;
  margin-top: 56px;
  flex-wrap: wrap;
  justify-content: center;
}
.js .hero-stats {
  animation: heroFadeUp 0.7s ease-out 0.4s both;
}
.stat {
  text-align: left;
}
.stat b {
  font-family: var(--font-display);
  font-size: 26px;
  display: block;
}
.stat span {
  font-size: 12px;
  color: var(--slate);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.scroll-cue {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate);
  letter-spacing: 0.1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.js .scroll-cue {
  animation: heroFadeUp 0.7s ease-out 0.5s both;
}
.scroll-cue .line {
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--ion), transparent);
  animation: scrollpulse 1.8s ease-in-out infinite;
}
@keyframes scrollpulse {
  0%,
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
  50% {
    transform: scaleY(0.4);
    opacity: 0.4;
  }
}

/* =====================================================
   6. Section heading
   ===================================================== */
.sec-head {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 60px;
}
.sec-head h2 {
  font-size: clamp(28px, 4vw, 44px);
  margin-top: 14px;
}
.sec-head p {
  color: var(--slate);
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.6;
}

/* =====================================================
   6a. Closing call-to-action
   ===================================================== */
.final-cta-section {
  position: relative;
  z-index: 2;
  padding: 0 0 140px;
  text-align: center;
}
.final-cta-section .sec-head {
  margin-bottom: 40px;
}
.final-cta-btn {
  display: inline-block;
  font-size: 16px;
  padding: 16px 40px;
}

/* =====================================================
   7. Why choose (glass tilt cards)
   ===================================================== */
.why-section {
  position: relative;
  z-index: 2;
  padding: 160px 0 120px;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.glass-card {
  border-radius: var(--radius);
  padding: 34px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s;
}
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(76, 224, 210, 0.14), transparent 45%);
  opacity: 0;
  transition: opacity 0.4s;
}
.glass-card:hover::before {
  opacity: 1;
}
.glass-card:hover {
  transform: translateY(-6px);
  border-color: rgba(76, 224, 210, 0.4);
}
.glass-card .num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ion);
  position: relative;
}
.glass-card h3 {
  font-size: 20px;
  margin: 18px 0 10px;
  position: relative;
}
.glass-card p {
  color: var(--slate);
  font-size: 14px;
  line-height: 1.6;
  position: relative;
}

/* =====================================================
   8. Destinations marquee
   ===================================================== */
.dest-section {
  position: relative;
  z-index: 2;
  padding: 100px 0;
}
.marquee-outer {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee-outer::-webkit-scrollbar {
  display: none;
}
.marquee-outer.is-dragging {
  cursor: grabbing;
}
.marquee-track {
  display: flex;
  gap: 18px;
  width: max-content;
  touch-action: pan-x;
}
.dest-card {
  position: relative;
  width: 200px;
  border-radius: 18px;
  flex-shrink: 0;
  border: 1px solid var(--glass-border);
  overflow: hidden;
  background: var(--bg-soft);
  display: block;
}
.dest-card .bg {
  width: 100%;
  aspect-ratio: 3 / 2;
  background-color: rgba(255, 255, 255, 0.03);
  background-repeat: no-repeat;
  background-position: center;
  /* "contain" (not "cover") so flag images show whole and undistorted
     instead of being cropped/zoomed to fill a mismatched aspect ratio. */
  background-size: 60%;
  border-bottom: 1px solid var(--glass-border);
}
.dest-card .content {
  padding: 16px 18px 20px;
  text-align: center;
}
.dest-card h4 {
  font-size: 16px;
  margin: 0 0 4px;
}
.dest-card span {
  font-size: 12px;
  color: var(--slate);
  font-family: var(--font-mono);
}


/* =====================================================
   8b. Testimonials (WhatsApp-style message bubbles)
   ===================================================== */
.testimonials-section {
  position: relative;
  z-index: 2;
  padding: 100px 0 120px;
}
.testimonial-marquee-outer {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.testimonial-marquee-outer::-webkit-scrollbar {
  display: none;
}
.testimonial-marquee-outer.is-dragging {
  cursor: grabbing;
}
.testimonial-marquee-track {
  display: flex;
  gap: 18px;
  width: max-content;
  touch-action: pan-x;
}
.whatsapp-bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 300px;
  flex-shrink: 0;
  background: #005c4b;
  border-radius: 12px 12px 12px 2px;
  padding: 16px 16px 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.whatsapp-bubble::before {
  content: "";
  position: absolute;
  left: -7px;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 8px 0;
  border-color: transparent #005c4b transparent transparent;
}
.testimonial-stars {
  color: #ffb800;
  font-size: 13px;
  letter-spacing: 2px;
  position: relative;
}
.testimonial-quote {
  color: #f0f5f3;
  font-size: 14.5px;
  line-height: 1.55;
  margin: 8px 0 10px;
  position: relative;
}
.testimonial-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.testimonial-name {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(240, 245, 243, 0.65);
}
.whatsapp-check {
  color: #53bdeb;
  font-size: 12px;
  letter-spacing: -2px;
}

/* =====================================================
   9. Plans / pricing (also styles WooCommerce products)
   ===================================================== */
.plans-section {
  position: relative;
  z-index: 2;
  padding: 100px 0 140px;
}

/* ---- Trip date-range search (replaces the old plan-tabs UI) ---- */
.trip-search {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.trip-search__field label {
  display: block;
  font-size: 12px;
  color: var(--slate);
  margin-bottom: 8px;
}
.trip-search__dest-form {
  position: relative;
  display: block;
  padding: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  /* This form reuses the .search-glass class so the existing search.js
     auto-wires it up, but .search-glass also carries a generic
     ".js .search-glass { opacity: 0 }" rule meant for elements with their
     own reveal-on-scroll animation (like the hero search bar, which has a
     matching "reveal-hero" class to fade it back in). This nested instance
     has no such animation trigger, so without this override it stayed
     invisible forever — clickable, but never actually visible. */
  opacity: 1 !important;
}
.trip-search__dest-form input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  background: none;
  border: none;
  padding: 14px 16px;
  color: var(--ink);
  font-size: 15px;
}
.trip-search__dest-form input[type="text"]:focus {
  outline: 2px solid var(--ion);
  outline-offset: -2px;
  border-radius: 14px;
}
.trip-search__dates {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
.trip-date-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 12px 16px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}
.trip-date-field:hover,
.trip-date-field:focus-visible {
  border-color: var(--ion);
  outline: none;
}
.trip-date-field__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate);
}
.trip-date-field__value {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.trip-date-field__arrow {
  color: var(--slate);
  font-size: 16px;
}
.trip-search__duration {
  text-align: center;
  font-size: 14px;
  color: var(--slate);
}
.trip-search__duration b {
  color: var(--ion);
}
.trip-search__message {
  text-align: center;
  font-size: 13px;
  color: #ef4444;
}
.trip-search__submit {
  background: var(--ion);
  color: var(--bg);
  border: none;
  border-radius: 100px;
  padding: 15px 28px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
.trip-search__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.trip-trending {
  max-width: 900px;
  margin: 40px auto 0;
}
.trip-trending__label {
  text-align: center;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate);
  margin-bottom: 18px;
}
.trip-trending__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 860px) {
  .trip-trending__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .trip-trending__grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}
.trip-trending__grid .dest-card {
  width: 100%;
}
@media (max-width: 640px) {
  .trip-search__dates {
    grid-template-columns: 1fr;
  }
  .trip-date-field__arrow {
    display: none;
  }
}

/* ---- Calendar modal / bottom sheet ---- */
.trip-calendar-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.trip-calendar-modal[hidden] {
  display: none;
}
.trip-calendar-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 10, 0.7);
  backdrop-filter: blur(4px);
}
.trip-calendar-modal__sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  max-height: 88vh;
  overflow-y: auto;
  background: rgba(12, 16, 28, 0.98);
  border: 1px solid var(--glass-border);
  border-radius: 24px 24px 0 0;
  padding: 24px;
  box-shadow: 0 -10px 60px rgba(91, 127, 255, 0.15);
}
@media (min-width: 641px) {
  .trip-calendar-modal {
    align-items: center;
  }
  .trip-calendar-modal__sheet {
    border-radius: var(--radius);
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.5);
  }
}
.trip-calendar-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.trip-calendar-modal__header h3 {
  font-size: 17px;
  margin: 0;
}
.trip-calendar-modal__close {
  background: none;
  border: none;
  color: var(--slate);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.trip-calendar-modal__summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.trip-calendar-modal__summary-field {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 10px 14px;
}
.trip-calendar-modal__summary-field span {
  display: block;
  font-size: 11px;
  color: var(--slate);
  margin-bottom: 2px;
}
.trip-calendar-modal__summary-field b {
  font-size: 14px;
}
.trip-calendar-modal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  font-weight: 700;
}
.trip-calendar-modal__nav-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  width: 36px;
  height: 36px;
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
}
.trip-calendar-modal__nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.trip-calendar-modal__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 11px;
  color: var(--slate);
  margin-bottom: 6px;
}
.trip-calendar-modal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--ink);
  font-size: 13.5px;
  cursor: pointer;
  border-radius: 10px;
  position: relative;
}
.cal-day:disabled {
  color: var(--slate);
  opacity: 0.3;
  cursor: not-allowed;
}
.cal-day.is-today {
  box-shadow: inset 0 0 0 1px var(--ion);
}
.cal-day.is-in-range {
  background: rgba(91, 127, 255, 0.15);
  border-radius: 0;
}
.cal-day.is-start,
.cal-day.is-till {
  background: linear-gradient(90deg, #5b7fff, var(--violet));
  color: #fff;
  font-weight: 700;
}
.cal-day.is-start {
  border-radius: 10px 0 0 10px;
}
.cal-day.is-till {
  border-radius: 0 10px 10px 0;
}
.cal-day.is-empty {
  visibility: hidden;
}
.trip-calendar-modal__footer {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.trip-calendar-modal__cancel,
.trip-calendar-modal__apply {
  flex: 1;
  padding: 13px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid var(--glass-border);
}
.trip-calendar-modal__cancel {
  background: none;
  color: var(--ink);
}
.trip-calendar-modal__apply {
  background: var(--ion);
  color: var(--bg);
  border: none;
}
.trip-calendar-modal__apply:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.plan-toggle-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 50px;
  flex-wrap: wrap;
}
.plan-toggle-btn {
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 13px;
  border: 1px solid var(--glass-border);
  color: var(--slate);
}
.plan-toggle-btn.is-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.plan-panel {
  display: none;
}
.plan-panel.is-active {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.plan-card {
  border-radius: var(--radius);
  padding: 36px 30px;
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-border);
}
.plan-card.is-featured {
  border-color: var(--ion);
  background: linear-gradient(180deg, rgba(76, 224, 210, 0.08), rgba(255, 255, 255, 0.03));
}
.plan-card .tag {
  position: absolute;
  top: -12px;
  right: 24px;
  background: var(--ion);
  color: var(--bg);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 100px;
  font-family: var(--font-mono);
}
.plan-card h3 {
  font-size: 18px;
  color: var(--slate);
  font-weight: 500;
}
.plan-card .price {
  font-family: var(--font-display);
  font-size: 42px;
  margin: 14px 0 4px;
  color: var(--ink);
}
.plan-card .price sup {
  font-size: 16px;
  color: var(--slate);
}
.plan-card .desc {
  font-size: 13px;
  color: var(--slate);
  margin-bottom: 24px;
}
.plan-card ul {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
}
.plan-card li {
  font-size: 13.5px;
  color: var(--ink);
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  gap: 10px;
  align-items: center;
}
.plan-card li::before {
  content: "\2014";
  color: var(--ion);
}
.plan-btn {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  font-size: 14px;
  text-align: center;
  display: block;
  transition: background 0.3s, color 0.3s;
}
.plan-card.is-featured .plan-btn {
  background: var(--ion);
  color: var(--bg);
  border-color: var(--ion);
  font-weight: 700;
}
.plan-btn:hover {
  background: var(--ink);
  color: var(--bg);
}
.plan-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--slate);
  padding: 40px 0;
  font-size: 14px;
}

/* WooCommerce archive/loop mapped onto the same card language */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  border-radius: var(--radius);
  padding: 30px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  text-align: left;
}
.woocommerce ul.products li.product.featured {
  border-color: var(--ion);
  background: linear-gradient(180deg, rgba(76, 224, 210, 0.08), rgba(255, 255, 255, 0.03));
}
.woocommerce ul.products li.product img {
  border-radius: 12px;
  margin-bottom: 16px;
}
.product-thumb {
  cursor: zoom-in;
}
.product-thumb img {
  display: block;
  width: 100%;
}
body.has-zoom-overlay {
  overflow: hidden;
}
.product-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 8, 15, 0.92);
  opacity: 0;
  transition: opacity 0.2s ease;
  cursor: zoom-out;
}
.product-zoom-overlay.is-visible {
  opacity: 1;
}
.product-zoom-overlay img {
  max-width: min(90vw, 480px);
  max-height: 80vh;
  border-radius: 18px;
  transform: scale(0.9);
  transition: transform 0.2s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.product-zoom-overlay.is-visible img {
  transform: scale(1);
}
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--ink);
}
.woocommerce ul.products li.product .price {
  font-family: var(--font-display);
  color: var(--ink);
  font-size: 28px;
}
.cart-confetti {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 10000;
  animation: cart-confetti-burst 0.7s ease-out forwards;
}
@keyframes cart-confetti-burst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0.4);
    opacity: 0;
  }
}
.cart-confetti--big {
  width: 9px;
  height: 9px;
  animation-name: cart-confetti-burst-big;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
@keyframes cart-confetti-burst-big {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), calc(var(--dy) + 220px)) rotate(540deg) scale(0.6);
    opacity: 0;
  }
}
.is-order-success .woocommerce-thankyou-order-received {
  animation: order-success-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes order-success-pop {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.button.is-celebrating,
a.button.is-celebrating {
  animation: cart-btn-pulse 0.5s ease;
}
@keyframes cart-btn-pulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.08);
    box-shadow: 0 0 0 8px rgba(76, 224, 210, 0.15);
  }
  100% {
    transform: scale(1);
  }
}
.woocommerce ul.products li.product .button {
  display: block;
  margin-top: 16px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: var(--ion);
  color: var(--bg);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.woocommerce ul.products li.product a.added_to_cart {
  display: block;
  margin-top: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: none;
  color: var(--ion);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.woocommerce ul.products li.product a.added_to_cart:hover {
  border-color: var(--ion);
  background: rgba(76, 224, 210, 0.08);
}
.woocommerce div.product .summary {
  color: var(--ink);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--ion);
  font-family: var(--font-display);
}
.woocommerce .quantity {
  display: inline-flex;
}
.woocommerce .quantity input.qty {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  color: var(--ink);
  width: 70px;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  font-family: var(--font-body);
  -moz-appearance: textfield;
}
.woocommerce .quantity input.qty:focus {
  outline: 2px solid var(--ion);
  outline-offset: -1px;
}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.woocommerce table.shop_table {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--ink);
}
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--ion);
  color: var(--bg);
  border-radius: 100px;
  border: none;
  padding: 12px 24px;
  font-weight: 700;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--ink);
}
@media (max-width: 860px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
  /* Center short, marketing-style descriptions on mobile: product short
     descriptions, category/term descriptions, and product card copy. Long-
     form content (blog posts, FAQ answers) is deliberately left out of this
     — centering multi-paragraph text creates a ragged left edge that's
     genuinely harder to read, so that stays left-aligned regardless of
     screen size. */
  .term-description,
  .woocommerce-product-details__short-description,
  .woocommerce div.product .woocommerce-product-details__short-description,
  .entry-summary > p,
  .single-product .summary > p {
    text-align: center;
    font-size: 14px;
  }
  .woocommerce ul.products li.product .desc,
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .dest-card .content {
    text-align: center;
  }
}

/* =====================================================
   10. Activation steps
   ===================================================== */
.steps-section {
  position: relative;
  z-index: 2;
  padding: 100px 0 140px;
}
.step-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  position: relative;
}
.step {
  padding: 28px 22px;
  border-left: 1px solid var(--glass-border);
  position: relative;
}
/* Stagger each step's reveal so they animate in one after another rather
   than all at once — reinforces the "step 1, then 2, then 3..." narrative
   the section is actually about. */
.js .step:nth-child(1) { transition-delay: 0s; }
.js .step:nth-child(2) { transition-delay: 0.15s; }
.js .step:nth-child(3) { transition-delay: 0.3s; }
.js .step:nth-child(4) { transition-delay: 0.45s; }

.step-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  color: var(--ion);
}
.step-icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Step 1 — checkmark draws itself in */
.step-icon__check {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}
.js .step.is-revealed .step-icon__check {
  animation: gs-draw-check 0.6s 0.3s ease forwards;
}
@keyframes gs-draw-check {
  to { stroke-dashoffset: 0; }
}

/* Step 2 — a scan line sweeps down over the QR pattern, looping */
.step-icon__scanline {
  transform-origin: center;
  opacity: 0;
}
.js .step.is-revealed .step-icon__scanline {
  animation: gs-scan 2.2s 0.3s ease-in-out infinite;
}
@keyframes gs-scan {
  0% { transform: translateY(-16px); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(16px); opacity: 0; }
}

/* Step 3 — signal rings pulse outward, staggered */
.step-icon__pulse {
  transform-origin: center;
  opacity: 0;
}
.js .step.is-revealed .step-icon__pulse--1 { animation: gs-pulse 2.4s 0.2s ease-out infinite; }
.js .step.is-revealed .step-icon__pulse--2 { animation: gs-pulse 2.4s 0.8s ease-out infinite; }
.js .step.is-revealed .step-icon__pulse--3 { animation: gs-pulse 2.4s 1.4s ease-out infinite; }
@keyframes gs-pulse {
  0% { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Step 4 — usage bars grow up from zero, left to right */
.step-icon__bar {
  transform-origin: bottom;
  transform: scaleY(0);
}
.js .step.is-revealed .step-icon__bar--1 { animation: gs-grow 0.5s 0.3s ease forwards; }
.js .step.is-revealed .step-icon__bar--2 { animation: gs-grow 0.5s 0.45s ease forwards; }
.js .step.is-revealed .step-icon__bar--3 { animation: gs-grow 0.5s 0.6s ease forwards; }
@keyframes gs-grow {
  to { transform: scaleY(1); }
}

/* Connecting line across all four steps, drawing left-to-right on reveal.
   Absolutely positioned rather than placed in the grid flow, at roughly
   the vertical center of the icons (28px card padding + 24px icon
   half-height) — sits behind the step content as a subtle timeline. */
.step-connector {
  position: absolute;
  top: 52px;
  left: 22px;
  right: 22px;
  height: 1px;
  background: linear-gradient(90deg, var(--ion), var(--violet));
  transform: scaleX(0);
  transform-origin: left;
  z-index: -1;
}
.js .step-connector.is-revealed {
  animation: gs-connector-draw 1.2s 0.1s ease forwards;
}
@keyframes gs-connector-draw {
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .step-icon__check,
  .step-icon__scanline,
  .step-icon__pulse,
  .step-icon__bar,
  .step-connector {
    animation: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
@media (max-width: 860px) {
  .step-row {
    grid-template-columns: 1fr;
  }
  .step-connector {
    display: none;
  }
}
.step .n {
  font-family: var(--font-mono);
  color: var(--ion);
  font-size: 13px;
}
.step h4 {
  margin: 14px 0 8px;
  font-size: 17px;
}
.step p {
  color: var(--slate);
  font-size: 13.5px;
  line-height: 1.55;
}

/* =====================================================
   11. Generic content (blog/page templates)
   ===================================================== */
.site-content {
  position: relative;
  z-index: 2;
  padding: 140px 0 100px;
}
.entry-header h1 {
  font-size: clamp(30px, 5vw, 48px);
  margin-bottom: 16px;
}
.entry-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--slate);
  margin-bottom: 30px;
}
.entry-content {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.75;
  max-width: 760px;
}
.entry-content p {
  margin-bottom: 1.4em;
}
.entry-content a {
  color: var(--ion);
  text-decoration: underline;
}
/* Body copy reads oversized on small screens relative to viewport width —
   trim the main reading-text selectors used across sections (hero intro,
   section intros, cards, blog/page content) a notch for mobile only.
   Headings and labels are untouched; only paragraph-style body text. */
@media (max-width: 860px) {
  .hero p {
    font-size: 15.5px;
  }
  .sec-head p {
    font-size: 14px;
  }
  .glass-card p {
    font-size: 13.5px;
  }
  .entry-content {
    font-size: 15px;
  }
}
.post-list-item {
  padding: 32px 0;
  border-bottom: 1px solid var(--glass-border);
}
.post-list-item h2 a:hover {
  color: var(--ion);
}
.pagination-row {
  display: flex;
  gap: 10px;
  margin-top: 40px;
  font-family: var(--font-mono);
  font-size: 13px;
}
.pagination-row a,
.pagination-row span {
  padding: 8px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
}

/* =====================================================
   12. Footer
   ===================================================== */
.site-footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--glass-border);
  padding: 100px 0 40px;
}
.foot-cta {
  text-align: center;
  margin-bottom: 90px;
}
.foot-cta h2 {
  font-size: clamp(30px, 5vw, 54px);
  margin-bottom: 24px;
}
.foot-btn {
  display: inline-block;
  padding: 16px 34px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 100px;
  font-weight: 700;
  font-size: 14px;
}
.foot-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 60px;
}
.foot-col h5 {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--slate);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.foot-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.foot-col a {
  display: block;
  font-size: 14px;
  color: var(--ink);
  opacity: 0.8;
  margin-bottom: 10px;
}
.foot-col a:hover {
  opacity: 1;
  color: var(--ion);
}
.newsletter-form {
  display: flex;
  gap: 10px;
  max-width: 380px;
}
.newsletter-form input {
  flex: 1;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  padding: 12px 18px;
  color: var(--ink);
  font-family: var(--font-body);
}
.newsletter-form button {
  background: var(--ion);
  color: var(--bg);
  border-radius: 100px;
  padding: 12px 22px;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
.foot-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.5px;
  color: var(--slate);
  border-top: 1px solid var(--glass-border);
  padding-top: 24px;
}

/* =====================================================
   13. Reveal-on-scroll utility (progressively enhanced by JS)
   ===================================================== */
/* Visible by default so content never disappears if JS fails to load,
   is blocked, or is disabled. Only the .js-marked <html> (set by an
   inline script in header.php) opts into the pre-animation hidden state. */
.reveal {
  opacity: 1;
  transform: none;
}
.js .reveal {
  opacity: 0;
  transform: translateY(40px);
}
.js .reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .marquee-track {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* =====================================================
   14. Responsive
   ===================================================== */
@media (max-width: 860px) {
  .why-grid,
  .plan-grid,
  .plan-panel,
  .plan-panel.is-active,
  .step-row {
    grid-template-columns: 1fr;
  }
  .woocommerce ul.products {
    grid-template-columns: 1fr !important;
  }
  /* The "SCROLL" hint is pinned to the bottom of a 100vh hero. On phones,
     browser chrome shrinks the effective viewport enough that it collides
     with the stats row below it — it's a desktop-only affordance anyway,
     since mobile users already know to scroll, so just hide it here. */
  .scroll-cue {
    display: none;
  }
  /* Give the hero room to breathe on short mobile viewports instead of
     forcing everything into exactly 100vh, which is what caused the
     overlap in the first place. */
  .hero {
    min-height: auto;
    padding-top: 120px;
    padding-bottom: 80px;
  }
}

/* =====================================================
   15. Accessibility: skip link + focus states
   ===================================================== */
.skip-link {
  position: fixed;
  top: -60px;
  left: 12px;
  z-index: 10000;
  background: var(--ion);
  color: var(--bg);
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 12px;
  clip: auto;
  clip-path: none;
  width: auto;
  height: auto;
  overflow: visible;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ion);
  outline-offset: 2px;
}

/* =====================================================
   16. Breadcrumbs
   ===================================================== */
.breadcrumbs {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--slate);
  margin: 110px 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.breadcrumbs a {
  color: var(--slate);
}
.breadcrumbs a:hover {
  color: var(--ion);
}
.breadcrumbs .sep {
  opacity: 0.4;
}
.breadcrumbs span[aria-current] {
  color: var(--ink);
}

/* =====================================================
   17. Search dropdown (homepage + searchform.php)
   ===================================================== */
.search-glass {
  position: relative;
}
.search-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: var(--bg-soft);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 8px;
  text-align: left;
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.search-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink);
}
.search-dropdown__item:hover,
.search-dropdown__item.is-active {
  background: rgba(76, 224, 210, 0.1);
}
.search-dropdown__item--region {
  border: 1px dashed rgba(76, 224, 210, 0.4);
  margin-bottom: 6px;
}
.search-dropdown__heading {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate);
  padding: 8px 12px 4px;
}
.search-dropdown__flag {
  font-size: 16px;
  width: 22px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.search-dropdown__flag-img {
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--glass-border);
  display: block;
}
.search-dropdown__label {
  flex: 1;
}
.search-dropdown__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate);
}
.search-dropdown__empty {
  padding: 14px 12px;
  font-size: 13px;
  color: var(--slate);
}

/* =====================================================
   18. Device compatibility checker
   ===================================================== */
.device-checker {
  max-width: 640px;
}
.device-checker__input {
  width: 100%;
  padding: 16px 20px;
  border-radius: 100px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: var(--ink);
  font-size: 15px;
  font-family: var(--font-body);
  outline: none;
}
.device-checker__input::placeholder {
  color: var(--slate);
}
.device-checker__brands {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}
.device-checker__brand-btn {
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid var(--glass-border);
  font-size: 13px;
  color: var(--slate);
}
.device-checker__brand-btn:hover {
  color: var(--ink);
  border-color: var(--ion);
}
.device-checker__results {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.device-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
}
.device-row__name {
  font-size: 14px;
}
.device-row__badge {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.device-row--compatible .device-row__badge {
  background: rgba(76, 224, 210, 0.15);
  color: var(--ion);
}
.device-row--not-compatible .device-row__badge {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}
.device-row--unknown .device-row__badge {
  background: rgba(138, 147, 166, 0.15);
  color: var(--slate);
}
.device-empty {
  color: var(--slate);
  font-size: 14px;
  padding: 12px 0;
}

/* =====================================================
   19. Contact form + newsletter notices
   ===================================================== */
.contact-form {
  max-width: 560px;
  border-radius: var(--radius);
  padding: 32px;
}
.contact-form__row {
  margin-bottom: 18px;
}
.contact-form__row label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--slate);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.contact-form__row input,
.contact-form__row textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  resize: vertical;
}
.contact-form__row input:focus,
.contact-form__row textarea:focus {
  border-color: var(--ion);
}
.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-notice,
.newsletter-notice {
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 14px;
  margin-bottom: 24px;
}
.contact-notice--success,
.newsletter-notice--success {
  background: rgba(76, 224, 210, 0.12);
  color: var(--ion);
  border: 1px solid rgba(76, 224, 210, 0.3);
}
.contact-notice--error,
.newsletter-notice--error {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.newsletter-notice {
  margin: 10px 0 0;
  padding: 8px 14px;
  font-size: 12px;
}

/* =====================================================
   20. WooCommerce: cart, checkout, my-account theming
   ===================================================== */
.woocommerce table.shop_table,
.woocommerce-cart table.cart,
.woocommerce-checkout table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  margin-bottom: 24px;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--glass-border);
  color: var(--ink);
  text-align: left;
}
.woocommerce table.shop_table th {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--slate);
  background: rgba(255, 255, 255, 0.03);
}
.woocommerce #payment,
.woocommerce-checkout #payment {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 20px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout select {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  font-family: var(--font-body);
}
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 10px 18px;
  border-radius: 100px;
  border: 1px solid var(--glass-border);
  font-size: 13px;
  color: var(--slate);
}
.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--ion);
  color: var(--bg);
  border-color: var(--ion);
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
  background: rgba(76, 224, 210, 0.1);
  border: 1px solid rgba(76, 224, 210, 0.3);
  border-radius: 12px;
  padding: 14px 20px;
  color: var(--ink);
  list-style: none;
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.woocommerce-message .button.wc-forward,
.woocommerce-info .button.wc-forward {
  float: none;
  flex-shrink: 0;
  order: 2;
}
@media (max-width: 480px) {
  .woocommerce-message,
  .woocommerce-info {
    flex-direction: column;
    align-items: stretch;
  }
  .woocommerce-message .button.wc-forward,
  .woocommerce-info .button.wc-forward {
    width: 100%;
    text-align: center;
  }
}
.woocommerce-error {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}
.woocommerce-mini-cart,
.widget_shopping_cart_content {
  background: var(--bg-soft);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 16px;
}

/* =====================================================
   16. My Account
   ===================================================== */
.woocommerce-account .entry-content {
  max-width: 1100px;
}
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword,
.woocommerce-EditAccountForm,
.woocommerce-Address-title,
.woocommerce-MyAccount-content > form {
  max-width: 460px;
  padding: 32px;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
}
.woocommerce-form-row {
  margin-bottom: 18px;
}
.woocommerce-form-row label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--slate);
}
.woocommerce-Input,
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-login input[type="email"],
.woocommerce-form-register input[type="text"],
.woocommerce-form-register input[type="password"],
.woocommerce-form-register input[type="email"],
.woocommerce-EditAccountForm input[type="text"],
.woocommerce-EditAccountForm input[type="password"],
.woocommerce-EditAccountForm input[type="email"],
.woocommerce-address-fields input,
.woocommerce-address-fields select {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  color: var(--ink);
  font-size: 14px;
  box-sizing: border-box;
}
.woocommerce-Input:focus {
  outline: none;
  border-color: var(--ion);
}
.woocommerce-button,
.woocommerce-Button,
.woocommerce-form-login button,
.woocommerce-form-register button {
  background: var(--ion);
  color: var(--bg);
  border: none;
  border-radius: 100px;
  padding: 13px 28px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--slate);
  margin: 4px 0 20px;
}
.woocommerce-LostPassword a,
.woocommerce-form-login a,
.woocommerce-form-register a {
  color: var(--ion);
  font-size: 13px;
}
.u-columns.woocommerce-Addresses,
.u-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
/* Logged-in dashboard: sidebar nav + content */
.woocommerce-MyAccount-navigation {
  margin-bottom: 24px;
}
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 18px;
}
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 9px 18px;
  border-radius: 100px;
  border: 1px solid var(--glass-border);
  color: var(--slate);
  font-size: 13.5px;
}
.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.woocommerce-MyAccount-content table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--glass-border);
  text-align: left;
  font-size: 13.5px;
}
@media (max-width: 720px) {
  .woocommerce-form-login,
  .woocommerce-form-register,
  .woocommerce-EditAccountForm {
    max-width: none;
    padding: 24px;
  }
  .u-columns.woocommerce-Addresses,
  .u-columns {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   18. Cart page
   ===================================================== */
.woocommerce-cart-form table.shop_table,
table.shop_table.cart {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
}
table.shop_table.cart th {
  text-align: left;
  padding: 14px 16px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate);
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--glass-border);
}
table.shop_table.cart td {
  padding: 16px;
  border-bottom: 1px solid var(--glass-border);
  vertical-align: middle;
}
table.shop_table.cart tr:last-child td {
  border-bottom: none;
}
table.shop_table.cart td.product-name a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
table.shop_table.cart td.product-name a:hover {
  color: var(--ion);
}
table.shop_table.cart td.product-remove a {
  color: var(--slate);
  font-size: 20px;
  text-decoration: none;
}
table.shop_table.cart td.product-remove a:hover {
  color: #ef4444;
}
table.shop_table.cart .quantity input.qty {
  width: 60px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  color: var(--ink);
  padding: 8px 10px;
  font-size: 14px;
}
.coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}
.coupon input#coupon_code {
  flex: 1;
  min-width: 160px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  padding: 12px 18px;
  color: var(--ink);
  font-size: 14px;
}
.cart_totals {
  max-width: 480px;
  margin-left: auto;
}
.cart_totals h2 {
  margin-bottom: 16px;
}
.cart_totals table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}
.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--glass-border);
  font-size: 14px;
}
.cart_totals table.shop_table tr:last-child th,
.cart_totals table.shop_table tr:last-child td {
  border-bottom: none;
  font-weight: 700;
  font-size: 16px;
}
.wc-proceed-to-checkout a.checkout-button {
  display: block;
  text-align: center;
  background: var(--ion);
  color: var(--bg);
  border-radius: 100px;
  padding: 16px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
@media (max-width: 720px) {
  table.shop_table.cart thead {
    display: none;
  }
  table.shop_table.cart tr {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 12px;
  }
  table.shop_table.cart td {
    border: none;
    padding: 4px 0;
  }
  .cart_totals {
    max-width: none;
  }
}

/* =====================================================
   19. Variable product plan selector
   ===================================================== */
table.variations {
  width: 100%;
  margin: 20px 0;
}
table.variations tr {
  display: block;
}
table.variations td.label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate);
  margin-bottom: 8px;
}
table.variations td.value {
  display: block;
}
table.variations select {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  color: var(--ink);
  padding: 13px 16px;
  font-size: 15px;
  font-family: var(--font-body);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238A93A6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
table.variations select:focus {
  outline: 2px solid var(--ion);
  outline-offset: -1px;
}
.woocommerce-variation-price {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 8px;
}
.woocommerce-variation-description p {
  color: var(--slate);
  font-size: 14px;
  margin-bottom: 16px;
}
a.reset_variations {
  display: inline-block;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--slate);
}
.woocommerce-variation-add-to-cart {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* =====================================================
   20. Smooth press feedback — every button, everywhere
   ===================================================== */
button,
input[type="submit"],
input[type="button"],
.nav-cta,
.plan-btn,
.trip-search__submit,
.foot-btn,
.mega-trigger,
.dest-card,
.wc-proceed-to-checkout a.checkout-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.trip-calendar-modal__apply,
.trip-calendar-modal__cancel,
.cal-day,
a.reset_variations {
  transition: transform 0.15s ease, opacity 0.15s ease;
}
button:active,
input[type="submit"]:active,
input[type="button"]:active,
.nav-cta:active,
.plan-btn:active,
.trip-search__submit:active,
.foot-btn:active,
.mega-trigger:active,
.wc-proceed-to-checkout a.checkout-button:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce #respond input#submit:active,
.trip-calendar-modal__apply:active,
.trip-calendar-modal__cancel:active,
.cal-day:not(:disabled):active {
  transform: scale(0.96);
  opacity: 0.9;
}

/* Respect reduced-motion preference — no scale animation for people who've
   asked their device to minimize motion. */
@media (prefers-reduced-motion: reduce) {
  button:active,
  input[type="submit"]:active,
  input[type="button"]:active,
  .nav-cta:active,
  .plan-btn:active,
  .trip-search__submit:active,
  .foot-btn:active,
  .mega-trigger:active,
  .wc-proceed-to-checkout a.checkout-button:active,
  .woocommerce a.button:active,
  .woocommerce button.button:active,
  .trip-calendar-modal__apply:active,
  .trip-calendar-modal__cancel:active,
  .cal-day:active {
    transform: none;
  }
}

/* =====================================================
   21. Shop archive: sorting dropdown
   ===================================================== */
.woocommerce-ordering {
  margin-bottom: 24px;
}
.woocommerce-ordering select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  color: var(--ink);
  padding: 11px 40px 11px 16px;
  font-size: 14px;
  font-family: var(--font-body);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238A93A6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
.woocommerce-ordering select:focus {
  outline: 2px solid var(--ion);
  outline-offset: -1px;
}
.woocommerce-ordering select option {
  background: var(--bg-soft);
  color: var(--ink);
}

/* =====================================================
   22. My eSIMs (My Account tab)
   ===================================================== */
.my-esims__notice {
  background: rgba(76, 224, 210, 0.08);
  border: 1px solid rgba(76, 224, 210, 0.25);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 13.5px;
  color: var(--slate);
  margin-bottom: 24px;
}
.my-esims__empty {
  color: var(--slate);
  font-size: 14px;
}
.my-esims__empty a {
  color: var(--ion);
}
.my-esims__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.my-esims__card {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.my-esims__card h4 {
  margin: 0 0 4px;
  font-size: 15px;
}
.my-esims__meta {
  font-size: 12.5px;
  color: var(--slate);
}
.my-esims__card-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.my-esims__link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ion);
  white-space: nowrap;
}
.my-esims__link--muted {
  color: var(--slate);
  font-weight: 500;
}

/* =====================================================
   23. Account security notice
   ===================================================== */
.account-security {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 24px;
}
.account-security h3 {
  font-size: 14px;
  margin: 0 0 12px;
}
.account-security ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.account-security li {
  font-size: 13px;
  color: var(--slate);
  padding-left: 22px;
  position: relative;
}
.account-security li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--ion);
  font-weight: 700;
}

/* =====================================================
   22. Hide WooCommerce's built-in password visibility
   toggle button. Core auto-injects this into every
   password field, but the theme's generic button reset
   (input[type="button"]) strips its eye icon, leaving a
   blank teal pill. Rather than fight core's markup/icon
   on every WooCommerce update, just hide the button and
   let the plain password input show through.
   ===================================================== */
.woocommerce form .show-password-input,
.woocommerce form button.show-password-input,
.woocommerce form .password-input button,
.woocommerce form button[aria-label*="password" i],
.woocommerce form button[aria-label*="Password" i] {
  display: none !important;
}

/* =====================================================
   24. Pagination (shop archive & related products)
   ===================================================== */
.woocommerce-pagination,
nav.pagination,
.pagination {
  margin: 32px 0;
}
.woocommerce-pagination ul.page-numbers,
.pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.page-numbers li {
  list-style: none;
}
.page-numbers li a,
.page-numbers li span,
a.page-numbers,
span.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.page-numbers li a:hover,
a.page-numbers:hover {
  border-color: var(--ion);
  color: var(--ion);
}
.page-numbers li a:active,
a.page-numbers:active {
  transform: scale(0.94);
}
.page-numbers li span.current,
span.page-numbers.current {
  background: var(--ion);
  border-color: var(--ion);
  color: var(--bg);
}
.page-numbers li .next,
.page-numbers li .prev,
a.next.page-numbers,
a.prev.page-numbers {
  font-size: 0;
  width: 40px;
  padding: 0;
}
.page-numbers li .next::after,
a.next.page-numbers::after {
  content: "\2192";
  font-size: 16px;
}
.page-numbers li .prev::before,
a.prev.page-numbers::before {
  content: "\2190";
  font-size: 16px;
}
.page-numbers li span.dots {
  background: none;
  border: none;
  color: var(--slate);
}

/* =====================================================
   25. My Account dashboard
   ===================================================== */
.account-dashboard__greeting {
  font-size: 20px;
  margin-bottom: 24px;
}
.account-dashboard__greeting strong {
  color: var(--ion);
}
.account-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
.account-dashboard__card {
  display: block;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 20px;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.account-dashboard__card:hover {
  border-color: var(--ion);
}
.account-dashboard__card:active {
  transform: scale(0.98);
}
.account-dashboard__card h3 {
  font-size: 15px;
  color: var(--ink);
  margin: 0 0 6px;
}
.account-dashboard__card p {
  font-size: 12.5px;
  color: var(--slate);
  margin: 0;
}
.account-dashboard__logout {
  font-size: 13px;
  color: var(--slate);
}
.account-dashboard__logout a {
  color: var(--ion);
}
@media (max-width: 480px) {
  .account-dashboard__grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   26. Account security actions (session logout, deletion)
   ===================================================== */
.account-security-actions {
  margin: 20px 0;
}
.account-security-actions .button {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  color: var(--ink);
  padding: 11px 20px;
  font-size: 13.5px;
  cursor: pointer;
}
.account-security-actions .button:hover {
  border-color: var(--ion);
}
.account-security-actions--danger .button {
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
}
.account-security-actions--danger .button:hover {
  background: rgba(239, 68, 68, 0.08);
}
.gs-sessions-cleared {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ion);
}

/* =====================================================
   27. Payment result messaging
   ===================================================== */
.gs-payment-result {
  max-width: 560px;
  margin: 0 auto 32px;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-sizing: border-box;
}
.gs-payment-result h3 {
  margin: 0 0 10px;
  font-size: 19px;
}
.gs-payment-result p {
  color: var(--slate);
  font-size: 14px;
  margin: 0 0 20px;
}
.gs-payment-result--cancelled,
.gs-payment-result--pending {
  border-color: rgba(245, 158, 11, 0.35);
}
.gs-payment-result--cancelled h3,
.gs-payment-result--pending h3 {
  color: #f59e0b;
}
.gs-payment-result--failed {
  border-color: rgba(239, 68, 68, 0.35);
}
.gs-payment-result--failed h3 {
  color: #ef4444;
}
.gs-payment-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.gs-payment-result__actions .button {
  border-radius: 100px;
  padding: 12px 22px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  background: var(--ion);
  color: var(--bg);
  border: none;
}
.gs-payment-result__actions .button.gs-payment-result__secondary {
  background: none;
  border: 1px solid var(--glass-border);
  color: var(--ink);
}
@media (max-width: 480px) {
  .gs-payment-result {
    padding: 20px;
  }
  .gs-payment-result__actions {
    flex-direction: column;
  }
  .gs-payment-result__actions .button {
    text-align: center;
  }
}

/* =====================================================
   28. Product reviews
   ===================================================== */
#reviews {
  margin-top: 40px;
}
.woocommerce-Reviews-title {
  font-size: 20px;
  margin-bottom: 20px;
}
.woocommerce-noreviews {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 16px 20px;
  color: var(--slate);
  font-size: 14px;
}
#comments {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
#comments .comment {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 12px;
  list-style: none;
}
#comments .comment_container {
  display: flex;
  gap: 14px;
}
#comments img.avatar {
  border-radius: 100px;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}
#comments .comment-text {
  flex: 1;
}
#comments .star-rating {
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--ion);
}
#comments .woocommerce-review__author {
  font-weight: 700;
  color: var(--ink);
}
#comments .woocommerce-review__dash {
  color: var(--slate);
  margin: 0 4px;
}
#comments .woocommerce-review__published-date {
  color: var(--slate);
  font-size: 12.5px;
}
#comments .description p {
  color: var(--slate);
  font-size: 14px;
  margin: 6px 0 0;
}
#comments .woocommerce-review__verified {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  color: var(--ion);
  background: rgba(76, 224, 210, 0.1);
  border: 1px solid rgba(76, 224, 210, 0.3);
  border-radius: 100px;
  padding: 2px 10px;
}
#review_form_wrapper {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 24px;
}
#review_form #reply-title {
  font-size: 16px;
  margin-bottom: 16px;
}
.comment-form-rating label,
.comment-form-comment label,
.comment-form-author label,
.comment-form-email label {
  display: block;
  font-size: 12px;
  color: var(--slate);
  margin-bottom: 6px;
}
.comment-form-rating select,
.comment-form-comment textarea,
.comment-form-author input,
.comment-form-email input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--ink);
  font-size: 14px;
  font-family: var(--font-body);
  margin-bottom: 16px;
}
.comment-form-rating select:focus,
.comment-form-comment textarea:focus,
.comment-form-author input:focus,
.comment-form-email input:focus {
  outline: 2px solid var(--ion);
  outline-offset: -1px;
}
#commentform .form-submit input {
  background: var(--ion);
  color: var(--bg);
  border: none;
  border-radius: 100px;
  padding: 13px 28px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.comment-notes,
.email-notes {
  color: var(--slate);
  font-size: 12.5px;
}

/* =====================================================
   29. Clear cart button
   ===================================================== */
.gs-clear-cart-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}
.gs-clear-cart-btn {
  display: inline-block;
  font-size: 13px;
  color: var(--slate);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  padding: 8px 16px;
  text-decoration: none;
}
.gs-clear-cart-btn:hover {
  border-color: #ef4444;
  color: #ef4444;
}

/* =====================================================
   30. Shop page search box
   ===================================================== */
.shop-search-box {
  max-width: 480px;
  margin: 0 0 28px;
}
.shop-search-box__form {
  position: relative;
  display: block;
  padding: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  opacity: 1 !important;
}
.shop-search-box__form input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  background: none;
  border: none;
  padding: 14px 16px;
  color: var(--ink);
  font-size: 15px;
}
.shop-search-box__form input[type="text"]:focus {
  outline: 2px solid var(--ion);
  outline-offset: -2px;
  border-radius: 14px;
}

/* =====================================================
   31. Email OTP login step
   ===================================================== */
.gs-otp-form {
  max-width: 420px;
  margin: 0 auto 32px;
  padding: 28px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-sizing: border-box;
}
.gs-otp-form h2 {
  font-size: 20px;
  margin: 0 0 10px;
}
.gs-otp-form > p {
  color: var(--slate);
  font-size: 14px;
  margin: 0 0 20px;
}
.gs-otp-form label {
  display: block;
  font-size: 12px;
  color: var(--slate);
  margin-bottom: 6px;
}
.gs-otp-form input[name="gs_otp_code"] {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--ink);
  font-size: 22px;
  letter-spacing: 6px;
  text-align: center;
  font-family: var(--font-mono);
  margin-bottom: 18px;
}
.gs-otp-form input[name="gs_otp_code"]:focus {
  outline: 2px solid var(--ion);
  outline-offset: -1px;
}
.gs-otp-form button {
  width: 100%;
  background: var(--ion);
  color: var(--bg);
  border: none;
  border-radius: 100px;
  padding: 14px 24px;
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
}

/* =====================================================
   18. Site-wide gradient typography
   Applies the brand gradient (same blue -> violet -> pink used in
   the wordmark) as the text fill across headings, body copy, and
   inline text everywhere on the site, per explicit request —
   including body paragraphs, despite the readability trade-off.
   This includes nav/mega-menu links this time: an earlier version
   excluded them over a suspected mobile blur+gradient compositor
   bug, but removing the gradient entirely did NOT fix that bug
   (it was an unrelated, still-open layout issue), so there's no
   reason to keep nav text solid.
   Still excluded: buttons/CTAs, form fields, and icon-bearing
   links. background-clip:text has no effect on SVG icons — it only
   clips text glyphs — but the color:transparent it requires would
   still inherit down into any icon using stroke="currentColor" and
   make it disappear, and into buttons with their own solid/gradient
   background, breaking their legibility rather than just making
   them harder to read. Those stay excluded as a functional
   necessity, not a readability judgment call.
   ===================================================== */
body :where(h1, h2, h3, h4, h5, h6, p, li, td, th, label, blockquote, dd, dt,
    small, strong, em, span, a):not(.nav-cta):not(.menu-item-icon a):not(.button):not(.add_to_cart_button):not(.checkout-button):not(.single_add_to_cart_button):not(.nav-icon-count):not(.testimonial-quote):not(.testimonial-name):not(.whatsapp-check) {
  background: linear-gradient(90deg, #5B7FFF, var(--violet), #D946EF) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
/* The "Plans" mega-menu item has an inline caret svg (stroke="currentColor")
   sharing its anchor with gradiented text above — reset its own color so
   the caret stays visible instead of inheriting transparent. */
.mega-caret {
  color: var(--slate) !important;
}