/*
|--------------------------------------------------------------------------
| Ventra Portal Styles
|--------------------------------------------------------------------------
*/

:root {
    --ground: #07090d;
    --panel: #0f131b;
    --panel-2: #151b26;
    --electric: #237df8;
    --sky: #2bbff4;
    --volt: #35f2a0;
    --flare: #ff6b4a;
    --chalk: #f5f7fb;
    --mist: #98a1b3;
    --mist-dim: #5e6678;
    --line: rgba(245, 247, 251, .09);
    --line-strong: rgba(245, 247, 251, .18);
    --grad: linear-gradient(120deg, var(--electric), var(--sky));
    --grad-soft: linear-gradient(120deg, rgba(35, 125, 248, .3), rgba(43, 191, 244, .3));
    --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;

    --success: var(--volt);
    --danger: #ff5470;
    --info: var(--electric);
}

/* ---------- Nav / Auth Buttons ---------- */

.nav-buttons {
    display: flex;
    align-items: center;
}

#ventra-auth-buttons {
    display: flex;
    gap: 14px;
    align-items: center;
}

/* ---------- Account Dropdown ---------- */

.ventra-user-menu {
    position: relative;
    display: flex;
    align-items: center;
}

.ventra-user-menu-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--panel-2);
    border: 1px solid var(--line-strong);
    color: var(--chalk);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 500;
    padding: 10px 18px;
    border-radius: 50px;
    cursor: pointer;
    transition: .2s;
}

.ventra-user-menu-toggle:hover {
    border-color: var(--electric);
}

.ventra-caret {
    transition: transform .2s;
}

.ventra-user-menu.is-open .ventra-caret,
.ventra-user-menu:hover .ventra-caret {
    transform: rotate(180deg);
}

.ventra-user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 240px;
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .45);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: .18s ease;
    z-index: 1100;
}

.ventra-user-menu:hover .ventra-user-dropdown,
.ventra-user-menu.is-open .ventra-user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ventra-user-dropdown-header {
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
}

.ventra-dropdown-name {
    font-weight: 600;
    font-size: .95rem;
}

.ventra-dropdown-email {
    color: var(--mist);
    font-size: .82rem;
    margin-top: 2px;
    word-break: break-all;
}

.ventra-dropdown-role {
    display: inline-block;
    margin-top: 8px;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--electric);
    background: rgba(35, 125, 248, .12);
    padding: 3px 10px;
    border-radius: 50px;
    width: fit-content;
}

.ventra-user-dropdown-link {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: .9rem;
    color: var(--chalk);
    transition: .15s;
    background: none;
    border: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.ventra-user-dropdown-link:hover {
    background: rgba(255, 255, 255, .06);
}

.ventra-user-dropdown-logout {
    color: var(--danger);
}

/* ---------- Auth Forms ---------- */

.ventra-auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 140px 20px 60px;
}

.ventra-card {
    width: 100%;
    max-width: 440px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 44px;
    position: relative;
    overflow: hidden;
}

.ventra-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 18px;
    background: var(--grad);
    opacity: .3;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.ventra-card h2 {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 8px;
}

.ventra-card > p {
    color: var(--mist);
    margin-bottom: 28px;
}

.ventra-form-group {
    margin-bottom: 20px;
}

.ventra-form-group label {
    display: block;
    font-size: .85rem;
    color: var(--mist);
    margin-bottom: 8px;
}

.ventra-form-group input,
.ventra-form-group select,
.ventra-form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--panel-2);
    border: 1px solid var(--line-strong);
    color: var(--chalk);
    font-family: inherit;
    font-size: .95rem;
    outline: none;
    transition: .2s;
}

.ventra-form-group input:focus,
.ventra-form-group select:focus,
.ventra-form-group textarea:focus {
    border-color: var(--electric);
    background: rgba(255, 255, 255, .06);
}

/*
 * The closed <select> box picks up the dark styling above, but the
 * open options list is rendered natively by the browser/OS and
 * defaults to a white background regardless - style the <option>s
 * directly so the text doesn't end up white-on-white (same fix as
 * the .ventra-toolbar select below, just for form-group selects).
 */
.ventra-form-group select option {
    background-color: var(--panel);
    color: var(--chalk);
}

.ventra-form-group input:disabled {
    color: var(--mist);
    cursor: not-allowed;
}

.ventra-image-preview {
    display: block;
    width: 100%;
    max-width: 220px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--line-strong);
    margin-bottom: 10px;
    background: var(--panel-2);
}

.ventra-card button[type="submit"],
.ventra-card .btn {
    width: 100%;
    border: none;
    font-family: inherit;
    font-size: .95rem;
    cursor: pointer;
    color: #fff;
}

.ventra-card hr {
    border: none;
    border-top: 1px solid var(--line);
    margin: 24px 0;
}

.ventra-card p a {
    color: var(--electric);
}

.ventra-link-button {
    background: none;
    border: none;
    padding: 0;
    color: var(--electric);
    font-family: inherit;
    font-size: .9rem;
    cursor: pointer;
}

.ventra-link-button.danger {
    color: var(--danger);
}

.ventra-link-button:hover {
    text-decoration: underline;
}

/* ---------- Messages ---------- */

.ventra-message {
    margin-top: 16px;
    font-size: .88rem;
    min-height: 1.2em;
}

.ventra-message.loading {
    color: var(--mist);
}

.ventra-message.success {
    color: var(--success);
}

.ventra-message.error {
    color: var(--danger);
}

.ventra-message.info {
    color: var(--info);
}

/* ---------- Dashboards (shared) ---------- */

.ventra-dashboard {
    padding: 150px 20px 80px;
    max-width: 1200px;
    margin: 0 auto;
}

