/**
 * Ticketa Theme — assets/css/components.css
 *
 * RESPONSIBILITY:
 *   Shared, reusable UI components used across multiple pages.
 *   Each component block is self-contained and follows BEM naming.
 *
 * COMPONENTS IN THIS FILE:
 *   1.  Buttons          (.btn)
 *   2.  Event card       (.event-card)
 *   3.  Hotel card       (.hotel-card)
 *   4.  Add-on card      (.addon-card)
 *   5.  Form fields      (.form-field)
 *   6.  Badges           (.badge)
 *   7.  Geometric bg     (.geo-bg)
 *   8.  Section headings (.section-heading)
 *   9.  Price badge      (.price-badge)
 *  10.  Loading spinner  (.spinner)
 *
 * @package Ticketa
 * @since   1.0.0
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

/**
 * Base button — extend with modifier classes
 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    -webkit-user-select: none;
    user-select: none;
    transition:
        background      var(--transition-base),
        color           var(--transition-base),
        border-color    var(--transition-base),
        box-shadow      var(--transition-base),
        transform       var(--transition-fast),
        opacity         var(--transition-fast);
}

.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Disabled state — applies to both button[disabled] and aria-disabled */
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.38;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}

/* — Primary: orange fill ————————————————————————————————————————————————— */
.btn--primary {
    background: var(--ticketa-orange);
    color: var(--ticketa-white);
    border-color: var(--ticketa-orange);
}
.btn--primary:hover {
    background: var(--ticketa-orange-hover);
    border-color: var(--ticketa-orange-hover);
    box-shadow: var(--shadow-glow);
    color: var(--ticketa-white);
}

/* — Secondary: outlined white ——————————————————————————————————————————— */
.btn--secondary {
    background: transparent;
    color: var(--ticketa-white);
    border-color: var(--ticketa-border-strong);
}
.btn--secondary:hover {
    border-color: var(--ticketa-orange);
    color: var(--ticketa-orange);
}

/* — Ghost: semi-transparent fill ——————————————————————————————————————— */
.btn--ghost {
    background: rgba(255, 255, 255, 0.07);
    color: var(--ticketa-white);
    border-color: var(--ticketa-border);
}
.btn--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--ticketa-border-strong);
}

/* — Dark on white (wizard sidebar CTA) ————————————————————————————————— */
.btn--dark {
    background: #111;
    color: var(--ticketa-white);
    border-color: #111;
}
.btn--dark:hover {
    background: #222;
}

/* — Wizard CTA: full-width pill, used in sidebar ——————————————————————— */
.btn--wizard-cta {
    width: 100%;
    padding: 1rem 2rem;
    font-size: var(--text-lg);
    border-radius: var(--radius-pill);
    background: #111;
    color: var(--ticketa-white);
    border-color: #111;
    justify-content: center;
}
.btn--wizard-cta:hover:not(:disabled):not([aria-disabled="true"]) {
    background: #000;
}

/* — Size variants ——————————————————————————————————————————————————————— */
.btn--sm { padding: 0.5rem 1.25rem; font-size: var(--text-sm); }
.btn--lg { padding: 1rem 2.5rem;    font-size: var(--text-lg); }

/* ═══════════════════════════════════════════════════════════════════════════
   2. EVENT CARD
   ═══════════════════════════════════════════════════════════════════════════ */

/**
 * Dark card with a full-bleed poster image and white footer strip.
 * Used in the WHAT'S ON events archive grid.
 */
.event-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--ticketa-bg-card);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    /* GPU-accelerated card lift on hover */
    will-change: transform;
}

.event-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}

/* Sold-out state: desaturated poster */
.event-card.sold_out .event-card__poster img {
    filter: grayscale(60%) brightness(0.7);
}

/* — Poster image ————————————————————————————————————————————————————————— */
.event-card__poster {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    margin: 0;
}

.event-card__poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}

.event-card:hover .event-card__poster img {
    transform: scale(1.04);
}

/* — White footer strip —————————————————————————————————————————————————— */
.event-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    background: var(--ticketa-white);
    color: #111;
    border-top: 1px solid #eee;
}

/* Arrow icon */
.event-card__arrow {
    font-size: var(--text-base);
    color: #111;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}
.event-card:hover .event-card__arrow {
    transform: translateX(-4px);
}

/* CTA label in footer */
.event-card__cta-label {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--ticketa-orange);
    letter-spacing: 0.01em;
}

/* — Gradient overlay on poster —————————————————————————————————————————— */
/* Makes badge + dates readable over bright photos */
.event-card__poster-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 40%,
        rgba(0,0,0,0.75) 100%
    );
    pointer-events: none;
}

/* — Status badge + dates over image ————————————————————————————————————— */
.event-card__poster-meta {
    position: absolute;
    bottom: var(--space-4);
    right: var(--space-4);
    left: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    z-index: 1;
}

/* Badge group — keeps status + promo together so date sits opposite */
.event-card__badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    min-width: 0;
}

.event-card__dates-overlay {
    font-size: var(--text-xs);
    font-weight: 600;
    color: rgba(255,255,255,0.90);
    background: rgba(0,0,0,0.35);
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

/* — Card body (title + tagline below image) —————————————————————————————— */
.event-card__body {
    background: var(--ticketa-white);
    padding: var(--space-4) var(--space-5) var(--space-3);
    color: #111;
}

.event-card__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.25;
    color: #111;
    margin: 0 0 var(--space-2);
    /* Show full title — no truncation */
    word-break: break-word;
}

.event-card__tagline {
    font-size: var(--text-sm);
    color: #555;
    line-height: 1.5;
    margin: 0;
    /* Show full tagline — no truncation */
    word-break: break-word;
}

