@import url('site.css'); /* Buyer facing pages: organiser page, event page with the ticket picker, order page with the QR tickets, single ticket page. Mobile first, works inside an iframe embed, centred card on desktop. The organiser's accent colour comes in on and the soft/ring/dark shades are derived from it. */ body.book { background: #f3f5f4; background-image: radial-gradient(900px 300px at 50% -80px, rgba(255,255,255,.9), rgba(255,255,255,0)); } body.book.embed { background: transparent; } @supports (color: color-mix(in srgb, red 10%, white)) { body.book { --accent-soft: color-mix(in srgb, var(--accent) 11%, #fff); --accent-ring: color-mix(in srgb, var(--accent) 30%, transparent); --accent-dark: color-mix(in srgb, var(--accent) 82%, #000); } } .book-wrap { max-width: 680px; margin: 0 auto; padding: 1rem 1rem 2.5rem; } @media (min-width: 720px) { .book-wrap { padding-top: 2rem; } } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Organiser header */ .cover { border-radius: 18px 18px 0 0; overflow: hidden; aspect-ratio: 3 / 1; background: var(--accent-soft); box-shadow: var(--shadow-sm); } .cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .venue-head { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 1rem 1.1rem; margin-bottom: 1rem; box-shadow: var(--shadow-sm); } .venue-head.has-cover { border-radius: 0 0 18px 18px; border-top: 0; } .venue-logo-link { display: block; text-decoration: none; } .venue-avatar { width: 56px; height: 56px; border-radius: 14px; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); } .venue-logo { width: 56px; height: 56px; object-fit: contain; border-radius: 14px; background: #fff; border: 1px solid var(--line); display: block; } .venue-meta { min-width: 0; } .venue-meta h1 { font-size: 1.35rem; margin: 0; letter-spacing: -0.02em; line-height: 1.2; } .venue-meta h1 a { color: var(--ink); text-decoration: none; } .venue-address { margin: .15rem 0 0; color: var(--muted); font-size: .85rem; } .venue-links { margin: .3rem 0 0; font-size: .8rem; display: flex; gap: .75rem; flex-wrap: wrap; } .venue-links a { color: var(--ink-soft); } .venue-call { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-width: 56px; min-height: 56px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); text-decoration: none; font-weight: 700; font-size: .72rem; } .venue-call svg { width: 22px; height: 22px; } .venue-call:hover { filter: brightness(.97); } @media (max-width: 420px) { .venue-head { padding: .9rem; gap: .7rem; } .venue-avatar, .venue-logo { width: 48px; height: 48px; font-size: 1.3rem; } .venue-meta h1 { font-size: 1.2rem; } } .welcome { color: var(--ink-soft); margin: 0 .25rem 1rem; font-size: .97rem; } .book .flash-wrap { width: auto; margin: 0 0 1rem; } .book .flash { margin-bottom: 1rem; } .book .flash ul { margin: .4rem 0 0 1.1rem; padding: 0; } .lang-switch { display: flex; justify-content: flex-end; gap: .4rem; margin: -.4rem 0 .6rem; } .lang-switch select { width: auto; min-height: 36px; padding: .3rem 1.8rem .3rem .6rem; font-size: .82rem; border-radius: 8px; } .js .lang-go { display: none; } /* Panels and steps */ .panel { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 1.5rem; box-shadow: var(--shadow-sm); } .panel + .panel, .panel + .book-form, .event-list + .panel { margin-top: 1rem; } .closed-panel h2 { font-size: 1.25rem; margin-top: 0; } .closed-panel p:last-child { margin-bottom: 0; } .empty-panel p { margin: 0 0 .3rem; } .book-form { display: grid; gap: .9rem; margin-top: 1rem; } .book-form[hidden] { display: none; } .step { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 1.25rem; display: grid; gap: .85rem; box-shadow: var(--shadow-sm); } .step h2 { font-size: 1.1rem; display: flex; align-items: center; gap: .6rem; margin: 0; letter-spacing: -0.01em; } .step h2 .n { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .82rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; } .step h3 { font-size: .95rem; margin: 0; } .details-fields { display: grid; gap: .9rem; } .summary { background: var(--accent-soft); color: var(--accent); padding: .75rem .95rem; border-radius: 11px; font-weight: 600; margin: 0; } .summary.is-empty { background: var(--bg-alt); color: var(--muted); font-weight: 500; } .book .btn-primary { background: var(--accent); } .book .btn-primary:hover { background: var(--accent-dark); } .book .btn-lg { width: 100%; } .terms { border-top: 1px solid var(--line); padding-top: .75rem; display: grid; gap: .4rem; } .terms p { margin: 0; } .secure-note { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: 0; text-align: center; } .secure-note svg { width: 15px; height: 15px; flex: none; } .book-foot { text-align: center; margin-top: 1.5rem; } .powered { font-size: .8rem; color: var(--muted); } .powered a { color: var(--muted); } .powered.faint { font-size: .72rem; opacity: .7; } .linkish { background: none; border: 0; color: var(--accent); text-decoration: underline; font: inherit; cursor: pointer; padding: 0; } .rule { border: 0; border-top: 1px solid var(--line); margin: 1.25rem 0; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; } @media (max-width: 480px) { .grid-2 { grid-template-columns: 1fr; } } .book-form-plain { display: grid; gap: .8rem; } .consents { display: grid; gap: .5rem; margin: .25rem 0 .75rem; } .consents .check { font-size: .92rem; } .consent-note { margin: 0; } .notice { margin: 0; padding: .6rem .8rem; background: var(--warn-soft); color: var(--warn); border-radius: 10px; } .back-line { margin: 1rem 0 0; text-align: center; } .terms-line { text-align: center; margin: 1rem 0 0; } /* Organiser page: event list */ .list-heading { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 .25rem .6rem; font-weight: 700; } .event-list { display: grid; gap: .9rem; } .event-card { display: grid; grid-template-columns: 132px 1fr; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s, border-color .15s; } .event-card:hover { box-shadow: var(--shadow-md); border-color: var(--accent); transform: translateY(-1px); } .event-card:focus-visible { outline: 3px solid var(--accent-ring); } .ec-media { position: relative; min-height: 132px; background: var(--accent-soft); } .ec-media img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; } .ec-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--accent); font-weight: 800; font-size: 2.4rem; opacity: .45; } .ec-date { position: absolute; top: .55rem; left: .55rem; background: #fff; border-radius: 10px; padding: .3rem .5rem; display: grid; text-align: center; line-height: 1.05; box-shadow: var(--shadow-md); min-width: 44px; } .ec-dow { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; } .ec-day { font-size: 1.25rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; } .ec-mon { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); font-weight: 700; } .ec-badge { position: absolute; bottom: .55rem; left: .55rem; background: var(--danger); color: #fff; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .2rem .5rem; border-radius: 999px; } .ec-body { padding: .9rem 1rem; display: grid; gap: .15rem; align-content: start; min-width: 0; } .ec-name { margin: 0; font-size: 1.1rem; line-height: 1.25; letter-spacing: -0.01em; } .ec-when { margin: 0; color: var(--ink-soft); font-size: .88rem; } .ec-where, .ec-tag { margin: 0; color: var(--muted); font-size: .85rem; } .ec-tag { margin-top: .2rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ec-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .55rem; } .ec-price { font-weight: 700; color: var(--ink); } .ec-price.free { color: var(--ok); } .ec-cta { pointer-events: none; } .event-card.is-soldout .ec-media img { filter: grayscale(.6); opacity: .8; } @media (max-width: 480px) { .event-card { grid-template-columns: 1fr; } .ec-media { aspect-ratio: 2 / 1; min-height: 0; } } .about-panel h2 { font-size: 1.1rem; margin: 0 0 .5rem; } .about-panel p { margin: 0 0 .7rem; color: var(--ink-soft); } .about-panel p:last-child { margin-bottom: 0; } /* Event page: hero */ .event-hero { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm); } .eh-media { aspect-ratio: 2 / 1; background: var(--accent-soft); } .eh-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .eh-body { padding: 1.1rem 1.25rem 1.25rem; } .eh-back { margin: 0 0 .5rem; font-size: .82rem; } .eh-back a { color: var(--muted); text-decoration: none; } .eh-back a:hover { color: var(--accent); text-decoration: underline; } .eh-name { margin: 0; font-size: 1.6rem; line-height: 1.15; letter-spacing: -0.02em; } .eh-tag { margin: .35rem 0 0; color: var(--ink-soft); font-size: 1.02rem; } .eh-facts { margin: 1rem 0 0; display: grid; gap: .7rem; } .eh-facts > div { display: grid; grid-template-columns: 36px 1fr; gap: .6rem; align-items: start; } .eh-facts dt { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; } .eh-facts dt svg { width: 18px; height: 18px; } .eh-facts dd { margin: 0; font-size: .92rem; color: var(--ink-soft); line-height: 1.4; padding-top: .1rem; } .eh-facts dd b { color: var(--ink); } .event-desc { margin-top: 1rem; } .event-desc p { margin: 0 0 .7rem; color: var(--ink-soft); } .event-desc p:last-child { margin-bottom: 0; } .errors, .flash-info { margin-top: 1rem; } /* Ticket picker */ .types { display: grid; gap: .6rem; } .type { display: grid; grid-template-columns: 1fr auto; gap: .75rem; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: .8rem .9rem; background: #fff; transition: border-color .15s, background .15s; } .type.has-qty { border-color: var(--accent); background: var(--accent-soft); } .type.is-off { background: var(--bg-alt); color: var(--muted); } .type-main { min-width: 0; } .type-name { font-weight: 700; font-size: 1.02rem; } .type-admits { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: var(--bg-alt); color: var(--ink-soft); padding: .12rem .45rem; border-radius: 999px; vertical-align: middle; margin-left: .3rem; } .type.has-qty .type-admits { background: #fff; } .type-desc { margin: .15rem 0 0; font-size: .86rem; color: var(--ink-soft); } .type-note { margin: .25rem 0 0; display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; } .type-price { font-weight: 700; color: var(--ink); font-size: .95rem; } .type-price.free { color: var(--ok); } .type-left { color: var(--warn); font-weight: 600; } .type-off { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: #fff; border: 1px solid var(--line); padding: .35rem .6rem; border-radius: 999px; white-space: nowrap; } /* Timed sessions (slot-mode ticket types): the type card holds a stacked list of bookable times underneath. */ .type-group { border: 1px solid var(--line); border-radius: 14px; padding: .8rem .9rem; background: #fff; } .slot-list { display: grid; gap: .5rem; margin-top: .6rem; } .slot-row { grid-template-columns: 1fr auto; padding: .55rem .7rem; border-radius: 12px; } .slot-row .type-name { font-size: .95rem; font-weight: 600; } .stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; overflow: hidden; } .stp { width: 44px; height: 44px; border: 0; background: #fff; color: var(--accent); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font: inherit; transition: background .15s; } .stp svg { width: 18px; height: 18px; } .stp:hover { background: var(--accent-soft); } .stp[disabled] { color: var(--line-strong); cursor: not-allowed; background: #fff; } .stp-qty { width: 44px; min-height: 44px; height: 44px; padding: 0; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: 0; text-align: center; font-weight: 700; font-size: 1.05rem; -moz-appearance: textfield; appearance: textfield; } .stp-qty::-webkit-outer-spin-button, .stp-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .stp-qty:focus { box-shadow: inset 0 0 0 2px var(--accent-ring); } @media (max-width: 380px) { .type { grid-template-columns: 1fr; } .stepper { justify-self: end; } } /* Names per ticket */ .holders { border-top: 1px solid var(--line); padding-top: .85rem; display: grid; gap: .6rem; } .holders p { margin: 0; } #holder-list { display: grid; gap: .6rem; } .holder { border: 1px solid var(--line); border-radius: 12px; padding: .7rem .85rem; display: grid; gap: .5rem; background: var(--bg-alt); } .holder-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; margin: 0; } .holder .field input { background: #fff; } /* Discount code and price summary */ .code-box { display: grid; gap: .4rem; } .code-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; } .code-row input { text-transform: uppercase; } .code-msg { margin: 0; min-height: 0; } .code-msg.ok { color: var(--ok); font-weight: 600; } .code-msg.bad { color: var(--danger); font-weight: 600; } .price-summary { border-top: 1px solid var(--line); padding-top: .6rem; display: grid; gap: .25rem; } .price-summary[hidden] { display: none; } .ps-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; color: var(--ink-soft); } .ps-row.ps-discount { color: var(--ok); } .ps-row.ps-total { font-size: 1.1rem; color: var(--ink); font-weight: 700; border-top: 1px solid var(--line); margin-top: .3rem; padding-top: .5rem; } .ps-row.ps-total b { font-size: 1.25rem; } .fee-note { margin: 0; } /* Result and order pages */ .result { text-align: center; } .result h2 { margin: .6rem 0 .4rem; font-size: 1.5rem; } .result > p { margin: .4rem 0; } .result .ref { margin-bottom: .75rem; } .result .ref strong { display: inline-block; font-size: 1.15rem; letter-spacing: .08em; background: var(--bg-alt); border: 1px dashed var(--line-strong); padding: .3rem .8rem; border-radius: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .spinner { width: 46px; height: 46px; border: 4px solid var(--accent-soft); border-top-color: var(--accent); border-radius: 50%; margin: .25rem auto .75rem; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .tick { width: 84px; height: 84px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: inline-flex; align-items: center; justify-content: center; margin: .25rem auto .5rem; box-shadow: 0 0 0 10px rgba(31,122,77,.08); animation: pop .35s cubic-bezier(.2,.9,.3,1.4); } .tick svg { width: 44px; height: 44px; } .tick.pending { background: var(--warn-soft); color: var(--warn); box-shadow: 0 0 0 10px rgba(154,100,18,.08); } .tick.no { background: var(--danger-soft); color: var(--danger); box-shadow: 0 0 0 10px rgba(180,35,24,.08); } @keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } .detail-card { text-align: left; background: var(--bg-alt); border-radius: 14px; padding: .35rem 1rem; margin: 1.25rem 0 1rem; display: grid; } .bc-row { display: grid; grid-template-columns: 90px 1fr; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--line); } .bc-row:last-child { border-bottom: 0; } .bc-label { color: var(--muted); font-size: .85rem; padding-top: .1rem; } .bc-value { font-weight: 600; overflow-wrap: anywhere; } .result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .5rem; } .result-actions .btn { width: 100%; min-height: 48px; } .result-actions svg { width: 18px; height: 18px; } .result-actions form { display: contents; } @media (max-width: 420px) { .result-actions { grid-template-columns: 1fr; } } .badge { display: inline-block; padding: .3rem .75rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--bg-alt); } .status-paid, .status-free, .status-valid { background: var(--ok-soft); color: var(--ok); } .status-pending, .status-used { background: var(--warn-soft); color: var(--warn); } .status-cancelled, .status-refunded, .status-expired { background: var(--danger-soft); color: var(--danger); } .cancel-box { margin-top: 1rem; border: 1px solid #f5c9c4; background: #fff7f6; border-radius: 14px; padding: 1rem 1.1rem; text-align: left; } .cancel-box[hidden] { display: none; } .cancel-box h3 { margin: 0 0 .4rem; font-size: 1.05rem; } .cancel-box p { margin: 0 0 .8rem; } .cancel-actions { display: flex; gap: .6rem; flex-wrap: wrap; } .cancel-note { margin: .9rem 0 0; } /* QR tickets on the order page */ .tickets { display: grid; gap: .8rem; margin-top: 1rem; } .tickets h3 { margin: 0 .25rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; } .ticket-card { display: grid; grid-template-columns: 150px 1fr; gap: .9rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: .9rem; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .ticket-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--accent); } .ticket-card.is-used::before { background: var(--warn); } .ticket-card.is-cancelled { opacity: .7; grid-template-columns: 1fr; } .ticket-card.is-cancelled::before { background: var(--danger); } .tc-qr { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #fff; } .tc-qr a { display: block; line-height: 0; } .tc-qr svg { width: 100%; height: auto; display: block; } .ticket-card.is-used .tc-qr { opacity: .35; } .tc-body { min-width: 0; display: grid; gap: .15rem; } .tc-kicker { margin: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; } .tc-type { margin: 0; font-size: 1.1rem; line-height: 1.2; } .tc-holder { margin: 0; color: var(--ink-soft); font-weight: 600; } .tc-ref { margin: 0; font-size: .85rem; color: var(--muted); } .tc-ref b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .05em; color: var(--ink); } .tc-status { margin: .2rem 0 0; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; display: inline-block; padding: .2rem .55rem; border-radius: 999px; width: max-content; } .tc-status.valid { background: var(--ok-soft); color: var(--ok); } .tc-status.used { background: var(--warn-soft); color: var(--warn); } .tc-status.cancelled { background: var(--danger-soft); color: var(--danger); } .tc-links { margin: .3rem 0 0; } .tc-links a { color: var(--muted); } @media (max-width: 420px) { .ticket-card { grid-template-columns: 1fr; justify-items: center; text-align: center; } .tc-qr { width: 200px; } .tc-body { justify-items: center; } } /* Single ticket: wallet card look */ .wallet { max-width: 400px; margin: 0 auto; background: #fff; border-radius: 22px; box-shadow: var(--shadow-lg); overflow: hidden; position: relative; border: 1px solid var(--line); } .wl-head { background: var(--accent); color: #fff; padding: 1rem 1.25rem .9rem; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; } .wl-org { font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; opacity: .92; } .wl-date { text-align: right; display: grid; font-weight: 700; font-size: .9rem; line-height: 1.25; } .wl-main { padding: 1.1rem 1.25rem .4rem; } .wl-event { margin: 0; font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.02em; } .wl-type { margin: .3rem 0 0; color: var(--ink-soft); font-weight: 600; } .wl-qr { padding: .8rem 1.25rem 1rem; display: grid; justify-items: center; position: relative; } .wl-qr svg { width: min(100%, 280px); height: auto; border-radius: 12px; } .wl-stamp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .08em; } .wl-stamp::before { content: ''; position: absolute; inset: .8rem 1.25rem 1rem; background: rgba(255,255,255,.72); border-radius: 12px; } .wl-stamp span, .wl-stamp { z-index: 1; } .wl-stamp.used { color: var(--warn); } .wl-stamp.cancelled { color: var(--danger); } .wallet.is-used .wl-qr svg, .wallet.is-cancelled .wl-qr svg { filter: grayscale(1); opacity: .5; } .wl-stamp { padding: 0 1.5rem; text-align: center; } .wl-notch { position: relative; height: 0; border-top: 2px dashed var(--line-strong); margin: .4rem 1.1rem 0; } .wl-notch span { position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: #f3f5f4; border: 1px solid var(--line); } body.book.embed .wl-notch span { background: #fff; } .wl-notch span:first-child { left: -1.1rem; margin-left: -12px; } .wl-notch span:last-child { right: -1.1rem; margin-right: -12px; } .wl-foot { padding: 1rem 1.25rem 1.2rem; display: grid; gap: .5rem; } .wl-facts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; } .wl-facts > div { display: grid; gap: .1rem; } .wl-k { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; } .wl-v { font-size: .88rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .03em; } .wl-v.status-valid { color: var(--ok); background: none; } .wl-v.status-used { color: var(--warn); background: none; } .wl-v.status-cancelled { color: var(--danger); background: none; } .wl-where { margin: 0; font-size: .85rem; color: var(--ink-soft); } .wl-actions { max-width: 400px; margin: 1rem auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } .wl-actions .btn { width: 100%; } .wl-note { max-width: 400px; margin: .9rem auto 0; text-align: center; } @media (max-width: 380px) { .wl-actions { grid-template-columns: 1fr; } } /* Right-to-left languages */ [dir="rtl"] { text-align: right; } [dir="rtl"] .detail-card { text-align: right; } [dir="rtl"] .lang-switch { justify-content: flex-start; } [dir="rtl"] .wl-date { text-align: left; } /* Print: tickets only, one per block, black on white */ @media print { body.book { background: #fff; } .book-wrap { max-width: none; padding: 0; } .cover, .lang-switch, .venue-call, .result-actions, .cancel-box, .cancel-note, .book-foot, .tc-links, .wl-actions, .wl-note, .back-line, .flash-wrap, .eh-back, .terms-line { display: none !important; } .venue-head, .panel, .ticket-card, .wallet, .event-hero { box-shadow: none; border-color: #999; break-inside: avoid; } .ticket-card { page-break-inside: avoid; grid-template-columns: 150px 1fr; } .ticket-card::before { display: none; } .tick { animation: none; box-shadow: none; } .wl-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .wl-notch span { display: none; } a { text-decoration: none; color: inherit; } } /* Reserved seating: the buyer's clickable seat map for a seat-linked ticket type. Wholly Ticketz's own. */ .seat-map-wrap { margin: .8rem 0 1.1rem; } .seat-map { display: grid; gap: .3rem; overflow-x: auto; padding: .25rem 0 .6rem; } .seat-map-row { display: flex; align-items: center; gap: .3rem; } .seat-map-row-label { width: 1.6rem; flex: none; font-size: .78rem; color: var(--muted); text-align: right; margin-right: .2rem; } .seat-btn { width: 2.1rem; height: 2.1rem; flex: none; border-radius: 6px; border: 1px solid var(--line-strong); background: #fff; font-size: .68rem; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); transition: background .1s, border-color .1s; } .seat-btn:hover:not(:disabled) { border-color: var(--accent); } .seat-btn.is-selected { background: var(--accent); border-color: var(--accent); color: #fff; } .seat-btn:disabled { background: var(--bg-alt); border-color: var(--line); color: var(--line-strong); cursor: not-allowed; } .seat-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .82rem; color: var(--muted); margin-bottom: .6rem; } .seat-legend span { display: inline-flex; align-items: center; gap: .35rem; } .seat-legend i { width: 1rem; height: 1rem; border-radius: 4px; border: 1px solid var(--line-strong); display: inline-block; font-style: normal; } .seat-legend .lg-free i { background: #fff; } .seat-legend .lg-selected i { background: var(--accent); border-color: var(--accent); } .seat-legend .lg-taken i { background: var(--bg-alt); border-color: var(--line); } .seat-count { font-size: .85rem; color: var(--muted); margin-top: .4rem; }