.ventra-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
}

.ventra-dashboard-header h1 {
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 6px;
}

.ventra-dashboard-header p {
    color: var(--mist);
}

.ventra-app-banner {
    background: rgba(35, 125, 248, .08);
    border: 1px solid rgba(35, 125, 248, .25);
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 30px;
}

.ventra-app-banner strong {
    display: block;
    margin-bottom: 6px;
}

.ventra-app-banner p {
    color: var(--mist);
    font-size: .9rem;
    margin-bottom: 16px;
}

.ventra-store-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ventra-store-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--ground);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    padding: 8px 16px 8px 14px;
    cursor: default;
    opacity: .7;
}

.ventra-store-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    color: var(--chalk);
}

.ventra-store-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.ventra-store-text small {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mist);
}

.ventra-store-text strong {
    font-size: 1rem;
    color: var(--chalk);
}

.ventra-store-soon {
    position: absolute;
    top: -9px;
    right: -8px;
    background: var(--grad);
    color: #05070c;
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 2px 8px;
    border-radius: 50px;
}

.ventra-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.ventra-stat-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-top: 3px solid var(--electric);
    border-radius: 16px;
    padding: 24px;
}

.ventra-stat-card.c-electric {
    border-top-color: var(--electric);
}

.ventra-stat-card.c-volt {
    border-top-color: var(--volt);
}

.ventra-stat-card.c-flare {
    border-top-color: var(--flare);
}

.ventra-stat-card h3 {
    font-family: var(--font-mono);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mist);
    margin-bottom: 12px;
}

.ventra-stat-card span {
    font-family: var(--font-mono);
    font-size: 1.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--electric);
}

.ventra-stat-card.c-volt span {
    color: var(--volt);
}

.ventra-stat-card.c-flare span {
    color: var(--flare);
}

/* Tabs */

.ventra-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.ventra-tab {
    background: none;
    border: none;
    color: var(--mist);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 500;
    padding: 12px 6px;
    cursor: pointer;
    position: relative;
    margin-right: 22px;
    transition: color .15s;
}

.ventra-tab:hover {
    color: var(--chalk);
}

.ventra-tab.is-active {
    color: var(--chalk);
}

.ventra-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--grad);
}

.ventra-tab-panel {
    display: none;
}

.ventra-tab-panel.is-active {
    display: block;
}

.ventra-empty-state {
    color: var(--mist);
    padding: 40px 0;
    text-align: center;
}

/* Ticket / Event cards */

.ventra-ticket-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/*
 * Every card of this kind is built the same way: an optional thumbnail,
 * a plain details <div>, then a right-aligned actions/badges <div> -
 * always last in the markup. `justify-content: space-between` used to
 * spread ALL the leftover row width evenly across every gap, including
 * the one between the thumbnail and its own details, which is why they
 * could end up looking unrelated on a wide card. A fixed `gap` keeps
 * the thumbnail and details close together regardless of row width,
 * and pushing just the final child with `margin-left: auto` is what
 * moves the actions group to the far right instead.
 */
.ventra-ticket-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .09);
    border-left: 3px solid var(--electric);
    border-radius: 14px;
    padding: 18px 22px;
    transition: background .15s, border-color .15s;
}

.ventra-ticket-card > :last-child {
    margin-left: auto;
}

.ventra-ticket-thumb {
    width: 114px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--panel-2);
}

.ventra-card-photo-controls {
    display: flex;
    gap: 10px;
    font-size: .78rem;
}

.ventra-ticket-card:hover {
    background: rgba(255, 255, 255, .055);
}

.ventra-ticket-card .ticket-event {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.01em;
}

.ventra-ticket-card .ticket-date {
    color: var(--electric);
    font-family: var(--font-mono);
    font-size: .82rem;
    margin-top: 5px;
}

.ventra-ticket-card .ticket-meta {
    color: var(--mist);
    font-size: .82rem;
    margin-top: 4px;
}

/* Zone-mapped event picker (seat-map ticketing, Phase 3) - renders
   inside the "Buy Tickets" modal itself, above the per-zone quantity
   rows, rather than as a separate preview on the storefront card. */
.ventra-zonemap-wrap {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}

.ventra-zonemap-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
}

.ventra-zonemap-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ventra-zonemap-shape {
    fill: rgba(35, 125, 248, .28);
    stroke: var(--electric);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
    transition: fill .15s, stroke-width .15s;
}

.ventra-zonemap-shape:hover {
    fill: rgba(35, 125, 248, .42);
}

.ventra-zonemap-shape.is-selected {
    fill: rgba(53, 242, 160, .38);
    stroke: var(--volt);
    stroke-width: 3;
}

.ventra-zonemap-shape.is-soldout {
    fill: rgba(197, 67, 42, .28);
    stroke: #c5432a;
    cursor: not-allowed;
}

.ventra-zonemap-shape.is-soldout:hover {
    fill: rgba(197, 67, 42, .28);
}

.ventra-zonemap-labels {
    position: absolute;
    inset: 0;
}

.ventra-zonemap-label {
    position: absolute;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
    pointer-events: auto;
    cursor: pointer;
    white-space: nowrap;
}

.ventra-zonemap-label.is-soldout {
    cursor: not-allowed;
    opacity: .75;
}

.ventra-zonemap-label strong {
    display: block;
    font-size: .8rem;
}

.ventra-zonemap-label span {
    display: block;
    font-size: .7rem;
    opacity: .9;
}

.ventra-badge {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 4px 12px;
    border-radius: 50px;
}

.ventra-badge.active {
    background: rgba(53, 242, 160, .12);
    color: var(--success);
}

.ventra-badge.expired {
    background: rgba(152, 161, 179, .14);
    color: var(--mist);
}

