/* ==========================================================================
   Elementor compatibility — our custom widgets (inc/elementor-widgets/*)
   render the ORIGINAL section markup themselves, including their own
   padding via the original classes (.page-banner, .story, etc.). Without
   this, Elementor's own default column padding stacks on top of that,
   producing extra unwanted spacing around every widget. Sections are also
   set to `layout: full_width` (see inc/elementor-builder.php) so Elementor
   never applies its own boxed max-width either — between the two, our
   widgets' own markup/CSS is the only thing that visually renders.
   ========================================================================== */
.inviteutsav-public-site .elementor-column-gap-default > .elementor-column > .elementor-element-populated{
	padding: 0 !important;
}

/* ==========================================================================
   InviteUtsav — Homepage layout & section styling
   Built on top of css/design-system.css
   ========================================================================== */

.inviteutsav-public-site .skip-link{
  position:fixed; top:-60px; left:1rem; z-index:999;
  background:var(--plum-800); color:#fff; padding:.8rem 1.4rem; border-radius:var(--r-sm);
  transition:top var(--dur-fast) var(--ease-soft);
}
.inviteutsav-public-site .skip-link:focus{ top:1rem; }

/* ---------------------------------------------------------------------- */
/* Header                                                                  */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:transparent;
  padding:14px var(--container-pad);
}
.inviteutsav-public-site .site-header__inner{
  max-width:var(--container-w); margin-inline:auto;
  display:flex; align-items:center; justify-content:flex-start;
  background:#ffffff;
  border-radius:10px;
  padding:.6rem 1.4rem;
  box-shadow:0 16px 36px rgba(0,0,0,.28);
  transition:box-shadow var(--dur-mid) var(--ease-soft);
}
.inviteutsav-public-site .site-header.is-scrolled .site-header__inner{
  box-shadow:0 10px 26px rgba(0,0,0,.32);
}
.inviteutsav-public-site .brand{ display:flex; align-items:center; flex-shrink:0; }
/* Nav sits a fixed 50px after the brand instead of being redistributed by
   justify-content:space-between — its position must never shift when
   .site-header__actions' own width changes ("Create Invitation" vs. the
   shorter "My Account" on login/logout). The actions block is pushed to
   the true far-right edge via its own margin-left:auto instead. */
.inviteutsav-public-site .main-nav{ margin-left:50px; }
.inviteutsav-public-site .site-header__actions{ margin-left:auto; }
.inviteutsav-public-site .brand__logo{ height:50px; width:auto; }

.inviteutsav-public-site .main-nav ul{ display:flex; align-items:center; gap:var(--sp-5); }
.inviteutsav-public-site .main-nav > ul > li{ position:relative; }
.inviteutsav-public-site .main-nav a{
  font-weight:600; font-size:.94rem; color:var(--ink);
  display:flex; align-items:center; gap:.3em;
  padding:.4rem 0; position:relative;
}
.inviteutsav-public-site .main-nav > ul > li > a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--rose-500); transition:right var(--dur-mid) var(--ease-premium);
}
.inviteutsav-public-site .main-nav > ul > li > a:hover::after,
.inviteutsav-public-site .main-nav > ul > li > a.is-active::after{ right:0; }
.inviteutsav-public-site .main-nav a.is-active{ color:var(--rose-500); }
.inviteutsav-public-site .caret{ font-size:.7em; }

.inviteutsav-public-site .main-nav ul .dropdown{ flex-direction:column; align-items:stretch; gap:0; }
.inviteutsav-public-site .dropdown{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px);
  background:var(--cream); border:1px solid var(--line-soft); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg); padding:.6rem; min-width:220px;
  opacity:0; visibility:hidden; transition:opacity var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft), visibility var(--dur-fast);
}
.inviteutsav-public-site .has-dropdown:hover .dropdown,
.inviteutsav-public-site .has-dropdown:focus-within .dropdown{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.inviteutsav-public-site .dropdown li a{ padding:.6rem .9rem; border-radius:var(--r-sm); display:block; font-weight:500; }
.inviteutsav-public-site .dropdown li a:hover{ background:var(--champagne); color:var(--rose-600); }
.inviteutsav-public-site .dropdown li a::after{ display:none; }

/* "Occasions" dropdown — every non-wedding category, built live from the
   taxonomy (inviteutsav_occasions_nav_items(),
   template-parts/header/nav-primary.php) so a newly added category just
   appears here, nothing to edit by hand. Caps at ~6-7 visible rows and
   scrolls for the rest rather than growing taller than the viewport, with
   a slim, on-brand scrollbar instead of the browser's default. */
.inviteutsav-public-site .dropdown--scroll{
  max-height:280px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--gold-300) transparent;
}
.inviteutsav-public-site .dropdown--scroll::-webkit-scrollbar{ width:6px; }
.inviteutsav-public-site .dropdown--scroll::-webkit-scrollbar-track{ background:transparent; }
.inviteutsav-public-site .dropdown--scroll::-webkit-scrollbar-thumb{ background:var(--gold-300); border-radius:var(--r-pill); }
.inviteutsav-public-site .dropdown--scroll::-webkit-scrollbar-thumb:hover{ background:var(--gold-400); }

.inviteutsav-public-site .site-header__actions{ display:flex; align-items:center; gap:var(--sp-1); }
.inviteutsav-public-site .header-cta{ display:inline-flex; }
.inviteutsav-public-site .header-cta__icon{ display:none; width:18px; height:18px; flex-shrink:0; }

.inviteutsav-public-site .nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; background:none; border:none; padding:0;
}
.inviteutsav-public-site .nav-toggle span{ width:22px; height:2px; background:var(--plum-800); transition:transform var(--dur-fast) var(--ease-soft), opacity var(--dur-fast); margin-inline:auto; }
.inviteutsav-public-site .nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.inviteutsav-public-site .nav-toggle.is-open span:nth-child(2){ opacity:0; }
.inviteutsav-public-site .nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------------- */
/* Phone frame (shared component)                                         */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .phone-frame{
  position:relative;
  z-index:0; /* contains .phone-frame__notch's z-index:2 to this element's own
                stacking context — without this, that z-index escapes and
                competes directly against unrelated siblings like
                .hero__card-float (auto z-index always loses to a set one,
                regardless of DOM order), covering them. */
  width:auto; aspect-ratio:1/1;
  background:transparent;
  border-radius:0px;
  padding:14px;
  box-shadow:none;
  margin-inline:auto;
}
.inviteutsav-public-site .phone-frame__notch{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:110px; height:22px; background:var(--plum-900); border-radius:0 0 16px 16px; z-index:2;
}
.inviteutsav-public-site .phone-frame__screen{
  position:relative;
  width:100%; height:100%;
  background:linear-gradient(160deg, var(--champagne), var(--ivory));
  border-radius:30px;
  overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:2.4rem 1.6rem;
}

/* Template detail page's real mobile screenshot (see single-invitation_template.php
   + assets/js/screenshot-autoscroll.js) — the screen itself becomes the
   scroll container (auto-animated top<->bottom, or manually scrolled by
   the visitor) instead of the mock gradient/text content above. Padding
   reset to 0 and text-align/flex layout cleared since a full-bleed
   screenshot, not centered copy, fills this frame. */
.inviteutsav-public-site .phone-frame__screen--screenshot{
  padding:0; display:block; text-align:left;
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.inviteutsav-public-site .phone-frame__screen--screenshot::-webkit-scrollbar{ display:none; }
.inviteutsav-public-site .phone-frame__screen--screenshot img{ display:block; width:100%; height:auto; }

/* Detail page hero preview when a dedicated square photo is uploaded
   (preview_hero_square) instead of the tall auto-scrolled screenshot —
   fills the whole phone screen and crops to it, since a square source
   image can never match the frame's own tall 9/19.5 aspect ratio. */
.inviteutsav-public-site .phone-frame__screen--photo{ padding:0; }
/* object-fit:contain (not cover) — this frame is forced to a hard 1:1
   square (.phone-frame--hero{ aspect-ratio:1/1 }) regardless of what shape
   photo a template design actually uploads. `cover` silently crops the
   instant any photo isn't perfectly square; `contain` guarantees the whole
   image is always visible on every device, at worst letterboxing into the
   frame's own background gradient (never a hard edge/empty bar). */
.inviteutsav-public-site .phone-frame__screen--photo img{ display:block; width:100%; height:100%; object-fit:contain; object-position:center; }

/* Home hero mockup — crossfading square design photos (class-hero.php) —
   every image is stacked in the same spot and only .is-active is opaque,
   so switching which one is active reads as a smooth fade, not a cut. */
.inviteutsav-public-site .hero-photo-carousel{ padding:0; }
.inviteutsav-public-site .hero-photo-carousel__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top;
  opacity:0; transition:opacity 1.4s ease;
}
.inviteutsav-public-site .hero-photo-carousel__img.is-active{ opacity:1; z-index:1; }

.inviteutsav-public-site .hero__inner .phone-frame--hero{
    width: auto;
    aspect-ratio: 1 / 1;
    box-shadow: none;
}

.inviteutsav-public-site .hero__inner .phone-frame--hero .phone-frame__screen{
    background: transparent;
}

.inviteutsav-public-site .td-hero__inner .phone-frame.phone-frame--hero .phone-frame__screen{
    background: transparent;
}

/* ---------------------------------------------------------------------- */
/* Device-frame preview system (shared) — Desktop / Tablet / Mobile        */
/* chrome for any "Preview" popup site-wide (invitation editor Preview,    */
/* template card View Demo). Each variant wraps a .device-frame__screen    */
/* that the caller fills with either a live iframe or static demo markup.  */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .device-frame{ position:relative; margin:0 auto; transition:width .25s ease, height .25s ease; }
.inviteutsav-public-site .device-frame__screen{ width:100%; height:100%; overflow:hidden; background:#fff; position:relative; }
.inviteutsav-public-site .device-frame__screen iframe{ width:100%; height:100%; border:none; display:block; background:#fff; }
/* View Demo popup's screen — always a single video now, never a tall
   scrollable screenshot, so it just uses the plain .device-frame__screen
   rule above (overflow:hidden) with no special scroll handling needed. */
/* object-fit:cover — the device-frame--mobile/--tablet bezel this sits
   inside is already fixed at each device's own aspect ratio; a demo
   recording is expected to be shot at the same ratio, so this fills it
   edge-to-edge like a real screen recording rather than letterboxing. */
.inviteutsav-public-site .demo-modal__video{ display:block; width:100%; height:100%; border:none; object-fit:cover; background:#000; }
/* Mobile View 1 — a self-hosted MP4, never YouTube (assets/js/main.js
   buildVideoNode()). Starts as our own poster image + circular play icon;
   the <video> has no src at all until that icon is actually clicked. */
.inviteutsav-public-site .demo-modal__video-wrap{ position:relative; width:100%; height:100%; background:#000; }
.inviteutsav-public-site .demo-modal__video-trigger{
  position:absolute; inset:0; width:100%; height:100%; padding:0; border:none; background:#000; cursor:pointer;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.inviteutsav-public-site .demo-modal__video-thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.inviteutsav-public-site .demo-modal__video-play{
  position:relative; z-index:1; width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,.92); color:#141414; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 24px rgba(0,0,0,.35); transition:transform .15s ease, opacity .15s ease;
}
.inviteutsav-public-site .demo-modal__video-play svg{ width:26px; height:26px; margin-left:3px; }
.inviteutsav-public-site .demo-modal__video-trigger:hover .demo-modal__video-play{ transform:scale(1.06); }
@media (max-width:480px){
  .inviteutsav-public-site .demo-modal__video-play{ width:52px; height:52px; }
  .inviteutsav-public-site .demo-modal__video-play svg{ width:22px; height:22px; }
}

/* Reusable "clean YouTube embed" tap-to-pause overlay — used by every real
   invitation template's own Pre-Wedding Video section (customer-uploaded
   YouTube link) via window.inviteutsavCleanYouTubeEmbed() in main.js.
   Reuses .demo-modal__video-play above for the icon itself; this is loaded
   site-wide (including every guest-facing invitation page), so it's
   available regardless of which specific template is rendering it. */
.inviteutsav-public-site .clean-video__tap{
  position:absolute; inset:0; width:100%; height:100%; padding:0; border:none; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center; z-index:1;
}
.inviteutsav-public-site .clean-video__tap.is-playing .demo-modal__video-play{ opacity:0; }
.inviteutsav-public-site .clean-video__tap:hover .demo-modal__video-play{ opacity:1; transform:scale(1.06); }

/* Tablet/Mobile previews render the iframe at the device's real CSS pixel
   width (so its own responsive breakpoints fire exactly as on that device)
   and are only visually shrunk with a transform to fit the popup frame —
   never by narrowing the iframe itself, which would trigger the wrong
   breakpoints. JS (setDeviceFrame) sets the real width/height + scale. */
.inviteutsav-public-site .device-frame__viewport{ position:absolute; top:0; left:50%; transform-origin:top center; background:#fff; }
.inviteutsav-public-site .device-frame__viewport iframe{ display:block; border:none; background:#fff; }

.inviteutsav-public-site .device-frame--tablet{
  width:min(100%, 460px); aspect-ratio:3/4;
  background:#000000; border-radius:26px; padding:12px 12px 30px;
  box-shadow:0 30px 70px rgba(255,255,255,.05);
}
.inviteutsav-public-site .device-frame--tablet .device-frame__screen{ border-radius:8px; height:100%; }
.inviteutsav-public-site .device-frame--tablet .device-frame__home{
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.4);
}

.inviteutsav-public-site .device-frame--mobile{
  width:min(100%, 320px); aspect-ratio:9/19.5;
  background:#000000; border-radius:38px; padding:7px;
  box-shadow:0 30px 70px rgba(255,255,255,.06);
}
.inviteutsav-public-site .device-frame--mobile .device-frame__notch{
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:100px; height:15px; background:#000000; border-radius:0 0 9px 10px; z-index:2;
}
.inviteutsav-public-site .device-frame--mobile .device-frame__screen{ border-radius:30px; height:100%; }

/* Laptop/Desktop — a plain wide screen, no notch/home indicator, used by
   the View Demo popup's third device tab (assets/js/main.js). */
.inviteutsav-public-site .device-frame--laptop{
  width:min(100%, 960px); aspect-ratio:16/10;
  background:#000000; border-radius:12px; padding:10px 10px 10px;
  box-shadow:0 30px 70px rgba(255,255,255,.05);
}
.inviteutsav-public-site .device-frame--laptop .device-frame__screen{ border-radius:4px; height:100%; }

/* ---------------------------------------------------------------------- */
/* Template detail hero                                                    */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .td-hero{ position:relative; overflow:hidden; padding-top:calc(var(--header-h, 84px) + var(--sp-7)); padding-bottom:var(--section-pad); background:var(--bg-alt); }
.inviteutsav-public-site .td-hero > .container{ position:relative; z-index:1; }
.inviteutsav-public-site .td-hero__inner{ display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--sp-8); align-items:center; }
.inviteutsav-public-site .td-hero__preview .phone-frame{ box-shadow:none; max-width:initial; }
.inviteutsav-public-site .td-hero__info h1{ margin-top:var(--sp-2); }
/* Subtle — a small pill under the title, never competing with it or the
   Best Seller/Most Popular ribbon (which sits near the preview instead). */
.inviteutsav-public-site .religion-badge{
  display:inline-flex; align-items:center; gap:.35rem; margin-top:.6rem;
  font-size:.76rem; font-weight:600; letter-spacing:.02em; color:var(--ink-soft);
  background:var(--surface-2,var(--champagne)); border:1px solid var(--line-soft);
  border-radius:var(--r-pill); padding:.3rem .8rem;
}
.inviteutsav-public-site .religion-badge.is-specific{ color:var(--wine-600); border-color:rgba(155,44,44,.25); background:var(--rose-soft,#f7e3ea); }
.inviteutsav-public-site .td-hero__info .lede{ margin-top:var(--sp-4); }
.inviteutsav-public-site .td-hero__ctas{ display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-6); }
.inviteutsav-public-site .td-hero__facts{ display:flex; gap:var(--sp-6); margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--line); }
.inviteutsav-public-site .td-hero__facts li{ display:flex; flex-direction:column; gap:.2rem; }
.inviteutsav-public-site .td-hero__facts strong{ font-family:var(--font-display); color:var(--plum-800); font-size:1.05rem; }
.inviteutsav-public-site .td-hero__facts span{ font-size:.8rem; color:var(--charcoal-faint); }

/* ---------------------------------------------------------------------- */
/* Page banner (compact hero for inner pages)                             */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .page-banner > .container{ position:relative; z-index:1; }
.inviteutsav-public-site .page-banner{
  padding-top:clamp(6rem, 6vw, 6rem);
  padding-bottom:clamp(3rem, 6vw, 3rem);
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(232,165,71,.18), transparent 55%),
    linear-gradient(165deg, var(--plum-900) 0%, var(--wine-700) 55%, var(--berry-600) 100%);
  color:#fff;
  text-align:center;
  overflow:hidden;
}
.inviteutsav-public-site .page-banner__breadcrumb{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.4em;
  font-size:.82rem; font-weight:600; color:rgba(255,255,255,.6);
  max-width:min(100%, 560px); margin-inline:auto; overflow-wrap:break-word;
  margin:0px; margin-bottom:var(--sp-4);
}
.inviteutsav-public-site .page-banner__breadcrumb a{ color:rgba(255,255,255,.85); }
.inviteutsav-public-site .page-banner__breadcrumb a:hover{ color:var(--gold-300); }

/* Rank Math's own breadcrumb markup (nav.rank-math-breadcrumb > p, with
   .separator/.last spans) — inviteutsav_breadcrumbs() renders this in
   place of the plain fallback above whenever Rank Math's breadcrumb
   feature is on (inc/setup.php's rank-math-breadcrumbs theme support),
   which is the normal case; matched to the exact same look so switching
   between the two is never visible. */
.inviteutsav-public-site .page-banner nav.rank-math-breadcrumb{ margin-bottom:var(--sp-4); }
.inviteutsav-public-site .page-banner nav.rank-math-breadcrumb p{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.4em;
  font-size:.82rem; font-weight:600; color:rgba(255,255,255,.6);
  max-width:min(90%, 560px); margin-inline:auto; overflow-wrap:break-word;
}
.inviteutsav-public-site .page-banner nav.rank-math-breadcrumb a{ color:var(--gold-400); }
.inviteutsav-public-site .page-banner nav.rank-math-breadcrumb a:hover{ color:var(--gold-300); }
.inviteutsav-public-site .page-banner nav.rank-math-breadcrumb .separator{ color:rgba(255,255,255,.5); margin-inline:.1em; }
.inviteutsav-public-site .page-banner nav.rank-math-breadcrumb .last{ color:rgba(255,255,255,.6); }
.inviteutsav-public-site .page-banner .eyebrow{ justify-content:center; color:var(--gold-400); }
.inviteutsav-public-site .page-banner .eyebrow::before{ background:var(--gold-400); }
.inviteutsav-public-site .page-banner h1{ color:#fff; font-size:clamp(2.4rem, 4.6vw, 2.8rem); }
.inviteutsav-public-site .page-banner p{ color:rgba(255,255,255,.62); max-width:700px; margin:var(--sp-4) auto 0; font-size:.9rem; }
/* Pages built directly in Elementor (Pricing, Our Story, ...) render their
   banner heading/kicker/breadcrumb through Elementor's own widget markup,
   whose CSS (e.g. .elementor-heading-title{color:var(--e-global-color-primary)})
   has higher specificity than the plain selectors above and wins by default —
   making the text the kit's dark heading color instead of this section's
   intended white/gold, even though it's the same visual banner. */
.inviteutsav-public-site .page-banner .elementor-heading-title{ color:#fff !important; }
.inviteutsav-public-site .page-banner span.elementor-heading-title{ color:var(--gold-400) !important; }
.inviteutsav-public-site .page-banner a{ color:var(--gold-400) !important; }
.inviteutsav-public-site .page-banner a:hover{ color:var(--gold-300) !important; }
.inviteutsav-public-site .page-banner__ctas{ display:flex; gap:var(--sp-3); justify-content:center; flex-wrap:wrap; margin-top:var(--sp-6); }
.inviteutsav-public-site .page-banner__price{
  display:inline-flex; align-items:center; gap:.4em;
  margin:var(--sp-4) auto 0;
  padding:.5rem 1.1rem;
  border-radius:var(--r-pill);
  background:rgba(232,165,71,.14);
  border:1px solid rgba(232,165,71,.4);
  color:var(--gold-300);
  font-size:.9rem; font-weight:600;
  max-width:none;
}
.inviteutsav-public-site .page-banner__price strong{
  display:inline-block;
  color:var(--gold-300); font-family:var(--font-display); font-size:1.05rem;
  animation:pricePulse 2.2s ease-in-out infinite;
}
.inviteutsav-public-site .page-banner .btn-secondary{ color:#fff; border-color:rgba(255,255,255,.55); }
.inviteutsav-public-site .page-banner .btn-secondary:hover{ background:#fff; color:var(--plum-800); }

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .hero{
  padding-top:calc(var(--header-h, 84px) + clamp(2rem, 5vw, 3.5rem));
  padding-bottom:var(--section-pad);
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(232,165,71,.22), transparent 55%),
    radial-gradient(80% 70% at 100% 100%, rgba(230,35,90,.16), transparent 60%),
    linear-gradient(165deg, var(--plum-900) 0%, var(--wine-700) 55%, var(--berry-600) 100%);
}
.inviteutsav-public-site .hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.inviteutsav-public-site .hero__petal--1{ top:10%; right:8%; opacity:.7; }
.inviteutsav-public-site .hero__petal--2{ bottom:16%; left:4%; opacity:.6; }
.inviteutsav-public-site .hero__glow{
  position:absolute; bottom:-15%; right:-6%; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(230,35,90,.24), transparent 70%);
}
.inviteutsav-public-site .hero__inner{
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:var(--sp-8);
  position:relative; z-index:1;
}
/* !important: ties the kit's own global ".elementor-kit-6 h1{color:...}"
   typography rule on specificity, and that kit stylesheet loads after this
   one, so without it the kit's dark heading color wins here too. */
.inviteutsav-public-site .hero h1{ color:#fff !important; }
.inviteutsav-public-site .hero .accent-word{ color:var(--gold-300); }
.inviteutsav-public-site .hero__title-sub{ font-size:70%; }
.inviteutsav-public-site .hero .eyebrow{ color:var(--gold-400); }
.inviteutsav-public-site .hero .eyebrow::before{ background:var(--gold-400); }
.inviteutsav-public-site .hero__sub{ font-size:1.15rem; color:rgba(255,255,255,.82); margin-top:var(--sp-3); max-width:520px; }
.inviteutsav-public-site .hero__reassurance{ color:#fff; }
.inviteutsav-public-site .hero__price-pill{
  display:inline-flex; align-items:center; gap:.5em;
  margin-top:var(--sp-4);
  padding:.5rem 1rem;
  border-radius:var(--r-pill);
  background:rgba(232,165,71,.14);
  border:1px solid rgba(232,165,71,.4);
  color:var(--gold-300);
  font-size:.86rem; font-weight:600;
}
.inviteutsav-public-site .hero__price-pill svg{ width:15px; height:15px; flex-shrink:0; }
.inviteutsav-public-site .hero__price-pill strong{
  display:inline-block;
  color:var(--gold-300); font-family:var(--font-display); font-size:1rem;
  animation:pricePulse 2.2s ease-in-out infinite;
}
@keyframes pricePulse{
  0%, 100%{ transform:scale(1); text-shadow:0 0 0 rgba(232,165,71,0); }
  50%{ transform:scale(1.12); text-shadow:0 0 12px rgba(232,165,71,.65); }
}
.inviteutsav-public-site .hero__ctas{ display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-6); }
.inviteutsav-public-site .hero .btn-secondary{ color:#fff; border-color:rgba(255,255,255,.55); }
.inviteutsav-public-site .hero .btn-secondary:hover{ background:#fff; color:var(--plum-800); }
.inviteutsav-public-site .hero__whatsapp-cta{ display:inline-flex; align-items:center; gap:.5rem; }
.inviteutsav-public-site .hero__whatsapp-cta:hover{ background:#25D366; border-color:#25D366; color:#fff; }
.inviteutsav-public-site .hero__trust{ margin-top:var(--sp-6); font-size:.86rem; color:rgba(255,255,255,.6); display:flex; align-items:center; gap:.6em; flex-wrap:wrap; }
.inviteutsav-public-site .hero__trust .dot{ color:var(--gold-400); }
/* The homepage hero heading is an Elementor widget too — see the .page-banner
   note above for why Elementor's own CSS otherwise overrides this section's
   intended white heading with the kit's default dark color. */
.inviteutsav-public-site .hero .elementor-heading-title{ color:#fff !important; }
.inviteutsav-public-site .hero span.elementor-heading-title{ color:var(--gold-400) !important; }

.inviteutsav-public-site .hero__visual{ position:relative; }
.inviteutsav-public-site .phone-frame--hero{ width:auto; max-width:320px; aspect-ratio:1/1; box-shadow:0 40px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); }
/* Reinforces the square shape directly on the screen itself (not just the
   outer frame) — a percentage height on this child can fail to resolve
   reliably against a parent whose own height comes from aspect-ratio
   rather than an explicit value, in some layout contexts. */
.inviteutsav-public-site .phone-frame--hero .phone-frame__screen{ aspect-ratio:1/1; }
.inviteutsav-public-site .hero-screen__ornament{ color:var(--gold-500); margin-bottom:.6rem; }
.inviteutsav-public-site .hero-screen__ornament svg{ width:22px; height:22px; margin-inline:auto; }
.inviteutsav-public-site .hero-screen__eyebrow{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--charcoal-faint); }
.inviteutsav-public-site .hero-screen__names{ font-family:var(--font-display); font-size:1.7rem; color:var(--plum-800); margin-top:.6rem; }
.inviteutsav-public-site .hero-screen__names span{ color:var(--rose-500); font-style:italic; }
.inviteutsav-public-site .hero-screen__date{ margin-top:.6rem; font-weight:700; color:var(--wine-600); font-size:.92rem; }
.inviteutsav-public-site .hero-screen__divider{ width:36px; height:1px; background:var(--gold-400); margin:1.2rem auto; }
.inviteutsav-public-site .hero-screen__place{ font-size:.9rem; color:var(--ink-soft); }
.inviteutsav-public-site .hero-screen__cta{ margin-top:2rem; font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; color:var(--rose-500); font-weight:700; }

.inviteutsav-public-site .hero__card-float{
  position:absolute; background:var(--cream); border-radius:var(--r-pill);
  padding:.6rem 1rem; box-shadow:var(--shadow-md); animation:floatY 5s ease-in-out infinite;
}
.inviteutsav-public-site .hero__card-float--1{ top:8%; left:-8%; }
.inviteutsav-public-site .hero__card-float--2{ bottom:12%; right:-10%; animation-delay:-2.5s; }
@keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

.inviteutsav-public-site .hero__scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:rgba(255,255,255,.75);
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.inviteutsav-public-site .hero__scroll-cue:hover{ color:var(--gold-300); }
.inviteutsav-public-site .hero__scroll-cue svg{ width:18px; height:18px; animation:scrollCueBounce 1.8s ease-in-out infinite; }
@keyframes scrollCueBounce{
  0%,100%{ transform:translateY(0); opacity:.7; }
  50%{ transform:translateY(6px); opacity:1; }
}

/* ---------------------------------------------------------------------- */
/* Trust strip                                                             */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .trust-strip{ padding-block:var(--sp-7); background:var(--surface); border-bottom:1px solid var(--line-soft); }
.inviteutsav-public-site .trust-strip__inner{ display:flex; flex-direction:column; gap:var(--sp-6); }
.inviteutsav-public-site .trust-strip__copy{ max-width:680px; }
.inviteutsav-public-site .trust-strip__bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-6); }
.inviteutsav-public-site .trust-strip__photos{ display:flex; align-items:center; }
.inviteutsav-public-site .trust-strip__photos .photo-card{ width:140px; border-radius:50%; box-shadow:var(--shadow-md); border:3px solid var(--cream); }
.inviteutsav-public-site .trust-strip__photos .photo-card--offset{ margin-left:-24px; }
.inviteutsav-public-site .trust-strip__copy h2{ font-size:clamp(1.6rem, 2.6vw, 2.1rem); }
.inviteutsav-public-site .trust-strip__copy p{ margin-top:var(--sp-3); color:var(--ink-soft); }
.inviteutsav-public-site .trust-strip__stats{ display:flex; gap:var(--sp-6); }
.inviteutsav-public-site .trust-strip__stat{ display:flex; flex-direction:column; gap:.3rem; }
.inviteutsav-public-site .trust-strip__stat strong{ font-family:var(--font-display); font-size:1.7rem; color:var(--rose-500); }
.inviteutsav-public-site .trust-strip__stat span{ font-size:.8rem; font-weight:600; color:var(--charcoal-faint); text-transform:uppercase; letter-spacing:.02em; }

/* ---------------------------------------------------------------------- */
/* Why InviteUtsav (condensed)                                             */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .why-strip{ padding-block:var(--section-pad); background:var(--bg-alt); border-bottom:1px solid #3c02357a; }
.inviteutsav-public-site .why-strip__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-4); max-width:820px; margin-inline:auto; }
.inviteutsav-public-site .why-strip__item{
  display:flex; align-items:center; gap:.8rem;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-md);
  padding:1rem 1.2rem; font-weight:600; font-size:.92rem;
}
.inviteutsav-public-site .why-strip__item svg{ width:22px; height:22px; color:var(--rose-500); flex-shrink:0; }
.inviteutsav-public-site .why-strip__more{ text-align:center; margin-top:var(--sp-6); }

/* ---------------------------------------------------------------------- */
/* Celebration selector                                                    */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .celebrations{ padding-block:var(--section-pad); background:var(--bg-alt); }
.inviteutsav-public-site .celebration-grid{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--sp-4);
}
.inviteutsav-public-site .celeb-card{
  position:relative;
  background:var(--surface);
  border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-4);
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-3);
  color:var(--c-a);
  border:1px solid var(--line-soft);
  overflow:hidden;
  transition:transform var(--dur-mid) var(--ease-premium), box-shadow var(--dur-mid) var(--ease-premium), color var(--dur-mid);
}
.inviteutsav-public-site .celeb-card::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(135deg, var(--c-a), var(--c-b));
  opacity:0; transition:opacity var(--dur-mid) var(--ease-soft);
}
.inviteutsav-public-site .celeb-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); color:#fff; }
.inviteutsav-public-site .celeb-card:hover::before{ opacity:1; }
.inviteutsav-public-site .celeb-card__mark,
.inviteutsav-public-site .celeb-card__icon,
.inviteutsav-public-site .celeb-card h4{ position:relative; z-index:1; }
.inviteutsav-public-site .celeb-card__mark{ font-size:.72rem; font-weight:800; opacity:.5; }
.inviteutsav-public-site .celeb-card__icon-slot{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; position:relative; z-index:1;
  border-radius:50%;
  transition:background-color .25s ease, box-shadow .25s ease;
}
.inviteutsav-public-site .celeb-card__icon-slot svg,
.inviteutsav-public-site .celeb-card__icon-slot img{ width:100%; height:100%; object-fit:contain; }
.inviteutsav-public-site .celeb-card:hover .celeb-card__icon-slot{
  background-color:#fff;
  box-shadow:0 0 0 7px #fff;
}
.inviteutsav-public-site .celeb-card h4{ font-size:1rem; font-family:var(--font-body); font-weight:700; color:inherit; }

