/* Invitation maker screens. Loaded after app.css and site.css on /create pages. */
.flowpage{background:#FBF8F0}
.fshell{min-height:100dvh;display:flex}
.fmain{flex:1;min-width:0;display:flex;flex-direction:column;max-width:560px;margin:0 auto;width:100%}
.fside{display:none}
.fform{flex:1;display:flex;flex-direction:column}
.fform .f-body{overflow:visible;padding-bottom:24px}
.fform .f-foot{position:sticky;bottom:0;padding-bottom:max(18px,env(safe-area-inset-bottom))}
.f-back{cursor:pointer}
.fform h2,.done h2{font-size:28px;line-height:1.14}
.fform .field{flex:1 1 0;min-width:0}
.f-body>.field,.ev-det>.field{flex:none}
input.input,select.input{width:100%;font-family:inherit;color:#172524;outline:0;-webkit-appearance:none;appearance:none}
input.input:focus,select.input:focus,.input:focus-within{border-color:#0E4A47;box-shadow:0 0 0 4px rgba(14,74,71,.12)}
input.input::placeholder{color:#9AA3A1;font-weight:400}
.input input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;color:inherit}
select.input{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%235C6B69' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:40px}
.mini .inv{width:54px;flex:none;border-radius:8px}
.saved-card .inv{width:64px;flex:none;border-radius:8px}
fieldset.seg-row{border:0}
.seg-row legend{float:left;font-size:14px;font-weight:500;padding-top:9px}
.seg label{cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label span{display:block}
.seg input:checked+span{background:#fff;color:#0E4A47;box-shadow:0 2px 6px rgba(23,37,36,.12)}
.seg input:focus-visible+span{outline:2px solid #0E4A47;outline-offset:2px}
.linkbox b i{font-style:normal;color:#0E4A47;font-weight:700}
.linkbox b{color:#5C6B69;font-weight:500;overflow:hidden;text-overflow:ellipsis}
.ltile{cursor:pointer;position:relative}
.ltile input{position:absolute;opacity:0}
.ltile .cb .ic{opacity:0}
.ltile input:checked~.cb{background:#0E4A47;border-color:#0E4A47}
.ltile input:checked~.cb .ic{opacity:1}
.ltile:has(input:checked){border-color:#0E4A47;background:#F4F9F7}
.ltile:has(input:focus-visible){outline:2px solid #0E4A47;outline-offset:2px}
.lnames{display:flex;flex-direction:column;gap:8px}
.lnames[hidden]{display:none}
.ev-top{cursor:pointer}
.tog-in:checked+.tog{background:#0E4A47;justify-content:flex-end}
.tog-in:focus-visible+.tog{outline:2px solid #0E4A47;outline-offset:2px}
.ev:has(.tog-in:checked){border-color:#0E4A47}
.ev-det[hidden],[data-venue][hidden]{display:none}
.ev-det{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.ev-det .two{width:auto}
.samerow{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;cursor:pointer}
.samerow input{width:18px;height:18px;accent-color:#0E4A47}
.otp-in{font-size:24px!important;font-weight:700!important;letter-spacing:.4em;text-align:center}
.devnote{background:#FFF6DF;border:1px dashed #D9A300;border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;font-size:13px;color:#5C4A00;line-height:1.45}
.devnote b{font-size:14px;color:#172524}
.devnote strong{font-size:18px;letter-spacing:.2em;color:#172524}
.f-foot .btn.sm{box-shadow:none}
.bill,.total{font-variant-numeric:tabular-nums}

/* preview page */
.bare{background:#0A3533}
.pvpage{min-height:100dvh;display:flex;flex-direction:column;max-width:560px;margin:0 auto}
.pv-top a{color:#fff}
.pv-stage{flex:1;display:flex;justify-content:center;padding:4px 20px 0;min-height:380px}
.pv-frame{width:100%;max-width:400px;height:auto;min-height:420px;border:0;border-radius:22px 22px 0 0;background:#fff;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.pv-sheet{margin-top:0;position:sticky;bottom:0;padding-top:18px}
.vars{flex-wrap:wrap}

/* live page */
.fshell.solo{background:#FBF8F0;min-height:100dvh}
.done .f-body{padding-top:48px;gap:18px;overflow:visible}
.live-thumb{width:130px}
button.copyb{cursor:pointer;border:0;font-family:inherit}

@media (min-width:1024px){
  .fshell:not(.solo){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fshell:not(.solo) .fmain{max-width:none;margin:0;padding:0 clamp(32px,7vw,120px)}
  .fmain .f-head{padding:28px 0 0}
  .fform .f-body{padding:44px 0 24px;gap:20px}
  .fform h2{font-size:38px;line-height:1.1}
  .fform .f-foot{position:static;background:none;border:0;box-shadow:none;padding:8px 0 48px;align-items:flex-start}
  .fform .f-foot .btn.full{width:auto;min-width:220px;height:56px;font-size:16px}
  .fform .f-foot .bill,.fform .f-foot .total{width:100%;max-width:420px}
  .mini{display:none}
  .fside{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:#0A3533;position:sticky;top:0;height:100dvh}
  .fside .phone{width:290px}
  .fside .fd-cap a{color:#F6D27A}
}

/* optional extras on the names step */
details.more{border:1px solid rgba(14,74,71,.18);border-radius:14px;padding:4px 16px;margin:6px 0 18px;background:#fff}
details.more summary{cursor:pointer;padding:12px 0;font-weight:600;color:#0E4A47;list-style:none}
details.more summary::-webkit-details-marker{display:none}
details.more summary::after{content:"+";float:right;font-size:20px;line-height:1}
details.more[open] summary::after{content:"\2013"}
details.more textarea.input{height:auto;min-height:88px;padding-top:12px;padding-bottom:12px;resize:vertical;font:inherit}