.ventra-badge.season {
    background: rgba(35, 125, 248, .12);
    color: var(--electric);
}

.ventra-badge.support-open {
    background: rgba(255, 84, 112, .12);
    color: var(--danger);
}

.ventra-badge.support-in-progress {
    background: rgba(35, 125, 248, .12);
    color: var(--electric);
}

.ventra-badge.support-resolved {
    background: rgba(53, 242, 160, .12);
    color: var(--success);
}

.ventra-badge.support-closed {
    background: rgba(152, 161, 179, .14);
    color: var(--mist);
}

.ventra-badge.age-restricted {
    background: rgba(255, 107, 74, .14);
    color: var(--flare);
}

.ventra-badge.priority {
    background: rgba(255, 107, 74, .14);
    color: var(--flare);
}

.ventra-badge.live {
    background: rgba(255, 84, 112, .14);
    color: var(--danger);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ventra-badge.live::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--danger);
    animation: ventra-live-pulse 1.6s ease-in-out infinite;
}

@keyframes ventra-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
    .ventra-badge.live::before {
        animation: none;
    }
}

/* Tables (admin / client sales) */

.ventra-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.ventra-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.ventra-table th,
.ventra-table td {
    text-align: left;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ventra-table th {
    color: var(--mist);
    font-weight: 500;
    text-transform: uppercase;
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .06em;
}

.ventra-table tr:last-child td {
    border-bottom: none;
}

/* Modal (add event / season ticket forms) */

.ventra-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.ventra-modal-overlay.is-open {
    display: flex;
}

.ventra-modal {
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 34px;
    position: relative;
    /* Fill colour as a custom property, not a plain `background` value -
       #ventra-checkout-modal overrides just this one variable inline
       (see client-site.js) to use the client's own branded colour
       without resetting the gradient-border layer below it. */
    --modal-fill: var(--panel);
    /* Gradient border painted directly onto the element's own border
       box (not a scrolling pseudo-element inside it - see the removed
       ::before below) so it stays pinned to the modal's edges no matter
       how far its own content is scrolled. */
    background:
        linear-gradient(var(--modal-fill), var(--modal-fill)) padding-box,
        var(--grad-soft) border-box;
}

.ventra-watch-modal {
    max-width: 860px;
}

.ventra-watch-player-container {
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.ventra-watch-player-container mux-player {
    width: 100%;
    height: 100%;
    --media-object-fit: contain;
}

.ventra-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.ventra-modal-header h2 {
    font-weight: 700;
    letter-spacing: -.02em;
}

.ventra-modal-close {
    background: none;
    border: none;
    color: var(--mist);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    transition: color .15s;
}

.ventra-modal-close:hover {
    color: var(--chalk);
}

/* Checkout modal */

.ventra-checkout-item {
    margin-bottom: 18px;
}

.ventra-checkout-item .ticket-event {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.ventra-checkout-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 14px;
}

.ventra-checkout-account {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
}

.ventra-checkout-account p {
    margin-bottom: 8px;
    font-size: .9rem;
}

.ventra-checkout-account-actions {
    display: flex;
    gap: 10px;
}

.ventra-checkout-account-actions .btn {
    width: auto;
}

.ventra-checkout-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}

.ventra-checkout-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.ventra-checkout-row-label {
    display: flex;
    flex-direction: column;
    font-size: .95rem;
}

.ventra-checkout-row-price {
    color: var(--mist);
    font-family: var(--font-mono);
    font-size: .82rem;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.ventra-checkout-qty {
    width: 64px;
    flex-shrink: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--panel-2);
    border: 1px solid var(--line-strong);
    color: var(--chalk);
    font-family: var(--font-mono);
    font-size: .95rem;
    text-align: center;
    outline: none;
    transition: .2s;
}

.ventra-checkout-qty:focus {
    border-color: var(--electric);
    background: rgba(255, 255, 255, .06);
}

.ventra-checkout-waitlist p {
    margin-bottom: 14px;
}

.ventra-checkout-promo {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.ventra-checkout-promo input {
    flex: 1;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--panel-2);
    border: 1px solid var(--line-strong);
    color: var(--chalk);
    font-size: .9rem;
    outline: none;
    transition: .2s;
}

.ventra-checkout-promo input:focus {
    border-color: var(--electric);
    background: rgba(255, 255, 255, .06);
}

.ventra-checkout-promo input:disabled {
    opacity: .6;
}

.ventra-checkout-totals {
    margin: 20px 0;
    padding-top: 14px;
    border-top: 1px dashed var(--line-strong);
}

.ventra-checkout-total-row {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: .9rem;
    color: var(--mist);
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}

.ventra-checkout-fee-row {
    color: var(--flare);
}

.ventra-checkout-total-row.ventra-checkout-discount-row {
    color: var(--success);
}

.ventra-checkout-total-row--grand {
    font-family: inherit;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--chalk);
    margin-bottom: 0;
}

.ventra-checkout-success p {
    margin-bottom: 12px;
}

.ventra-checkout-success .btn {
    width: auto;
}

/*
 * The checkout modal's background/text colour is set inline per-client
 * (matches the storefront's own body colour, light or dark) - so every
 * element inside it below uses `inherit`/opacity or neutral-gray tints
 * instead of the fixed dark-panel colours the rest of the site's modals
 * use, so it stays legible against either a light or dark client colour.
 */

#ventra-checkout-modal .ventra-modal {
    max-width: 720px;
}

#ventra-checkout-modal .ventra-modal-close {
    color: inherit;
    opacity: .6;
}

#ventra-checkout-modal .ventra-modal-close:hover {
    opacity: 1;
}

