/* ============================================================
   Invity design tokens - derived from the logo:
   brush red, golden door-light, ivory canvas, rainbow accents
   ============================================================ */
:root {
  --ink: #2b2723;            /* deep warm charcoal */
  --ink-soft: #6f675e;
  --ivory: #fffaf3;          /* page canvas */
  --ivory-deep: #f7efe2;     /* alternate sections */
  --brand-red: #e0231f;      /* logo brush red */
  --brand-red-dark: #b81a17;
  --brand-magenta: #c81e64;  /* festive jewel tone */
  --gold: #f0a92e;           /* the door light */
  --gold-deep: #d1861a;
  --gold-soft: #f8dfae;
  /* the logo rainbow - used boldly for festive accents */
  --ray-purple: #7b2fbe; --ray-blue: #1f4fd8; --ray-sky: #29a8e0;
  --ray-green: #5cb827;  --ray-yellow: #f2b01e; --ray-orange: #f05a22;
  --festive-gradient: linear-gradient(115deg, #7a1233 0%, #c81e64 42%, #e0611f 78%, #f0a92e 100%);
  --font-display: 'Playfair Display', Georgia, serif;
  --font-ui: 'Manrope', 'Noto Sans Tamil', system-ui, sans-serif;
}

body {
  font-family: var(--font-ui);
  background-color: var(--ivory);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--ink) 9%, transparent) 1.2px, transparent 1.5px);
  background-size: 32px 32px;
  color: var(--ink);
}

/* ---- Inline Lucide icons: sit level with surrounding text ---- */
.icon { vertical-align: -3px; flex-shrink: 0; }

h1, h2, h3, .display-5, .display-6 { font-family: var(--font-display); }

