/* MyInviteRSVP — "Make your own invitation" (create.html, create-success.html)
   The invitations are the colour on this page. Everything around them stays white, navy and quiet,
   with coral kept for the one action that moves the customer forward. No gradients, no glow. */
.cr { --ink: #062042; --ink-2: #44526B; --ink-3: #687386; --line: #E3E7EE; --line-2: #CBD2DF; --mist: #F1F4F8; --coral: #FE5C34; --coral-text: #B3360F;
  margin: 0; background: #fff; color: var(--ink); font: 16px/1.55 var(--brand-font-body); -webkit-font-smoothing: antialiased; }
.cr *, .cr *::before, .cr *::after { box-sizing: border-box; }
.cr [hidden] { display: none !important; }
.cr h1, .cr h2, .cr h3 { font-family: var(--brand-font-display); color: var(--ink); margin: 0; letter-spacing: -.02em; text-wrap: balance; }
.cr p { margin: 0; }
.cr a { color: var(--ink); }
.cr :focus-visible { outline: 3px solid rgba(254, 92, 52, .55); outline-offset: 2px; border-radius: 6px; }
.cr-noscript { padding: 24px; }

/* ---------- top bar ---------- */
.cr-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; padding: 0 max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--line); background: #fff; }
.cr-logo img { display: block; width: 168px; height: auto; }
.cr-top-end { display: flex; align-items: center; gap: 6px; }
.cr-uilang, .cr-signin { font: 600 14.5px/1 var(--brand-font-body); color: var(--ink); background: none; border: 0; padding: 10px 12px; border-radius: 8px; cursor: pointer; text-decoration: none; }
.cr-uilang:hover, .cr-signin:hover { background: var(--mist); }
.cr-alert { margin: 14px auto 0; width: min(1180px, calc(100% - 40px)); padding: 12px 16px; border-radius: 10px; background: var(--brand-bad-bg); color: #7E2229; font-weight: 600; }

/* ---------- buttons ---------- */
.cr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 20px; border-radius: 10px; border: 1.5px solid var(--line-2); background: #fff; color: var(--ink); font: 700 15.5px/1.2 var(--brand-font-body); text-decoration: none; cursor: pointer; }
.cr-btn:hover { border-color: var(--ink); }
.cr-btn.primary { background: var(--coral); border-color: var(--coral); color: var(--ink); }
.cr-btn.primary:hover { background: #FF7A57; border-color: #FF7A57; }
.cr-btn.navy { background: var(--ink); border-color: var(--ink); color: #fff; }
.cr-btn[disabled] { opacity: .55; cursor: default; }
.cr-btn.wide { width: 100%; }

/* ---------- step 1: choose a design ---------- */
.cr-pick { width: min(1180px, 100%); margin: 0 auto; padding: clamp(28px, 5vw, 56px) 20px 64px; }
.cr-pick-head { max-width: 640px; }
.cr-pick h1 { font-size: clamp(32px, 5.2vw, 50px); line-height: 1.06; font-weight: 800; }
.cr-lede { margin-top: 14px !important; font-size: clamp(17px, 2vw, 19px); color: var(--ink-2); max-width: 54ch; }
.cr-price { margin-top: 16px !important; font-weight: 600; color: var(--ink); }
.cr-price b { font-family: var(--brand-font-display); font-size: 22px; font-weight: 800; }
.cr-chips { display: flex; gap: 8px; margin: 30px -20px 0; padding: 0 20px 4px; overflow-x: auto; scrollbar-width: none; }
.cr-chips::-webkit-scrollbar { display: none; }
.cr-chips button { flex: none; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--line-2); background: #fff; color: var(--ink); font: 600 15px/1 var(--brand-font-body); cursor: pointer; white-space: nowrap; }
.cr-chips button:hover { border-color: var(--ink); }
.cr-chips button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.cr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 28px 20px; margin-top: 26px; }
.cr-card { display: block; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.cr-thumb { display: block; aspect-ratio: 390 / 560; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--mist); transition: transform .25s cubic-bezier(.2, .7, .2, 1), border-color .2s; }
.cr-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cr-card:hover .cr-thumb { transform: translateY(-4px); border-color: var(--ink); }
.cr-card b { display: block; margin-top: 12px; font: 700 17px/1.25 var(--brand-font-display); letter-spacing: -.01em; }
.cr-card span.cr-kind { display: block; color: var(--ink-3); font-size: 14.5px; }
.cr-custom { margin-top: 48px !important; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink-2); }
.cr-custom a { font-weight: 700; }

/* ---------- step 2: details on the left, live preview on the right ---------- */
.cr-edit { display: grid; grid-template-columns: minmax(360px, 468px) minmax(0, 1fr); height: calc(100vh - 60px); height: calc(100dvh - 60px); }
.cr-panel { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: #fff; }
.cr-panel-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.cr-back { display: inline-flex; align-items: center; gap: 4px; padding: 8px 10px 8px 6px; border: 0; background: none; border-radius: 8px; color: var(--ink); font: 600 14.5px/1 var(--brand-font-body); cursor: pointer; }
.cr-back:hover { background: var(--mist); }
.cr-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cr-which { margin-left: auto; font: 700 15px/1.2 var(--brand-font-display); color: var(--ink); text-align: right; }
.cr-form, .cr-pay { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 18px 120px; scroll-behavior: smooth; }
.cr-group { border-bottom: 1px solid var(--line); }
.cr-group > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 18px 0; cursor: pointer; font: 700 17px/1.3 var(--brand-font-display); letter-spacing: -.01em; }
.cr-group > summary::-webkit-details-marker { display: none; }
.cr-group > summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translateY(-3px); transition: transform .2s; flex: none; }
.cr-group[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
.cr-group.off > summary > span:first-child { color: var(--ink-3); text-decoration: line-through; }
.cr-group-body { padding: 0 0 22px; display: grid; gap: 14px; }
.cr-hint { color: var(--ink-3); font-size: 14.5px; }
.cr-f { display: grid; gap: 6px; }
.cr-f > label, .cr-f > .cr-lab { font: 600 14.5px/1.3 var(--brand-font-body); color: var(--ink); }
.cr-f small { color: var(--ink-3); font-weight: 500; }
.cr-in { width: 100%; min-height: 46px; padding: 11px 13px; border: 1.5px solid var(--line-2); border-radius: 10px; background: #fff; color: var(--ink); font: 500 16px/1.4 var(--brand-font-body); }
textarea.cr-in { resize: vertical; min-height: 46px; }
.cr-in::placeholder { color: #8892A4; }
.cr-in:hover { border-color: #A9B3C4; }
.cr-in:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(6, 32, 66, .12); }
.cr-in.miss { border-color: #B4373F; box-shadow: 0 0 0 3px rgba(180, 55, 63, .14); }
.cr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cr-es { position: relative; }
.cr-es .cr-in { padding-left: 44px; background: var(--mist); }
.cr-es::before { content: "ES"; position: absolute; left: 12px; top: 14px; font: 700 12px/1.6 var(--brand-font-body); color: var(--ink-3); }
.cr-es.en::before { content: "EN"; }
.cr-need { color: var(--coral-text); font-size: 13.5px; font-weight: 600; }
.cr-switch { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14.5px; color: var(--ink-2); cursor: pointer; }
.cr-switch input { appearance: none; -webkit-appearance: none; width: 40px; height: 24px; border-radius: 999px; background: #C3CAD6; position: relative; cursor: pointer; flex: none; margin: 0; transition: background .2s; }
.cr-switch input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.cr-switch input:checked { background: var(--ink); }
.cr-switch input:checked::after { transform: translateX(16px); }
.cr-rows { display: grid; gap: 10px; }
.cr-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #FAFBFC; }
.cr-row-cells { display: grid; gap: 8px; }
.cr-x { width: 38px; height: 38px; border-radius: 8px; border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 20px; line-height: 1; }
.cr-x:hover { background: var(--brand-bad-bg); color: #7E2229; }
.cr-add { justify-self: start; padding: 9px 14px; border-radius: 999px; border: 1.5px dashed var(--line-2); background: #fff; color: var(--ink); font: 600 14.5px/1 var(--brand-font-body); cursor: pointer; }
.cr-add:hover { border-color: var(--ink); border-style: solid; }
.cr-photo { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.cr-photo img { width: 64px; height: 80px; object-fit: cover; border-radius: 8px; background: var(--mist); flex: none; }
.cr-photo div { display: grid; gap: 6px; justify-items: start; }
.cr-photo b { font-size: 14.5px; }
.cr-photo button { border: 0; background: none; padding: 0; color: var(--ink); font: 700 14.5px/1.3 var(--brand-font-body); text-decoration: underline; cursor: pointer; }
.cr-photo input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cr-seg { display: inline-grid; grid-auto-flow: column; gap: 0; border: 1.5px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.cr-seg button { padding: 11px 18px; border: 0; background: #fff; color: var(--ink); font: 600 15px/1 var(--brand-font-body); cursor: pointer; }
.cr-seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.cr-addon { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 14px; border: 1.5px solid var(--line-2); border-radius: 12px; cursor: pointer; }
.cr-addon.on { border-color: var(--ink); background: var(--mist); }
.cr-addon input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); }
.cr-addon b { display: block; font-size: 15.5px; }
.cr-addon span { color: var(--ink-2); font-size: 14.5px; }
.cr-addon em { font-style: normal; font-weight: 700; white-space: nowrap; }

/* ---------- preview stage ---------- */
.cr-stage { display: flex; flex-direction: column; align-items: center; min-height: 0; min-width: 0; padding: 12px 24px 14px; background: var(--mist); }
.cr-stage-bar { width: 100%; max-width: 760px; display: flex; align-items: center; gap: 10px; min-height: 40px; margin-bottom: 12px; }
.cr-live { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font: 600 14px/1 var(--brand-font-body); color: var(--ink-2); }
.cr-live i { width: 8px; height: 8px; border-radius: 50%; background: #256B4D; }
.cr-pvlang, .cr-dev { display: inline-grid; grid-auto-flow: column; border: 1.5px solid var(--line-2); border-radius: 999px; overflow: hidden; background: #fff; }
.cr-pvlang button, .cr-dev button { padding: 8px 14px; border: 0; background: none; color: var(--ink); font: 600 13.5px/1 var(--brand-font-body); cursor: pointer; }
.cr-pvlang button[aria-pressed="true"], .cr-dev button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.cr-full { display: none; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line-2); background: #fff; color: var(--ink); font: 600 13.5px/1 var(--brand-font-body); cursor: pointer; }
/* The device is drawn at its real size (390 x 844 for the phone) and scaled to fit, so it always keeps a real phone's shape. */
.cr-fit { position: relative; flex: 1; min-height: 0; width: 100%; display: flex; justify-content: center; align-items: flex-start; }
.cr-device { position: relative; flex: none; transform-origin: top center; width: 414px; height: 868px; padding: 12px; border-radius: 56px; background: #0B1626; box-shadow: 0 0 0 1.5px #2A3850 inset, 0 28px 50px -30px rgba(6, 32, 66, .5); }
.cr-device::before { content: ""; position: absolute; z-index: 2; top: 23px; left: 50%; width: 96px; height: 26px; margin-left: -48px; border-radius: 999px; background: #0B1626; pointer-events: none; }
.cr-screen { position: relative; width: 100%; height: 100%; border-radius: 44px; overflow: hidden; background: #fff; }
.cr-device.wide { width: 1200px; height: 780px; padding: 34px 10px 10px; border-radius: 14px; background: #E3E7EE; box-shadow: 0 0 0 1px var(--line-2) inset, 0 28px 50px -30px rgba(6, 32, 66, .4); }
.cr-device.wide::before { top: 12px; left: 16px; margin: 0; width: 46px; height: 10px; border-radius: 0; background: radial-gradient(circle at 5px 5px, #B8C0CE 4.5px, transparent 5px) 0 0 / 18px 10px repeat-x; }
.cr-device.wide .cr-screen { border-radius: 6px; }
.cr-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; visibility: hidden; }
.cr-frame.on { visibility: visible; }
.cr-tip { margin-top: 10px !important; font-size: 14px; color: var(--ink-3); text-align: center; }

/* ---------- bottom bar ---------- */
.cr-bar { position: fixed; left: 0; bottom: 0; z-index: 20; width: min(468px, 100%); display: flex; align-items: center; gap: 12px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
.cr-total { display: grid; margin-right: auto; line-height: 1.15; }
.cr-total span { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.cr-total b { font: 800 22px/1.1 var(--brand-font-display); letter-spacing: -.02em; }
.cr-bar .cr-btn { min-width: 150px; }

/* ---------- steps in the top bar ---------- */
.cr-steps { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; font: 600 14px/1 var(--brand-font-body); color: var(--ink-3); counter-reset: st; }
.cr-steps li { display: flex; align-items: center; gap: 8px; counter-increment: st; }
.cr-steps li::before { content: counter(st); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-2); font-size: 12.5px; }
.cr-steps li + li { margin-left: 4px; padding-left: 34px; background: linear-gradient(var(--line-2), var(--line-2)) left center / 24px 1.5px no-repeat; }
.cr-steps li.on { color: var(--ink); }
.cr-steps li.on::before { background: var(--ink); border-color: var(--ink); color: #fff; }
.cr-steps li.done::before { content: "✓"; background: var(--mist); color: var(--ink); }

/* ---------- form helpers ---------- */
.cr-cap { font: 600 13px/1.3 var(--brand-font-body); color: var(--ink-3); }
.cr-sn { display: block; margin-top: 3px; font: 500 14px/1.35 var(--brand-font-body); color: var(--ink-3); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cr-group > summary > span:first-child { min-width: 0; flex: 1; }
.cr-group[open] .cr-sn { display: none; }
.cr-howto { margin: 16px 0 4px; padding: 14px 16px; border-radius: 12px; background: var(--mist); color: var(--ink-2); font-size: 14.5px; }
.cr-howto b { color: var(--ink); }

/* ---------- payment step ---------- */
.cr-pay h2 { font-size: 24px; font-weight: 800; margin: 18px 0 6px; }
.cr-pay > p { color: var(--ink-2); }
.cr-sum { margin: 18px 0; border-top: 1px solid var(--line); }
.cr-sum div { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cr-sum div.tot { font: 800 19px/1.3 var(--brand-font-display); border-bottom: 0; }
.cr-url { margin: 4px 0 18px; padding: 12px 14px; border-radius: 10px; background: var(--mist); font: 500 14.5px/1.4 var(--brand-font-mono); overflow-wrap: anywhere; }
.cr-url small { display: block; font: 600 13px/1.4 var(--brand-font-body); color: var(--ink-3); margin-bottom: 2px; }
.cr-pay .cr-f { margin-bottom: 14px; }
.cr-terms { margin-top: 12px !important; font-size: 13.5px; color: var(--ink-3); }
.cr-includes { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; color: var(--ink-2); font-size: 15px; }
.cr-includes li { padding-left: 24px; position: relative; }
.cr-includes li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 11px; height: 6px; border-left: 2px solid #256B4D; border-bottom: 2px solid #256B4D; transform: rotate(-45deg); }
.cr-err { margin-top: 12px !important; padding: 11px 14px; border-radius: 10px; background: var(--brand-bad-bg); color: #7E2229; font-weight: 600; font-size: 14.5px; }
.cr-saved { color: #256B4D; font-weight: 700; font-size: 14.5px; }

/* ---------- phones: the invitation stays on screen above the fields, so you watch it change while you type ---------- */
@media (max-width: 860px) {
  .cr-steps { display: none !important; }
  .cr-edit { display: flex; flex-direction: column; height: auto; }
  .cr-stage { order: -1; position: sticky; top: 0; z-index: 12; height: 44vh; height: 44svh; padding: 0; background: #fff; border-bottom: 1px solid var(--line-2); box-shadow: 0 10px 18px -16px rgba(6, 32, 66, .45); transition: height .2s; }
  .cr-edit.typing .cr-stage { height: 32vh; height: 32svh; }
  .cr-stage-bar { position: absolute; z-index: 3; left: 0; right: 0; bottom: 8px; margin: 0; padding: 0 10px; min-height: 0; max-width: none; pointer-events: none; justify-content: flex-end; }
  .cr-stage-bar > * { pointer-events: auto; }
  .cr-live, .cr-dev, .cr-tip { display: none !important; }
  .cr-pvlang, .cr-full { display: inline-grid; box-shadow: 0 4px 12px -6px rgba(6, 32, 66, .5); }
  .cr-full { display: inline-block; }
  .cr-close { display: none; }
  .cr-fit { display: block; height: 100%; }
  .cr-device, .cr-device.wide { width: 100% !important; height: 100% !important; padding: 0; border-radius: 0; background: #fff; box-shadow: none; transform: none !important; }
  .cr-device::before { display: none; }
  .cr-screen, .cr-device.wide .cr-screen { border-radius: 0; }
  .cr-edit.full .cr-stage { position: fixed; inset: 0; height: auto; z-index: 40; }
  .cr-edit.full .cr-stage-bar { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .cr-edit.full .cr-full { display: none; }
  .cr-edit.full .cr-close { display: inline-block; background: var(--ink); border-color: var(--ink); color: #fff; padding: 12px 20px; font-size: 15px; }
  .cr-panel { border-right: 0; }
  .cr-panel-head { padding: 8px 14px; }
  .cr-form, .cr-pay { overflow: visible; padding: 0 16px 130px; }
  .cr-bar { width: 100%; border-right: 0; }
  .cr-grid { grid-template-columns: 1fr 1fr; gap: 22px 14px; }
  .cr-card b { font-size: 16px; }
  .cr-foot { display: none; }
  .cr-pick ~ .cr-foot, .cr-done ~ .cr-foot { display: flex; }
}

/* ---------- success page ---------- */
.cr-done { width: min(620px, 100%); margin: 0 auto; padding: clamp(32px, 6vw, 64px) 20px 72px; }
.cr-done h1 { font-size: clamp(30px, 5vw, 42px); font-weight: 800; line-height: 1.08; }
.cr-done-card > p { margin-top: 12px; color: var(--ink-2); font-size: 17px; }
.cr-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--ink); margin-bottom: 22px; animation: cr-spin 1s linear infinite; }
@keyframes cr-spin { to { transform: rotate(360deg); } }
.cr-ok { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px !important; color: #256B4D !important; font-weight: 700; font-size: 15px !important; }
.cr-ok svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cr-done-title { font-weight: 600; }
.cr-link { display: block; margin-top: 18px; padding: 16px 18px; border-radius: 12px; background: var(--mist); font: 600 clamp(15px, 3.6vw, 18px)/1.4 var(--brand-font-mono); overflow-wrap: anywhere; text-decoration: none; }
.cr-done-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cr-qr { display: flex; gap: 18px; align-items: center; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.cr-qr img { border: 1px solid var(--line); border-radius: 10px; }
.cr-qr div { display: grid; gap: 4px; }
.cr-qr a { font-weight: 700; }
.cr-nextsteps { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.cr-nextsteps h2 { font-size: 21px; font-weight: 800; }
.cr-nextsteps ol { margin: 12px 0 20px; padding-left: 22px; display: grid; gap: 8px; color: var(--ink-2); }
.cr-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; padding: 22px 20px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 14px; }
.cr-foot nav { display: flex; gap: 16px; }
.cr-foot a { color: var(--ink-3); }
.cr-edit:not([hidden]) ~ .cr-foot { display: none; }
@media (prefers-reduced-motion: reduce) { .cr-thumb, .cr-spin { transition: none; animation: none; } }