#ventra-checkout-modal .ventra-checkout-account {
    background: rgba(127, 127, 127, .12);
    border-color: rgba(127, 127, 127, .22);
}

#ventra-checkout-modal .ventra-checkout-row-price {
    color: inherit;
    opacity: .65;
}

#ventra-checkout-modal .ventra-checkout-qty {
    background: rgba(127, 127, 127, .12);
    border-color: rgba(127, 127, 127, .28);
    color: inherit;
}

#ventra-checkout-modal .ventra-checkout-qty:focus {
    border-color: currentColor;
    background: rgba(127, 127, 127, .18);
}

#ventra-checkout-modal .ventra-checkout-promo input {
    background: rgba(127, 127, 127, .12);
    border-color: rgba(127, 127, 127, .28);
    color: inherit;
}

#ventra-checkout-modal .ventra-checkout-promo input:focus {
    border-color: currentColor;
    background: rgba(127, 127, 127, .18);
}

#ventra-checkout-modal .ventra-form-group label {
    color: inherit;
    opacity: .65;
}

#ventra-checkout-modal .ventra-form-group textarea {
    background: rgba(127, 127, 127, .12);
    border-color: rgba(127, 127, 127, .28);
    color: inherit;
}

#ventra-checkout-modal .ventra-form-group textarea:focus {
    border-color: currentColor;
    background: rgba(127, 127, 127, .18);
}

#ventra-checkout-modal .ventra-form-group textarea::placeholder {
    color: inherit;
    opacity: .5;
}

#ventra-checkout-modal .ventra-checkout-totals {
    border-top-color: rgba(127, 127, 127, .3);
}

#ventra-checkout-modal .ventra-checkout-total-row {
    color: inherit;
    opacity: .7;
}

#ventra-checkout-modal .ventra-checkout-total-row--grand {
    color: inherit;
    opacity: 1;
}

#ventra-checkout-modal .ventra-checkout-total-row.ventra-checkout-discount-row {
    color: var(--success);
    opacity: 1;
}

#ventra-checkout-modal .ventra-checkout-fee-row {
    color: var(--flare);
    opacity: 1;
}

#ventra-checkout-modal .btn-outline {
    border-color: currentColor;
    color: inherit;
    opacity: .85;
}

#ventra-checkout-modal .btn-outline:hover {
    opacity: 1;
    background: rgba(127, 127, 127, .12);
}

#ventra-checkout-modal .ventra-link-button {
    color: inherit;
    opacity: .85;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--chalk);
}

.btn-outline:hover {
    border-color: var(--electric);
    background: rgba(35, 125, 248, .08);
}

.btn-sm {
    padding: 9px 18px;
    font-size: .85rem;
    border-radius: 8px;
}

.btn-danger {
    background: rgba(255, 84, 112, .12);
    color: var(--danger);
}

.ventra-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 24px;
}

.ventra-toolbar input,
.ventra-toolbar select,
.ventra-support-status-select {
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--panel-2);
    border: 1px solid var(--line-strong);
    color: var(--chalk);
    font-family: inherit;
    font-size: .9rem;
    outline: none;
}

.ventra-toolbar input:focus,
.ventra-toolbar select:focus,
.ventra-support-status-select:focus {
    border-color: var(--electric);
    background: rgba(255, 255, 255, .06);
}

/*
 * The closed <select> box picks up the dark styling above, but the
 * open options list is rendered natively by the browser/OS and
 * defaults to a white background regardless - style the <option>s
 * directly so the text doesn't end up white-on-white.
 */
.ventra-toolbar select option,
.ventra-support-status-select option {
    background-color: var(--panel);
    color: var(--chalk);
}

.ventra-support-status-select {
    width: 100%;
}

.ventra-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.ventra-checkbox-row input {
    width: auto;
}

.ventra-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ventra-radio-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--panel-2);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    cursor: pointer;
    font-size: .9rem;
}

.ventra-radio-option input {
    width: auto;
}

.ventra-radio-option:has(input:checked) {
    border-color: var(--electric);
    background: rgba(35, 125, 248, .1);
}

/* ---------- Streaming Setup (Mux Video, client dashboard) ---------- */

.ventra-streaming-card {
    background: var(--panel-2);
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 24px;
}

.ventra-streaming-value {
    font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
    font-size: .85rem;
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    padding: 10px 14px;
    word-break: break-all;
}

.ventra-streaming-key {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ventra-streaming-key .ventra-link-button {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ---------- Venue Maps (seat-map ticketing, staff/admin map builder) ---------- */

.ventra-vm-image-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    cursor: crosshair;
    user-select: none;
    margin-top: 10px;
}

.ventra-vm-image-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
    pointer-events: none;
}

/* Zones are arbitrary polygons, not rectangles - drawn as SVG shapes
   over the image (viewBox 0-100 matches the stored x/y percentages
   directly). The svg itself ignores pointer events so clicks on empty
   space reach the image-wrap's own click-to-place-a-point handler;
   only a saved shape opts back in so it stays independently clickable. */
.ventra-vm-zone-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ventra-vm-zone-shape {
    fill: rgba(35, 125, 248, .22);
    stroke: var(--electric);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
    pointer-events: auto;
    transition: fill .15s;
}

.ventra-vm-zone-shape:hover {
    fill: rgba(35, 125, 248, .38);
}

.ventra-vm-zone-pending {
    fill: rgba(53, 242, 160, .18);
    stroke: var(--volt);
    stroke-width: 2;
    stroke-dasharray: 6 4;
    vector-effect: non-scaling-stroke;
}

.ventra-vm-draw-line {
    fill: rgba(53, 242, 160, .12);
    stroke: var(--volt);
    stroke-width: 2;
    stroke-dasharray: 5 4;
    vector-effect: non-scaling-stroke;
}

