/* 沿用宣紙、墨綠、細金線。選購與補資料各一頁，手機只捲動 dialog。 */
.order-dialog {
  --order-paper: #f6f2e9;
  --order-line: rgba(142,117,73,.26);
  position: fixed; inset: 0; margin: 0; padding: 0; border: 0;
  width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none;
  color: #23332d; background: var(--order-paper); font: 16px/1.7 var(--sans);
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.order-dialog::backdrop { background: #23332d66; }
.order-dialog *, .order-dialog *::before, .order-dialog *::after { box-sizing: border-box; }
.order-dialog [hidden] { display: none !important; }
.order-dialog :is(button,input,select,textarea,summary):focus-visible { outline: 2px solid #98702f; outline-offset: 3px; }
.order-bar { border-bottom: 1px solid var(--order-line); padding-top: env(safe-area-inset-top); }
.order-bar-inner { max-width: 620px; margin: auto; padding: 4px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.order-back, .order-text-button { min-height: 44px; padding: 5px 0; border: 0; background: none; color: #31594d; font: 14px/1.6 var(--sans); cursor: pointer; }
.order-text-button { text-decoration: underline; text-underline-offset: 4px; }
.order-brand { font: 900 20px/1.5 var(--serif); letter-spacing: .15em; color: #1f4138; }
.order-main { width: 100%; max-width: 620px; margin: auto; padding: 22px 20px max(30px, env(safe-area-inset-bottom)); }
.order-progress { display: flex; justify-content: space-between; gap: 6px; list-style: none; padding: 0; margin: 0 0 21px; font-size: 12px; color: #71766e; }
.order-progress li { padding-bottom: 7px; flex: 1; border-bottom: 1px solid var(--order-line); }
.order-progress li.current { color: #31594d; border-color: #31594d; font-weight: 600; }
.order-title { margin: 0; font: 900 clamp(24px,6vw,30px)/1.5 var(--serif); color: #1f4138; letter-spacing: .02em; }
.order-title:focus { outline: none; }
.order-lead { margin: 5px 0 0; font-size: 14px; color: #626b62; }
.order-local { margin: 14px 0 18px; color: #80653b; font-size: 12px; padding-left: 9px; border-left: 2px solid #c8b690; }
.order-products, .order-section { min-width: 0; padding: 0; border: 0; margin: 0; }
.order-products .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.order-product { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 15px 12px; background: #fffdf655; border: 1px solid var(--order-line); border-bottom-width: 0; cursor: pointer; }
.order-product:last-child { border-bottom-width: 1px; }
.order-product.checked { background: #e9eee5; border-left: 3px solid #31594d; padding-left: 10px; }
.order-product:has(input:checked) { background: #e9eee5; border-left: 3px solid #31594d; padding-left: 10px; }
.order-product input, .order-check input { position: static; opacity: 1; width: 18px; height: 18px; margin: 0; accent-color: #31594d; }
.order-product-copy { display: grid; gap: 3px; }
.order-product-copy strong { font: 700 18px/1.5 var(--serif); color: #1f4138; }
.order-product-copy > span { font-size: 13px; line-height: 1.65; color: #626b62; }
.order-price { color: #80602f; font: 600 16px/1.4 var(--serif); white-space: nowrap; }
/* 還沒開賣：變灰、不能勾（降價標籤不變灰） */
.order-product.locked { cursor: default; background: #efeeea; }
.order-product.locked > input, .order-product.locked > .order-price, .order-product.locked .order-product-copy > :not(.drop-tag) { filter: grayscale(1); }
.order-product.locked input { cursor: default; }
.order-product-copy > .order-product-note.order-soon { font-weight: 700; color: #4a4a42; }
.order-selection-status { margin: 9px 0 0; font-size: 12px; color: #626b62; min-height: 20px; }
.order-totals { margin: 12px 0 18px; font-size: 14px; }
.order-totals p { margin: 3px 0; display: flex; gap: 12px; justify-content: space-between; }
.order-totals p > span:last-child { white-space: nowrap; }
.order-totals .order-total { margin-top: 10px; padding-top: 10px; align-items: baseline; border-top: 1px solid var(--order-line); }
.order-total strong { color: #1f4138; font: 700 25px/1.3 var(--serif); white-space: nowrap; }
/* 主按鈕是全站同一種朱紅紙片（style.css 紙片按鈕），這裡只管尺寸 */
.order-primary { display: block; width: 100%; min-height: 54px; padding: 12px 14px 16px; font: 700 17px/1.6 var(--sans); letter-spacing: .06em; }
.order-primary:hover:enabled { --btn: #bd4a33; }
.order-primary:disabled { --btn: #ddd6c4; --btn-d: #c4bba5; color: #5b645a; cursor: default; }
.order-help { margin: 7px 0 0; font-size: 13px; line-height: 1.75; color: #626b62; }
.order-form { display: block; position: static; max-width: none; margin: 0; }
.order-chosen { margin: 0 0 20px; padding: 12px 14px; background: #e9eee5; font-size: 13px; color: #31594d; }
.order-reading-brief { margin: 0 0 22px; padding: 0 0 12px; border-bottom: 1px solid var(--order-line); }
.order-reading-brief summary { min-height: 44px; padding: 10px 0; color: #31594d; font-size: 14px; line-height: 1.75; cursor: pointer; text-wrap: pretty; }
.order-reading-brief summary:focus-visible { outline: 2px solid #98702f; outline-offset: 3px; }
.order-reading-brief ul { display: grid; gap: 13px; margin: 6px 0 13px; padding: 0; list-style: none; }
.order-reading-brief li { display: grid; grid-template-columns: 2.5em minmax(0,1fr); gap: 3px 10px; font-size: 14px; line-height: 1.8; }
.order-reading-topic { color: #82612e; font-weight: 500; white-space: nowrap; }
.order-reading-focus { grid-column: 2; justify-self: start; color: #82612e; background: #ede5d2; font-size: 11px; line-height: 1.8; padding: 0 6px; border-radius: 2px; }
.order-own { margin-bottom: 25px; }
.order-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.order-section-head h3, .order-review-section h3, .order-delivery h3 { margin: 0; font: 700 18px/1.6 var(--serif); color: #1f4138; }
.order-data { margin: 0; padding: 13px 14px; background: #fffdf699; }
.order-data-row { display: grid; grid-template-columns: 4.5em minmax(0,1fr); gap: 8px; font-size: 14px; }
.order-data-row + .order-data-row { margin-top: 5px; }
.order-data dt { color: #626b62; }
.order-data dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.order-section { margin: 25px 0; padding-top: 13px; border-top: 1px solid var(--order-line); }
.order-section legend { padding-right: 10px; font: 700 20px/1.6 var(--serif); color: #1f4138; }
.order-field { min-width: 0; margin: 14px 0; }
.order-field label { display: block; font-size: 14px; color: #31594d; margin-bottom: 6px; }
.order-field :is(input,select,textarea) { display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 49px; padding: 11px 12px; border: 1px solid #a5aa9c; border-radius: 5px; background: #fffdf6; color: #23332d; font: 400 16px/1.55 var(--sans); letter-spacing: normal; box-shadow: none; appearance: none; -webkit-appearance: none; }
.order-field select { padding-right: 27px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%2380602f' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.order-field textarea { resize: vertical; min-height: 100px; }
.order-field :is(input,textarea)::placeholder { color: #7a7f73; font-size: 14px; }
.order-field [aria-invalid="true"] { border-color: #994f3c; }
.order-error { margin: 6px 0; font-size: 13px; color: #994f3c; }
.order-error-summary { margin-bottom: 14px; }
.order-duo { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
.order-check { display: flex; align-items: center; gap: 9px; min-height: 44px; font-size: 14px; color: #31594d; cursor: pointer; }
.order-variant { margin: 4px 0 8px; padding: 10px 12px; background: #ede5d2; color: #715c36; font-size: 13px; }
.order-center { display: block; text-align: center; margin-left: auto; margin-right: auto; }
.order-review-data { margin: 14px 0; }
.order-review-data summary { color: #31594d; font-size: 14px; min-height: 44px; padding: 8px 0; cursor: pointer; }
.order-review-section { border-top: 1px solid var(--order-line); padding-top: 16px; margin: 18px 0; }
.order-review-section .order-data { margin-top: 8px; }
.order-answer { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0; font-size: 15px; }
.order-delivery { margin-top: 24px; padding: 18px 0 10px; border-top: 1px solid var(--order-line); }
.order-delivery p { margin: 5px 0; color: #626b62; font-size: 13px; }
.product-buy:focus-visible { outline: 2px solid #98702f; outline-offset: 3px; }
.other-readings .product { align-items: center; }
.other-readings[hidden] { display: none; }
@media (max-width: 359px) {
  .order-duo { grid-template-columns: minmax(0,1fr); gap: 0; }
  .order-product { gap: 8px; padding: 13px 9px; }
  .order-product:has(input:checked) { padding-left: 7px; }
  .order-product-copy strong { font-size: 17px; }
  .order-price { font-size: 15px; }
}
@media (min-width: 620px) {
  .order-main { padding-top: 34px; }
  .order-product { padding-top: 18px; padding-bottom: 18px; }
}

/* 2026-10-20 繪本舞台改版：訂製頁是一張淡紙紋的紙，主按鈕跟全站一樣是朱紅紙片。 */
.order-dialog { --order-paper: #fffaf0; background: var(--order-paper) var(--art-grain); background-size: 160px; }
.order-dialog:not([open]) { display: none; }
.order-dialog[open] { z-index: 80; }
.order-link { display: flex; align-items: center; justify-content: center; margin-top: 12px; text-decoration: none; text-align: center; }
.order-form-copy { --pp: #fffdf6; margin: 16px 0 6px; padding: 16px; }
.order-form-copy .order-answer { margin: 10px 0 12px; font-size: 14px; color: #3a3a34; }

/* ── 2026-10-20 第三輪：訂製頁也是紙（酸民審查：前面逛遊樂園，結帳突然像網路銀行）──
   商品是一張張紙票、勾選是打孔圓（選了就蓋朱紅）、步驟是小紙標、合計是收據紙條；欄位跟入場券一樣寫在線上。 */
.order-dialog { background: var(--paper, #f6efe1) var(--art-grain); background-size: 160px; }
.order-bar { border-bottom: 2px dashed rgba(120, 84, 40, .28); }
.order-brand { font: 400 22px/1.5 var(--hand); letter-spacing: .3em; color: var(--pine-deep); }
.order-title { font-family: var(--sans); font-weight: 800; letter-spacing: .04em; }
.order-product-copy strong, .order-section-head h3, .order-review-section h3, .order-delivery h3, .order-section legend { font-family: var(--sans); font-weight: 800; }
/* 步驟：三張小紙標 */
.order-progress { gap: 8px; margin-bottom: 22px; }
.order-progress li {
  padding: 6px 4px 8px; border: 0; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--muted);
  background: #f1e3c4 var(--art-grain); background-size: 160px; rotate: -1deg;
  -webkit-mask-box-image: var(--edge-card) 32 fill / 10px round; mask-border: var(--edge-card) 32 fill / 10px round;
}
.order-progress li:nth-child(2) { rotate: .8deg; }
.order-progress li:nth-child(3) { rotate: -.5deg; }
.order-progress li.current { border: 0; background-color: var(--verm, #c8553d); color: #fffaf0; font-weight: 800; }
/* 商品：紙票。價格前一條虛線像票根 */
.order-product, .order-product:last-child {
  grid-template-columns: 30px minmax(0, 1fr) auto; margin-bottom: 10px; padding: 16px 14px 16px 12px; border: 0;
  background: #fffaf0 var(--art-grain); background-size: 160px;
  -webkit-mask-box-image: var(--edge-card) 32 fill / 14px round; mask-border: var(--edge-card) 32 fill / 14px round;
}
.order-product.checked, .order-product:has(input:checked) { border-left: 0; padding-left: 12px; background-color: #fff1d2; }
.order-product input {
  appearance: none; -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 2px dashed rgba(120, 84, 40, .5); background: var(--paper, #f6efe1);
}
.order-product input:checked {
  border: 2px solid var(--verm-deep, #96392a);
  background: var(--verm, #c8553d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M1.5 6.5 5 10 12.5 1.8' fill='none' stroke='%23fffaf0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.order-product input:focus-visible { outline: 3px solid var(--gold, #c99a3a); outline-offset: 2px; }
.order-check input { accent-color: var(--verm, #c8553d); }
.order-price { align-self: stretch; display: flex; align-items: center; padding-left: 12px; border-left: 2px dashed rgba(120, 84, 40, .3); font: 800 17px/1.3 var(--sans); color: var(--pine-deep); }
/* 劃線價：劃掉的價格疊在售價上面 */
.order-price:has(.was) { flex-direction: column; align-items: flex-end; justify-content: center; gap: 1px; }
.order-price .was { font-size: 13px; font-weight: 600; color: #6b6b63; text-decoration-thickness: 1.5px; }
/* 合計：收據紙條 */
.order-totals { padding: 12px 14px 14px; background: #fffdf6 var(--art-grain); background-size: 160px;
  -webkit-mask-box-image: var(--edge-torn) 32 fill / 10px round; mask-border: var(--edge-torn) 32 fill / 10px round; }
.order-totals .order-total { border-top: 2px dashed rgba(120, 84, 40, .3); }
.order-total strong { font: 800 26px/1.3 var(--sans); color: var(--verm-deep, #96392a); }
/* 本機預覽說明、已選摘要：貼上去的便條 */
.order-local, .order-chosen { border-left: 0; padding: 9px 13px; color: #6b5034; background: #fbf1cf var(--art-grain); background-size: 160px;
  -webkit-mask-box-image: var(--edge-card) 32 fill / 10px round; mask-border: var(--edge-card) 32 fill / 10px round; }
.order-data { background: #fffaf0 var(--art-grain); background-size: 160px;
  -webkit-mask-box-image: var(--edge-card) 32 fill / 12px round; mask-border: var(--edge-card) 32 fill / 12px round; }
/* 欄位：跟入場券一樣寫在一條墨線上；長文字用虛線框的紙 */
.order-field :is(input, select) { border: 0; border-bottom: 2px solid #c8b48c; border-radius: 0; background-color: transparent; padding-left: 2px; }
.order-field textarea { border: 2px dashed #c8b48c; border-radius: 8px; background: #fffdf6; }
.order-field :is(input, select, textarea):focus { outline: none; border-color: var(--verm, #c8553d); background-color: rgba(246, 210, 122, .14); }
@supports not ((-webkit-mask-box-image: none) or (mask-border: none)) {
  .order-progress li, .order-product, .order-totals, .order-local, .order-chosen, .order-data { border-radius: 10px; }
}

/* ── 2026-10-20 金流前的匯款下單：第四步匯款、送出成功 ── */
.order-together { min-width: 0; padding: 0; border: 0; }
.order-together legend { margin-bottom: 4px; font-size: 14px; color: #31594d; }
.order-together .order-check { min-height: 40px; }
.order-check { align-items: flex-start; }
.order-check input { margin-top: 3px; flex: 0 0 auto; }
/* 匯款資訊：一張收據紙條 */
.order-bank { margin: 6px 0 18px; padding: 16px 16px 14px; background: #fffdf6 var(--art-grain); background-size: 160px;
  -webkit-mask-box-image: var(--edge-torn) 32 fill / 10px round; mask-border: var(--edge-torn) 32 fill / 10px round; }
.order-bank-amount { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; margin: 0 0 8px; border-bottom: 2px dashed rgba(120, 84, 40, .3); }
.order-bank-amount span { font-size: 15px; font-weight: 700; color: #31594d; }
.order-bank-amount strong { font: 800 28px/1.2 var(--sans); color: var(--verm-deep, #96392a); font-variant-numeric: tabular-nums; }
.order-bank-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0; font-size: 15px; }
.order-bank-row span { min-width: 2.5em; color: #626b62; }
.order-bank-row b { font: 800 19px/1.4 var(--sans); letter-spacing: .06em; color: #1f4138; font-variant-numeric: tabular-nums; }
.order-copy { min-height: 44px; padding: 2px 12px 5px; border: 0; cursor: pointer; font: 700 13.5px/1.4 var(--sans); color: #244539;
  background: #f1e3c4 var(--art-grain); background-size: 160px; box-shadow: inset 0 -3px 0 #d8c39a;
  -webkit-mask-box-image: var(--edge-card) 32 fill / 10px round; mask-border: var(--edge-card) 32 fill / 10px round; }
.order-copy-status { min-height: 1.5em; margin: 0; }
#order-last5 { font-size: 22px; letter-spacing: .3em; font-variant-numeric: tabular-nums; max-width: 12em; }
.order-consent { margin: 10px 0; font-size: 14px; line-height: 1.7; color: #23332d; }
.order-pay .order-primary { margin-top: 12px; }
.order-error-summary .order-answer { margin: 8px 0; padding: 10px 12px; background: #fffdf6; font-size: 13.5px; line-height: 1.7; color: #23332d; white-space: pre-wrap; }
.order-error-summary .order-copy { margin-right: 10px; }
/* 送出成功：訂單編號像一張票根 */
.order-done { display: grid; justify-items: center; gap: 2px; margin: 14px 0 12px; padding: 16px 12px 18px; text-align: center;
  background: #fff1d2 var(--art-grain); background-size: 160px; border-top: 2px dashed rgba(120, 84, 40, .38); border-bottom: 2px dashed rgba(120, 84, 40, .38); }
.order-done-label { font-size: 12.5px; font-weight: 700; letter-spacing: .24em; color: #7e5d1d; }
.order-done-id { font: 800 30px/1.3 var(--sans); letter-spacing: .1em; color: #96392a; font-variant-numeric: tabular-nums; }
.order-main > .order-primary + .order-primary { margin-top: 10px; }
@supports not ((-webkit-mask-box-image: none) or (mask-border: none)) {
  .order-bank, .order-copy { border-radius: 10px; }
}
.order-link.order-secondary { --btn: #fffaf0; --btn-d: #d9c9a6; color: #244539; }

/* ── 2026-10-21 補資料頁重做（本人：合盤「有沒有這幾件事」手機上看不懂怎麼勾）──
   每題有題號；題目下一行寫「怎麼答」，最下面寫「為什麼問」；選項是一顆顆好按的紙片按鈕，選到就蓋朱紅。 */
.order-sub { margin: 22px 0 2px; padding-top: 12px; border-top: 2px dashed rgba(120, 84, 40, .22); font: 800 15px/1.6 var(--sans); letter-spacing: .08em; color: #80602f; }
.order-section > .order-sub:first-of-type { margin-top: 6px; padding-top: 0; border-top: 0; }
.order-no { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; margin-right: 8px; border-radius: 13px;
  background: var(--pine-deep, #1f4138); color: #fffaf0; font: 800 13px/1 var(--sans); vertical-align: 2px; }
.order-opt { margin-left: 8px; padding: 1px 7px; border-radius: 4px; background: #ede5d2; color: #715c36; font-size: 11.5px; font-weight: 700; vertical-align: 2px; }
.order-section .order-choice legend, .order-field label:has(.order-no) { margin-bottom: 2px; padding: 0; font: 800 16.5px/1.6 var(--sans); color: #1f4138; }
.order-choice { min-width: 0; padding: 0; border: 0; margin: 22px 0; }
.order-how { margin: 2px 0 10px; font-size: 13.5px; line-height: 1.65; color: #80602f; }
.order-why { margin: 8px 0 0; font-size: 13px; line-height: 1.7; color: #626b62; }
.order-why::before { content: "為什麼問"; display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 3px; background: #e9eee5; color: #31594d; font-size: 11px; font-weight: 700; }
.order-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.order-chip { position: relative; display: inline-flex; align-items: center; min-height: 46px; padding: 8px 15px; cursor: pointer;
  border: 2px solid #d3bf95; border-radius: 12px; background: #fffdf6; color: #23332d; font: 600 15.5px/1.35 var(--sans);
  box-shadow: inset 0 -3px 0 rgba(120, 84, 40, .12); -webkit-tap-highlight-color: transparent; }
.order-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.order-chip.on { border-color: var(--verm-deep, #96392a); background: var(--verm, #c8553d); color: #fffaf0; box-shadow: inset 0 -3px 0 var(--verm-deep, #96392a); }
.order-chip.on span::before { content: "✓ "; font-weight: 800; }
.order-chip:has(input:focus-visible) { outline: 3px solid var(--gold, #c99a3a); outline-offset: 2px; }
.order-choice[aria-invalid="true"] .order-chip { border-color: #994f3c; }
.order-or { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; font-size: 12.5px; color: #8a8072; }
.order-or::before, .order-or::after { content: ""; flex: 1; border-top: 1px dashed rgba(120, 84, 40, .35); }
.order-chips-only { display: block; }
.order-chips-only .order-chip { display: flex; width: 100%; justify-content: center; text-align: center; }
.order-year { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 10px 0 4px; font-size: 14.5px; color: #31594d; }
.order-year strong { font: 800 26px/1.2 var(--sans); color: var(--verm-deep, #96392a); }
.order-promise { margin: 12px 0 6px; padding: 10px 13px; font-size: 14px; line-height: 1.75; color: #5a4628; background: #fbf1cf var(--art-grain); background-size: 160px;
  -webkit-mask-box-image: var(--edge-card) 32 fill / 10px round; mask-border: var(--edge-card) 32 fill / 10px round; }
.order-eg { margin: 6px 0 4px; padding: 12px 14px; border: 2px dashed #d3bf95; border-radius: 10px; background: #fffdf6; font-size: 13.5px; line-height: 1.75; color: #3a3a34; }
.order-eg p { margin: 0; }
.order-eg .order-eg-title { margin-top: 8px; font-weight: 800; color: #80602f; }
.order-eg .order-eg-title:first-child { margin-top: 0; }
@supports not ((-webkit-mask-box-image: none) or (mask-border: none)) { .order-promise { border-radius: 10px; } }
/* 2026-10-22 客人實走：第一步就看得到生日版與年度、售票口「購票資料」那格標成已完成、醫療範圍在第 2 步確認；說明字放大一號給長輩看 */
.order-product-copy > .order-product-note { font-size: 13px; color: #80602f; }
.order-progress li.done { background-color: #e3ead9; color: #31594d; }
.order-scope { min-width: 0; margin: 14px 0 0; padding: 0; border: 0; }
.order-scope .order-check { align-items: flex-start; line-height: 1.65; }
.order-scope .order-check input { margin-top: 4px; flex: none; }
.order-progress li { white-space: nowrap; }   /* 五格時也不把「選報告」拆成兩行 */

/* ── 2026-10-28 出生資料確認卡（本人：合盤對方資料填錯，報告出完才要重改）──
   每個人一張票根：左邊一條撕線，資料寫大一點；按「資料正確」時天相印章從右上落下、蓋出朱紅「已核對」。
   紙的毛邊畫在 ::before，卡片本身不裁切，印章跳出卡片外也看得到。 */
.order-confirm { margin: 18px 0 24px; }
.order-confirm > h3 { margin: 0; font: 800 18px/1.6 var(--sans); color: var(--pine-deep, #1f4138); }
.confirm-card { position: relative; isolation: isolate; margin: 14px 0 0; padding: 14px 16px 12px 26px; transition: background-color .3s; }
.confirm-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fffaf0 var(--art-grain); background-size: 160px;
  -webkit-mask-box-image: var(--edge-card) 32 fill / 14px round; mask-border: var(--edge-card) 32 fill / 14px round; }
.confirm-card::after { content: ""; position: absolute; left: 12px; top: 14px; bottom: 14px; border-left: 2px dashed rgba(120, 84, 40, .32); }
.confirm-card.stamped::before { background-color: #fff3d8; }
.confirm-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-right: 88px; }
.confirm-tag { padding: 1px 8px 2px; border-radius: 4px; background: #e9eee5; color: #31594d; font: 700 12px/1.6 var(--sans); letter-spacing: .06em; }
.confirm-name { font: 800 19px/1.4 var(--sans); color: var(--pine-deep, #1f4138); overflow-wrap: anywhere; }
.confirm-rows { margin: 10px 0 0; }
.confirm-rows > div { display: grid; grid-template-columns: 4em minmax(0, 1fr); gap: 8px; padding: 5px 0; border-top: 1px dashed rgba(120, 84, 40, .18); font-size: 15px; line-height: 1.6; }
.confirm-rows > div:first-child { border-top: 0; }
.confirm-rows dt { color: #626b62; font-size: 13.5px; padding-top: 1px; }
.confirm-rows dd { margin: 0; color: #23332d; font-weight: 600; overflow-wrap: anywhere; }
.confirm-big { display: block; font-size: 16px; font-weight: 800; color: #1f4138; }
@media (max-width: 360px) { .confirm-card { padding-left: 22px; padding-right: 12px; } .confirm-rows > div { grid-template-columns: 3.4em minmax(0, 1fr); } .confirm-big { font-size: 15px; } }
.confirm-sub { display: block; font-size: 13px; font-weight: 500; color: #80602f; }
.confirm-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.confirm-ok { min-height: 46px; padding: 8px 18px; cursor: pointer; border: 2px solid #d3bf95; border-radius: 12px; background: #fffdf6; color: #23332d;
  font: 700 15.5px/1.35 var(--sans); box-shadow: inset 0 -3px 0 rgba(120, 84, 40, .12); -webkit-tap-highlight-color: transparent; }
.confirm-ok[aria-pressed="true"] { border-color: var(--verm-deep, #96392a); background: var(--verm, #c8553d); color: #fffaf0; box-shadow: inset 0 -3px 0 var(--verm-deep, #96392a); }
.confirm-ok:focus-visible { outline: 3px solid var(--gold, #c99a3a); outline-offset: 2px; }
.confirm-edit { min-height: 44px; font-size: 13.5px; }
/* 朱紅印記：方章、雙框、字是手寫字；蓋上去時從大縮小、帶一點墨暈 */
.confirm-seal { position: absolute; right: 12px; top: 14px; display: grid; place-items: center; width: 72px; height: 40px; white-space: nowrap;
  border: 3px double var(--verm, #c8553d); border-radius: 9px; color: var(--verm, #c8553d); font: 400 16px/1 var(--hand, var(--serif));
  letter-spacing: .08em; text-align: center; padding: 4px; background: rgba(255, 250, 240, .4);
  opacity: 0; transform: rotate(-12deg) scale(1.35); transition: opacity .2s, transform .2s; pointer-events: none; }
.confirm-card.stamped .confirm-seal { opacity: .9; transform: rotate(-12deg) scale(1); text-shadow: 0 0 1px rgba(200, 85, 61, .5); }
.confirm-stamper { position: absolute; right: 10px; top: -6px; width: 72px; height: 72px; opacity: 0; pointer-events: none;
  background: url("/static/art/star-tianxiang-whole.3169623950.webp") center / contain no-repeat; }
.confirm-card.stamping .confirm-stamper { animation: confirm-stamper .95s cubic-bezier(.3, .7, .4, 1) both; }
.confirm-card.stamping .confirm-seal { animation: confirm-ink .95s ease-out both; }
@keyframes confirm-stamper {
  0% { opacity: 0; transform: translate(14px, -40px) rotate(14deg) scale(.85); }
  22% { opacity: 1; }
  48% { transform: translate(0, 4px) rotate(0) scale(1); }
  56% { transform: translate(0, 9px) scale(1.12, .86); }
  70% { opacity: 1; transform: translate(-2px, -16px) rotate(-6deg) scale(1); }
  100% { opacity: 0; transform: translate(8px, -44px) rotate(-14deg) scale(.9); }
}
@keyframes confirm-ink {
  0%, 52% { opacity: 0; transform: rotate(-12deg) scale(1.45); }
  62% { opacity: 1; transform: rotate(-12deg) scale(.96); }
  100% { opacity: .9; transform: rotate(-12deg) scale(1); }
}
/* 收件信箱卡：信箱字放大，@ 後面的網域用朱紅標出來；常見打錯時下面跳一張黃便條 */
.confirm-mail { font: 800 17px/1.5 var(--sans); color: #1f4138; word-break: break-all; }
.confirm-mail b { color: var(--verm-deep, #96392a); }
.confirm-hint { margin: 10px 0 0; padding: 9px 12px; border-radius: 8px; background: #fbe7c4; color: #6b3d18; font-size: 14px; line-height: 1.7; }
.confirm-hint p { margin: 0 0 8px; }
.confirm-fix { min-height: 44px; padding: 6px 16px; cursor: pointer; border: 2px solid var(--verm-deep, #96392a); border-radius: 10px;
  background: #fffdf6; color: var(--verm-deep, #96392a); font: 800 15px/1.3 var(--sans); }
.confirm-fix:focus-visible { outline: 3px solid var(--gold, #c99a3a); outline-offset: 2px; }
.confirm-fee { margin: 14px 0 0; padding: 10px 13px; font-size: 14px; line-height: 1.75; color: #5a4628; background: #fbf1cf var(--art-grain); background-size: 160px;
  -webkit-mask-box-image: var(--edge-card) 32 fill / 10px round; mask-border: var(--edge-card) 32 fill / 10px round; }
.order-human { margin: 12px 0 0; min-height: 0; }

/* ── 2026-10-28 送出中的等待畫面：整頁蓋上一張紙，信紙滑進信封、印章蓋封口、信封浮著星星；送出了就往上飛 ── */
.order-sending { position: fixed; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; gap: 4px;
  padding: 24px 24px max(24px, env(safe-area-inset-bottom)); text-align: center; background: #fffaf0 var(--art-grain); background-size: 160px; }
.order-sending:focus { outline: none; }
.sending-stage { position: relative; width: 240px; height: 190px; margin-bottom: 6px; }
.sending-env { position: absolute; left: 20px; top: 62px; width: 200px; aspect-ratio: 510 / 270; animation: sending-float 3.2s ease-in-out 1.6s infinite; }
.sending-env-back, .sending-env-front { position: absolute; inset: 0; background: 0 0 / 100% 100% no-repeat; }
.sending-env-back { z-index: 0; background-image: var(--art-env-back); }
.sending-env-front { z-index: 2; background-image: var(--art-env-front); }
.sending-letter { position: absolute; z-index: 1; left: 13%; right: 13%; top: 10%; height: 72%; background: #fffdf7 var(--art-grain); background-size: 160px;
  background-image: var(--art-grain), repeating-linear-gradient(transparent 0 9px, rgba(120, 84, 40, .22) 9px 10px);
  -webkit-mask-box-image: var(--edge-card) 32 fill / 8px round; mask-border: var(--edge-card) 32 fill / 8px round;
  animation: sending-letter .9s cubic-bezier(.3, .7, .4, 1) both; }
.sending-seal { position: absolute; z-index: 4; left: 50%; top: 0; width: 74px; height: 74px; margin-left: -37px;
  background: url("/static/art/star-tianxiang-whole.3169623950.webp") center / contain no-repeat;
  animation: sending-seal 1.4s .75s cubic-bezier(.3, .7, .4, 1) both, sending-bob 2.6s ease-in-out 2.2s infinite; }
/* 封口上的朱紅圓印：印章落下那一刻出現（放在信封裡，跟著信封一起浮） */
.sending-mark { position: absolute; z-index: 3; left: 50%; top: 40px; width: 34px; height: 34px; margin-left: -17px; display: grid; place-items: center;
  border-radius: 50%; background: var(--verm, #c8553d); color: #fffaf0; font: 400 18px/1 var(--hand, var(--serif)); box-shadow: 0 0 0 2px rgba(200, 85, 61, .25);
  animation: sending-mark .5s 1.3s cubic-bezier(.3, .7, .4, 1) both; }
.sending-star { position: absolute; font-style: normal; color: var(--gold, #c99a3a); font-size: 16px; opacity: 0; animation: sending-twinkle 2.4s ease-in-out infinite; }
.sending-star.s1 { left: 14px; top: 40px; animation-delay: 1.4s; }
.sending-star.s2 { right: 20px; top: 26px; font-size: 21px; animation-delay: 1.8s; }
.sending-star.s3 { right: 6px; top: 118px; animation-delay: 2.2s; }
.sending-star.s4 { left: 30px; top: 150px; font-size: 13px; animation-delay: 2.6s; }
.sending-star.s5 { left: 104px; top: 6px; font-size: 13px; animation-delay: 3s; }
.sending-title { margin: 0; font: 800 21px/1.5 var(--sans); letter-spacing: .06em; color: var(--pine-deep, #1f4138); }
.sending-step { margin: 0; min-height: 1.7em; font-size: 15.5px; color: #31594d; }
.sending-note { margin: 6px 0 0; font-size: 13.5px; color: #80602f; }
.order-sending.sent .sending-env { animation: sending-away .6s cubic-bezier(.5, 0, .7, .4) both; }
.order-sending.sent .sending-seal, .order-sending.sent .sending-mark { animation: sending-away .6s cubic-bezier(.5, 0, .7, .4) both; }
@keyframes sending-letter { from { transform: translateY(-62%) rotate(-3deg); } to { transform: translateY(0) rotate(0); } }
@keyframes sending-seal {
  0% { opacity: 0; transform: translateY(-30px) rotate(12deg); }
  30% { opacity: 1; }
  40% { transform: translateY(66px) rotate(0); }
  48% { transform: translateY(70px) scale(1.12, .86); }
  68% { transform: translateY(16px) rotate(-8deg); }
  100% { opacity: 1; transform: translate(78px, 4px) rotate(14deg) scale(.72); }
}
@keyframes sending-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes sending-mark { from { opacity: 0; transform: scale(1.8); } to { opacity: 1; transform: scale(1); } }
@keyframes sending-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-9px) rotate(1.2deg); } }
@keyframes sending-twinkle { 0%, 100% { opacity: 0; transform: scale(.6); } 45% { opacity: 1; transform: scale(1.1); } }
@keyframes sending-away { to { opacity: 0; transform: translateY(-140px) rotate(-8deg) scale(.7); } }
@media (prefers-reduced-motion: reduce) {
  .confirm-card.stamping .confirm-stamper, .confirm-card.stamping .confirm-seal { animation: none; }
  .confirm-seal { transition: none; }
  .sending-env, .sending-letter, .sending-seal, .sending-mark, .sending-star { animation: none; }
  .sending-seal { transform: translate(78px, 4px) rotate(14deg) scale(.72); }
  .sending-star { opacity: 1; }
}
@supports not ((-webkit-mask-box-image: none) or (mask-border: none)) {
  .confirm-card::before, .confirm-fee { border-radius: 10px; }
}