.birthday-design-picker{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;margin:0 0 28px;padding:clamp(20px,4vw,34px);border:1px solid rgba(255,255,255,.9);border-radius:32px;background:rgba(255,255,255,.86);box-shadow:0 24px 80px rgba(15,65,100,.1);color:#172033}.birthday-design-picker-copy>p{margin:0;color:#d34c76;font-size:11px;font-weight:900;letter-spacing:.24em;text-transform:uppercase}.birthday-design-picker-copy h2{margin:.5rem 0 1.2rem;font-size:clamp(28px,4vw,44px);line-height:1}.birthday-design-picker label{display:grid;gap:7px;font-weight:800}.birthday-design-picker select,.birthday-copy-fields input,.birthday-copy-fields textarea{width:100%;border:1px solid #dbe5ef;border-radius:14px;background:white;padding:13px 14px;color:#172033;font:inherit}.birthday-design-picker button{margin-top:13px;border:0;border-radius:999px;background:#d94b74;color:#fff;padding:12px 18px;font-weight:900;cursor:pointer}.birthday-design-picker-card{position:relative;overflow:hidden;min-height:280px;border-radius:24px;background:#0b1020}.birthday-design-picker-card img{width:100%;height:100%;min-height:280px;object-fit:cover}.birthday-design-picker-card>div{position:absolute;inset:auto 14px 14px;padding:14px;border-radius:18px;background:rgba(255,255,255,.9);backdrop-filter:blur(12px)}.birthday-design-picker-card small{color:#d34c76;font-weight:900;text-transform:uppercase;letter-spacing:.14em}.birthday-design-picker-card h3{margin:.25rem 0;font-size:26px}.birthday-design-picker-card strong{color:#b32e57}.birthday-copy-fields{grid-column:1/-1;border:1px solid #e5ecf4;border-radius:20px;background:#fff;padding:15px}.birthday-copy-fields summary{cursor:pointer;font-weight:900}.birthday-copy-fields>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:15px}.birthday-copy-fields textarea{min-height:90px;resize:vertical}.birthday-design-preview-layer{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:18px;background:rgba(4,9,22,.84);backdrop-filter:blur(15px)}.birthday-design-preview-panel{position:relative;display:grid;grid-template-columns:minmax(260px,390px) minmax(220px,330px);align-items:center;gap:26px;max-height:94vh}.birthday-design-preview-phone{position:relative;height:min(80vh,760px);aspect-ratio:9/18.5;overflow:hidden;border:9px solid #111827;border-radius:46px;background:#fff;box-shadow:0 30px 100px #0008}.birthday-design-preview-phone iframe{width:100%;height:100%;border:0}.birthday-design-preview-loading{position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;background:#fff;color:#516075;font-weight:800}.birthday-design-preview-copy{padding:26px;border-radius:28px;background:#fff;color:#172033}.birthday-design-preview-copy p{margin:0;color:#d34c76;font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.birthday-design-preview-copy h2{margin:.6rem 0;font-size:38px;line-height:1}.birthday-design-preview-copy strong{display:block;font-size:24px;color:#b32e57}.birthday-design-preview-copy a{display:inline-block;margin-top:18px;border-radius:999px;background:#d94b74;color:white;padding:12px 18px;font-weight:900;text-decoration:none}.birthday-design-preview-close{position:absolute;right:-14px;top:-14px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:#172033;font-size:30px;cursor:pointer}@media(max-width:760px){.birthday-design-picker{grid-template-columns:1fr}.birthday-copy-fields>div{grid-template-columns:1fr}.birthday-design-preview-panel{display:block}.birthday-design-preview-phone{height:min(78vh,720px)}.birthday-design-preview-copy{display:none}.birthday-design-preview-close{right:-8px;top:-8px}}

/* A fixed logical mobile viewport prevents a height-sized phone from squeezing
   or clipping templates that were authored for a normal mobile browser. */
.birthday-design-preview-panel{grid-template-columns:minmax(260px,408px) minmax(220px,330px);max-width:calc(100vw - 36px);max-height:94dvh}
.birthday-design-preview-phone{box-sizing:border-box;width:min(408px,calc((94vh - 18px) * .47332));width:min(408px,calc((94dvh - 18px) * .47332));height:auto;aspect-ratio:408/862;background:#111827}
.birthday-design-preview-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:36px;background:#fff}
.birthday-design-preview-phone iframe.love-mobile-preview-frame{width:390px;height:844px;max-width:none;border:0;background:#fff}
.birthday-design-preview-loading{z-index:2}
.birthday-design-preview-close{z-index:3}
@media(max-width:760px){
  .birthday-design-preview-layer{padding:8px}
  .birthday-design-preview-panel{max-width:calc(100vw - 16px)}
  .birthday-design-preview-phone{width:min(408px,calc(100vw - 20px),calc((100vh - 20px) * .47332));width:min(408px,calc(100vw - 20px),calc((100dvh - 20px) * .47332));height:auto}
  .birthday-design-preview-close{right:4px;top:4px}
}

/* The selected website design owns the brief colour. Gender is an internal
   compatibility value only and is no longer a customer-facing choice. */
.birthday-design-theme-choice,
#birthday-form [role="radiogroup"]:has([role="radio"][value="boy"]):has([role="radio"][value="girl"]){display:none!important}
html[data-birthday-brief-tone="blue"] .birthday-design-picker{box-shadow:0 24px 80px rgba(14,165,233,.14)}
html[data-birthday-brief-tone="blue"] .birthday-design-picker-copy>p,
html[data-birthday-brief-tone="blue"] .birthday-design-picker-card small,
html[data-birthday-brief-tone="blue"] .birthday-design-picker-card strong{color:#0284c7}
html[data-birthday-brief-tone="blue"] .birthday-design-picker button{background:#0ea5e9}
html[data-birthday-brief-tone="blue"] .birthday-copy-fields{border-color:#bae6fd}
html[data-birthday-brief-tone="blue"] #birthday-form .step-circle-container{background:linear-gradient(180deg,#ffffffad,#f0f9ff8f);box-shadow:0 24px 90px rgba(14,165,233,.15),inset 0 1px #ffffffbf}
html[data-birthday-brief-tone="blue"] #birthday-form .next-button{background:linear-gradient(135deg,#38bdf8,#0284c7);box-shadow:0 16px 36px rgba(2,132,199,.24)}
html[data-birthday-brief-tone="blue"] #birthday-form .back-button{border-color:rgba(14,165,233,.2);color:#0369a1}
html[data-birthday-brief-tone="blue"] #birthday-form .step-connector{background-color:rgba(14,165,233,.18)}
html[data-birthday-brief-tone="blue"] #birthday-form .step-connector-inner{background-color:#0ea5e9!important}
html[data-birthday-brief-tone="blue"] #birthday-form .step-indicator-inner{background-color:rgba(14,165,233,.18)!important;color:#0369a1!important}
html[data-birthday-brief-tone="blue"] #birthday-form .step-indicator-inner:has(.active-dot),
html[data-birthday-brief-tone="blue"] #birthday-form .step-indicator-inner:has(.check-icon){background-color:#0ea5e9!important;color:#fff!important}
html[data-birthday-brief-tone="pink"] .birthday-design-picker{box-shadow:0 24px 80px rgba(211,76,118,.14)}
html[data-birthday-brief-tone="pink"] .birthday-copy-fields{border-color:#fecdd3}