.ventra-vm-draw-cursor-line {
    stroke: var(--volt);
    stroke-width: 1.5;
    stroke-dasharray: 3 3;
    vector-effect: non-scaling-stroke;
    opacity: .7;
}

.ventra-vm-draw-point {
    fill: var(--volt);
    stroke: #01071a;
    stroke-width: .5;
    vector-effect: non-scaling-stroke;
}

.ventra-vm-draw-start-hint {
    fill: none;
    stroke: var(--volt);
    stroke-width: 1;
    stroke-dasharray: 2 2;
    vector-effect: non-scaling-stroke;
    opacity: .6;
}

.ventra-vm-zone-labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ventra-vm-zone-label {
    position: absolute;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    text-align: center;
    padding: 4px;
    pointer-events: auto;
    cursor: pointer;
    white-space: nowrap;
}

.ventra-vm-draw-toolbar {
    margin-top: 14px;
}

.ventra-vm-draw-status {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--panel-2);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    font-size: .85rem;
    color: var(--chalk);
}

.ventra-vm-zone-form {
    margin-top: 20px;
    padding: 20px;
    background: var(--panel-2);
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    max-width: 420px;
}

.ventra-age-edit-row {
    margin-bottom: 18px;
}

.ventra-age-edit-row .ventra-checkbox-row {
    margin-bottom: 8px;
}

.ventra-edit-age-desc {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--panel-2);
    border: 1px solid var(--line-strong);
    color: var(--chalk);
    font-family: inherit;
    font-size: .85rem;
    resize: vertical;
}

.ventra-edit-age-desc:focus {
    outline: none;
    border-color: var(--electric);
    background: rgba(255, 255, 255, .06);
}

.ventra-age-hint {
    color: var(--mist);
    font-size: .78rem;
    margin-top: -6px;
    margin-bottom: 10px;
}

@media (max-width: 640px) {

    .ventra-dashboard {
        padding-top: 120px;
    }

    .ventra-user-dropdown {
        right: -10px;
    }

}

/* ---------- Client Storefront (subdomain homepage) ---------- */

/*
 * Every colour on the storefront comes from CSS variables that
 * client-site.js sets on #ventra-client-site-root from the club's own
 * Homepage settings (header / body / footer colours), so the stylesheet
 * itself never hard-codes a club colour:
 *
 *   --vs-accent / --vs-accent-text   buttons (the header colour + readable text)
 *   --vs-accent-on-body              outline buttons / accents drawn on the page colour
 *   --vs-accent-border               border of filled buttons (visible when header == body)
 *   --vs-body-bg / --vs-body-text    page colour + reactive text colour
 *   --vs-card-bg / -border / -shadow event rows
 *   --vs-header-bg / -menu-bg / -text  header at 50% opacity, solid mobile menu, nav text
 *   --vs-footer-bg / --vs-footer-text
 *   --vs-header-h                    measured header height (inner pages start below it)
 */

.ventra-client-site-body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    color: #fff;
}

/*
 * Root fills the viewport and the page area stretches, so a short page
 * still pushes the footer to the bottom. Its own background is the body
 * colour, which is also what the translucent fixed header blends with.
 */
#ventra-client-site-root {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--vs-body-bg, #01071a);
    color: var(--vs-body-text, #fff);
}

#ventra-client-site-root .ventra-client-body {
    flex: 1 0 auto;
}

.ventra-client-loading {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mist);
    background: var(--ground);
}

/* ---------- Header: club colour at 50%, floats over the hero ---------- */

.ventra-client-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--vs-header-bg, rgba(1, 7, 26, .5));
    color: var(--vs-header-text, #fff);
    text-shadow: var(--vs-header-text-shadow, none);
    transition: opacity .35s ease;
}

/* Scrolling DOWN fades the header away (client-site.js toggles this).
   Opacity only - a transform on the header would make it the containing
   block for the fixed mobile menu. */
.ventra-client-header.is-hidden {
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .ventra-client-header {
        transition: none;
    }
}

/*
 * The frosted-glass blur lives on a pseudo-element, NOT on the header
 * itself: backdrop-filter (like filter/transform) makes the element the
 * containing block for position:fixed descendants, which would shrink the
 * mobile flyout menu to the header's own height.
 */
.ventra-client-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.ventra-client-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.ventra-client-logo {
    display: block;
    color: inherit;
}

.ventra-client-logo img {
    height: 54px;
    display: block;
}

.ventra-client-logo-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: inherit;
}

/* nav + Follow sit together on the right */
.ventra-client-nav-collapse {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-left: auto;
}

.ventra-client-nav {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

.ventra-client-nav-link {
    position: relative;
    color: inherit;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .9;
    padding: 6px 0;
    transition: opacity .2s;
}

.ventra-client-nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: right .2s ease;
}

.ventra-client-nav-link:hover {
    opacity: 1;
}

.ventra-client-nav-link.is-active {
    opacity: 1;
}

.ventra-client-nav-link.is-active::after,
.ventra-client-nav-link:hover::after {
    right: 0;
}

/*
 * Deliberately its own small style rather than the shared .btn classes -
 * those carry Ventra's own design tokens, which would put Ventra's colours
 * inside a club's branded header. Colour follows the header's text colour.
 */
.ventra-client-follow-btn {
    background: transparent;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    color: inherit;
    padding: 8px 20px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-family: inherit;
    cursor: pointer;
    opacity: .9;
    transition: background .2s ease, opacity .2s ease;
}

.ventra-client-follow-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, .16);
}

.ventra-client-follow-btn.is-following {
    background: rgba(255, 255, 255, .22);
    opacity: 1;
}

