:root {
  --olive:#808000; --olive-dark:#5f6000; --olive-soft:#e9e8c8;
  --sandstone:#c99d58; --sandstone-soft:#ead9ba; --cream:#f5efe3;
  --ink:#34351f; --muted:#737365; --line:#ddd5c6;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#ddd9cd; color:var(--ink); font-family:"DM Sans",sans-serif; }
button,input { font:inherit; }
.payment-shell { width:min(100%,520px); min-height:100vh; margin:auto; padding:24px 24px 36px; background:linear-gradient(160deg,#fbf8f0,var(--cream)); box-shadow:0 24px 70px #41421e20; }
header { display:flex; align-items:center; justify-content:space-between; min-height:76px; margin:-24px -24px 0; padding:10px 24px; background:var(--olive); border-bottom:3px solid var(--sandstone); }
.brand { display:block; width:172px; height:56px; overflow:hidden; text-decoration:none; }
.brand img { width:172px; height:172px; object-fit:cover; transform:translateY(-51px); mix-blend-mode:screen; }
.secure { color:#fffdf4; font-size:12px; font-weight:600; }
.header-actions { display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.language-switcher { display:flex; padding:2px; border:1px solid #ffffff55; border-radius:8px; background:#ffffff12; }
.language-switcher button { min-width:29px; padding:4px 6px; border:0; border-radius:5px; background:transparent; color:#f4f1de; cursor:pointer; font-size:10px; font-weight:700; }
.language-switcher button.active { background:var(--sandstone); color:#373800; }
.hero { position:relative; min-height:330px; margin:0 -24px 0; padding:64px 24px 36px; display:flex; align-items:flex-end; overflow:hidden; background:linear-gradient(180deg,#35360008,#545500e6 90%),url("surau-aerial.png") center/cover no-repeat; }
.hero:after { content:""; position:absolute; inset:auto 0 0; height:5px; background:var(--sandstone); }
.hero-content { position:relative; z-index:1; color:#fff; }
.hero h1 { margin:0 0 13px; font:600 clamp(37px,9vw,49px)/.98 "Playfair Display",serif; letter-spacing:-2px; }
.secret-trigger { margin:0; padding:0; border:0; background:none; color:var(--sandstone-soft); cursor:default; font:inherit; font-style:italic; font-weight:600; letter-spacing:inherit; text-align:left; }
.secret-trigger:focus-visible { outline:1px dashed var(--sandstone-soft); outline-offset:4px; }
.hero p { max-width:375px; color:#f2f0e6; font-size:14px; line-height:1.55; margin:0; }
.stepper { display:flex; align-items:center; justify-content:space-between; margin:28px 0 33px; color:#9a998b; font-size:11px; font-weight:700; }
.stepper.hidden { display:none; }
.stepper i { flex:1; height:1px; margin:0 8px; background:var(--line); }
.step { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.step b { display:grid; place-items:center; width:23px; height:23px; border:1px solid #c9c5b8; border-radius:50%; font-size:10px; }
.step.active { color:var(--olive-dark); }.step.active b { background:var(--olive); border-color:var(--olive); color:white; }
.flow-step { display:none; animation:reveal .28s ease; }.flow-step.active { display:block; }
@keyframes reveal { from { opacity:0; transform:translateY(8px); } }
.section-heading { margin-bottom:22px; }.section-kicker { color:var(--olive); font-size:10px; font-weight:700; letter-spacing:1.4px; }
.section-heading h2 { margin:6px 0 8px; font:600 30px/1.1 "Playfair Display",serif; letter-spacing:-1px; }
.section-heading p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.plan-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.plan-card { display:flex; flex-direction:column; min-height:220px; padding:20px 18px 17px; overflow:hidden; border:1px solid var(--line); border-radius:17px; background:#fffdf8; color:var(--ink); cursor:pointer; text-align:left; box-shadow:0 6px 16px #4d4a3610; transition:.2s ease; }
.plan-card:hover,.plan-card:focus-visible { border-color:var(--olive); transform:translateY(-3px); box-shadow:0 10px 24px #4d4a3620; outline:none; }
.popular { display:block; min-height:19px; color:var(--olive); font-size:8px; font-weight:700; letter-spacing:.8px; }
.plan-duration { display:block; color:var(--muted); font-size:12px; }.plan-duration strong { display:block; color:var(--olive-dark); font:600 48px/1 "Playfair Display",serif; }
.chair-status { display:flex; align-items:center; justify-content:center; gap:8px; margin:0 0 14px; padding:10px 12px; border-radius:10px; background:#f1f0d8; color:var(--olive-dark); font-size:12px; font-weight:700; }.chair-status.busy { background:#f8e8dc; color:#8a3d2c; }.chair-status.offline { background:#eee; color:#666; }.chair-status-dot { width:8px; height:8px; border-radius:50%; background:#6f8d25; box-shadow:0 0 0 3px #6f8d2522; }.chair-status.busy .chair-status-dot { background:#c7663e; }.chair-status.offline .chair-status-dot { background:#888; }.plan-card:disabled { cursor:not-allowed; opacity:.48; transform:none; }
.plan-price { display:block; margin-top:8px; font-size:20px; font-weight:700; }
.plan-action { display:block; width:100%; margin-top:auto; padding-top:11px; border-top:1px solid var(--line); color:var(--olive); font-size:11px; font-weight:700; }.plan-action b { float:right; font-size:17px; }
.back-button { margin:0 0 18px; padding:0; border:0; background:none; color:var(--olive); cursor:pointer; font-size:12px; font-weight:700; }
.selected-summary { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; padding:16px 18px; border-radius:13px; background:var(--olive); color:white; }
.selected-summary span { display:flex; flex-direction:column; }.selected-summary b { font-family:"Playfair Display",serif; font-size:20px; }.selected-summary small { margin-top:3px; color:#eeeed8; font-size:10px; text-transform:uppercase; letter-spacing:.8px; }.selected-summary > strong { color:var(--sandstone-soft); font-size:22px; }
.instructions { margin:0 0 20px; padding:0; list-style:none; counter-reset:steps; }.instructions.continued { counter-reset:steps 2; margin-top:20px; }
.instructions li { position:relative; min-height:42px; padding:0 0 18px 43px; counter-increment:steps; }.instructions li:not(:last-child):after { content:""; position:absolute; top:27px; bottom:2px; left:13px; width:1px; background:var(--line); }.instructions li:before { content:counter(steps); position:absolute; top:0; left:0; display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:var(--olive-soft); color:var(--olive-dark); font-size:11px; font-weight:700; }.instructions b,.instructions span { display:block; }.instructions b { font-size:13px; }.instructions span { margin-top:3px; color:var(--muted); font-size:11px; line-height:1.45; }
.qr-frame { position:relative; width:194px; height:194px; margin:0 auto; padding:10px; background:white; border:1px solid #e3e3dc; border-radius:15px; box-shadow:0 8px 20px #4e4f2517; }.qr-frame img { width:100%; height:100%; image-rendering:pixelated; }.scan-corners:before,.scan-corners:after { content:""; position:absolute; width:22px; height:22px; border-color:var(--sandstone); }.scan-corners:before { top:6px; left:6px; border-top:3px solid; border-left:3px solid; border-radius:7px 0 0; }.scan-corners:after { right:6px; bottom:6px; border-right:3px solid; border-bottom:3px solid; border-radius:0 0 7px; }
.wall-qr-note { display:flex; align-items:center; gap:13px; margin:-2px 0 20px; padding:14px 16px; border:1px solid #d8d4b4; border-radius:12px; background:var(--olive-soft); }.wall-qr-note > span { display:grid; place-items:center; width:38px; height:38px; flex:0 0 auto; border-radius:10px; background:var(--olive); color:white; font-size:23px; }.wall-qr-note p,.wall-qr-note b,.wall-qr-note small { display:block; margin:0; }.wall-qr-note b { font-size:12px; }.wall-qr-note small { margin-top:3px; color:var(--muted); font-size:10px; line-height:1.4; }
.confirm-button { width:100%; border:0; border-radius:12px; padding:16px 20px; background:var(--olive); color:#fff; cursor:pointer; font-weight:600; box-shadow:0 5px 12px #60600035; transition:.2s; }.confirm-button:hover { background:var(--olive-dark); transform:translateY(-1px); }.confirm-button > span:last-child { float:right; font-size:20px; line-height:10px; }
.field-label { display:flex; justify-content:space-between; margin:20px 0 8px; font-size:12px; font-weight:700; }.field-label span { color:var(--olive); font-size:9px; letter-spacing:.8px; text-transform:uppercase; }
input[type="tel"] { width:100%; padding:14px; border:1px solid var(--line); border-radius:11px; background:#fffdf8; color:var(--ink); outline:none; }.field-note { display:block; margin:6px 0 24px; color:var(--muted); font-size:10px; }
input[type="tel"]:focus { border-color:var(--olive); box-shadow:0 0 0 3px var(--olive-soft); }
input[type="file"] { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; }
.upload-zone { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:165px; margin-bottom:20px; padding:22px; border:2px dashed #c7c3ae; border-radius:15px; background:#fffdf8; cursor:pointer; text-align:center; transition:.2s; }.upload-zone:hover,.upload-zone.has-file { border-color:var(--olive); background:#f5f4df; }.upload-icon { display:grid; place-items:center; width:40px; height:40px; margin-bottom:10px; border-radius:50%; background:var(--olive-soft); color:var(--olive-dark); font-size:22px; }.upload-zone strong { font-size:13px; }.upload-zone small { margin-top:5px; color:var(--muted); font-size:10px; }
.submit-status { min-height:18px; margin:0 0 8px; color:#a13e31; font-size:11px; text-align:center; }.confirm-button:disabled { cursor:wait; opacity:.65; transform:none; }
.support { margin:26px 0 0; text-align:center; color:#8e8d80; font-size:12px; }.support a { color:var(--olive-dark); font-weight:700; text-decoration:none; }
.end-screen { padding:48px 8px 10px; text-align:center; }
.validation-screen { padding:58px 8px 35px; text-align:center; }.validation-screen h2 { margin:9px 0 10px; font:600 33px/1.08 "Playfair Display",serif; }.validation-screen > p { max-width:350px; margin:0 auto; color:var(--muted); font-size:13px; line-height:1.55; }
.loading-mark { display:flex; align-items:center; justify-content:center; gap:7px; width:76px; height:76px; margin:0 auto 22px; border-radius:50%; background:var(--olive-soft); }.loading-mark span { width:9px; height:9px; border-radius:50%; background:var(--olive); animation:loadingBounce 1.1s infinite ease-in-out; }.loading-mark span:nth-child(2) { animation-delay:.14s; }.loading-mark span:nth-child(3) { animation-delay:.28s; } @keyframes loadingBounce { 0%,60%,100% { transform:translateY(0); opacity:.45; } 30% { transform:translateY(-7px); opacity:1; } }
.end-screen h2 { margin:9px auto 10px; max-width:360px; font:600 34px/1.08 "Playfair Display",serif; letter-spacing:-1px; }
.end-screen > p { max-width:360px; margin:0 auto; color:var(--muted); font-size:13px; line-height:1.55; }
.completion-card { display:flex; flex-direction:column; margin:28px 0 22px; padding:24px; border-radius:17px; background:var(--olive); color:white; box-shadow:0 10px 25px #60600028; }
.completion-card > span { color:var(--sandstone-soft); font-size:9px; font-weight:700; letter-spacing:1.2px; }
.completion-card strong { margin:4px 0; font:600 36px "Playfair Display",serif; }
.completion-card small { color:#eeeed8; font-size:10px; text-transform:uppercase; letter-spacing:.8px; }
.end-screen .end-note { margin-top:18px; font-size:11px; }
dialog { width:min(calc(100% - 40px),430px); border:0; border-radius:22px; padding:33px 28px 28px; background:#fffdf8; color:var(--ink); box-shadow:0 18px 70px #2d2e1680; text-align:center; } dialog::backdrop { background:#37380088; backdrop-filter:blur(3px); }.success-icon { display:grid; place-items:center; width:55px; height:55px; margin:0 auto 17px; border-radius:50%; background:var(--olive-soft); color:var(--olive); font-size:28px; font-weight:700; }.eyebrow { margin:0; color:var(--olive); font-size:10px; font-weight:700; letter-spacing:1.4px; } dialog h2 { margin:9px 0; font:600 29px/1.05 "Playfair Display",serif; } dialog p:not(.eyebrow) { color:var(--muted); font-size:14px; line-height:1.5; }.timer { display:flex; flex-direction:column; margin:22px 0; padding:13px; border-radius:12px; background:#f1f0d8; }.timer span { color:var(--olive-dark); font-size:24px; font-weight:700; }.timer small { color:var(--muted); font-size:11px; }
.access-dialog { position:relative; text-align:left; }.access-dialog h2 { margin-top:7px; }.access-dialog > p { margin:0 0 20px; }.dialog-close { position:absolute; top:14px; right:16px; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:#efeddf; color:var(--muted); cursor:pointer; font-size:22px; }.access-dialog input { width:100%; padding:14px; border:1px solid var(--line); border-radius:11px; background:#fffdf8; color:var(--ink); outline:none; }.access-dialog input:focus { border-color:var(--olive); box-shadow:0 0 0 3px var(--olive-soft); }.password-error { min-height:18px; margin:7px 0 10px!important; color:#a13e31!important; font-size:11px!important; }
@media (max-width:370px) { .payment-shell { padding-inline:18px; }.hero,header { margin-left:-18px; margin-right:-18px; }.step { font-size:0; }.plan-grid { grid-template-columns:1fr; } }
@media (min-width:600px) { body { padding:24px; }.payment-shell { border-radius:28px; overflow:hidden; } }
[dir="rtl"] body { font-family:"DM Sans","Segoe UI",Tahoma,Arial,sans-serif; }
[dir="rtl"] .hero-content,[dir="rtl"] .section-heading,[dir="rtl"] .plan-card,[dir="rtl"] .selected-summary,[dir="rtl"] .instructions,[dir="rtl"] .field-label,[dir="rtl"] .field-note,[dir="rtl"] .access-dialog { text-align:right; }
[dir="rtl"] .header-actions { align-items:flex-start; }
[dir="rtl"] .plan-action b,[dir="rtl"] .confirm-button > span:last-child { float:left; transform:scaleX(-1); }
[dir="rtl"] .instructions li { padding-right:43px; padding-left:0; }
[dir="rtl"] .instructions li:before { right:0; left:auto; }
[dir="rtl"] .instructions li:not(:last-child):after { right:13px; left:auto; }
[dir="rtl"] input,[dir="rtl"] .timer,[dir="rtl"] #sessionCountdown,[dir="rtl"] .plan-price { direction:ltr; }