/* — Placeholder when no poster ─────────────────────────────────────────── */
.event-card__poster-placeholder {
    width: 100%;
    height: 100%;
    background: var(--ticketa-bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

/* — Full-card clickable link ————————————————————————————————————————————— */
.event-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}
/* Stretch the link to cover the whole card */
.event-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: var(--z-card);
}
/* Blocked card (sold-out, started, or past) — non-interactive */
.event-card__link--blocked {
    cursor: not-allowed;
}
.event-card__link--blocked::after {
    pointer-events: auto; /* still blocks clicks but no navigation */
}
.event-card:has(.event-card__link--blocked) .event-card__poster img {
    filter: grayscale(0.45) brightness(0.85);
    transition: filter .25s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. HOTEL CARD
   ═══════════════════════════════════════════════════════════════════════════ */

/**
 * Used on single event pages to show available hotel packages.
 */
.hotel-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--ticketa-bg-card);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    display: flex;
    flex-direction: column;
}

.hotel-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65);
}

/* Thumbnail */
.hotel-card__thumb {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
.hotel-card__thumb img,
.hotel-card__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}
.hotel-card:hover .hotel-card__thumb img,
.hotel-card:hover .hotel-card__thumb-img { transform: scale(1.04); }

.hotel-card__thumb-placeholder {
    width: 100%;
    height: 100%;
    background: var(--ticketa-bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

/* Price badge floating on thumbnail */
.hotel-card__price-badge {
    position: absolute;
    bottom: var(--space-3);
    right: var(--space-3);
    background: var(--ticketa-orange);
    color: var(--ticketa-white);
    font-size: var(--text-xs);
    font-weight: 800;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    direction: rtl;
}

/* Body */
.hotel-card__body {
    padding: var(--space-5) var(--space-5) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
}

.hotel-card__name {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--ticketa-white);
    margin: 0;
}

.hotel-card__description {
    font-size: var(--text-sm);
    color: var(--ticketa-grey-muted);
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hotel-card__rooms-summary {
    font-size: var(--text-sm);
    color: var(--ticketa-off-white);
    margin: 0;
}

/* Board basis tags */
.hotel-card__boards { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hotel-card__board-tag {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ticketa-grey-muted);
    border: 1px solid var(--ticketa-border);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

/* Amenities */
.hotel-card__amenities { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.hotel-card__amenity { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--ticketa-off-white); }
.hotel-card__amenity-icon { color: var(--ticketa-orange); flex-shrink: 0; }
.hotel-card__amenity--more { color: var(--ticketa-grey-muted); font-size: var(--text-xs); }

/* Footer */
.hotel-card__footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--ticketa-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: auto;
}
.hotel-card__price { display: flex; flex-direction: column; gap: 2px; }
.hotel-card__price-from { font-size: var(--text-xs); color: var(--ticketa-grey-muted); }
.hotel-card__price-amount { font-size: var(--text-xl); font-weight: 800; color: var(--ticketa-orange); direction: ltr; white-space: nowrap; }

/* Legacy */
.hotel-card__price-label { font-size: var(--text-sm); color: var(--ticketa-grey-muted); }
.hotel-card__cta { margin-top: auto; padding-top: var(--space-4); }
.hotel-card__btn { width: 100%; text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   4. ADD-ON CARD (Step 2 — Upgrades)
   ═══════════════════════════════════════════════════════════════════════════ */

.addon-card {
    position: relative;
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    color: var(--ticketa-white);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base);
    overflow: hidden;
}

.addon-card:hover {
    transform: translateY(-3px);
}

/* Gold variant — VIP style */
.addon-card--gold {
    background: var(--ticketa-gold-bg);
}
.addon-card--gold::before {
    /* Subtle shine overlay */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%);
    pointer-events: none;
}

/* Silver variant */
.addon-card--silver {
    background: linear-gradient(135deg, #a0a0a0 0%, #606060 60%, #404040 100%);
}

/* Default variant */
.addon-card--default {
    background: var(--ticketa-bg-surface);
    border: 1px solid var(--ticketa-border-strong);
}

/* Icon */
.addon-card__icon {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: var(--space-4);
    display: block;
}

/* Title */
.addon-card__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--space-3);
}

/* Description */
.addon-card__description {
    font-size: var(--text-sm);
    opacity: 0.85;
    margin-bottom: var(--space-5);
    line-height: 1.5;
}

/* Bullet checklist */
.addon-card__bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.addon-card__bullets li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.addon-card__bullets li::before {
    content: '\2713';
    font-weight: 700;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.9);
}

/* Price at bottom */
.addon-card__price {
    font-size: var(--text-3xl);
    font-weight: 900;
    direction: ltr;
    margin-bottom: var(--space-5);
}

/* Select / deselect button */
.addon-card__select-btn {
    width: 100%;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.18);
    border: 2px solid rgba(255, 255, 255, 0.45);
    color: var(--ticketa-white);
    font-weight: 700;
    font-size: var(--text-base);
    cursor: pointer;
    transition: background var(--transition-base), border-color var(--transition-base);
    font-family: var(--font-body);
}

.addon-card__select-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.7);
}

/* Selected state */
.addon-card__select-btn.is-selected {
    background: rgba(255, 255, 255, 0.9);
    color: #111;
    border-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. FORM FIELDS
   ═══════════════════════════════════════════════════════════════════════════ */

/**
 * .form-field — wrapper for label + input pairs.
 * Used in wizard Step 3 and contact page.
 */
.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-field__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ticketa-grey-muted);
    text-align: start;
}

