/* /creer/: a family writes its invitation and watches it come alive. A checkout, not a form dump. */

.create-page { -webkit-tap-highlight-color: transparent; }
.top__back svg, .add svg, .actions svg, .live__tag svg, .final__edit svg { width: 18px; height: 18px; flex: none; }

.create {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.create__main { min-width: 0; padding-bottom: 32px; }
.create__title { margin: 36px 0 8px; }
.create__lead { color: var(--ink-2); font-size: 1rem; max-width: 52ch; margin: 0 0 28px; }
.create__lead[hidden] + .stepper { margin-top: 32px; }

/* ---------- steps ---------- */
.step { border: 0; padding: 0; margin: 0; min-width: 0; animation: step-in .35s var(--ease) both; }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } }
.step__title { font-size: 1.625rem; letter-spacing: -0.03em; margin: 28px 0 4px; }
.block { padding: 24px 0; }
.block + .block { border-top: 1px solid var(--line); }
.block__label { font: 700 1.0625rem/1.3 var(--font); letter-spacing: -0.01em; margin: 0 0 14px; color: var(--ink); }
.block__label + .hint { margin-top: -8px; }
.hint { font-size: 0.875rem; color: var(--ink-3); margin: -6px 0 16px; }
.hint--note { margin: 4px 0 0; }
.pair + .hint { margin-top: 10px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pair .field { margin-bottom: 0; }
select.time { font-variant-numeric: tabular-nums; }

/* ---------- design picker ---------- */
.designs {
  display: grid; grid-auto-flow: column; grid-auto-columns: 116px; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
  mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  margin: 0 calc(-1 * var(--gutter)); padding: 6px var(--gutter) 8px;
}
.designs::-webkit-scrollbar { display: none; }
.design {
  display: grid; gap: 10px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
  scroll-snap-align: start; font: 600 0.875rem/1.2 var(--font); color: var(--ink-2);
}
.design__img { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--soft); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.design__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.design:hover .design__img { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
.design:focus-visible { outline: none; }
.design:focus-visible .design__img { outline: 2px solid var(--accent); outline-offset: 3px; }
.design[aria-checked="true"] { color: var(--ink); font-weight: 700; }
.design[aria-checked="true"] .design__img { box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px var(--accent-tint); }
.design__check { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: opacity .2s var(--ease), transform .25s var(--ease); }
.design__check svg { width: 16px; height: 16px; }
.design[aria-checked="true"] .design__check { opacity: 1; transform: none; }

/* ---------- the couple's names ---------- */
.names { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 10px; }
.names__field { display: grid; gap: 6px; min-width: 0; }
.names input { min-height: 56px; font: 650 1.1875rem/1.2 var(--font); letter-spacing: -0.01em; }
.names .field-err { font-size: 0.8125rem; }
.names__and { font: 800 1.375rem/56px var(--font); color: var(--accent); }
.next-day { margin: 10px 0 0; }
.date-echo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 0; margin: -8px 0 18px; font: 600 0.9375rem/1.4 var(--font); color: var(--ink-2); }
.date-echo:empty { display: none; }
.date-echo small { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: var(--r-pill); background: var(--accent-tint); color: var(--accent); font: 650 0.8125rem var(--font); font-variant-numeric: tabular-nums; }

/* ---------- chips: country ---------- */
.chips-field { border: 0; padding: 0; margin: 4px 0 0; min-width: 0; }
.chips-field legend { font: 600 0.875rem/1.3 var(--font); padding: 0; margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill);
  background: var(--soft); font: 600 0.9375rem var(--font); color: var(--ink);
  cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease);
}
.chip span:hover { background: #ededf0; }
.chip input:checked + span { background: var(--ink); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.chips-field .field-err { margin-top: 10px; }

/* ---------- programme: a timeline, like on the invitation ---------- */
.timeline-edit { list-style: none; margin: 0 0 12px; padding: 0; }
.timeline-edit li { position: relative; display: grid; grid-template-columns: 6.75rem minmax(0, 1fr) 44px; gap: 8px 10px; padding: 0 0 20px 26px; }
.timeline-edit li::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: -14px; width: 1px; background: var(--line-2); }
.timeline-edit li:last-child::before { display: none; }
.timeline-edit li::after { content: ""; position: absolute; left: 1px; top: 19px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--accent); }
.timeline-edit .field { margin: 0; }
.timeline-edit .detail { grid-column: 2 / -1; }
.timeline-edit .detail input { min-height: 44px; font-size: 0.9375rem; }
.timeline-edit select.time { padding: 10px 30px 10px 12px; background-position: right 8px center; background-size: 16px; }
.timeline-edit li.is-new { animation: step-in .3s var(--ease) both; }
.icon-btn { display: grid; place-items: center; width: 44px; height: 48px; margin: 0; border: 0; border-radius: var(--r-input); background: transparent; color: var(--ink-3); cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { background: var(--soft); color: var(--danger); }
.add { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 14px; border: 0; border-radius: var(--r-pill); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); font: 650 0.9375rem var(--font); color: var(--ink); cursor: pointer; transition: background .15s var(--ease); }
.add:hover { background: var(--soft); }