.ventra-client-follow-btn:disabled {
    opacity: .6;
    cursor: default;
}

.ventra-client-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    flex: 0 0 auto;
    color: inherit;
}

.ventra-client-nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
}

.ventra-client-nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.ventra-client-nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.ventra-client-nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Hero: full width, slight black gradient from the bottom ---------- */

.ventra-client-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(78vh, 760px);
    overflow: hidden;
    color: #fff;
}

.ventra-client-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

/* no photo uploaded: the club's header colour stands in for it */
.ventra-client-hero-bg--plain {
    background: var(--vs-accent, #01071a);
}

.ventra-client-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .35) 32%, rgba(0, 0, 0, 0) 62%);
}

.ventra-client-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px 56px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
}

.ventra-client-hero-copy h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.05;
    margin: 0 0 10px;
    color: #fff;
}

.ventra-client-hero-copy p {
    margin: 0;
    max-width: 60ch;
    font-size: 1.15rem;
    opacity: .92;
    color: #fff;
}

/* ---------- Body ---------- */

.ventra-client-body {
    min-height: 40vh;
    background: var(--vs-body-bg, #01071a);
    color: var(--vs-body-text, #fff);
}

/* inner pages have no hero, so start below the fixed header */
.ventra-client-body--inner {
    padding-top: var(--vs-header-h, 94px);
}

.ventra-client-body-inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 64px 24px 80px;
}

.ventra-client-section {
    margin-top: 56px;
    scroll-margin-top: 110px;
}

.ventra-client-section:first-child {
    margin-top: 0;
}

.ventra-client-section h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 36px;
}

.ventra-client-about-text {
    white-space: pre-wrap;
    line-height: 1.7;
    max-width: 70ch;
    margin: 0 auto;
    opacity: .92;
}

/* ---------- Policy pages (Terms / Privacy / Accessibility) ---------- */

.ventra-client-policy {
    max-width: 820px;
    margin: 0 auto;
}

.ventra-client-policy h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 40px;
}

.ventra-client-policy-content {
    line-height: 1.75;
    font-size: 1rem;
}

.ventra-client-policy-content > * + * {
    margin-top: 1.1em;
}

.ventra-client-policy-content h2,
.ventra-client-policy-content h3,
.ventra-client-policy-content h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 2em;
}

.ventra-client-policy-content h2 {
    font-size: 1.35rem;
}

.ventra-client-policy-content h3 {
    font-size: 1.12rem;
}

.ventra-client-policy-content p,
.ventra-client-policy-content li {
    opacity: .92;
}

.ventra-client-policy-content ul,
.ventra-client-policy-content ol {
    padding-left: 1.4em;
}

.ventra-client-policy-content ul {
    list-style: disc;
}

.ventra-client-policy-content ol {
    list-style: decimal;
}

.ventra-client-policy-content li + li {
    margin-top: .4em;
}

.ventra-client-policy-content a {
    color: var(--vs-accent-on-body, inherit);
    text-decoration: underline;
}

.ventra-client-policy-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

.ventra-client-policy-content th,
.ventra-client-policy-content td {
    border: 1px solid var(--vs-card-border);
    padding: 8px 12px;
    text-align: left;
}

.ventra-client-body .ventra-empty-state {
    color: inherit;
    opacity: .65;
    text-align: center;
    padding: 28px 0;
}

/* ---------- Event rows (date block / details / action) ---------- */

.ventra-client-row-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ventra-client-row {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 22px 30px;
    background: var(--vs-card-bg);
    border: 1px solid var(--vs-card-border);
    border-radius: 4px;
    box-shadow: var(--vs-card-shadow);
    transition: box-shadow .18s ease, transform .18s ease;
}

.ventra-client-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px -18px rgba(0, 0, 0, .45);
}

.ventra-client-row-date {
    flex: 0 0 auto;
    min-width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    text-transform: none;
}

.ventra-client-row-month {
    font-family: 'Montserrat', sans-serif;
    font-size: .95rem;
    font-weight: 600;
    opacity: .75;
}

.ventra-client-row-day {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.7rem;
    font-weight: 800;
    margin-top: 3px;
}

.ventra-client-row .ventra-ticket-thumb {
    width: 96px;
    height: 56px;
    border-radius: 4px;
    object-fit: cover;
    flex: 0 0 auto;
}

.ventra-client-row-main {
    flex: 1 1 auto;
    min-width: 0;
}

.ventra-client-row-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.005em;
}

.ventra-client-row-meta {
    margin-top: 4px;
    font-size: .95rem;
    opacity: .78;
}

.ventra-client-row-sub {
    margin-top: 4px;
    font-size: .85rem;
    opacity: .65;
}

.ventra-client-row-sub a {
    color: inherit;
    text-decoration: underline;
}

.ventra-client-row-action {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ---------- Event cards (Tickets / Live Stream / Season Pass pages) ---------- */

.ventra-client-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
}

.ventra-client-card-grid > .ventra-empty-state {
    grid-column: 1 / -1;
}

.ventra-client-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--vs-card-bg);
    border: 1px solid var(--vs-card-border);
    border-radius: 6px;
    box-shadow: var(--vs-card-shadow);
    transition: box-shadow .18s ease, transform .18s ease;
}

.ventra-client-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -24px rgba(0, 0, 0, .55);
}