/* ---------------------------------------------------------------------- */
/* Templates archive filters (Category -> Wedding/Celebration Type ->      */
/* Pricing Plan). Desktop: an inline static panel. Mobile: the exact same  */
/* markup becomes a fixed bottom-sheet drawer — no duplicated controls.    */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .tpl-filters{ margin-bottom:var(--sp-6); }
.inviteutsav-public-site .tpl-filters__mobile-trigger{
  display:none; align-items:center; gap:.5rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:.7rem 1.3rem; font-weight:700; font-size:.9rem; color:var(--ink);
  box-shadow:var(--shadow-sm);
}
.inviteutsav-public-site .tpl-filters__mobile-trigger svg{ width:17px; height:17px; }
.inviteutsav-public-site .tpl-filters__badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:19px; height:19px; padding:0 .3rem; border-radius:50%;
  background:var(--rose-500); color:#fff; font-size:.7rem; font-weight:800;
}
.inviteutsav-public-site .tpl-filters__backdrop{ display:none; }

.inviteutsav-public-site .tpl-filters__panel-head,
.inviteutsav-public-site .tpl-filters__panel-foot{ display:none; }

.inviteutsav-public-site .tpl-filters__scroll{ display:flex; flex-direction:row; gap:var(--sp-4); }
.inviteutsav-public-site .tpl-filters__group{ display:flex; flex-direction:column; gap:.6rem; position:relative; min-width:250px; }
.inviteutsav-public-site .tpl-filters__label{
  font-size:.76rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--charcoal-faint);
}
.inviteutsav-public-site .tpl-filters__row{ display:flex; flex-wrap:wrap; gap:.55rem; }

.inviteutsav-public-site .tpl-chip{
  display:inline-flex; align-items:center; gap:.3em;
  padding:.55rem 1.05rem; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line);
  color:var(--ink); font-size:.84rem; font-weight:600; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.inviteutsav-public-site .tpl-chip:hover{ border-color:var(--plum-800); }