/* ---------- palette ---------- */
.palette { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.palette li { display: grid; grid-template-columns: 48px minmax(0, 1fr) 44px; gap: 12px; align-items: center; }
.palette li:has(> .add) { display: block; margin-top: 4px; }
.swatch { position: relative; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .12), var(--shadow-1); }
.swatch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.swatch:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }

.en-box { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 8px; }
.en-box summary { font-size: 0.9375rem; }
.en-rows { list-style: none; padding: 0; margin: 8px 0 0; }

/* ---------- package, account ---------- */
.plans-pick { display: grid; gap: 10px; margin-bottom: 12px; }
.pick { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 18px 18px; border-radius: 16px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; transition: box-shadow .15s var(--ease), background .15s var(--ease); }
.pick:hover { box-shadow: inset 0 0 0 1px #c4c4cb; }
.pick:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-tint); }
.pick:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.pick:has(input:disabled) { cursor: default; }
.pick input { margin-top: 2px; }
.pick > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; width: 100%; }
.pick b { font-size: 1.0625rem; font-weight: 750; }
.pick small { grid-column: 1 / -1; display: block; color: var(--ink-2); font-size: 0.875rem; }
.pick__price { font-weight: 750; font-variant-numeric: tabular-nums; text-align: right; }
.pin { font: 700 1.375rem/1 var(--font); letter-spacing: 0.4em; text-align: center; }
.pin::placeholder { letter-spacing: 0.4em; }
.summary { display: flex; align-items: center; gap: 12px; margin: 8px 0 0; padding: 16px 18px; border-radius: 16px; background: var(--soft); font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---------- actions: always in reach ---------- */
.actions {
  position: sticky; bottom: 0; z-index: 6;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center;
  margin: 20px calc(-1 * var(--gutter)) 0; padding: 12px var(--gutter) max(12px, env(safe-area-inset-bottom));
  background: var(--bg); box-shadow: 0 -1px 0 var(--line);
}
.actions__back { padding: 0 18px 0 14px; }
.actions__next { grid-column: 2; }
.actions__back[hidden] + .actions__next { grid-column: 1 / -1; }
.actions__next svg { margin-right: -6px; }
.saved { min-height: 1.2em; margin: 10px 0 0; text-align: center; font-size: 0.8125rem; color: var(--ink-3); }
#f > .err { margin: 16px 0 0; }

/* ---------- final step ---------- */
.final .lead { margin: 0 0 8px; }
.final__edit { margin: 0 0 20px; }
.final .pay-bar { margin-top: 0; }
.secure { display: flex; gap: 8px; align-items: flex-start; justify-content: center; }
.secure::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='9.5' rx='2'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='9.5' rx='2'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.keep { display: grid; gap: 12px; margin-top: 24px; padding: 24px; border-radius: var(--r-card); border: 1px solid var(--line); }
.keep h2 { font-size: 1.125rem; margin: 0; }
.keep .hint { margin: 0; }
.keep .row .btn { flex: 1; }

/* ---------- the live invitation (phone per spec: #0f0f10 frame, 10px bezel) ---------- */
.live__phone { position: relative; padding: 10px; border-radius: var(--r-phone); background: #0f0f10; box-shadow: var(--shadow-art); }
.live__screen { position: relative; overflow: hidden; border-radius: 34px; aspect-ratio: 390 / 844; background: var(--soft); }
.live__screen iframe { position: absolute; top: 0; left: 0; width: 390px; height: 844px; border: 0; transform-origin: 0 0; transform: scale(var(--s, .8)); pointer-events: none; }
.live__open { position: absolute; inset: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 18px; font: inherit; }
.live__tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); background: #fff; color: var(--ink); font: 650 0.8125rem var(--font); box-shadow: var(--shadow-2); }
/* The dot only pulses while the invitation is catching up with what was typed. */
.live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
@keyframes pulse { 50% { opacity: .3; } }
.live.is-updating .live__dot { animation: pulse .6s ease-in-out infinite; }
.live__close { display: none; }

@media (min-width: 1080px) {
  .create { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 0 clamp(48px, 6vw, 96px); }
  .create__main { padding-bottom: 48px; }
  /* The preview owns the right half: sticky, centred in the viewport, the tag under the phone. */
  .live { position: sticky; top: var(--top-h); align-self: start; height: calc(100svh - var(--top-h)); display: grid; place-items: center; padding: 24px 0 72px; }
  .live__phone { width: min(360px, calc((100svh - var(--top-h) - 120px) * 390 / 844)); }
  .live__open { pointer-events: none; inset: auto 0 -52px 0; padding: 0; }
  .live__tag { background: none; box-shadow: none; color: var(--ink-2); padding: 0; }
  .live__screen iframe { pointer-events: auto; }
  .live__tag svg { display: none; }
  .actions { margin-inline: 0; padding-inline: 0; }
  .designs { margin-inline: -6px; padding-inline: 6px; scroll-padding-inline: 6px; }
  .final .pay-bar { margin-inline: 0; padding-inline: 0; }
}

/* Phone: the live invitation is a small phone docked in the action bar; tapped, it opens full screen. */
@media (max-width: 1079px) {
  .actions:has(> .live) { grid-template-columns: auto auto minmax(0, 1fr); }
  .actions:has(> .live) .actions__next { grid-column: auto; }
  .actions:has(> .live) .actions__back[hidden] + .actions__next { grid-column: 2 / -1; }
  .actions .actions__back { width: 52px; padding: 0; }
  .actions .actions__back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .actions .live { width: 44px; }
  .actions .live .live__phone { padding: 3px; border-radius: 11px; box-shadow: var(--shadow-1), 0 6px 14px -8px rgba(17, 17, 17, .5); }
  .actions .live .live__screen { border-radius: 8px; aspect-ratio: 3 / 4; }
  .actions .live .live__open { padding: 0; align-items: flex-start; justify-content: flex-end; }
  .actions .live .live__tag { padding: 0; background: none; box-shadow: none; margin: -4px -4px 0 0; }
  .actions .live .live__tag > span:not(.live__dot), .actions .live .live__tag svg { display: none; }
  .actions .live .live__dot { width: 10px; height: 10px; box-shadow: 0 0 0 2px #fff; }
  .live.is-open { position: fixed; z-index: 30; inset: var(--top-h) 0 0 0; width: auto; display: grid; place-items: center; align-content: center; gap: 20px; padding: 20px; background: rgba(15, 15, 16, .86); }
  .live.is-open .live__phone { width: min(340px, calc((100svh - var(--top-h) - 140px) * 390 / 844)); padding: 10px; border-radius: var(--r-phone); }
  .live.is-open .live__screen { border-radius: 34px; aspect-ratio: 390 / 844; }
  .live.is-open .live__screen iframe { pointer-events: auto; }
  .live.is-open .live__open { display: none; }
  .live.is-open .live__close { display: inline-flex; min-height: 48px; background: #fff; }
  .create__main { padding-bottom: 8px; }
}
.final .live { position: static; height: auto; width: min(320px, 78vw); margin: 0 auto 24px; padding: 0; }
.final .live .live__phone { width: auto; padding: 10px; border-radius: var(--r-phone); }
.final .live .live__screen { border-radius: 34px; }
.final .live .live__screen iframe { pointer-events: auto; }
.final .live .live__open { display: none; }
@media (max-width: 420px) {
  .timeline-edit li { grid-template-columns: 6.25rem minmax(0, 1fr) 44px; padding-left: 22px; }
  .names { gap: 8px; }
  .names input { font-size: 1.0625rem; }
}
@media (prefers-reduced-motion: reduce) {
  .step, .timeline-edit li.is-new { animation: none; }
  .live__dot { animation: none; }
}

/* ---------- cagnotte switch and how it works ---------- */
.switch { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 16px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; }
.switch:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__text b { display: block; font-size: 1rem; font-weight: 700; }
.switch__text small { display: block; margin-top: 4px; font-size: 0.875rem; color: var(--ink-2); }
.switch__knob { position: relative; width: 52px; height: 32px; border-radius: 999px; background: var(--line-2); transition: background .2s var(--ease); }
.switch__knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(17, 17, 17, .25); transition: transform .25s var(--ease); }
.switch input:checked ~ .switch__knob { background: var(--accent); }
.switch input:checked ~ .switch__knob::after { transform: translateX(20px); }
.switch:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.how { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
.how li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.how b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--soft); font: 700 0.8125rem var(--font); font-variant-numeric: tabular-nums; }
.how span { font-size: 0.9375rem; color: var(--ink-2); padding-top: 3px; }
.pay-bar .secure { text-align: left; justify-content: flex-start; }

/* Docked thumbnail: the design's cover; the live page shows once opened. */
.live__cover { position: absolute; inset: 0; background: var(--soft) center / cover no-repeat; display: none; }
@media (max-width: 1079px) { .actions .live .live__cover:not([hidden]) { display: block; } }
.field > .hint--inline { display: block; margin: -4px 0 4px; font: 500 0.875rem/1.4 var(--font); color: var(--ink-3); }
.live.is-open .live__cover { display: none !important; }
.keep__space { margin: 0; text-align: center; }
.top__label { white-space: nowrap; }