@font-face{font-family:'Modern Era TRIAL';src:url('fonts/ModernEraTRIAL-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Modern Era TRIAL';src:url('fonts/ModernEraTRIAL-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Modern Era TRIAL';src:url('fonts/ModernEraTRIAL-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Recoleta';src:url('fonts/Recoleta-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#F0F0F0;--white:#fff;
  --ink:#1E2437;--mid:#999DA6;--faint:#C5C4C4;
  --blue:#36ADB4;
  --bbg:#E6FDFC;--bbd:#7FE2DC;--bbd-hover:#6EC7C1;--green-dark:#107B87;--teal-med:#BFF1EE;
  --navy:#1E2437;
  --bdr:#E9EAEB;
  --warn-bg:#FDECD2;--warn-icon:#EE9630;
  --font-sans:'Modern Era TRIAL',system-ui,sans-serif;
  --font-head:'Recoleta',Georgia,serif;
}
body{background:var(--white);font-family:var(--font-sans);color:var(--ink);display:flex;justify-content:center;align-items:flex-start;padding:32px 20px}
.app-inner{max-width:420px;width:100%}

/* Pages (still used by the standalone Bulk page) */
.pg{display:none;width:100%}
.pg.vis{display:block;animation:pop .22s ease}
.hed{font-family:var(--font-sans);font-size:20px;font-weight:500;color:var(--ink);margin-bottom:10px;letter-spacing:0;line-height:1.25}
/* Search */
.srch-rel{position:relative}
.srch-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;line-height:1;color:var(--faint);display:flex}
.srch-ico svg{width:16px;height:16px;display:block}
.srch-rel input{width:100%;font-family:inherit;font-size:15px;padding:13px 14px 13px 42px;border-radius:8px;border:1.5px solid var(--bdr);background:var(--white);color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s}
.srch-rel input:hover{border-color:var(--blue)}
.srch-rel input:focus{border-color:var(--bbd)}
.srch-rel input::placeholder{color:var(--mid)}
/* Occasion tiles — single consistent style for every occasion */
.occ-popular{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.occ-tile{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:20px;border:1.5px solid var(--bdr);background:var(--white);font-family:inherit;cursor:pointer;user-select:none;transition:border-color .12s,background .12s,transform .1s;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.occ-tile:hover:not(.sel){border-color:var(--bbd);background:var(--white)}
.occ-tile:active{transform:scale(.97)}
.occ-tile.sel{border-color:var(--blue);border-width:2px;background:var(--white)}
.occ-emo{font-size:14px;line-height:1}
.occ-lbl{font-size:12.5px;font-weight:500;color:var(--ink);line-height:1.2}
.occ-tile.sel .occ-lbl{color:var(--ink)}
.occ-search-wrap{position:relative}
.occ-dropdown{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--white);border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.1);max-height:280px;overflow-y:auto;z-index:5;padding:6px}
.occ-dropdown.vis{display:block}
.occ-drop-item{display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;font-family:inherit;padding:9px 10px;border-radius:8px;cursor:pointer;text-align:left;font-size:13px;font-weight:500;color:var(--ink);-webkit-tap-highlight-color:transparent}
.occ-drop-item:hover{background:var(--bbg)}
.occ-drop-item .occ-emo{font-size:15px}
.occ-drop-add{color:var(--blue);font-weight:700;font-size:14px}
/* Question sections */
.tiles{display:grid;gap:7px}
.t3{grid-template-columns:repeat(3,1fr)}
.t2{grid-template-columns:repeat(2,1fr)}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 10px;border-radius:8px;border:1.5px solid var(--bdr);background:var(--white);cursor:pointer;user-select:none;transition:border-color .12s,background .12s,transform .1s;text-align:center;-webkit-tap-highlight-color:transparent;min-height:62px}
.tile:hover:not(.dis):not(.sel){border-color:var(--bbd);background:var(--white)}
.tile:active:not(.dis){transform:scale(.97)}
.tile.sel{border-color:var(--blue);border-width:2px;background:var(--white)}
.tile.dis{opacity:.28;cursor:not-allowed}
.ti{font-size:22px;line-height:1;color:var(--mid)}
.ti svg{width:22px;height:22px;display:block}
.tile.sel .ti{color:var(--ink)}
.tl{font-size:12px;font-weight:500;color:var(--ink);line-height:1.25}
.tile.sel .tl{color:var(--ink)}
/* Sub-row */
.srow{display:none;padding-top:12px}
.srow.vis{display:block;animation:slin .18s ease}
.srlbl{font-size:14px;font-weight:500;color:var(--ink);margin-bottom:10px;letter-spacing:-.01em}
.srhint{font-size:12.5px;color:var(--mid);line-height:1.5;margin-top:10px}
/* Hint (Alert component) */
.mhint{display:none;align-items:flex-start;gap:8px;font-size:12px;line-height:1.43;letter-spacing:.15px;color:var(--ink);background:var(--warn-bg);border-radius:4px;padding:10px 16px 10px 12px;margin-top:10px}
.mhint.vis{display:flex}
.mhint svg{width:18px;height:18px;flex-shrink:0;color:var(--warn-icon);margin-top:1px}
/* Accordion — each step is its own self-contained white card */
.acc-sec{margin-bottom:8px}
.acc-card{background:var(--white);border-radius:12px;border:1px solid var(--bdr)}
.acc-head{display:flex;align-items:center;gap:12px;padding:12px 16px}
.acc-sec.done .acc-head{cursor:pointer}
.acc-badge{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;background:var(--teal-med);color:var(--ink);transition:background .15s,color .15s}
.acc-sec.done .acc-badge{background:var(--bbd);color:var(--navy)}
.acc-headtext{flex:1;min-width:0}
.acc-title{font-size:14px;line-height:1.57;font-weight:500;color:var(--faint);letter-spacing:.10px}
.acc-sec.active .acc-title,.acc-sec.done .acc-title{color:var(--ink)}
.acc-sum{font-size:14px;color:var(--mid);margin-top:2px;line-height:1.3}
.acc-edit{display:none;background:none;border:none;font-family:inherit;font-size:14px;color:var(--blue);cursor:pointer;font-weight:700;padding:4px 0;flex-shrink:0}
.acc-sec.done .acc-edit{display:block}
.acc-edit:hover{opacity:.75}
.acc-body{display:none;padding:0 18px 16px}
.acc-sec.active .acc-body{display:block;padding-top:14px;border-top:1px solid var(--bdr);animation:pop .22s ease}
.acc-sec.upcoming{opacity:.4}

/* Wizard footer — Next button + pricing link, after the last section */
.wiz-footer{padding:4px 4px 0}
.btn-next{width:100%;padding:16px;border-radius:24px;font-size:16px;font-weight:400;font-family:inherit;border:none;background:var(--bbd);color:var(--ink);cursor:pointer;transition:background .12s}
.btn-next:hover:not(:disabled){background:var(--bbd-hover)}
.btn-next:disabled{background:var(--bg);color:var(--faint);cursor:not-allowed}
.pricing-link{display:block;text-align:center;margin-top:20px;font-family:inherit;font-size:14px;font-weight:700;color:var(--blue);text-decoration:none}
.pricing-link:hover{opacity:.75}

/* Result / Summary (used by the standalone Bulk page only) */
.rtop{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
.rtop-text{flex:1;min-width:0}
.rnam{font-family:var(--font-head);font-size:20px;font-weight:700;color:var(--navy);letter-spacing:-.01em;line-height:1.25;margin-bottom:6px}
.rdsc{font-size:13px;color:var(--mid);line-height:1.5}
.rtop-visual{width:80px;height:80px;flex-shrink:0;border-radius:12px;overflow:hidden;background:var(--bbg)}
.rtop-visual img{width:100%;height:100%;object-fit:cover;display:none}
.rtop-visual img.vis{display:block}
.rch{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.rch li{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--ink);font-weight:500;line-height:1.4}
.rch li::before{content:"✓";color:var(--blue);font-weight:700;flex-shrink:0}
.sbody{background:var(--white);border-radius:0 0 12px 12px;border:1px solid var(--bdr);border-top:none;overflow:hidden}

.rsect-bdr{border-top:1px solid var(--bdr);padding-top:12px;margin-top:12px}
.pstr-rows{display:flex;flex-direction:column;gap:9px}
.pstr-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:9px;border-bottom:1px solid var(--bdr)}
.pstr-row:last-child{border-bottom:none;padding-bottom:0}
.pstr-label{font-size:12.5px;color:var(--mid);flex:1}
.pstr-val{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;text-align:right}
.pstr-sub{font-size:11px;color:var(--faint);margin-top:2px}
.bg{font-size:12.5px;font-weight:500;color:var(--mid);background:transparent;border:1px solid var(--bdr);padding:9px 16px;border-radius:24px;cursor:pointer;transition:background .1s;font-family:inherit}
.bg:hover{background:var(--bg)}
/* Bulk */
.bkh{background:var(--navy);border-radius:12px 12px 0 0;padding:20px}
.bkey{font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:5px}
.bkti{font-family:var(--font-head);font-size:18px;font-weight:700;color:#fff}
.bkoo{display:grid;grid-template-columns:1fr 1fr}
.bkop{padding:16px;cursor:pointer;border-right:1px solid var(--bdr);transition:background .12s}
.bkop:last-child{border-right:none}
.bkop:hover{background:var(--bg)}
.bkoi{margin-bottom:6px;display:block;color:var(--mid)}
.bkoi svg{width:20px;height:20px;display:block}
.bkot{font-size:12.5px;font-weight:500;color:var(--ink);margin-bottom:3px}
.bkod{font-size:11px;color:var(--mid);line-height:1.45}
.bkft{padding:12px 18px;border-top:1px solid var(--bdr);background:#FAFAF7}

@keyframes slin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(4px) scale(.99)}to{opacity:1;transform:none}}