.inviteutsav-public-site .tpl-chip.is-active{ background:var(--plum-900); border-color:var(--plum-900); color:#fff; }

/* Checkout page benefits (One-Time Payment, Secure Payment, ...) — plain
   checkmarked facts, not interactive filter chips, so no pill/border/
   button styling at all. */
.inviteutsav-public-site .checkout-benefits{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.2rem;
  list-style:none; margin:var(--sp-4) 0 0; padding:0;
}
.inviteutsav-public-site .checkout-benefits li{
  display:flex; align-items:center; gap:.4em;
  font-size:.84rem; font-weight:600; color:var(--ink); white-space:nowrap;
}
.inviteutsav-public-site .checkout-benefits li::before{
  content:"✓"; color:#1f9d6b; font-weight:800;
}

/* Checkout page add-ons checklist */
.inviteutsav-public-site .checkout-addons{ display:flex; flex-direction:column; gap:.6rem; }
.inviteutsav-public-site .checkout-addon{
  display:flex; align-items:center; gap:var(--sp-3); padding:.7rem var(--sp-4);
  background:var(--champagne); border:1px solid var(--line); border-radius:var(--r-md); cursor:pointer;
}
.inviteutsav-public-site .checkout-addon__checkbox{ flex-shrink:0; width:18px; height:18px; }
.inviteutsav-public-site .checkout-addon__body{ flex:1; display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.inviteutsav-public-site .checkout-addon__name{ font-weight:700; color:var(--plum-800); font-size:.9rem; }
.inviteutsav-public-site .checkout-addon__desc{ font-size:.78rem; color:var(--charcoal-faint); }
.inviteutsav-public-site .checkout-addon__price{ font-weight:700; color:var(--plum-800); flex-shrink:0; white-space:nowrap; }

/* Checkout page coupon field (input + Apply button) and the resulting
   Original/Discount/Final breakdown card. */
.inviteutsav-public-site .checkout-coupon-row{ display:flex; gap:.6rem; }
.inviteutsav-public-site .checkout-coupon-row input{ flex:1; min-width:0; }
.inviteutsav-public-site .checkout-coupon-row .btn{ flex-shrink:0; padding:.7rem 1.1rem; font-size:.85rem; }
.inviteutsav-public-site .checkout-coupon-message{ margin:.5rem 0 0; font-size:.82rem; font-weight:600; }
.inviteutsav-public-site .checkout-coupon-message.is-success{ color:#1f9d6b; }
.inviteutsav-public-site .checkout-coupon-message.is-error{ color:#c0392b; }

.inviteutsav-public-site .checkout-coupon-summary{
  margin-top:var(--sp-3); padding:var(--sp-3) var(--sp-4);
  background:var(--champagne); border:1px solid var(--line); border-radius:var(--r-md);
  display:flex; flex-direction:column; gap:.5rem;
}
.inviteutsav-public-site .checkout-coupon-summary__row{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  font-size:.88rem; color:var(--ink);
}
.inviteutsav-public-site .checkout-coupon-summary__row--discount{ color:#1f9d6b; font-weight:600; }
.inviteutsav-public-site .checkout-coupon-summary__row--final{
  font-weight:800; font-size:1.05rem; color:var(--plum-800);
  padding-top:.5rem; border-top:1px dashed var(--line);
}

/* International-INR-payment selector (page-checkout.php + checkout.js) —
   a real 2-card radio choice, never a checkbox, per spec. Reuses
   .checkout-addon's card language (background/border/radius) for visual
   consistency with the rest of this page. */
.inviteutsav-public-site .payment-currency-selector{ margin-top:var(--sp-4); display:flex; flex-direction:column; gap:.6rem; }
.inviteutsav-public-site .payment-currency-label{ font-size:.82rem; font-weight:700; color:var(--charcoal-faint); text-transform:uppercase; letter-spacing:.03em; }
.inviteutsav-public-site .payment-currency-option{
  display:flex; align-items:flex-start; gap:.7rem; padding:.85rem var(--sp-4);
  background:var(--champagne); border:1.5px solid var(--line); border-radius:var(--r-md); cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
.inviteutsav-public-site .payment-currency-option:hover{ border-color:var(--plum-800); }
.inviteutsav-public-site .payment-currency-option.is-active{ background:#fff; border-color:var(--plum-800); box-shadow:0 0 0 1px var(--plum-800); }
.inviteutsav-public-site .payment-currency-option input[type="radio"]{ flex-shrink:0; width:18px; height:18px; margin-top:.15rem; accent-color:var(--plum-800); }
.inviteutsav-public-site .payment-currency-option__body{ flex:1; display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.inviteutsav-public-site .payment-currency-option__title{ font-weight:700; color:var(--plum-800); font-size:.92rem; }
.inviteutsav-public-site .payment-currency-option__amount{ font-weight:800; font-size:1.1rem; color:var(--ink); }
.inviteutsav-public-site .payment-currency-option__desc{ font-size:.78rem; color:var(--charcoal-faint); }
.inviteutsav-public-site .payment-currency-note{ font-size:.78rem; color:var(--charcoal-faint); text-align:center; margin:0; }
.inviteutsav-public-site .tpl-chip.is-active .tpl-chip__count{ color:rgba(255,255,255,.7); }
.inviteutsav-public-site .tpl-chip.is-disabled{ opacity:.4; }
.inviteutsav-public-site .tpl-chip__count{ color:var(--charcoal-faint); font-weight:500; }

/* Searchable dropdown ("type-ahead select") — used instead of a chip row
   for any filter group with enough options that showing them all at once
   gets unwieldy (Wedding Type, Celebration Type, Pricing Plan). */
.inviteutsav-public-site .tpl-select{ position:relative; }
.inviteutsav-public-site .tpl-select__trigger{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  width:100%; padding:.7rem 1rem; border-radius:var(--r-md, 10px);
  background:var(--surface); border:1px solid var(--line);
  color:var(--ink); font-size:.9rem; font-weight:600; text-align:left;
  transition:border-color var(--dur-fast) var(--ease-soft);
}
.inviteutsav-public-site .tpl-select__trigger:hover{ border-color:var(--plum-800); }
.inviteutsav-public-site .tpl-select.is-open .tpl-select__trigger{ border-color:var(--plum-900); }
.inviteutsav-public-site .tpl-select__value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inviteutsav-public-site .tpl-select__chevron{ width:16px; height:16px; flex-shrink:0; color:var(--charcoal-faint); transition:transform var(--dur-fast) var(--ease-soft); }
.inviteutsav-public-site .tpl-select.is-open .tpl-select__chevron{ transform:rotate(180deg); }

.inviteutsav-public-site .tpl-select__panel{
  position:absolute; top:calc(100% + .4rem); left:0; right:0; z-index:30;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md, 10px);
  box-shadow:var(--shadow-lg); padding:.5rem;
  display:flex; flex-direction:column; gap:.4rem;
}
.inviteutsav-public-site .tpl-select__search{
  width:100%; padding:.55rem .75rem; border-radius:8px;
  border:1px solid var(--line); background:var(--surface);
  color:var(--ink); font-size:.86rem;
}
.inviteutsav-public-site .tpl-select__list{ max-height:230px; overflow-y:auto; display:flex; flex-direction:column; gap:.15rem; }
.inviteutsav-public-site .tpl-select__option{
  padding:.55rem .75rem; border-radius:7px; font-size:.86rem; font-weight:600;
  color:var(--ink); cursor:pointer;
  transition:background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.inviteutsav-public-site .tpl-select__option:hover,
.inviteutsav-public-site .tpl-select__option.is-highlighted{ background:var(--bg-alt); }
.inviteutsav-public-site .tpl-select__option.is-active{ background:var(--plum-900); color:#fff; }
.inviteutsav-public-site .tpl-select__option.is-active .tpl-select__option-count{ color:rgba(255,255,255,.7); }
.inviteutsav-public-site .tpl-select__option.is-filtered-out{ display:none; }
.inviteutsav-public-site .tpl-select__option-count{ color:var(--charcoal-faint); font-weight:500; }
.inviteutsav-public-site .tpl-select__empty{ padding:.5rem .75rem; font-size:.84rem; color:var(--ink-soft); }

.inviteutsav-public-site .tpl-filters__active{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--line-soft);
}
.inviteutsav-public-site .tpl-filters__active-pill{
  display:inline-flex; align-items:center; gap:.4em;
  padding:.4rem .8rem; border-radius:var(--r-pill);
  background:rgba(230,35,90,.08); color:var(--rose-600); font-size:.8rem; font-weight:700;
}
.inviteutsav-public-site .tpl-filters__active-pill span{ font-size:1rem; line-height:1; }
.inviteutsav-public-site .tpl-filters__active-pill--clear{ background:transparent; color:var(--ink-soft); text-decoration:underline; }

.inviteutsav-public-site .tpl-filters__count{ text-align:center; color:var(--ink-soft); font-size:.86rem; margin-bottom:var(--sp-4); }

@media (max-width:960px){
  .inviteutsav-public-site .tpl-filters__mobile-trigger{ display:inline-flex; }
  .inviteutsav-public-site .tpl-filters__close{
    background:none; border:none; font-size:1.6rem; line-height:1; color:var(--ink-soft);
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  }

  .inviteutsav-public-site .tpl-filters__backdrop{
    display:block; position:fixed; inset:0; z-index:120;
    background:rgba(42,1,31,.5);
    opacity:0; visibility:hidden; transition:opacity var(--dur-mid) var(--ease-soft), visibility var(--dur-mid);
  }
  .inviteutsav-public-site .tpl-filters.is-open .tpl-filters__backdrop{ opacity:1; visibility:visible; }

  .inviteutsav-public-site .tpl-filters__panel{
    position:fixed; left:0; right:0; bottom:0; z-index:121;
    max-height:82vh; display:flex; flex-direction:column;
    background:var(--bg); border-radius:22px 22px 0 0;
    box-shadow:0 -12px 40px rgba(0,0,0,.25);
    padding:var(--sp-4) var(--container-pad) calc(var(--sp-4) + env(safe-area-inset-bottom,0px));
    transform:translateY(100%);
    transition:transform var(--dur-mid) var(--ease-premium);
  }
  .inviteutsav-public-site .tpl-filters.is-open .tpl-filters__panel{ transform:translateY(0); }

  .inviteutsav-public-site .tpl-filters__panel-head{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:var(--sp-3); flex-shrink:0;
  }
  .inviteutsav-public-site .tpl-filters__panel-head h3{ font-size:1.15rem; margin:0; }

  .inviteutsav-public-site .tpl-filters__scroll{ flex-direction:column; overflow-y:auto; flex:1; padding-bottom:var(--sp-3); }

  .inviteutsav-public-site .tpl-filters__panel-foot{
    display:flex; gap:.8rem; padding-top:var(--sp-3); border-top:1px solid var(--line-soft); flex-shrink:0;
  }
  .inviteutsav-public-site .tpl-filters__panel-foot .btn{ flex:1; }
}

/* ---------------------------------------------------------------------- */
/* Featured invitation experiences                                        */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .featured{ padding-block:var(--section-pad); }
.inviteutsav-public-site .featured-grid,
.inviteutsav-public-site .templates-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-5);
}
.inviteutsav-public-site .design-card{
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: var(--r-lg);
    border: 1px solid #900b4496;
    transition: border-color .35s var(--ease-soft), box-shadow .35s var(--ease-soft);
}
/* Desktop/pointer devices only — real hover support required, so a tap
   on mobile/touch never gets stuck "hovered" and the card just keeps its
   normal resting appearance there, per spec. Border-color and box-shadow
   only (never a size/spacing property), so nothing shifts or reflows. */
@media (hover:hover) and (pointer:fine){
  .inviteutsav-public-site .design-card:hover{
    border-color: var(--accent);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 16%, transparent);
  }
}
.inviteutsav-public-site .design-card__ribbon{
  position:absolute; top:14px; left:14px; z-index:2;
  padding:.35rem .85rem;
  border-radius:var(--r-pill);
  font-size:.66rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:#fff;
  box-shadow:var(--shadow-sm);
}
.inviteutsav-public-site .design-card__ribbon--bestseller{ background:linear-gradient(135deg, var(--gold-500), var(--gold-400)); color:var(--plum-900); }
.inviteutsav-public-site .design-card__ribbon--popular{ background:linear-gradient(135deg, var(--rose-500), var(--wine-600)); }
.inviteutsav-public-site .design-card__ribbon--new{ background:linear-gradient(135deg, #1f9d6b, #34c78e); }
.inviteutsav-public-site .design-card__preview{
  aspect-ratio:4/5;
  background:linear-gradient(150deg, var(--dc-a), var(--dc-b));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-3);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  color:#fff; text-align:center; padding:var(--sp-4);
}
.inviteutsav-public-site .design-card__glyph{ opacity:.9; }
.inviteutsav-public-site .design-card__glyph svg{ width:34px; height:34px; }
.inviteutsav-public-site .design-card__name-sample{ font-family:var(--font-display); font-style:italic; font-size:1.3rem; }
.inviteutsav-public-site .design-card__body{ padding:var(--sp-4); display:flex; flex-direction:column; gap:.6rem; }
.inviteutsav-public-site .design-card__body h4{ margin-top:.2rem; }
.inviteutsav-public-site .design-card__body p{ color:var(--ink-soft); font-size:.92rem; }
.inviteutsav-public-site .design-card__plan-name{
  display:block; font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:.92rem; color:var(--plum-800); margin-top:var(--sp-2);
}
.inviteutsav-public-site .design-card__launch-label{
  display:block; font-size:.62rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--gold-500); margin-top:.3rem;
}
.inviteutsav-public-site .design-card__pricing{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; margin-top:.3rem; }
.inviteutsav-public-site .design-card__price-current{ font-family:var(--font-display); font-size:1.4rem; font-weight:600; color:var(--rose-600); }
.inviteutsav-public-site .design-card__price-original{ font-size:.88rem; font-weight:600; color:var(--charcoal-faint); text-decoration:line-through; }
/* The shared "current / struck-through original / green discount %" block
   (inc/template-tags.php's inviteutsav_price_with_discount_html(), and its
   JS equivalent in assets/js/upgrade-plan-modal.js) — reused verbatim on
   the listing card, detail page hero + comparison cards, and the Upgrade
   Plan popup, so the discount always looks the same everywhere it appears. */
.inviteutsav-public-site .design-card__price-discount-row{ display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap; margin-top:.15rem; }
.inviteutsav-public-site .design-card__discount-percent{ font-size:.82rem; font-weight:700; color:#1a7f37; }
.inviteutsav-public-site .design-card__discount-badge{
  background:rgba(230,35,90,.1); color:var(--rose-600); font-size:.68rem; font-weight:800;
  padding:.25rem .55rem; border-radius:var(--r-pill); text-transform:uppercase; letter-spacing:.02em;
}
.inviteutsav-public-site .design-card__id-line{ font-size:.78rem; color:var(--ink-soft); letter-spacing:.01em; }
.inviteutsav-public-site .design-card__price-starting-label{ font-size:.76rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; }
.inviteutsav-public-site .design-card__links{ display:flex; gap:.7rem; margin-top:var(--sp-2); flex-wrap:wrap; }
.inviteutsav-public-site .design-card__links .btn{ flex:1; padding:.7rem 1rem; font-size:.82rem; }
.inviteutsav-public-site .design-card__links--primary .btn{ font-weight:700; }
.inviteutsav-public-site .design-card__links--secondary{ margin-top:.5rem; align-items:center; justify-content:center; }
.inviteutsav-public-site .design-card__links--secondary .btn-ghost{ flex:none; text-align:left; font-size:.8rem; padding:0px; }
.inviteutsav-public-site .design-card__links--whatsapp{ margin-top:.4rem; }
.inviteutsav-public-site .design-card__whatsapp-btn{
  display:flex; align-items:center; justify-content:center; gap:.4rem; flex:1;
  background:transparent; color:#128C4A; border:none; border-radius:var(--r-pill); padding:.55rem 1rem;
  font-size:.78rem; font-weight:700; text-align:center; transition:background-color var(--dur-fast) var(--ease-soft);
}
.inviteutsav-public-site .design-card__whatsapp-btn:hover{ background:rgba(37,211,102,.1); color:#128C4A; }
.inviteutsav-public-site .design-card__links--detail{ margin-top:.3rem; text-align:center; justify-content:center; }
.inviteutsav-public-site .design-card__detail-link{ font-size:.78rem; font-weight:600; color:var(--ink-soft); text-decoration:none; }
.inviteutsav-public-site .design-card__detail-link:hover{ color:var(--rose-600); text-decoration:underline; }
.inviteutsav-public-site .featured-more{ text-align:center; margin-top:var(--sp-7); }

/* Homepage template-section headers (Wedding + each occasion row) — a
   small title on the left, a plain (non-button) "View All" link on the
   right, replacing the old centered-heading + bottom-button layout. */
.inviteutsav-public-site .section-head--row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  flex-wrap:wrap; text-align:left; margin-inline:0; max-width:none;
}
.inviteutsav-public-site .section-head--row .section-head__title{ font-size:1.5rem; margin:0; }
.inviteutsav-public-site .section-head--row .eyebrow{ display:block; margin-bottom:.3rem; }
.inviteutsav-public-site .section-head__view-all{
  flex-shrink:0; font-size:.9rem; font-weight:600; color:var(--ink-soft);
  text-decoration:none; white-space:nowrap;
}
.inviteutsav-public-site .section-head__view-all:hover{ color:var(--rose-600); text-decoration:underline; }
.inviteutsav-public-site .featured-intro{ max-width:700px; margin:.8rem 0 0; color:var(--ink-soft); }
.inviteutsav-public-site .featured--occasion .featured-grid{ margin-top:var(--sp-5); }

/* Fancy toggle switch (e.g. Enable RSVP for Guests) — replaces a bare
   browser checkbox, matching the editor's existing pill/rounded design. */
.inviteutsav-public-site .editor-toggle{ display:inline-flex; align-items:center; gap:.7rem; cursor:pointer; }
.inviteutsav-public-site .editor-toggle input[type="checkbox"]{ position:absolute; opacity:0; width:0; height:0; }
.inviteutsav-public-site .editor-toggle__track{
  width:44px; height:24px; border-radius:var(--r-pill); background:var(--line); position:relative;
  flex-shrink:0; transition:background var(--dur-fast) var(--ease-soft);
}
.inviteutsav-public-site .editor-toggle__thumb{
  position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:var(--shadow-sm); transition:transform var(--dur-fast) var(--ease-soft);
}
.inviteutsav-public-site .editor-toggle input:checked + .editor-toggle__track{ background:var(--gold-500); }
.inviteutsav-public-site .editor-toggle input:checked + .editor-toggle__track .editor-toggle__thumb{ transform:translateX(20px); }
.inviteutsav-public-site .editor-toggle input:focus-visible + .editor-toggle__track{ box-shadow:0 0 0 3px rgba(230,152,54,.35); }
.inviteutsav-public-site .editor-toggle__label{ font-weight:700; color:var(--plum-800); }
.inviteutsav-public-site .editor-card--rsvp-toggle{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-3); }
.inviteutsav-public-site .editor-card--rsvp-toggle__manage-link{ margin-left:auto; white-space:nowrap; }

/* ---------------------------------------------------------------------- */
/* Our story                                                               */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .story{ padding-block:var(--section-pad); background:var(--bg-alt); }
.inviteutsav-public-site .story__inner{ display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--sp-8); align-items:center; }
.inviteutsav-public-site .story__visual{ position:relative; }
.inviteutsav-public-site .story__frame{
  aspect-ratio:4/5; border-radius:var(--r-xl);
  background:linear-gradient(150deg, var(--plum-800), var(--wine-600));
  display:flex; align-items:center; justify-content:center;
}
.inviteutsav-public-site .story__frame-icon{ width:120px; height:120px; opacity:.9; }
.inviteutsav-public-site .story__quote-card{
  position:absolute; bottom:-4%; right:-8%; max-width:230px;
  background:var(--cream); border-radius:var(--r-lg); padding:var(--sp-4); box-shadow:var(--shadow-lg);
}
.inviteutsav-public-site .story__quote-card p{ font-family:var(--font-display); font-style:italic; color:var(--plum-800); font-size:1rem; line-height:1.5; overflow-wrap:break-word; }
.inviteutsav-public-site .story__copy p{ margin-top:var(--sp-3); color:var(--ink-soft); }
.inviteutsav-public-site .story__copy .lede{ margin-top:var(--sp-4); }
.inviteutsav-public-site .story__stand{ font-weight:700; color:var(--wine-600) !important; }
.inviteutsav-public-site .story__copy .btn{ margin-top:var(--sp-5); }

/* ---------------------------------------------------------------------- */
/* Difference                                                              */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .difference{ padding-block:var(--section-pad); }
.inviteutsav-public-site .difference-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-5); }
.inviteutsav-public-site .diff-card{ padding:var(--sp-5); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line-soft); }
.inviteutsav-public-site .diff-card__num{ font-family:var(--font-display); font-style:italic; font-size:1.4rem; color:var(--gold-500); }
.inviteutsav-public-site .diff-card h4{ margin-top:var(--sp-2); }
.inviteutsav-public-site .diff-card p{ margin-top:.6rem; color:var(--ink-soft); font-size:.94rem; }

/* ---------------------------------------------------------------------- */
/* Showcase                                                                */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .showcase{ padding-block:var(--section-pad); background:var(--plum-900); color:#fff; }
.inviteutsav-public-site .showcase__copy h2,
.inviteutsav-public-site .showcase__copy p{ color:#fff; }
.inviteutsav-public-site .showcase__copy .eyebrow{ color:var(--gold-400); }
.inviteutsav-public-site .showcase__copy .eyebrow::before{ background:var(--gold-400); }
.inviteutsav-public-site .showcase__inner{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); align-items:start; }
.inviteutsav-public-site .showcase__steps{ display:flex; flex-direction:column; gap:0; margin-top:var(--sp-6); }
.inviteutsav-public-site .showcase__step{
  display:flex; gap:var(--sp-4); padding-block:var(--sp-4); border-top:1px solid rgba(255,255,255,.12);
  opacity:1; transition:opacity var(--dur-mid) var(--ease-soft);
}
.inviteutsav-public-site .showcase__step:last-child{ border-bottom:1px solid rgba(255,255,255,.12); }
.inviteutsav-public-site .showcase__step > span{ font-family:var(--font-display); font-style:italic; color:var(--gold-400); font-size:1.1rem; flex-shrink:0; width:2.4rem; }
.inviteutsav-public-site .showcase__step h4{ color:#fff; font-size:1.05rem; }
.inviteutsav-public-site .showcase__step p{ color:rgba(255,255,255,.65); font-size:.88rem; margin-top:.3rem; }

.inviteutsav-public-site .showcase__phone-wrap{ position:sticky; top:120px; }
.inviteutsav-public-site .showcase__dummy-image{ display:block; width:100%; max-width:430px; margin-inline:auto; border-radius:24px; box-shadow:var(--shadow-lg); }
/* Auto-cycling real template photos (front-page.php) — same crossfade
   pattern as .hero-photo-carousel, independent class/JS cycler so the two
   carousels animate on their own schedules. */
.inviteutsav-public-site .showcase-photo-carousel{
  position:relative; width:100%; max-width:430px; aspect-ratio:1/1;
  margin-inline:auto; border-radius:24px; overflow:hidden; box-shadow:var(--shadow-lg);
}
.inviteutsav-public-site .showcase-photo-carousel__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top;
  opacity:0; transition:opacity 1.4s ease; border-radius:0; box-shadow:none;
}
.inviteutsav-public-site .showcase-photo-carousel__img.is-active{ opacity:1; z-index:1; }
.inviteutsav-public-site .phone-frame--showcase .phone-frame__screen{ background:linear-gradient(160deg, #fff, var(--champagne)); padding:0; }
.inviteutsav-public-site .showcase-screen{
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2rem 1.6rem; gap:.8rem;
}
.inviteutsav-public-site .showcase-screen[hidden]{ display:none; }
.inviteutsav-public-site .ss-eyebrow{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--wine-600); font-weight:700; }
.inviteutsav-public-site .ss-title{ font-family:var(--font-display); font-size:1.5rem; color:var(--plum-800); line-height:1.25; }
.inviteutsav-public-site .ss-title span{ color:var(--rose-500); font-style:italic; }
.inviteutsav-public-site .ss-title__icon{ width:18px; height:18px; vertical-align:-2px; color:var(--gold-500); }
.inviteutsav-public-site .ss-tap{ font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; color:var(--rose-500); font-weight:700; margin-top:.6rem; display:inline-flex; align-items:center; gap:.4em; }
.inviteutsav-public-site .ss-tap__icon{ width:14px; height:14px; }
.inviteutsav-public-site .ss-body{ font-size:.9rem; color:var(--ink-soft); font-style:italic; max-width:220px; }
.inviteutsav-public-site .ss-countdown{ display:flex; gap:.8rem; }
.inviteutsav-public-site .ss-countdown div{ background:var(--cream); border-radius:var(--r-sm); padding:.6rem .8rem; box-shadow:var(--shadow-sm); }
.inviteutsav-public-site .ss-countdown strong{ display:block; font-family:var(--font-display); font-size:1.3rem; color:var(--plum-800); }
.inviteutsav-public-site .ss-countdown span{ font-size:.66rem; color:var(--charcoal-faint); text-transform:uppercase; }
.inviteutsav-public-site .ss-events{ width:100%; max-width:220px; display:flex; flex-direction:column; gap:.6rem; }
.inviteutsav-public-site .ss-events li{ display:flex; justify-content:space-between; font-size:.84rem; border-bottom:1px dashed var(--line); padding-bottom:.5rem; }
.inviteutsav-public-site .ss-events strong{ color:var(--plum-800); }
.inviteutsav-public-site .ss-events span{ color:var(--ink-soft); }
.inviteutsav-public-site .ss-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; width:100%; max-width:200px; }
.inviteutsav-public-site .ss-gallery span{ aspect-ratio:1; border-radius:var(--r-sm); display:block; }
.inviteutsav-public-site .ss-map{ width:120px; height:80px; border-radius:var(--r-sm); background:var(--champagne-deep); display:flex; align-items:center; justify-content:center; }
.inviteutsav-public-site .ss-map__pin{ color:var(--rose-500); }
.inviteutsav-public-site .ss-map__pin svg{ width:26px; height:26px; }
.inviteutsav-public-site .ss-rsvp{ display:flex; flex-direction:column; gap:.6rem; width:100%; max-width:200px; }
.inviteutsav-public-site .ss-rsvp button{ padding:.7rem; border-radius:var(--r-pill); border:1.5px solid var(--plum-800); background:transparent; color:var(--plum-800); font-weight:700; font-size:.82rem; }
.inviteutsav-public-site .ss-rsvp button:first-child{ background:var(--rose-500); border-color:var(--rose-500); color:#fff; }

/* ---------------------------------------------------------------------- */
/* Features                                                                */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .features{ padding-block:var(--section-pad); background:var(--bg-alt); }
.inviteutsav-public-site .features-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--sp-5); }
.inviteutsav-public-site .feature-item{ padding:var(--sp-4); }
.inviteutsav-public-site .feature-item__ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:14px;
  background:#fff; color:var(--rose-500);
  margin-bottom:var(--sp-2);
}
.inviteutsav-public-site .feature-item__ic svg{ width:24px; height:24px; }
.inviteutsav-public-site .feature-item h4{ margin-top:var(--sp-2); font-size:1rem; }
.inviteutsav-public-site .feature-item p{ margin-top:.4rem; color:var(--ink-soft); font-size:.88rem; }

/* ---------------------------------------------------------------------- */
/* Photo card (placeholder real-life imagery)                             */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .photo-card{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  aspect-ratio:var(--ar, 3/4);
  background:var(--champagne-deep);
  box-shadow:var(--shadow-md);
}
.inviteutsav-public-site .photo-card img{ width:100%; height:100% !important; object-fit:cover; display:block; }
.inviteutsav-public-site .photo-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(42,1,31,.5));
  pointer-events:none;
}
.inviteutsav-public-site .photo-card__caption{
  position:absolute; left:1.2rem; right:1.2rem; bottom:1rem; z-index:1;
  color:#fff; font-size:.82rem; font-weight:600;
}

/* ---------------------------------------------------------------------- */
/* How it works                                                            */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .how-it-works{
  background:var(--bg-alt);
  padding-block:var(--section-pad);
  border-bottom:1px solid color-mix(in srgb, var(--ink) 20%, transparent);
}
.inviteutsav-public-site .how-it-works__layout{ display:grid; grid-template-columns:.7fr 2fr .7fr; gap:var(--sp-6); align-items:center; }

