/* ============ It's a Date — shared styles for builder + viewer ============ */

/* self-hosted fonts: faster, GDPR-friendly, works offline */
@font-face {
  font-family: 'Allura';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/allura.woff2') format('woff2');
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/quicksand.woff2') format('woff2');
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- themes ---------- */

body {
  --bg1: #3b0a20; --bg2: #6e1438; --bg3: #93264e;
  --accent: #e0316e; --accent-deep: #b01e54; --accent-soft: #f3cdd9;
  --gold: #f0b95c; --gold-deep: #d99a32;
  --cream: #fff7f9; --ink: #4a1228; --muted: #a06280; --sub-ink: #6d2a45;
}
.theme-ocean {
  --bg1: #061a33; --bg2: #0d3a5c; --bg3: #14647d;
  --accent: #1e9e96; --accent-deep: #11707d; --accent-soft: #c5e6e4;
  --gold: #ffd166; --gold-deep: #e0a93f;
  --cream: #f4fbfb; --ink: #0c3344; --muted: #4f8296; --sub-ink: #1d5468;
}
.theme-sunset {
  --bg1: #2a0e3f; --bg2: #6b2160; --bg3: #c2533a;
  --accent: #f0653f; --accent-deep: #c43d27; --accent-soft: #f8d3c0;
  --gold: #f5b942; --gold-deep: #d49321;
  --cream: #fff8f2; --ink: #4a1d12; --muted: #ad7261; --sub-ink: #6e3322;
}
.theme-blush {
  --bg1: #3d1228; --bg2: #7e2d55; --bg3: #c2628f;
  --accent: #e0568c; --accent-deep: #b13a68; --accent-soft: #f6d3e1;
  --gold: #f5c26b; --gold-deep: #d99a32;
  --cream: #fff6f9; --ink: #4a1228; --muted: #b07a93; --sub-ink: #7e3a58;
}
.theme-midnight {
  --bg1: #0d0a2e; --bg2: #2a1d5c; --bg3: #4a3585;
  --accent: #8d76d8; --accent-deep: #5f4ab0; --accent-soft: #ded6f2;
  --gold: #e8c97a; --gold-deep: #c2a04a;
  --cream: #fbfaff; --ink: #2c2440; --muted: #8a7fa8; --sub-ink: #4a4068;
}
.theme-party {
  --bg1: #2d0a45; --bg2: #7a1f7a; --bg3: #c2399b;
  --accent: #ef5da8; --accent-deep: #c23380; --accent-soft: #f8cfe6;
  --gold: #ffd166; --gold-deep: #e0a93f;
  --cream: #fff7fc; --ink: #45103a; --muted: #b06d9a; --sub-ink: #732a5e;
}
.theme-gold {
  --bg1: #2e1a08; --bg2: #6e4514; --bg3: #a87b2e;
  --accent: #d9a23a; --accent-deep: #a8761c; --accent-soft: #f0ddb8;
  --gold: #f5c26b; --gold-deep: #d99a32;
  --cream: #fffaf0; --ink: #45300d; --muted: #ab8a55; --sub-ink: #6e4e1c;
}
.theme-mint {
  --bg1: #06302a; --bg2: #0d5c4a; --bg3: #19926d;
  --accent: #1fae84; --accent-deep: #117a5e; --accent-soft: #c4e8da;
  --gold: #ffd166; --gold-deep: #e0a93f;
  --cream: #f4fbf8; --ink: #0c3a2e; --muted: #5f9a86; --sub-ink: #1d5c48;
}

/* neutral mode — clean & plain until an occasion is chosen */
.neutral {
  --bg1: #ffffff; --bg2: #f7f5f8; --bg3: #efedf2;
  --accent: #2a2433; --accent-deep: #16121d; --accent-soft: #e7e4ec;
  --gold: #c9c4d2; --gold-deep: #a9a3b5;
  --cream: #ffffff; --ink: #241f2b; --muted: #8a8494; --sub-ink: #4a4554;
}
.neutral .builder-hero h1,
.neutral .tagline,
.neutral .occ-q,
.neutral .occ-sub { color: var(--ink); text-shadow: none; opacity: 1; }
.neutral .feat { background: #fff; border: 1px solid #e7e4ec; color: var(--sub-ink); }
.neutral .cta-sub { color: var(--muted); opacity: 1; }
.neutral .landing-footer,
.neutral .landing-footer a,
.neutral .landing-footer p { color: var(--muted); opacity: 1; }
.neutral .ui-lang button { background: #fff; color: var(--sub-ink); border-color: #ddd9e2; }
.neutral .ui-lang button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.neutral .btn-change-occ,
.neutral .btn-ghost { background: #fff; color: var(--sub-ink); border-color: #ddd9e2; }
.neutral .how-card,
.neutral .occ-card { border: 1px solid #eceaf0; box-shadow: 0 10px 26px rgba(40, 32, 56, .07); }
.neutral .occ-card:hover { box-shadow: 0 16px 34px rgba(40, 32, 56, .13); }
.neutral .btn-main { box-shadow: 0 10px 24px rgba(22, 18, 29, .25); }

html { background: var(--bg1); }

body {
  font-family: 'Quicksand', sans-serif;
  color: var(--ink);
  overflow-x: hidden;
  min-height: 100vh;
  background-color: var(--bg1);   /* iOS 26 Safari samples this for its chrome tint */
}

/* gradient on a fixed layer — background-attachment:fixed is broken on iOS.
   Vertical so the very top is exactly --bg1 and the very bottom exactly --bg3,
   matching the edge tints Safari samples, with no flat bands to show a seam. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 50%, var(--bg3) 100%);
}

/* iOS 26 Safari ignores theme-color and instead tints its top/bottom bars from
   the background-COLOR of fixed elements at the edges (a gradient image is not
   sampled). These invisible strips sit behind the gradient and hand Safari a
   solid colour matching each end, so the chrome blends instead of going white. */
.bar-tint { position: fixed; left: 0; right: 0; height: 10px; z-index: -1; pointer-events: none; }
.bar-tint.top { top: 0; background-color: var(--bg1); }
.bar-tint.bottom { bottom: 0; background-color: var(--bg3); }

/* ---------- background rain layers (viewer) ---------- */

#photo-rain, #heart-rain {
  position: fixed; inset: 0;
  overflow: hidden; pointer-events: none;
  z-index: 0;
}
#heart-rain { z-index: 1; }

.polaroid {
  position: absolute; top: -240px;
  background: #fff;
  padding: 6px 6px 18px 6px;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  opacity: 0;
  animation: fall linear forwards;
  will-change: transform;
}
.polaroid img { display: block; width: 100%; height: auto; border-radius: 2px; }

@keyframes fall {
  0%   { transform: translateY(0) rotate(var(--rot-start)); opacity: 0; }
  6%   { opacity: var(--fade); }
  94%  { opacity: var(--fade); }
  100% { transform: translateY(calc(100vh + 300px)) rotate(var(--rot-end)); opacity: 0; }
}

.heart-bit {
  position: absolute; top: -40px;
  font-size: 18px; opacity: 0;
  animation: fall linear forwards;
  will-change: transform;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

/* ---------- layout ---------- */

#app {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  padding: 24px 14px;
}

.card {
  width: 100%; max-width: 480px;
  background: color-mix(in srgb, var(--cream) 94%, transparent);
  backdrop-filter: blur(6px);
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  padding: 36px 28px 30px;
  text-align: center;
}

.step { display: none; }
.step.active { display: block; margin-top: auto; margin-bottom: auto; animation: pop .45s cubic-bezier(.18,.89,.32,1.18); }

@keyframes pop {
  from { transform: translateY(24px) scale(.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* ---------- typography ---------- */

.script-title {
  font-family: 'Allura', cursive;
  font-size: 3.2rem; font-weight: 400;
  color: var(--accent-deep);
  line-height: 1.1; margin-bottom: 10px;
}
.script-sub {
  font-family: 'Allura', cursive;
  font-size: 2.3rem; font-weight: 400;
  color: var(--accent-deep);
  margin-bottom: 6px;
}
.script-sign { font-family: 'Allura', cursive; font-size: 2rem; color: var(--accent-deep); }

.lead { font-size: 1.12rem; font-weight: 600; margin-bottom: 10px; }
.sub  { font-size: .98rem; line-height: 1.55; margin-bottom: 20px; color: var(--sub-ink); }

.envelope { font-size: 3.2rem; margin-bottom: 6px; animation: bounce 2.2s ease-in-out infinite; }
@keyframes bounce {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-10px) rotate(4deg); }
}

/* ---------- progress hearts ---------- */

.progress { display: flex; justify-content: center; gap: 7px; margin-bottom: 14px; font-size: .85rem; }
.progress span { filter: grayscale(1) opacity(.35); }
.progress span.done { filter: none; }

/* ---------- buttons & choices ---------- */

.btn-main {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.1rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  border: none; border-radius: 50px;
  padding: 15px 34px; cursor: pointer;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent-deep) 45%, transparent);
  transition: transform .15s, box-shadow .15s;
  margin-top: 8px;
}
.btn-main:hover { transform: translateY(-2px) scale(1.03); }
.btn-main:active { transform: scale(.97); }
.btn-main:disabled { opacity: .5; cursor: default; transform: none; }
.btn-main.small { font-size: .95rem; padding: 12px 26px; margin-top: 0; }

.btn-back {
  display: inline-block; margin-top: 18px;
  background: none; border: none;
  color: var(--muted);
  font-family: 'Quicksand', sans-serif;
  font-size: .85rem; font-weight: 600; cursor: pointer;
}
.btn-back:hover { color: var(--accent-deep); }

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.choice {
  font-family: 'Quicksand', sans-serif;
  font-size: .92rem; font-weight: 600;
  color: var(--ink); background: #fff;
  border: 2px solid var(--accent-soft);
  border-radius: 16px; padding: 13px 10px;
  cursor: pointer; transition: all .15s; line-height: 1.35;
}
.choice:hover { border-color: var(--accent); transform: translateY(-2px); }
.choice.selected {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff; border-color: var(--accent-deep); transform: scale(1.04);
}
.choice.span2 { grid-column: 1 / -1; border-style: dashed; }
/* an odd last item stretches the full row instead of sitting alone bottom-left */
.choice-grid > .fullrow, .phone-card .p-choices > .fullrow { grid-column: 1 / -1; }
.choice.big { font-size: 2rem; padding: 18px 10px 14px; }
.choice.big span { display: block; font-size: 1rem; font-weight: 700; margin-top: 6px; }
.choice.big span small { display: block; font-size: .72rem; font-weight: 500; opacity: .75; margin-top: 2px; }

/* ---------- date grid ---------- */

.date-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; max-height: 300px; overflow-y: auto; padding: 4px;
}
.date-card {
  font-family: 'Quicksand', sans-serif;
  background: #fff; border: 2px solid var(--accent-soft);
  border-radius: 14px; padding: 9px 4px;
  cursor: pointer; transition: all .15s; color: var(--ink);
}
.date-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.date-card.selected {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff; border-color: var(--accent-deep); transform: scale(1.06);
}
.date-card .dow { display: block; font-size: .68rem; font-weight: 600; text-transform: uppercase; opacity: .8; }
.date-card .num { display: block; font-size: 1.45rem; font-weight: 700; line-height: 1.15; }
.date-card .mon { display: block; font-size: .7rem; font-weight: 600; }

/* ---------- misc viewer bits ---------- */

.price-tag {
  display: inline-block;
  background: #fff3da; border: 2px dashed var(--gold);
  border-radius: 14px; padding: 10px 18px;
  font-size: .95rem; margin-bottom: 20px;
  transform: rotate(-2deg); color: #6e4a14;
}

.custom-idea { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; animation: pop .35s; }
.custom-idea[hidden] { display: none; }
.custom-idea input {
  font-family: 'Quicksand', sans-serif;
  font-size: 1rem; font-weight: 600; color: var(--ink);
  background: #fff; border: 2px solid var(--accent-soft);
  border-radius: 50px; padding: 13px 20px;
  outline: none; text-align: center;
}
.custom-idea input:focus { border-color: var(--accent); }

.gate-error { min-height: 22px; margin-top: 12px; font-size: .9rem; font-weight: 700; color: var(--accent-deep); }
body.locked .hero-extras { display: none; }
body.locked .step.active { margin-top: auto; }

.wheel-wrap { position: relative; width: 280px; height: 280px; margin: 6px auto 14px; }
#wheel { width: 280px; height: 280px; }
.wheel-pointer {
  position: absolute; top: -14px; left: 50%;
  transform: translateX(-50%);
  font-size: 1.7rem; color: var(--gold);
  text-shadow: 0 2px 6px rgba(0,0,0,.4); z-index: 3;
}
.wheel-result { min-height: 64px; margin-top: 14px; font-size: 1.05rem; font-weight: 700; }
.wheel-result .silly {
  display: block; font-family: 'Allura', cursive;
  font-size: 2rem; font-weight: 400; color: var(--accent-deep);
  animation: sillyPop .6s cubic-bezier(.18,.89,.32,1.4);
}
.wheel-result .verdict { display: block; margin-top: 4px; animation: sillyPop .6s .15s cubic-bezier(.18,.89,.32,1.4) backwards; }
@keyframes sillyPop {
  from { transform: scale(.3) rotate(-8deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.wheel-wrap.shake, .card.shake { animation: shake .5s ease-in-out; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px) rotate(-2deg); }
  40% { transform: translateX(7px) rotate(2deg); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

.summary-list { list-style: none; text-align: left; margin: 6px 0 18px; }
.summary-list li {
  background: #fff; border: 1.5px solid var(--accent-soft);
  border-radius: 14px; padding: 11px 16px; margin-bottom: 8px;
  font-size: .95rem; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.summary-list li .label { font-weight: 500; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0; }
.summary-list li .value { font-weight: 700; text-align: right; }

.send-status { font-size: .85rem; color: var(--muted); min-height: 22px; margin-bottom: 10px; }
.closing { font-size: 1.05rem; line-height: 1.6; }

.btn-gallery {
  margin-top: 18px;
  font-family: 'Quicksand', sans-serif;
  font-size: .9rem; font-weight: 700; color: var(--accent-deep);
  background: none; border: 2px solid var(--accent);
  border-radius: 50px; padding: 11px 22px;
  cursor: pointer; transition: all .15s;
}
.btn-gallery:hover { background: var(--accent); color: #fff; }
body.gallery-mode #app { display: none; }
body.gallery-mode .polaroid { --fade: 1 !important; }
#gallery-exit {
  display: none; position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%); z-index: 5;
  font-family: 'Quicksand', sans-serif;
  font-size: .9rem; font-weight: 700; color: var(--accent-deep);
  background: color-mix(in srgb, var(--cream) 94%, transparent);
  border: none; border-radius: 50px; padding: 12px 24px;
  cursor: pointer; box-shadow: 0 10px 28px rgba(0,0,0,.4);
}
body.gallery-mode #gallery-exit { display: block; }

.burst-heart { position: fixed; font-size: 22px; z-index: 10; pointer-events: none; animation: burst 1.6s ease-out forwards; }
@keyframes burst {
  from { transform: translate(0,0) scale(.6) rotate(0); opacity: 1; }
  to   { transform: translate(var(--bx), var(--by)) scale(1.3) rotate(var(--br)); opacity: 0; }
}

/* ============================ builder ============================ */

.builder-wrap {
  position: relative; z-index: 2;
  max-width: 680px; margin: 0 auto;
  /* top padding clears the corner buttons (home + language) and the notch */
  padding: calc(env(safe-area-inset-top) + 56px) 16px 80px;
}
.builder-hero { text-align: center; color: #fff; margin-bottom: 26px; }
.builder-hero h1 {
  font-family: 'Allura', cursive;
  font-size: 4rem; font-weight: 400;
  text-shadow: 0 4px 18px rgba(0,0,0,.35);
}
#logo-home { cursor: pointer; display: inline-block; }

.home-btn {
  position: absolute; top: calc(env(safe-area-inset-top) + 14px); left: 16px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16); color: #fff;
  border: 1px solid rgba(255,255,255,.4); border-radius: 20px;
  padding: 7px 13px; cursor: pointer;
}
.home-btn svg { display: block; }

/* back / home shown over the creator's own preview (?preview=1) */
.pv-btn {
  position: fixed; z-index: 70; top: calc(env(safe-area-inset-top) + 12px);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18); color: #fff;
  border: 1px solid rgba(255,255,255,.45); border-radius: 20px;
  padding: 7px 14px; cursor: pointer; font-size: 1.05rem; font-weight: 800; line-height: 1;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.pv-btn[hidden] { display: none; }   /* otherwise the class overrode [hidden] and showed on real invitations */
.pv-back { left: 14px; }
.pv-home { right: 14px; }
.pv-home svg { display: block; }
.neutral .home-btn { background: #fff; border-color: #ddd9e2; color: var(--sub-ink); }
.builder-hero .tagline { font-size: 1.05rem; font-weight: 600; opacity: .92; max-width: 460px; margin: 6px auto 10px; line-height: 1.5; }
body.on-form .tagline { display: none; }   /* the pitch belongs on the landing, not mid-build */
.builder-hero .how { font-size: .85rem; font-weight: 600; opacity: .75; }

.ui-lang { position: absolute; top: calc(env(safe-area-inset-top) + 14px); right: 16px; display: flex; gap: 6px; z-index: 3; }
.ui-lang button {
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: .8rem;
  background: rgba(255,255,255,.16); color: #fff;
  border: 1px solid rgba(255,255,255,.4); border-radius: 20px;
  padding: 5px 12px; cursor: pointer;
}
.ui-lang button.on { background: #fff; color: var(--accent-deep); }

.bsection {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--cream) 95%, transparent);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 14px 36px rgba(0,0,0,.25);
  padding: 22px 22px 20px;
  margin-bottom: 16px;
}
/* big translucent occasion emoji watermark in the corner of every section */
.bsection::before {
  content: var(--occ-emoji, "");
  position: absolute;
  top: -14px; right: -10px;
  font-size: 5rem;
  opacity: .13;
  transform: rotate(16deg);
  pointer-events: none;
}

/* bouncing emoji banner above the form */
.vibe-banner {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 2rem;
  margin: 4px 0 18px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.3));
}
.vibe-banner span {
  display: inline-block;
  animation: bounce 2.2s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.vibe-banner.small { font-size: 1.4rem; gap: 10px; margin: 2px 0 10px; }
.bsection h2 {
  font-family: 'Allura', cursive;
  font-size: 1.9rem; font-weight: 400;
  color: var(--accent-deep); margin-bottom: 12px;
}

.field { margin-bottom: 14px; text-align: left; }
.field label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: 5px; }
.field .help { font-size: .78rem; color: var(--muted); margin-top: 5px; line-height: 1.45; }

.field input[type="text"], .field input[type="email"], .field input[type="date"],
.field textarea, .field select {
  width: 100%;
  font-family: 'Quicksand', sans-serif;
  font-size: 16px; font-weight: 600; color: var(--ink);   /* >=16px so iOS never auto-zooms on focus */
  background: #fff; border: 2px solid var(--accent-soft);
  border-radius: 12px; padding: 10px 14px; outline: none;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); }
.field textarea { min-height: 84px; resize: vertical; }
.field.invalid input, .field.invalid textarea { border-color: #d33; background: #fff5f5; }

/* belt-and-braces: every typed field is >=16px so iOS Safari never zooms on focus */
input[type="text"], input[type="email"], input[type="date"], input[type="time"],
input[type="tel"], input[type="number"], input[type="search"], textarea, select {
  font-size: 16px;
}

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }
/* grid/flex children may never force themselves wider than their column */
.row2 > .field, .field input, .field textarea, .field select { min-width: 0; max-width: 100%; }
/* ---------- custom date-range calendar ---------- */
.cal {
  background: #fff;
  border: 2px solid var(--accent-soft);
  border-radius: 16px;
  padding: 12px 12px 10px;
  user-select: none;
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-title {
  font-weight: 700; font-size: .98rem; color: var(--ink);
  text-transform: capitalize;
}
.cal-nav {
  width: 32px; height: 32px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--accent-soft); color: var(--accent-deep);
  font-size: 1.1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.cal-nav:hover { background: var(--accent); color: #fff; }
.cal-dow, .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow { margin-bottom: 4px; }
.cal-dow span {
  text-align: center; font-size: .68rem; font-weight: 700;
  color: var(--muted); text-transform: uppercase; padding: 2px 0;
}
.cal-day {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Quicksand', sans-serif;
  font-size: .85rem; font-weight: 600; color: var(--ink);
  background: none; border: none; cursor: pointer;
  border-radius: 10px;
  transition: background .1s, color .1s;
}
.cal-day.blank { visibility: hidden; cursor: default; }
.cal-day:hover:not(.disabled):not(.blank) { background: var(--accent-soft); }
.cal-day.disabled { color: #d9d2dd; cursor: default; }
.cal-day.today:not(.sel-from):not(.sel-to) { box-shadow: inset 0 0 0 2px var(--accent-soft); }
.cal-day.in-range { background: var(--accent-soft); border-radius: 0; }
.cal-day.sel-from, .cal-day.sel-to {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #fff;
}
.cal-day.sel-from { border-radius: 10px 0 0 10px; }
.cal-day.sel-to { border-radius: 0 10px 10px 0; }
.cal-day.sel-from.sel-to { border-radius: 10px; }      /* single day selected */
.cal-summary {
  margin-top: 10px; text-align: center;
  font-size: .85rem; font-weight: 700; color: var(--accent-deep);
  min-height: 18px;
}
.field input[type="date"] { width: 100%; }

.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  font-family: 'Quicksand', sans-serif;
  font-size: .85rem; font-weight: 600; color: var(--ink);
  background: #fff; border: 2px solid var(--accent-soft);
  border-radius: 30px; padding: 8px 14px;
  cursor: pointer; transition: all .12s; user-select: none;
}
.pill:hover { border-color: var(--accent); }
.pill.on {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff; border-color: var(--accent-deep);
}

/* add a custom time: the "➕ Legg til tid" button opens a little picker menu */
.time-add { justify-content: flex-start; align-items: stretch; }
.time-add button { white-space: nowrap; }

.time-popover {
  gap: 10px; align-items: center;
  margin-top: 10px; padding: 12px;
  background: #fff; border: 2px solid var(--accent-soft); border-radius: 14px;
  box-shadow: 0 10px 28px rgba(22, 18, 29, .14);
}
.time-popover:not([hidden]) { display: flex; }   /* otherwise the class overrode [hidden] */
body.touch .time-popover { display: none; }       /* phone uses the native wheel, not the dropdowns */

/* ---------- photo upload (builder) ---------- */
.btn-photo-add {
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: .95rem;
  background: #fff; color: var(--accent-deep);
  border: 2px solid var(--accent-soft); border-radius: 12px;
  padding: 11px 18px; cursor: pointer;
}
.btn-photo-add:hover { border-color: var(--accent); }
.photo-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.photo-thumb {
  position: relative; width: 74px; height: 74px;
  border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(22,18,29,.18);
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-thumb .rm {
  position: absolute; top: 3px; right: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff; border: none; cursor: pointer;
  font-size: .75rem; font-weight: 800; line-height: 20px; text-align: center; padding: 0;
}
.photo-busy { font-size: .82rem; color: var(--muted); margin-top: 10px; }
.photo-limit { font-size: .9rem; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.photo-note {
  font-size: .85rem; font-weight: 700; color: var(--accent); margin-top: 10px;
  background: var(--accent-soft); border-radius: 12px; padding: 8px 12px;
}
.photo-note[hidden] { display: none; }
.time-select {
  flex: 1 1 0; min-width: 0;
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 16px; color: var(--ink);
  background: #fff; border: 2px solid var(--accent-soft);
  border-radius: 12px; padding: 11px 12px; cursor: pointer; outline: none;
}
.time-select:focus { border-color: var(--accent); }
.time-colon { flex: 0 0 auto; font-weight: 800; font-size: 1.1rem; color: var(--accent-deep); }

/* on touch the native time input sits invisibly over the "Add a time" button,
   so tapping the button opens the native time wheel; its ✓ adds the time.
   on desktop it's hidden and the button opens the dropdown menu instead. */
.time-trigger { position: relative; display: inline-block; }
.time-overlay-input { display: none; }
body.touch .time-overlay-input {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
}

/* chips (places etc.): pop in, removable with ✕ */
.pill.chip { animation: chipIn .3s cubic-bezier(.18,.89,.32,1.4); cursor: default; }
.chip-x { opacity: .75; font-weight: 800; margin-left: 5px; cursor: pointer; }
.chip-x:hover { opacity: 1; }
@keyframes chipIn {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.check-line { display: flex; align-items: flex-start; gap: 9px; font-size: .9rem; font-weight: 600; cursor: pointer; margin-bottom: 10px; }
.check-line input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent-deep); cursor: pointer; }

.subfields { margin: 10px 0 4px 4px; padding-left: 14px; border-left: 3px solid var(--accent-soft); }

.add-row { display: flex; gap: 8px; margin-top: 10px; }
.add-row input { flex: 1; }
.add-row button {
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: .85rem;
  background: var(--accent-deep); color: #fff; border: none;
  border-radius: 12px; padding: 0 18px; cursor: pointer;
}

.theme-pick { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-card {
  flex: 1; min-width: 130px;
  border: 3px solid transparent; border-radius: 16px;
  padding: 10px; cursor: pointer; text-align: center;
  font-weight: 700; font-size: .85rem; color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.theme-card.on { border-color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.theme-card .swatch { height: 44px; border-radius: 10px; margin-bottom: 6px; }
.swatch-rose     { background: linear-gradient(135deg, #3b0a20, #93264e); }
.swatch-ocean    { background: linear-gradient(135deg, #061a33, #14647d); }
.swatch-sunset   { background: linear-gradient(135deg, #2a0e3f, #c2533a); }
.swatch-blush    { background: linear-gradient(135deg, #3d1228, #c2628f); }
.swatch-midnight { background: linear-gradient(135deg, #0d0a2e, #4a3585); }
.swatch-party    { background: linear-gradient(135deg, #2d0a45, #c2399b); }
.swatch-gold     { background: linear-gradient(135deg, #2e1a08, #a87b2e); }
.swatch-mint     { background: linear-gradient(135deg, #06302a, #19926d); }
.theme-card { background: rgba(0,0,0,.18); }

/* ---------- occasion landing screen ---------- */

.bscreen { display: none; }
.bscreen.active { display: block; animation: pop .45s cubic-bezier(.18,.89,.32,1.18); }

.occ-q {
  font-family: 'Allura', cursive;
  font-size: 2.6rem; font-weight: 400;
  color: #fff; text-align: center;
  text-shadow: 0 4px 16px rgba(0,0,0,.35);
  margin-bottom: 4px;
}
.occ-sub { text-align: center; color: #fff; opacity: .85; font-weight: 600; font-size: .95rem; margin-bottom: 22px; }

.occ-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 560px) { .occ-grid { grid-template-columns: repeat(2, 1fr); } }

.occ-card {
  background: color-mix(in srgb, var(--cream) 94%, transparent);
  border: 2px solid rgba(255,255,255,.5);
  border-radius: 20px;
  padding: 22px 12px 18px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  transition: transform .15s, box-shadow .15s;
}
.occ-card:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.occ-card .occ-emoji { font-size: 2.6rem; display: block; margin-bottom: 8px; }
.occ-card .occ-label { font-weight: 700; font-size: 1rem; color: var(--ink); display: block; }
.occ-card .occ-desc { font-size: .78rem; font-weight: 500; color: var(--muted); display: block; margin-top: 3px; }

/* ---------- landing page ---------- */

.cta-wrap { text-align: center; margin: 10px 0 34px; }
.cta-big { font-size: 1.3rem; padding: 19px 46px; }
.cta-sub { color: #fff; opacity: .75; font-size: .85rem; font-weight: 600; margin-top: 12px; }

.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 34px;
}
@media (max-width: 560px) { .how-grid { grid-template-columns: 1fr; } }

.how-card {
  background: color-mix(in srgb, var(--cream) 94%, transparent);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 20px;
  padding: 20px 16px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
.how-card .how-emoji { font-size: 2.2rem; display: block; margin-bottom: 8px; }
.how-card h3 { font-size: 1rem; font-weight: 700; color: var(--accent-deep); margin-bottom: 6px; }
.how-card p { font-size: .85rem; line-height: 1.5; color: var(--sub-ink); }

.feat-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 34px;
}
.feat {
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 30px;
  padding: 9px 16px;
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
  text-align: center;   /* keeps any wrap balanced instead of a ragged second line */
}

.landing-footer { text-align: center; color: #fff; margin-top: 8px; }
.landing-footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 22px; margin-bottom: 12px; }
.landing-footer a { color: #fff; opacity: .8; font-size: .85rem; font-weight: 600; text-decoration: underline; cursor: pointer; }
.landing-footer a:hover { opacity: 1; }
.landing-footer p { font-size: .8rem; opacity: .55; font-weight: 500; }

/* ---------- modal (terms / privacy) ---------- */

.modal-back {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 50;
  align-items: center; justify-content: center;
  padding: 20px;
}
.modal-back.show { display: flex; }
.modal-card {
  max-width: 560px; max-height: 80vh; overflow-y: auto;
  background: var(--cream);
  border-radius: 20px;
  padding: 28px 26px 24px;
  text-align: left;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  animation: pop .35s cubic-bezier(.18,.89,.32,1.18);
}
.modal-card h3 {
  font-family: 'Allura', cursive;
  font-size: 1.9rem; font-weight: 400;
  color: var(--accent-deep);
  margin-bottom: 10px;
}
.modal-card p { font-size: .9rem; line-height: 1.6; color: var(--sub-ink); margin-bottom: 12px; }
.modal-card .btn-main { display: block; margin: 6px auto 0; }

.btn-change-occ {
  display: inline-block; margin-bottom: 14px;
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.4); border-radius: 20px;
  font-family: 'Quicksand', sans-serif; font-size: .85rem; font-weight: 700;
  padding: 7px 16px; cursor: pointer;
}
.btn-change-occ:hover { background: rgba(255,255,255,.28); }

.gen-area { text-align: center; }
.errbox {
  display: none; text-align: left;
  background: #fff2f2; border: 2px solid #e99;
  border-radius: 14px; padding: 12px 16px; margin-bottom: 14px;
  font-size: .88rem; font-weight: 600; color: #a22;
}
.errbox.show { display: block; }
.errbox ul { margin: 6px 0 0 18px; }

.linkbox { display: none; margin-top: 18px; text-align: left; }
.linkbox.show { display: block; animation: pop .4s; }
.linkbox .link-url {
  width: 100%;
  font-family: monospace; font-size: .8rem;
  background: #fff; border: 2px dashed var(--accent);
  border-radius: 12px; padding: 11px 13px;
  word-break: break-all; color: var(--ink);
  margin-bottom: 10px;
}
.linkbox .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.linkbox .mine-link { display: inline-block; margin-top: 14px; text-decoration: none; text-align: center; }

/* ================= recipient experience polish ================= */

/* staggered reveal of card contents on each step */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.step.active > * { animation: fadeUp .55s cubic-bezier(.22,.9,.35,1.2) backwards; }
.step.active > *:nth-child(1) { animation-delay: .08s; }
.step.active > *:nth-child(2) { animation-delay: .17s; }
.step.active > *:nth-child(3) { animation-delay: .26s; }
.step.active > *:nth-child(4) { animation-delay: .35s; }
.step.active > *:nth-child(5) { animation-delay: .44s; }
.step.active > *:nth-child(6) { animation-delay: .53s; }
.step.active > *:nth-child(7) { animation-delay: .62s; }
.step.active > *:nth-child(8) { animation-delay: .71s; }
.step.active > .envelope { animation: fadeUp .55s .08s backwards, bounce 2.2s .7s ease-in-out infinite; }

/* sealed envelope intro */
.env {
  position: relative;
  width: 240px; height: 165px;
  margin: 14px auto 20px;
  cursor: pointer;
  animation: envFloat 3.2s ease-in-out infinite;
  transition: transform .5s, opacity .5s;
}
@keyframes envFloat {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-9px) rotate(1.5deg); }
}
.env-body {
  position: absolute; inset: 0;
  background: #fffdf8;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.3);
}
.env-flap {
  position: absolute; top: 0; left: 0;
  width: 0; height: 0;
  border-left: 120px solid transparent;
  border-right: 120px solid transparent;
  border-top: 88px solid var(--accent-soft);
  transform-origin: top center;
  transition: transform .55s ease, opacity .4s;
  z-index: 1;
}
.env-seal {
  position: absolute; left: 50%; top: 84px;
  transform: translate(-50%, -50%);
  width: 58px; height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--accent), var(--accent-deep));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  transition: transform .4s, opacity .4s;
}
.env.open { animation: none; transform: scale(1.15); opacity: 0; }
.env.open .env-flap { transform: rotateX(170deg); opacity: .4; }
.env.open .env-seal { transform: translate(-50%, -50%) scale(.2); opacity: 0; }

/* wheel drama */
.wheel-pointer.spinning { animation: tick .11s linear infinite; }
@keyframes tick {
  0%, 100% { transform: translateX(-50%) rotate(0); }
  50%      { transform: translateX(-50%) rotate(-16deg); }
}
.wheel-wrap.winner #wheel { animation: glowPulse 1.1s ease-in-out 2; }
@keyframes glowPulse {
  0%, 100% { filter: none; }
  50%      { filter: drop-shadow(0 0 28px var(--gold)); }
}

/* little emoji pop on every tap */
.tap-pop {
  position: fixed;
  font-size: 17px;
  z-index: 30;
  pointer-events: none;
  animation: burst .75s ease-out forwards;
}

/* "It's official!" stamp on the summary */
#step-summary { position: relative; overflow: hidden; }
.stamp {
  position: absolute; top: 52px; right: 12px;
  border: 3px solid var(--accent-deep);
  color: var(--accent-deep);
  background: rgba(255,255,255,.55);
  font-weight: 800; font-size: .8rem;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 10px;
  transform: rotate(12deg);
  opacity: .9;
  animation: stampIn .45s 1.1s cubic-bezier(.18,.89,.32,1.4) backwards;
}
@keyframes stampIn {
  from { transform: rotate(-8deg) scale(3); opacity: 0; }
  to   { transform: rotate(12deg) scale(1); opacity: .9; }
}

.made-with { margin-top: 16px; font-size: .78rem; color: var(--muted); }
.made-with a { color: var(--accent-deep); font-weight: 700; }

/* ================= builder wizard ================= */

.wizard-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.wizard-steps { display: flex; gap: 6px; }
.wdot {
  width: 27px; height: 27px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; color: #fff;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.35);
  font-family: 'Quicksand', sans-serif;
  cursor: pointer; padding: 0; transition: transform .12s;
}
.wdot:hover { transform: scale(1.12); }
.wdot.cur { background: #fff; color: var(--accent-deep); }
.wdot.done { background: var(--accent); border-color: transparent; }
.neutral .wdot { background: #eceaf0; color: var(--muted); border-color: #ddd9e2; }
.neutral .wdot.cur { background: var(--ink); color: #fff; border-color: var(--ink); }
.neutral .wdot.done { background: var(--accent); color: #fff; border-color: transparent; }
.wizard-label { color: #fff; font-weight: 700; font-size: .95rem; }
.wizard-reassure { color: rgba(255,255,255,.82); font-size: .8rem; line-height: 1.35; margin: -4px 0 16px; }
.neutral .wizard-reassure { color: var(--muted); }

.wstep { display: none; }
.wstep.active { display: block; animation: pop .4s cubic-bezier(.18,.89,.32,1.18); }

.finish-shortcut { text-align: center; margin: 16px 0 10px; }
.finish-shortcut[hidden] { display: none; }
.finish-shortcut .finish-hint { display: block; color: rgba(255,255,255,.82); font-size: .78rem; line-height: 1.3; margin-top: 7px; }
.neutral .finish-shortcut .finish-hint { color: var(--muted); }
.wizard-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; }
.btn-ghost {
  font-family: 'Quicksand', sans-serif;
  font-size: .95rem; font-weight: 700; color: #fff;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50px; padding: 12px 26px;
  cursor: pointer;
}
.btn-ghost:hover { background: rgba(255,255,255,.28); }

/* live phone preview */
.form-cols { display: grid; grid-template-columns: 1fr; gap: 18px; }
.preview-pane { display: none; }
@media (min-width: 920px) {
  .form-cols { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .preview-pane { display: block; position: sticky; top: 18px; }
}
.phone {
  width: 100%; max-width: 270px;
  aspect-ratio: 9 / 17;
  margin: 0 auto;
  border-radius: 36px;
  border: 8px solid rgba(255,255,255,.85);
  background: linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 45%, var(--bg3) 100%);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  position: relative;
  overflow: hidden;
}
/* emojis drizzling inside the preview phones */
.phone-rain { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.phone-rain span {
  position: absolute; top: -12%;
  animation: phoneFall linear infinite;
  opacity: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
@keyframes phoneFall {
  0%   { top: -12%; opacity: 0; }
  12%  { opacity: .85; }
  88%  { opacity: .85; }
  100% { top: 112%; opacity: 0; }
}
.phone-card {
  position: relative; z-index: 1;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  background: color-mix(in srgb, var(--cream) 94%, transparent);
  border-radius: 18px;
  padding: 20px 12px;
  text-align: center;
}
.phone-card .p-env { font-size: 1.8rem; animation: bounce 2.2s ease-in-out infinite; }
.phone-card .p-title { font-family: 'Allura', cursive; font-size: 1.5rem; color: var(--accent-deep); margin: 3px 0 2px; }
.phone-card .p-vibe { font-size: .8rem; letter-spacing: 4px; margin-bottom: 4px; }
.phone-card .p-lead { font-size: .62rem; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.phone-card .p-sub { font-size: .57rem; font-weight: 500; color: var(--sub-ink); line-height: 1.5; margin-bottom: 10px; }
.phone-card .p-btn {
  display: inline-block;
  font-size: .62rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  border-radius: 20px; padding: 7px 15px;
}
.preview-note { text-align: center; color: #fff; opacity: .72; font-size: .75rem; font-weight: 600; margin-top: 12px; }
.neutral .preview-note { color: var(--muted); opacity: 1; }

/* mini versions of the invitation screens inside the phone */
.phone-card .p-script { font-family: 'Allura', cursive; font-size: 1.15rem; color: var(--accent-deep); margin: 2px 0; }
.phone-card .p-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 7px 0 2px; }
.phone-card .p-date { background: #fff; border: 1px solid var(--accent-soft); border-radius: 7px; padding: 4px 2px; font-size: .45rem; font-weight: 600; color: var(--ink); text-transform: uppercase; }
.phone-card .p-date .d { display: block; font-size: .68rem; font-weight: 700; }
.phone-card .p-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 7px 0 2px; }
.phone-card .p-choice { background: #fff; border: 1px solid var(--accent-soft); border-radius: 8px; padding: 6px 3px; font-size: .5rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.phone-card .p-choice.span2 { grid-column: 1 / -1; border-style: dashed; }
.phone-card .p-choice.big { font-size: .85rem; padding: 8px 3px 6px; }
.phone-card .p-choice.big small { display: block; font-size: .5rem; font-weight: 700; }
.phone-card .p-pointer { font-size: .8rem; color: var(--gold); line-height: 1; margin-top: 5px; }
.phone-card .p-wheel { width: 92px; height: 92px; border-radius: 50%; margin: 2px auto 6px; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.3); }
.phone-card .p-rows { display: flex; flex-direction: column; gap: 3px; margin: 7px 0; }
.phone-card .p-row { background: #fff; border: 1px solid var(--accent-soft); border-radius: 7px; padding: 4px 8px; font-size: .5rem; font-weight: 600; color: var(--ink); display: flex; justify-content: space-between; gap: 6px; }
.phone-card .p-row .v { font-weight: 700; }
.phone-card .p-tag { display: inline-block; background: #fff3da; border: 1px dashed var(--gold); border-radius: 8px; padding: 3px 8px; font-size: .5rem; font-weight: 600; color: #6e4a14; margin: 4px 0; transform: rotate(-1.5deg); }
.phone-card .p-inputmock { background: #fff; border: 1px solid var(--accent-soft); border-radius: 20px; padding: 6px 9px; font-size: .52rem; font-weight: 600; color: var(--muted); margin: 7px 0 5px; }
.phone-card .p-sign { font-family: 'Allura', cursive; font-size: .95rem; color: var(--accent-deep); margin-top: 4px; }
.phone-card .p-made { font-size: .42rem; color: var(--muted); margin-top: 6px; }

/* ---------- mobile floating live preview (FaceTime-style PiP) ---------- */

.pip { display: none; }
.pip.gone { display: none !important; }   /* thrown off-screen; the launch button takes over */
.pip-launch { display: none; }
/* only on phones (where the sidebar preview is hidden) and while building */
@media (max-width: 919px) {
  body.on-form .pip { display: block; }
  body.on-form .pip-launch.show { display: inline-flex; }
  /* room at the bottom so the Next/Back buttons can always scroll clear of the
     floating preview parked in the bottom-right corner */
  body.on-form .builder-wrap { padding-bottom: 360px; }
}

/* the little "bring the preview back" button that appears once it's dismissed */
.pip-launch {
  position: fixed; z-index: 60; bottom: 96px; left: 12px;
  align-items: center; gap: 6px;
  font-family: 'Quicksand', sans-serif; font-weight: 800; font-size: .82rem;
  color: #fff; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  border: none; border-radius: 22px; padding: 11px 17px;
  box-shadow: 0 10px 26px rgba(0,0,0,.4); cursor: pointer;
  animation: pipPulse 2.4s ease-in-out infinite;
}

/* the creator's photos drifting inside the preview phones, like mini polaroids */
.phone-rain img.ph-photo {
  position: absolute; top: -15%;
  border: 2px solid #fff; border-radius: 3px;
  box-shadow: 0 2px 7px rgba(0,0,0,.45); object-fit: cover;
  animation: phoneFall linear infinite; opacity: 0;
}

.pip {
  position: fixed; z-index: 60;
  touch-action: none;            /* we handle dragging ourselves */
  user-select: none; -webkit-user-select: none;   /* dragging never selects the preview text */
  transition: width .25s, height .25s, top .25s, left .25s, right .25s, bottom .25s;
}
.pip .phone { width: 240px; max-width: none; margin: 0; }
.pip-stage { transform-origin: top left; }
.pip .pip-hint, .pip .pip-shrink { position: absolute; }

/* ----- mini (corner thumbnail) ----- */
.pip.mini { width: 122px; height: 230px; cursor: grab; }
.pip.mini .pip-stage { transform: scale(0.5); }       /* 240 → 120 wide */
.pip.mini .phone { box-shadow: 0 12px 30px rgba(0,0,0,.5); pointer-events: none; }
.pip.mini.dragging { cursor: grabbing; transition: none; }
.pip.mini .pip-shrink { display: none; }
.pip.mini .pip-hint {
  left: 0; right: 0; bottom: -22px; text-align: center;
  color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); pointer-events: none;
}
.pip.mini .pip-hint b { display: block; font-size: .62rem; font-weight: 800; }
.pip.mini .pip-hint em { display: block; font-size: .54rem; font-weight: 600; font-style: normal; opacity: .85; }
/* "tap to enlarge" badge on the mini — signals it's interactive */
.pip-expand {
  position: absolute;
  top: 5px; right: 5px;
  width: 26px; height: 26px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: #fff; color: var(--accent-deep);
  box-shadow: 0 3px 10px rgba(0,0,0,.4);
  pointer-events: none;                 /* let the tap reach the pip itself */
  animation: pipPulse 2s ease-in-out infinite;
}
.pip-expand svg, .pip-shrink svg { width: 14px; height: 14px; display: block; }
.pip.mini .pip-expand { display: flex; }
@keyframes pipPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 3px 10px rgba(0,0,0,.4); }
  50%      { transform: scale(1.14); box-shadow: 0 4px 14px rgba(0,0,0,.5); }
}

/* corners */
.pip.corner-tl { top: 70px; left: 12px; }
.pip.corner-tr { top: 70px; right: 12px; }
.pip.corner-bl { bottom: 96px; left: 12px; }
.pip.corner-br { bottom: 96px; right: 12px; }

/* ----- big (tap to enlarge) ----- */
.pip.big {
  width: 240px; height: 460px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  right: auto; bottom: auto;
}
.pip.big .pip-stage { transform: scale(1); }
.pip.big .phone { box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.pip.big .pip-hint { display: none; }
.pip.big .pip-shrink {
  top: -14px; right: -14px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  border: none; cursor: pointer;
  background: #fff; color: var(--accent-deep);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
}
.pip-backdrop {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(0,0,0,.45);
  display: none;
}
.pip-backdrop.show { display: block; }

/* drag handle on the mini preview — signals it can be moved */
.pip-grip { display: none; }
.pip.mini .pip-grip {
  display: block; position: absolute;
  top: 6px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 5px; border-radius: 3px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 1px 4px rgba(0,0,0,.45);
  pointer-events: none; z-index: 2;
}

/* "find it again here" pointer shown at the "?" after the first, self-playing demo */
.pip-help-hint {
  display: none;
  position: absolute; left: -8px; bottom: 4px; transform: translateX(-100%); z-index: 4;
  white-space: nowrap;
  background: #fff; color: var(--ink);
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: .72rem;
  border-radius: 12px; padding: 6px 10px;
  box-shadow: 0 8px 22px rgba(0,0,0,.4);
}
.pip-help-hint::after {                  /* caret pointing right, toward the "?" */
  content: ""; position: absolute; right: -6px; bottom: 8px;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-left: 7px solid #fff;
}
.pip.mini .pip-help-hint.show { display: block; }
@keyframes pipHelpPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 3px 10px rgba(0,0,0,.4); }
  50%      { transform: scale(1.25); box-shadow: 0 0 0 6px rgba(255,255,255,.22), 0 4px 14px rgba(0,0,0,.5); }
}
.pip.point .pip-help { animation: pipHelpPulse 1s ease-in-out infinite; }

/* "?" on the mini preview → opens the animated how-to demo */
.pip-help { display: none; }
.pip.mini .pip-help {
  display: flex; align-items: center; justify-content: center;
  position: absolute; left: 5px; bottom: 5px; z-index: 3;
  width: 24px; height: 24px; border-radius: 50%; border: none; cursor: pointer;
  background: #fff; color: var(--accent-deep);
  font-family: 'Quicksand', sans-serif; font-weight: 800; font-size: .9rem; line-height: 1;
  box-shadow: 0 3px 10px rgba(0,0,0,.4);
}

/* animated how-to demo overlay */
.pip-demo { display: none; }
.pip-demo {
  position: fixed; inset: 0; z-index: 70; padding: 20px;
  background: rgba(0,0,0,.5); align-items: center; justify-content: center;
}
.pip-demo.show { display: flex; }
.pip-demo-card {
  background: #fff; color: var(--ink); border-radius: 20px; padding: 18px 18px 16px;
  width: min(88vw, 300px); text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.5);
  font-family: 'Quicksand', sans-serif;
}
.demo-cap { margin: 4px 0 14px; font-size: .9rem; font-weight: 600; line-height: 1.4; }
.demo-stage {                /* phone-shaped: this is the phone screen the preview floats on */
  position: relative; width: 158px; max-width: 100%; height: 268px; margin: 0 auto 6px;
  background: var(--ink); border-radius: 20px; overflow: hidden;
}
.demo-box {
  position: absolute; left: 108px; top: 196px; width: 38px; height: 56px; border-radius: 8px;
  background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.45);
  animation: demoBox 8s ease-in-out infinite;
}
.demo-box::before {        /* little grip bar, echoing the real mini preview */
  content: ""; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 3px; border-radius: 2px; background: rgba(0,0,0,.28);
}
.demo-finger {
  position: absolute; right: -13px; bottom: -16px; width: 22px; height: 34px;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.55));
  animation: demoFinger 8s ease-in-out infinite;
}
.demo-finger svg { width: 100%; height: 100%; display: block; }
.demo-launch {
  position: absolute; left: 10px; bottom: 10px; font-size: 18px;
  background: #fff; border-radius: 14px; padding: 4px 9px; box-shadow: 0 4px 12px rgba(0,0,0,.45);
  opacity: 0; animation: demoLaunch 8s ease-in-out infinite;
}
@keyframes demoBox {
  0%, 8%    { left: 108px; top: 196px; opacity: 1; transform: scale(1); }  /* rest, bottom-right */
  24%, 36%  { left: 12px;  top: 12px;  opacity: 1; transform: scale(1); }  /* dragged to top-left, held */
  52%, 64%  { left: 108px; top: 12px;  opacity: 1; transform: scale(1); }  /* dragged to top-right, held */
  78%       { left: 172px; top: 12px;  opacity: 0; transform: scale(.7); } /* flung out the right side */
  86%       { left: 108px; top: 196px; opacity: 0; transform: scale(1); }
  92%, 100% { left: 108px; top: 196px; opacity: 1; transform: scale(1); }  /* back at the start */
}
@keyframes demoFinger {
  0%, 24%   { opacity: 1; }     /* touching, then dragging to top-left */
  28%, 33%  { opacity: 0; }     /* lifts at top-left */
  36%, 52%  { opacity: 1; }     /* returns, drags to top-right */
  56%, 61%  { opacity: 0; }     /* lifts at top-right */
  64%, 74%  { opacity: 1; }     /* returns, drags it out */
  78%, 90%  { opacity: 0; }     /* gone with the fling */
  94%, 100% { opacity: 1; }     /* back on the resting box */
}
@keyframes demoLaunch {
  0%, 74%   { opacity: 0; }
  80%, 86%  { opacity: 1; }     /* the bring-it-back button appears */
  92%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-box, .demo-finger { animation: none; }
  .demo-launch { animation: none; opacity: 1; }
}

/* landing demo phones */
.demo-phones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 34px;
  align-items: start;
}
@media (max-width: 640px) { .demo-phones { grid-template-columns: 1fr; } }
.demo-phones .phone {
  max-width: 210px; padding: 10px; border-width: 6px;
  min-height: 0;          /* keep the 9/17 aspect ratio even if a screen has more content */
}
.demo-wrap .phone-card { animation: demoFade .5s ease; }
@keyframes demoFade {
  from { opacity: .15; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* consent line under the generate button */
.consent { text-align: center; margin-top: 12px; }
.consent a { color: var(--accent-deep); font-weight: 700; }

/* ---------- phone tweaks (shared) ---------- */

@media (max-width: 480px) {
  .card { padding: 28px 18px 24px; }
  .script-title { font-size: 2.6rem; }
  .script-sub { font-size: 1.95rem; }
  .date-grid { grid-template-columns: repeat(3, 1fr); }
  .wheel-wrap, #wheel { width: 240px; height: 240px; }
  /* center the card vertically like on desktop (it auto-aligns to the top only
     when a step is taller than the screen), instead of parking it near the top */
  #app { padding-bottom: 24px; }
  .builder-hero h1 { font-size: 3.1rem; }
}