/* ==========================================================================
   InviteUtsav — "Coming Soon" occasion pages
   (template-parts/coming-soon.php, -preview.php, -notify.php)
   Colors come from inline custom properties per category
   (--cs-primary/--cs-accent/--cs-accent2, set by inc/coming-soon.php's
   style config); the 6 [data-mood] blocks below only own DECORATIVE SHAPE
   and motion, so every category gets a genuinely different palette even
   when it shares a mood family with another.
   ========================================================================== */

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

.coming-soon{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, color-mix(in srgb, var(--cs-primary) 6%, var(--ivory)) 0%, var(--ivory) 45%);
}

/* The hero itself is the site's own template-parts/page-banner (same dark
   plum/wine/gold gradient, breadcrumbs and typography used on every other
   inner page) — rendered as a sibling section right before this one, see
   template-parts/coming-soon.php. Nothing bespoke to style here. */

/* ---------------------------------------------------------------------- */
/* Launch date + live countdown — the one place both appear. A full-bleed  */
/* champagne band (not a floating card) so it reads as a distinct,        */
/* premium moment on the page rather than another white surface block.    */
/* ---------------------------------------------------------------------- */
.cs-launch{
  position:relative; overflow:hidden; z-index:1;
  background:var(--bg-alt);
  padding-block:clamp(2.4rem, 5vw, 3.6rem);
}
.cs-launch__glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 140% at 50% 0%, color-mix(in srgb, var(--cs-accent) 18%, transparent), transparent 70%);
}
.cs-launch__inner{ max-width:640px; margin-inline:auto; text-align:center; position:relative; z-index:1; }
.cs-launch__inner > p{ color:var(--ink-soft); margin-top:var(--sp-3); line-height:1.6; }

.cs-launch__badge{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.5rem 1.3rem; border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--cs-primary) 10%, var(--surface));
  border:1px solid color-mix(in srgb, var(--cs-primary) 22%, var(--line-soft));
  color:var(--cs-primary); font-family:var(--font-display); font-style:italic; font-weight:600;
  letter-spacing:.02em; font-size:.92rem;
}
.cs-launch__sparkle{ color:var(--cs-accent); font-size:.8em; }
@media (prefers-reduced-motion: no-preference){
  .cs-launch__sparkle{ display:inline-block; animation:csFade 2.4s ease-in-out infinite; }
  .cs-launch__sparkle:last-child{ animation-delay:-1.2s; }
}

.cs-launch__date-row{
  margin-top:var(--sp-5); display:flex; flex-direction:column; gap:.3rem; align-items:center;
}
.cs-launch__label{ font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; }
.cs-launch__date{
  font-family:var(--font-display); font-size:clamp(1.4rem, 3.2vw, 1.8rem); font-weight:600;
  background:linear-gradient(135deg, var(--cs-primary), var(--cs-accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.cs-countdown{
  margin-top:var(--sp-5); display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap;
}
.cs-countdown__unit{
  min-width:74px; padding:.85rem .6rem; border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--cs-primary) 8%, var(--surface));
  border:1px solid color-mix(in srgb, var(--cs-primary) 20%, var(--line-soft));
}
.cs-countdown__value{
  display:block; font-family:var(--font-display); font-variant-numeric:tabular-nums;
  font-size:clamp(1.4rem, 3.4vw, 1.9rem); font-weight:700; color:var(--cs-primary); line-height:1;
}
.cs-countdown__label{ display:block; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-top:.3rem; }

@keyframes csFade{
  0%, 100%{ opacity:.35; transform:scale(.9); }
  50%{ opacity:1; transform:scale(1.05); }
}

/* ---------------------------------------------------------------------- */
/* Notify Me — a full-bleed closing band matching .final-cta (same dark    */
/* plum/wine/berry gradient, glow motif, gold eyebrow, centered white      */
/* text) rather than a light floating card, so the page ends the same way */
/* every other InviteUtsav page does.                                     */
/* ---------------------------------------------------------------------- */
.coming-soon-notify{
  position:relative;
  padding-block:var(--section-pad);
  background:linear-gradient(150deg, var(--plum-800), var(--wine-700) 60%, var(--berry-600));
  color:#fff; text-align:center; overflow:hidden;
}
.coming-soon-notify__glow{
  width:500px; height:500px; border-radius:50%; top:-20%; left:50%; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(230,152,54,.28), transparent 70%);
}
.coming-soon-notify__inner{ position:relative; z-index:1; max-width:820px; margin-inline:auto; }
.coming-soon-notify__icon{
  width:44px; height:44px; margin:0 auto var(--sp-3); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.1); color:var(--gold-400);
}
.coming-soon-notify__icon svg{ width:20px; height:20px; }
.coming-soon-notify .eyebrow{ color:var(--gold-400); justify-content:center; }
.coming-soon-notify .eyebrow::before{ background:var(--gold-400); }
.coming-soon-notify h2{ color:#fff; }
.coming-soon-notify__inner > p{ color:rgba(255,255,255,.8); margin-top:var(--sp-3); font-size:1.1rem; }

.coming-soon-notify__hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.coming-soon-notify__row{
  display:flex; gap:.6rem; margin-top:var(--sp-6); flex-wrap:wrap; justify-content:center;
}
.coming-soon-notify__row input[type="email"]{
  flex:1 1 220px; min-width:0; padding:.9rem 1.1rem; border-radius:var(--r-sm);
  border:1.5px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:#fff;
  font-family:var(--font-body); font-size:.95rem;
}
#comingSoonNotifyEmail{
  height:50px;
  flex:initial;
  min-width:240px;
}
.coming-soon-notify__row input[type="email"]::placeholder{ color:rgba(255,255,255,.6); }
.coming-soon-notify__row input[type="email"]:focus{
  outline:none; border-color:var(--gold-400); box-shadow:0 0 0 4px rgba(232,165,71,.2);
}
.coming-soon-notify__row .btn:disabled{ opacity:.65; cursor:not-allowed; transform:none; }

.coming-soon-notify__note{ font-size:.8rem; color:rgba(255,255,255,.6); margin-top:var(--sp-3); }
.coming-soon-notify__feedback{ font-size:.88rem; font-weight:600; margin-top:var(--sp-3); }
.coming-soon-notify__feedback.is-success{ color:var(--gold-300); }
.coming-soon-notify__feedback.is-error{ color:#ff9b9b; }

/* ---------------------------------------------------------------------- */
/* Responsive                                                               */
/* ---------------------------------------------------------------------- */
@media (max-width:680px){
  .coming-soon-notify__row{ flex-direction:column; }
  .coming-soon-notify__row .btn{ width:100%; }
}