/* ---- Buttons: pill, festive gradient, gold hover glow ---- */
.btn { border-radius: 50rem; font-weight: 700; padding: .55rem 1.4rem; }
.btn-danger {
  background: linear-gradient(120deg, var(--brand-red), var(--brand-magenta));
  border-color: transparent; color: #fff;
}
.btn-danger:hover, .btn-danger:focus {
  background: linear-gradient(120deg, var(--brand-red-dark), var(--brand-magenta));
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 18px rgba(200, 30, 100, .35), 0 0 0 .2rem rgba(240, 169, 46, .35);
}
.btn-outline-danger { color: var(--brand-red); border-color: var(--brand-red); border-width: 2px; }
.btn-outline-danger:hover { background: var(--brand-red); border-color: var(--brand-red); color: #fff; }
.btn-warning { background: linear-gradient(120deg, var(--gold), var(--gold-deep)); border-color: transparent; color: #3a2c07; }
.btn-success { background: linear-gradient(120deg, #1e9e4a, var(--ray-green)); border-color: transparent; }

/* ---- Nav ---- */
.navbar {
  background: #fff !important; box-shadow: 0 1px 12px rgba(43,39,35,.06);
  transition: margin .35s cubic-bezier(.4,0,.2,1), max-width .35s ease,
              border-radius .35s ease, box-shadow .35s ease;
}
.navbar.navbar-floating {
  margin: .7rem auto 0; max-width: 1100px; border-bottom: 0 !important;
  border-radius: 50rem; box-shadow: 0 10px 30px rgba(43,39,35,.16);
  /* no overflow:hidden here - it clips the nav dropdowns open below the bar,
     and the pill shape holds without it since content sits inside the padding */
  padding-left: 1.5rem; padding-right: 1.5rem;
}
.navbar-brand img { height: 72px; width: auto; }
.navbar .nav-link { font-weight: 600; color: var(--ink-soft); position: relative; }
.navbar .nav-link:hover { color: var(--brand-red); }
.navbar .nav-link.active { color: var(--brand-red); }
.navbar .nav-link.active::after {
  content: ''; position: absolute; left: .5rem; right: .5rem; bottom: -2px;
  height: 2px; border-radius: 2px; background: var(--brand-red);
}

/* ---- Nav dropdowns ("My Invity", "Hi, name"): open on hover for real
   pointers (desktop), fall back to Bootstrap's normal tap-to-toggle on
   touch devices ---- */
@media (hover: hover) and (pointer: fine) {
  .navbar .dropdown:hover > .dropdown-menu {
    display: block; margin-top: 0;
  }
}

/* ---- Pricing cards ---- */
.pricing-card-wrap { position: relative; height: 100%; }
.pricing-crown {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(120deg, var(--gold), var(--gold-deep));
  color: #3a2c07; font-weight: 700; font-size: .75rem; letter-spacing: .03em;
  padding: .35rem 1rem; border-radius: 50rem; box-shadow: 0 4px 10px rgba(43,39,35,.18);
  white-space: nowrap; z-index: 2;
}
.pricing-card {
  border: 1.5px solid #ece3d3; border-top: 4px solid var(--gold-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pricing-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(43,39,35,.14) !important; }
.pricing-card.pricing-grand { border-top-color: var(--gold); }
.pricing-card.pricing-popular {
  border-width: 2px; border-top-width: 4px;
  border-color: var(--brand-red); border-top-color: var(--gold-deep);
  background: linear-gradient(170deg, #fff 65%, var(--gold-soft) 220%);
  box-shadow: 0 10px 28px rgba(240,169,46,.22);
}
.pricing-icon {
  width: 56px; height: 56px; margin: 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  background: linear-gradient(135deg, var(--gold-soft), #fff);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 50%, transparent);
}
.pricing-price { font-family: var(--font-display); font-size: 2.3rem; font-weight: 700; color: var(--brand-red); }
.pricing-features { max-width: 240px; }
.pricing-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; font-size: .65rem; margin-right: .3rem;
  background: color-mix(in srgb, var(--ray-green) 16%, transparent); color: #1e9e4a;
}
.pricing-check.pricing-cross { background: color-mix(in srgb, var(--ink-soft) 14%, transparent); color: var(--ink-soft); }
.pricing-table { border-radius: 12px; overflow: hidden; }
.pricing-table tbody tr:hover { background: color-mix(in srgb, var(--gold-soft) 35%, transparent); }

/* ---- The swoosh divider (logo's red arc as an ornament) ---- */
.swoosh {
  display: block; width: 140px; height: 18px; margin: .75rem auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 18'%3E%3Cpath d='M4 13 C 40 3, 100 3, 136 9' fill='none' stroke='%23e0231f' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='70' cy='5' r='3' fill='%23f0a92e'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---- Landing hero: rich jewel-tone gradient banner ---- */
.hero {
  min-height: 64vh;
  position: relative; overflow: hidden;
  background: var(--festive-gradient);
  color: #fff;
}
.hero::before { /* soft dotted marigold texture */
  content: ''; position: absolute; inset: 0; opacity: .16; pointer-events: none;
  background-image:
    radial-gradient(circle, #fff 1.5px, transparent 1.5px),
    radial-gradient(circle, #fff 1.5px, transparent 1.5px);
  background-size: 46px 46px;
  background-position: 0 0, 23px 23px;
}
.hero-kicker {
  letter-spacing: .18em; text-transform: uppercase; font-size: .78rem;
  font-weight: 700; color: #ffe4a8;
}
.hero-title {
  color: #fff; line-height: 1.04; text-shadow: 0 2px 18px rgba(0,0,0,.15);
  font-size: clamp(2.6rem, 5.2vw, 4.1rem); letter-spacing: -.01em;
}
.hero-sub { color: #fff2e2; max-width: 560px; margin-left: auto; margin-right: auto; opacity: .95; }
.hero-link { color: #ffe4a8; text-decoration: none; font-weight: 700; }
.hero-link:hover { color: #fff; }
.hero .swoosh { filter: brightness(0) invert(1) drop-shadow(0 0 0 #fff); opacity: .9; }
.hero .btn-danger { background: #fff; color: var(--brand-red) !important; }
.hero .btn-danger:hover { background: #fff2e2; box-shadow: 0 4px 18px rgba(0,0,0,.25); }

/* ---- Hero sticker badges: tilted pill callouts, one per ray colour ---- */
.hero-sticker {
  position: absolute; display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem 1rem; border-radius: 50rem; font-weight: 700; font-size: .82rem;
  box-shadow: 0 10px 22px rgba(0,0,0,.22); white-space: nowrap; color: #fff;
}
.hero-sticker-1 { background: var(--ray-sky); top: 6%; left: 4%; transform: rotate(-8deg); }
.hero-sticker-2 { background: var(--ray-yellow); color: #3a2c07; top: 10%; right: 3%; transform: rotate(7deg); }
.hero-sticker-3 { background: var(--ray-purple); bottom: 10%; left: 8%; transform: rotate(6deg); }
@media (max-width: 820px) { .hero-sticker { display: none; } }
@media (max-width: 767.98px) {
  .navbar-brand img { height: 48px; }
  #siteNavbar { border-bottom: 1px solid var(--ivory-deep) !important; }
  #siteNavbar.navbar-floating { margin: 0 !important; border-radius: 0 !important; overflow: visible !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
  #siteNavbar .navbar-collapse .nav-item { border-bottom: 1px solid var(--ivory-deep); }
  #siteNavbar .navbar-collapse .nav-item:last-child { border-bottom: none; }
  #siteNavbar .navbar-collapse .nav-link { padding: .6rem .25rem; }
  #siteNavbar .navbar-collapse .nav-link.active::after { left: 0; right: 0; }
}

/* ---- How-it-works steps: gradient discs ---- */
.step-badge {
  width: 60px; height: 60px; line-height: 60px;
  margin: 0 auto; border-radius: 50%;
  background: var(--festive-gradient); color: #fff;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  box-shadow: 0 6px 16px rgba(200,30,100,.30);
}

/* ---- Occasion tiles: bold gradient discs, one logo colour each ---- */
.occasion-card {
  transition: transform .18s ease, box-shadow .18s ease;
  background: #fff; border-radius: 28px; border-top: 3px solid transparent;
}
.occasion-card:hover { transform: translateY(-5px); box-shadow: 0 10px 24px rgba(43,39,35,.14) !important; }
.occasion-icon {
  width: 52px; height: 52px; margin: 0 auto; border-radius: 50%;
  position: relative; box-shadow: 0 6px 14px rgba(0,0,0,.14);
}
.occasion-icon::after {
  content: ''; position: absolute; inset: 8px; border-radius: 50%;
  background: rgba(255,255,255,.4);
}
.occasion-wedding            { background: linear-gradient(135deg, var(--brand-red), var(--brand-magenta)); }
.occasion-engagement         { background: linear-gradient(135deg, var(--ray-purple), var(--brand-magenta)); }
.occasion-birthday           { background: linear-gradient(135deg, var(--ray-yellow), var(--ray-orange)); }
.occasion-baptism            { background: linear-gradient(135deg, var(--ray-sky), var(--ray-blue)); }
.occasion-holy_communion     { background: linear-gradient(135deg, var(--ray-blue), var(--ray-purple)); }
.occasion-valaikaappu        { background: linear-gradient(135deg, var(--ray-orange), var(--brand-red)); }
.occasion-housewarming       { background: linear-gradient(135deg, var(--ray-green), #2f8f3f); }
.occasion-shashtiabdapoorthi { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); }
.occasion-anniversary        { background: linear-gradient(135deg, var(--gold), var(--ray-purple)); }
.occasion-retirement         { background: linear-gradient(135deg, var(--ray-blue), var(--gold-deep)); }
.occasion-naming             { background: linear-gradient(135deg, var(--brand-magenta), var(--ray-sky)); }
.occasion-manjal_neerattu    { background: linear-gradient(135deg, var(--gold), var(--brand-red)); }
.occasion-more               { background: linear-gradient(135deg, #cfc8bd, #b3aa9c); }

.section-ivory-deep { background: var(--ivory-deep); }

/* ---- Theme strip (landing): live thumbnails in an arch frame, echoing
   the doorway/welcome motif, distinct from the gallery's plain cards ---- */
.theme-strip-container { max-width: 1600px !important; } /* wider than the standard
  1320px container so all 8 fit on large screens instead of leaving it scrollable
  with unused space on either side */
.theme-strip {
  scroll-snap-type: x proximity;
  padding-top: 10px; /* headroom so the hover lift doesn't clip the arch top */
  scrollbar-width: none; -ms-overflow-style: none; /* scrolls by swipe/drag, no visible bar */
  justify-content: safe center; /* centers when all cards fit; "safe" keeps them
    left-anchored (scrollable, not clipped) once they overflow on narrow screens */
}
.theme-strip::-webkit-scrollbar { display: none; }
.theme-strip-item { scroll-snap-align: start; width: 130px; }
.theme-strip-item .theme-thumb {
  border-radius: 90px 90px 14px 14px;
  border: 2px solid color-mix(in srgb, var(--inv-gold, var(--gold)) 65%, transparent);
  box-shadow: 0 10px 24px rgba(43,39,35,.12);
  transition: transform .18s ease, box-shadow .18s ease;
}
.theme-strip-item:hover .theme-thumb {
  transform: translateY(-4px); box-shadow: 0 14px 28px rgba(200,30,100,.20);
}

/* ---- Feature pills: cycling festive left-border accent ---- */
.feature-pill {
  background: #fff; border: 1px solid rgba(43,39,35,.08); border-left: 4px solid var(--brand-red);
  border-radius: 12px; padding: .6rem 1.1rem; box-shadow: 0 3px 10px rgba(43,39,35,.06);
  font-weight: 700; color: var(--ink);
}
.col-md-3:nth-of-type(8n+2) .feature-pill { border-left-color: var(--gold); }
.col-md-3:nth-of-type(8n+3) .feature-pill { border-left-color: var(--ray-purple); }
.col-md-3:nth-of-type(8n+4) .feature-pill { border-left-color: var(--ray-sky); }
.col-md-3:nth-of-type(8n+5) .feature-pill { border-left-color: var(--ray-green); }
.col-md-3:nth-of-type(8n+6) .feature-pill { border-left-color: var(--ray-orange); }
.col-md-3:nth-of-type(8n+7) .feature-pill { border-left-color: var(--brand-magenta); }
.col-md-3:nth-of-type(8n+8) .feature-pill { border-left-color: var(--ray-blue); }

/* ---- Cards ---- */
.card { border-radius: 28px; }

/* ---- Dashboard mini invite-cards ---- */
.occ-card { overflow: hidden; font-family: var(--font-ui); border-radius: 20px !important; }
/* .invite (themes.css) reserves 84px at the bottom for the public invitation
   page's floating action bar - these cards borrow .invite only for its theme
   variables/colours, so that spacing doesn't belong here. */
.occ-card.invite { padding-bottom: 0; }
.occ-card-accent { height: 4px; background: var(--inv-accent, var(--gold)); }
.occ-card-title { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.15rem; color: var(--ink); }

.occ-id-row { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; margin-bottom: .4rem; }
.occ-tags { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.occ-tag { font-size: .68rem; font-weight: 700; padding: .25rem .6rem; border-radius: 50rem; white-space: nowrap; }
.occ-tag-type, .occ-tag-neutral { background: var(--ivory-deep); color: var(--ink-soft); }
.occ-tag-live { background: #dff3e4; color: #1e7d3e; }
.occ-tag-plan { background: var(--gold-soft); color: var(--gold-deep); }
.occ-tag-plan-start { background: var(--ivory-deep); color: var(--ink-soft); border: 1px solid #ece3d3; }

.occ-meta-line { font-size: .82rem; color: var(--ink-soft); margin-bottom: .9rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.occ-meta-line svg { flex-shrink: 0; }
.occ-meta-warn { color: var(--brand-red-dark); font-weight: 700; }

.occ-stat-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #ece3d3; border-radius: 12px;
  overflow: hidden; margin-bottom: .9rem; background: var(--ivory-deep);
}
.occ-stat { text-align: center; padding: .55rem .2rem; border-right: 1px solid #ece3d3; }
.occ-stat:last-child { border-right: none; }
.occ-stat svg { margin-bottom: .15rem; color: var(--ink-soft); }
.occ-stat b { display: block; font-variant-numeric: tabular-nums; font-size: 1rem; font-weight: 800; color: var(--ink); line-height: 1.2; }
.occ-stat span { font-size: .62rem; color: var(--ink-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }

.occ-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.occ-btn-manage { background: var(--ivory-deep); color: var(--ink); border: none; }
.occ-btn-manage:hover { background: #efe6d3; color: var(--ink); }
.occ-actions .dropdown-menu { font-size: .82rem; }
.occ-actions .dropdown-item { display: flex; align-items: center; gap: .35rem; }
.occ-upgrade-chip { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--gold-deep); text-decoration: none; }
.occ-upgrade-chip:hover { color: var(--gold-deep); text-decoration: underline; }

/* Wishes moderation */
.wish-stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #ece3d3; border-radius: 12px; overflow: hidden; background: var(--ivory-deep); }
.wish-stat { text-align: center; padding: .55rem .2rem; border-right: 1px solid #ece3d3; }
.wish-stat:last-child { border-right: none; }
.wish-stat b { display: block; font-size: 1.1rem; font-weight: 800; color: var(--ink); }
.wish-stat span { font-size: .62rem; color: var(--ink-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.wish-stat.wish-stat-ok b { color: #1e7d3e; }
.wish-section-head { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.wish-section-head.wish-section-pending { color: #92400e; }
.wish-card-pending { border-left: 3px solid #f59e0b !important; }
.wish-card-hidden { opacity: .65; }
.wish-message { font-size: .95rem; color: var(--ink); margin-bottom: .25rem; }
.wish-meta { font-size: .78rem; color: var(--ink-soft); }
.btn-xs { font-size: .72rem; padding: .15rem .5rem; }

/* ---- Manage landing: section grid boxes ---- */
.manage-home-box {
  display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
  padding: 1rem; border-radius: 16px; border: 1px solid #ece3d3;
  background: var(--ivory-deep); text-decoration: none; color: var(--ink);
  height: 100%; transition: box-shadow .15s, border-color .15s;
}
.manage-home-box:hover { box-shadow: 0 4px 16px rgba(43,39,35,.1); border-color: var(--gold); color: var(--ink); }
.manage-home-box.locked { opacity: .65; }
.manage-home-icon { color: var(--brand-red); margin-bottom: .1rem; }
.manage-home-label { font-weight: 700; font-size: .9rem; display: flex; align-items: center; gap: .3rem; }
.manage-home-desc { font-size: .75rem; color: var(--ink-soft); line-height: 1.35; }

/* ---- Dashboard: the invitation link box (copy / open in new tab) ---- */
.occ-link-box {
  background: #f7f5f1; border: 1px solid #ece3d3; border-radius: 10px;
  padding: .35rem .4rem .35rem .75rem; gap: .3rem;
}
.occ-link-text {
  font-size: .8rem; color: var(--ink-soft); flex: 1 1 auto; min-width: 0;
}
.occ-link-btn {
  background: none; border: none; padding: .3rem; line-height: 0; color: var(--ink-soft);
  border-radius: 6px; flex-shrink: 0; display: inline-flex;
}
.occ-link-btn:hover { background: #fff; color: var(--brand-red); }
.occ-link-btn .copy-icon-done { color: #1e9e4a; }

/* ---- Manage pages: occasion name + cross-section nav ---- */
.manage-occ-title {
  font-family: var(--font-display); font-weight: 700; font-style: italic;
  font-size: 1.15rem; color: var(--ink); margin: .1rem 0 .15rem;
}

.manage-nav-pills {
  display: flex; gap: .5rem; overflow-x: auto; padding: .25rem 0 .9rem;
  -ms-overflow-style: none; scrollbar-width: none;
}
.manage-nav-pills::-webkit-scrollbar { display: none; }
.manage-pill {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  padding: .45rem .8rem; border-radius: 50rem; font-size: .78rem; font-weight: 700;
  background: var(--ivory-deep); color: var(--ink-soft); border: 1px solid #ece3d3; text-decoration: none;
}
.manage-pill.active { background: var(--brand-red); border-color: var(--brand-red); color: #fff; }
.manage-pill.locked { color: #b3a998; background: #f4efe2; }

.manage-nav-side { position: sticky; top: 6rem; }
.manage-nav-card { border-radius: 14px; }
.manage-nav-occ {
  font-family: var(--font-display); font-weight: 700; font-style: italic;
  font-size: 1rem; color: var(--ink); min-width: 0;
}
.manage-nav-link {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border-radius: 8px;
  font-size: .86rem; font-weight: 600; color: var(--ink); border-left: 3px solid transparent;
  text-decoration: none;
}
.manage-nav-link:hover { background: var(--ivory-deep); }
.manage-nav-link.active { background: var(--gold-soft); border-left-color: var(--brand-red); color: var(--brand-red-dark); }
.manage-nav-link.locked { color: #b3a998; }
.manage-nav-link .manage-nav-lock { margin-left: auto; color: #c9c0ae; }

/* ---- Style customiser (host) ---- */
.style-chip {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  width: 74px; padding: .5rem .3rem; cursor: pointer;
  background: #fff; border: 2px solid #eee; border-radius: 12px;
  transition: border-color .15s ease, transform .15s ease;
}
.style-chip:hover { transform: translateY(-2px); }
.style-chip.active, .style-chip:has(input:checked) { border-color: var(--brand-red); }
.style-chip-sample { font-size: 1.5rem; line-height: 1.2; }
.lang-chip { width: 92px; }
.lang-chip .style-chip-sample { font-size: 1.15rem; }

/* ---- Password show/hide toggle ---- */
.password-field { position: relative; }
.password-field .form-control { padding-right: 2.5rem; }
.password-toggle {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: .25rem; line-height: 0; color: #8a8378;
}
.password-toggle:hover { color: #333; }
.accent-dot { cursor: pointer; }
.accent-swatch {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff;
  box-shadow: 0 0 0 2px #ddd; color: #fff; font-weight: 700; font-size: .8rem;
}
.accent-dot:has(input:checked) .accent-swatch, .accent-dot.active .accent-swatch {
  box-shadow: 0 0 0 3px var(--brand-red);
}
.accent-theme { background: linear-gradient(135deg, #b02a37 50%, #c9a227 50%); }

/* ---- Theme picker ---- */
.theme-card { cursor: pointer; overflow: hidden; }
.gallery-tile { position: absolute; inset: 0; background-size: 140px; opacity: .55; }

/* Live-rendered theme thumbnail: the theme's real hero block, shrunk to
   fit a portrait frame instead of a flat colour swatch. Off-screen cards
   are cheap - content-visibility skips their layout/paint until scrolled
   near, and every recipe animation is switched off (a still preview
   doesn't need motion, and dozens running at once would waste battery). */
.theme-thumb {
  aspect-ratio: 3/4; position: relative; overflow: hidden;
  background: var(--inv-bg, #f4f1ec);
  content-visibility: auto; contain-intrinsic-size: 200px 267px;
  container-type: inline-size;
}
.theme-thumb-inner {
  position: absolute; top: 0; left: 0; width: 375px;
  transform: scale(calc(100cqi / 375px)); transform-origin: top left;
  pointer-events: none;
}
.theme-thumb, .theme-thumb * { animation: none !important; }

/* Recipe hero CSS sizes text/spacing with vw units so it scales with a
   real phone viewport. Inside a thumbnail there is no real 375px
   viewport - it's a fixed-width div we shrink with a transform - so vw
   resolves against the actual (wide) browser window instead, blowing
   text and padding far past what the clamp() ceilings intend. These
   overrides hard-code each rule to what it would actually compute to
   on a real 375px phone, so the miniature matches the live invite. */
.theme-thumb .inv-title { font-size: 2.4rem !important; }
/* .inv-title above is correct for the ~45 recipes that use the shared
   base rule (clamp floor 2.4rem). But 24 one-off recipes set their OWN
   inline clamp() on the same .inv-title class with a smaller floor - the
   blanket override was forcing all of them to 2.4rem too, well past what
   their own clamp would ever produce on a real 375px phone. That's what
   overflowed Alpona Shonkho's fixed-size sun circle: forced to 2.4rem
   instead of its real ~1.64rem, the name plus date no longer fit inside
   the 205px circle and spilled past its edge. Each value below is that
   recipe's own clamp() resolved at a true 375px width. */
.theme-thumb.inv-r-bandhani .inv-title,
.theme-thumb.inv-r-doli .inv-title,
.theme-thumb.inv-r-ikat .inv-title,
.theme-thumb.inv-r-jaali .inv-title { font-size: 1.41rem !important; }
.theme-thumb.inv-r-tanjore .inv-title { font-size: 1.5rem !important; }
.theme-thumb.inv-r-alpona .inv-title,
.theme-thumb.inv-r-athangudi .inv-title,
.theme-thumb.inv-r-chalice .inv-title,
.theme-thumb.inv-r-glass .inv-title,
.theme-thumb.inv-r-jharokha .inv-title,
.theme-thumb.inv-r-malligai .inv-title,
.theme-thumb.inv-r-nestkeys .inv-title,
.theme-thumb.inv-r-paalkaachal .inv-title,
.theme-thumb.inv-r-shashti .inv-title,
.theme-thumb.inv-r-warli .inv-title { font-size: 1.64rem !important; }
.theme-thumb.inv-r-circus .inv-title,
.theme-thumb.inv-r-cradle .inv-title,
.theme-thumb.inv-r-footprints .inv-title,
.theme-thumb.inv-r-madhubani .inv-title,
.theme-thumb.inv-r-mehndi .inv-title,
.theme-thumb.inv-r-peacock .inv-title,
.theme-thumb.inv-r-valaiyal .inv-title { font-size: 1.7rem !important; }
.theme-thumb.inv-r-haldi .inv-title { font-size: 1.9rem !important; }
.theme-thumb.inv-r-kolam .inv-title { font-size: 1.8rem !important; }
/* Same vh/vw-in-a-fake-viewport problem, but for hero section HEIGHT:
   .inv-hero and friends use min-height:Nvh so the live page fills a real
   phone screen. Resolved against the real (desktop) window instead, that
   inflates the hero to 600-900px inside the 375px-wide staged card, so
   the vertically-centred title lands below the thumbnail's visible
   window and the card's overflow:hidden clips it away entirely - the
   "blank"/left-cropped/overlapping-names bug. .inv-hero alone covers the
   ~55 one-off recipes that don't define their own hero wrapper; letting
   height come from content instead keeps every recipe's title in frame.
   display:block alongside min-height:0 because, only inside this scaled
   + container-query-sized staging box, a flex row with align-items:center
   and a single child computes the CONTAINER's own auto height far shorter
   than its child's real height (reproduced consistently, doesn't happen
   on the live page) - the child then centers vertically around that too-
   short box and spills upward into whatever card sits above it in the
   grid. There's no longer any extra height to vertically centre within
   once min-height is 0, so dropping flex here changes nothing visually
   and sidesteps the miscalculation entirely. */
.theme-thumb .inv-hero,
.theme-thumb .inv-phero,
.theme-thumb .inv-fhero,
.theme-thumb .inv-cshero,
.theme-thumb .inv-sppanel { min-height: 0 !important; display: block !important; }
.theme-thumb .inv-arch { padding: 2.5rem 1.25rem !important; }
.theme-thumb .inv-ornament::before, .theme-thumb .inv-ornament::after { width: 82px !important; }
.theme-thumb .inv-gband { height: 140px !important; }
.theme-thumb .inv-gpanel { margin: -60px auto 0 !important; padding: 1.8rem !important; }
.theme-thumb .inv-bhero { padding: 2rem 0 1rem !important; }
.theme-thumb .inv-bpage { padding: 2.2rem !important; }
.theme-thumb .inv-btitle { font-size: 1.9rem !important; }
.theme-thumb .inv-ptitle { font-size: 3.3rem !important; }
.theme-thumb .inv-fhero-inner { padding-bottom: 2.5rem !important; }
.theme-thumb .inv-ftitle { font-size: 2.6rem !important; }
.theme-thumb .inv-scard { padding: 1.8rem !important; }
.theme-thumb .inv-sptitle { font-size: 2.2rem !important; }
.theme-thumb .inv-cs-title { font-size: 2.6rem !important; }
.theme-thumb .inv-btile-title { font-size: 1.7rem !important; }
.theme-thumb .inv-mucard { padding: 1.8rem 1.2rem !important; }
.theme-thumb .inv-mutitle { font-size: 1.7rem !important; }
.theme-thumb .inv-kvtitle { font-size: 1.7rem !important; }
.theme-thumb .inv-hytitle { font-size: 1.7rem !important; }
.theme-thumb .inv-hdblob { padding: 1.8rem 1.2rem !important; }
.theme-thumb .inv-kytitle { font-size: 2.1rem !important; }
.theme-thumb .inv-tktitle { font-size: 1.65rem !important; }
.theme-thumb .inv-nwhead { font-size: 1.9rem !important; }
.theme-thumb .inv-gnnum { font-size: 5.6rem !important; }

/* ---- Theme gallery: celebration filter bar ---- */
.theme-filter-btn {
  flex: 0 0 auto; border: 1.5px solid #e5ddd3; border-radius: 999px;
  background: #fff; color: var(--ink, #2b2723); white-space: nowrap;
  padding: .2rem .6rem !important; font-size: .72rem !important;
}
.theme-filter-btn:hover { border-color: var(--brand-red); }
.theme-filter-btn.active { background: var(--brand-red); border-color: var(--brand-red); color: #fff; }

/* ---- Wizard step pills ---- */
.badge.text-bg-danger { background: var(--brand-red) !important; }
.badge.text-bg-success { background: var(--ray-green) !important; }

/* ---- Footer: deep festive band ---- */
.site-footer {
  background: linear-gradient(160deg, #2a1420 0%, #3d1224 55%, #4a1a1c 100%);
  color: #e9dfd6;
}
.footer-swoosh {
  height: 6px;
  background: linear-gradient(90deg, var(--brand-red), var(--gold), var(--ray-purple), var(--ray-sky), var(--ray-green), var(--ray-orange));
}
.footer-logo { filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); background: #fff; border-radius: 10px; padding: 6px 10px; }
.footer-muted { color: #c9b8ac; }
.footer-heading { color: var(--gold); font-weight: 700; letter-spacing: .04em; margin-bottom: .6rem; font-size: .82rem; text-transform: uppercase; }
.footer-link { color: #e9dfd6; text-decoration: none; font-size: .92rem; padding: .18rem 0; overflow-wrap: break-word; }
.footer-link:hover { color: var(--gold); }
.footer-cel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1rem; }
.footer-social a {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,255,255,.08); color: #e9dfd6;
  transition: background .18s ease, color .18s ease;
}
.footer-social a:hover { background: var(--gold); color: #2a1420; }
.footer-rule { border-color: rgba(255,255,255,.12); margin: 1rem 0; }

/* ---- Homepage spotlight: same dark wine-plum family as the footer,
   so the two dark sections read as one closing block, not two ---- */
.spotlight {
  background: linear-gradient(160deg, #2a1420 0%, #3d1224 55%, #4a1a1c 100%);
  color: #e9dfd6; padding: 4.5rem 0;
}
/* the footer's own "mt-5" would otherwise leave a gap of page background
   between it and the spotlight right above it - remove it only there */
.spotlight + .site-footer { margin-top: 0 !important; }
.spotlight h2 { color: #fff; }
.spotlight-sub { color: #c9b8ac; max-width: 480px; margin-left: auto; margin-right: auto; }
.glow-chip {
  height: 100%; text-align: left; border-radius: 20px; padding: 1.1rem 1.3rem;
  background: rgba(240,169,46,.07); border: 1px solid var(--gold);
  box-shadow: 0 0 26px rgba(240,169,46,.22);
}
.glow-chip-title { font-family: var(--font-display); font-weight: 700; color: var(--gold); margin-bottom: .3rem; }
.glow-chip-text { font-size: .85rem; color: #e9dfd6; line-height: 1.4; }

/* ---- Story formatting toolbar ---- */
.inv-fmt-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  background: #f8f5f2; border: 1px solid #e5ddd8;
  border-radius: 8px 8px 0 0; padding: 4px 6px;
}
.inv-fmt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 7px;
  border: none; background: transparent; border-radius: 6px;
  font-size: .85rem; cursor: pointer; color: #5a4a42; line-height: 1;
  transition: background .12s;
}
.inv-fmt-btn:hover { background: #ede6df; }
.inv-fmt-bar .inv-fmt-sep { width: 1px; height: 18px; background: #ddd4cc; margin: 0 3px; flex-shrink: 0; }
.inv-fmt-bar #previewToggle { font-size: .75rem; font-weight: 600; margin-left: auto; letter-spacing: .02em; padding: 0 10px; }
#storyText { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-top: 0 !important; }

/* --- Floating panels (emoji + phrase starters) --- */
.inv-fmt-panel {
  background: #fff; border: 1px solid #e5ddd8; border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.12); padding: 10px 12px; margin-bottom: 4px;
}
.inv-fmt-panel-title {
  font-size: .68rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #a08070; margin-bottom: 5px;
}
.inv-emoji-group { margin-bottom: 8px; }
.inv-emoji-grid { display: flex; flex-wrap: wrap; gap: 1px; }
.inv-emoji {
  background: none; border: none; font-size: 1.2rem; cursor: pointer;
  padding: 3px 4px; border-radius: 5px; line-height: 1;
}
.inv-emoji:hover { background: #f5ede8; }
.inv-phrase {
  display: block; width: 100%; text-align: left; background: none;
  border: 1px solid #e5ddd8; border-radius: 6px; padding: 5px 10px;
  font-size: .82rem; color: #5a4a42; cursor: pointer; margin-bottom: 4px;
  transition: background .12s, border-color .12s;
}
.inv-phrase:hover { background: #f8f2ee; border-color: #c9a88a; }

/* --- Preview panel --- */
.inv-fmt-preview {
  min-height: 120px; padding: 1rem 1.2rem; border: 1px solid #e5ddd8;
  border-radius: 8px; background: #faf8f5; color: #4a3a32; line-height: 1.85;
}

/* --- Inline emoji rendered as line art, tinted to the theme accent --- */
.inv-em {
  display: inline-block; width: 1.4em; height: 1.4em;
  vertical-align: -.32em; color: var(--inv-accent, #b8892a);
}
.inv-em svg,
.inv-em img { width: 100%; height: 100%; display: block; }
/* Slight lift over OpenMoji's shipped width 2. Anything heavier merges each
   glyph's internal detail into an illegible blob at these sizes. */
.inv-em svg * { stroke-width: 3 !important; }

/* Panel buttons and editor preview reuse the same artwork */
.inv-emoji svg,
.inv-emoji img { width: 22px; height: 22px; display: block; color: #7a6558; }
.inv-emoji-search {
  width: 100%; padding: .4rem .65rem; margin-bottom: .6rem;
  border: 1px solid #e5ddd8; border-radius: 6px;
  font-family: inherit; font-size: .84rem; color: #5a4a42; background: #fdfbf9;
}
.inv-emoji-search:focus { outline: none; border-color: #c9a88a; background: #fff; }
#emojiResultsGrid { max-height: 190px; overflow-y: auto; }
.inv-emoji svg * { stroke-width: 3 !important; }
.inv-fmt-preview .inv-em { color: #b8892a; }

/* --- Formatting render (invitation view + preview) --- */
.inv-fmt-quote {
  display: block; border-left: 3px solid var(--inv-accent, #c9a88a);
  padding-left: .8rem; margin: .5rem 0; font-style: italic; opacity: .85;
}
.inv-fmt-divider { text-align: center; letter-spacing: .2em; margin: .75rem 0; opacity: .55; }

/* Neutralize browser autofill styling on custom-styled fields */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 5000s ease-in-out 0s;
}