.inviteutsav-public-site .steps-journey{ display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--sp-6); position:relative; }
.inviteutsav-public-site .steps-journey::before{
  content:"";
  position:absolute; top:28px; left:12%; right:12%; height:1px;
  background:repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px);
  z-index:0;
}
.inviteutsav-public-site .step-visual{ position:relative; z-index:1; text-align:center; }
.inviteutsav-public-site .step-visual__image{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:4/3; box-shadow:var(--shadow-md);
}
.inviteutsav-public-site .step-visual__image img{ width:100%; height:100%; object-fit:cover; display:block; }
.inviteutsav-public-site .step-visual__num{
  position:absolute; top:12px; left:12px;
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg, var(--rose-500), var(--wine-600));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  box-shadow:var(--shadow-rose);
  border:2px solid #fff;
}
.inviteutsav-public-site .step-visual h4{ margin-top:var(--sp-4); }
.inviteutsav-public-site .step-visual p{ margin-top:.5rem; color:var(--ink-soft); font-size:.9rem; }
.inviteutsav-public-site .steps{ display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--sp-5); position:relative; }
.inviteutsav-public-site .steps--no-line::before{ display:none; }
.inviteutsav-public-site .steps--three{ grid-template-columns:repeat(3, 1fr); }
.inviteutsav-public-site .steps::before{
  content:""; position:absolute; top:28px; left:12%; right:12%; height:1px;
  background:repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px);
  z-index:0;
}
.inviteutsav-public-site .step{
  text-align:center; position:relative; z-index:1;
  /* !important: every .step also carries data-reveal (design-system.css),
     which sets its OWN transform (translateY, for the entrance animation)
     and a 1s transition on that same property — at equal selector
     specificity, source order alone isn't a reliable enough guarantee
     that this .35s duration wins over data-reveal's 1s one, and a
     mismatched duration is exactly what reads as "not smooth" (either a
     sluggish 1s lag on every highlight step, or the entrance animation's
     own translateY getting clobbered before it ever plays). Never setting
     a competing `transform` here (only `transition`) leaves data-reveal's
     pre-reveal translateY/opacity lifecycle completely undisturbed;
     .is-step-active below is the only place this rule set ever actually
     changes transform, once revealed.
  */
  transition:transform .35s var(--ease-premium) !important;
}
.inviteutsav-public-site .step__num{
  width:56px; height:56px; border-radius:50%; margin-inline:auto;
  background:linear-gradient(135deg, var(--rose-500), var(--wine-600));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:1.3rem; box-shadow:var(--shadow-rose);
  transition:box-shadow .35s ease;
}
.inviteutsav-public-site .step h4{ margin-top:var(--sp-4); }
.inviteutsav-public-site .step p{ margin-top:.4rem; color:var(--ink-soft); font-size:.9rem; max-width:220px; margin-inline:auto; }

/* Looping highlight (assets/js/main.js cycles which .step carries this
   class, one at a time) — transform + box-shadow only, so it never
   reflows the grid or shifts any other step's position, on any device. */
.inviteutsav-public-site .step.is-step-active{ transform:scale(1.1) !important; }
.inviteutsav-public-site .step.is-step-active .step__num{
  box-shadow:
    0 0 0 7px color-mix(in srgb, var(--gold-400) 28%, transparent),
    0 0 20px 3px color-mix(in srgb, var(--gold-400) 45%, transparent),
    var(--shadow-rose);
}
@media (prefers-reduced-motion: reduce){
  /* Belt-and-suspenders alongside the JS-level check in main.js (which
     never starts the cycling interval at all under this preference) —
     if the class ever ends up applied anyway, it still can't visibly
     move or transition anything here. */
  .inviteutsav-public-site .step,
.inviteutsav-public-site .step__num{ transition:none !important; }
  .inviteutsav-public-site .step.is-step-active{ transform:none !important; }
}

@media (max-width:680px){
  /* A touch less scale on phones — same technique, just enough margin to
     guarantee no horizontal overflow at the narrowest widths this grid
     already collapses to a single column at (see .steps override
     further below). */
  .inviteutsav-public-site .step.is-step-active{ transform:scale(1.05) !important; }
}

/* ---------------------------------------------------------------------- */
/* Personalize                                                             */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .personalize{ padding-block:var(--section-pad); background:var(--bg-alt); border-bottom:1px solid #3c02357a; }
.inviteutsav-public-site .personalize__inner .section-head{ margin-inline:auto; text-align:center; max-width:700px; }
.inviteutsav-public-site .personalize-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-3); }
.inviteutsav-public-site .personalize-chip{
  padding:.8rem 1.6rem; border-radius:var(--r-pill); background:var(--surface);
  border:1px solid var(--line); font-weight:700; font-size:.92rem; color:var(--plum-800);
}

/* ---------------------------------------------------------------------- */
/* Pricing                                                                 */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .pricing{ padding-block:var(--section-pad); }
.inviteutsav-public-site .pricing-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:25px; align-items:stretch; }
/* "Pick Your Plan" — 5 tiers as 3 cards in row 1, then 2 cards centered in
   row 2, desktop only (>960px — the breakpoint below overrides
   .pricing-grid itself, so this stays scoped the same way rather than
   needing its own reset). A 6-column grid, each row-1 card spanning 2
   columns (filling all 6), each row-2 card also spanning 2 but offset to
   columns 2-3 / 4-5, leaving one empty column on each side to center it. */
@media (min-width:961px){
  .inviteutsav-public-site .pricing-grid{ grid-template-columns:repeat(6, 1fr); }
  .inviteutsav-public-site .price-card:nth-child(-n/**/+3){ grid-column: span 2; }
  .inviteutsav-public-site .price-card:nth-child(4){ grid-column: 2 / span 2; }
  .inviteutsav-public-site .price-card:nth-child(5){ grid-column: 4 / span 2; }
}
.inviteutsav-public-site .price-card{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:45px 30px; display:flex; flex-direction:column; position:relative;
}
.inviteutsav-public-site .price-card--popular{ background:var(--plum-800); color:#fff; transform:scale(1.03); box-shadow:var(--shadow-lg); border-color:transparent; z-index:1; }
.inviteutsav-public-site .price-card--popular h3,
.inviteutsav-public-site .price-card--popular .price-card__price{ color:#fff; }
.inviteutsav-public-site .price-card--popular .price-card__desc,
.inviteutsav-public-site .price-card--popular .price-card__list li{ color:rgba(255,255,255,.75); }
.inviteutsav-public-site .price-card--popular .price-card__list li::before{ color:var(--gold-400); }
.inviteutsav-public-site .price-card__tag{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--gold-400); color:var(--plum-900); font-size:.72rem; font-weight:800;
  padding:.35rem 1rem; border-radius:var(--r-pill); text-transform:uppercase; letter-spacing:.04em;
  white-space:nowrap;
}
.inviteutsav-public-site .price-card__desc{ color:var(--ink-soft); margin-top:.6rem; min-height:44px; }
.inviteutsav-public-site .price-card__price{ font-family:var(--font-display); font-size:2.4rem; color:var(--plum-800); margin-top:var(--sp-4); }
.inviteutsav-public-site .price-card__list{ margin-top:var(--sp-5); display:flex; flex-direction:column; gap:.7rem; flex-grow:1; }
.inviteutsav-public-site .price-card__list li{ padding-left:1.4rem; position:relative; font-size:.92rem; }
.inviteutsav-public-site .price-card__list li::before{ content:"✓"; position:absolute; left:0; color:var(--rose-500); font-weight:800; }
.inviteutsav-public-site .price-card .btn{ margin-top:var(--sp-6); }
.inviteutsav-public-site .pricing-note{ text-align:center; margin-top:var(--sp-6); font-size:.82rem; color:var(--charcoal-faint); }

/* ---------------------------------------------------------------------- */
/* Pricing: included / add-ons / offer (pricing.html)                      */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .pricing-ranges{ padding-block:var(--section-pad); }
.inviteutsav-public-site .pricing-included{ padding-block:var(--section-pad); background:var(--bg-alt); }
.inviteutsav-public-site .pricing-included__grid{ display:flex; flex-direction:column; gap:var(--sp-8); max-width:900px; margin-inline:auto; }
.inviteutsav-public-site .pricing-included__grid h4{ text-align:center; margin-bottom:var(--sp-5); font-size:1.3rem; }
/* ---------------------------------------------------------------------- */
/* Pricing: 5-plan comparison table                                       */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .plan-comparison{ padding-block:var(--section-pad); }

/* Mobile-only stacked plan cards (Inviteutsav_Widget_Plan_Comparison) —
   hidden by default, swapped in for the scroll-table below 680px where
   comparing a table one column at a time is hard to use. */
.inviteutsav-public-site .plan-comparison__cards{ display:none; flex-direction:column; gap:var(--sp-5); }
.inviteutsav-public-site .btn-block{ width:100%; }

.inviteutsav-public-site .plan-comparison__trust-line{
  text-align:center; font-size:.86rem; font-weight:700; letter-spacing:.02em;
  color:var(--plum-800); margin-bottom:var(--sp-4);
}

.inviteutsav-public-site .plan-comparison__swipe-hint{
  display:none; text-align:center; font-size:.8rem; font-weight:600;
  color:var(--ink-soft); margin-bottom:var(--sp-3);
}

.inviteutsav-public-site .plan-comparison__scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.inviteutsav-public-site .plan-comparison__table{
  width:100%; min-width:920px; border-collapse:separate; border-spacing:0;
  background:var(--surface);
}

/* Sticky feature-name column — stays in view while the 4 plan columns
   scroll underneath it, so a narrow screen never loses track of which
   row it's comparing. Needs its own opaque background (a sticky cell
   sits above whatever scrolls past beneath it). */
.inviteutsav-public-site .plan-comparison__feature-head{
  position:sticky; left:0; z-index:3;
  background:var(--surface);
  text-align:left; font-weight:500; font-size:.9rem; color:var(--ink);
  padding:1rem 1.1rem; min-width:190px; max-width:220px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line-soft);
}
.inviteutsav-public-site .plan-comparison__feature-head--corner{ z-index:4; background:var(--cream); border-bottom:1px solid var(--line); }

.inviteutsav-public-site .plan-comparison__plan-head{
  text-align:center; vertical-align:top; padding:1.6rem 1.2rem; min-width:165px;
  background:var(--cream);
  border-bottom:1px solid var(--line);
  border-left:1px solid var(--line-soft);
}
.inviteutsav-public-site .plan-comparison__plan-head.is-featured{
  background:linear-gradient(180deg, rgba(230,152,54,.14), rgba(230,152,54,.05));
  border-left:2px solid var(--gold-400); border-right:2px solid var(--gold-400);
  position:relative;
}
.inviteutsav-public-site .plan-comparison__badge{
  display:inline-block; margin-bottom:.6rem;
  background:linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color:var(--plum-900); font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:.32rem .85rem; border-radius:var(--r-pill);
  box-shadow:var(--shadow-gold);
  white-space:nowrap;
}
.inviteutsav-public-site .plan-comparison__plan-name{
  display:block; font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:1.05rem; color:var(--plum-800); margin-bottom:.3rem;
}
.inviteutsav-public-site .plan-comparison__plan-tagline{
  display:block; font-size:.78rem; color:var(--ink-soft); margin:-.15rem 0 .4rem; line-height:1.3;
}
.inviteutsav-public-site .plan-comparison__launch-label{
  display:block; font-size:.64rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold-500); margin-bottom:.5rem;
}
.inviteutsav-public-site .plan-comparison__plan-price{
  display:flex; align-items:baseline; justify-content:center; gap:.5rem; flex-wrap:wrap;
  margin-bottom:.5rem;
}
.inviteutsav-public-site .plan-comparison__price-original{ font-size:.82rem; font-weight:600; color:var(--charcoal-faint); text-decoration:line-through; }
.inviteutsav-public-site .plan-comparison__price-final{ font-family:var(--font-display); font-size:1.7rem; font-weight:600; color:var(--rose-600); line-height:1; }
.inviteutsav-public-site .plan-comparison__discount-badge{
  display:inline-block;
  background:rgba(230,35,90,.1); color:var(--rose-600); font-size:.66rem; font-weight:800;
  padding:.25rem .6rem; border-radius:var(--r-pill); text-transform:uppercase; letter-spacing:.03em;
}

.inviteutsav-public-site .plan-comparison__cell{
  text-align:center; padding:.9rem 1.2rem; font-size:.88rem; color:var(--ink-soft);
  border-bottom:1px solid var(--line-soft);
  border-left:1px solid var(--line-soft);
}
.inviteutsav-public-site .plan-comparison__cell.is-featured{
  background:rgba(230,152,54,.06);
  border-left:2px solid var(--gold-400); border-right:2px solid var(--gold-400);
}
.inviteutsav-public-site .plan-comparison__cell.is-check{ color:var(--rose-600); font-weight:700; font-size:1.05rem; }
.inviteutsav-public-site .plan-comparison__cell.is-dash{ color:var(--charcoal-faint); font-size:.95rem; }
.inviteutsav-public-site .plan-comparison__cell.is-text{ font-weight:600; color:var(--ink); font-size:.84rem; }

/* Faint row banding for scannability, kept subtle enough not to fight the
   check/dash color coding or the featured column's own gold tint. */
.inviteutsav-public-site tbody tr:nth-child(even) .plan-comparison__cell:not(.is-featured){ background:rgba(60,2,53,.025); }
/* The sticky feature-head column needs a fully OPAQUE background of its
   own — it sits above the plan columns as they scroll underneath it, so a
   translucent rgba() tint here (as used for the plain cells above) lets
   the scrolling content show through and visually overlap the sticky
   label. This is the flattened, fully-opaque equivalent of that same
   rgba(60,2,53,.025) tint over --cream (#FFFDF9), not a new color. */
.inviteutsav-public-site tbody tr:nth-child(even) .plan-comparison__feature-head{ background:#FAF7F4; }

.inviteutsav-public-site .plan-comparison tbody tr:last-child .plan-comparison__cell{ border-bottom:none; }
.inviteutsav-public-site .plan-comparison tbody tr:last-child .plan-comparison__cell.is-featured{ border-radius:0 0 var(--r-sm) var(--r-sm); }
.inviteutsav-public-site .plan-comparison__cta-row .plan-comparison__cell{ padding-top:1.4rem; padding-bottom:1.6rem; background:transparent; }
.inviteutsav-public-site .plan-comparison__cta-row .plan-comparison__cell.is-featured{ background:rgba(230,152,54,.06); border-radius:0 0 var(--r-md) var(--r-md); border-bottom:2px solid var(--gold-400); }
.inviteutsav-public-site .plan-comparison__cta-row .btn{ width:100%; }

@media (max-width:960px){
  .inviteutsav-public-site .plan-comparison__swipe-hint{ display:block; }
}
@media (max-width:680px){
  .inviteutsav-public-site .plan-comparison__feature-head{ min-width:130px; max-width:150px; padding:.85rem .8rem; font-size:.82rem; }
  .inviteutsav-public-site .plan-comparison__plan-head{ min-width:140px; padding:1.3rem .9rem; }
  .inviteutsav-public-site .plan-comparison__cell{ padding:.8rem .9rem; }
  .inviteutsav-public-site .plan-comparison__price-final{ font-size:1.4rem; }

  /* Below 680px, individual stacked cards replace the scroll-table
     entirely — easier to read and compare one plan at a time on a phone. */
  .inviteutsav-public-site .plan-comparison__scroll,
.inviteutsav-public-site .plan-comparison__swipe-hint{ display:none; }
  .inviteutsav-public-site .plan-comparison__cards{ display:flex; }

  /* var(--sp-7) (4.8rem) padding on every side left barely any width for
     content on a full-width mobile card — the CTA button in particular
     had almost no room to sit comfortably and could wrap/overflow. */
  .inviteutsav-public-site .pricing-offer__card{ padding:var(--sp-5) var(--sp-4); }
  .inviteutsav-public-site .pricing-offer__card .btn{ width:100%; }
}

.inviteutsav-public-site .pricing-offer{ padding-block:var(--sp-8); }
.inviteutsav-public-site .pricing-offer__card{
  max-width:640px; margin-inline:auto; text-align:center;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-xl);
  padding:var(--sp-7); box-shadow:var(--shadow-sm);
}
.inviteutsav-public-site .pricing-offer__card h3{ margin-top:var(--sp-3); }
.inviteutsav-public-site .pricing-offer__card p{ margin-top:var(--sp-3); color:var(--ink-soft); }
.inviteutsav-public-site .pricing-offer__card .btn{ margin-top:var(--sp-5); }

/* ---------------------------------------------------------------------- */
/* Before you order                                                        */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .before-order{ padding-block:var(--section-pad); background:var(--bg-alt); }
.inviteutsav-public-site .checklist{ display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--sp-4); max-width:900px; margin-inline:auto; }
.inviteutsav-public-site .checklist--three{ grid-template-columns:repeat(3, 1fr); max-width:820px; }
.inviteutsav-public-site .checklist__item{
  display:flex; align-items:center; gap:.6rem; background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r-md); padding:1rem 1.1rem; font-weight:600; font-size:.9rem;
}
.inviteutsav-public-site .checklist__item span{ color:var(--rose-500); font-weight:800; }

/* ---------------------------------------------------------------------- */
/* Testimonials (placeholder)                                              */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .testimonials{ padding-block:var(--section-pad); text-align:center; }
.inviteutsav-public-site .testimonial-placeholder{
  max-width:520px; margin-inline:auto; padding:var(--sp-6); border:1.5px dashed var(--line); border-radius:var(--r-lg);
}
.inviteutsav-public-site .testimonial-placeholder p{ color:var(--ink-soft); }

/* ---------------------------------------------------------------------- */
/* FAQ                                                                     */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .faq{ padding-block:var(--section-pad); background:var(--bg-alt); }
.inviteutsav-public-site .faq__inner{ display:grid; grid-template-columns:.7fr 1.3fr; gap:var(--sp-8); }
.inviteutsav-public-site .faq-list{ display:flex; flex-direction:column; }
.inviteutsav-public-site .faq-item{ border-bottom:1px solid var(--line); }
.inviteutsav-public-site .faq-item__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-4) 0; background:none; border:none; text-align:left;
  font-family:var(--font-display); font-size:1.05rem; color:var(--plum-800); font-weight:600;
}
.inviteutsav-public-site .faq-item__icon{ flex-shrink:0; font-size:1.2rem; color:var(--rose-500); transition:transform var(--dur-fast) var(--ease-soft); }
.inviteutsav-public-site .faq-item__q[aria-expanded="true"] .faq-item__icon{ transform:rotate(45deg); }
.inviteutsav-public-site .faq-item__a{ max-height:0; overflow:hidden; transition:max-height var(--dur-mid) var(--ease-premium); }
.inviteutsav-public-site .faq-item__a p{ padding-bottom:var(--sp-4); color:var(--ink-soft); max-width:640px; }
.inviteutsav-public-site .faq-item__a p a{ color:var(--rose-500); }

