/* ============ hồi âm · lời chúc · mừng cưới (replies.js) — nằm trong bảng trượt giấy của shell.css ============
   Ô nhập như dòng kẻ trên giấy, chữ EB Garamond ≥ 19px (iOS không phóng to khi chạm), nút viên thuốc đỏ rượu. */
.rp-form { display: grid; }
.rp-fld { display: grid; gap: 4px; margin-top: 20px; }
.rp-fld > span { font: 500 13.5px/1.3 var(--font-ui); letter-spacing: .04em; color: var(--ink-muted); }
.rp-fld i { font-style: normal; opacity: .75; }
.rp-fld input, .rp-fld textarea { width: 100%; margin: 0; font: 400 19px/1.45 var(--font-body); color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 6px 2px 7px; outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color .2s, box-shadow .2s; }
.rp-fld textarea { resize: vertical; min-height: 3.4em; max-height: 40vh; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: rgba(255,255,255,.42); }
.rp-fld input:focus { border-color: var(--wine); box-shadow: 0 1px 0 var(--wine); }
.rp-fld textarea:focus { border-color: var(--wine); box-shadow: 0 0 0 1px var(--wine); }
.rp-count { justify-self: end; font: 400 12.5px/1.3 var(--font-ui); color: var(--ink-muted); }

.rp-choice { margin: 24px 0 0; padding: 0; border: 0; min-width: 0; }
.rp-choice legend { padding: 0; margin-bottom: 10px; font: 500 13.5px/1.3 var(--font-ui); letter-spacing: .04em; color: var(--ink-muted); }
.rp-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rp-opts label { position: relative; display: grid; place-items: center; min-height: 54px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--wine) 38%, transparent);
  border-radius: 999px; font: 500 15.5px/1.25 var(--font-ui); color: var(--wine); text-align: center; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.rp-opts input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rp-opts label:has(input:checked) { background: var(--wine); border-color: var(--wine); color: var(--cream); }
.rp-opts label:has(input:focus-visible) { outline: 2px solid var(--gold-ok); outline-offset: 3px; }

.rp-guests { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; font: 500 15.5px/1.3 var(--font-ui); color: var(--ink); }
.rp-guests[hidden] { display: none; }
.rp-step { display: inline-flex; align-items: center; gap: 8px; }
.rp-step button { width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--wine) 38%, transparent);
  background: transparent; color: var(--wine); font: 400 22px/1 var(--font-ui); cursor: pointer; }
.rp-step button:active { background: color-mix(in srgb, var(--wine) 8%, transparent); }
.rp-step output { min-width: 2.2ch; text-align: center; font: 500 24px/1 var(--font-display); color: var(--ink); }

.rp-send { width: 100%; min-height: 54px; margin-top: 26px; font-weight: 600; font-size: 16.5px; }
.rp-send:disabled { opacity: .72; cursor: progress; }
.rp-msg { min-height: 1.45em; margin: 10px 0 0; font: 400 15px/1.45 var(--font-ui); color: var(--ink-muted); text-align: center; }
.rp-msg.err { color: var(--wine-hi); }
.rp-msg:empty { min-height: 0; margin: 0; }

.rp-done { text-align: center; padding: 4px 0 2px; }
.rp-done-h { margin: 2px 0 10px; font: 400 46px/1.1 var(--font-script); color: var(--wine); }
.rp-sum { margin: 12px 0 0; font: 500 15px/1.4 var(--font-ui); color: var(--ink-muted); }
.rp-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.rp-acts .btn { min-width: 150px; }

/* ---------- mừng cưới ---------- */
.sheet.wide .sheet-panel { max-width: 780px; }   /* hai thẻ QR cạnh nhau trên màn rộng */
.gf-list { display: grid; gap: 16px; margin-top: 18px; }
@media (min-width: 640px) { .gf-list.two { grid-template-columns: 1fr 1fr; } }
.gf { padding: 18px 16px 16px; text-align: center; background: #FFFDF8; border: 1px solid color-mix(in srgb, var(--gold-dark) 45%, transparent);
  border-radius: 12px; box-shadow: 0 12px 26px -20px rgba(60,20,10,.5); }
.gf-who { margin: 0 0 12px; font: italic 400 22px/1.3 var(--font-display); color: var(--wine); }
.gf-qr { width: min(220px, 64vw); margin: 0 auto; padding: 10px; background: #fff; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); }
.gf-qr img { display: block; width: 100%; height: auto; }
.gf-sample { margin: 10px 0 0; font: 500 13px/1.4 var(--font-ui); color: var(--wine-hi); }
.gf-acc { margin: 14px 0 0; display: grid; gap: 6px; text-align: left; }
.gf-acc div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px dashed color-mix(in srgb, var(--line) 75%, transparent); }
.gf-acc dt { flex: none; font: 400 14px/1.4 var(--font-ui); color: var(--ink-muted); }
.gf-acc dd { margin: 0; min-width: 0; font: 500 17px/1.4 var(--font-body); color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.gf-num { font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.gf-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.gf-acts .btn { min-height: 46px; padding: 0 8px; font-size: 14.5px; }

/* ---------- thư xem lại (nút con dấu): thanh hồi âm · mừng cưới · lời chúc dưới lá thư ---------- */
.info-pop { background: var(--wine-deep); }
#info-pop-layer { bottom: calc(66px + env(safe-area-inset-bottom)); }
.pop-acts { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 8px;
  padding: 6px calc(12px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); }
.pop-btn { flex: 0 1 136px; min-width: 0; padding: 0 10px; color: var(--champ); border: 1px solid color-mix(in srgb, var(--champ) 45%, transparent); background: rgba(22,4,9,.35); }
.pop-btn:hover { background: rgba(232,211,169,.12); }

/* thẻ cuối nằm trên bầu trời lời chúc (wishsky.js); thẻ đọc lời chúc của wishsky ở z-index 30, trên cả thẻ cuối */
.end > .end-card { z-index: 2; }