/* Required star */
.form-field__label .required {
    color: var(--ticketa-orange);
    margin-inline-start: 2px;
}

/* Input / textarea / select base */
.form-field__input,
.form-field__select,
.form-field__textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--ticketa-bg-surface);
    border: 1px solid var(--ticketa-border-strong);
    border-radius: var(--radius-md);
    color: var(--ticketa-white);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.4;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    appearance: none;
    -webkit-appearance: none;
    direction: rtl;
}

.form-field__input:focus,
.form-field__select:focus,
.form-field__textarea:focus {
    border-color: var(--ticketa-orange);
    box-shadow: 0 0 0 3px var(--ticketa-orange-dim);
    outline: none;
}

/* Placeholder */
.form-field__input::placeholder,
.form-field__textarea::placeholder {
    color: var(--ticketa-grey-mid);
    opacity: 1;
}

/* Select arrow (RTL: arrow on left side) */
.form-field__select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a7a7a' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 1rem center; /* RTL: arrow on left */
    padding-left: 2.5rem;
    cursor: pointer;
}

/* Error state */
.form-field--error .form-field__input,
.form-field--error .form-field__select {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);
}

.form-field__error-msg {
    font-size: var(--text-xs);
    color: #e74c3c;
    margin-top: var(--space-1);
}
/* ── form-field valid state + ID badge ──────────────────────────────────── */

.form-field--valid .form-field__input {
    border-color: #27ae60;
    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.12);
}

.form-field__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.form-field__input-wrap .form-field__input {
    flex: 1;
    padding-left: 70px; /* room for badge */
}

.form-field__valid-badge {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
    pointer-events: none;
}

.form-field__valid-badge--ok {
    background: #e8f8ef;
    color: #27ae60;
}

.form-field__valid-badge--err {
    background: #fdecea;
    color: #e74c3c;
}

.form-field__valid-badge .fa-check,
.form-field__valid-badge .fa-xmark {
    font-size: 10px;
}