/* photo (or a header-colour band when there isn't one) with the date on it */
.ventra-client-card-media {
    position: relative;
    height: 180px;
    background: var(--vs-accent, #01071a);
}

.ventra-client-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ventra-client-card-media--plain {
    height: 88px;
}

.ventra-client-card-chip {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 54px;
    padding: 8px 10px;
    line-height: 1;
    border-radius: 4px;
    background: #fff;
    color: #0b1230;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.ventra-client-card-month {
    font-family: 'Montserrat', sans-serif;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.ventra-client-card-day {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.45rem;
    font-weight: 800;
    margin-top: 3px;
}

.ventra-client-card-body {
    flex: 1 1 auto;
    padding: 20px 22px 6px;
}

.ventra-client-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 22px 22px;
}

.ventra-client-card-footer .ventra-client-btn {
    margin-left: auto;
}

/* ---------- Buttons: the club's header colour ---------- */

.ventra-client-btn {
    display: inline-block;
    padding: 14px 26px;
    border-radius: 4px;
    background: var(--vs-accent, #01071a);
    color: var(--vs-accent-text, #fff);
    border: 1px solid var(--vs-accent-border, transparent);
    font-family: inherit;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: filter .15s ease, transform .15s ease;
}

.ventra-client-btn:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

/* "Sold out" - visibly unavailable, no hover lift, no pointer. */
.ventra-client-btn:disabled,
.ventra-client-btn:disabled:hover {
    background: transparent;
    color: var(--vs-body-text, #fff);
    border: 1px solid var(--vs-card-border, rgba(255, 255, 255, .25));
    opacity: .55;
    cursor: not-allowed;
    filter: none;
    transform: none;
}

.ventra-client-view-all {
    text-align: center;
    margin-top: 44px;
}

.ventra-client-btn-outline {
    display: inline-block;
    padding: 14px 30px;
    border-radius: 4px;
    border: 1.5px solid var(--vs-accent-on-body, currentColor);
    color: var(--vs-accent-on-body, inherit);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: background .15s ease, color .15s ease;
}

.ventra-client-btn-outline:hover {
    background: var(--vs-accent-on-body, currentColor);
    color: var(--vs-body-bg, #fff);
}

/* ---------- Footer: Powered by (left), links + social (right) ---------- */

.ventra-client-footer {
    background: var(--vs-footer-bg, #000814);
    color: var(--vs-footer-text, #fff);
}

.ventra-client-footer-inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 34px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}

.ventra-client-powered-by {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .8rem;
    opacity: .85;
    color: inherit;
    text-decoration: none;
    transition: opacity .15s ease;
}

.ventra-client-powered-by:hover,
.ventra-client-powered-by:focus-visible {
    opacity: 1;
}

.ventra-client-powered-by img {
    height: 24px;
    display: block;
}

.ventra-client-powered-by-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.ventra-client-premium-tag {
    margin-top: 4px;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .6;
}

.ventra-client-footer-right {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ventra-client-footer-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

.ventra-client-footer-links a {
    color: inherit;
    font-size: .85rem;
    opacity: .85;
    padding: 0 16px;
    border-left: 1px solid currentColor;
    border-left-color: color-mix(in srgb, currentColor 35%, transparent);
    line-height: 1.1;
}

.ventra-client-footer-links a:first-child {
    border-left: none;
}

.ventra-client-footer-links a:last-child {
    padding-right: 0;
}

.ventra-client-footer-links a:hover {
    opacity: 1;
    text-decoration: underline;
}

.ventra-client-social {
    display: flex;
    gap: 10px;
}

.ventra-client-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    color: inherit;
    opacity: .85;
    transition: opacity .15s ease, background .15s ease, color .15s ease;
}

.ventra-client-social-link:hover {
    opacity: 1;
    background: var(--vs-footer-text, #fff);
    color: var(--vs-footer-bg, #000);
}

/* ---------- Premium extras: banner, countdown, urgency badges, FAQs ---------- */

/* Announcement banner: sits at the top of the fixed header, solid so the
   message is always readable regardless of the header's 50% opacity. */
.ventra-client-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 9px 44px;
    text-align: center;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.35;
    text-shadow: none;
}

.ventra-client-banner--info {
    background: var(--vs-accent, #01071a);
    color: var(--vs-accent-text, #fff);
    border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.ventra-client-banner--alert {
    background: #f5b301;
    color: #1a1300;
}

.ventra-client-banner a {
    color: inherit;
    text-decoration: underline;
}

.ventra-client-banner-close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    opacity: .8;
}

.ventra-client-banner-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, .15);
}

/* Countdown on the hero */
.ventra-client-countdown {
    margin-top: 22px;
}

.ventra-client-countdown-label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .85;
    margin-bottom: 8px;
}

.ventra-client-countdown-units {
    display: flex;
    gap: 10px;
}

.ventra-client-countdown-units span {
    min-width: 64px;
    padding: 10px 8px;
    text-align: center;
    border-radius: 4px;
    background: rgba(0, 0, 0, .42);
    border: 1px solid rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.ventra-client-countdown-units b {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.ventra-client-countdown-units i {
    display: block;
    margin-top: 5px;
    font-style: normal;
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}

/* Urgency badges */
.ventra-client-urgency {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}

.ventra-client-urgency--low {
    background: #fde7e9;
    color: #a1121f;
}

.ventra-client-urgency--fast {
    background: #fff1d6;
    color: #8a5300;
}

.ventra-client-urgency--soldout {
    background: #e7e9ee;
    color: #3b4252;
}

/* FAQs page: native <details>, so it works without scripting and is
   keyboard / screen-reader friendly out of the box. */
.ventra-client-faq {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ventra-client-faq-item {
    background: var(--vs-card-bg);
    border: 1px solid var(--vs-card-border);
    border-radius: 6px;
    box-shadow: var(--vs-card-shadow);
}

.ventra-client-faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 52px 18px 22px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.02rem;
    position: relative;
}

.ventra-client-faq-item summary::-webkit-details-marker {
    display: none;
}

.ventra-client-faq-item summary::after {
    content: "+";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--vs-accent-on-body, currentColor);
}

.ventra-client-faq-item[open] summary::after {
    content: "\2212";
}

.ventra-client-faq-answer {
    padding: 0 22px 20px;
    line-height: 1.7;
    white-space: pre-wrap;
    opacity: .9;
}

/* Information dropdown (the club's own pages) */
.ventra-client-nav-group {
    position: relative;
    display: flex;
    align-items: center;
}

.ventra-client-nav-group > .ventra-client-nav-link::before {
    content: "";
}

.ventra-client-nav-group > .ventra-client-nav-link {
    padding-right: 16px;
}

.ventra-client-nav-group > .ventra-client-nav-link::after {
    /* the shared underline pseudo-element is positioned with `right`; give
       the dropdown trigger a caret on the other pseudo-element instead */
    bottom: 0;
}

.ventra-client-nav-group::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -5px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .75;
    pointer-events: none;
}

.ventra-client-nav-sub {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 220px;
    padding: 8px 0;
    border-radius: 6px;
    background: var(--vs-header-menu-bg, #01071a);
    color: var(--vs-header-menu-text, #fff);
    text-shadow: none;
    box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .6);
    z-index: 5;
}

.ventra-client-nav-sub a {
    display: block;
    padding: 10px 18px;
    color: inherit;
    font-size: .88rem;
    font-weight: 600;
    opacity: .9;
}

.ventra-client-nav-sub a:hover {
    opacity: 1;
    background: rgba(255, 255, 255, .12);
}

/* open on hover or keyboard focus; a short invisible bridge stops the menu
   closing while the pointer crosses the gap */
.ventra-client-nav-group:hover .ventra-client-nav-sub,
.ventra-client-nav-group:focus-within .ventra-client-nav-sub {
    display: block;
}

.ventra-client-nav-group:hover::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
}

/* Information index + page */
.ventra-client-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.ventra-client-info-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 24px;
    border-radius: 6px;
    background: var(--vs-card-bg);
    border: 1px solid var(--vs-card-border);
    box-shadow: var(--vs-card-shadow);
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
}

.ventra-client-info-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -24px rgba(0, 0, 0, .55);
}

.ventra-client-info-card-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
}

.ventra-client-info-card-text {
    font-size: .9rem;
    opacity: .7;
    line-height: 1.5;
}

.ventra-client-back {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--vs-accent-on-body, inherit);
    font-size: .88rem;
    font-weight: 600;
}

/* Sponsor strip, above the footer */
.ventra-client-sponsors {
    background: var(--vs-body-bg, #01071a);
    color: var(--vs-body-text, #fff);
    border-top: 1px solid var(--vs-card-border);
}

.ventra-client-sponsors-inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 36px 24px 40px;
    text-align: center;
}

.ventra-client-sponsors-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .6;
    margin-bottom: 20px;
}

.ventra-client-sponsors-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px 22px;
}

/* logos are almost always drawn for a white background, so each sits on a
   small white tile - readable whatever the club's page colour is */
.ventra-client-sponsor {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 76px;
    padding: 10px 16px;
    border-radius: 6px;
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease;
}

.ventra-client-sponsor-name {
    color: #0b1230;
    font-family: 'Montserrat', sans-serif;
    font-size: .85rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.25;
}

a.ventra-client-sponsor:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5);
}

