/* ============================================================
   diwali-offer.css  –  DataVix  |  Diwali 2026 campaign styles
   ============================================================
   Styles for the DvxDw* components in the compiled /landingpage bundle
   (hero offer card, pricing card, sticky bar, countdown, checkout note).
   Everything is prefixed .dvx-dw- so it can't collide with the bundle's
   own Tailwind utilities, and the whole file can be deleted with the
   campaign. Dates/prices live in /js/diwali-offer.js, not here.

   Motion is CSS-only (transform/opacity), and all of it is switched off
   under prefers-reduced-motion at the bottom of this file.
   ============================================================ */

.dvx-dw-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── Diya ─────────────────────────────────────────────────── */
.dvx-dw-diya { flex: none; width: 1.15em; height: 1.15em; overflow: visible; }
.dvx-dw-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: dvx-dw-flicker 2.6s ease-in-out infinite; }
.dvx-dw-diya-glow { animation: dvx-dw-glow 2.6s ease-in-out infinite; }
@keyframes dvx-dw-flicker {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  35% { transform: scale(1.06, 0.95) rotate(2deg); }
  70% { transform: scale(0.95, 1.05) rotate(-1deg); }
}
@keyframes dvx-dw-glow { 50% { opacity: 0.42; } }

/* ── Sparkles (a few, slow) ───────────────────────────────── */
.dvx-dw-spark { position: absolute; z-index: 0; width: 9px; height: 9px; background: #fde68a; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); opacity: 0; pointer-events: none; animation: dvx-dw-twinkle 4.2s ease-in-out infinite; }
@keyframes dvx-dw-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  50% { opacity: 0.85; transform: scale(1) rotate(45deg); }
}

/* ── Hero background particles ────────────────────────────── */
.dvx-dw-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.dvx-dw-particles i { position: absolute; bottom: -12px; border-radius: 50%; background: radial-gradient(circle, #fcd34d 0%, #f59e0b 55%, rgba(245, 158, 11, 0) 72%); opacity: 0; will-change: transform, opacity; animation: dvx-dw-rise 16s linear infinite; }
@keyframes dvx-dw-rise {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: 0.55; }
  75% { opacity: 0.35; }
  100% { transform: translate3d(18px, -620px, 0); opacity: 0; }
}

/* ── Hero offer card ──────────────────────────────────────── */
.dvx-dw-hero {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 34rem; margin: 1.75rem auto 0; padding: 1.35rem 1.5rem 1.5rem;
  border-radius: 1.75rem; color: #fff; text-align: center;
  background: radial-gradient(120% 85% at 50% 0%, rgba(245, 158, 11, 0.24), rgba(245, 158, 11, 0) 62%), linear-gradient(160deg, #0b1023 0%, #101836 55%, #1b1338 100%);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.4), 0 30px 60px -30px rgba(245, 158, 11, 0.6), 0 18px 40px -24px rgba(2, 6, 23, 0.55);
  animation: dvx-dw-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s both;
}
.dvx-dw-hero > :not(.dvx-dw-spark):not(.dvx-dw-corner) { position: relative; z-index: 1; }
@keyframes dvx-dw-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.dvx-dw-hero-cta { width: 100%; margin-top: 1.1rem; text-decoration: none; }
/* Desktop/tablet: price + deadline on the left, countdown on the right,
   so the whole offer (including its CTA) fits in the first viewport. */
@media (min-width: 768px) {
  .dvx-dw-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1.75rem; max-width: 46rem; padding: 1.35rem 2rem 1.6rem; }
  .dvx-dw-hero .dvx-dw-badge { grid-column: 1 / -1; justify-self: center; }
  .dvx-dw-hero .dvx-dw-price { grid-column: 1; grid-row: 2; flex-wrap: nowrap; justify-content: flex-start; gap: 0.55rem; }
  .dvx-dw-hero .dvx-dw-now { font-size: 3rem; }
  .dvx-dw-hero .dvx-dw-deadline { grid-column: 1; grid-row: 3; text-align: left; }
  .dvx-dw-hero .dvx-dw-cd { grid-column: 2; grid-row: 2 / span 2; margin-top: 0.9rem; }
  .dvx-dw-hero .dvx-dw-cd-grid { grid-template-columns: repeat(4, 3.4rem); }
  .dvx-dw-hero-cta { grid-column: 1 / -1; grid-row: 4; justify-self: center; width: auto; min-width: 16rem; }
}
.dvx-dw-corner { position: absolute; bottom: 1rem; z-index: 0; width: 1.9rem; height: 1.9rem; }
.dvx-dw-corner-l { left: 1.1rem; }
.dvx-dw-corner-r { right: 1.1rem; }

.dvx-dw-badge {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.15rem 0.45rem;
  margin: 0; padding: 0.38rem 0.9rem; border-radius: 1rem;
  background: rgba(251, 191, 36, 0.12); box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.42);
  color: #fde68a; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; line-height: 1.35; text-transform: uppercase;
}