/* Pay button — greyed out when disabled */
.step3-pay-btn:disabled:not([data-submitting]) {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. BADGES
   ═══════════════════════════════════════════════════════════════════════════ */

.badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge--upcoming { background: rgba(232, 119, 34, 0.15); color: var(--ticketa-orange); }
.badge--sold-out { background: rgba(231, 76, 60, 0.15);  color: #e74c3c; }
.badge--past     { background: rgba(122, 122, 122, 0.15); color: var(--ticketa-grey-muted); }
.badge--active   { background: rgba(0, 160, 210, 0.15);  color: #00c8f0; }
.badge--started  { background: rgba(186, 56, 56, 0.18);  color: #ba3838; }

/* ── Event status badge (overlay on poster) ───────────────────────────────
 * Designed for Hebrew labels: no uppercase, no Latin condensed font.
 * Adds a colored dot indicator and a subtle backdrop blur for readability
 * over varied poster imagery. */
/* ── Shared layout for ALL event card overlay badges ──────────────────────
 * Both .event-status-badge AND .event-promo-badge get the same inline-flex
 * row layout with nowrap. Without these on .event-promo-badge, the promo
 * label "מקומות אחרונים" wrapped onto two lines on narrow cards. */
.event-status-badge,
.event-promo-badge {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    white-space: nowrap !important;
    width: auto !important;
    max-width: 100%;
    flex-shrink: 0;
}

.event-status-badge {
    gap: 6px;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid currentColor;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.event-status-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 2px rgba(255,255,255,.15);
    flex-shrink: 0;
}
/* Per-state colors override the shared .badge--* (which use weak tints)
 * with stronger overlay-friendly opacity. */
.event-status-badge.badge--upcoming { background: rgba(232,119,34,.92);  color: #fff; border-color: rgba(255,255,255,.25); }
.event-status-badge.badge--upcoming::before { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.3); }
.event-status-badge.badge--active   { background: rgba(46,204,113,.92);  color: #fff; border-color: rgba(255,255,255,.25); }
.event-status-badge.badge--active::before   { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.3); animation: ticketa-pulse 2s ease-in-out infinite; }
.event-status-badge.badge--sold-out { background: rgba(231,76,60,.92);   color: #fff; border-color: rgba(255,255,255,.25); }
.event-status-badge.badge--sold-out::before { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.3); }
.event-status-badge.badge--started  { background: rgba(186,56,56,.92);   color: #fff; border-color: rgba(255,255,255,.25); }
.event-status-badge.badge--started::before  { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.3); animation: ticketa-pulse 1.6s ease-in-out infinite; }
.event-status-badge.badge--past     { background: rgba(60,60,60,.85);    color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.18); }
.event-status-badge.badge--past::before     { background: rgba(255,255,255,.55); box-shadow: 0 0 0 2px rgba(255,255,255,.18); }

/* Promo badge — visual styling only; layout (inline-flex, nowrap) is set
 * by the shared `.event-status-badge, .event-promo-badge` rule above.
 * Spacing between badges is handled by `.event-card__badges` flex gap. */
.event-promo-badge {
    padding: 5px 12px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
}
.promo--last-spots { background: rgba(231, 76, 60, .18);  color: #ff6b6b; border-color: rgba(231, 76, 60, .35); }
.promo--early-bird { background: rgba(46, 204, 113, .18); color: #5edc92; border-color: rgba(46, 204, 113, .35); }
.promo--special    { background: rgba(155, 89, 182, .20); color: #c49aef; border-color: rgba(155, 89, 182, .4); }
.promo--sale       { background: rgba(232, 119, 34, .22); color: #ffb27a; border-color: rgba(232, 119, 34, .5); }

/* Hotel card promo badge (top-right corner of hotel image) */
.whs__card-promo {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.4;
    border: 1px solid transparent;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
.whs__card-promo.promo--last-spots { background: rgba(231, 76, 60, .92);  color: #fff; border-color: rgba(231, 76, 60, 1); }
.whs__card-promo.promo--early-bird { background: rgba(46, 204, 113, .92); color: #fff; border-color: rgba(46, 204, 113, 1); }
.whs__card-promo.promo--special    { background: rgba(155, 89, 182, .92); color: #fff; border-color: rgba(155, 89, 182, 1); }
.whs__card-promo.promo--sale       { background: rgba(232, 119, 34, .95); color: #fff; border-color: rgba(232, 119, 34, 1); }

/* ═══════════════════════════════════════════════════════════════════════════
   7. GEOMETRIC BACKGROUND PATTERN
   ═══════════════════════════════════════════════════════════════════════════ */

/**
 * Subtle SVG grid / diamond pattern overlay.
 * Applied to the events archive and hero sections for visual texture.
 */
.geo-bg {
    position: relative;
}

.geo-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        /* Diagonal lines */
        repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.015) 0px,
            rgba(255, 255, 255, 0.015) 1px,
            transparent 1px,
            transparent 40px
        ),
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.015) 0px,
            rgba(255, 255, 255, 0.015) 1px,
            transparent 1px,
            transparent 40px
        );
    pointer-events: none;
    z-index: 0;
}

.geo-bg > * {
    position: relative;
    z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. SECTION HEADINGS
   ═══════════════════════════════════════════════════════════════════════════ */

/**
 * Centred section heading block used at the top of archive pages.
 */
.section-heading {
    text-align: center;
    padding: var(--space-16) 0 var(--space-10);
}

.section-heading__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--ticketa-white);
    direction: rtl;
    line-height: 1.2;
    margin-bottom: var(--space-8);
    text-align: center;
}
/* Legacy class — restores the Latin condensed display style for any
 * remaining English-only headings (e.g. legacy templates). */
.section-heading__title.en-heading {
    font-family: var(--font-en-head);
    font-size: var(--text-hero);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    direction: ltr;
    line-height: 0.95;
}

.section-heading__subtitle {
    font-size: var(--text-lg);
    color: var(--ticketa-grey-muted);
    font-family: var(--font-body);
    font-weight: 400;
    max-width: 560px;
    margin-inline: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. PRICE BADGE
   ═══════════════════════════════════════════════════════════════════════════ */

/**
 * Orange pill showing the dynamic room price in wizard Step 1.
 */
.price-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 2rem;
    border-radius: var(--radius-pill);
    background: var(--ticketa-orange);
    color: var(--ticketa-white);
    font-weight: 700;
    font-size: var(--text-lg);
    direction: ltr;
    box-shadow: var(--shadow-glow);
    transition: background var(--transition-fast);
    min-width: 180px;
}

.price-badge--loading {
    background: var(--ticketa-grey-mid);
    box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. LOADING SPINNER
   ═══════════════════════════════════════════════════════════════════════════ */

.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--ticketa-border-strong);
    border-top-color: var(--ticketa-orange);
    border-radius: 50%;
    animation: ticketa-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes ticketa-spin {
    to { transform: rotate(360deg); }
}

/* ─── Viewer count badge (social proof) ────────────────────────────────────── */
.ticketa-viewers {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,.85);
    font-family: var(--font-body);
    z-index: 5;
    pointer-events: none;
    animation: ticketa-fade-in .4s ease;
}

.ticketa-viewers i {
    font-size: 10px;
    color: #4CAF50;
}

@keyframes ticketa-fade-in {
    from { opacity: 0; transform: scale(.85); }
    to   { opacity: 1; transform: scale(1); }
}


/* ═══════════════════════════════════════════════════════════════
   SOCIAL PROOF — TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════ */
/* Booking toasts — bottom-left */
#ticketa-toast-container-booking {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 99999;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    width: 320px;
    pointer-events: none;
}
/* Session toast — top-left, below sticky header */
#ticketa-toast-container-session {
    position: fixed;
    top: calc(var(--header-height, 72px) + 12px);
    left: 24px;
    z-index: 99990;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 340px;
    pointer-events: none;
}

.ticketa-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(18,18,18,.97);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    padding: 13px 14px 13px 36px; /* leave room for close button */
    box-shadow: 0 8px 32px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.04);
    direction: rtl;
    pointer-events: all;
    opacity: 0;
    /* Slide in from off-screen left (the side they're anchored to) */
    transform: translateX(-110%) scale(.98);
    transition: opacity .35s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.2,.85,.3,1.05);
    position: relative;
    font-family: var(--font-body);
    backdrop-filter: blur(12px);
}
.ticketa-toast--visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}
.ticketa-toast--booking { border-right: 3px solid var(--ticketa-orange, #e87722); }
.ticketa-toast--session {
    border-right: 3px solid #4CAF50;
    border-top: 1px solid rgba(76,175,80,.4);
    box-shadow: 0 8px 32px rgba(0,0,0,.65), 0 0 0 1px rgba(76,175,80,.15), 0 0 20px rgba(76,175,80,.08);
}

/* Close button */
.ticketa-toast__close {
    position: absolute;
    top: 8px;
    left: 8px;
    background: none;
    border: none;
    color: rgba(255,255,255,.2);
    font-size: 11px;
    cursor: pointer;
    padding: 3px 5px;
    transition: color .15s;
    line-height: 1;
    border-radius: 4px;
}
.ticketa-toast__close:hover { color: rgba(255,255,255,.7); background: rgba(255,255,255,.07); }

/* ── Session toast ──────────────────────────────────────────────── */
.ticketa-toast__icon {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(232,119,34,.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    color: var(--ticketa-orange, #e87722);
    flex-shrink: 0;
}
.ticketa-toast__icon--session { background: rgba(76,175,80,.12); color: #4CAF50; }
.ticketa-toast__icon--warn    { background: rgba(255,152,0,.12);  color: #ff9800; }

.ticketa-toast__body { flex: 1; min-width: 0; }

.ticketa-toast__top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}
.ticketa-toast__top strong { font-size: 14px; font-weight: 700; color: #fff; font-family: var(--font-body); }

.ticketa-session-countdown {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 800;
    color: #4CAF50;
    background: rgba(76,175,80,.15);
    padding: 2px 8px;
    border-radius: 5px;
    letter-spacing: .04em;
    min-width: 44px;
    text-align: center;
}

.ticketa-toast__msg {
    font-size: 12px;
    color: rgba(255,255,255,.55);
    line-height: 1.5;
}
.ticketa-toast__link {
    color: var(--ticketa-orange, #e87722);
    text-decoration: underline;
    font-weight: 700;
    font-size: 12px;
}

/* ── Header session badge (inside .site-header__actions next to CTA button) ── */
#ticketa-header-session-badge {
    display: none;
    align-items: center;
    opacity: 0;
    transform: translateY(-6px) scale(.9);
    transition: opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
    margin-left: 12px;
}
#ticketa-header-session-badge.ticketa-header-badge--visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.ticketa-header-badge__link {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(76,175,80,.1);
    border: 1px solid rgba(76,175,80,.35);
    border-radius: var(--radius-pill);
    padding: 5px 13px 5px 10px;
    color: #fff;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    direction: rtl;
    transition: background .2s, border-color .2s;
}
.ticketa-header-badge__link:hover {
    background: rgba(76,175,80,.18);
    border-color: rgba(76,175,80,.6);
    color: #fff;
    text-decoration: none;
}
.ticketa-header-badge__icon { color: #4CAF50; font-size: 13px; }
.ticketa-header-badge__text { color: rgba(255,255,255,.7); }
.ticketa-header-badge__timer {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 800;
    color: #4CAF50;
    min-width: 32px;
    text-align: left;
    letter-spacing: .03em;
}
@media (max-width: 768px) {
    #ticketa-header-session-badge { display: none !important; }
}

/* ── Booking toast ──────────────────────────────────────────────── */
.ticketa-toast__booking-inner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}
.ticketa-toast__booking-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: rgba(232,119,34,.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    color: var(--ticketa-orange, #e87722);
    flex-shrink: 0;
}
.ticketa-toast__booking-body { flex: 1; min-width: 0; }
.ticketa-toast__booking-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.ticketa-toast__booking-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--ticketa-orange, #e87722);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.ticketa-toast__booking-when {
    font-size: 10px;
    color: rgba(255,255,255,.3);
}
.ticketa-toast__booking-event {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    line-height: 1.3;
}
.ticketa-toast__booking-event-icon {
    font-size: 11px;
    color: var(--ticketa-orange, #e87722);
    flex-shrink: 0;
}
.ticketa-toast__booking-hotel {
    font-size: 11px;
    color: rgba(255,255,255,.45);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ═══════════════════════════════════════════════════════════════
   VIEWER COUNT BADGES
   ═══════════════════════════════════════════════════════════════ */
.ticketa-viewers {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    padding: 4px 10px 4px 8px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,.85);
    z-index: 5;
    pointer-events: none;
    font-family: var(--font-body);
    white-space: nowrap;
}
.ticketa-viewers i { font-size: 10px; color: #4CAF50; }
.ticketa-viewers__pulse {
    display: inline-block;
    width: 6px; height: 6px;
    background: #4CAF50;
    border-radius: 50%;
    flex-shrink: 0;
    animation: ticketa-pulse 2s ease-in-out infinite;
}

/* Ensure cards are positioned for badge */
.whs__card { position: relative; }
.event-card { position: relative; }

/* ── Wizard viewer bar ─────────────────────────────────────────── */
.ticketa-wizard-viewers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px var(--space-6);
    background: rgba(76,175,80,.06);
    border-bottom: 1px solid rgba(76,175,80,.12);
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.55);
    direction: rtl;
    font-family: var(--font-body);
}
.ticketa-wizard-viewers i { font-size: 12px; color: #4CAF50; }
.ticketa-wizard-viewers__pulse {
    display: inline-block;
    width: 7px; height: 7px;
    background: #4CAF50;
    border-radius: 50%;
    animation: ticketa-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes ticketa-pulse {
    0%, 100% { opacity: 1;  transform: scale(1);    box-shadow: 0 0 0 0   rgba(76,175,80,.5); }
    60%       { opacity: .6; transform: scale(1.4);  box-shadow: 0 0 0 5px rgba(76,175,80,0);  }
}


@media (max-width: 480px) {
    #ticketa-toast-container-booking,
    #ticketa-toast-container-session {
        left: 10px;
        right: auto;
        max-width: calc(100% - 20px);
        width: auto;
    }
    #ticketa-toast-container-booking { bottom: 12px; }
    #ticketa-toast-container-session { top: calc(var(--header-height-mobile, 60px) + 8px); }
    .ticketa-toast { font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PERSONAL ZONE  v2.0
   ═══════════════════════════════════════════════════════════════════ */

.spz {
    min-height: 70vh;
    padding: 48px var(--container-pad, 20px) 80px;
    max-width: 800px;
    margin: 0 auto;
    font-family: var(--font-body);
    direction: rtl;
}
.spz__wrap { display: flex; flex-direction: column; gap: 28px; }

/* ── Header ─────────────────────────────────────────────────────── */
.spz__header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.spz__header-left { display: flex; align-items: center; gap: 10px; }
.spz__logo-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    background: var(--ticketa-primary, #e87722);
}
.spz__title { font-size: 1.9rem; font-weight: 900; color: var(--color-text, #fff); margin: 0; }

.spz__user-bar {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
    border-radius: 24px; padding: 6px 14px;
}
.spz__user-icon  { font-size: 14px; }
.spz__user-email { font-size: 13px; color: var(--color-muted, #888); }
.spz__logout-btn {
    background: none; border: none; color: rgba(255,100,100,.7);
    font-size: 12px; font-weight: 600; cursor: pointer;
    padding: 2px 8px; border-radius: 12px; transition: all .2s;
}
.spz__logout-btn:hover { background: rgba(255,100,100,.1); color: #ff6b6b; }

/* ── Error ───────────────────────────────────────────────────────── */
.spz__error {
    background: rgba(231,76,60,.1); border: 1px solid rgba(231,76,60,.3);
    color: #ff6b6b; border-radius: 10px; padding: 12px 16px; font-size: 14px;
}

/* ── Auth card (email + OTP) ─────────────────────────────────────── */
.spz__auth-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px; padding: 40px 36px;
    display: flex; flex-direction: column; gap: 18px;
    max-width: 460px; margin: 0 auto; width: 100%;
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
.spz__auth-icon   { font-size: 2.5rem; text-align: center; }
.spz__auth-title  { font-size: 1.4rem; font-weight: 800; color: var(--color-text, #fff); margin: 0; text-align: center; }
.spz__auth-desc   { font-size: 14px; color: var(--color-muted, #888); margin: 0; text-align: center; line-height: 1.6; }

.spz__input {
    width: 100%; box-sizing: border-box;
    padding: 13px 16px; border-radius: 10px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    color: var(--color-text, #fff); font-size: 15px;
    transition: border-color .2s, background .2s;
}
.spz__input:focus { outline: none; border-color: var(--ticketa-primary, #e87722); background: rgba(255,255,255,.09); }

/* ── OTP digits ─────────────────────────────────────────────────── */
.spz__otp-wrap { display: flex; gap: 8px; justify-content: center; margin: 4px 0; }
.spz__otp-digit {
    width: 50px; height: 60px; text-align: center;
    font-size: 1.7rem; font-weight: 700;
    background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.15);
    border-radius: 10px; color: var(--color-text, #fff);
    transition: border-color .15s, background .15s;
    caret-color: var(--ticketa-primary, #e87722);
}
.spz__otp-digit:focus { outline: none; border-color: var(--ticketa-primary, #e87722); background: rgba(232,119,34,.08); }

/* ── Buttons ─────────────────────────────────────────────────────── */
.spz__btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 24px; border-radius: 10px;
    font-size: 14px; font-weight: 700; cursor: pointer; border: none;
    transition: all .2s; text-decoration: none; letter-spacing: .01em;
}
.spz__btn--primary {
    background: var(--ticketa-primary, #e87722); color: #fff; width: 100%;
}
.spz__btn--primary:hover { opacity: .88; transform: translateY(-1px); }
.spz__btn--ghost {
    background: transparent; color: var(--color-muted, #888);
    border: 1px solid rgba(255,255,255,.12); font-size: 13px; padding: 10px 20px;
    align-self: flex-start;
}
.spz__btn--ghost:hover { border-color: rgba(255,255,255,.3); color: var(--color-text, #fff); }
.spz__btn--resume {
    background: var(--ticketa-primary, #e87722); color: #fff;
    padding: 12px 24px; border-radius: 10px; font-size: 14px; font-weight: 700;
    align-self: flex-start; text-decoration: none; transition: all .2s;
}
.spz__btn--resume:hover { opacity: .88; transform: translateX(-3px); }

/* ── Loading ─────────────────────────────────────────────────────── */
.spz__loading {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    padding: 60px; color: var(--color-muted, #888); font-size: 14px;
}
.spz__spinner {
    width: 40px; height: 40px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,.08);
    border-top-color: var(--ticketa-primary, #e87722);
    animation: spz-spin .75s linear infinite;
}
@keyframes spz-spin { to { transform: rotate(360deg); } }

/* ── Orders wrap ────────────────────────────────────────────────── */
.spz__orders-wrap { display: flex; flex-direction: column; gap: 16px; }

.spz__summary-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 4px 0 12px;
}
.spz__summary-count { font-size: 14px; font-weight: 600; color: var(--color-muted, #888); }
.spz__summary-chip {
    font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 20px; color: #fff;
}
.spz__summary-chip--paid  { background: #27ae60; }
.spz__summary-chip--other { background: rgba(255,255,255,.15); color: rgba(255,255,255,.7); }

.spz__empty-state {
    text-align: center; padding: 60px 20px; color: var(--color-muted, #888);
}
.spz__empty-icon { font-size: 3rem; margin-bottom: 12px; }
.spz__empty-state p { font-size: 15px; }

/* ── Order card ─────────────────────────────────────────────────── */
.spz__order-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px; overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.spz__order-card:hover { border-color: rgba(255,255,255,.16); }
.spz__order-card.is-open { border-color: rgba(232,119,34,.3); box-shadow: 0 4px 20px rgba(232,119,34,.08); }
.spz__order-card--paid   { border-right: 3px solid #27ae60; }
.spz__order-card--failed { border-right: 3px solid #e74c3c; }
.spz__order-card--abandoned { border-right: 3px solid #7f8c8d; }
.spz__order-card--pending   { border-right: 3px solid #f0a500; }

/* Card header */
.spz__oc-header {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 20px; cursor: pointer;
    transition: background .15s;
}
.spz__oc-header:hover { background: rgba(255,255,255,.03); }

.spz__oc-left  { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.spz__oc-status-icon { font-size: 1.2rem; }
.spz__oc-id-block    { display: flex; flex-direction: column; gap: 4px; }
.spz__oc-order-id    { font-family: monospace; font-weight: 800; font-size: 13px; color: var(--ticketa-primary, #e87722); }
.spz__oc-status-badge {
    display: inline-block; font-size: 10px; font-weight: 700; color: #fff;
    padding: 2px 8px; border-radius: 20px; line-height: 1.5;
}

.spz__oc-mid  { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.spz__oc-event   { font-size: 14px; font-weight: 700; color: var(--color-text, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spz__oc-dates   { font-size: 12px; color: var(--color-muted, #888); }
.spz__oc-created { font-size: 11px; color: rgba(255,255,255,.35); }

.spz__oc-right  { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.spz__oc-total   { font-size: 1.1rem; font-weight: 800; color: var(--color-text, #fff); }
.spz__oc-chevron { font-size: 11px; color: var(--color-muted, #888); transition: transform .2s; }
.spz__order-card.is-open .spz__oc-chevron { transform: rotate(180deg); }

/* Card body */
.spz__oc-body {
    flex-direction: column; gap: 0;
    border-top: 1px solid rgba(255,255,255,.07);
}

.spz__oc-section {
    padding: 20px 20px;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.spz__oc-section:last-child { border-bottom: none; }
.spz__oc-section--action { background: rgba(232,119,34,.04); }

.spz__oc-section-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--color-muted, #888);
    margin: 0 0 14px;
}

/* Room cards */
.spz__room-card {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px; padding: 14px 16px; margin-bottom: 10px;
    position: relative;
}
.spz__room-card:last-child { margin-bottom: 0; }
.spz__room-num {
    position: absolute; top: 10px; left: 12px;
    font-size: 10px; font-weight: 700; color: var(--ticketa-primary, #e87722);
    background: rgba(232,119,34,.12); padding: 2px 8px; border-radius: 20px;
    text-transform: uppercase; letter-spacing: .06em;
}
.spz__room-details { display: flex; flex-direction: column; gap: 7px; padding-top: 4px; }
.spz__room-row { display: flex; gap: 8px; align-items: baseline; }
.spz__room-label { font-size: 11px; color: var(--color-muted, #888); min-width: 60px; flex-shrink: 0; }
.spz__room-val   { font-size: 13px; color: var(--color-text, #fff); }
.spz__room-val--hotel { font-weight: 700; }
.spz__room-val--price { color: var(--ticketa-primary, #e87722); font-weight: 700; }

/* Add-ons list */
.spz__addons-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.spz__addon-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text, #fff); }
.spz__addon-dot  { color: var(--ticketa-primary, #e87722); font-size: 10px; }

/* Pricing table */
.spz__price-table { display: flex; flex-direction: column; gap: 8px; }
.spz__price-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.05);
}
.spz__price-row:last-child { border-bottom: none; padding-bottom: 0; }
.spz__price-row--total {
    font-size: 15px; font-weight: 800; padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.1); border-bottom: none;
}
.spz__price-label { color: var(--color-muted, #888); }
.spz__price-row--total .spz__price-label { color: var(--color-text, #fff); }
.spz__price-val   { color: var(--color-text, #fff); font-weight: 600; font-family: monospace; }
.spz__price-row--total .spz__price-val { color: var(--ticketa-primary, #e87722); }

/* Resume section */
.spz__resume-hint { font-size: 13px; color: var(--color-muted, #888); margin: 0 0 12px; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .spz { padding: 28px 16px 60px; }
    .spz__auth-card { padding: 28px 20px; }
    .spz__otp-digit { width: 42px; height: 52px; font-size: 1.4rem; }
    .spz__oc-header { flex-wrap: wrap; gap: 8px; }
    .spz__oc-mid, .spz__oc-right { min-width: 0; }
    .spz__title { font-size: 1.4rem; }
    .spz__oc-total { font-size: .95rem; }
}

/* ═══ SITE FOOTER ═══════════════════════════════════════════════════════════ */
.site-footer {
    background: linear-gradient(180deg, #100e0b 0%, #0a0807 100%);
    color: rgba(255,255,255,.7);
    padding: 3.5rem 0 1.5rem;
    margin-top: 5rem;
    border-top: 1px solid rgba(255,255,255,.05);
    font-family: var(--font-body, system-ui, sans-serif);
}
.site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

/* Top columns */
.site-footer__cols {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit, minmax(160px, 1fr));
    gap: 2.5rem 3rem;
}
.site-footer__col {
    min-width: 0;
}
.site-footer__col--brand {
    max-width: 360px;
}
.site-footer__logo {
    display: inline-block;
    margin-bottom: 1rem;
    text-decoration: none;
    line-height: 1;
}
.site-footer__logo .site-logo__text {
    font-family: var(--font-display, var(--font-body));
    font-weight: 800;
    letter-spacing: .15em;
    font-size: 1.4rem;
    color: #fff;
}
/* WP custom-logo wrapper outputs <a class="custom-logo-link"><img class="custom-logo">
 * — both can render full-size in the footer if not constrained. Force a max height. */
.site-footer__logo img,
.site-footer .custom-logo {
    max-height: 32px !important;
    width: auto !important;
    height: auto !important;
    max-width: 160px !important;
    display: block;
}
.site-footer__tagline {
    font-size: .92rem;
    line-height: 1.65;
    color: rgba(255,255,255,.55);
    margin: 0;
    max-width: 32ch;
}
.site-footer__col-title {
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0 0 1.1rem;
}
.site-footer__links {
    list-style: none !important;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.site-footer__links li {
    list-style: none !important;
    padding-inline-start: 0;
}
.site-footer__links a {
    color: rgba(255,255,255,.65);
    text-decoration: none;
    font-size: .92rem;
    transition: color .15s;
    display: inline-block;
}
.site-footer__links a:hover {
    color: #e87722;
}

/* Secure row */
.site-footer__secure {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 1.25rem 0;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.site-footer__secure-text {
    color: rgba(255,255,255,.6);
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.site-footer__secure-icon {
    color: #2ecc71;
    font-size: .9rem;
}
.site-footer__pay-badges {
    list-style: none !important;
    margin: 0;
    padding: 0;
    display: flex;
    gap: .55rem;
    flex-wrap: wrap;
    align-items: center;
}
.site-footer__pay-badges li {
    list-style: none !important;
    padding: 0;
    margin: 0;
    line-height: 0;
}
.site-footer__pay-badge {
    width: 52px;
    height: auto;
    display: block;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.04);
    transition: transform .15s, box-shadow .15s;
}
.site-footer__pay-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.08);
}

/* Bottom row */
.site-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    color: rgba(255,255,255,.45);
    font-size: .82rem;
    line-height: 1.6;
}
.site-footer__copy,
.site-footer__credit {
    margin: 0;
}
.site-footer__copy a,
.site-footer__credit a {
    color: rgba(255,255,255,.7);
    text-decoration: none;
    font-weight: 600;
    transition: color .15s;
}
.site-footer__copy a:hover,
.site-footer__credit a:hover {
    color: #e87722;
}
.site-footer__heart {
    color: #e87722;
    font-size: 1em;
    margin: 0 .15em;
    display: inline-block;
    animation: ticketa-heartbeat 1.6s ease-in-out infinite;
    transform-origin: center;
}
@keyframes ticketa-heartbeat {
    0%, 60%, 100% { transform: scale(1); }
    20%           { transform: scale(1.18); }
    40%           { transform: scale(1.05); }
}

/* Mobile: stack vertically with proper hierarchy.
 * - Brand block centered with reduced spacing
 * - Links + categories stack but with centered alignment for visual rhythm
 * - Secure row condensed but readable
 * - Bottom row stacked into two centered lines */
@media (max-width: 720px) {
    .site-footer {
        padding: 3rem 0 2rem;
        margin-top: 4rem;
    }
    .site-footer__inner {
        gap: 2.5rem;
        padding-inline: 1.25rem;
    }

    .site-footer__cols {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }
    .site-footer__col--brand {
        max-width: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: .5rem;
    }
    .site-footer__col--brand .site-footer__tagline {
        margin: .5rem auto 0;
        max-width: 28ch;
    }
    .site-footer__col-title {
        margin-bottom: 1rem;
        font-size: .8rem;
    }
    .site-footer__links {
        align-items: center;
        gap: .65rem !important;
    }
    .site-footer__links li {
        text-align: center;
    }
    .site-footer__links a { font-size: .92rem; }

    /* Secure row: tight, centered, badges on their own row below text */
    .site-footer__secure {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: 1.25rem 0;
        text-align: center;
    }
    .site-footer__secure-text { font-size: .85rem; }
    .site-footer__pay-badges {
        justify-content: center;
        gap: .55rem !important;
    }
    .site-footer__pay-badge { width: 48px; }

    /* Bottom row: stack into centered lines with comfortable spacing */
    .site-footer__bottom {
        flex-direction: column;
        gap: .85rem;
        text-align: center;
        padding-top: .75rem;
    }
    .site-footer__copy,
    .site-footer__credit {
        font-size: .8rem;
        line-height: 1.65;
    }
}

/* Very small phones — extra-tight badge sizing so 4 still fit per row */
@media (max-width: 380px) {
    .site-footer__pay-badge { width: 42px; }
    .site-footer__pay-badges { gap: .35rem !important; }
}

/* ═══ EVENT CARD — EXPAND BUTTON + LIGHTBOX ═══════════════════════════════ */
.event-card__poster { position: relative; }
.event-card__expand-btn {
    position: absolute;
    /* .ticketa-viewers sits at top:10px/left:10px, so place this on the
     * OPPOSITE side (top:10px/right:10px). Z-index must beat .event-card__link::after
     * (which uses var(--z-card) = 10) so clicks open the modal, not the link. */
    top: 10px;
    right: 10px;
    z-index: 50;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.3);
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    transition: background .15s, border-color .15s, transform .15s;
    pointer-events: auto;
}
.event-card__expand-btn:hover {
    background: rgba(232,119,34,.92);
    border-color: rgba(232,119,34,1);
    transform: translateY(-1px);
}

/* Lightbox (vanilla JS injects markup; styles always loaded) */
.tk-lightbox {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 9998;
    background: rgba(0,0,0,.92);
    display: flex;
    flex-direction: column;
    animation: tk-lightbox-fade .22s ease;
}
@keyframes tk-lightbox-fade { from { opacity: 0; } to { opacity: 1; } }
.tk-lightbox__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    color: #fff;
    font-size: .95rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.tk-lightbox__close {
    appearance: none;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    width: 38px; height: 38px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tk-lightbox__close:hover { background: rgba(255,255,255,.16); }
.tk-lightbox__stage {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    min-height: 0;
    overflow: hidden;
}
.tk-lightbox__img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 12px 60px rgba(0,0,0,.55);
}