.ventra-client-sponsor img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* ---------- Mobile ---------- */

@media (max-width: 900px) {

    .ventra-client-nav-toggle {
        display: flex;
    }

    /* the dropdown becomes a plain indented list inside the solid menu */
    .ventra-client-nav-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .ventra-client-nav-group::after,
    .ventra-client-nav-group:hover::before {
        display: none;
    }

    .ventra-client-nav-sub {
        display: flex;
        flex-direction: column;
        position: static;
        min-width: 0;
        padding: 0 0 0 14px;
        background: transparent;
        box-shadow: none;
        border-left: 2px solid rgba(255, 255, 255, .25);
    }

    .ventra-client-nav-sub a {
        padding: 8px 12px;
    }

    /*
     * The nav collapses into a flyout beneath the (fixed) header. `top` is
     * set inline by setupMobileNav() from the real rendered header height.
     * Fully solid - the 50% header colour would let the page show through
     * the menu text.
     */
    .ventra-client-nav-collapse {
        display: none;
        position: fixed;
        top: 90px;
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
        margin-left: 0;
        padding: 28px 24px 40px;
        overflow-y: auto;
        background: var(--vs-header-menu-bg, #01071a);
        color: var(--vs-header-menu-text, #fff);
        text-shadow: none;
    }

    .ventra-client-nav-collapse.is-open {
        display: flex;
    }

    .ventra-client-nav {
        flex-direction: column;
        gap: 24px;
    }

    .ventra-client-nav-link {
        font-size: 1rem;
    }

    .ventra-client-follow-btn {
        align-self: flex-start;
    }

    .ventra-client-hero {
        min-height: 64vh;
    }

    .ventra-client-hero-inner {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 36px;
    }

    .ventra-client-body-inner {
        padding: 44px 16px 56px;
    }

    .ventra-client-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .ventra-client-footer-right {
        justify-content: flex-start;
    }

}

@media (max-width: 640px) {

    .ventra-client-row {
        flex-wrap: wrap;
        padding: 18px 18px;
        gap: 14px 16px;
    }

    .ventra-client-row-main {
        flex: 1 1 calc(100% - 140px);
    }

    .ventra-client-row-action {
        flex: 1 1 100%;
        justify-content: space-between;
    }

    .ventra-client-row-action .ventra-client-btn {
        margin-left: auto;
    }

    .ventra-client-row .ventra-ticket-thumb {
        display: none;
    }

}