/* Scoped additions: the desk, attendance, payroll and booking styles are unchanged. */
.payment-login-link { display:flex; align-items:center; justify-content:center; text-decoration:none; text-align:center; }
.pay-admin-head { display:flex; justify-content:space-between; gap:24px; align-items:center; margin:24px 0; }
.pay-admin-head h2 { margin:8px 0; }
.pay-admin-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px; margin:20px 0; }
.pay-admin-card label { display:grid; gap:10px; margin:20px 0; }
.pay-admin-card input[type=number], .pay-admin-card textarea { width:100%; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--canvas); color:var(--ink); font:inherit; }
.pay-admin-card .pay-admin-check { display:flex; align-items:center; gap:12px; }
.pay-admin-check input { width:20px; height:20px; }
.payment-kiosk { --pay-accent:#8dabdf; --pay-button:#365781; --pay-soft:#243349; overflow:auto!important; min-width:320px; min-height:100vh; background:var(--canvas); font-size:18px; }
.payment-kiosk[data-theme=light], [data-theme=light] .payment-kiosk { --pay-accent:#365781; --pay-soft:#e7eef9; }
.payment-kiosk * { box-sizing:border-box; }
.payment-kiosk button, .payment-kiosk a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.payment-kiosk button { cursor:pointer; font:inherit; }
.payment-kiosk button:disabled { cursor:not-allowed; opacity:.45; }
.payment-kiosk button:focus-visible, .payment-kiosk input:focus-visible, .payment-kiosk select:focus-visible { outline:3px solid var(--pay-accent); outline-offset:5px; }
.payment-kiosk .pay-header { max-width:1320px; margin:auto; padding:28px 48px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.pay-brand { display:flex; align-items:center; gap:13px; }
.pay-brand .brand-mark { width:42px; height:42px; background:var(--pay-button); border-radius:12px; color:white; font-size:32px; }
.pay-brand strong { display:block; font-size:21px; letter-spacing:-.7px; }
.pay-brand small { display:block; font-size:10px; margin-top:4px; letter-spacing:2.1px; color:var(--muted); }
.pay-header-actions { display:flex; gap:10px; }
.pay-header-actions button { border:1px solid var(--line); color:var(--muted); background:var(--surface); border-radius:10px; min-height:44px; padding:8px 16px; font-size:14px; }
.payment-kiosk #payMain { max-width:1240px; margin:0 auto; padding:46px 40px 28px; min-height:calc(100vh - 195px); outline:none; }
.pay-home { text-align:center; padding:14px 0 34px; }
.pay-logo { display:block; width:220px; height:145px; object-fit:contain; margin:0 auto 25px; border-radius:14px; }
.pay-home .pay-logo-fallback { display:block; font-size:35px; font-weight:800; color:var(--pay-accent); margin:24px 0 40px; letter-spacing:-1px; }
.payment-kiosk h1 { font-size:clamp(30px,3.4vw,46px); line-height:1.35; margin:10px 0 16px; letter-spacing:-1.5px; }
.payment-kiosk h2 { font-size:28px; letter-spacing:-.7px; }
.pay-subtitle { color:var(--muted); font-size:19px; line-height:1.7; margin:0 0 32px; }
.payment-kiosk .eyebrow { color:var(--pay-accent); letter-spacing:2px; font-size:12px; font-weight:700; }
.pay-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:46px; text-align:left; }
.pay-choice { position:relative; min-height:270px; border:1px solid var(--line); border-radius:22px; padding:30px; background:var(--surface); color:var(--ink); text-align:left; display:flex; flex-direction:column; align-items:flex-start; transition:border-color .15s,transform .15s; }
.pay-choice:hover { border-color:var(--pay-accent); transform:translateY(-3px); }
.pay-choice:first-child { background:linear-gradient(145deg,#304b70,#203149); color:#fff; border-color:#48658e; }
.pay-choice svg { width:42px; height:42px; stroke:currentColor; stroke-width:1.5; fill:none; margin-bottom:35px; color:var(--pay-accent); }
.pay-choice:first-child svg { color:#c1d5f6; }
.pay-choice strong { font-size:34px; letter-spacing:-1.2px; }
.pay-choice small { font-size:15px; color:var(--muted); margin-top:14px; line-height:1.6; }
.pay-choice:first-child small { color:#cad7e9; }
.pay-choice .pay-arrow { position:absolute; right:26px; bottom:27px; font-size:28px; color:var(--pay-accent); }
.pay-home-note { color:var(--muted); font-size:14px; margin-top:30px; }
.payment-kiosk .pay-consult-choice { width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; text-align:left; padding:24px 30px; margin-top:20px; min-height:104px; border:1px solid var(--line); border-radius:20px; background:var(--surface); color:var(--ink); }
.pay-consult-choice strong { display:block; font-size:26px; }
.pay-consult-choice small { display:block; margin-top:8px; color:var(--muted); font-size:16px; }
.pay-consult-choice>span:last-child { font-size:32px; color:var(--pay-accent); }
.pay-home-extras { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:20px; margin-top:20px; }
.payment-kiosk .pay-home-extras .pay-consult-choice { margin-top:0; height:100%; }
.pay-member-app { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 26px; border:1px solid var(--line); border-radius:20px; background:var(--surface); text-align:left; }
.pay-member-app .eyebrow { letter-spacing:0; margin:0 0 8px; font-size:14px; }
.pay-member-app h2 { font-size:26px; margin:0 0 10px; }
.pay-member-copy { font-size:16px; line-height:1.7; margin:0; color:var(--ink); }
.pay-member-copy span { color:var(--muted); font-size:14px; }
.pay-member-app img { display:block; flex:none; width:176px; height:176px; border-radius:10px; background:white; image-rendering:pixelated; }
@media(max-width:1000px) { .pay-home-extras { grid-template-columns:1fr; } }
@media(max-width:600px) { .pay-member-app { padding:22px; flex-direction:column; text-align:center; } .pay-member-app img { width:196px; height:196px; } }
.pay-consult-privacy { color:var(--muted); font-size:15px; line-height:1.8; margin:26px 0 12px; }
.pt-consult-alert { border-top:1px solid var(--line); margin-top:14px; padding-top:14px; }
.pt-consult-alert[data-pending=true] { border-left:4px solid #8dabdf; padding-left:16px; }
.pt-consult-alert summary { cursor:pointer; padding:12px 0; }
.pay-topline { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:30px; }
.pay-breadcrumb { display:flex; flex-wrap:wrap; gap:9px 18px; color:var(--muted); font-size:14px; }
.pay-breadcrumb .active { color:var(--pay-accent); font-weight:700; }
.pay-reset { color:var(--muted); border:0; background:transparent; min-height:48px; padding:10px; white-space:nowrap; font-size:15px!important; }
.pay-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:30px; align-items:start; }
.pay-content { min-width:0; }
.pay-summary { position:sticky; top:24px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px; }
.pay-summary h2 { font-size:18px; margin:0 0 25px; }
.pay-summary dl { margin:0; }
.pay-summary dl div { display:flex; justify-content:space-between; gap:15px; margin:18px 0; font-size:15px; }
.pay-summary dt { color:var(--muted); }
.pay-summary dd { margin:0; text-align:right; }
.pay-summary .pay-total { border-top:1px solid var(--line); padding-top:22px; margin-top:26px; font-size:21px; }
.pay-summary .pay-total dd { color:var(--pay-accent); font-weight:800; }
.pay-summary .pay-period { font-size:13px; color:var(--muted); line-height:1.8; }
.pay-products { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.pay-product { min-height:158px; text-align:left; padding:23px; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--ink); position:relative; }
.pay-product[aria-pressed=true], .pay-option[aria-pressed=true] { border:2px solid var(--pay-accent); background:var(--pay-soft); }
.pay-product strong { display:block; font-size:29px; margin:7px 0 17px; }
.pay-product span { font-size:21px; }
.pay-product small { display:block; margin-top:10px; font-size:13px; color:var(--muted); }
.pay-product[aria-pressed=true]::after { content:'✓'; position:absolute; top:20px; right:20px; color:var(--pay-accent); }
.pay-option-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:22px 0; }
.pay-option { min-height:128px; padding:22px; text-align:left; border:1px solid var(--line); border-radius:15px; color:var(--ink); background:var(--surface); }
.pay-option strong { display:block; font-size:23px; margin-bottom:12px; }
.pay-option small { color:var(--muted); font-size:15px; }
.pay-lockers { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; max-height:370px; overflow:auto; padding:8px; margin:20px -8px; }
.pay-locker { min-height:62px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--surface); }
.pay-locker[aria-pressed=true] { background:var(--pay-button); color:#fff; border:2px solid var(--pay-accent); }
.pay-locker:disabled { text-decoration:line-through; }
.pay-locker-zone { grid-column:1/-1; margin:12px 0 2px; color:var(--muted); font-size:15px; }
.pay-actions { display:flex; gap:14px; margin-top:32px; }
.payment-kiosk .primary-button, .payment-kiosk .ghost-button { min-height:66px; padding:17px 25px; border-radius:13px; font-size:19px; font-weight:700; }
.payment-kiosk .primary-button { background:var(--pay-button); color:#fff; border:1px solid #58779f; box-shadow:none; }
.payment-kiosk .ghost-button { background:var(--surface); color:var(--ink); border:1px solid var(--line); }
.pay-actions .primary-button { flex:1; }
.pay-field { display:grid; gap:12px; margin:22px 0; font-size:17px; }
.payment-kiosk input:not([type=checkbox]), .payment-kiosk select { min-height:65px; border:1px solid var(--line); border-radius:12px; padding:15px 18px; color:var(--ink); background:var(--surface); font:inherit; width:100%; }
.pay-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 22px; }
.pay-form-grid .wide { grid-column:1/-1; }
.pay-keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:480px; margin:20px auto; }
.pay-keypad button { min-height:67px; border:1px solid var(--line); border-radius:12px; font-size:27px; color:var(--ink); background:var(--surface); }
.pay-keypad button[data-digit=clear], .pay-keypad button[data-digit=back] { font-size:17px; }
.pay-results { display:grid; gap:13px; margin:22px 0; }
.pay-result { border:1px solid var(--line); border-radius:13px; background:var(--surface); color:var(--ink); padding:22px; text-align:left; display:flex; justify-content:space-between; gap:18px; }
.pay-notice { border:1px solid var(--line); border-left:3px solid var(--pay-accent); border-radius:12px; background:var(--surface); padding:18px 20px; line-height:1.7; font-size:16px; margin:22px 0; }
.pay-notice strong { color:var(--pay-accent); }
.pay-agreement { background:var(--surface); border:1px solid var(--line); border-radius:13px; margin:18px 0; padding:18px; }
.pay-agreement summary { cursor:pointer; padding:8px 0 15px; font-size:17px; }
.pay-agreement pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; font-size:15px; max-height:230px; overflow:auto; line-height:1.8; }
.pay-check { display:flex; align-items:center; gap:12px; min-height:55px; font-size:17px; }
.pay-check input { width:25px; height:25px; accent-color:var(--pay-button); flex-shrink:0; }
.pay-signature { width:100%; height:200px; background:#fff; border:2px dashed #a1b0c6; border-radius:14px; display:block; touch-action:none; }
.pay-sign-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:25px; }
.pay-sign-head button { color:var(--pay-accent); background:transparent; border:0; min-height:48px; padding:12px; }
.pay-card-visual { width:190px; height:120px; border-radius:18px; margin:32px auto; background:linear-gradient(125deg,#405e8b,#23344e); border:1px solid #7188ad; position:relative; }
.pay-card-visual::before { content:''; position:absolute; left:25px; top:30px; width:34px; height:26px; border-radius:6px; background:#d3c8a1; }
.pay-card-visual::after { content:'••••  ••••'; position:absolute; left:25px; bottom:25px; color:#e0e8f7; letter-spacing:4px; font-size:20px; }
.pay-center { text-align:center; }
.pay-message { position:fixed; bottom:90px; left:50%; transform:translateX(-50%); width:min(690px,90vw); padding:20px 25px; border-radius:14px; color:var(--ink); background:var(--surface); border:1px solid var(--pay-accent); box-shadow:0 10px 35px #0005; z-index:50; font-size:17px; line-height:1.6; }
.pay-footer { max-width:1320px; margin:auto; display:flex; gap:20px; justify-content:space-between; align-items:center; padding:22px 48px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
.pay-footer button { background:var(--surface); border:1px solid var(--line); color:var(--ink); border-radius:12px; padding:14px 25px; min-height:52px; font-size:17px; }
.pay-footer>span:last-child { font-size:10px; letter-spacing:1.6px; }
.pay-dialog { width:min(500px,90vw); color:var(--ink); background:var(--surface); padding:32px; border:1px solid var(--line); border-radius:20px; }
.pay-dialog::backdrop { background:#000b; }
.pay-dialog label { display:grid; gap:14px; }
.pay-dialog-actions { display:flex; gap:14px; margin-top:25px; }
.pay-dialog>button { margin:10px 0; width:100%; }
.pay-auth { max-width:490px; margin:20px auto; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:35px; }
.pay-auth .primary-button { width:100%; margin:20px 0; }
.pay-auth p { font-size:16px; line-height:1.7; color:var(--muted); }
@media(min-width:900px) and (min-height:1400px) and (max-aspect-ratio:1/1) { .payment-kiosk #payMain { padding-top:100px; } .pay-home { padding-top:60px; } .pay-logo { width:300px; height:210px; } .pay-choices { margin-top:65px; } .pay-choice { min-height:350px; } }
@media(max-width:900px) { .pay-layout { grid-template-columns:1fr; } .pay-summary { position:static; } .pay-summary dl { display:grid; grid-template-columns:1fr 1fr; gap:0 30px; } .pay-summary .pay-total { margin-top:0; } .pay-choice { padding:24px; min-height:250px; } .pay-choice strong { font-size:29px; } }
@media(min-width:601px) and (max-height:1100px) { .payment-kiosk #payMain { padding-top:22px; } .pay-home { padding:0 0 10px; } .pay-logo { width:170px; height:90px; margin-bottom:18px; } .pay-home .pay-subtitle { margin-bottom:20px; } .pay-choices { margin-top:26px; } .pay-choice { min-height:220px; padding:24px; } .pay-choice svg { margin-bottom:22px; } .pay-home-note { margin-top:18px; } .payment-kiosk .pay-consult-choice { padding:18px 26px; min-height:96px; } }
@media(max-width:600px) { .payment-kiosk .pay-header { padding:18px 20px; } .payment-kiosk #payMain { padding:28px 20px; } .pay-header-actions button { font-size:12px; padding:8px 10px; } .pay-choices { grid-template-columns:1fr; gap:14px; margin-top:30px; } .pay-choice { min-height:145px; padding:22px 25px 22px 90px; } .pay-choice svg { position:absolute; left:25px; top:28px; width:35px; } .pay-choice strong { font-size:28px; } .pay-choice small { margin-top:8px; } .pay-logo { width:180px; height:110px; } .pay-footer { padding:18px 20px; } .pay-footer>span:last-child { display:none; } .pay-form-grid { grid-template-columns:1fr; } .pay-product { padding:18px; } .pay-lockers { grid-template-columns:repeat(4,1fr); } .pay-summary dl { display:block; } .pay-summary .pay-total { margin-top:20px; } .pay-topline { align-items:flex-start; gap:8px; } }
/* Additional paper-form fields remain optional and collapsed on the touch screen. */
.pay-optional { margin:24px 0; border:1px solid #ccd5e3; border-radius:16px; padding:20px; }
.pay-optional summary { cursor:pointer; font-size:22px; padding:8px 0; }
.pay-optional .pay-form-grid { margin-top:20px; }