/* Payment-only extension of the accepted UI04 neutral design. */
.payment-screen{max-width:640px;overflow-wrap:anywhere}
.payment-screen p{line-height:1.8}
.payment-screen .payment-heading h1{margin-block:12px}
/* Owner 21 Oct 2026 night: the prototype note and its two divider lines are off the payment page. Was: .payment-boundary rules here and in app.css. */
.payment-screen .fee-breakdown{margin-block:24px;padding-block:16px}
.payment-screen .fee-breakdown h2{margin:0 0 12px;font-size:21px}
.payment-screen .fee-breakdown dd{font-size:18px}
.payment-screen .payment-binding,.payment-screen .payment-receipt{margin:24px 0}
.payment-screen .payment-binding>div,.payment-screen .payment-receipt>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding-block:9px}
.payment-screen dt{color:#ccc;font-size:14px}
.payment-screen dd{margin:0;text-align:end;font-variant-numeric:tabular-nums;font-size:14px}
.payment-screen .payment-disclosure{margin-block:14px 28px;border-block:1px solid var(--line);padding-block:16px}
.payment-screen summary{cursor:pointer;font-size:15px;line-height:1.6;padding:4px 0;min-height:28px}
.payment-screen details p{font-size:14px}
.payment-screen .payment-methods{margin-block:26px 18px}
.payment-screen .payment-methods .btn{min-width:0;white-space:normal}
.payment-screen .payment-methods strong{font-size:16px}
.payment-screen .payment-methods .btn:disabled{opacity:.62;cursor:default}
.payment-screen .payment-methods .btn[aria-pressed=true]:disabled{opacity:1}
.payment-screen .payment-step{margin-top:24px;padding-top:20px;scroll-margin-top:24px}
.payment-screen .payment-state{font-size:23px;line-height:1.5;color:#f3f2ef;margin:0 0 14px}
.payment-screen .payment-step>p{font-size:15px}
.payment-screen .payment-notice{padding:14px 0;border-block:1px solid var(--line)}
.payment-screen .payment-hosted{border:1px solid #777;border-radius:16px;padding:22px;margin-block:24px;background:#202020}
.payment-screen .payment-hosted h2{margin:0 0 14px;font-size:22px;line-height:1.5}
.payment-screen .payment-hosted p{font-size:14px}
.payment-screen .payment-history{margin-block:24px}
.payment-screen .payment-history>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding-block:14px;border-bottom:1px solid var(--line)}
.payment-screen .payment-history>div>span:last-child{text-align:end}
.payment-screen .payment-history span{font-size:14px;line-height:1.6}
.payment-screen .payment-history small{display:block;text-align:start;font-size:12px;color:#bdbdbd}
.payment-screen .payment-preserved{border-top:1px solid var(--line);padding-top:20px;font-size:14px}
.payment-screen .auth-actions{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;margin-top:24px}
.payment-screen .auth-actions>.btn{min-width:0;white-space:normal;line-height:1.55;min-height:48px;flex:1 1 180px}
.payment-screen :is(button,summary):focus-visible{outline:2px solid #f3f2ef;outline-offset:4px}
.payment-screen .payment-step:focus{outline:none}
.payment-screen .btn:disabled{cursor:not-allowed}
@media(max-width:480px){.payment-screen .payment-heading{gap:12px}.payment-screen .payment-heading h1{font-size:32px}.payment-screen .payment-hosted{padding:18px 16px}.payment-screen .payment-binding>div,.payment-screen .payment-receipt>div{grid-template-columns:minmax(0,1fr);gap:4px}.payment-screen .payment-binding dd,.payment-screen .payment-receipt dd{text-align:start}.payment-screen .fee-breakdown dt{font-size:15px}.payment-screen .fee-breakdown dd{font-size:17px}.payment-screen .auth-actions>.btn{flex-basis:100%}.payment-screen .payment-step>p{font-size:16px}}

.payment-screen .payment-back-icon{flex:none;display:inline-grid;place-items:center;min-width:44px;width:44px;min-height:44px;height:44px;padding:10px}.payment-screen .payment-back-icon svg{width:22px;height:22px}

.payment-screen .payment-heading{display:flex;align-items:center;gap:16px}.payment-screen .payment-heading>svg{width:34px;height:34px;flex:none}.payment-screen .payment-methods{display:grid;gap:12px}.payment-screen .payment-methods .btn{display:flex;align-items:center;text-align:left;justify-content:flex-start;gap:17px;border-radius:16px;padding:18px}.payment-screen .payment-methods svg{width:28px;height:28px;flex:none}.payment-screen .payment-methods span{display:grid;gap:5px}.payment-screen .auth-actions>.payment-back-icon{flex:0 0 44px}

/* Owner 21 Oct 2026 night ("ตัดฟังก์ชันเรื่องการจ่ายล่วงหน้าทิ้ง ... บังคับจ่ายรายปีอย่างเดียว"): the prepaid term editor is gone; the checkout shows the total and a one-year dues line. Was: shared 1-100 year editor. */
.payment-topbar{display:flex;justify-content:flex-start;margin:0 0 18px}.payment-screen .payment-topbar .payment-back-icon{border:0;background:transparent;border-radius:50%;margin:0}.payment-screen .payment-topbar .payment-back-icon:hover{background:#ffffff12}
.fee-coverage{padding-top:16px}.payment-screen .fee-coverage dd{font-size:15px;line-height:1.7}.payment-screen .fee-breakdown dl>div{display:flex;justify-content:space-between;gap:16px;padding-block:8px}.payment-screen .fee-breakdown dl>div.fee-coverage{display:block}.payment-screen .fee-coverage dd{text-align:start;margin-top:5px}

/* FB56/57: the total is one compact summary; clear annual breakdown follows. */
.dues-summary{margin:22px 0;max-width:440px}
.dues-total>span{display:block;font-size:13px;line-height:1.6;color:#bbb;margin:0 0 8px}
.dues-total .money{font-size:clamp(25px,5.4vw,32px);line-height:1.35;margin:0;font-variant-numeric:tabular-nums;letter-spacing:-.035em;overflow-wrap:anywhere}
.dues-total small{display:block;font-size:12px;color:#aaa;margin-top:5px}
.payment-screen .payment-heading{gap:10px;align-items:center;margin:10px 0 14px}
.payment-screen .payment-heading h1{margin:0;min-width:0;text-wrap:pretty;line-height:1.4}
.payment-screen .payment-heading .payment-back-icon{border:0;border-radius:10px;background:transparent;padding:10px;color:inherit}
.payment-screen .payment-heading .payment-back-icon:hover{background:#ffffff0a}
@media(max-width:360px){.dues-total .money{font-size:25px}}
/* Owner 29 Oct 2026 evening item 1 (full QA B-30): on the membership pages' phone layout the ‹ sits 6px from the edge and the title follows
   as on "สมาชิกภาพของฉัน" (membership/app.css #main>.back left:6px, title at 54px). The membership page is the one with .membership-sticky;
   the application's own payment page keeps its place. Was: the payment page's ‹ at 20px and its title at 74px. */
/* Fix round 11 Nov 2026 item 116 (independent review 12 Nov; owner answer ก, one back arrow position on every member page): 10 px from the
   edge like "สมาชิกภาพของฉัน" (membership/app.css) and the other member pages. Was: margin-left:-14px (6 px). */
@media(max-width:760px){body:has(.membership-sticky) .payment-screen .payment-heading{margin-left:-10px;gap:4px}}
/* Fix round 11 Nov 2026 item 116 (independent review 12 Nov, round 2): the application's own payment page follows the same rule: on a phone its
   chevron starts 10 px from the screen edge and the heading 58 px (#main padding: 24 px, 18 px under 360 px, 42 px from 700 px; app.css).
   Was: the chevron at the content edge, 24 px (18 px at 320-340), heading 78 / 72 px (B-30 had kept that place). */
@media(max-width:760px){body:not(:has(.membership-sticky)) .payment-screen .payment-heading{margin-left:-32px;gap:4px}}
@media(max-width:699px){body:not(:has(.membership-sticky)) .payment-screen .payment-heading{margin-left:-14px}}
@media(max-width:359px){body:not(:has(.membership-sticky)) .payment-screen .payment-heading{margin-left:-8px}}

/* Fix round 11 Nov 2026 (item 112; tap area of at least 44x44 px): folded rows such as "เงื่อนไขการคืนเงิน". Was: 32 tall. */
details.payment-disclosure>summary{min-height:44px;display:flex;align-items:center}