/* ---------------------------------------------------------------------- */
/* Final CTA                                                               */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .final-cta{
  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;
}
.inviteutsav-public-site .final-cta__photo{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  opacity:.22; mix-blend-mode:luminosity;
}
.inviteutsav-public-site .final-cta__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%);
}
.inviteutsav-public-site .final-cta .eyebrow{ color:var(--gold-400); }
.inviteutsav-public-site .final-cta .eyebrow::before{ background:var(--gold-400); }
.inviteutsav-public-site .final-cta__inner{ position:relative; z-index:1; max-width:640px; }
.inviteutsav-public-site .final-cta h2{ color:#fff; }
.inviteutsav-public-site .final-cta p{ color:rgba(255,255,255,.8); margin-top:var(--sp-3); font-size:1.1rem; }
.inviteutsav-public-site .final-cta__ctas{ display:flex; gap:var(--sp-3); justify-content:center; flex-wrap:wrap; margin-top:var(--sp-6); }
.inviteutsav-public-site .final-cta .btn-secondary{ color:#fff; border-color:rgba(255,255,255,.6); }
.inviteutsav-public-site .final-cta .btn-secondary:hover{ background:#fff; color:var(--plum-800); }
/* This section is built directly in Elementor on some pages (assigned the
   "final-cta" CSS class through Elementor's Advanced panel) — see the
   matching note on .page-banner above for why Elementor's own widget CSS
   otherwise wins and shows the kit's default dark heading color here. */
.inviteutsav-public-site .final-cta .elementor-heading-title{ color:#fff !important; }
.inviteutsav-public-site .final-cta span.elementor-heading-title{ color:var(--gold-400) !important; }
.inviteutsav-public-site .final-cta a{ color:rgba(255,255,255,.85) !important; }
.inviteutsav-public-site .final-cta a:hover{ color:var(--gold-300) !important; }

/* ---------------------------------------------------------------------- */
/* Contact form                                                            */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .contact-form-section{ padding-block:var(--section-pad); }
.inviteutsav-public-site .contact-form__inner{ max-width:720px; margin-inline:auto; }
.inviteutsav-public-site .contact-page__inner{ max-width:1000px; margin-inline:auto; display:grid; grid-template-columns:1.3fr 1fr; gap:var(--sp-8); align-items:start; }
.inviteutsav-public-site .contact-info{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:var(--sp-6); position:sticky; top:calc(var(--header-h, 84px) + 24px); }
.inviteutsav-public-site .contact-info h4{ margin-bottom:var(--sp-4); }
.inviteutsav-public-site .contact-info__list{ display:flex; flex-direction:column; gap:var(--sp-4); }
.inviteutsav-public-site .contact-info__list li{ display:flex; align-items:center; gap:.8rem; }
.inviteutsav-public-site .contact-info__list svg{ width:20px; height:20px; color:var(--rose-500); flex-shrink:0; }
.inviteutsav-public-site .contact-info__list a{ font-weight:600; }
.inviteutsav-public-site .contact-info__hours{ margin-top:var(--sp-5); font-size:.86rem; color:var(--ink-soft); }
.inviteutsav-public-site .contact-form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2) var(--sp-4); }
.inviteutsav-public-site .field--full{ grid-column:1 / -1; }
.inviteutsav-public-site .contact-form__note{ margin-top:var(--sp-3); font-size:.84rem; color:var(--charcoal-faint); }

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .site-footer{ background:var(--plum-900); color:rgba(255,255,255,.75); padding-top:var(--sp-8); }
.inviteutsav-public-site .site-footer__inner{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--sp-6); padding-bottom:var(--sp-7); }
.inviteutsav-public-site .site-footer__logo{ height:60px; width:auto; }
.inviteutsav-public-site .site-footer__brand p{ margin-top:var(--sp-3); font-size:.9rem; max-width:240px; color:#fff; }
.inviteutsav-public-site .site-footer__social{ display:flex; gap:.8rem; margin-top:var(--sp-4); }
.inviteutsav-public-site .site-footer__social a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.inviteutsav-public-site .site-footer__social a svg{ width:17px; height:17px; }
.inviteutsav-public-site .site-footer__social a:hover{ background:var(--rose-500); border-color:var(--rose-500); color:#fff; }
.inviteutsav-public-site .site-footer__social a:focus-visible{ outline:2px solid var(--gold-400); outline-offset:2px; }
.inviteutsav-public-site .site-footer__col h5{ color:#fff !important; font-family:var(--font-display); font-size:1.05rem; margin-bottom:var(--sp-4); }
.inviteutsav-public-site .site-footer__col ul{ display:flex; flex-direction:column; gap:.8rem; }
.inviteutsav-public-site .site-footer__col a{ font-size:.9rem; transition:color var(--dur-fast); }
.inviteutsav-public-site .site-footer__col a:hover{ color:var(--gold-400); }
.inviteutsav-public-site .site-footer__contact-list a{ display:inline-flex; align-items:center; gap:.6rem; }
.inviteutsav-public-site .site-footer__contact-list a svg{ width:16px; height:16px; flex-shrink:0; color:var(--gold-400); }
.inviteutsav-public-site .site-footer__bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  border-top:1px solid rgba(255,255,255,.12); padding-block:var(--sp-4); font-size:.82rem;
}
.inviteutsav-public-site .site-footer__bottom p{ color:#fff; }
.inviteutsav-public-site .site-footer__legal{ display:flex; gap:var(--sp-4); }
.inviteutsav-public-site .site-footer__legal a:hover{ color:var(--gold-400); }

/* ---------------------------------------------------------------------- */
/* WhatsApp floating button                                                */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .whatsapp-float{
  position:fixed; bottom:24px; right:24px; z-index:90;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(37,211,102,.4);
  transition:transform var(--dur-fast) var(--ease-soft);
}
.inviteutsav-public-site .whatsapp-float:hover{ transform:scale(1.08); }

/* ---------------------------------------------------------------------- */
/* Mobile sticky action bar                                                */
/* Hidden by default (desktop/tablet use the header CTA + floating WhatsApp)*/
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .mobile-cta-bar{ display:none; }

@media (max-width: 680px){
  .inviteutsav-public-site .whatsapp-float{ display:none; } /* folded into the sticky bar to avoid two competing WhatsApp entry points */

  .inviteutsav-public-site .mobile-cta-bar{
    display:flex; align-items:center; gap:.6rem;
    position:fixed; left:0; right:0; bottom:0; z-index:95;
    padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    background:var(--surface);
    border-top:1px solid var(--line-soft);
    box-shadow:0 -4px 16px rgba(0,0,0,.06);
  }
  .inviteutsav-public-site .mobile-cta-bar__primary{
    flex:1; text-align:center; white-space:nowrap;
  }
  .inviteutsav-public-site .mobile-cta-bar__whatsapp{
    flex-shrink:0;
    width:44px; height:44px; border-radius:50%;
    background:#25D366;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 12px rgba(37,211,102,.35);
  }
  /* No primary pill on this page (app pages) — WhatsApp reverts to its own
     small floating position instead of a full-width bar with nothing else in it. */
  .inviteutsav-public-site .mobile-cta-bar:not(:has(.mobile-cta-bar__primary)){
    background:transparent; border-top:none; box-shadow:none;
    justify-content:flex-end; width:80px; left:initial;
  }
}

/* ======================================================================
   Responsive
   ====================================================================== */
@media (max-width: 1080px){
  .inviteutsav-public-site .celebration-grid{ grid-template-columns:repeat(4, 1fr); }
  .inviteutsav-public-site .features-grid{ grid-template-columns:repeat(3, 1fr); }
}

@media (max-width: 960px){
  .inviteutsav-public-site .main-nav{ position:fixed; inset:var(--header-h, 84px) 0 0 0; margin-left:0; background:var(--ivory); transform:translateX(100%); transition:transform var(--dur-mid) var(--ease-premium); overflow-y:auto; padding:var(--sp-5); }
  .inviteutsav-public-site .main-nav.is-open{ transform:translateX(0); }
  .inviteutsav-public-site .main-nav ul{ flex-direction:column; align-items:flex-start; gap:0; }
  .inviteutsav-public-site .main-nav > ul > li{ width:100%; border-bottom:1px solid var(--line-soft); }
  .inviteutsav-public-site .main-nav > ul > li > a{ padding:1rem 0; width:100%; }
  .inviteutsav-public-site .main-nav .has-dropdown .dropdown{ position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:none; display:none; width:100%; min-width:0; max-width:none; column-count:1; padding-left:1rem; }
  .inviteutsav-public-site .main-nav .has-dropdown.is-open .dropdown{ display:block; }
  .inviteutsav-public-site .main-nav .has-dropdown--nested > a::before{ transform:rotate(90deg); }
  .inviteutsav-public-site .main-nav .has-dropdown--nested.is-open > a::before{ transform:rotate(-90deg); }
  .inviteutsav-public-site .main-nav .dropdown--nested{ padding-left:1.5rem; }
  .inviteutsav-public-site .nav-toggle{ display:flex; }

  .inviteutsav-public-site .hero__inner{ grid-template-columns:1fr; text-align:center; gap:var(--sp-2); }
  .inviteutsav-public-site .hero__copy{ order:2; }
  .inviteutsav-public-site .hero__visual{ order:1; margin-bottom:var(--sp-2); }
  .inviteutsav-public-site .hero__ctas,
.inviteutsav-public-site .hero__trust{ justify-content:center; }
  .inviteutsav-public-site .hero__sub{ margin-inline:auto; }
  /* Absolutely-positioned floating badges only have room to sit clear of
     the photo/copy at desktop widths — below 960px they crowd or overlap
     the now-stacked hero content, so they're dropped entirely on mobile
     rather than repositioned. */
  .inviteutsav-public-site .hero__card-float{ display:none; }
  .inviteutsav-public-site .hero__scroll-cue{ display:none; }

  .inviteutsav-public-site .story__inner,
.inviteutsav-public-site .showcase__inner,
.inviteutsav-public-site .faq__inner,
.inviteutsav-public-site .contact-page__inner,
.inviteutsav-public-site .td-hero__inner{ grid-template-columns:1fr; }
  .inviteutsav-public-site .td-hero__facts{ justify-content:center; }
  .inviteutsav-public-site .contact-info{ position:static; padding:var(--sp-3); }
  .inviteutsav-public-site .trust-strip__bottom{ flex-direction:column; align-items:flex-start; }
  .inviteutsav-public-site .trust-strip__stats{ gap:var(--sp-5); flex-wrap:wrap; }
  .inviteutsav-public-site .trust-strip__photos{ justify-content:center; }
  .inviteutsav-public-site .why-strip__grid{ grid-template-columns:repeat(2, 1fr); }
  .inviteutsav-public-site .showcase__phone-wrap{ position:relative; top:0; margin-top:var(--sp-6); }
  .inviteutsav-public-site .story__visual{ max-width:340px; margin-inline:auto; }
  .inviteutsav-public-site .story__quote-card{ right:0; max-width:200px; }

  .inviteutsav-public-site .featured-grid,
.inviteutsav-public-site .templates-grid{ grid-template-columns:repeat(3, 1fr); }
  .inviteutsav-public-site .difference-grid,
.inviteutsav-public-site .pricing-grid{ grid-template-columns:repeat(2, 1fr); }
  .inviteutsav-public-site .price-card--popular{ transform:none; }
  .inviteutsav-public-site .steps{ grid-template-columns:repeat(2, 1fr); row-gap:var(--sp-7); }
  .inviteutsav-public-site .steps::before{ display:none; }
  .inviteutsav-public-site .how-it-works__layout{ grid-template-columns:1fr; }
  .inviteutsav-public-site .how-it-works__layout .photo-card{ display:none; }
  .inviteutsav-public-site .steps--three{ grid-template-columns:repeat(2, 1fr); }

  /* Vertical timeline: single column, image+text side by side, alternating,
     connected by a spine down the centre — clearer as a sequence than a 2x2 grid. */
  .inviteutsav-public-site .steps-journey{ display:flex; flex-direction:column; gap:var(--sp-7); grid-template-columns:none; position:relative; }
  .inviteutsav-public-site .steps-journey::before{
    display:block; content:""; position:absolute; top:8px; bottom:8px; left:50%;
    width:1px; transform:translateX(-50%);
    background:repeating-linear-gradient(180deg, var(--line) 0 8px, transparent 8px 16px);
  }
  .inviteutsav-public-site .step-visual{ display:flex; align-items:center; gap:var(--sp-5); text-align:left; }
  .inviteutsav-public-site .step-visual__image{ flex:0 0 42%; aspect-ratio:1/1; }
  .inviteutsav-public-site .step-visual__content h4{ margin-top:0; }
  .inviteutsav-public-site .step-visual:nth-child(even){ flex-direction:row-reverse; text-align:right; }
}

@media (max-width: 560px){
  .inviteutsav-public-site .steps-journey::before{ display:none; }
  .inviteutsav-public-site .step-visual,
.inviteutsav-public-site .step-visual:nth-child(even){ flex-direction:column; text-align:center; }
  .inviteutsav-public-site .step-visual__image{ flex-basis:auto; width:100%; aspect-ratio:4/3; }
}

@media (max-width: 480px){
  /* The 2-column layout from the 960px breakpoint still has enough width
     to look fine down to ~560px, but below 480px it starts to crowd —
     drops to a single column with extra row-gap instead. */
  .inviteutsav-public-site .steps{ grid-template-columns:repeat(1, 1fr); row-gap:var(--sp-7); }
}

/* Country-code select + number input side by side — the field had no base
   layout rule at all before, so the two inputs stacked/overlapped
   depending on surrounding context instead of sitting in a row. */
.inviteutsav-public-site .phone-field{ display:flex; gap:.5rem; flex-wrap:wrap; }
.inviteutsav-public-site .phone-field .phone-field__number{ flex:1; min-width:200px; }

@media (max-width: 680px){
  .inviteutsav-public-site .brand__logo{ height:35px; }

  /* !important: the base .auth-card rule further down this file (no media
     query) comes later in source order, so at equal specificity it would
     otherwise win this tie regardless of viewport width. */
  .inviteutsav-public-site .auth-card{ padding:var(--sp-4) var(--sp-4) !important; }
  .inviteutsav-public-site .auth-tabs{ border-radius:1.6rem; flex-direction:column; }

  /* Country select + number side by side can get uncomfortably narrow on
     a phone once a long country name is selected (e.g. "United States /
     Canada / Caribbean") — capped tighter here so the number input always
     keeps enough room to actually type/read a phone number in. */
  .inviteutsav-public-site .phone-field .phone-field__code{ max-width:7.5em; font-size:.9rem; }


  /* A long invitation title + the price badge on the same row can get
     cramped on a phone — lets the price drop to its own line instead of
     squeezing the title's available width. */
  .inviteutsav-public-site .invitation-row__title-row{ flex-wrap:wrap; }

  .inviteutsav-public-site .header-cta{ padding:.6rem; border-radius:50%; }
  .inviteutsav-public-site .header-cta__icon{ display:block; }
  .inviteutsav-public-site .header-cta__label{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  .inviteutsav-public-site .hero-bloom--extra{ display:none; }
  .inviteutsav-public-site .page-banner__breadcrumb{ font-size:.76rem; gap:.3em; }

  /* "Invitations Starting at Just ₹X" pill — the label and price sat on one
     tight row that could crowd/squeeze on narrow phones; the price now
     wraps to its own centered line under the label instead. */
  .inviteutsav-public-site .page-banner__price{ flex-wrap:wrap; justify-content:center; text-align:center; }
  .inviteutsav-public-site .page-banner__price strong{ flex-basis:100%; margin-top:.15rem; font-size:1.1rem; }

  /* Below ~680px the floating quote card (absolutely positioned, overlapping
     the photo) has too little room to sit half-off the image without
     crowding or clipping against the section edge — dropped into normal
     flow as its own stacked card instead, which by construction can't
     overflow or get cut off at any phone width. */
  .inviteutsav-public-site .story__quote-card{
    position:static; max-width:none; margin-top:var(--sp-4);
    padding:var(--sp-3) var(--sp-4);
  }

  .inviteutsav-public-site .design-card__links{ flex-direction:column; }
  .inviteutsav-public-site .design-card__links .btn{ width:100%; }

  .inviteutsav-public-site .celebration-grid{ grid-template-columns:repeat(2, 1fr); }
  .inviteutsav-public-site .features-grid{ grid-template-columns:repeat(2, 1fr); }
  .inviteutsav-public-site .difference-grid,
.inviteutsav-public-site .pricing-grid,
.inviteutsav-public-site .checklist,
.inviteutsav-public-site .checklist--three{ grid-template-columns:1fr; }
  .inviteutsav-public-site .contact-form__grid{ grid-template-columns:1fr; }
  .inviteutsav-public-site .site-footer__inner{ grid-template-columns:1fr; gap:var(--sp-4); }
  .inviteutsav-public-site .site-footer__brand{ grid-column:auto; }
  .inviteutsav-public-site .container{ --container-w:100%; }
  .inviteutsav-public-site h1{ font-size:2.4rem; }

  /* Featured/templates grids: full-width single column on mobile, not a
     horizontal carousel — every listing page should scroll vertically. */
  .inviteutsav-public-site .featured-grid,
.inviteutsav-public-site .templates-grid{ grid-template-columns:1fr; gap:var(--sp-6); }
}

/* ---------------------------------------------------------------------- */
/* WordPress additions                                                    */
/* ---------------------------------------------------------------------- */

/* Templates archive — one section per occasion (Wedding, Baby Shower,
   Birthday, Christmas, Halloween, …), see archive-invitation_template.php.
   Each section's own .templates-grid keeps its existing responsive
   behavior unchanged (plain class selector above, no parent dependency). */
.inviteutsav-public-site .tpl-occasion-section + .tpl-occasion-section{
  margin-top:var(--sp-7);
}
.inviteutsav-public-site .tpl-occasion-section__heading{
  font-size:1.5rem;
  margin:0 0 var(--sp-4);
}

/* Real uploaded Featured Image, shown instead of the gradient+glyph mockup
   once a template has one (see inviteutsav_template_preview()). */
.inviteutsav-public-site .design-card__preview--photo{
  padding:0;
  background:var(--champagne-deep);
}
.inviteutsav-public-site .design-card__preview--photo img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Native WordPress alignment classes used inside Elementor/editor content areas. */
.inviteutsav-public-site .alignwide{ max-width:calc(var(--container-w) + 4rem); margin-inline:auto; }
.inviteutsav-public-site .alignfull{ max-width:100%; }
.inviteutsav-public-site .entry-content > *{ max-width:100%; }

/* WPForms — restyled to match the site's own .field/.btn design system.
   WPForms' "modern" theme reads its look from these CSS custom properties
   (see the plugin's own inline :root style block); overriding them here,
   scoped to .wpforms-container, keeps every field/button/state in sync
   without fighting its generated selectors one by one. Applies to any
   WPForms embed anywhere on the site, not just the Contact page. */
.inviteutsav-public-site .wpforms-container{
  --wpforms-field-border-radius: var(--r-sm);
  --wpforms-field-border-style: solid;
  --wpforms-field-border-size: 1.5px;
  --wpforms-field-background-color: var(--cream);
  --wpforms-field-border-color: var(--line);
  --wpforms-field-border-color-spare: var(--line);
  --wpforms-field-text-color: var(--ink);
  --wpforms-field-menu-color: var(--cream);
  --wpforms-label-color: var(--plum-800);
  --wpforms-label-sublabel-color: var(--ink-soft);
  --wpforms-label-error-color: var(--rose-600);
  --wpforms-button-border-radius: var(--r-pill);
  --wpforms-button-border-style: none;
  --wpforms-button-background-color: var(--rose-500);
  --wpforms-button-border-color: var(--rose-500);
  --wpforms-button-text-color: var(--white);
  --wpforms-page-break-color: var(--rose-500);
  --wpforms-container-padding: 0px;
  --wpforms-container-border-style: none;
  --wpforms-container-shadow-size-box-shadow: none;
  --wpforms-field-size-input-height: 52px;
  --wpforms-field-size-input-spacing: 1.6rem;
  --wpforms-field-size-font-size: 1rem;
  --wpforms-field-size-line-height: 1.4;
  --wpforms-field-size-padding-h: 1.1rem;
  --wpforms-field-size-checkbox-size: 18px;
  --wpforms-field-size-sublabel-spacing: .4rem;
  --wpforms-label-size-font-size: .86rem;
  --wpforms-label-size-line-height: 1.4;
  --wpforms-label-size-sublabel-font-size: .82rem;
  --wpforms-button-size-font-size: .98rem;
  --wpforms-button-size-height: auto;
  --wpforms-button-size-padding-h: 2rem;
  --wpforms-button-size-margin-top: var(--sp-2);
  font-family: var(--font-body);
}

.inviteutsav-public-site .wpforms-container .wpforms-field-label,
.inviteutsav-public-site .wpforms-container .wpforms-field-label-inline{
  font-family: var(--font-body);
  font-weight: 700 !important;
  margin-bottom: .5rem !important;
}
.inviteutsav-public-site .wpforms-container .wpforms-field-sublabel{ font-weight: 500; }
.inviteutsav-public-site .wpforms-container .wpforms-required-label{ color: var(--rose-500); }
/* "Anything you'd like us to know?" (field 4 on the contact form, ID 161)
   — a fixed ~3-line height rather than WPForms' default single-line-tall
   textarea. Scoped to this one field/form, not every textarea site-wide. */
.inviteutsav-public-site #wpforms-161-field_4{ height: 4.8em; min-height: 4.8em; }
.inviteutsav-public-site .wpforms-container .wpforms-field-description,
.inviteutsav-public-site .wpforms-container .wpforms-field-limit-text{ color: var(--ink-soft); font-size: .92rem; margin-top: .4rem; }

.inviteutsav-public-site .wpforms-container input[type=text],
.inviteutsav-public-site .wpforms-container input[type=email],
.inviteutsav-public-site .wpforms-container input[type=tel],
.inviteutsav-public-site .wpforms-container input[type=url],
.inviteutsav-public-site .wpforms-container input[type=number],
.inviteutsav-public-site .wpforms-container input[type=password],
.inviteutsav-public-site .wpforms-container input[type=date],
.inviteutsav-public-site .wpforms-container select,
.inviteutsav-public-site .wpforms-container textarea{
  width:100%;
  font-family: var(--font-body);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
.inviteutsav-public-site .wpforms-container textarea{ min-height: 150px; resize: vertical; }
.inviteutsav-public-site .wpforms-container ::placeholder{ color: var(--charcoal-faint); opacity: 1; }

.inviteutsav-public-site .wpforms-container input:focus,
.inviteutsav-public-site .wpforms-container select:focus,
.inviteutsav-public-site .wpforms-container textarea:focus{
  outline: none;
  border-color: var(--rose-500) !important;
  box-shadow: 0 0 0 4px rgba(230,35,90,.12);
}

/* Checkbox / radio choice lists */
.inviteutsav-public-site .wpforms-container .wpforms-field-checkbox ul li,
.inviteutsav-public-site .wpforms-container .wpforms-field-radio ul li,
.inviteutsav-public-site .wpforms-container .wpforms-field-payment-checkbox ul li,
.inviteutsav-public-site .wpforms-container .wpforms-field-payment-multiple ul li{
  padding: .5rem 0;
}
.inviteutsav-public-site .wpforms-container .wpforms-field-checkbox ul li input,
.inviteutsav-public-site .wpforms-container .wpforms-field-radio ul li input{
  accent-color: var(--rose-500);
  width: 18px; height: 18px; margin-right: .6em; vertical-align: middle;
}
.inviteutsav-public-site .wpforms-container .wpforms-field-checkbox ul li label,
.inviteutsav-public-site .wpforms-container .wpforms-field-radio ul li label{ color: var(--ink); font-weight: 500; }

/* File upload */
.inviteutsav-public-site .wpforms-container .wpforms-file-upload-builder-button,
.inviteutsav-public-site .wpforms-container button.dz-button{
  font-family: var(--font-body); font-weight: 600;
  border: 1.5px dashed var(--line); border-radius: var(--r-sm);
  background: var(--cream); color: var(--plum-800);
}

/* Submit button carries real theme classes (btn btn-primary — see the
   form's "submit_class" setting), so its color/background still comes from
   those classes in the Buttons section above — this block only owns
   layout/shape/typography. Neutralizes WPForms' own base rule that forces
   the button to block/100% width (assets/css/frontend/modern/wpforms-full.min.css
   `.wpforms-submit{display:block;width:100%}`). */
.inviteutsav-public-site .wpforms-container .wpforms-page-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  width: auto;
  padding: 1rem 2rem;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: .98rem;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
  white-space: nowrap;
}
/* Final, non-overridable shape/layout for every WPForms submit button
   site-wide — !important on every property plus a selector strong enough
   (body .wpforms-container ...) to beat WPForms' own "Modern" markup
   style's --wpforms-button-* custom-property rule below (which chains
   several classes for higher specificity but carries no !important of its
   own) and any other plugin CSS. Color/background are deliberately not
   listed here — those still come from the button's own .btn.btn-primary
   classes, this only locks in shape/spacing/typography. */
.inviteutsav-public-site .wpforms-container button.wpforms-submit,
.inviteutsav-public-site .wpforms-container input.wpforms-submit{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .6em !important;
  padding: 1rem 2rem !important;
  border-radius: var(--r-pill) !important;
  font-weight: 700 !important;
  font-size: .98rem !important;
  border: 1px solid transparent !important;
  transition: transform var(--dur-fast) var(--ease-soft),
              box-shadow var(--dur-fast) var(--ease-soft),
              background var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft) !important;
  white-space: nowrap !important;
}
.inviteutsav-public-site .wpforms-container .wpforms-submit:disabled{ opacity:.6; box-shadow:none; transform:none; cursor:not-allowed; }

/* WPForms' "Modern" markup style (.wpforms-container-full) applies its own
   submit-button shape/sizing via --wpforms-button-* custom properties at
   higher specificity than the plain .wpforms-container override above —
   this matches that same selector list so our pill-button shape reliably
   wins, while intentionally still keeping WPForms' own configured
   background/text color variables (site styles already match the brand). */
.inviteutsav-public-site div.wpforms-container-full input[type=submit],
.inviteutsav-public-site div.wpforms-container-full button[type=submit],
.inviteutsav-public-site div.wpforms-container-full .wpforms-page-button,
.inviteutsav-public-site .wp-core-ui div.wpforms-container-full input[type=submit],
.inviteutsav-public-site .wp-core-ui div.wpforms-container-full button[type=submit],
.inviteutsav-public-site .wp-core-ui div.wpforms-container-full .wpforms-page-button{
  height: var(--wpforms-button-size-height);
  background-color: var(--wpforms-button-background-color-alt, var(--wpforms-button-background-color));
  border-radius: var(--wpforms-button-border-radius);
  border-style: var(--wpforms-button-border-style);
  border-color: var(--wpforms-button-border-color);
  border-width: var(--wpforms-button-border-size);
  box-shadow: none;
  color: var(--wpforms-button-text-color);
  padding: 0 var(--wpforms-button-size-padding-h);
  font-family: inherit;
  font-weight: 500;
  font-size: var(--wpforms-button-size-font-size);
  line-height: 100%;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  position: relative;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 1rem 2rem;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: .98rem;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
  white-space: nowrap;
}

/* Validation */
.inviteutsav-public-site .wpforms-container label.wpforms-error,
.inviteutsav-public-site .wpforms-container em.wpforms-error,
.inviteutsav-public-site .wpforms-container .wpforms-error{
  color: var(--rose-600); font-size:.85rem; font-weight:600; margin-top:.4rem; display:block;
}
.inviteutsav-public-site .wpforms-container input.wpforms-error,
.inviteutsav-public-site .wpforms-container select.wpforms-error,
.inviteutsav-public-site .wpforms-container textarea.wpforms-error{
  border-color: var(--rose-600) !important;
}
.inviteutsav-public-site .wpforms-container input.wpforms-error:focus,
.inviteutsav-public-site .wpforms-container select.wpforms-error:focus,
.inviteutsav-public-site .wpforms-container textarea.wpforms-error:focus{
  box-shadow: 0 0 0 4px rgba(200,27,76,.12);
}

/* Flatpickr calendar (see inc/forms.php + assets/js/date-picker.js) — a
   native <input type="date">'s popup is unstyleable browser/OS chrome, so
   the Event Date field is progressively enhanced with Flatpickr instead,
   themed here to match the rest of the site. */
.inviteutsav-public-site .wpforms-container [data-datepicker]{ cursor:pointer; background-color:var(--cream); }
.inviteutsav-public-site .flatpickr-calendar{
  font-family: var(--font-body);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}
.inviteutsav-public-site .flatpickr-calendar.arrowTop::before,
.inviteutsav-public-site .flatpickr-calendar.arrowTop::after{ border-bottom-color: var(--line-soft); }
.inviteutsav-public-site .flatpickr-months{ padding: var(--sp-2) var(--sp-2) 0; }
.inviteutsav-public-site .flatpickr-months .flatpickr-month{ color: var(--plum-800); fill: var(--plum-800); height: 40px; }
.inviteutsav-public-site .flatpickr-current-month{ font-family: var(--font-display); font-size: 1.1rem; padding: 0; }
.inviteutsav-public-site .flatpickr-current-month .flatpickr-monthDropdown-months,
.inviteutsav-public-site .flatpickr-current-month input.cur-year{ font-family: var(--font-body); font-weight: 600; color: var(--plum-800); }
.inviteutsav-public-site .flatpickr-months .flatpickr-prev-month,
.inviteutsav-public-site .flatpickr-months .flatpickr-next-month{
  color: var(--rose-500); fill: var(--rose-500);
  border-radius: 50%; transition: background var(--dur-fast) var(--ease-soft);
}
.inviteutsav-public-site .flatpickr-months .flatpickr-prev-month:hover,
.inviteutsav-public-site .flatpickr-months .flatpickr-next-month:hover{ background: var(--champagne); }
.inviteutsav-public-site .flatpickr-months .flatpickr-prev-month svg,
.inviteutsav-public-site .flatpickr-months .flatpickr-next-month svg{ fill: inherit; }
.inviteutsav-public-site .flatpickr-weekdays{ background: transparent; }
.inviteutsav-public-site span.flatpickr-weekday{
  font-family: var(--font-body); font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft);
}
.inviteutsav-public-site .flatpickr-day{ color: var(--ink); border-radius: var(--r-sm); }
.inviteutsav-public-site .flatpickr-day.inRange,
.inviteutsav-public-site .flatpickr-day:hover,
.inviteutsav-public-site .flatpickr-day:focus{ background: var(--champagne); border-color: var(--champagne); }
.inviteutsav-public-site .flatpickr-day.today{ border-color: var(--gold-400); }
.inviteutsav-public-site .flatpickr-day.selected,
.inviteutsav-public-site .flatpickr-day.selected:hover{
  background: var(--rose-500); border-color: var(--rose-500); color: var(--white);
}
.inviteutsav-public-site .flatpickr-day.flatpickr-disabled,
.inviteutsav-public-site .flatpickr-day.flatpickr-disabled:hover,
.inviteutsav-public-site .flatpickr-day.prevMonthDay,
.inviteutsav-public-site .flatpickr-day.nextMonthDay{ color: var(--charcoal-faint); }

/* Confirmation / success message */
.inviteutsav-public-site .wpforms-container .wpforms-confirmation-container{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--champagne);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
}

@media (max-width: 680px){
  .inviteutsav-public-site .wpforms-container .wpforms-submit,
.inviteutsav-public-site .wpforms-container .wpforms-page-button,
.inviteutsav-public-site .wpforms-container button[type=submit]{ width:100%; }
}

/* ---------------------------------------------------------------------- */
/* Auth (mobile + OTP login / signup)                                     */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .auth-section{ padding-block:var(--section-pad); }
.inviteutsav-public-site .auth-card{
  max-width:620px; margin-inline:auto;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-xl);
  padding:var(--sp-7) var(--sp-6); box-shadow:var(--shadow-md);
}
.inviteutsav-public-site .auth-mobile-row{ display:flex; gap:.6rem; }
.inviteutsav-public-site .auth-mobile-prefix{
  display:flex; align-items:center; padding:0 1rem; flex-shrink:0;
  border-radius:var(--r-sm); border:1.5px solid var(--line); background:var(--champagne);
  font-weight:700; color:var(--plum-800);
}
.inviteutsav-public-site .auth-mobile-row input{ flex:1; min-width:0; }
.inviteutsav-public-site .auth-otp-sent-to{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  font-size:.9rem; color:var(--ink-soft); margin-bottom:var(--sp-4);
}
.inviteutsav-public-site .auth-resend{ text-align:center; margin-top:var(--sp-4); font-size:.86rem; color:var(--ink-soft); }
.inviteutsav-public-site .auth-resend .btn-ghost:disabled{ opacity:.5; cursor:default; }
.inviteutsav-public-site .auth-resend .btn-ghost:disabled::after{ display:none; }
.inviteutsav-public-site .auth-error{ color:var(--rose-600); font-size:.86rem; margin-top:var(--sp-3); text-align:center; }
.inviteutsav-public-site .auth-error a{ color:var(--rose-600); font-weight:700; text-decoration:underline; }
/* Shared button loading spinner — used by auth.js's setLoading() so a
   disabled submit shows a spinner next to its own label ("Create
   Account", "Update Password"...) instead of just "…". */
.inviteutsav-public-site .btn-spinner{
  display:inline-block; width:15px; height:15px; margin-right:.55em; vertical-align:-2px;
  border-radius:50%; border:2px solid rgba(255,255,255,.45); border-top-color:#fff;
  animation:authBtnSpin .7s linear infinite;
}
.inviteutsav-public-site .btn-ghost .btn-spinner,
.inviteutsav-public-site .btn-secondary .btn-spinner{ border-color:rgba(0,0,0,.2); border-top-color:var(--ink-soft); }
@keyframes authBtnSpin{ to{ transform:rotate(360deg); } }
.inviteutsav-public-site .auth-success{ text-align:center; font-size:1.1rem; color:var(--plum-800); }
.inviteutsav-public-site .auth-step--success{ text-align:center; padding-block:var(--sp-3); }
.inviteutsav-public-site .auth-success__title{ font-family:var(--font-display); font-size:1.4rem; color:var(--plum-800); margin-bottom:var(--sp-3); }
.inviteutsav-public-site #authStepEmailSent{ text-align:center; padding-block:var(--sp-3); }
.inviteutsav-public-site #authStepEmailSent .auth-step__icon{ font-size:2.4rem; margin-bottom:var(--sp-3); line-height:1; }
.inviteutsav-public-site #authStepEmailSent p:not(.auth-resend){ color:var(--plum-800); font-size:1.02rem; line-height:1.6; max-width:38ch; margin-inline:auto; }

/* In-page Login/Signup modal (template-parts/auth-modal.php) — same
   .auth-tabs/.auth-step/.field internals page-login.php's own full-page
   form already uses, just wrapped in an overlay instead of a page section,
   so a guest never has to leave the editor/checkout page to log in. */
.inviteutsav-public-site .auth-modal{
  position:fixed; inset:0; z-index:10001; display:flex; align-items:center; justify-content:center;
  padding:var(--sp-4); opacity:0; visibility:hidden; transition:opacity .2s ease;
}
.inviteutsav-public-site .auth-modal.is-open{ opacity:1; visibility:visible; }
.inviteutsav-public-site .auth-modal__backdrop{ position:absolute; inset:0; background:rgba(20,6,14,.7); }
.inviteutsav-public-site .auth-modal__panel{
  position:relative; z-index:1; width:100%; max-width:460px; max-height:90vh; overflow-y:auto;
  background:var(--surface); border-radius:var(--r-xl); padding:var(--sp-6) var(--sp-5); box-shadow:var(--shadow-md);
}
.inviteutsav-public-site .auth-modal__close{
  position:absolute; top:var(--sp-3); right:var(--sp-3);
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line-soft);
  background:var(--champagne); color:var(--plum-800); font-size:1.2rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.inviteutsav-public-site .auth-modal__title{ font-family:var(--font-display); font-size:1.3rem; color:var(--plum-800); text-align:center; margin:0 0 .3rem; }
.inviteutsav-public-site .auth-modal__intro{ text-align:center; color:var(--ink-soft); font-size:.88rem; margin-bottom:var(--sp-5); }
.inviteutsav-public-site .auth-step__title{ font-family:var(--font-display); font-size:1.1rem; color:var(--plum-800); text-align:center; margin:0 0 .4rem; }
.inviteutsav-public-site .auth-step__lede{ text-align:center; color:var(--ink-soft); font-size:.88rem; margin:0 0 var(--sp-4); }
.inviteutsav-public-site .auth-modal__forgot{ text-align:right; font-size:.82rem; margin:-.5rem 0 var(--sp-4); }
.inviteutsav-public-site .auth-modal__forgot a{ color:var(--plum-800); font-weight:600; }

/* Log In panel's Remember Me / Forgot Password row (page-login.php,
   template-parts/auth-modal.php) — Remember Me pinned left, Forgot
   Password pinned right; wraps to two stacked, still-readable lines on a
   narrow phone instead of squeezing both onto one. */
.inviteutsav-public-site .auth-login-row{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:.5rem; margin:-.3rem 0 20px;
  font-size:.85rem;
}
.inviteutsav-public-site .auth-login-row a,
.inviteutsav-public-site .auth-login-row .btn-ghost{ color:var(--plum-800); font-weight:600; }
.inviteutsav-public-site .auth-remember{ display:inline-flex; align-items:center; gap:.5rem; color:var(--ink-soft); cursor:pointer; }
.inviteutsav-public-site .auth-remember input{ width:16px; height:16px; accent-color:var(--rose-500); cursor:pointer; }
.inviteutsav-public-site .auth-success__msg{ color:var(--charcoal-faint); max-width:42ch; margin:0 auto var(--sp-4); line-height:1.6; }
.inviteutsav-public-site #authOtp{ letter-spacing:.5em; text-align:center; font-size:1.4rem; font-family:var(--font-display); }

/* ---------------------------------------------------------------------- */
/* Customer dashboard                                                     */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .dashboard-banner__inner{
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap;
  text-align:left;
}
.inviteutsav-public-site .dashboard-banner__inner .page-banner__ctas{ margin-top:0; justify-content:flex-end; }
.inviteutsav-public-site .dashboard-section{ padding-block:var(--section-pad); }
.inviteutsav-public-site .dashboard-toolbar{ margin-bottom:var(--sp-6); }

.inviteutsav-public-site .recovery-banner{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap;
  background:linear-gradient(135deg, var(--gold-50, #fdf6e6), var(--surface));
  border:1px solid var(--gold-200, #f0dca3); border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-6); margin-bottom:var(--sp-6);
}
.inviteutsav-public-site .recovery-banner h3{ font-size:1.15rem; margin-top:.2rem; }
.inviteutsav-public-site .recovery-banner .btn{ flex-shrink:0; }
.inviteutsav-public-site .invitation-card__edited{ font-size:.8rem; color:var(--ink-soft); font-style:italic; }

@media (max-width: 680px){
  .inviteutsav-public-site .recovery-banner{ flex-direction:column; align-items:stretch; text-align:center; }
}

/* Full-width row layout (My Account redesign) — cover image left, info + actions right */
.inviteutsav-public-site .invitation-list{ display:flex; flex-direction:column; gap:var(--sp-4); }
.inviteutsav-public-site .invitation-row{
  display:flex; gap:var(--sp-5); background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:var(--sp-5); transition:transform var(--dur-mid) var(--ease-premium), box-shadow var(--dur-mid) var(--ease-premium);
}
.inviteutsav-public-site .invitation-row:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.inviteutsav-public-site .invitation-row__cover{
  flex-shrink:0; width:140px; border-radius:var(--r-md); overflow:hidden;
  background:transparent; display:flex; align-items:center; justify-content:center;
  border:1px solid #f0e6d8; aspect-ratio:4/5;
}
.inviteutsav-public-site .invitation-row__cover img{ width:100%; object-fit:cover; display:block; aspect-ratio:4/5; height:auto; }
.inviteutsav-public-site .invitation-row__cover-fallback{ font-size:2.4rem; }
.inviteutsav-public-site .invitation-row__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.5rem; }
.inviteutsav-public-site .invitation-row__top{ display:flex; gap:.5rem; flex-wrap:wrap; }
.inviteutsav-public-site .invitation-row__title-row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); }
.inviteutsav-public-site .invitation-row__price{ flex-shrink:0; font-family:var(--font-display); font-weight:600; color:var(--wine-600); }
.inviteutsav-public-site .invitation-row__meta{ font-size:.88rem; color:var(--ink-soft); line-height:1.6; display:flex; flex-wrap:wrap; gap:.3rem .8rem; }
.inviteutsav-public-site .invitation-row__meta-item{ display:inline-flex; align-items:center; gap:.35em; }
.inviteutsav-public-site .invitation-row__meta-item svg{ width:14px; height:14px; flex-shrink:0; opacity:.7; }
.inviteutsav-public-site .invitation-row__date{ font-weight:600; }
.inviteutsav-public-site .invitation-row__url-wrap{ position:relative; }
.inviteutsav-public-site a.invitation-row__url{ font-weight:600; color:var(--wine-600); text-decoration:none; }
.inviteutsav-public-site a.invitation-row__url:hover{ text-decoration:underline; }
.inviteutsav-public-site span.invitation-row__url{ font-weight:600; color:var(--wine-600); }
.inviteutsav-public-site .invitation-row__url-copy{
  display:inline-flex; align-items:center; justify-content:center; padding:0; margin-left:.15rem;
  width:20px; height:20px; border:none; background:none; color:var(--ink-soft); cursor:pointer;
  border-radius:var(--r-sm); flex-shrink:0; transition:color var(--dur-fast) var(--ease-premium), background var(--dur-fast) var(--ease-premium);
}
.inviteutsav-public-site .invitation-row__url-copy:hover{ color:var(--wine-600); background:var(--wine-50,#faf1f6); }
.inviteutsav-public-site .invitation-row__url-copy svg{ width:14px; height:14px; opacity:1; }
.inviteutsav-public-site .invitation-row__url-copy-check{ color:var(--success-600, #1a8754); }
.inviteutsav-public-site .invitation-row__url-copy.is-copied .invitation-row__url-copy-icon{ display:none; }
.inviteutsav-public-site .invitation-row__url-copy:not(.is-copied) .invitation-row__url-copy-check{ display:none; }
.inviteutsav-public-site .invitation-card__actions{ display:flex; gap:.6rem; padding-top:.2rem; flex-wrap:wrap; align-items:center; margin:0; }
.inviteutsav-public-site .invitation-card__actions .btn{ padding:0.2rem 1rem; font-size:.86rem; font-weight:normal; }
.inviteutsav-public-site .invitation-card__remove-draft{ color:var(--rose-600); }

@media (max-width: 640px){
  .inviteutsav-public-site .invitation-row{ flex-direction:column; }
  .inviteutsav-public-site .invitation-row__cover{ width:100%; }
  .inviteutsav-public-site .dashboard-banner__inner{ text-align:center; justify-content:center; }
  .inviteutsav-public-site .dashboard-banner__inner .page-banner__ctas{ justify-content:center; }
}

/* Generic confirm modal (Remove Draft) */
.inviteutsav-public-site .confirm-modal{
  position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .2s ease;
}
.inviteutsav-public-site .confirm-modal.is-open{ opacity:1; visibility:visible; }
.inviteutsav-public-site .confirm-modal__backdrop{ position:absolute; inset:0; background:rgba(20,6,14,.6); }
.inviteutsav-public-site .confirm-modal__panel{
  position:relative; z-index:1; background:var(--surface); border-radius:var(--r-lg); padding:var(--sp-6);
  max-width:420px; width:92vw; text-align:center;
}
.inviteutsav-public-site .confirm-modal__actions{ display:flex; gap:var(--sp-3); justify-content:center; margin-top:var(--sp-4); }

/* Payment success screen */
.inviteutsav-public-site .success-screen{ position:relative; padding-block:calc(var(--section-pad) * 1.4); overflow:hidden; }
.inviteutsav-public-site .success-screen__inner{ max-width:560px; text-align:center; position:relative; z-index:1; }
.inviteutsav-public-site .success-screen__icon{ font-size:3rem; margin-bottom:var(--sp-3); }
.inviteutsav-public-site .success-screen__icon--error{ color:var(--rose-600); }
.inviteutsav-public-site .success-screen__lead{ font-size:1.1rem; color:var(--ink-soft); margin-bottom:var(--sp-5); }
.inviteutsav-public-site .success-screen__url-card{
  background:var(--champagne); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5); margin-bottom:var(--sp-5); word-break:break-all;
}
.inviteutsav-public-site .success-screen__url{ font-weight:700; font-size:1.15rem; color:var(--wine-600); }
.inviteutsav-public-site .success-screen__actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:center; }
.inviteutsav-public-site .success-screen__toast{
  margin-top:var(--sp-3); font-weight:600; color:var(--gold-500); opacity:0; transition:opacity .2s ease;
}
.inviteutsav-public-site .success-screen__toast:not([hidden]){ opacity:1; }
.inviteutsav-public-site .success-screen__footer-link{ margin-top:var(--sp-6); }
.inviteutsav-public-site #successConfetti,
.inviteutsav-public-site #checkoutConfetti{ position:fixed; inset:0; z-index:5; pointer-events:none; }

@media (max-width:640px){
  .inviteutsav-public-site .success-screen__actions{ flex-direction:column; }
  .inviteutsav-public-site .success-screen__actions .btn{ width:100%; }
}

/* ---------------------------------------------------------------------- */
/* Invitation editor                                                      */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .editor-section{ padding-block:var(--section-pad); }
.inviteutsav-public-site .editor-layout{ display:grid; grid-template-columns:minmax(0,1fr); max-width:760px; margin-inline:auto; gap:var(--sp-7); align-items:start; }
/* Grid items get an implicit min-width:auto, so without this a single
   unshrinkable descendant (e.g. a flex row that won't wrap) can blow the
   whole column out past the 1fr track and overflow the page horizontally. */
.inviteutsav-public-site .editor-layout > *{ min-width:0; }

.inviteutsav-public-site .editor-save-row{ display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap; }
.inviteutsav-public-site .editor-save-row .btn{ flex:1; }
.inviteutsav-public-site #editorPreviewHint{ text-align:center; margin-top:var(--sp-2); }

/* Preview modal — Desktop / Tablet / Mobile viewport switcher */
.inviteutsav-public-site .editor-preview-modal{
  position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .2s ease;
}
.inviteutsav-public-site .editor-preview-modal.is-open{ opacity:1; visibility:visible; }
.inviteutsav-public-site .editor-preview-modal__backdrop{ position:absolute; inset:0; background:rgba(20,6,14,.9); }
.inviteutsav-public-site .editor-preview-modal__panel{
  position:relative; z-index:1; background:transparent;
  width:min(96vw, 1240px); max-height:min(92vh, 900px); display:flex; flex-direction:column; justify-content:center; overflow:hidden;
}
.inviteutsav-public-site .editor-preview-modal__toolbar{
  display:flex; align-items:center; justify-content:center; gap:var(--sp-3); flex-shrink:0; padding:0;
}
/* View Demo popup only — the editor's own real-invitation Preview modal
   has no title/full-preview row, so these two stay out of its toolbar
   markup entirely and only ever appear when JS (main.js) adds them. */
.inviteutsav-public-site .demo-modal__title{
  color:#fff; font-size:.85rem; font-weight:700; max-width:30vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.inviteutsav-public-site .demo-modal__external{
  display:flex; align-items:center; gap:.35rem; padding:.45rem .7rem; border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1); color:#fff; cursor:pointer; font-size:.8rem; font-weight:600;
}
.inviteutsav-public-site .demo-modal__external svg{ width:16px; height:16px; }
.inviteutsav-public-site .demo-modal__external span{ display:none; }
@media (min-width:640px){ .inviteutsav-public-site .demo-modal__external span{ display:inline; } }
.inviteutsav-public-site .demo-modal__footer-actions{ display:flex; align-items:center; gap:.7rem; }
.inviteutsav-public-site .demo-modal__whatsapp{
  display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex-shrink:0;
  border-radius:50%; background:#25D366; color:#fff;
}
.inviteutsav-public-site .demo-modal__whatsapp:hover{ background:#1ebc5a; }
/* A single-tab View Demo popup hides this toolbar entirely via the
   [hidden] attribute (assets/js/main.js openModal()) — needed because the
   rule above's own display:flex otherwise wins over the browser's default
   [hidden]{display:none} at equal specificity. */
.inviteutsav-public-site .editor-preview-modal__toolbar[hidden]{ display:none; }
.inviteutsav-public-site .editor-preview-modal__devices{ display:flex; gap:.5rem; }
.inviteutsav-public-site .editor-preview-device{
  display:flex; align-items:center; gap:.4rem; padding:.45rem .8rem; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--champagne); color:var(--plum-800); cursor:pointer; font-size:.8rem; font-weight:600;
}
.inviteutsav-public-site .editor-preview-device svg{ width:18px; height:18px; }
.inviteutsav-public-site .editor-preview-device.is-active{ background:var(--gold-400); color:#fff; border-color:var(--gold-400); }
.inviteutsav-public-site .editor-preview-device span{ display:none; }
@media (min-width:640px){ .inviteutsav-public-site .editor-preview-device span{ display:inline; } }
.inviteutsav-public-site .editor-preview-modal__close{
  position:fixed; top:var(--sp-3); right:var(--sp-3); z-index:2;
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.12); color:#fff; font-size:1.3rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background var(--dur-fast) var(--ease-soft);
}
.inviteutsav-public-site .editor-preview-modal__close:hover{ background:rgba(255,255,255,.24); }
.inviteutsav-public-site .editor-preview-modal__frame-wrap{
  /* overflow:visible, not auto — the device-frame's own iframe already has
     its own internal scroll for the real invitation page; this wrapper
     scrolling too just meant two nested scrollbars for the same content. */
  display:flex; align-items:center; justify-content:center; background:transparent; overflow:visible; padding:var(--sp-2);
}
/* The frame sizes itself from its own real aspect-ratio (never stretched to
   fill leftover flex space) so the popup shrink-wraps to exactly the
   content's footprint — no dead whitespace above/below on any device.
   Setting both height and max-width lets the browser fall back to width
   when height would overflow, recomputing height from the ratio (the same
   trick as object-fit:contain) so the frame never breaks its own shape. */
.inviteutsav-public-site .editor-preview-modal__frame-wrap .device-frame--tablet{ height:min(70vh, 640px); width:auto; max-width:100%; }
.inviteutsav-public-site .editor-preview-modal__frame-wrap .device-frame--mobile{ height:min(70vh, 640px); width:auto; max-width:100%; }
.inviteutsav-public-site .editor-preview-modal__frame-wrap .device-frame--laptop{ height:min(78vh, 760px); width:auto; max-width:94vw; }
.inviteutsav-public-site .editor-preview-modal__footer{
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); flex-shrink:0; padding:0;
}
.inviteutsav-public-site .editor-preview-modal__footer #editorPreviewBack{ color:#fff; }
.inviteutsav-public-site .editor-preview-modal p{ margin:5px 0; color:#fff; font-size:14px; }
/* .editor-preview-status sits inside .device-frame__screen's white
   background (assets/js/invitation-editor.js's loading/error states), not
   the dark modal chrome the rule above is for — same-specificity override
   placed here (after design-system.css's own .editor-preview-status p
   rule) so it actually wins the cascade instead of inheriting white-on-white. */
.inviteutsav-public-site .editor-preview-status p{ color:var(--ink-soft,#6b6b6b); }
.inviteutsav-public-site .editor-preview-status--error p{ color:var(--rose-600); }
@media (max-width:640px){
  .inviteutsav-public-site .editor-preview-modal__panel{ width:100vw; height:100vh; }
  .inviteutsav-public-site .editor-preview-modal__frame-wrap{ padding:var(--sp-2); }
}

/* Temporary-preview notice + countdown + "Make it Live" CTA — sits in the
   modal's own dark chrome, outside the device frame entirely, so it never
   touches (or is styled by) whatever colors/fonts the invitation itself
   uses. */
.inviteutsav-public-site .editor-preview-modal__notice{
  text-align:center; flex-shrink:0; padding:0 var(--sp-4) 0;
}
.inviteutsav-public-site .editor-preview-modal__eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-400); margin:0 0 .3rem;
}
.inviteutsav-public-site .editor-preview-modal__notice p{ font-size:.86rem; }
.inviteutsav-public-site #editorPreviewCountdown{
  font-variant-numeric:tabular-nums; color:var(--gold-400); font-weight:700;
}
.inviteutsav-public-site .editor-preview-modal__cta{ font-weight:700; margin-top:.4rem !important; }

.inviteutsav-public-site .editor-preview-modal__footer-guest{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.inviteutsav-public-site .editor-preview-modal__footer-guest p{ font-size:.82rem; max-width:340px; text-align:center; }

/* Expired state replaces the iframe inside the same white device screen —
   never inside the invitation's own markup. */
.inviteutsav-public-site .editor-preview-expired{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--sp-3); padding:var(--sp-4); text-align:center; background:#fff;
}
.inviteutsav-public-site .editor-preview-expired p{ color:var(--ink-soft,#6b6b6b) !important; font-size:.9rem; }

.inviteutsav-public-site .editor-card{
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:var(--sp-6); margin-bottom:var(--sp-5);
}
.inviteutsav-public-site .editor-card.has-error{ border-color:#c0392b; box-shadow:0 0 0 1px #c0392b; }
.inviteutsav-public-site .editor-card h3{ font-size:1.2rem; margin-bottom:var(--sp-4); }
.inviteutsav-public-site .editor-card .field{ margin-bottom:var(--sp-3); }
.inviteutsav-public-site .editor-card p{ color:#5e5858; font-weight:normal; }
.inviteutsav-public-site .editor-checkbox-field{ display:flex; align-items:center; gap:.5rem; font-weight:600; cursor:pointer; }
.inviteutsav-public-site .editor-checkbox-field input{ width:auto; margin:0; }

/* Small "i" info icon + tooltip/popover (inviteutsav_info_tip() in
   inc/template-tags.php) — stands in for a long-form .description
   paragraph beside a field/section label. Shown on :hover (desktop, via
   the pointer:fine gate below) OR while JS has added .is-open
   (assets/js/main.js toggles this on click/tap, and on outside-click/
   scroll/Escape to close) — that OR covers "hover + click on desktop, tap
   on mobile" without any device-detection branching.

   The bubble is position:fixed with its top/left set in JS
   (positionInfoTipBubble() in main.js), not centered via CSS transform —
   an editor field can sit inside a scrollable modal or a card with
   overflow rules, so a purely CSS-positioned absolute bubble can get
   silently clipped or pushed off-screen with no way to react to how much
   room is actually left. Fixed positioning is measured against the real
   viewport and recalculated (flipped above/below, clamped left/right)
   every time it opens, so it's mobile/tablet/desktop-safe by construction
   instead of by breakpoint guesswork. It closes on scroll (rather than
   trying to track scroll position) since fixed coordinates would
   otherwise visibly detach from the icon the moment the page moves. */
.inviteutsav-public-site .info-tip{ position:relative; display:inline-flex; vertical-align:middle; margin-left:.35em; }
.inviteutsav-public-site .info-tip__trigger{
  width:18px; height:18px; border-radius:50%; padding:0;
  background:var(--line-soft); color:var(--ink-soft);
  font:italic 700 12px/18px var(--font-display, serif); text-align:center;
  border:none; cursor:pointer; flex:none;
}
.inviteutsav-public-site .info-tip__trigger:hover,
.inviteutsav-public-site .info-tip__trigger:focus-visible{ background:var(--accent); color:#fff; }
.inviteutsav-public-site .info-tip__bubble{
  position:fixed; z-index:9999; top:0; left:0;
  width:max-content; max-width:min(260px, calc(100vw - 20px)); padding:.6rem .75rem;
  background:var(--plum-800); color:#fff; font-size:.8rem; font-weight:normal; line-height:1.4; text-align:left;
  border-radius:var(--r-md); box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(4px);
  transition:opacity var(--dur-fast, .2s) ease, transform var(--dur-fast, .2s) ease;
}
.inviteutsav-public-site .info-tip__bubble::after{
  content:""; position:absolute; top:100%; left:var(--info-tip-arrow-left, 50%); transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--plum-800);
}
/* Flipped below the icon when there isn't enough room above it — the
   arrow moves from bottom-pointing-down to top-pointing-up to match. */
.inviteutsav-public-site .info-tip__bubble.info-tip__bubble--below::after{
  top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:var(--plum-800);
}
.inviteutsav-public-site .info-tip__bubble.is-shown{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }

/* Plan-gated feature not included at all on this invitation's plan — shown
   in place of the feature's normal fields (Accommodation, Journey,
   Pre-Wedding Video) with a direct upgrade path, per the pricing-plan
   section's "upgrade experience" requirement: never a silent dead end. */
.inviteutsav-public-site .editor-upgrade-note{
  background:var(--champagne); border:1px dashed var(--gold-400); border-radius:var(--r-md);
  padding:var(--sp-4); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap;
}
.inviteutsav-public-site .editor-upgrade-note p{ margin:0; font-weight:600; color:var(--plum-800) !important; }

.inviteutsav-public-site .editor-games-master{ margin-bottom:var(--sp-3); padding-bottom:var(--sp-3); border-bottom:1px solid var(--line-soft); }
.inviteutsav-public-site .editor-games-list--interactive{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2); }

/* Locked font/music picker options — visible (so a plan downgrade never
   makes an already-chosen option disappear) but visually muted and
   non-interactive; invitation-editor.js blocks the click and shows the
   same upgrade note instead of silently letting the pick through. */
.inviteutsav-public-site .editor-font-option.is-locked,
.inviteutsav-public-site .editor-music-option.is-locked{ opacity:.45; cursor:not-allowed; }
.inviteutsav-public-site .editor-font-option.is-locked:hover{ background:transparent; }

/* Locked-option click feedback — brief toast, bottom-center, dismisses
   itself; see showUpgradeToast() in invitation-editor.js. */
.inviteutsav-public-site .editor-upgrade-toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%, 16px);
  display:flex; align-items:center; gap:var(--sp-3);
  background:var(--plum-900); color:#fff; border-radius:var(--r-pill);
  padding:.7rem .7rem .7rem 1.1rem; box-shadow:var(--shadow-md);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  z-index:9999; max-width:calc(100vw - 32px); flex-wrap:wrap;
}
.inviteutsav-public-site .editor-upgrade-toast.is-visible{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.inviteutsav-public-site .editor-upgrade-toast span{ font-size:.86rem; }
.inviteutsav-public-site .editor-upgrade-toast .btn{ white-space:nowrap; }

/* Required-field validation (page-invitation-editor.php + invitation-editor.js) */
.inviteutsav-public-site .field-required-mark{ color:#c0392b; }
.inviteutsav-public-site .field-error{ display:none; color:#c0392b; font-size:.82rem; font-weight:600; margin-top:.35rem; }
.inviteutsav-public-site .field.has-error input,
.inviteutsav-public-site .field.has-error select,
.inviteutsav-public-site .field.has-error textarea,
.inviteutsav-public-site .field.has-error .editor-font-trigger,
.inviteutsav-public-site .field.has-error .editor-icon-picker-trigger{ border-color:#c0392b !important; box-shadow:0 0 0 1px #c0392b; }
.inviteutsav-public-site .field.has-error .field-error{ display:block; }

.inviteutsav-public-site .editor-event-row{
  display:grid; grid-template-columns:1fr 1fr; gap:0 var(--sp-3);
  padding:var(--sp-4); margin-bottom:var(--sp-4); background:var(--champagne); border-radius:var(--r-md);
  outline:2px solid transparent; outline-offset:2px; transition:outline-color .15s;
}
.inviteutsav-public-site .editor-event-row.has-error{ outline-color:#c0392b; }
.inviteutsav-public-site .editor-venue-reuse__options{ display:flex; flex-wrap:wrap; gap:.5rem; }
.inviteutsav-public-site .editor-suggestion-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.inviteutsav-public-site .editor-venue-reuse-btn{ font-size:.82rem; padding:.35rem .8rem; border:1px solid var(--line-soft); border-radius:var(--r-pill); background:#fff; }
.inviteutsav-public-site .editor-venue-reuse-btn:hover{ border-color:var(--rose-500); color:var(--rose-500); }
/* Not scoped inside a single .field wrapper (it covers the whole repeater),
   so it needs its own display toggle rather than the .field.has-error one. */
.inviteutsav-public-site #editorEventsRequiredError:not([hidden]){ display:block; }
.inviteutsav-public-site .editor-event-row .field--full{ grid-column:1 / -1; }
.inviteutsav-public-site .editor-event-remove{ grid-column:1 / -1; text-align:left; color:var(--rose-600); background:transparent; border:none; }

/* Our Journey repeater */
.inviteutsav-public-site .editor-journey-row__actions{ grid-column:1 / -1; display:flex; gap:var(--sp-4); flex-wrap:wrap; }
.inviteutsav-public-site .editor-journey-move-up,
.inviteutsav-public-site .editor-journey-move-down{ background:transparent; border:none; color:var(--plum-800); }
.inviteutsav-public-site .editor-journey-move-up:disabled,
.inviteutsav-public-site .editor-journey-move-down:disabled{ opacity:.35; cursor:default; }
.inviteutsav-public-site .editor-journey-remove{ background:transparent; border:none; color:var(--rose-600); }

/* Select-with-custom-option (e.g. Blessing Text) */
.inviteutsav-public-site .editor-select-custom{ margin-bottom:var(--sp-2); }

/* Icon picker trigger + modal (e.g. Blessing Icon) */
.inviteutsav-public-site .editor-icon-picker-trigger{
  display:flex; align-items:center; gap:var(--sp-3); padding:.6rem var(--sp-4);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); cursor:pointer;
}
.inviteutsav-public-site .editor-icon-picker-trigger img{ width:36px; height:36px; object-fit:contain; }
.inviteutsav-public-site .editor-icon-picker-trigger span{ font-weight:600; color:var(--plum-800); }

.inviteutsav-public-site .editor-icon-modal{
  position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .2s ease;
}
.inviteutsav-public-site .editor-icon-modal.is-open{ opacity:1; visibility:visible; }
.inviteutsav-public-site .editor-icon-modal__backdrop{ position:absolute; inset:0; background:rgba(30,10,20,.55); }
.inviteutsav-public-site .editor-icon-modal__panel{
  position:relative; z-index:1; background:var(--surface); border-radius:var(--r-lg);
  padding:var(--sp-4); max-width:720px; width:92vw; max-height:82vh; overflow-y:hidden;
  display:flex; flex-direction:column;
  transform:scale(.96); transition:transform .2s ease;
}
.inviteutsav-public-site .editor-icon-modal.is-open .editor-icon-modal__panel{ transform:scale(1); }
.inviteutsav-public-site .editor-icon-modal__close{
  position:absolute; top:var(--sp-3); right:var(--sp-3); width:32px; height:32px; border-radius:50%;
  border:none; background:var(--champagne); font-size:1.2rem; line-height:1; cursor:pointer;
}
.inviteutsav-public-site .editor-icon-modal__panel h3{ margin-bottom:var(--sp-4); flex-shrink:0; }
/* All .editor-icon-category blocks live in this one scrollable parent so
   only the icon list scrolls — the modal panel itself (heading, close
   button) stays fixed and never grows past max-height:82vh. flex:1 +
   min-height:0 is what lets a flex child actually shrink to scroll instead
   of stretching the panel to fit its content. */
.inviteutsav-public-site .editor-icon-categories{ flex:1; min-height:0; overflow-y:auto; padding-right:var(--sp-2); }
.inviteutsav-public-site .editor-icon-category{ margin-bottom:var(--sp-5); }
.inviteutsav-public-site .editor-icon-category__title{
  font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--plum-800); margin-bottom:var(--sp-3);
}
.inviteutsav-public-site .editor-icon-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:var(--sp-2); }
.inviteutsav-public-site .editor-icon-option{
  display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:var(--sp-2);
  background:var(--champagne); border:2px solid transparent; border-radius:var(--r-md); cursor:pointer; text-align:center;
}
.inviteutsav-public-site .editor-icon-option:hover{ border-color:var(--gold-500); }
.inviteutsav-public-site .editor-icon-option img{ width:70px; height:70px; object-fit:contain; }
.inviteutsav-public-site .editor-icon-option span{ font-size:.78rem; color:var(--plum-800); }
.inviteutsav-public-site .editor-icon-upload{ border-top:1px solid var(--line-soft); padding-top:var(--sp-4); }

/* Font picker (Bride & Groom Name Font) */
.inviteutsav-public-site .editor-font-trigger{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem; width:100%;
  padding:.9rem 1.1rem; border:1px solid var(--line-soft); border-radius:var(--r-md);
  background:var(--surface); cursor:pointer; text-align:left;
}
.inviteutsav-public-site .editor-font-trigger__sample{ display:block; font-size:1.3rem; color:var(--plum-800); line-height:1.3; }
.inviteutsav-public-site .editor-font-trigger__name{ display:block; font-size:.78rem; color:var(--ink-soft,#6b6b6b); margin-top:.15rem; }
.inviteutsav-public-site .editor-font-trigger__chevron{ flex-shrink:0; color:var(--plum-800); }

.inviteutsav-public-site .font-picker-modal{
  position:fixed; inset:0; z-index:400;
  display:flex; align-items:center; justify-content:center; padding:2rem 1rem;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-mid) var(--ease-soft), visibility var(--dur-mid);
}
.inviteutsav-public-site .font-picker-modal.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.inviteutsav-public-site .font-picker-modal__backdrop{ position:absolute; inset:0; background:rgba(42,1,31,.78); backdrop-filter:blur(6px); }
.inviteutsav-public-site .font-picker-modal__panel{
  position:relative; z-index:1; width:100%; max-width:640px; max-height:85vh;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg,#fff); border-radius:var(--r-xl,20px);
  transform:scale(.94) translateY(10px);
  transition:transform var(--dur-mid) var(--ease-premium);
}
.inviteutsav-public-site .font-picker-modal.is-open .font-picker-modal__panel{ transform:scale(1) translateY(0); }
.inviteutsav-public-site .font-picker-modal__head{ display:flex; align-items:center; justify-content:space-between; padding:1.4rem 1.6rem 0; flex-shrink:0; }
.inviteutsav-public-site .font-picker-modal__head h3{ margin:0; }
.inviteutsav-public-site .font-picker-modal__close{
  width:36px; height:36px; border-radius:50%; background:var(--bg-alt,rgba(0,0,0,.06)); color:var(--ink,#2a011f); border:none;
  font-size:1.3rem; line-height:1; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.inviteutsav-public-site .font-picker-modal__close:hover{ background:rgba(0,0,0,.12); }
.inviteutsav-public-site .font-picker-modal__search{
  margin:1rem 1.6rem 0; padding:.75rem 1rem; border:1px solid var(--line-soft); border-radius:var(--r-md);
  width:calc(100% - 3.2rem); flex-shrink:0; font-size:.95rem;
}
.inviteutsav-public-site .font-picker-modal__scroll{ overflow-y:auto; padding:1rem 1.6rem 1.6rem; }
.inviteutsav-public-site .font-picker-modal__category{ font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft,#6b6b6b); margin:1.3rem 0 .6rem; font-weight:700; }
.inviteutsav-public-site .font-picker-modal__category:first-of-type{ margin-top:0; }
.inviteutsav-public-site .font-picker-modal__empty{ text-align:center; color:var(--ink-soft,#6b6b6b); padding:2rem 0; }

.inviteutsav-public-site .editor-font-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--sp-3); }
.inviteutsav-public-site .editor-font-option{
  display:flex; flex-direction:column; align-items:flex-start; gap:.3rem; padding:var(--sp-3);
  background:var(--champagne); border:2px solid transparent; border-radius:var(--r-md); cursor:pointer; text-align:left;
  font-size:.8rem; color:var(--plum-800); font-weight:normal; font-family:var(--font-body);
  min-height:48px; justify-content:center;
}
.inviteutsav-public-site .editor-font-option.is-selected{ border-color:var(--gold-500); background:var(--surface); }
.inviteutsav-public-site .editor-font-option__sample{ font-size:1.3rem; font-weight:400; color:var(--plum-800); line-height:1.3; }
.inviteutsav-public-site .editor-font-option__name{ font-size:.78rem; color:var(--ink-soft,#6b6b6b); }
.inviteutsav-public-site .editor-font-option[hidden]{ display:none; }

/* Music picker (Background Music) */
.inviteutsav-public-site .editor-music-list{ display:flex; flex-direction:column; gap:.5rem; }
.inviteutsav-public-site .editor-music-option{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:.7rem var(--sp-4); background:var(--champagne); border:2px solid transparent; border-radius:var(--r-md);
}
.inviteutsav-public-site .editor-music-option.is-selected{ border-color:var(--gold-500); background:var(--surface); }
.inviteutsav-public-site .editor-music-select{ background:transparent; border:none; text-align:left; flex:1; cursor:pointer; font-weight:600; color:var(--plum-800); }
.inviteutsav-public-site .editor-music-selected-badge{ font-size:.78rem; font-weight:700; color:#1f9d6b; white-space:nowrap; flex-shrink:0; }
.inviteutsav-public-site .editor-music-preview-btn{
  width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:var(--surface); cursor:pointer; flex-shrink:0;
}
/* The disclaimer below needs its own line under the file-choose button —
   this option row is otherwise a single-line flex row like every other
   music option. */
.inviteutsav-public-site .editor-music-option--upload{ flex-wrap:wrap; }
.inviteutsav-public-site .editor-copyright-note{
  flex-basis:100%; margin:.5rem 0 0; padding:.5rem .7rem;
  background:var(--champagne); border-left:3px solid var(--gold-400); border-radius:0 var(--r-sm, 6px) var(--r-sm, 6px) 0;
  font-size:.74rem; line-height:1.45; color:var(--ink-soft);
}
.inviteutsav-public-site .editor-copyright-note strong{ color:var(--plum-800); }

/* Accommodation / Stay Details repeater, and Venue / Event Image widgets —
   remove button styled and positioned exactly like the Gallery's (small ×
   at the top corner of the thumbnail), not a separate text button. */
.inviteutsav-public-site .editor-accommodation-image{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.inviteutsav-public-site .editor-image-preview-wrap{ position:relative; display:inline-block; }
.inviteutsav-public-site .editor-image-preview-wrap.is-default .editor-accommodation-image__preview{ border-style:dashed; opacity:.85; }
.inviteutsav-public-site .editor-image-preview-wrap.is-default::after{
  content:"Default"; position:absolute; bottom:4px; left:4px; z-index:1;
  background:rgba(60,2,53,.75); color:#fff; font-size:.6rem; font-weight:700; letter-spacing:.02em;
  padding:.15rem .4rem; border-radius:var(--r-pill); text-transform:uppercase;
}
.inviteutsav-public-site .editor-accommodation-image__preview{ width:100px; height:100px; object-fit:cover; border-radius:var(--r-sm); border:1px solid var(--line); flex-shrink:0; display:block; }

/* Venue Image / Event Image side by side, per spec */
.inviteutsav-public-site .editor-image-pair{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
@media (max-width:520px){ .inviteutsav-public-site .editor-image-pair{ grid-template-columns:1fr; } }
.inviteutsav-public-site .editor-image-field label{ font-size:.86rem; font-weight:700; color:var(--plum-800); display:block; margin-bottom:.4rem; }

.inviteutsav-public-site .editor-gallery-grid{ display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:var(--sp-4); }
.inviteutsav-public-site .editor-gallery-thumb{ position:relative; display:inline-block; border:1px solid var(--line); border-radius:var(--r-sm); cursor:pointer; }
.inviteutsav-public-site .editor-gallery-thumb img{ width:120px; height:180px; object-fit:cover; border-radius:var(--r-sm); display:block; }
.inviteutsav-public-site .editor-gallery-remove{
  position:absolute; top:-8px; right:-8px; width:22px; height:22px; border-radius:50%;
  background:var(--rose-600); color:#fff; border:none; cursor:pointer; line-height:1; font-size:14px; z-index:1;
}

/* Upload-in-progress placeholder — one per selected file, shown immediately
   on selection and swapped for the real thumbnail as each upload finishes. */
.inviteutsav-public-site .editor-gallery-thumb--loading{ cursor:default; background:var(--champagne); }
.inviteutsav-public-site .editor-gallery-thumb--loading .editor-gallery-spinner{
  width:120px; height:180px; display:flex; align-items:center; justify-content:center;
}
.inviteutsav-public-site .editor-gallery-spinner::after{
  content:""; width:22px; height:22px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--rose-500);
  animation:editorGallerySpin .8s linear infinite;
}
@keyframes editorGallerySpin{ to{ transform:rotate(360deg); } }
.inviteutsav-public-site .editor-gallery-thumb--error{ border-color:var(--rose-600); cursor:default; }
.inviteutsav-public-site .editor-gallery-thumb--error .editor-gallery-error-icon{
  width:80px; height:80px; display:flex; align-items:center; justify-content:center;
  color:var(--rose-600); font-size:1.4rem; font-weight:700;
}

/* ---------------------------------------------------------------------- */
/* Gallery lightbox — click a gallery thumb to review the full-size photo, */
/* with a next/prev carousel across every image currently in the gallery.  */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .gallery-lightbox{
  position:fixed; inset:0; z-index:400;
  display:flex; align-items:center; justify-content:center;
  padding:2rem 1rem;
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-mid) var(--ease-soft), visibility var(--dur-mid);
}
.inviteutsav-public-site .gallery-lightbox.is-open{ opacity:1; visibility:visible; }
.inviteutsav-public-site .gallery-lightbox__backdrop{
  position:absolute; inset:0;
  background:rgba(42,1,31,.86);
  backdrop-filter:blur(6px);
}
.inviteutsav-public-site .gallery-lightbox__panel{
  position:relative; z-index:1;
  max-width:min(90vw, 900px); max-height:85vh;
  display:flex; align-items:center; justify-content:center;
  transform:scale(.94); transition:transform var(--dur-mid) var(--ease-premium);
}
.inviteutsav-public-site .gallery-lightbox.is-open .gallery-lightbox__panel{ transform:scale(1); }
.inviteutsav-public-site .gallery-lightbox__panel img{
  max-width:100%; max-height:85vh; width:auto; height:auto;
  border-radius:var(--r-md); box-shadow:var(--shadow-lg); display:block;
}
.inviteutsav-public-site .gallery-lightbox__close{
  position:absolute; top:-52px; right:0;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.25);
  font-size:1.3rem; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast);
}
.inviteutsav-public-site .gallery-lightbox__close:hover{ background:rgba(255,255,255,.28); }
.inviteutsav-public-site .gallery-lightbox__counter{
  position:absolute; top:-52px; left:0;
  color:rgba(255,255,255,.75); font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.inviteutsav-public-site .gallery-lightbox__arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:#fff; border:none; color:var(--plum-800);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md); transition:transform var(--dur-fast);
}
.inviteutsav-public-site .gallery-lightbox__arrow:hover{ transform:translateY(-50%) scale(1.06); }
.inviteutsav-public-site .gallery-lightbox__arrow svg{ width:20px; height:20px; }
.inviteutsav-public-site .gallery-lightbox__arrow--prev{ left:-22px; }
.inviteutsav-public-site .gallery-lightbox__arrow--next{ right:-22px; }
@media (max-width:680px){
  .inviteutsav-public-site .gallery-lightbox__arrow--prev{ left:0; }
  .inviteutsav-public-site .gallery-lightbox__arrow--next{ right:0; }
}

.inviteutsav-public-site .editor-slug-status{ font-size:.86rem; margin-top:.5rem; font-weight:600; }
.inviteutsav-public-site .editor-slug-status.is-available{ color:#1f9d6b; }
.inviteutsav-public-site .editor-slug-status.is-taken{ color:var(--rose-600); }

.inviteutsav-public-site .editor-save-success{ text-align:center; color:#1f9d6b; font-weight:700; margin-top:var(--sp-3); }

@media (max-width: 960px){
  .inviteutsav-public-site .editor-layout{ grid-template-columns:1fr; }
  .inviteutsav-public-site .editor-preview{ position:static; max-width:280px; margin-inline:auto; }
  .inviteutsav-public-site .editor-event-row{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .inviteutsav-public-site .editor-card{ padding:20px; }
}

/* ---------------------------------------------------------------------- */
/* Guest-facing invitation page                                           */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .invite-watermark-overlay{
  position:fixed; inset:0; z-index:150; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='160'%3E%3Ctext x='-10' y='100' transform='rotate(-28 150 80)' font-family='Arial,sans-serif' font-size='22' font-weight='700' fill='rgba(150,20,60,0.07)'%3EInviteUtsav Preview%3C/text%3E%3C/svg%3E");
  background-repeat:repeat;
}
.inviteutsav-public-site .invite-hero__inner{ text-align:center; max-width:640px; margin-inline:auto; }
.inviteutsav-public-site .invite-hero__sub{ font-size:1.15rem; color:rgba(255,255,255,.85); margin-top:var(--sp-3); }

/* Couple-name heading (generic guest template) — reuses the same
   --font-script custom property wedding-01 sets inline via
   inviteutsav_couple_font_style_attr(); the var() fallback here means a
   couple-name still renders in a real script font even when no
   customer/template font choice ever set the variable at all. */
.inviteutsav-public-site .couple-name{ font-family:var(--font-script, "Great Vibes", cursive); font-weight:400; line-height:1.25; }
.inviteutsav-public-site .couple-name .bride-name,
.inviteutsav-public-site .couple-name .groom-name{ display:inline; }
.inviteutsav-public-site .couple-name__amp{ font-size:.75em; opacity:.85; margin-inline:.15em; font-style:italic; }

.inviteutsav-public-site .invite-events{ padding-block:var(--section-pad); }
.inviteutsav-public-site .invite-events-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-5); }
.inviteutsav-public-site .invite-event-card{
  padding:var(--sp-5); border-radius:var(--r-lg); background:var(--surface);
  border:1px solid var(--line-soft); text-align:center;
}
.inviteutsav-public-site .invite-event-card h4{ margin-bottom:.4rem; }
.inviteutsav-public-site .invite-event-card__when{ font-weight:700; color:var(--wine-600); font-size:.92rem; margin-bottom:.4rem; }
.inviteutsav-public-site .invite-event-card p{ margin-top:.3rem; font-size:.9rem; }
.inviteutsav-public-site .invite-event-card__actions{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:var(--sp-4); }

/* Add to Calendar — reusable across every template (template-parts/add-to-calendar.php) */
.inviteutsav-public-site .add-to-calendar{ position:relative; display:inline-block; }
.inviteutsav-public-site .add-to-calendar__trigger{ display:inline-flex; align-items:center; gap:.4rem; }
.inviteutsav-public-site .add-to-calendar__menu{
  position:absolute; top:calc(100% + .4rem); left:50%; transform:translateX(-50%);
  z-index:20; min-width:190px; background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r-md); box-shadow:var(--shadow-md,0 8px 24px rgba(0,0,0,.12));
  display:flex; flex-direction:column; padding:.4rem;
}
.inviteutsav-public-site .add-to-calendar__menu a{
  padding:.6rem .8rem; border-radius:var(--r-sm); font-size:.88rem; font-weight:600;
  color:var(--ink,inherit); text-align:left;
}
.inviteutsav-public-site .add-to-calendar__menu a:hover{ background:var(--bg-alt); }

.inviteutsav-public-site .invite-gallery{ padding-block:var(--section-pad); background:var(--bg-alt); }
.inviteutsav-public-site .invite-gallery-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--sp-4); }

/* Our Story / Journey timeline (generic template) — photo is optional; a
   moment with no photo keeps the original text-only card, never an empty
   image box. Aspect ratio fixed + object-fit so an uploaded photo of any
   shape never stretches or distorts. */
.inviteutsav-public-site .invite-journey{ padding-block:var(--section-pad); }
.inviteutsav-public-site .invite-journey-timeline{ display:flex; flex-direction:column; gap:var(--sp-5); max-width:720px; margin-inline:auto; }
.inviteutsav-public-site .invite-journey-item{
  display:flex; flex-direction:column; gap:var(--sp-3);
  padding:var(--sp-5); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line-soft);
}
.inviteutsav-public-site .invite-journey-item__photo{ border-radius:var(--r-md); overflow:hidden; aspect-ratio:16/9; }
.inviteutsav-public-site .invite-journey-item__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.inviteutsav-public-site .invite-journey-item__year{ font-weight:700; color:var(--wine-600); font-size:.88rem; letter-spacing:.04em; }
.inviteutsav-public-site .invite-journey-item__body h4{ margin-top:.2rem; }
.inviteutsav-public-site .invite-journey-item__body p{ margin-top:.4rem; font-size:.92rem; }
@media (min-width: 640px){
  .inviteutsav-public-site .invite-journey-item{ flex-direction:row; align-items:stretch; }
  .inviteutsav-public-site .invite-journey-item__photo{ flex:0 0 260px; aspect-ratio:4/3; }
  .inviteutsav-public-site .invite-journey-item__body{ flex:1; }
}

.inviteutsav-public-site .invite-rsvp{ padding-block:var(--section-pad); }
.inviteutsav-public-site .invite-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.inviteutsav-public-site .invite-share .invite-powered-by{ margin-top:var(--sp-6); font-size:.82rem; color:rgba(255,255,255,.6); }
.inviteutsav-public-site .invite-share .invite-powered-by a{ color:var(--gold-300); font-weight:700; }

@media (max-width: 960px){
  .inviteutsav-public-site .invite-events-grid{ grid-template-columns:repeat(2, 1fr); }
  .inviteutsav-public-site .invite-gallery-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width: 680px){
  .inviteutsav-public-site .invite-events-grid{ grid-template-columns:1fr; }
  .inviteutsav-public-site .invite-gallery-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------- */
/* Manage RSVP (customer dashboard)                                       */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .rsvp-manage-section{ padding-block:var(--section-pad); }
.inviteutsav-public-site .rsvp-stats-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--sp-4); margin-bottom:var(--sp-7); }
.inviteutsav-public-site .rsvp-stat-card{
  text-align:center; background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); padding:var(--sp-4);
}
.inviteutsav-public-site .rsvp-stat-card strong{ display:block; font-family:var(--font-display); font-size:1.8rem; color:var(--plum-800); }
.inviteutsav-public-site .rsvp-stat-card span{ font-size:.78rem; color:var(--charcoal-faint); text-transform:uppercase; letter-spacing:.02em; }

.inviteutsav-public-site .rsvp-list{ display:flex; flex-direction:column; gap:var(--sp-3); max-width:760px; margin-inline:auto; }
.inviteutsav-public-site .rsvp-row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5);
}
.inviteutsav-public-site .rsvp-row__meta{ font-size:.82rem; color:var(--ink-soft); margin-top:.2rem; }
.inviteutsav-public-site .rsvp-row__message{ font-size:.88rem; font-style:italic; color:var(--ink-soft); margin-top:.4rem; max-width:440px; }
.inviteutsav-public-site .rsvp-row__actions{ display:flex; align-items:center; gap:var(--sp-3); flex-shrink:0; }
.inviteutsav-public-site .rsvp-row__remove{ color:var(--rose-600); }

@media (max-width: 960px){
  .inviteutsav-public-site .rsvp-stats-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width: 680px){
  .inviteutsav-public-site .rsvp-stats-grid{ grid-template-columns:repeat(2, 1fr); }
  .inviteutsav-public-site .rsvp-row{ flex-direction:column; align-items:flex-start; }
}

/* ---------------------------------------------------------------------- */
/* Auth tabs (Password / OTP)                                             */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .auth-tabs{ display:flex; gap:.5rem; margin-bottom:var(--sp-5); background:var(--champagne); border-radius:25px; padding:.3rem; }
.inviteutsav-public-site .auth-tab{
  flex:1; padding:.7rem 1rem; border:none; background:transparent; border-radius:var(--r-pill);
  font-weight:700; font-size:.9rem; color:var(--ink-soft); cursor:pointer;
  transition:background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.inviteutsav-public-site .auth-tab.is-active{ background:var(--surface); color:var(--plum-800); box-shadow:var(--shadow-sm); }

/* ---------------------------------------------------------------------- */
/* Comparison table (class-comparison-table.php)                          */
/* ---------------------------------------------------------------------- */
.inviteutsav-public-site .comparison-table-section{ padding-block:var(--section-pad); }
.inviteutsav-public-site .comparison-table-wrap{ max-width:720px; margin-inline:auto; overflow-x:auto; border-radius:var(--r-lg); box-shadow:var(--shadow-sm); border:1px solid var(--line); }
.inviteutsav-public-site .comparison-table__logo{ max-height:40px; width:auto; display:block; margin-inline:auto; }
.inviteutsav-public-site .comparison-table{ width:100%; border-collapse:collapse; background:var(--surface); }
.inviteutsav-public-site .comparison-table th,
.inviteutsav-public-site .comparison-table td{ padding:.9rem 1.3rem; text-align:left; font-size:.95rem; border-bottom:1px solid var(--line-soft); }
.inviteutsav-public-site .comparison-table thead th{ font-family:var(--font-display); font-weight:700; color:var(--ink-soft); font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; border-bottom:2px solid var(--line); }
.inviteutsav-public-site .comparison-table tbody tr:last-child th,
.inviteutsav-public-site .comparison-table tbody tr:last-child td{ border-bottom:none; }
.inviteutsav-public-site .comparison-table td.comparison-table__highlight,
.inviteutsav-public-site .comparison-table th.comparison-table__highlight{ background:var(--line-soft); color:var(--wine-600); font-weight:700; }
.inviteutsav-public-site .comparison-table thead th.comparison-table__highlight{ color:var(--wine-600); background:var(--line-soft); border-radius:var(--r-md) var(--r-md) 0 0; }
@media (max-width:640px){
  .inviteutsav-public-site .comparison-table th,
.inviteutsav-public-site .comparison-table td{ padding:.7rem .9rem; font-size:.85rem; }
}

/* ------------------------------------------------------------------ */
/* Demo-invitation badge + "Customize This Design" CTA bar — rendered */
/* only on a published demo invitation (footer-invite-immersive.php). */
/* Deliberately NOT scoped under .inviteutsav-public-site: this is the */
/* one case where the target IS the invitation page itself.           */
/* ------------------------------------------------------------------ */
.demo-invite-badge{
  position:fixed; top:14px; left:14px; z-index:9998;
  background:rgba(20,20,20,.72); color:#fff; font-size:.72rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; padding:.4rem .8rem;
  border-radius:999px; backdrop-filter:blur(4px); pointer-events:none;
}
.demo-invite-cta{
  position:fixed; left:initial; right:8px; bottom:8px; z-index:9998;
  display:flex; align-items:center; justify-content:center; gap:1rem;
  flex-wrap:wrap; background:rgb(20 20 20 / 13%); color:#fff;
  padding:.7rem 1.1rem; backdrop-filter:blur(6px);
  width:auto; border-radius:180px;
}
.demo-invite-cta__actions{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.demo-invite-cta__whatsapp{
  display:flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:50%; background:#25D366; color:#fff; flex-shrink:0;
}
.demo-invite-cta__whatsapp:hover{ background:#1ebc5a; }
@media (max-width:560px){
  .demo-invite-badge{ top:10px; left:10px; font-size:.66rem; padding:.35rem .65rem; }
  .demo-invite-cta{ padding:.55rem .85rem; gap:.5rem; }
}