/* ========================================================================== pay11/pay11.css Login + payment screens for the reserve_new11 funnel. Two audiences: 1. Pages that already load booking-ui11.css (reserve_new11_payment.php, reserve_success11.php). Those run inside , so the rules below only need the pay11-* blocks - the palette, the card shadow and the type scale are inherited. 2. login11.php, which loads NOTHING else. It has no session yet, so it cannot go through bk11_page_open() and its layouts/head-tag4.php chain. The :root block therefore restates booking's tokens verbatim (same values as booking-ui11.css:28-41) and .pay11-body carries the base type. Palette is booking's own, not invented here: #09b288 primary #198066 hover #424c55 ink #757f88 muted #d9d9d9 rules #f5f5f5 ground #e03131 error ========================================================================== */ :root { --pay11-green: #09b288; --pay11-green-dark: #198066; --pay11-green-pale: #dfebe5; --pay11-ink: #424c55; --pay11-muted: #757f88; --pay11-rule: #d9d9d9; --pay11-dot: #b0b8bf; /* unselected radio ring - #d9d9d9 on white is too faint to read as a control */ --pay11-bg: #f5f5f5; --pay11-bad: #e03131; --pay11-card-shadow: 0 .25rem 1rem rgba(0, 0, 0, .06); --pay11-radius: .75rem; } /* -------------------------------------------------------------------------- Standalone base - login11.php only. Inside .bk11 these are already set. -------------------------------------------------------------------------- */ .pay11-body { margin: 0; background: var(--pay11-bg); color: var(--pay11-ink); font-family: "primary-font", "IRANYekanX", "IRANYekan", "segoe ui", tahoma, sans-serif; font-size: 1rem; line-height: 1.7; -webkit-font-smoothing: antialiased; } .pay11-body *, .pay11-body *::before, .pay11-body *::after { box-sizing: border-box; } .pay11-body a { color: inherit; text-decoration: none; } /* -------------------------------------------------------------------------- Card - same shadow/radius booking gives .card -------------------------------------------------------------------------- */ .pay11-card { background: #fff; border-radius: var(--pay11-radius); box-shadow: var(--pay11-card-shadow); padding: 1.75rem; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .pay11-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .65rem 1.75rem; border: 1px solid transparent; border-radius: .5rem; font: inherit; font-weight: 600; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; } .pay11-btn--primary { background: var(--pay11-green); border-color: var(--pay11-green); color: #fff; } .pay11-btn--primary:hover { background: var(--pay11-green-dark); border-color: var(--pay11-green-dark); } .pay11-btn--ghost { background: #fff; border-color: var(--pay11-rule); color: var(--pay11-ink); } .pay11-btn--ghost:hover { border-color: var(--pay11-green); color: var(--pay11-green); } /* -------------------------------------------------------------------------- Alerts -------------------------------------------------------------------------- */ .pay11-alert { margin: 0 0 1rem; padding: .75rem 1rem; border-radius: .5rem; font-size: .9rem; } .pay11-alert--bad { background: #fdecec; color: var(--pay11-bad); } .pay11-empty { color: var(--pay11-muted); font-size: .9rem; margin: 0; } /* -------------------------------------------------------------------------- Login -------------------------------------------------------------------------- */ .pay11-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .pay11-login__card { width: 100%; max-width: 26rem; } .pay11-login__title { margin: 0 0 .35rem; font-size: 1.35rem; font-weight: 700; } .pay11-login__lead { margin: 0 0 1.5rem; color: var(--pay11-muted); font-size: .9rem; } .pay11-login__submit { width: 100%; margin-top: .5rem; } .pay11-field { display: block; margin-bottom: 1rem; } .pay11-field__label { display: block; margin-bottom: .35rem; font-size: .85rem; color: var(--pay11-muted); } .pay11-field__input { width: 100%; min-height: 3rem; padding: .5rem .9rem; border: 1px solid var(--pay11-rule); border-radius: .5rem; background: #fff; color: var(--pay11-ink); font: inherit; transition: border-color .15s, box-shadow .15s; } .pay11-field__input:focus { outline: 0; border-color: var(--pay11-green); box-shadow: 0 0 0 3px var(--pay11-green-pale); } /* -------------------------------------------------------------------------- Payment-method radios - step 3 of the funnel -------------------------------------------------------------------------- */ .pay11-methods { margin-top: 1.5rem; } .pay11-methods__title { margin: 0 0 .75rem; font-size: 1.05rem; font-weight: 700; } .pay11-methods__list { display: flex; flex-wrap: wrap; gap: .75rem; } .pay11-method { /* MUST stay positioned: the real is absolutely placed to fill this box, and without this it escapes to the nearest positioned ancestor and renders as a stray radio floating outside the card. */ position: relative; display: flex; align-items: center; gap: .6rem; flex: 1 1 12rem; min-height: 3.25rem; padding: .6rem 1rem; border: 1px solid var(--pay11-rule); border-radius: .5rem; cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; } .pay11-method:hover { border-color: var(--pay11-green); } /* The native control is invisible but is the click target, covering the whole box. Never pointer-events:none here - that leaves the label as the only way in and breaks keyboard and assistive-tech activation. */ .pay11-method input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; } /* --- selected state ------------------------------------------------------- Driven by :has() so the browser keeps it in sync with no JavaScript at all. .is-selected is the identical fallback: PHP stamps it on the default option and pay11_methods_box()'s inline script maintains it on engines without :has() (Chrome/Edge < 105, Firefox < 121, Safari < 15.4). Both are listed on every rule - if either mechanism is missing the option still highlights. */ .pay11-method.is-selected, .pay11-method:has(input:checked) { border-color: var(--pay11-green); background: var(--pay11-green-pale); } /* the invisible input still takes focus - show it, or keyboard users get no indication of where they are */ .pay11-method:focus-within { box-shadow: 0 0 0 3px var(--pay11-green-pale); border-color: var(--pay11-green); } .pay11-method__dot { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; border: 2px solid var(--pay11-dot); border-radius: 50%; background: #fff; transition: border-color .15s, box-shadow .15s; } .pay11-method:hover .pay11-method__dot { border-color: var(--pay11-green); } .pay11-method.is-selected .pay11-method__dot, .pay11-method:has(input:checked) .pay11-method__dot { border-color: var(--pay11-green); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 1rem var(--pay11-green); } /* both sit above the full-bleed input so text selection and the dot render normally; the input still receives the click because they are not interactive themselves */ .pay11-method__dot, .pay11-method__text { position: relative; pointer-events: none; } .pay11-method__text { display: flex; flex-direction: column; line-height: 1.4; } .pay11-method__label { font-weight: 600; } .pay11-method__note { font-size: .78rem; color: var(--pay11-muted); } .pay11-credit { margin: .75rem 0 0; font-size: .85rem; color: var(--pay11-muted); } /* -------------------------------------------------------------------------- Result screen + bank picker -------------------------------------------------------------------------- */ .pay11-result { padding: 1.5rem 1rem 3rem; } .pay11-result__head { text-align: center; padding-bottom: 1.25rem; border-bottom: 1px solid var(--pay11-rule); } .pay11-result__title { margin: 0 0 .5rem; font-size: 1.3rem; font-weight: 700; } .pay11-result__head.is-done .pay11-result__title { color: var(--pay11-green); } .pay11-result__head.is-pending .pay11-result__title { color: var(--pay11-ink); } .pay11-result__code { color: var(--pay11-muted); font-size: .9rem; } .pay11-result__code b { color: var(--pay11-ink); font-size: 1.05rem; margin: 0 .35rem; } .pay11-payable { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; padding: 1rem 1.25rem; background: var(--pay11-green-pale); border-radius: .5rem; } .pay11-payable__label { color: var(--pay11-ink); font-weight: 600; } .pay11-payable__amount { font-size: 1.35rem; font-weight: 700; color: var(--pay11-green-dark); } .pay11-payable__amount small { font-size: .8rem; font-weight: 500; } .pay11-timer { margin-top: 1.25rem; font-size: .85rem; color: var(--pay11-muted); } .pay11-timer__clock { margin: 0 .4rem; color: var(--pay11-ink); font-size: 1rem; } .pay11-timer__bar { display: block; height: .35rem; margin-top: .5rem; background: var(--pay11-rule); border-radius: 1rem; overflow: hidden; } .pay11-timer__bar i { display: block; height: 100%; width: 0; background: var(--pay11-green); transition: width 1s linear; } .pay11-banks__title { margin: 1.75rem 0 .75rem; font-size: 1.05rem; font-weight: 700; } .pay11-banks__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem; } .pay11-banks__go { margin-top: 1rem; min-width: 14rem; } /* Selectable bank, same mechanics as .pay11-method: the real radio fills the box and is the click target, the state comes from :has() with .is-selected as the scripted fallback. */ .pay11-bank { position: relative; display: flex; align-items: center; gap: .65rem; min-height: 3.5rem; padding: .75rem 1.15rem; border: 1px solid var(--pay11-rule); border-radius: .5rem; background: #fff; font-weight: 600; cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; } .pay11-bank input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; } .pay11-bank:hover { border-color: var(--pay11-green); } .pay11-bank:focus-within { border-color: var(--pay11-green); box-shadow: 0 0 0 3px var(--pay11-green-pale); } .pay11-bank.is-selected, .pay11-bank:has(input:checked) { border-color: var(--pay11-green); background: var(--pay11-green-pale); } .pay11-bank__dot { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; border: 2px solid var(--pay11-dot); border-radius: 50%; background: #fff; transition: border-color .15s, box-shadow .15s; } .pay11-bank.is-selected .pay11-bank__dot, .pay11-bank:has(input:checked) .pay11-bank__dot { border-color: var(--pay11-green); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 1rem var(--pay11-green); } .pay11-bank__dot, .pay11-bank__name { position: relative; pointer-events: none; } /* the booking's own payment-method note + the "why no gateway" explainer */ .pay11-result__method { margin: 1rem 0 0; text-align: center; color: var(--pay11-muted); font-size: .9rem; } .pay11-result__method b { color: var(--pay11-ink); margin: 0 .35rem; } .pay11-note { margin: 1rem 0 0; padding: .75rem 1rem; border-radius: .5rem; background: #fff8e6; color: #8a6116; font-size: .875rem; line-height: 1.7; } /* -------------------------------------------------------------------------- Card-to-card block -------------------------------------------------------------------------- */ .pay11-transfer__lead { color: var(--pay11-muted); font-size: .9rem; margin: 0 0 1rem; } .pay11-transfer__list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.25rem; } .pay11-transfer__list dt { color: var(--pay11-muted); font-size: .85rem; } .pay11-transfer__list dd { margin: 0; font-weight: 600; letter-spacing: .04em; } .pay11-result__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; } /* -------------------------------------------------------------------------- Mobile -------------------------------------------------------------------------- */ @media (max-width: 575.98px) { .pay11-card { padding: 1.25rem; } .pay11-method { flex: 1 1 100%; } .pay11-banks { grid-template-columns: 1fr; } .pay11-payable { flex-direction: column; align-items: flex-start; gap: .35rem; } .pay11-result__actions .pay11-btn { width: 100%; } } /* -------------------------------------------------------------------------- Voucher (reserve_voucher11.php) The legacy reserve_voucher_customer4.php renders inside the panel layout, so it inherits layouts/sidebar4.php and the ALA rail. This one goes through bk11_page_open(), which loads neither - the sheet is the whole page. -------------------------------------------------------------------------- */ .pay11-voucher { padding: 1.5rem 1rem 3rem; } .pay11-voucher__sheet { padding: 2rem; } .pay11-voucher__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--pay11-rule); } .pay11-voucher__hotel { margin: 0 0 .25rem; font-size: 1.25rem; font-weight: 700; } .pay11-voucher__addr { margin: 0; color: var(--pay11-muted); font-size: .875rem; } .pay11-voucher__badge { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; padding: .6rem 1rem; border: 1px solid var(--pay11-green); border-radius: .5rem; background: var(--pay11-green-pale); white-space: nowrap; } .pay11-voucher__badge span { font-size: .75rem; color: var(--pay11-muted); } .pay11-voucher__badge b { font-size: 1.15rem; color: var(--pay11-green-dark); } .pay11-voucher__badge em { font-style: normal; font-size: .78rem; color: var(--pay11-ink); } .pay11-voucher__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem 1.5rem; margin: 1.5rem 0 0; } .pay11-voucher__grid dt { color: var(--pay11-muted); font-size: .8rem; margin-bottom: .2rem; } .pay11-voucher__grid dd { margin: 0; font-weight: 600; } .pay11-voucher__msg { margin: 1.25rem 0 0; padding: .75rem 1rem; background: var(--pay11-bg); border-radius: .5rem; font-size: .9rem; } .pay11-voucher__msg span { color: var(--pay11-muted); } /* wide tables scroll inside their own box - the page never scrolls sideways */ .pay11-voucher__tablewrap { margin-top: 1.5rem; overflow-x: auto; } .pay11-voucher__table { width: 100%; border-collapse: collapse; font-size: .9rem; } .pay11-voucher__table th { padding: .7rem .75rem; background: var(--pay11-green); color: #fff; font-weight: 600; white-space: nowrap; } .pay11-voucher__table td { padding: .7rem .75rem; border-bottom: 1px solid var(--pay11-rule); white-space: nowrap; } .pay11-voucher__table tbody tr:last-child td { border-bottom: 0; } .pay11-voucher__total { margin-top: 1.5rem; } .pay11-voucher__actions { justify-content: flex-end; } @media print { /* bk11_page_open() emits the topbar and the stepper - neither belongs on a printed voucher */ .bk-topbar, .reserve-steps, .pay11-voucher__actions { display: none !important; } body, .bk11 { background: #fff !important; } .pay11-card { box-shadow: none !important; border: 1px solid #ccc; } .pay11-voucher { padding: 0; } .pay11-voucher__table th { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } @media (max-width: 575.98px) { .pay11-voucher__sheet { padding: 1.25rem; } .pay11-voucher__badge { align-items: flex-start; } } /* ?paydebug=1 diagnostic block - never shown without the flag */ .pay11-debug { margin: 1.5rem 0 0; padding: 1rem; background: #1f2933; color: #d5dde5; border-radius: .5rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; line-height: 1.6; direction: ltr; text-align: left; overflow-x: auto; white-space: pre-wrap; word-break: break-word; } /* bank chooser shown inline on step 3, under the method radios */ .pay11-banks--inline { margin-top: 1rem; } .pay11-banks--inline .pay11-banks__title { margin: 0 0 .6rem; font-size: .95rem; } .pay11-banks--inline .pay11-banks__list { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); } /* "held, not paid" subtitle + the real reserve_status label */ .pay11-result__sub { margin: .35rem 0 0; color: var(--pay11-muted); font-size: .9rem; } .pay11-result__status { display: inline-block; margin: 0 .4rem; padding: .1rem .5rem; border-radius: 1rem; background: var(--pay11-bg); border: 1px solid var(--pay11-rule); font-style: normal; font-size: .75rem; color: var(--pay11-muted); }