:root { color-scheme: light; --wine: #7a1837; --wine-soft: #f8e9ee; --ink: #17171d; --muted: #777680; --line: #e8e7ec; }
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--ink); background: #f3f2f5; }
button, input { font: inherit; }
button { cursor: pointer; }
.payment-page { min-height: 100svh; display: flex; justify-content: center; touch-action: manipulation; }
.payment-shell { width: 100%; max-width: min(520px, 100vw); min-width: 0; min-height: 100svh; display: flex; flex-direction: column; overflow-x: hidden; background: #fbfbfc; }
.payment-header { display: flex; align-items: center; justify-content: space-between; padding: max(16px, env(safe-area-inset-top)) 24px clamp(10px, 1.8svh, 15px); }
.payment-brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; }
.payment-brand img { width: 92px; height: 43px; object-fit: contain; }
.payment-brand span { display: flex; flex-direction: column; }
.payment-brand strong { font-size: 17px; letter-spacing: -.5px; }.payment-brand small { color: var(--muted); font-size: 9px; letter-spacing: .7px; text-transform: uppercase; margin-top: 2px; }
.secure-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--wine); background: var(--wine-soft); font-size: 20px; font-weight: 800; }
[data-purchase-area] { display:flex; flex:1 0 auto; flex-direction:column; }
.payment-summary { flex: 1 0 auto; padding: clamp(26px, 4.8svh, 40px) 25px clamp(22px, 5svh, 42px); text-align: center; }
.payment-eyebrow { margin: 0 0 8px; color: var(--wine); font-size: 10px; font-weight: 850; letter-spacing: 1.6px; }
.payment-summary h1 { margin: 0; font-size: clamp(25px, 7vw, 32px); letter-spacing: -1px; }
.board-caption { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.price-block { display: flex; flex-direction: column; margin: clamp(32px, 6.4svh, 54px) 0 clamp(28px, 5.6svh, 47px); }.price-block > span { color: var(--muted); font-size: 15px; }.price-block > strong { width: 100%; margin-top: 9px; display: flex; align-items: baseline; justify-content: center; gap: .08em; font-size: clamp(46px, 14.5vw, 64px); line-height: 1; letter-spacing: -3px; }.price-block > strong small { font-size: .6em; letter-spacing: -1px; }
.ticket-stepper { min-height: clamp(68px, 9.7svh, 82px); display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; border: 1px solid #dcdbe1; border-radius: 42px; background: #fff; box-shadow: 0 4px 16px rgba(39, 34, 56, .035); }
.ticket-stepper button { width: clamp(44px, 6.1svh, 51px); height: clamp(44px, 6.1svh, 51px); margin: auto; border: 0; border-radius: 50%; color: #fff; background: #18181d; font-size: clamp(29px, 4.1svh, 34px); font-weight: 350; line-height: 1; }.ticket-stepper button:disabled { color: #aaa9af; background: #e0dfe3; cursor: default; }
.ticket-stepper span { display: flex; flex-direction: column; }.ticket-stepper strong { font-size: 28px; line-height: 1; }.ticket-stepper small { margin-top: 5px; color: var(--muted); font-size: 13px; }
.payment-deadline { margin: 13px 0 0; color: var(--wine); font-size: 12px; font-weight: 750; }
.payment-notice { margin: -16px 25px 25px; padding: 12px 13px; border-radius: 13px; color: #825d19; background: #fff4d7; font-size: 12px; line-height: 1.45; text-align: center; }
.payment-methods { flex:none; padding: clamp(16px, 2.9svh, 24px) 25px max(22px, env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #efedf0; }
.wallet-button { width: 100%; min-height: clamp(48px, 6.9svh, 58px); margin-top: clamp(7px, 1.2svh, 10px); padding: 0 17px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; border-radius: 14px; font-size: 15px; font-weight: 750; }.wallet-button img { width: 47px; height: 26px; object-fit: contain; }.apple-wallet { color: #fff; background: #08080a; }.apple-wallet img { filter: invert(1) grayscale(1) brightness(3); }.google-wallet { color: #222128; border-color: #dedde3; background: #fff; }.google-wallet img { width: 51px; }
.wallet-button:disabled, .manual-toggle:disabled { opacity: .45; cursor: not-allowed; }
.manual-toggle { width: 100%; margin-top: clamp(12px, 2.3svh, 19px); padding: 5px; border: 0; color: var(--wine); background: transparent; font-size: 15px; font-weight: 800; }
.manual-payment-form { margin-top: 13px; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: #faf9fc; }.manual-payment-form > label, .manual-payment-form > div label { display: flex; flex-direction: column; gap: 6px; color: #5f5d66; font-size: 10px; font-weight: 750; text-align: left; }.manual-payment-form > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }.manual-payment-form input { width: 100%; height: 42px; padding: 0 11px; border: 1px solid #dddbe2; border-radius: 10px; color: var(--ink); background: #fff; outline-color: var(--wine); font-size: 13px; }.manual-pay-button { width: 100%; min-height: 48px; margin-top: 13px; border: 0; border-radius: 11px; color: #fff; background: var(--wine); font-weight: 800; }.manual-pay-button span { margin-left: 5px; }
.payment-message { min-height: 17px; margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; text-align: center; }
.current-ticket-section, .ticket-archive { padding: 18px 20px 21px; border-top: 1px solid #efedf0; background: #fff; }
.current-ticket-section[hidden], .ticket-archive[hidden], .inspection-notice[hidden], .inline-inspection-notice[hidden], .payment-success[hidden], [data-purchase-area][hidden] { display: none!important; }
.passenger-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.passenger-section-heading .payment-eyebrow { margin-bottom: 4px; }
.passenger-section-heading h2 { margin: 0; font-size: 20px; letter-spacing: -.5px; }
.ticket-count-badge { min-width: 29px; height: 29px; padding: 0 8px; display: grid; place-items: center; border-radius: 15px; color: var(--wine); background: var(--wine-soft); font-size: 12px; font-weight: 850; }
.current-ticket-carousel { display: flex; gap: 12px; padding: 1px 12px 8px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.current-ticket-carousel::-webkit-scrollbar { display: none; }
.current-ticket-carousel .passenger-ticket-card { flex:0 0 100%; scroll-snap-align:center; }
.carousel-dots { min-height:10px; display:flex; justify-content:center; gap:5px; padding-top:5px; }
.carousel-dots[hidden] { display:none; }
.carousel-dots span { width:5px; height:5px; border-radius:5px; background:#d6d2df; transition:background-color .18s ease; }
.carousel-dots span.is-active { width:16px; background:var(--wine); }
.passenger-ticket-card { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) 92px; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:linear-gradient(110deg,#fff,#f6f7f9); text-decoration:none; }
.passenger-ticket-content { min-width:0; padding:16px; }
.passenger-ticket-topline { display:flex; align-items:center; }
.passenger-ticket-state { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; font-weight:750; }
.status-active .passenger-ticket-state { color:#26a34a; }
.status-presented .passenger-ticket-state { color:var(--wine); }
.status-cancelled .passenger-ticket-state,.status-declined .passenger-ticket-state { color:#a65359; }
.status-timeout .passenger-ticket-state,.status-expired .passenger-ticket-state { color:#8c7041; }
.passenger-ticket-main { margin-top:10px; display:block; }
.passenger-ticket-main p { margin:0 0 5px; color:#56525d; font-size:11px; line-height:1.4; overflow-wrap:anywhere; }
.passenger-ticket-main h3 { margin:0; overflow-wrap:anywhere; font:750 14px/1.4 Inter,"Segoe UI",system-ui,sans-serif; letter-spacing:.2px; }
.passenger-ticket-main dl { margin:13px 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; }
.passenger-ticket-main dl div { min-width:0; display:flex; flex-direction:column; gap:3px; }
.passenger-ticket-main dl div:nth-child(even) { padding-left:12px; border-left:1px solid var(--line); }
.passenger-ticket-main dt { color:var(--muted); font-size:8px; font-weight:600; text-transform:uppercase; }
.passenger-ticket-main dd { margin:0; color:var(--ink); font-size:11px; font-weight:750; overflow-wrap:anywhere; }
.passenger-ticket-stub { min-width:0; padding:18px 8px 16px; position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:24px; text-align:center; }
.passenger-ticket-price { font-size:21px; font-weight:800; line-height:1.2; overflow-wrap:anywhere; }
.ticket-open-hint { color:var(--wine); font-size:9px; font-weight:750; line-height:1.4; }
.passenger-ticket-card.status-cancelled,.passenger-ticket-card.status-declined,.passenger-ticket-card.status-timeout,.passenger-ticket-card.status-expired { background:#f8f7f9; }
.inspection-notice { margin: 12px 20px 22px; padding: 25px 21px; border: 1px solid #f0d79e; border-radius: 22px; background: linear-gradient(150deg,#fffdf8,#fff6dc); text-align: center; box-shadow: 0 12px 35px rgba(114,83,27,.08); }
.inspection-icon { width: 45px; height: 45px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; color: #8b651f; background: #ffedbd; font-size: 22px; font-weight: 900; }
.inspection-notice .payment-eyebrow { color: #8b651f; }
.inspection-notice h1 { margin: 7px 0 10px; overflow-wrap: anywhere; font-size: 24px; line-height: 1.12; letter-spacing: -.8px; }
.inspection-notice > p:last-child { margin: 0; color: #756746; font-size: 12px; line-height: 1.55; }
.inline-inspection-notice { margin: 6px 20px 0; padding: 11px 13px; border-radius: 12px; color: #77581e; background: #fff2ce; font-size: 11px; font-weight: 700; line-height: 1.45; text-align: center; }
.payment-success { margin: 12px 20px 22px; padding: 25px 21px; border: 1px solid #cce5db; border-radius: 22px; background: linear-gradient(150deg,#fff,#edfaf5); text-align: center; }
.payment-success > span { width: 46px; height: 46px; margin: 0 auto 13px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #21866d; font-size: 22px; font-weight: 900; }
.payment-success .payment-eyebrow { color: #21866d; }
.payment-success h2 { margin: 6px 0 7px; font-size: 25px; }
.payment-success > p:not(.payment-eyebrow) { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.my-tickets-link { flex: none; min-height: 36px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 18px; color: var(--wine); background: var(--wine-soft); font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.storage-warning { margin: 4px 20px 14px; padding: 11px 13px; border-radius: 12px; color: #7c2d2d; background: #fdeaea; font-size: 11px; font-weight: 700; line-height: 1.45; text-align: center; }
.storage-warning[hidden], .browser-gate[hidden] { display: none!important; }
.browser-gate { margin: 12px 20px 22px; padding: 25px 21px 21px; border: 1px solid #e7c6d1; border-radius: 22px; background: linear-gradient(150deg,#fff,#f8e9ee); text-align: center; box-shadow: 0 12px 35px rgba(122,24,55,.1); }
.browser-gate-icon { width: 45px; height: 45px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; color: var(--wine); background: var(--wine-soft); font-size: 22px; font-weight: 900; }
.browser-gate h2 { margin: 7px 0 10px; overflow-wrap: anywhere; font-size: 23px; line-height: 1.12; letter-spacing: -.7px; }
.browser-gate > p:not(.payment-eyebrow) { margin: 0 0 16px; color: #5b5666; font-size: 12px; line-height: 1.55; }
.browser-gate-open { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 14px; color: #fff; background: var(--wine); font-size: 15px; font-weight: 800; text-decoration: none; }
.browser-gate-copy { width: 100%; min-height: 44px; margin-top: 8px; border: 1px solid #dedde3; border-radius: 14px; color: var(--ink); background: #fff; font-size: 13px; font-weight: 750; }
.browser-gate-steps { margin: 16px 0 0; padding: 0 0 0 20px; color: #5b5666; font-size: 11px; line-height: 1.6; text-align: left; }
.browser-gate-steps b { color: var(--ink); }.browser-gate-steps i { color: var(--muted); }
.browser-gate-continue { margin-top: 14px; padding: 6px; border: 0; color: var(--muted); background: transparent; font-size: 12px; font-weight: 750; text-decoration: underline; }
.browser-gate.is-banner { margin-bottom: 8px; padding: 18px 17px 15px; }
.browser-gate.is-banner .browser-gate-icon { width: 36px; height: 36px; margin-bottom: 9px; font-size: 18px; }
.browser-gate.is-banner h2 { font-size: 18px; }
.my-tickets-shell { min-height: 100svh; }
.my-tickets-empty { margin: 24px 20px; padding: 36px 21px; border: 1px dashed #d9d5e6; border-radius: 22px; text-align: center; }
.my-tickets-empty[hidden] { display: none!important; }
.my-tickets-empty > span { width: 52px; height: 52px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 16px; color: var(--wine); background: var(--wine-soft); font-size: 24px; }
.my-tickets-empty h1 { margin: 7px 0 10px; font-size: 24px; letter-spacing: -.8px; }
.my-tickets-empty > p:last-child { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.my-tickets-archive { border-top: 0; }
.ticket-note { margin: 18px 28px max(24px, env(safe-area-inset-bottom)); color: #9a98a0; font-size: 9px; line-height: 1.45; text-align: center; }
.payment-success button { min-height: 45px; margin-top: 17px; padding: 0 17px; border: 0; border-radius: 12px; color: #fff; background: var(--wine); font-size: 12px; font-weight: 800; }
.ticket-archive-shell { border-top: 1px solid #efedf0; background: #fff; }
.archive-toggle { width: 100%; min-width: 0; min-height: 76px; padding: 13px 20px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 11px; border: 0; color: var(--ink); background: #fff; text-align: left; }
@media (hover: hover) and (pointer: fine) { .archive-toggle:hover { background: #faf9fc; } }
.archive-toggle-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--wine); background: var(--wine-soft); font-size: 20px; font-weight: 850; }
.archive-toggle > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }.archive-toggle strong { font-size: 13px; }.archive-toggle small { color: var(--muted); font-size: 9px; }.archive-toggle > i { color: #8a8790; font-style: normal; transition: transform .18s ease; }.archive-toggle.is-open > i { transform: rotate(180deg); }
.ticket-archive { border-top: 1px solid #efedf0; background: #f8f7fa; }
.archive-groups { display: grid; gap: 20px; }.archive-day h3 { margin: 0 0 9px; color: #77727e; font-size: 11px; font-weight: 800; text-transform: capitalize; }.archive-ticket-list { display: grid; gap: 9px; }
.passenger-ticket-card.is-compact .passenger-ticket-content { padding:14px; }
.archive-empty { margin: 0; padding: 22px 14px; border: 1px dashed #d8d4df; border-radius: 14px; color: var(--muted); background: #fff; font-size: 12px; text-align: center; }
@media (min-width: 521px) { .payment-shell { min-height: 760px; margin: 22px 0; border-radius: 28px; box-shadow: 0 20px 70px rgba(34, 28, 48, .12); overflow: hidden; } }
@media (max-height: 680px) { .payment-summary { padding-top: 20px; padding-bottom: 18px; }.payment-eyebrow { margin-bottom: 5px; }.board-caption { margin-top: 4px; }.price-block { margin-top: 25px; margin-bottom: 22px; }.payment-methods { padding-top: 14px; padding-bottom: 16px; }.manual-toggle { margin-top: 8px; } }
@media (max-height: 720px) { .payment-header { padding-top: max(12px, env(safe-area-inset-top)); }.payment-summary { padding-top: 18px; padding-bottom: 14px; }.price-block { margin-top: 20px; margin-bottom: 17px; }.ticket-stepper { min-height: 64px; }.payment-methods { padding-top: 11px; padding-bottom: 12px; }.wallet-button { min-height: 46px; }.manual-toggle { margin-top: 6px; } }
@media (max-width: 360px) { .payment-summary { padding-inline: 17px; }.payment-methods { padding-inline: 17px; }.ticket-stepper { grid-template-columns: 58px 1fr 58px; }.ticket-stepper button { width: 46px; height: 46px; } }
@media (max-width: 360px) { .current-ticket-section, .ticket-archive { padding-inline: 15px; }.current-ticket-carousel { padding-inline:6px; }.inspection-notice, .payment-success { margin-inline: 15px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto!important; transition: none!important; } }
.ticket-type + .ticket-type { margin-top: 12px; }
.ticket-type-name { display: flex; justify-content: space-between; align-items: baseline; margin: 0 6px 6px; font-size: 15px; }.ticket-type-name small { color: var(--muted); font-size: 13px; }

button:focus-visible,a:focus-visible{outline:2px solid var(--wine);outline-offset:3px}.payment-brand>span,.passenger-section-heading>div{min-width:0}.payment-brand small,.board-caption,.ticket-type-name{overflow-wrap:anywhere}.ticket-type-name{gap:8px}.ticket-type-name small{flex:none}
:is(.wallet-button,.manual-toggle,.manual-pay-button,.ticket-stepper button,.archive-toggle){transition:transform 140ms cubic-bezier(.23,1,.32,1),background-color 140ms ease}.wallet-button:active:not(:disabled):not(:focus-visible),.manual-pay-button:active:not(:disabled):not(:focus-visible),.ticket-stepper button:active:not(:disabled):not(:focus-visible){transform:scale(.98)}
@media(pointer:coarse){.manual-payment-form input{font-size:16px}}
@media(prefers-reduced-motion:reduce){button:active{transform:none!important}}

@media(max-width:360px){.passenger-ticket-card{grid-template-columns:minmax(0,1fr) 78px}.passenger-ticket-content,.passenger-ticket-card.is-compact .passenger-ticket-content{padding:13px 12px}.passenger-ticket-main h3{font-size:13px}.passenger-ticket-main dl{column-gap:8px}.passenger-ticket-main dl div:nth-child(even){padding-left:8px}}

.payment-message:empty{display:none}

.payment-back{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;color:var(--wine);background:var(--wine-soft);text-decoration:none}.payment-back[hidden]{display:none}
@media(hover:hover) and (pointer:fine){.payment-back:hover{background:#efd3dd}}

/* Keep wallet choice and quantity controls consistent across device fonts. */
.wallet-button[hidden]{display:none}
.ticket-stepper{--stepper-size:clamp(44px,6.1svh,51px);grid-template-columns:var(--stepper-size) minmax(0,1fr) var(--stepper-size);min-height:calc(var(--stepper-size) + 18px);padding:8px;gap:8px;border-radius:999px}
.ticket-stepper button{width:var(--stepper-size);height:var(--stepper-size);margin:0;padding:0;display:grid;place-items:center;line-height:1}
.ticket-stepper button svg{display:block;width:26px;height:26px;flex:none}

.ticket-archive-disclosure>summary{min-height:44px;margin-bottom:0;cursor:pointer;list-style:none}.ticket-archive-disclosure>summary::-webkit-details-marker{display:none}.ticket-archive-disclosure>summary h2{flex:1;min-width:0}.archive-chevron{flex:none;color:var(--wine)}.ticket-archive-disclosure[open]>summary{margin-bottom:13px}.ticket-archive-disclosure[open] .archive-chevron{transform:rotate(180deg)}.ticket-archive-disclosure>summary:focus-visible{outline:2px solid var(--wine);outline-offset:4px;border-radius:6px}

.payment-result{--result-color:#11854f;display:grid;grid-template-columns:minmax(0,1fr) 120px;padding:0;border:1px solid #b8bbc8;border-radius:14px;background:linear-gradient(110deg,#fff,#f6f7f9);text-align:center}
.payment-result.is-failed{--result-color:#bc3046}
.payment-result-content{min-width:0;padding:25px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px}
.payment-result-icon{width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--result-color)}
.payment-result-content h2{margin:0;color:var(--result-color);font-size:19px;line-height:1.3;overflow-wrap:anywhere}
.payment-result-reason{margin:0;color:var(--muted);font-size:11px;line-height:1.5;overflow-wrap:anywhere}.payment-result-reason[hidden]{display:none}
.payment-result-stub{position:relative;min-width:0;padding:16px 12px;display:flex;align-items:center;justify-content:center;border-left:0}
.payment-result-stub button{width:100%;margin:0;padding:12px 8px;min-height:58px;border:0;border-radius:12px;color:#fff;background:var(--wine);font-size:12px;line-height:1.4;font-weight:750;overflow-wrap:anywhere}
@media(max-width:360px){.payment-result{grid-template-columns:minmax(0,1fr) 104px}.payment-result-content{padding:22px 10px}.payment-result-content h2{font-size:17px}.payment-result-stub{padding:14px 10px}}

.inspection-ticket{display:grid;grid-template-columns:minmax(0,1fr) 76px;padding:0;border:1px solid #b9b9b9;border-radius:14px;box-shadow:none;background:#fff;text-align:left}
.inspection-ticket-content{min-width:0;padding:22px 16px}
.inspection-status{display:flex;align-items:center;gap:8px;margin:0 0 13px;color:#9b6900;font-size:12px;font-weight:750;line-height:1.45}
.inspection-ticket h1{margin:0 0 14px;font-size:22px;line-height:1.2;letter-spacing:-.4px}
.inspection-description{margin:0;color:var(--muted);font-size:12px;line-height:1.55;overflow-wrap:anywhere}
.inspection-ticket-stub{position:relative;min-width:0;display:grid;place-items:center;border-left:0;background:linear-gradient(110deg,#fffdf7,#fff6db);border-radius:0 14px 14px 0}
.inspection-ticket-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;color:#ae7700;background:#ffe7ab}
@media(max-width:360px){.inspection-ticket{grid-template-columns:minmax(0,1fr) 64px}.inspection-ticket-content{padding:20px 13px}.inspection-ticket h1{font-size:20px}.inspection-ticket-icon{width:44px;height:44px}.inspection-ticket-icon svg{width:28px;height:28px}}

/* Shared ticket edge: compact 16px cutouts and the full ticket's 9px dashes. */
.current-ticket-section { --ticket-cutout-background:#fff; }
.ticket-archive { --ticket-cutout-background:#f8f7fa; }
.passenger-ticket-card,.payment-result,.inspection-ticket { border:1px solid var(--line); border-radius:14px; }
.ticket-stub-perforation { position:absolute; inset:0 auto 0 0; width:1px; pointer-events:none; background:repeating-linear-gradient(180deg,#d9d7de 0 9px,transparent 9px 18px) center / 1px calc(100% - 16px) no-repeat; }
.ticket-stub-perforation::before,.ticket-stub-perforation::after { content:""; position:absolute; left:-8px; width:16px; height:16px; border:1px solid var(--line); border-radius:50%; background:var(--ticket-cutout-background,#fbfbfc); }
.ticket-stub-perforation::before { top:-9px; clip-path:inset(50% 0 0); }
.ticket-stub-perforation::after { bottom:-9px; clip-path:inset(0 0 50%); }
.passenger-ticket-card.is-compact .passenger-ticket-content { padding:16px; }
@media(max-width:360px) { .passenger-ticket-card.is-compact .passenger-ticket-content { padding:13px 12px; } }

/* Remove the straight outer border inside each circular cutout. */
.passenger-ticket-card { --ticket-stub-width:92px; }
.payment-result { --ticket-stub-width:120px; }
.inspection-ticket { --ticket-stub-width:76px; }
.passenger-ticket-card,.payment-result,.inspection-ticket {
    mask-image:radial-gradient(circle 7px at calc(100% - var(--ticket-stub-width) - 1px) 0,transparent 99%,#000 100%),radial-gradient(circle 7px at calc(100% - var(--ticket-stub-width) - 1px) 100%,transparent 99%,#000 100%);
    mask-composite:intersect;
}
@media(max-width:360px) { .payment-result { --ticket-stub-width:104px; }.inspection-ticket { --ticket-stub-width:64px; } }

.passenger-login {position:relative;display:flex;justify-content:center;align-items:center;flex:1;min-width:36px;margin:0 8px;align-self:center}
.passenger-account-toggle {position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;flex:none;border:1px solid #d8dedc;border-radius:50%;background:#fff;color:#25493e;cursor:pointer}
.passenger-account-toggle:focus-visible {outline:2px solid #1b7056;outline-offset:3px}
.passenger-account-check {position:absolute;right:-3px;bottom:-2px;display:grid;place-items:center;width:16px;height:16px;background:#16834d;color:#fff;border:2px solid white;border-radius:50%;font-size:11px;font-weight:800;line-height:1}
.passenger-account-check[hidden] {display:none}
.passenger-account-panel {position:absolute;left:50%;transform:translateX(-50%);top:44px;z-index:20;padding:16px;width:260px;max-width:calc(100vw - 40px);background:white;border:1px solid #d8dedc;border-radius:12px;box-shadow:0 6px 24px #0002}
.passenger-account-panel[hidden] {display:none}
.passenger-account-panel strong {display:block;margin-bottom:12px;font-size:14px}
.passenger-account-panel p {font-size:12px;margin:0 0 12px}
.payment-header>.payment-brand,.payment-header>.my-tickets-link,.payment-header>.payment-back {flex-shrink:0}
@media(max-width:380px){.payment-header{padding-inline:16px}.payment-brand img{width:64px}.payment-brand{gap:6px}.payment-brand small{font-size:7px}.passenger-login{margin-inline:4px}.passenger-account-panel{width:230px}}