/* One question per screen: the step component shared by the quick free letter
   (pages/quick-free-letter.html) and the post-payment Tell Santa form (thanks page,
   pages/js/tellsanta.js). Source: integrated/pages/assets/steps.css, copied to public/assets
   by scripts/build_pages.py. Mobile first at 390 wide; every field is 16px or larger so iOS
   never zooms. */
.q-card{background:#ffffff;color:#16231d;border-radius:14px;padding:16px 16px 18px;box-shadow:0 24px 50px -28px rgba(22,35,29,0.22)}
.q-prog{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;min-height:24px}
.q-dots{display:flex;gap:7px}
.q-dots span{width:9px;height:9px;border-radius:50%;background:#d9cfb9}
.q-dots span.on{background:#b3202b}
.q-dots span.done{background:#e7f2eb}
.q-count{font:600 12px/1 "Figtree",sans-serif;color:#46544d}
.q-back{font:600 15px/1 "Figtree",sans-serif;color:#46544d;background:none;border:0;padding:8px 0;min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.q-step label.q-q{display:block;font:500 22px/1.2 "Young Serif",Georgia,serif;color:#16231d;margin:0 0 12px}
.q-step input[type=text],.q-step input[type=email],.q-card input[type=tel]{display:block;width:100%;min-height:54px;border:1px solid #dde3df;border-radius:12px;padding:12px 14px;font:500 18px/1.2 "Figtree",system-ui,sans-serif;background:#fff;color:#16231d;-webkit-appearance:none;appearance:none}
.q-step input:focus,.q-card input[type=tel]:focus{outline:3px solid #1d5b3d;outline-offset:1px}
.q-hint{font-size:14px;color:#46544d;margin:8px 0 0}
.q-check{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.4;color:#16231d;margin:14px 0 0;cursor:pointer}
.q-check input{width:24px;height:24px;flex:none;margin:0;accent-color:#b3202b}
.q-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;margin-top:14px;border:0;border-radius:999px;background:#b3202b;color:#fff;font:600 18px/1 "Figtree",system-ui,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
.q-btn:disabled{opacity:.6}
.q-btn.ghost{background:transparent;color:#16231d;border:1px solid #dde3df}
.q-row{display:flex;gap:10px;align-items:center;justify-content:space-between}
.q-skip{font:600 16px/1 "Figtree",sans-serif;color:#16231d;background:none;border:1px solid #dde3df;border-radius:999px;min-height:48px;padding:0 20px;cursor:pointer}
.q-msg{min-height:1.3em;margin:10px 0 0;font-size:15px}
.q-msg.bad{color:#b3202b;font-weight:600}
/* Added for the Tell Santa steps: textareas, selects, tap-to-choose options, the review list. */
.q-step p.q-q,.q-step legend.q-q{display:block;padding:0;font:500 22px/1.2 "Young Serif",Georgia,serif;color:#16231d;margin:0 0 12px}
.q-step fieldset{border:0;padding:0;margin:0;min-width:0}
.q-step textarea,.q-step select,.q-step input[type=date]{display:block;width:100%;min-height:54px;border:1px solid #dde3df;border-radius:12px;padding:12px 14px;font:500 18px/1.3 "Figtree",system-ui,sans-serif;background:#fff;color:#16231d;box-sizing:border-box;max-width:100%}
.q-step textarea{min-height:110px;resize:vertical}
.q-step textarea:focus,.q-step select:focus{outline:3px solid #1d5b3d;outline-offset:1px}
.q-step .q-sub{display:block;font:600 14px/1.3 "Figtree",sans-serif;color:#46544d;margin:12px 0 6px}
.q-wishes{display:grid;gap:8px}
.q-choices{display:grid;gap:8px}
.q-choice{display:flex;align-items:center;gap:12px;min-height:54px;padding:10px 14px;border:1px solid #dde3df;border-radius:12px;background:#fff;font:500 18px/1.2 "Figtree",system-ui,sans-serif;color:#16231d;cursor:pointer}
.q-choice input{width:22px;height:22px;margin:0;flex:none;accent-color:#b3202b}
.q-choice:has(input:checked){border-color:#b3202b;box-shadow:0 0 0 2px #a3242f inset}
.q-review{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid #dde3df}
.q-review li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:start;padding:10px 0;border-bottom:1px solid #dde3df}
.q-review b{display:block;font:600 13px/1.3 "Figtree",sans-serif;color:#46544d}
.q-review span{display:block;font:500 16px/1.35 "Figtree",sans-serif;color:#16231d;overflow-wrap:anywhere}
.q-review button{font:600 15px/1 "Figtree",sans-serif;color:#16231d;background:none;border:0;min-height:44px;padding:0 4px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.q-card,.q-step,.q-review{min-width:0;max-width:100%}
.q-card{overflow-wrap:anywhere}
/* Free video email confirmation (js/freevideo.js, 29 Oct 2026): the address, Edit and Confirm. */
.q-confirm{margin:14px 0 0;padding:14px 16px;border:1px solid #c6d3cb;border-radius:14px;background:#ffffff;color:#16231d}
.q-confirm p{margin:0 0 6px;font-size:15px;line-height:1.45}
.q-confirm .q-confirm-h{font-weight:600;color:#46544d}
.q-confirm .q-confirm-addr{font:600 18px/1.35 "Figtree",system-ui,sans-serif;word-break:break-all;color:#16231d}
.q-confirm .q-confirm-sug{color:#b3202b}
.q-confirm .q-confirm-sug b{word-break:break-all}
.q-confirm-row{display:grid;gap:10px;margin-top:10px}
.q-confirm-row .q-btn{margin-top:0;white-space:normal;overflow-wrap:anywhere;padding:10px 16px;line-height:1.25;text-align:center}
.q-confirm-row .q-skip{width:100%}