/* ── Price row (hero + pricing card) ──────────────────────── */
.dvx-dw-price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.35rem 0.7rem; margin: 0.9rem 0 0; line-height: 1; }
.dvx-dw-was { color: #94a3b8; font-size: 1.25rem; font-weight: 500; text-decoration: line-through; text-decoration-thickness: 2px; }
.dvx-dw-arrow { color: #fbbf24; font-size: 1.25rem; font-weight: 600; }
.dvx-dw-now, .dvx-dw-gold {
  background: linear-gradient(180deg, #fff7d6 0%, #fcd34d 45%, #f59e0b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dvx-dw-now { font-family: var(--font-display, inherit); font-size: clamp(2.6rem, 9vw, 3.4rem); font-weight: 800; letter-spacing: -0.02em; filter: drop-shadow(0 2px 14px rgba(245, 158, 11, 0.35)); }
.dvx-dw-save { align-self: center; padding: 0.32rem 0.6rem; border-radius: 0.5rem; background: linear-gradient(135deg, #fde68a, #f59e0b); color: #1c1203; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.dvx-dw-deadline { margin: 0.75rem 0 0; color: #cbd5e1; font-size: 0.875rem; line-height: 1.4; }
.dvx-dw-deadline strong { color: #fff; font-weight: 600; }

/* ── Countdown ────────────────────────────────────────────── */
/* Fixed-width grid cells: digits changing every second can't move or
   resize anything around them (no layout shift). */
.dvx-dw-cd { margin-top: 1rem; }
.dvx-dw-cd-label { margin: 0 0 0.5rem; color: #fcd34d; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.dvx-dw-cd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 4.25rem)); justify-content: center; gap: 0.5rem; }
.dvx-dw-cd-cell { display: flex; flex-direction: column; align-items: center; padding: 0.5rem 0 0.45rem; border-radius: 0.85rem; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.24); }
.dvx-dw-cd-num { color: #fff; font-family: var(--font-display, inherit); font-size: 1.45rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dvx-dw-cd-unit { margin-top: 0.15rem; color: #94a3b8; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.dvx-dw-cd-inline { display: inline-block; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }

/* ── Gold CTA (always sits on a dark surface) ─────────────── */
.dvx-dw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.85rem 1.6rem; border: 0; border-radius: 9999px;
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 45%, #f59e0b 100%); color: #1c1203;
  font-size: 0.95rem; font-weight: 700; line-height: 1.2; cursor: pointer;
  box-shadow: 0 14px 30px -14px rgba(245, 158, 11, 0.75);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.dvx-dw-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.dvx-dw-btn:focus-visible, .dvx-dw-x:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.dvx-dw-btn-block { width: 100%; margin-top: 1.5rem; }
.dvx-dw-btn-lg { min-height: 3.5rem; padding: 1rem 2rem; font-size: 1rem; }

/* ── Pricing card ─────────────────────────────────────────── */
.dvx-dw-card {
  background-image: radial-gradient(110% 55% at 50% 0%, rgba(245, 158, 11, 0.17), rgba(245, 158, 11, 0) 65%);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.45), 0 30px 70px -30px rgba(245, 158, 11, 0.55), 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.dvx-dw-card > :not(.dvx-dw-spark):not(.dvx-dw-chip) { position: relative; z-index: 1; }
.dvx-dw-card .dvx-dw-price { justify-content: flex-start; margin-top: 1.5rem; }
.dvx-dw-card .dvx-dw-cd-label { margin-top: 0.25rem; }
.dvx-dw-card .dvx-dw-cd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dvx-dw-chip {
  position: absolute; top: -0.95rem; left: 50%; z-index: 2; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.95rem; border-radius: 9999px;
  background: #0b1023; box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.6), 0 10px 24px -10px rgba(245, 158, 11, 0.7);
  color: #fde68a; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
.dvx-dw-chip-ended { box-shadow: 0 0 0 1px #334155; color: #cbd5e1; }

/* ── Sticky offer bar ─────────────────────────────────────── */
.dvx-dw-bar {
  display: flex; align-items: center; gap: 0.75rem;
  max-width: 48rem; margin: 0 auto; padding: 0.7rem 0.6rem calc(0.7rem + env(safe-area-inset-bottom, 0px)) 1.1rem;
  border-radius: 1.1rem 1.1rem 0 0; color: #fff;
  background: linear-gradient(120deg, #0b1023, #151c40);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.4), 0 -14px 40px rgba(2, 6, 23, 0.3);
}
.dvx-dw-bar-text { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.6rem; min-width: 0; margin: 0; font-size: 0.9rem; line-height: 1.35; }
.dvx-dw-bar-title { display: inline-flex; align-items: center; gap: 0.35rem; color: #fde68a; font-weight: 700; }
.dvx-dw-bar-prices { display: inline-flex; align-items: baseline; gap: 0.4rem; white-space: nowrap; }
.dvx-dw-bar-prices s { color: #94a3b8; }
.dvx-dw-bar-prices strong { color: #fff; font-family: var(--font-display, inherit); font-size: 1.15rem; font-weight: 800; }
.dvx-dw-bar-ends { color: #cbd5e1; font-size: 0.78rem; white-space: nowrap; }
.dvx-dw-bar .dvx-dw-btn { flex: none; min-height: 2.75rem; padding: 0.6rem 1.15rem; font-size: 0.875rem; white-space: nowrap; }
.dvx-dw-x { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 9999px; background: transparent; color: #94a3b8; cursor: pointer; }
.dvx-dw-x:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.dvx-dw-x svg { width: 1rem; height: 1rem; }

/* ── Hero CTA, final CTA, ended notice ────────────────────── */
.dvx-dw-cta-diya { width: 1.25rem; height: 1.25rem; }
.dvx-dw-cta-price { display: inline-flex; align-items: baseline; gap: 0.35rem; }
.dvx-dw-cta-price s { color: rgba(255, 255, 255, 0.55); font-size: 0.8em; font-weight: 500; }
.dvx-dw-cta-price strong { font-weight: 700; }
.dvx-dw-final-note { margin: 0; color: #cbd5e1; font-size: 0.9rem; }
.dvx-dw-final-note strong { color: #fde68a; font-weight: 700; }
.dvx-dw-final-note s { color: #94a3b8; }
.dvx-dw-ended { display: inline-flex; margin: 1.5rem auto 0; padding: 0.4rem 1rem; border-radius: 9999px; background: #f1f5f9; box-shadow: inset 0 0 0 1px #e2e8f0; color: #475569; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

/* ── Checkout ─────────────────────────────────────────────── */
.dvx-dw-co-label { display: inline-flex; align-items: center; gap: 0.4rem; margin: 1.25rem 0 0; color: #fcd34d; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.dvx-dw-co-row { margin-top: 0.5rem; }
.dvx-dw-co-save { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; padding: 0.75rem 1rem; border-radius: 1rem; background: rgba(251, 191, 36, 0.1); box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.3); }
.dvx-dw-co-diya { width: 1.75rem; height: 1.75rem; }
.dvx-dw-co-save-title { margin: 0; color: #fde68a; font-size: 1rem; font-weight: 700; line-height: 1.35; }
.dvx-dw-co-save-sub { margin: 0.15rem 0 0; color: #cbd5e1; font-size: 0.78rem; line-height: 1.5; }

/* ── Small screens ────────────────────────────────────────── */
@media (max-width: 479px) {
  .dvx-dw-hero { margin-top: 1.4rem; padding: 1.15rem 1rem 1.25rem; border-radius: 1.4rem; }
  .dvx-dw-corner, .dvx-dw-cta-diya { display: none; }
  .dvx-dw-badge { font-size: 0.64rem; letter-spacing: 0.1em; }
  .dvx-dw-hero .dvx-dw-price { gap: 0.3rem 0.45rem; }
  .dvx-dw-hero .dvx-dw-was { font-size: 1.05rem; }
  .dvx-dw-hero .dvx-dw-arrow { font-size: 1rem; }
  .dvx-dw-hero .dvx-dw-now { font-size: 2.5rem; }
  .dvx-dw-hero .dvx-dw-save { padding: 0.28rem 0.5rem; font-size: 0.66rem; }
  .dvx-dw-cd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
  .dvx-dw-cd-num { font-size: 1.3rem; }
  .dvx-dw-particles i:nth-child(n + 7) { display: none; }
  .dvx-dw-bar { gap: 0.4rem; padding-left: 0.85rem; }
  .dvx-dw-bar-text { font-size: 0.82rem; }
  .dvx-dw-bar .dvx-dw-btn { padding: 0.6rem 0.9rem; font-size: 0.82rem; }
  .dvx-dw-x { width: 1.9rem; height: 1.9rem; }
  .dvx-dw-chip { font-size: 0.64rem; }
}
@media (max-width: 359px) {
  .dvx-dw-was, .dvx-dw-arrow { font-size: 1.05rem; }
}

/* ── Reduced motion: offer stays fully visible, decoration stops ── */
@media (prefers-reduced-motion: reduce) {
  .dvx-dw-particles, .dvx-dw-spark { display: none; }
  .dvx-dw-hero, .dvx-dw-flame, .dvx-dw-diya-glow { animation: none; }
  .dvx-dw-btn { transition: none; }
  .dvx-dw-btn:hover { transform: none; }
}