/* ============================================================
   KiwiEvents — Public UI  ·  2026 Premium Design
   Inspired by Apple, Linear, Stripe, iOS 18
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900;1,14..32,400&display=swap');

/* ─── Design Tokens ──────────────────────────────────────── */
/* Scoped to plugin elements as well as :root so that theme
   :root declarations cannot override the plugin's accent color. */
:root,
.ke-event-page,
.ke-sheet,
.ke-sheet-overlay {
    /* Typography */
    --kep-font:         'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;

    /* Color — Neutral */
    --kep-ink:          #09090b;
    --kep-ink-2:        #3f3f46;
    --kep-ink-3:        #71717a;
    --kep-ink-4:        #a1a1aa;
    --kep-surface:      #ffffff;
    --kep-surface-2:    #fafafa;
    --kep-border:       rgba(9, 9, 11, 0.08);
    --kep-border-soft:  rgba(9, 9, 11, 0.05);

    /* Color — Accent (Indigo → Violet) */
    --kep-accent-rgb:   99, 102, 241;
    --kep-accent-1:     #6366f1;
    --kep-accent-2:     #8b5cf6;
    --kep-accent-grad:  linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --kep-accent-glow:  rgba(var(--kep-accent-rgb), 0.28);
    --kep-accent-soft:  rgba(var(--kep-accent-rgb), 0.08);

    /* Color — Status */
    --kep-amber:        #f59e0b;
    --kep-green:        #10b981;
    --kep-red:          #ef4444;

    /* Radii */
    --kep-r-xs:         10px;
    --kep-r-sm:         14px;
    --kep-r-md:         20px;
    --kep-r-lg:         28px;
    --kep-r-pill:       100px;

    /* Shadows */
    --kep-shadow-sm:    0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.04);
    --kep-shadow-md:    0 4px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
    --kep-shadow-lg:    0 12px 40px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.04);
    --kep-shadow-xl:    0 24px 64px rgba(0,0,0,0.14);
    --kep-shadow-accent: 0 8px 32px rgba(var(--kep-accent-rgb),0.35);

    /* Motion */
    --kep-ease:         cubic-bezier(0.16, 1, 0.3, 1);
    --kep-ease-out:     cubic-bezier(0.0, 0, 0.2, 1);
    --kep-duration:     0.38s;
    --kep-duration-fast:0.18s;
}

/* ─── Reset / Base ───────────────────────────────────────── */
.ke-event-page {
    font-family:        var(--kep-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color:              var(--kep-ink);
    background:         var(--kep-surface);
    min-height:         100vh;
    padding-bottom:     120px;
}

.ke-event-page *,
.ke-event-page *::before,
.ke-event-page *::after {
    box-sizing: border-box;
}

/* ─── Breakout helper (escape theme container) ───────────── */
.ke-event-page-breakout {
    width:              100%;
    max-width:          100%;
    margin:             0;
    padding:            0;
    position:           relative;
    z-index:            1;
}

/* ══════════════════════════════════════════════════════════
   HERO  — Poster + Blurred Ambient Background
   ══════════════════════════════════════════════════════════ */

.ke-hero {
    position:           relative;
    width:              100vw;
    left:               50%;
    margin-left:        -50vw;
    overflow:           hidden;
    background:         linear-gradient(160deg, #1e1b4b 0%, #312e81 60%, #1e1b4b 100%);
}

/* ─── Blurred ambient background ──────────────────────── */
.ke-hero-bg {
    position:           absolute;
    inset:              -60px;
    background-image:   var(--hero-image);
    background-size:    cover;
    background-position: center;
    filter:             blur(52px) brightness(0.28) saturate(1.8);
    transform:          scale(1.06);
}

.ke-hero-bg::after {
    content:            '';
    position:           absolute;
    inset:              0;
    background:         rgba(5, 5, 20, 0.38);
}

/* Per-event custom hero background image — sharp (not blurred), cover/center,
   with a fixed darkening gradient (darker toward the bottom where the text
   sits) so the title/date/location/badges stay legible over ANY image,
   including bright ones. Enforced in CSS — the organizer cannot weaken it. */
.ke-hero-custombg {
    position:            absolute;
    inset:               0;
    background-image:    var(--hero-bg-image);
    background-size:     cover;
    background-position: center;
    z-index:             0;
}
.ke-hero-custombg::before {
    content:       '';
    position:      absolute;
    inset:         0;
    background:    linear-gradient(180deg,
                       rgba(0, 0, 0, 0.55) 0%,
                       rgba(0, 0, 0, 0.72) 60%,
                       rgba(0, 0, 0, 0.85) 100%);
    pointer-events: none;
}
/* With a custom sharp background, drop the blurred featured-image ambient so
   the image reads cleanly. */
.ke-hero.has-custom-bg .ke-hero-bg { display: none; }

/* ─── Content body ─────────────────────────────────────── */
.ke-hero-body {
    position:           relative;
    z-index:            2;
    width:              100%;
    padding:            56px 0 64px;
}

/* ─── Two-column grid ──────────────────────────────────── */
.ke-hero-inner {
    max-width:          960px;
    margin:             0 auto;
    padding:            0 40px;
    display:            grid;
    grid-template-columns: 300px 1fr;
    gap:                52px;
    align-items:        center;
}

/* ─── Poster column ────────────────────────────────────── */
.ke-hero-poster {
    border-radius:      20px;
    overflow:           hidden;
    box-shadow:
        0 40px 90px  rgba(0,0,0,0.60),
        0 8px  24px  rgba(0,0,0,0.45),
        0 0    0 1px rgba(255,255,255,0.09);
    background:         rgba(255,255,255,0.04);
    animation:          ke-poster-in 0.65s cubic-bezier(0.16,1,0.3,1) both;
    transition:         transform 0.5s cubic-bezier(0.16,1,0.3,1),
                        box-shadow 0.5s cubic-bezier(0.16,1,0.3,1);
    will-change:        transform;
}

.ke-hero-poster:hover {
    transform:          scale(1.025) translateY(-5px);
    box-shadow:
        0 56px 110px rgba(0,0,0,0.70),
        0 12px  32px rgba(0,0,0,0.50),
        0 0     0 1px rgba(255,255,255,0.14);
}

@keyframes ke-poster-in {
    from { opacity: 0; transform: translateY(24px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Actual image — aspect ratio always preserved, never cropped */
.ke-hero-poster-img {
    display:            block;
    width:              100%;
    height:             auto;
    object-fit:         contain;
}

/* No-image fallback */
.ke-hero-poster-placeholder {
    aspect-ratio:       3 / 4;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    background:         linear-gradient(160deg,
                            rgba(var(--kep-accent-rgb),0.25) 0%,
                            rgba(var(--kep-accent-rgb),0.12) 100%);
}

/* ─── Info column ──────────────────────────────────────── */
.ke-hero-info {
    display:            flex;
    flex-direction:     column;
    animation:          ke-info-in 0.65s 0.1s cubic-bezier(0.16,1,0.3,1) both;
}

@keyframes ke-info-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0);    }
}

/* ─── Category pills (in flow inside info column) ──────── */
.ke-hero-cats {
    display:            flex;
    gap:                8px;
    flex-wrap:          wrap;
    margin-bottom:      20px;
}

.ke-cat-pill {
    display:            inline-flex;
    align-items:        center;
    padding:            5px 14px;
    background:         rgba(255,255,255,0.14);
    backdrop-filter:    blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border:             1px solid rgba(255,255,255,0.26);
    border-radius:      var(--kep-r-pill);
    color:              rgba(255,255,255,0.92);
    font-size:          11px;
    font-weight:        700;
    letter-spacing:     0.6px;
    text-transform:     uppercase;
}

/* ─── Organizer pill ─────────────────────────────────────── */
.ke-hero-organizer {
    display:            inline-flex;
    align-items:        center;
    gap:                8px;
    margin-bottom:      16px;
    padding:            6px 14px 6px 6px;
    background:         rgba(255,255,255,0.12);
    backdrop-filter:    blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border:             1px solid rgba(255,255,255,0.2);
    border-radius:      var(--kep-r-pill);
}

.ke-org-avatar {
    width:              28px;
    height:             28px;
    border-radius:      50%;
    object-fit:         cover;
    border:             1.5px solid rgba(255,255,255,0.3);
    flex-shrink:        0;
}

.ke-org-avatar-placeholder {
    width:              28px;
    height:             28px;
    border-radius:      50%;
    background:         rgba(255,255,255,0.2);
    display:            flex;
    align-items:        center;
    justify-content:    center;
    flex-shrink:        0;
}

.ke-org-text {
    font-size:          13px;
    font-weight:        500;
    color:              rgba(255,255,255,0.85);
    letter-spacing:     -0.1px;
}

.ke-org-name-strong {
    font-weight:        700;
    color:              #ffffff;
}

/* ─── Hero title ─────────────────────────────────────────── */
.ke-hero-title {
    font-size:          clamp(2rem, 5vw, 3.8rem);
    font-weight:        800;
    color:              #ffffff;
    margin:             0 0 20px;
    line-height:        1.08;
    letter-spacing:     -1.5px;
    text-shadow:        0 2px 16px rgba(0,0,0,0.3);
}

/* ─── Hero meta items ────────────────────────────────────── */
.ke-hero-meta {
    display:            flex;
    gap:                12px;
    flex-wrap:          wrap;
    margin-bottom:      32px;
}

.ke-meta-item {
    display:            inline-flex;
    align-items:        center;
    gap:                9px;
    padding:            9px 16px;
    background:         rgba(255,255,255,0.10);
    backdrop-filter:    blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border:             1px solid rgba(255,255,255,0.18);
    border-radius:      var(--kep-r-pill);
    color:              rgba(255,255,255,0.92);
}

.ke-meta-icon {
    width:              16px;
    height:             16px;
    flex-shrink:        0;
    opacity:            0.75;
}

.ke-meta-primary {
    font-size:          14px;
    font-weight:        600;
    color:              #ffffff;
    letter-spacing:     -0.2px;
}

.ke-meta-secondary {
    font-size:          12px;
    font-weight:        400;
    color:              rgba(255,255,255,0.65);
    margin-top:         1px;
}

/* ─── Hero CTA ───────────────────────────────────────────── */
.ke-cta-btn {
    display:            inline-flex;
    align-items:        center;
    gap:                8px;
    padding:            15px 32px;
    background:         var(--kep-accent-grad);
    color:              #ffffff;
    border:             none;
    border-radius:      var(--kep-r-pill);
    font-family:        var(--kep-font);
    font-size:          16px;
    font-weight:        600;
    letter-spacing:     -0.2px;
    cursor:             pointer;
    box-shadow:         var(--kep-shadow-accent), inset 0 1px 0 rgba(255,255,255,0.2);
    transition:         transform var(--kep-duration-fast) var(--kep-ease),
                        box-shadow var(--kep-duration-fast) var(--kep-ease),
                        opacity var(--kep-duration-fast) ease;
    position:           relative;
    overflow:           hidden;
}

/* Shimmer sweep on hover */
.ke-cta-btn::before {
    content:            '';
    position:           absolute;
    top:                0;
    left:               -100%;
    width:              60%;
    height:             100%;
    background:         linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    transition:         left 0.5s var(--kep-ease);
}

.ke-cta-btn:hover::before {
    left:               160%;
}

.ke-cta-btn:hover {
    transform:          translateY(-2px) scale(1.02);
    box-shadow:         0 16px 48px rgba(var(--kep-accent-rgb),0.48), inset 0 1px 0 rgba(255,255,255,0.2);
}

.ke-cta-btn:active {
    transform:          scale(0.97);
    box-shadow:         0 4px 16px rgba(var(--kep-accent-rgb),0.35);
    transition-duration: 0.08s;
}

.ke-cta-icon {
    width:              18px;
    height:             18px;
    flex-shrink:        0;
}

/* ═══════════════════════════════════════════════════════════
   CONTENT BODY
   ═══════════════════════════════════════════════════════════ */

.ke-event-body {
    max-width:          740px;
    margin:             0 auto;
    padding:            0 24px;
}

/* ─── Section ────────────────────────────────────────────── */
.ke-content-section {
    padding:            52px 0 0;
}

.ke-section-label {
    font-size:          11px;
    font-weight:        700;
    text-transform:     uppercase;
    letter-spacing:     0.9px;
    color:              var(--kep-accent-1);
    margin-bottom:      8px;
}

.ke-section-title {
    font-size:          22px;
    font-weight:        800;
    color:              var(--kep-ink);
    margin:             0 0 24px;
    letter-spacing:     -0.4px;
}

/* ─── About ──────────────────────────────────────────────── */
.ke-about-text {
    font-size:          16px;
    line-height:        1.78;
    color:              var(--kep-ink-2);
}

.ke-about-text p     { margin: 0 0 1.2em; }
.ke-about-text p:last-child { margin-bottom: 0; }
.ke-about-text h2,
.ke-about-text h3    { color: var(--kep-ink); letter-spacing: -0.3px; margin-top: 1.5em; }
.ke-about-text a     { color: var(--kep-accent-1); text-decoration: none; }
.ke-about-text a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   TICKET CARDS
   ═══════════════════════════════════════════════════════════ */

.ke-tickets-list {
    display:            flex;
    flex-direction:     column;
    gap:                10px;
}

/* ── Theme isolation: nuclear reset beats any theme button rule ── */
.ke-event-page .ke-ticket,
.ke-event-page .ke-ticket:not(:disabled),
.ke-event-page .ke-ticket:hover,
.ke-event-page button.ke-ticket {
    all:                unset !important;
    display:            flex !important;
    align-items:        center !important;
    justify-content:    space-between !important;
    width:              100% !important;
    box-sizing:         border-box !important;
    padding:            0 !important;
    background:         var(--kep-surface) !important;
    background-image:   none !important;
    border:             1.5px solid var(--kep-border) !important;
    border-radius:      var(--kep-r-md) !important;
    box-shadow:         var(--kep-shadow-sm) !important;
    font-family:        var(--kep-font) !important;
    color:              var(--kep-ink) !important;
    text-align:         left !important;
    cursor:             pointer !important;
    pointer-events:     auto !important;
    -webkit-appearance: none !important;
    appearance:         none !important;
    position:           relative !important;
    overflow:           hidden !important;
    z-index:            1 !important;
    transition:         transform var(--kep-duration) var(--kep-ease),
                        border-color var(--kep-duration) ease,
                        box-shadow var(--kep-duration) var(--kep-ease) !important;
}

/* Explicit inner layout so all: unset doesn't collapse the content */
.ke-event-page .ke-ticket .ke-ticket-inner {
    display:            flex !important;
    align-items:        center !important;
    justify-content:    space-between !important;
    width:              100% !important;
    padding:            22px 24px !important;
    gap:                16px !important;
    box-sizing:         border-box !important;
}

/* Accent left strip */
.ke-event-page .ke-ticket::before {
    content:            '';
    position:           absolute;
    top:                12px;
    bottom:             12px;
    left:               0;
    width:              3px;
    border-radius:      0 2px 2px 0;
    background:         var(--kep-accent-grad);
    transform:          scaleY(0);
    transform-origin:   center;
    transition:         transform var(--kep-duration) var(--kep-ease);
}

.ke-event-page .ke-ticket:not(:disabled):hover::before {
    transform:          scaleY(1);
}

.ke-event-page .ke-ticket:not(:disabled):hover {
    transform:          translateY(-2px);
    border-color:       rgba(var(--kep-accent-rgb),0.22);
    box-shadow:         var(--kep-shadow-lg), 0 0 0 4px rgba(var(--kep-accent-rgb),0.06);
}

.ke-event-page .ke-ticket:not(:disabled):active {
    transform:          translateY(0) scale(0.99);
    transition-duration: 0.1s;
}

.ke-event-page .ke-ticket.ke-ticket--sold-out {
    opacity:            0.52;
    cursor:             not-allowed;
}

/* Inner padding wrapper */
.ke-ticket-inner {
    display:            flex;
    align-items:        center;
    justify-content:    space-between;
    width:              100%;
    padding:            22px 24px;
    gap:                16px;
}

/* Left side */
.ke-ticket-left {
    display:            flex;
    flex-direction:     column;
    gap:                4px;
    min-width:          0;
}

.ke-ticket-badge {
    display:            inline-flex;
    align-items:        center;
    gap:                4px;
    padding:            3px 9px;
    border-radius:      var(--kep-r-pill);
    font-size:          10px;
    font-weight:        700;
    letter-spacing:     0.4px;
    text-transform:     uppercase;
    margin-bottom:      2px;
    align-self:         flex-start;
}

.ke-ticket-badge--popular {
    background:         rgba(var(--kep-accent-rgb),0.10);
    color:              var(--kep-accent-1);
    border:             1px solid rgba(var(--kep-accent-rgb),0.18);
}

.ke-ticket-badge--free {
    background:         rgba(16,185,129,0.10);
    color:              var(--kep-green);
    border:             1px solid rgba(16,185,129,0.2);
}

.ke-ticket-name {
    font-size:          17px;
    font-weight:        700;
    color:              var(--kep-ink);
    letter-spacing:     -0.3px;
    line-height:        1.2;
}

.ke-ticket-desc {
    font-size:          13.5px;
    color:              var(--kep-ink-3);
    line-height:        1.4;
    max-width:          400px;
}

.ke-ticket-scarcity {
    display:            inline-flex;
    align-items:        center;
    gap:                5px;
    font-size:          12px;
    font-weight:        600;
    color:              var(--kep-amber);
    margin-top:         2px;
}

.ke-ticket-scarcity::before {
    content:            '';
    display:            inline-block;
    width:              6px;
    height:             6px;
    border-radius:      50%;
    background:         var(--kep-amber);
    animation:          ke-pulse 1.8s ease-in-out infinite;
}

@keyframes ke-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.8); }
}

/* Right side */
.ke-ticket-right {
    display:            flex;
    align-items:        center;
    gap:                12px;
    flex-shrink:        0;
}

.ke-ticket-price {
    font-size:          24px;
    font-weight:        800;
    color:              var(--kep-ink);
    letter-spacing:     -0.8px;
    line-height:        1;
}

.ke-ticket-price-free {
    font-size:          20px;
    font-weight:        700;
    color:              var(--kep-green);
    letter-spacing:     -0.4px;
}

.ke-ticket-arrow {
    width:              32px;
    height:             32px;
    border-radius:      50%;
    background:         var(--kep-surface-2);
    border:             1.5px solid var(--kep-border);
    display:            flex;
    align-items:        center;
    justify-content:    center;
    flex-shrink:        0;
    color:              var(--kep-ink-3);
    transition:         background var(--kep-duration-fast) ease,
                        border-color var(--kep-duration-fast) ease,
                        color var(--kep-duration-fast) ease,
                        transform var(--kep-duration) var(--kep-ease);
}

.ke-event-page .ke-ticket:not(:disabled):hover .ke-ticket-arrow {
    background:         var(--kep-accent-grad);
    border-color:       transparent;
    color:              #ffffff;
    transform:          translateX(2px);
}

.ke-ticket-soldout-label {
    padding:            6px 16px;
    border-radius:      var(--kep-r-pill);
    background:         rgba(9,9,11,0.05);
    color:              var(--kep-ink-4);
    font-size:          12px;
    font-weight:        700;
    letter-spacing:     0.3px;
    text-transform:     uppercase;
}

/* ─── Status banner ──────────────────────────────────────── */
.ke-status-banner {
    display:            flex;
    align-items:        center;
    gap:                10px;
    padding:            16px 20px;
    border-radius:      var(--kep-r-sm);
    font-size:          14px;
    font-weight:        600;
    margin-top:         48px;
}

.ke-status-cancelled { background: rgba(239,68,68,0.07);  color: var(--kep-red);   border: 1px solid rgba(239,68,68,0.15); }
.ke-status-postponed { background: rgba(245,158,11,0.07); color: var(--kep-amber); border: 1px solid rgba(245,158,11,0.15); }
.ke-status-completed { background: rgba(16,185,129,0.07); color: var(--kep-green); border: 1px solid rgba(16,185,129,0.15); }

/* ═══════════════════════════════════════════════════════════
   BOTTOM SHEET — Checkout
   ═══════════════════════════════════════════════════════════ */

.ke-sheet-overlay {
    position:           fixed;
    inset:              0;
    background:         rgba(9,9,11,0.5);
    backdrop-filter:    blur(6px) saturate(160%);
    -webkit-backdrop-filter: blur(6px) saturate(160%);
    z-index:            9998;
    opacity:            0;
    pointer-events:     none;
    transition:         opacity 0.3s ease;
}

.ke-sheet-overlay.active {
    opacity:            1;
    pointer-events:     auto;
}

.ke-sheet {
    position:           fixed;
    bottom:             0;
    left:               50%;
    transform:          translateX(-50%) translateY(110%);
    width:              100%;
    max-width:          480px;
    max-height:         92vh;
    overflow-y:         auto;
    background:         rgba(255,255,255,0.96);
    backdrop-filter:    blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border:             1px solid rgba(255,255,255,0.9);
    border-bottom:      none;
    border-radius:      28px 28px 0 0;
    z-index:            9999;
    transition:         transform 0.42s var(--kep-ease);
    padding:            12px 0 0;
    box-shadow:         0 -24px 80px rgba(9,9,11,0.18), 0 -2px 8px rgba(9,9,11,0.06);
}

.ke-sheet.active {
    transform:          translateX(-50%) translateY(0);
}

/* ─── ID-based overrides — beat any theme class rules ───────
   ID specificity (1,0,0) > any class rule (0,n,0).
   These mirror the class rules above; keep them in sync.    */
#ke-sheet-overlay {
    position:           fixed !important;
    inset:              0 !important;
    background:         rgba(9,9,11,0.5) !important;
    backdrop-filter:    blur(6px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(6px) saturate(160%) !important;
    z-index:            9998 !important;
    opacity:            0 !important;
    pointer-events:     none !important;
    transition:         opacity 0.3s ease !important;
}

#ke-sheet-overlay.active {
    opacity:            1 !important;
    pointer-events:     auto !important;
}

#ke-checkout-sheet {
    position:           fixed !important;
    bottom:             0 !important;
    left:               50% !important;
    transform:          translateX(-50%) translateY(110%) !important;
    width:              100% !important;
    max-width:          480px !important;
    max-height:         92vh !important;
    overflow-y:         auto !important;
    background:         rgba(255,255,255,0.96) !important;
    backdrop-filter:    blur(40px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
    border:             1px solid rgba(255,255,255,0.9) !important;
    border-bottom:      none !important;
    border-radius:      28px 28px 0 0 !important;
    z-index:            9999 !important;
    transition:         transform 0.42s var(--kep-ease) !important;
    padding:            12px 0 0 !important;
    box-shadow:         0 -24px 80px rgba(9,9,11,0.18), 0 -2px 8px rgba(9,9,11,0.06) !important;
    font-family:        var(--kep-font) !important;
    color:              var(--kep-ink) !important;
    box-sizing:         border-box !important;
}

#ke-checkout-sheet.active {
    transform:          translateX(-50%) translateY(0) !important;
}

#ke-checkout-sheet input,
#ke-checkout-sheet textarea,
#ke-checkout-sheet select {
    all:                unset !important;
    box-sizing:         border-box !important;
    display:            block !important;
    width:              100% !important;
    padding:            14px 0 !important;
    background:         transparent !important;
    border:             none !important;
    border-bottom:      1px solid var(--kep-border) !important;
    border-radius:      0 !important;
    font-family:        var(--kep-font) !important;
    font-size:          15px !important;
    color:              var(--kep-ink) !important;
    transition:         border-color var(--kep-duration-fast) ease !important;
    outline:            none !important;
    -webkit-appearance: none !important;
    appearance:         none !important;
}

#ke-checkout-sheet textarea {
    min-height:         72px !important;
    max-height:         200px !important;
    padding:            12px 0 !important;
    line-height:        1.5 !important;
    resize:             vertical !important;
}

#ke-checkout-sheet input::placeholder,
#ke-checkout-sheet textarea::placeholder {
    color:              var(--kep-ink-4) !important;
    opacity:            1 !important;
}

#ke-checkout-sheet input:focus,
#ke-checkout-sheet textarea:focus,
#ke-checkout-sheet select:focus {
    border-bottom-color: var(--kep-accent-1) !important;
    box-shadow:          none !important;
}

/* Narrow theme reset: only neutralize bare <button> defaults for buttons that
   are NOT our styled action buttons. DO NOT use `all: unset` — it obliterates
   every property on descendants (display/width/padding/border-radius/etc.)
   and beats lower-specificity action-button rules. */
#ke-checkout-sheet button:not(.ke-sheet-btn):not(.ke-stepper-btn):not(.ke-sheet-close) {
    background:         transparent;
    border:             none;
    font-family:        var(--kep-font);
    color:              inherit;
    cursor:             pointer;
    -webkit-appearance: none;
    appearance:         none;
}

/* ═══════════════════════════════════════════════════════════
   Sheet action buttons — single source of truth.
   Works on both <button> and <a> variants. High specificity
   via #ke-checkout-sheet / #ke-resv-sheet prefix so it wins
   over theme resets in both the ticket and reservation sheets.
   ═══════════════════════════════════════════════════════════ */
#ke-checkout-sheet .ke-sheet-btn,
#ke-checkout-sheet .ke-sheet-btn-primary,
#ke-checkout-sheet .ke-sheet-btn-secondary,
#ke-checkout-sheet .ke-download-ticket-btn,
#ke-checkout-sheet #ke-sheet-submit,
#ke-checkout-sheet #ke-sheet-continue,
#ke-checkout-sheet #ke-confirmation-done,
#ke-checkout-sheet #ke-sheet-login-btn,
#ke-checkout-sheet #ke-sheet-register-btn,
#ke-resv-sheet .ke-sheet-btn,
#ke-resv-sheet .ke-sheet-btn-primary,
#ke-resv-sheet #ke-resv-continue,
#ke-resv-sheet #ke-resv-submit,
#ke-resv-sheet #ke-resv-done-btn {
    display:            flex !important;
    align-items:        center !important;
    justify-content:    center !important;
    gap:                8px !important;
    width:              100% !important;
    padding:            14px 24px !important;
    border:             none !important;
    border-radius:      100px !important;
    font-family:        var(--kep-font) !important;
    font-size:          15px !important;
    font-weight:        600 !important;
    line-height:        1.2 !important;
    letter-spacing:     -0.2px !important;
    text-align:         center !important;
    text-decoration:    none !important;
    text-shadow:        none !important;
    box-shadow:         none !important;
    cursor:             pointer !important;
    pointer-events:     auto !important;
    margin:             0 !important;
    box-sizing:         border-box !important;
    -webkit-appearance: none !important;
    appearance:         none !important;
    transition:         opacity 0.15s ease, filter 0.15s ease !important;
}

/* Primary (accent) variant — flat accent color, no gradient, no shadow. */
#ke-checkout-sheet .ke-sheet-btn-primary,
#ke-checkout-sheet .ke-download-ticket-btn,
#ke-checkout-sheet #ke-sheet-submit,
#ke-checkout-sheet #ke-sheet-continue,
#ke-checkout-sheet #ke-confirmation-done,
#ke-checkout-sheet #ke-sheet-login-btn,
#ke-resv-sheet .ke-sheet-btn-primary,
#ke-resv-sheet #ke-resv-continue,
#ke-resv-sheet #ke-resv-submit,
#ke-resv-sheet #ke-resv-done-btn {
    background:         var(--kep-accent-1) !important;
    background-color:   var(--kep-accent-1) !important;
    background-image:   none !important;
    color:              #ffffff !important;
}

#ke-checkout-sheet .ke-sheet-btn-primary:hover,
#ke-checkout-sheet .ke-download-ticket-btn:hover,
#ke-checkout-sheet #ke-sheet-submit:hover,
#ke-checkout-sheet #ke-sheet-continue:hover,
#ke-checkout-sheet #ke-confirmation-done:hover,
#ke-checkout-sheet #ke-sheet-login-btn:hover,
#ke-resv-sheet .ke-sheet-btn-primary:hover,
#ke-resv-sheet #ke-resv-continue:hover,
#ke-resv-sheet #ke-resv-submit:hover,
#ke-resv-sheet #ke-resv-done-btn:hover {
    opacity:            0.92 !important;
    filter:             brightness(0.97) !important;
    color:              #ffffff !important;
    transform:          none !important;
    box-shadow:         none !important;
}

#ke-checkout-sheet .ke-sheet-btn-primary:active,
#ke-checkout-sheet .ke-download-ticket-btn:active,
#ke-checkout-sheet #ke-sheet-submit:active,
#ke-checkout-sheet #ke-sheet-continue:active,
#ke-checkout-sheet #ke-confirmation-done:active,
#ke-checkout-sheet #ke-sheet-login-btn:active,
#ke-resv-sheet .ke-sheet-btn-primary:active,
#ke-resv-sheet #ke-resv-continue:active,
#ke-resv-sheet #ke-resv-submit:active,
#ke-resv-sheet #ke-resv-done-btn:active {
    opacity:            0.85 !important;
    transform:          none !important;
}

#ke-checkout-sheet .ke-sheet-btn-primary:disabled,
#ke-checkout-sheet #ke-sheet-submit:disabled,
#ke-checkout-sheet #ke-sheet-continue:disabled,
#ke-checkout-sheet #ke-confirmation-done:disabled,
#ke-resv-sheet .ke-sheet-btn-primary:disabled,
#ke-resv-sheet #ke-resv-continue:disabled,
#ke-resv-sheet #ke-resv-submit:disabled {
    opacity:            0.4 !important;
    cursor:             not-allowed !important;
    filter:             none !important;
}

/* Secondary (Create account) — neutral surface, beats primary where both
   classes coexist, and beats theme <a> styles via specificity. */
#ke-checkout-sheet .ke-sheet-btn-secondary,
#ke-checkout-sheet #ke-sheet-register-btn {
    background:         rgba(9,9,11,0.04) !important;
    background-color:   rgba(9,9,11,0.04) !important;
    background-image:   none !important;
    color:              #09090b !important;
    border:             none !important;
}

#ke-checkout-sheet .ke-sheet-btn-secondary:hover,
#ke-checkout-sheet #ke-sheet-register-btn:hover {
    background:         rgba(9,9,11,0.07) !important;
    background-color:   rgba(9,9,11,0.07) !important;
    color:              #09090b !important;
    opacity:            1 !important;
    filter:             none !important;
    transform:          none !important;
}

#ke-checkout-sheet .ke-sheet-btn-secondary:active,
#ke-checkout-sheet #ke-sheet-register-btn:active {
    background:         rgba(9,9,11,0.10) !important;
    background-color:   rgba(9,9,11,0.10) !important;
    opacity:            1 !important;
}

#ke-sheet-minus,
#ke-sheet-plus {
    all:                unset !important;
    box-sizing:         border-box !important;
    width:              40px !important;
    height:             40px !important;
    display:            flex !important;
    align-items:        center !important;
    justify-content:    center !important;
    background:         transparent !important;
    border:             none !important;
    color:              var(--kep-ink-2) !important;
    font-size:          20px !important;
    font-weight:        400 !important;
    cursor:             pointer !important;
    pointer-events:     auto !important;
    -webkit-appearance: none !important;
    appearance:         none !important;
    font-family:        var(--kep-font) !important;
    transition:         background var(--kep-duration-fast) ease !important;
    line-height:        1 !important;
}

#ke-sheet-close-btn {
    all:                unset !important;
    box-sizing:         border-box !important;
    position:           absolute !important;
    top:                16px !important;
    right:              16px !important;
    left:               auto !important;
    width:              32px !important;
    height:             32px !important;
    display:            flex !important;
    align-items:        center !important;
    justify-content:    center !important;
    background:         rgba(9,9,11,0.04) !important;
    border:             none !important;
    border-radius:      50% !important;
    cursor:             pointer !important;
    pointer-events:     auto !important;
    color:              #09090b !important;
    padding:            0 !important;
    transition:         background 0.15s ease !important;
    z-index:            10 !important;
}

#ke-sheet-close-btn:hover {
    background:         rgba(9,9,11,0.08) !important;
    color:              #09090b !important;
}

#ke-sheet-close-btn svg {
    width:              16px !important;
    height:             16px !important;
    stroke-width:       2.5 !important;
}

/* Handle */
.ke-sheet-handle {
    width:              36px;
    height:             4px;
    background:         rgba(9,9,11,0.12);
    border-radius:      2px;
    margin:             0 auto 20px;
}

.ke-sheet-header {
    padding:            0 56px 20px 24px;
    border-bottom:      1px solid var(--kep-border-soft);
}

.ke-sheet-title {
    font-size:          18px;
    font-weight:        700;
    color:              var(--kep-ink);
    letter-spacing:     -0.3px;
    margin:             0 0 4px;
}

.ke-sheet-subtitle {
    font-size:          13px;
    color:              var(--kep-ink-3);
}

.ke-sheet-body {
    padding:            20px 24px 0;
}

/* ─── Quantity stepper ───────────────────────────────────── */
.ke-sheet-step {}

.ke-sheet-qty-row {
    display:            flex;
    align-items:        center;
    justify-content:    space-between;
    margin-bottom:      24px;
}

.ke-sheet-qty-label {
    font-size:          15px;
    font-weight:        600;
    color:              var(--kep-ink);
    letter-spacing:     -0.2px;
}

.ke-sheet-qty-ticket {
    font-size:          13px;
    color:              var(--kep-ink-3);
    margin-top:         2px;
}

/* Stepper control */
.ke-stepper {
    display:            flex;
    align-items:        center;
    gap:                0;
    background:         var(--kep-surface-2);
    border:             1.5px solid var(--kep-border);
    border-radius:      var(--kep-r-pill);
    overflow:           hidden;
}

.ke-sheet .ke-stepper-btn,
.ke-stepper-btn {
    all:                unset !important;
    box-sizing:         border-box;
    width:              40px;
    height:             40px;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    background:         transparent;
    border:             none;
    color:              var(--kep-ink-2);
    font-size:          20px;
    font-weight:        400;
    cursor:             pointer;
    pointer-events:     auto;
    -webkit-appearance: none;
    appearance:         none;
    font-family:        var(--kep-font);
    transition:         background var(--kep-duration-fast) ease;
    line-height:        1;
}

.ke-sheet .ke-stepper-btn:hover,
.ke-stepper-btn:hover   { background: rgba(9,9,11,0.05); }
.ke-sheet .ke-stepper-btn:active,
.ke-stepper-btn:active  { background: rgba(9,9,11,0.10); }

.ke-stepper-val {
    min-width:          36px;
    text-align:         center;
    font-size:          17px;
    font-weight:        700;
    color:              var(--kep-ink);
    letter-spacing:     -0.3px;
}

/* ─── Price breakdown ────────────────────────────────────── */
.ke-sheet-breakdown {
    background:         var(--kep-surface-2);
    border:             1.5px solid var(--kep-border-soft);
    border-radius:      var(--kep-r-sm);
    overflow:           hidden;
    margin-bottom:      20px;
}

.ke-breakdown-row {
    display:            flex;
    justify-content:    space-between;
    align-items:        center;
    padding:            13px 16px;
    font-size:          14px;
    color:              var(--kep-ink-2);
    border-bottom:      1px solid var(--kep-border-soft);
}

.ke-breakdown-row:last-child {
    border-bottom:      none;
    padding:            14px 16px;
}

.ke-breakdown-total {
    font-size:          15px;
    font-weight:        700;
    color:              var(--kep-ink);
}

.ke-breakdown-total-amount {
    font-size:          20px;
    font-weight:        800;
    color:              var(--kep-ink);
    letter-spacing:     -0.5px;
}

/* ─── Sheet action buttons (class-level; ID-scoped block above wins) ─── */
.ke-sheet .ke-sheet-btn,
.ke-sheet-btn {
    box-sizing:         border-box;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    gap:                8px;
    width:              100%;
    padding:            14px 24px;
    border:             none;
    border-radius:      100px;
    font-family:        var(--kep-font);
    font-size:          15px;
    font-weight:        600;
    letter-spacing:     -0.2px;
    cursor:             pointer;
    pointer-events:     auto;
    -webkit-appearance: none;
    appearance:         none;
    text-decoration:    none;
    transition:         opacity 0.15s ease, filter 0.15s ease;
    margin:             0;
}

.ke-sheet .ke-sheet-btn-primary,
.ke-sheet-btn-primary {
    background:         var(--kep-accent-1) !important;
    background-color:   var(--kep-accent-1) !important;
    color:              #ffffff !important;
    box-shadow:         none !important;
    text-shadow:        none !important;
}

.ke-sheet-btn-primary:hover {
    opacity:            0.92;
    transform:          none;
    filter:             brightness(0.97);
    box-shadow:         none;
}

.ke-sheet-btn-primary:active {
    opacity:            0.85;
    transform:          none;
    transition-duration: 0.08s;
}

.ke-sheet-btn-primary:disabled {
    opacity:            0.4;
    cursor:             not-allowed;
    transform:          none;
    box-shadow:         none;
    filter:             none;
}

/* ─── Sheet form inputs ──────────────────────────────────── */
.ke-sheet-section-label {
    font-size:          12px;
    font-weight:        700;
    text-transform:     uppercase;
    letter-spacing:     0.6px;
    color:              var(--kep-ink-3);
    margin-bottom:      12px;
}

/* Section group ("PURCHASER (ATTENDEE 1)" / "RESERVATION HOLDER").
   Used by both the tickets and reservation sheets. No framed
   container — just a top divider + vertical rhythm so the small
   uppercase header label hangs naturally above its fields. The
   first group in a form has no top divider. */
.ke-sheet-attendee {
    background:         transparent;
    border:             none;
    border-radius:      0;
    padding:            0;
    margin-bottom:      20px;
}
.ke-sheet-attendee + .ke-sheet-attendee {
    margin-top:         8px;
    padding-top:        20px;
    border-top:         1px solid var(--kep-border-soft);
}

.ke-sheet-attendee-header {
    font-size:          11px;
    font-weight:        700;
    color:              var(--kep-ink-3);
    text-transform:     uppercase;
    letter-spacing:     0.8px;
    margin-bottom:      14px;
}

.ke-sheet-field {
    margin-bottom:      4px;
}

.ke-sheet-field:last-child { margin-bottom: 0; }

/* Borderless inputs with only a thin bottom underline — same minimal
   style used by both modals. Vertical padding keeps the tap target
   ≥ 44px without needing a heavy bordered box. */
.ke-sheet-field input,
.ke-sheet-field select,
.ke-sheet-field textarea {
    width:              100%;
    padding:            14px 0;
    background:         transparent;
    border:             none;
    border-bottom:      1px solid var(--kep-border);
    border-radius:      0;
    font-family:        var(--kep-font);
    font-size:          15px;
    color:              var(--kep-ink);
    transition:         border-color var(--kep-duration-fast) ease;
    outline:            none;
    box-shadow:         none;
}

.ke-sheet-field input::placeholder,
.ke-sheet-field textarea::placeholder {
    color:              var(--kep-ink-4);
}

.ke-sheet-field input:focus,
.ke-sheet-field select:focus,
.ke-sheet-field textarea:focus {
    border-bottom-color: var(--kep-accent-1);
    box-shadow:         none;
}

.ke-sheet-field textarea {
    min-height:         72px;
    max-height:         200px;
    resize:             vertical;
    padding:            12px 0;
    line-height:        1.5;
}

.ke-field-label {
    display:            block;
    font-size:          12.5px;
    font-weight:        600;
    color:              var(--kep-ink-2);
    margin-bottom:      2px;
}
.ke-field-helper {
    margin-top:         6px;
    font-size:          12px;
    color:              var(--kep-ink-4);
    line-height:        1.4;
}
/* Required-asterisk and optional-suffix — used by both ticket and
   reservation sheets so labels look identical across flows. */
.ke-required {
    color:              var(--kep-accent-1);
    font-weight:        700;
    margin-left:        2px;
}
.ke-optional {
    color:              var(--kep-ink-4);
    font-weight:        500;
    margin-left:        4px;
}

/* ─── Messages ───────────────────────────────────────────── */
.ke-sheet-msg {
    display:            none;
    padding:            12px 16px;
    border-radius:      var(--kep-r-xs);
    font-size:          13.5px;
    font-weight:        500;
    margin-bottom:      16px;
    line-height:        1.4;
}

.ke-sheet-msg.ke-msg-success {
    display:            block;
    background:         rgba(16,185,129,0.08);
    border:             1px solid rgba(16,185,129,0.2);
    color:              #059669;
}

.ke-sheet-msg.ke-msg-error {
    display:            block;
    background:         rgba(239,68,68,0.08);
    border:             1px solid rgba(239,68,68,0.2);
    color:              var(--kep-red);
}

.ke-sheet-terms {
    text-align:         center;
    font-size:          11.5px;
    color:              var(--kep-ink-4);
    line-height:        1.5;
    margin:             12px 0 0;
    padding:            0;
}

.ke-sheet-footer {
    display:            flex;
    flex-direction:     column;
    gap:                0;
    padding:            16px 24px 24px;
}

/* ─── Sheet: login-required (blocked) step ───────────────── */
.ke-sheet-step-blocked .ke-sheet-header {
    text-align:         center;
    border-bottom:      none;
    padding:            0 56px 0 56px;
}

.ke-sheet-step-blocked .ke-sheet-title {
    font-size:          22px;
    font-weight:        700;
}

.ke-sheet-step-blocked .ke-sheet-body {
    display:            flex;
    flex-direction:     column;
    align-items:        center;
    justify-content:    center;
    text-align:         center;
    padding:            24px 24px 8px;
    gap:                18px;
}

.ke-sheet-blocked-icon {
    display:            inline-flex;
    align-items:        center;
    justify-content:    center;
    width:              96px;
    height:             96px;
    margin:             0 auto;
    border-radius:      50%;
    background:         rgba(var(--kep-accent-rgb),0.1);
    color:              var(--kep-accent-1);
}

.ke-sheet-blocked-icon svg {
    width:              40px;
    height:             40px;
}

.ke-sheet-blocked-msg {
    font-size:          15px;
    line-height:        1.5;
    color:              var(--kep-ink-2);
    margin:             0 auto;
    max-width:          320px;
}

.ke-sheet-step-blocked .ke-sheet-footer {
    display:            flex;
    flex-direction:     column;
    gap:                10px;
    padding:            20px 24px 24px;
}

.ke-sheet-btn-secondary {
    background:         rgba(9,9,11,0.04) !important;
    background-color:   rgba(9,9,11,0.04) !important;
    color:              #09090b !important;
    border:             none !important;
    box-shadow:         none !important;
    text-decoration:    none !important;
}

.ke-sheet-btn-secondary:hover {
    background:         rgba(9,9,11,0.07) !important;
    background-color:   rgba(9,9,11,0.07) !important;
    color:              #09090b !important;
    opacity:            1 !important;
    filter:             none !important;
}

/* ─── Sheet close button ─────────────────────────────────── */
.ke-sheet .ke-sheet-close,
.ke-sheet-close {
    box-sizing:         border-box;
    position:           absolute;
    top:                16px;
    right:              16px;
    left:               auto;
    width:              32px;
    height:             32px;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    background:         rgba(9,9,11,0.04);
    border:             none;
    border-radius:      50%;
    cursor:             pointer;
    pointer-events:     auto;
    padding:            0;
    -webkit-appearance: none;
    appearance:         none;
    color:              #09090b;
    transition:         background 0.15s ease;
    flex-shrink:        0;
    z-index:            10;
}

.ke-sheet .ke-sheet-close:hover,
.ke-sheet-close:hover {
    background:         rgba(9,9,11,0.08);
    color:              #09090b;
}

/* ─── Confirmation screen ────────────────────────────────── */
.ke-confirmation {
    padding:            8px 0 4px;
    text-align:         center;
}

.ke-confirmation-icon {
    font-size:          40px;
    line-height:        1;
    margin-bottom:      12px;
}

.ke-confirmation-title {
    font-size:          20px;
    font-weight:        800;
    color:              var(--kep-ink);
    letter-spacing:     -0.5px;
    margin-bottom:      6px;
}

.ke-confirmation-msg {
    font-size:          13.5px;
    color:              var(--kep-ink-3);
    line-height:        1.5;
    margin-bottom:      20px;
}

.ke-confirmation-tickets {
    display:            flex;
    flex-direction:     column;
    gap:                12px;
    margin-bottom:      8px;
}

/* ─── Confirmation ticket — vertical card layout ─────────── */
.ke-confirmation-ticket {
    display:            flex !important;
    flex-direction:     column !important;
    align-items:        center !important;
    background:         var(--kep-surface-2) !important;
    border:             1.5px solid var(--kep-border-soft) !important;
    border-radius:      16px !important;
    padding:            20px !important;
    text-align:         center !important;
    gap:                8px !important;
}

.ke-confirmation-qr-wrap {
    display:            flex !important;
    justify-content:    center !important;
    margin-bottom:      4px !important;
}

.ke-qr-img-large {
    width:              200px !important;
    height:             200px !important;
    border-radius:      12px !important;
    display:            block !important;
    background:         #f4f4f5 !important;
}

.ke-confirmation-ticket-meta {
    width:              100%;
    text-align:         center;
}

.ke-confirmation-attendee {
    font-size:          16px !important;
    font-weight:        700 !important;
    color:              var(--kep-ink) !important;
    margin-bottom:      2px !important;
}

.ke-confirmation-code {
    font-size:          12px !important;
    font-weight:        700 !important;
    color:              var(--kep-ink-4) !important;
    letter-spacing:     1px !important;
    font-family:        'SF Mono', 'Fira Code', monospace !important;
    margin-bottom:      4px !important;
}

.ke-download-ticket-btn {
    display:            flex !important;
    align-items:        center !important;
    justify-content:    center !important;
    gap:                8px !important;
    width:              100% !important;
    padding:            14px 24px !important;
    background:         var(--kep-accent-1) !important;
    background-color:   var(--kep-accent-1) !important;
    color:              #ffffff !important;
    text-align:         center !important;
    text-decoration:    none !important;
    border-radius:      100px !important;
    font-size:          15px !important;
    font-weight:        600 !important;
    font-family:        var(--kep-font) !important;
    margin-top:         8px !important;
    box-sizing:         border-box !important;
    box-shadow:         none !important;
    text-shadow:        none !important;
    transition:         opacity var(--kep-duration-fast) ease,
                        filter var(--kep-duration-fast) ease !important;
}
.ke-download-ticket-btn:hover {
    opacity:            0.92 !important;
    color:              #ffffff !important;
    text-decoration:    none !important;
    transform:          none !important;
    filter:             brightness(0.97) !important;
    box-shadow:         none !important;
}
.ke-download-ticket-btn:active {
    opacity:            0.85 !important;
    transform:          none !important;
}

/* ─── Spinner ────────────────────────────────────────────── */
.ke-spinner {
    display:            inline-block;
    width:              16px;
    height:             16px;
    border:             2px solid rgba(255,255,255,0.35);
    border-top-color:   #ffffff;
    border-radius:      50%;
    animation:          ke-spin 0.55s linear infinite;
    vertical-align:     middle;
}

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

/* ═══════════════════════════════════════════════════════════
   EVENT ARCHIVE GRID
   ═══════════════════════════════════════════════════════════ */

.ke-events-grid {
    display:            grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap:                18px;
}

.ke-archive-card {
    background:         var(--kep-surface);
    border:             1.5px solid var(--kep-border);
    border-radius:      var(--kep-r-md);
    overflow:           hidden;
    transition:         transform var(--kep-duration) var(--kep-ease),
                        box-shadow var(--kep-duration) var(--kep-ease),
                        border-color var(--kep-duration) ease;
    box-shadow:         var(--kep-shadow-sm);
    text-decoration:    none;
    display:            block;
    color:              inherit;
}

.ke-archive-card:hover {
    transform:          translateY(-4px);
    box-shadow:         var(--kep-shadow-xl);
    border-color:       rgba(var(--kep-accent-rgb),0.18);
}

.ke-archive-thumb {
    width:              100%;
    height:             196px;
    object-fit:         cover;
    display:            block;
    background:         var(--kep-surface-2);
}

.ke-archive-thumb-placeholder {
    width:              100%;
    height:             196px;
    background:         linear-gradient(135deg, #f4f4f5, #e4e4e7);
    display:            flex;
    align-items:        center;
    justify-content:    center;
    font-size:          52px;
}

.ke-archive-body {
    padding:            20px;
}

.ke-archive-cat {
    display:            inline-flex;
    align-items:        center;
    padding:            3px 10px;
    background:         var(--kep-accent-soft);
    color:              var(--kep-accent-1);
    border-radius:      var(--kep-r-pill);
    font-size:          10px;
    font-weight:        700;
    letter-spacing:     0.5px;
    text-transform:     uppercase;
    margin-bottom:      10px;
}

.ke-archive-title {
    font-size:          19px;
    font-weight:        700;
    color:              var(--kep-ink);
    letter-spacing:     -0.3px;
    line-height:        1.25;
    margin:             0 0 12px;
}

.ke-archive-meta {
    display:            flex;
    flex-direction:     column;
    gap:                6px;
    margin-bottom:      16px;
}

.ke-archive-meta-row {
    display:            flex;
    align-items:        center;
    gap:                7px;
    font-size:          13px;
    color:              var(--kep-ink-3);
}

.ke-archive-meta-icon {
    width:              14px;
    height:             14px;
    flex-shrink:        0;
    opacity:            0.6;
}

.ke-archive-footer {
    display:            flex;
    align-items:        center;
    justify-content:    space-between;
    padding-top:        14px;
    border-top:         1.5px solid var(--kep-border-soft);
}

.ke-archive-price {
    font-size:          18px;
    font-weight:        800;
    color:              var(--kep-ink);
    letter-spacing:     -0.4px;
}

.ke-archive-btn {
    display:            inline-flex;
    align-items:        center;
    padding:            8px 18px;
    background:         var(--kep-accent-grad);
    color:              #ffffff;
    border-radius:      var(--kep-r-pill);
    font-size:          13px;
    font-weight:        600;
    text-decoration:    none;
    transition:         opacity var(--kep-duration-fast) ease;
}

.ke-archive-card:hover .ke-archive-btn {
    opacity:            0.88;
}

/* ─── Empty / Error ──────────────────────────────────────── */
.ke-empty {
    text-align:         center;
    padding:            80px 24px;
    color:              var(--kep-ink-3);
    font-size:          15px;
}

/* ═══════════════════════════════════════════════════════════
   SECTION DIVIDER
   ═══════════════════════════════════════════════════════════ */

.ke-section-divider {
    border-top:         1.5px solid var(--kep-border-soft);
    padding-top:        52px;
    margin-top:         8px;
}

/* ═══════════════════════════════════════════════════════════
   GOOGLE MAPS EMBED
   ═══════════════════════════════════════════════════════════ */

.ke-map-section {}

.ke-map-embed {
    position:           relative;
    width:              100%;
    border-radius:      var(--kep-r-md);
    overflow:           hidden;
    box-shadow:         var(--kep-shadow-md);
    background:         var(--kep-surface-2);
    /* aspect-ratio fallback via padding-bottom trick */
    aspect-ratio:       16 / 7;
}

/* Force iframe to fill container completely */
.ke-map-embed iframe {
    position:           absolute;
    inset:              0;
    width:              100% !important;
    height:             100% !important;
    border:             0 !important;
    display:            block;
}

/* Fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 16 / 7) {
    .ke-map-embed {
        padding-bottom: 43.75%; /* 7/16 */
        height:         0;
    }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — TABLET  (≤ 1024px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .ke-hero-inner {
        max-width:      100%;
        padding:        44px 24px 52px;
        grid-template-columns: 240px 1fr;
        gap:            36px;
    }

    .ke-event-body {
        max-width:      100%;
        padding:        0 20px;
    }

    .ke-ticket-inner {
        padding:        20px 20px;
    }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE  (≤ 640px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

    /* ── Hero ──────────────────────────────────────────────── */
    .ke-hero-inner {
        grid-template-columns: 1fr;
        padding:        32px 20px 44px;
        gap:            28px;
    }

    .ke-hero-poster-wrap {
        max-width:      300px;
        margin:         0 auto;
        width:          100%;
    }

    .ke-hero-cats {
        gap:            6px;
    }

    .ke-hero-title {
        font-size:      clamp(1.6rem, 7vw, 2.4rem);
        letter-spacing: -0.8px;
        margin-bottom:  14px;
    }

    .ke-hero-meta {
        gap:            8px;
        margin-bottom:  0;
        flex-wrap:      wrap;
    }

    .ke-meta-item {
        padding:        8px 12px;
        gap:            7px;
    }

    .ke-meta-primary {
        font-size:      13px;
    }

    .ke-meta-secondary {
        font-size:      11px;
    }

    .ke-hero-organizer {
        margin-bottom:  12px;
    }

    /* ── Content body ──────────────────────────────────────── */
    .ke-event-body {
        padding:        0 16px;
    }

    .ke-content-section {
        padding-top:    36px;
    }

    .ke-section-divider {
        padding-top:    36px;
        margin-top:     4px;
    }

    .ke-section-title {
        font-size:      19px;
        margin-bottom:  18px;
    }

    /* ── Ticket cards ──────────────────────────────────────── */
    .ke-tickets-list {
        gap:            8px;
    }

    .ke-event-page .ke-ticket {
        border-radius:  var(--kep-r-sm);
    }

    .ke-ticket-inner {
        padding:        16px 16px;
        gap:            12px;
    }

    .ke-ticket-name {
        font-size:      15px;
    }

    .ke-ticket-desc {
        font-size:      12.5px;
    }

    .ke-ticket-price {
        font-size:      20px;
    }

    .ke-ticket-price-free {
        font-size:      17px;
    }

    .ke-ticket-arrow {
        width:          28px;
        height:         28px;
    }

    /* ── About text ────────────────────────────────────────── */
    .ke-about-text {
        font-size:      15px;
        line-height:    1.72;
    }

    /* ── Map embed ─────────────────────────────────────────── */
    .ke-map-embed {
        aspect-ratio:   4 / 3;
        border-radius:  var(--kep-r-sm);
    }

    @supports not (aspect-ratio: 4 / 3) {
        .ke-map-embed {
            padding-bottom: 75%;
        }
    }

    /* ── Bottom sheet ──────────────────────────────────────── */
    .ke-sheet {
        max-width:      100%;
        border-radius:  22px 22px 0 0;
    }

    .ke-sheet-header {
        padding:        0 20px 16px;
    }

    .ke-sheet-body {
        padding:        16px 20px 0;
    }

    .ke-sheet-footer {
        padding:        12px 20px 20px;
    }

    .ke-sheet-btn {
        padding:        14px;
        font-size:      15px;
    }

    .ke-stepper-btn {
        width:          44px;
        height:         44px;
    }

    .ke-stepper-val {
        min-width:      40px;
        font-size:      16px;
    }
}

.ke-empty-icon {
    font-size:          52px;
    display:            block;
    margin-bottom:      16px;
}

.ke-error {
    color:              var(--kep-red);
    text-align:         center;
    padding:            24px;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .ke-hero-inner {
        grid-template-columns: 1fr;
        padding:        36px 20px 48px;
        gap:            32px;
    }

    .ke-hero-poster-wrap {
        max-width:      320px;
        margin:         0 auto;
        width:          100%;
    }

    .ke-hero-title {
        letter-spacing: -0.8px;
    }

    .ke-hero-meta {
        flex-direction: column;
        gap:            8px;
    }

    .ke-meta-item {
        align-self:     flex-start;
    }

    .ke-event-body {
        padding:        0 16px;
    }

    .ke-content-section {
        padding-top:    40px;
    }

    .ke-ticket-price {
        font-size:      20px;
    }

    .ke-sheet {
        max-width:      100%;
        border-radius:  22px 22px 0 0;
    }

    .ke-events-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .ke-hero-poster-wrap {
        max-width:      260px;
    }

    .ke-cta-btn {
        width:          100%;
        justify-content: center;
    }

    .ke-ticket-inner {
        padding:        18px 16px;
    }

    .ke-ticket-arrow {
        display:        none;
    }
}

/* ── Share buttons — liquid glass style (matches .ke-meta-item) ──────────── */
.ke-hero-share {
    display:    flex;
    gap:        6px;
    flex-wrap:  wrap;
    margin-top: 12px;
}

.ke-share-pill {
    width:                    32px;
    height:                   32px;
    display:                  inline-flex;
    align-items:              center;
    justify-content:          center;
    background:               rgba(255, 255, 255, 0.10);
    backdrop-filter:          blur(16px) saturate(160%);
    -webkit-backdrop-filter:  blur(16px) saturate(160%);
    border:                   1px solid rgba(255, 255, 255, 0.18);
    border-radius:            50%;
    color:                    rgba(255, 255, 255, 0.90);
    text-decoration:          none;
    cursor:                   pointer;
    transition:               background 0.2s ease, transform 0.2s ease, color 0.2s ease;
    padding:                  0;
    -webkit-appearance:       none;
    appearance:               none;
}

.ke-share-pill:hover {
    background:      rgba(255, 255, 255, 0.18);
    color:           #ffffff;
    transform:       translateY(-1px);
    text-decoration: none;
}

.ke-share-pill:active {
    transform: scale(0.95);
}

.ke-share-pill svg {
    flex-shrink: 0;
    opacity:     0.95;
}

.ke-share-copied {
    background:   rgba(16, 185, 129, 0.20) !important;
    border-color: rgba(16, 185, 129, 0.40) !important;
    color:        #10b981 !important;
}

/* WordPress.com button guard for the hero share pills. Scoped under .ke-hero
   so base (0,2,0) and pseudo-states (0,3,0) beat WP.com's [type=button] and
   [type=button]:focus/:hover globals — never leaving background/border/color
   undeclared for WP.com to fill with magenta. */
.ke-hero .ke-share-pill,
.ke-hero .ke-share-pill:hover,
.ke-hero .ke-share-pill:focus,
.ke-hero .ke-share-pill:focus-visible,
.ke-hero .ke-share-pill:active {
    background:    rgba(255, 255, 255, 0.10);
    border:        1px solid rgba(255, 255, 255, 0.18);
    color:         rgba(255, 255, 255, 0.90);
    border-radius: 50%;
    box-shadow:    none;
}
.ke-hero .ke-share-pill:hover {
    background: rgba(255, 255, 255, 0.18);
    color:      #ffffff;
}
.ke-hero .ke-share-pill:focus { outline: none; }
.ke-hero .ke-share-pill:focus-visible {
    outline:        2px solid var(--kep-accent-1, #6366f1);
    outline-offset: 2px;
}

/* "Enlace copiado ✓" toast for the Compartir fallback. Absolutely positioned
   under the share row so it never adds a gap between the buttons; toggled via
   visibility + opacity (not the hidden attribute — an author `display` would
   defeat the UA [hidden] rule and leave it occupying flex space). */
.ke-hero-share { position: relative; }
.ke-share-toast {
    position:       absolute;
    left:           0;
    top:            calc(100% + 6px);
    display:        inline-flex;
    align-items:    center;
    white-space:    nowrap;
    font-size:      12px;
    font-weight:    600;
    color:          #10b981;
    background:     rgba(16, 185, 129, 0.15);
    border:         1px solid rgba(16, 185, 129, 0.35);
    border-radius:  999px;
    padding:        4px 10px;
    opacity:        0;
    visibility:     hidden;
    transform:      translateY(2px);
    pointer-events: none;
    transition:     opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index:        3;
}
.ke-share-toast.is-visible {
    opacity:    1;
    visibility: visible;
    transform:  translateY(0);
}

@media (max-width: 640px) {
    .ke-hero-share {
        gap:        5px;
        margin-top: 10px;
    }
    .ke-share-pill {
        width:  30px;
        height: 30px;
    }
}

/* ── Hero social link pills ──────────────────────────────────────────────── */
.ke-hero-socials {
    display:        flex;
    gap:            8px;
    flex-wrap:      wrap;
    margin-top:     14px;
}

.ke-social-pill {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         7px 14px;
    border-radius:   100px;
    font-size:       13px;
    font-weight:     500;
    text-decoration: none;
    color:           rgba(255,255,255,.90);
    background:      rgba(255,255,255,.10);
    border:          1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    transition:      background .18s, transform .18s, border-color .18s;
    white-space:     nowrap;
}
.ke-social-pill:hover {
    background:      rgba(255,255,255,.20);
    border-color:    rgba(255,255,255,.30);
    transform:       translateY(-1px);
    color:           #fff;
}
.ke-social-pill svg { flex-shrink: 0; }

/* ─── Event extras ────────────────────────────────────── */
.ke-extra { margin-top: 32px; }

/* Sold-out bar */
.ke-soldout-bar {
    width: 100%;
    height: 12px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 8px;
}
.ke-soldout-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .4s cubic-bezier(.16,1,.3,1);
}
.ke-soldout-caption {
    margin: 10px 0 0;
    font-size: 13px;
    color: #64748b;
}
.ke-soldout-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
    background: #0f172a;
    color: #fff;
}
.ke-soldout-badge--live {
    background: var(--kep-accent-1, #6366f1);
}
.ke-soldout-circle {
    --pct: 0;
    --color: var(--kep-accent-1, #6366f1);
    width: 120px; height: 120px;
    border-radius: 50%;
    background: conic-gradient(var(--color) calc(var(--pct) * 1%), #f1f5f9 0);
    display: grid; place-items: center;
    position: relative;
}
.ke-soldout-circle::before {
    content: '';
    position: absolute;
    inset: 10px;
    background: #fff;
    border-radius: 50%;
}
.ke-soldout-circle span {
    position: relative;
    font-weight: 700;
    font-size: 20px;
    color: #0f172a;
}

/* Countdown */
.ke-countdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 12px;
    margin-top: 12px;
    max-width: 520px;
}
.ke-countdown-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 8px;
    background: #f8fafc;
    border-radius: 14px;
}
.ke-countdown-num {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.ke-countdown-unit {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748b;
}
.ke-countdown-live {
    margin-top: 12px;
    font-weight: 600;
    color: #059669;
}

/* Lineup — horizontal scroll row of circular avatars */
.ke-extra-lineup .ke-section-label {
    color: var(--kep-accent-1, #6366f1);
}
.ke-lineup-scroll {
    display: flex;
    gap: 22px;
    margin-top: 12px;
    padding: 4px 2px 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.ke-lineup-scroll::-webkit-scrollbar { height: 6px; }
.ke-lineup-scroll::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.15);
    border-radius: 4px;
}
.ke-lineup-card {
    flex: 0 0 auto;
    width: 96px;
    text-align: center;
    scroll-snap-align: start;
}
.ke-lineup-photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #e2e8f0 center / cover no-repeat;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 6px 18px rgba(15, 23, 42, 0.10);
    transition: box-shadow .2s ease, transform .2s ease;
}
.ke-lineup-card:hover .ke-lineup-photo {
    box-shadow: 0 0 0 3px var(--kep-accent-1, #6366f1), 0 10px 22px rgba(var(--kep-accent-rgb, 99, 102, 241), 0.25);
    transform: translateY(-2px);
}
.ke-lineup-photo--placeholder {
    display: grid;
    place-items: center;
    background: var(--kep-accent-grad, linear-gradient(135deg, #6366f1, #6366f1));
    color: #fff;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
}
.ke-lineup-name {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640px) {
    .ke-lineup-scroll { gap: 16px; }
    .ke-lineup-card { width: 72px; }
    .ke-lineup-photo { width: 72px; height: 72px; }
    .ke-lineup-photo--placeholder { font-size: 26px; }
    .ke-lineup-name { font-size: 12px; margin-top: 8px; }
}

/* Gallery — snap-scroll carousel + lightbox */
.ke-extra-gallery {
    --ke-gal-gap: 12px;
    --ke-gal-perview: 3;
}
.ke-extra-gallery .ke-section-label {
    color: var(--kep-accent-1, #6366f1);
}

.ke-gallery-wrap {
    position: relative;
    margin-top: 12px;
}

.ke-gallery-carousel {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--ke-gal-gap);
    padding: 4px 2px 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.ke-gallery-carousel::-webkit-scrollbar { height: 6px; }
.ke-gallery-carousel::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.15);
    border-radius: 4px;
}

.ke-gallery-slide {
    position: relative;
    flex: 0 0 calc((100% - (var(--ke-gal-perview) - 1) * var(--ke-gal-gap)) / var(--ke-gal-perview));
    aspect-ratio: 4 / 3;
    /* Fallback for browsers that ignore aspect-ratio (or themes that override img height). */
    min-height: 180px;
    padding: 0;
    border: none !important;
    outline: none !important;
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    background: transparent;
    cursor: pointer;
    scroll-snap-align: start;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform .2s ease, box-shadow .2s ease;
}
.ke-gallery-slide:hover,
.ke-gallery-slide:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    outline: none;
    border: none !important;
}
.ke-gallery-slide img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    transition: transform .3s ease;
}
.ke-gallery-slide:hover img { transform: scale(1.03); }
.ke-gallery-caption-overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 18px 14px 12px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    background: linear-gradient(to top, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}

/* Arrows — desktop only, fade in on hover. */
.ke-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--kep-accent-1, #6366f1);
    color: #fff;
    cursor: pointer;
    z-index: 2;
    opacity: 0;
    transition: opacity .2s ease, transform .15s ease;
    box-shadow: 0 4px 14px rgba(15,23,42,0.18);
    padding: 0;
}
.ke-gallery-arrow:hover { transform: translateY(-50%) scale(1.05); }
.ke-gallery-arrow:active { transform: translateY(-50%) scale(0.96); }
.ke-gallery-arrow-prev { left: -8px; }
.ke-gallery-arrow-next { right: -8px; }
.ke-gallery-wrap:hover .ke-gallery-arrow,
.ke-gallery-arrow:focus-visible { opacity: 1; }

/* Tablet — 2 per view */
@media (max-width: 1024px) {
    .ke-extra-gallery { --ke-gal-perview: 2; }
}

/* Mobile — peek 1.2, hide arrows, force visible dimensions. */
@media (max-width: 767px) {
    .ke-extra-gallery { --ke-gal-perview: 1.2; --ke-gal-gap: 10px; }
    .ke-gallery-slide {
        border-radius: 14px;
        min-width: 78vw;
        min-height: calc(78vw * 0.75);
    }
    .ke-gallery-arrow { display: none; }
    .ke-gallery-caption-overlay { font-size: 12px; padding: 16px 12px 10px; }
}

/* Lightbox */
.ke-gallery-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.ke-gallery-lightbox.is-open { display: flex; }
.ke-gallery-lightbox .ke-lb-img {
    max-width: min(92vw, 1400px);
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.ke-gallery-lightbox .ke-lb-close,
.ke-gallery-lightbox .ke-lb-prev,
.ke-gallery-lightbox .ke-lb-next {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: background .15s;
}
.ke-gallery-lightbox .ke-lb-prev,
.ke-gallery-lightbox .ke-lb-next,
.ke-gallery-lightbox .ke-lb-close {
    top: 50%;
    transform: translateY(-50%);
}
.ke-gallery-lightbox .ke-lb-close { transform: none; }
.ke-gallery-lightbox .ke-lb-close:hover,
.ke-gallery-lightbox .ke-lb-prev:hover,
.ke-gallery-lightbox .ke-lb-next:hover {
    background: rgba(255, 255, 255, 0.25);
}
.ke-gallery-lightbox .ke-lb-close { top: 18px; right: 18px; font-size: 16px; }
.ke-gallery-lightbox .ke-lb-prev  { left: 18px; }
.ke-gallery-lightbox .ke-lb-next  { right: 18px; }
.ke-gallery-lightbox .ke-lb-caption {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 80vw;
    padding: 10px 16px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 14px;
    border-radius: 8px;
    text-align: center;
    display: none;
}
@media (max-width: 640px) {
    .ke-gallery-lightbox { padding: 12px; }
    .ke-gallery-lightbox .ke-lb-prev  { left: 10px; }
    .ke-gallery-lightbox .ke-lb-next  { right: 10px; }
    .ke-gallery-lightbox .ke-lb-close { top: 12px; right: 12px; }
}

/* Testimonials */
.ke-extra-testimonials { margin-top: 28px; }

.ke-testi-form {
    margin-top: 14px;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
}
.ke-testi-rating {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 10px;
}
.ke-testi-star {
    background: none;
    border: 0;
    padding: 2px;
    cursor: pointer;
    color: #d1d5db;
    transition: color .12s, transform .08s;
    line-height: 0;
}
.ke-testi-star:hover { transform: scale(1.08); }
.ke-testi-star.is-on { color: #f59e0b; }

.ke-testi-textarea {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    color: #0f172a;
    resize: vertical;
    min-height: 72px;
    box-sizing: border-box;
}
.ke-testi-textarea:focus {
    outline: none;
    border-color: var(--kep-accent-1, #6366f1);
    box-shadow: 0 0 0 3px var(--kep-accent-soft, rgba(99,102,241,0.12));
}

.ke-testi-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.ke-testi-status {
    font-size: 12px;
    color: #64748b;
    min-height: 16px;
}
.ke-testi-submit {
    padding: 9px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--kep-accent-grad, linear-gradient(135deg,#6366f1,#818cf8));
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: transform .08s, box-shadow .12s;
}
.ke-testi-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--kep-shadow-accent, 0 8px 20px rgba(99,102,241,.3));
}
.ke-testi-submit:disabled { opacity: .6; cursor: not-allowed; }

.ke-testi-login {
    margin-top: 14px;
    padding: 18px;
    text-align: center;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
}
.ke-testi-login-link {
    color: var(--kep-accent-1, #6366f1);
    font-weight: 600;
    text-decoration: none;
}
.ke-testi-login-link:hover { text-decoration: underline; }

.ke-testi-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}
.ke-testi-empty {
    padding: 28px 16px;
    text-align: center;
    color: #64748b;
    font-size: 13px;
}

.ke-testi-card {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    transition: box-shadow .15s;
}
.ke-testi-card:hover { box-shadow: 0 6px 18px rgba(15,23,42,0.06); }
.ke-testi-card.is-pinned {
    background: linear-gradient(180deg, #fffbeb 0%, #ffffff 60%);
    border-color: #fde68a;
}

.ke-testi-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #e2e8f0;
}
.ke-testi-body { flex: 1; min-width: 0; }
.ke-testi-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #0f172a;
    font-weight: 600;
}
.ke-testi-pin { font-size: 13px; }
.ke-testi-stars {
    display: inline-flex;
    gap: 2px;
    margin: 4px 0;
    color: #d1d5db;
}
.ke-testi-star-sm.is-on { color: #f59e0b; }
.ke-testi-text {
    margin: 4px 0 6px;
    font-size: 14px;
    line-height: 1.5;
    color: #334155;
    white-space: pre-wrap;
    word-break: break-word;
}
.ke-testi-date {
    font-size: 12px;
    color: #94a3b8;
}

.ke-testi-more {
    display: block;
    margin: 18px auto 0;
    padding: 9px 22px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.ke-testi-more:hover:not(:disabled) {
    background: #f8fafc;
    border-color: #cbd5e1;
}
.ke-testi-more:disabled { opacity: .6; cursor: not-allowed; }

/* Schedule — vertical timeline */
.ke-extra-schedule .ke-section-label {
    color: var(--kep-accent-1, #6366f1);
    letter-spacing: .08em;
}
.ke-schedule-timeline {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.ke-schedule-slot {
    display: grid;
    grid-template-columns: 96px 32px 1fr;
    gap: 14px;
    padding: 0;
    position: relative;
}
.ke-schedule-slot + .ke-schedule-slot { margin-top: 2px; }

.ke-schedule-time {
    padding: 14px 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    text-align: right;
    line-height: 1.2;
}

.ke-schedule-marker {
    position: relative;
    display: flex;
    justify-content: center;
}
/* Connector line — drawn from the dot downward. */
.ke-schedule-marker::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: var(--kep-accent-soft, rgba(99,102,241,0.18));
}
/* Don't extend the line past the last slot. */
.ke-schedule-slot:last-child .ke-schedule-marker::before {
    bottom: 50%;
}
/* Don't extend the line above the first slot. */
.ke-schedule-slot:first-child .ke-schedule-marker::before {
    top: 22px;
}
.ke-schedule-dot {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--kep-accent-1, #6366f1);
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--kep-accent-soft, rgba(99,102,241,0.18));
}

.ke-schedule-body {
    padding: 14px 0 18px;
}
.ke-schedule-title {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
}
.ke-schedule-desc {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.5;
    color: #64748b;
}

@media (max-width: 640px) {
    .ke-schedule-slot { grid-template-columns: 24px 1fr; gap: 12px; }
    .ke-schedule-time {
        grid-column: 2 / 3;
        grid-row: 1;
        padding: 10px 0 0;
        text-align: left;
        font-size: 13px;
        color: var(--kep-accent-1, #6366f1);
    }
    .ke-schedule-marker {
        grid-column: 1 / 2;
        grid-row: 1 / span 2;
    }
    .ke-schedule-body {
        grid-column: 2 / 3;
        grid-row: 2;
        padding: 4px 0 14px;
    }
    .ke-schedule-dot { margin-top: 14px; }
    .ke-schedule-slot:first-child .ke-schedule-marker::before { top: 18px; }
}

/* FAQ — accordion (scoped to .ke-extra-faq to avoid Menu/FAQ class collisions) */
.ke-extra-faq .ke-section-label {
    color: var(--kep-accent-1, #6366f1);
    letter-spacing: .08em;
}
.ke-extra-faq .ke-faq-list {
    margin-top: 18px;
    border-top: 1px solid #e2e8f0;
}
.ke-extra-faq .ke-faq-item {
    border-bottom: 1px solid #e2e8f0;
}
.ke-extra-faq .ke-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 18px 4px;
    background: none;
    border: 0;
    text-align: left;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    transition: color .15s;
}
.ke-extra-faq .ke-faq-question:hover { color: var(--kep-accent-1, #6366f1); }
.ke-extra-faq .ke-faq-question:focus-visible {
    outline: 2px solid var(--kep-accent-1, #6366f1);
    outline-offset: 2px;
    border-radius: 4px;
}
.ke-extra-faq .ke-faq-q-text {
    flex: 1;
    line-height: 1.4;
}
.ke-extra-faq .ke-faq-chevron {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    transition: transform .25s ease, background .15s, color .15s;
    flex-shrink: 0;
}
.ke-extra-faq .ke-faq-item.is-open .ke-faq-chevron {
    transform: rotate(180deg);
    background: var(--kep-accent-soft, rgba(99,102,241,0.12));
    color: var(--kep-accent-1, #6366f1);
}

.ke-extra-faq .ke-faq-answer {
    overflow: hidden;
    max-height: 0;
    transition: max-height .25s ease, opacity .2s ease;
    opacity: 0;
}
.ke-extra-faq .ke-faq-item.is-open .ke-faq-answer { opacity: 1; }
.ke-extra-faq .ke-faq-answer-inner {
    padding: 2px 4px 18px;
    font-size: 14px;
    line-height: 1.6;
    color: #475569;
    word-break: break-word;
}

@media (max-width: 640px) {
    .ke-extra-faq .ke-faq-question {
        padding: 14px 2px;
        font-size: 14px;
    }
    .ke-extra-faq .ke-faq-answer-inner { padding-bottom: 14px; font-size: 13px; }
}

/* Menu / FAQ (legacy "sections" extra — scoped to avoid FAQ class collisions) */
.ke-extra-menu-faq .ke-faq-list {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}
.ke-extra-menu-faq .ke-faq-item {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.ke-extra-menu-faq .ke-faq-item summary {
    cursor: pointer;
    padding: 14px 18px;
    font-weight: 600;
    color: #0f172a;
    font-size: 15px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ke-extra-menu-faq .ke-faq-item summary::-webkit-details-marker { display: none; }
.ke-extra-menu-faq .ke-faq-item summary::after {
    content: '▾';
    color: #94a3b8;
    transition: transform .2s;
}
.ke-extra-menu-faq .ke-faq-item[open] summary::after { transform: rotate(180deg); }
.ke-extra-menu-faq .ke-faq-body {
    padding: 0 18px 16px;
    color: #475569;
    font-size: 14px;
    line-height: 1.6;
}
.ke-extra-menu-faq .ke-faq-body p { margin: 0 0 8px; }
.ke-extra-menu-faq .ke-faq-body p:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════════
   RESERVATIONS — public single-event section + bottom sheet
   Lives parallel to tickets. Uses the same --kep-* tokens so the
   admin's accent color flows through identically.
   ════════════════════════════════════════════════════════════════ */

.ke-reservations-section { /* anchor only, no extra spacing — uses content-section defaults */ }

.ke-resv-description {
    margin: 6px 0 0;
    max-width: 600px;
    font-size: 15px;
    line-height: 1.5;
    color: #6b7280;
}

.ke-resv-card {
    position: relative;
    margin-top: 14px;
    padding: 20px 24px;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 4px 12px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ke-resv-card::before,
.ke-resv-card::after { content: none !important; }
.ke-resv-card--full {
    background: #fafafa;
    border-color: #e4e4e7;
}

.ke-resv-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.ke-resv-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ke-resv-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    background: #f4f4f5;
    color: #52525b;
    border: 1px solid #e4e4e7;
}
.ke-resv-pill--auto {
    background: rgba(16, 185, 129, 0.08);
    color: #047857;
    border-color: rgba(16, 185, 129, 0.25);
}
.ke-resv-pill--manual {
    background: rgba(245, 158, 11, 0.10);
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.30);
}

.ke-resv-card-capacity {
    display: flex;
    align-items: baseline;
    gap: 8px;
    line-height: 1;
}
.ke-resv-capacity-num {
    font-size: 22px;
    font-weight: 800;
    color: var(--kep-accent-1, #6366f1);
    letter-spacing: -0.5px;
}
.ke-resv-card--full .ke-resv-capacity-num { color: #71717a; }
.ke-resv-capacity-sub {
    font-size: 12.5px;
    color: #71717a;
    font-weight: 500;
}

.ke-resv-hint {
    margin: 0;
    font-size: 13px;
    color: #71717a;
    line-height: 1.5;
}

.ke-resv-cta {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: var(--kep-accent-grad, linear-gradient(135deg, #6366f1, #6366f1));
    color: #ffffff;
    font: inherit;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.2px;
    padding: 14px 22px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: none;
    transition: transform .12s ease, opacity .2s ease, filter .15s ease;
}
.ke-resv-cta:hover { transform: translateY(-1px); filter: brightness(1.04); }
.ke-resv-cta:active { transform: translateY(0); }
.ke-resv-cta:disabled {
    background: #e4e4e7;
    color: #a1a1aa;
    box-shadow: none;
    cursor: not-allowed;
    filter: none;
}

/* ─── Reservation sheet — extends the existing .ke-sheet rules ─── */

.ke-resv-sheet .ke-sheet-body {
    /* Slightly tighter than the ticket sheet so the form fits without
       crowding on small phones. Inherits scroll behavior. */
    padding-bottom:     8px;
}

/* One-screen flow: two numbered blocks (what you want · your details) and
   a footer that stays pinned inside the sheet so Reserve is always one tap
   away, however long the form gets. */
.ke-resv-block { padding: 4px 0 18px; }
.ke-resv-block + .ke-resv-block {
    margin-top:         6px;
    padding-top:        22px;
    border-top:         1px solid var(--kep-border-soft);
}
.ke-resv-block-head {
    display:            flex;
    align-items:        center;
    gap:                10px;
    margin-bottom:      14px;
}
.ke-resv-step-num {
    display:            inline-flex;
    align-items:        center;
    justify-content:    center;
    width:              24px;
    height:             24px;
    border-radius:      50%;
    background:         var(--kep-accent-1);
    color:              #ffffff;
    font-size:          12.5px;
    font-weight:        800;
    line-height:        1;
    flex-shrink:        0;
}
.ke-resv-block-title {
    font-size:          16px;
    font-weight:        700;
    color:              var(--kep-ink);
    letter-spacing:     -0.2px;
}
.ke-resv-areas-field { margin-bottom: 16px; }
.ke-resv-party-row {
    margin-bottom:      0;
    padding:            12px 14px;
    border:             1.5px solid var(--kep-border);
    border-radius:      var(--kep-r-sm);
    background:         var(--kep-surface-2);
}
.ke-resv-arrival-select {
    -webkit-appearance: none;
    appearance:         none;
    cursor:             pointer;
    padding-right:      28px !important;
    background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:  no-repeat;
    background-position: right 4px center;
    background-size:    16px;
}
.ke-resv-footer {
    position:           sticky;
    bottom:             0;
    z-index:            2;
    background:         rgba(255,255,255,0.96);
    border-top:         1px solid var(--kep-border-soft);
    padding-top:        14px;
}
.ke-resv-footer .ke-sheet-msg { margin-bottom: 12px; }
.ke-resv-footer .ke-sheet-terms { margin-top: 10px; }

/* Reservation contact-form fields reuse .ke-sheet-field / .ke-field-label /
   .ke-required from the shared design system above (lines ~1200-1280).
   No reservation-specific overrides — both sheets must match exactly. */

/* ─── Areas: radio-card pattern ─────────────────────────────────────
   Each <label class="ke-area-card"> wraps a hidden radio. The CSS owns
   the selected/sold-out visuals — no JS toggling of styles, no inline
   colors, no flood-fill defaults. */
.ke-resv-areas {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ke-area-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
    margin-bottom: 10px;
    position: relative;
}
.ke-area-card:last-child { margin-bottom: 0; }

.ke-area-card:hover {
    border-color: rgba(0, 0, 0, 0.18);
    background: #fafafa;
}

.ke-area-card.is-selected {
    border-color: var(--kep-accent-1);
    background: color-mix(in srgb, var(--kep-accent-1) 6%, #ffffff);
    border-width: 2px;
    /* Compensate for the thicker border so total card size doesn't jump. */
    padding: 15.5px 17.5px;
}

.ke-area-card.is-selected::after {
    content: '';
    position: absolute;
    top: 14px;
    right: 14px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--kep-accent-1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}

.ke-area-card.is-soldout {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* The hidden radio — kept in the DOM for keyboard/SR semantics. */
.ke-area-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.ke-area-name {
    font-weight: 700;
    font-size: 15px;
    color: #111;
    line-height: 1.3;
    /* Reserve room for the check icon so long names don't collide. */
    padding-right: 28px;
}
.ke-area-desc {
    font-weight: 400;
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.ke-area-meta {
    margin-top: 6px;
    font-size: 12px;
    color: #888;
    font-weight: 500;
}
.ke-area-soldout-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(0, 0, 0, 0.06);
    color: #555;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 8px;
    border-radius: 10px;
}

/* Success step */
.ke-resv-success {
    text-align: center;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.ke-resv-success-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.10);
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ke-resv-success-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #18181b;
    letter-spacing: -0.4px;
}
.ke-resv-success-msg {
    margin: 0;
    font-size: 14px;
    color: #52525b;
    line-height: 1.6;
    max-width: 380px;
}
.ke-resv-success-code {
    margin-top: 6px;
    padding: 14px 18px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 200px;
}
.ke-resv-code-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #71717a;
    font-weight: 700;
}
.ke-resv-code-value {
    font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 20px;
    font-weight: 700;
    color: var(--kep-accent-1, #6366f1);
    letter-spacing: 2px;
}

/* Mobile tweaks */
@media (max-width: 480px) {
    .ke-resv-card { padding: 18px 18px 16px; }
    .ke-resv-card-capacity { width: 100%; justify-content: flex-end; }
    .ke-resv-description { font-size: 14px; }
}

/* ══════════════ Historias Destacadas — hero row ══════════════
 * Circular covers under the share buttons. Buttons declare their own
 * background/border/color (+ pseudo-states) scoped under .ke-hero so WP.com's
 * [type=button] globals can't paint magenta. Accent from --kep-* tokens. */
.ke-hl-row {
    display: flex;
    gap: 14px;
    margin-top: 16px;
    padding-bottom: 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ke-hl-row::-webkit-scrollbar { display: none; }
.ke-hero .ke-hl-bubble,
.ke-hero .ke-hl-bubble:hover,
.ke-hero .ke-hl-bubble:focus,
.ke-hero .ke-hl-bubble:focus-visible,
.ke-hero .ke-hl-bubble:active {
    background: transparent;
    border: 0;
    color: #fff;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    width: 72px;
    scroll-snap-align: start;
    cursor: pointer;
}
.ke-hero .ke-hl-bubble:focus-visible { outline: 2px solid var(--kep-accent-1, #6366f1); outline-offset: 3px; border-radius: 12px; }
.ke-hl-bubble-ring {
    width: 64px; height: 64px; border-radius: 50%; padding: 2px;
    background: linear-gradient(135deg, var(--kep-accent-1, #6366f1), var(--kep-accent-2, #8b5cf6));
    display: block;
}
.ke-hl-bubble-img {
    display: block; width: 100%; height: 100%; border-radius: 50%;
    background: #333 center/cover no-repeat; border: 2px solid #12121a;
}
.ke-hl-bubble-name {
    max-width: 72px; font-size: 11px; line-height: 1.2; text-align: center;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 768px) {
    .ke-hl-bubble-ring { width: 80px; height: 80px; }
    .ke-hero .ke-hl-bubble { width: 88px; }
    .ke-hl-bubble-name { max-width: 88px; font-size: 12px; }
}

/* ══════════════ Story viewer (full-screen) ══════════════ */
body.ke-hlv-lock { overflow: hidden; }
.ke-hlv {
    position: fixed; inset: 0; z-index: 999999; background: #000;
    display: flex; flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
}
.ke-hlv[hidden] { display: none; }
.ke-hlv-progress { display: flex; gap: 4px; padding: 10px 10px 6px; }
.ke-hlv-seg { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); }
.ke-hlv-seg.is-on { background: #fff; }
.ke-hlv-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 14px 10px; color: #fff; }
.ke-hlv-name { font-size: 14px; font-weight: 600; }
.ke-hlv .ke-hlv-close,
.ke-hlv .ke-hlv-close:hover,
.ke-hlv .ke-hlv-close:focus,
.ke-hlv .ke-hlv-close:focus-visible,
.ke-hlv .ke-hlv-close:active {
    background: transparent; border: 0; color: #fff;
    font-size: 28px; line-height: 1; cursor: pointer;
    min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
}
.ke-hlv .ke-hlv-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ke-hlv-stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ke-hlv-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ke-hlv .ke-hlv-nav,
.ke-hlv .ke-hlv-nav:hover,
.ke-hlv .ke-hlv-nav:focus,
.ke-hlv .ke-hlv-nav:active {
    position: absolute; top: 0; bottom: 0;
    background: transparent; border: 0; color: transparent; cursor: pointer;
}
.ke-hlv .ke-hlv-prev { left: 0; width: 32%; }
.ke-hlv .ke-hlv-next { right: 0; width: 68%; }
.ke-hlv .ke-hlv-nav:focus-visible { outline: none; }

/* ══════════════ Cumpleaños — birthday CTA (extra pinned under tickets) ═══════
 * Accent-filled card so it reads as the page's second action after the
 * tickets (order: Tickets → Cumpleaños → Reservas → other extras). Colour
 * comes from the organizer's --kep-accent tokens; the white/black layers are
 * neutral tints, never brand literals. No glow, no blur, no motion beyond the
 * hover lift. The link redeclares every state (WP.com magenta guard). */
.ke-bday-card {
    position:           relative;
    overflow:           hidden;
    display:            flex;
    flex-direction:     column;
    gap:                22px;
    padding:            26px 22px 22px;
    border-radius:      var(--kep-r-md, 20px);
    color:              #ffffff;
    background:
        /* confetti — a few soft dots, not a pattern */
        radial-gradient(circle at 9% 22%,  rgba(255,255,255,0.26) 0 2.5px, transparent 3.5px),
        radial-gradient(circle at 22% 88%, rgba(255,255,255,0.18) 0 2px,   transparent 3px),
        radial-gradient(circle at 63% 10%, rgba(255,255,255,0.20) 0 1.8px, transparent 2.8px),
        radial-gradient(circle at 88% 74%, rgba(255,255,255,0.16) 0 2.2px, transparent 3.2px),
        radial-gradient(circle at 44% 46%, rgba(255,255,255,0.10) 0 1.5px, transparent 2.5px),
        /* light-to-shade sweep gives the flat accent some depth */
        linear-gradient(155deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,0.18) 100%),
        var(--kep-accent-1, #6366f1);
    box-shadow:         var(--kep-shadow-accent, 0 8px 32px rgba(var(--kep-accent-rgb, 99,102,241), 0.35));
}
/* Large soft disc in the corner — shape, not glow. */
.ke-bday-card::before {
    content:            '';
    position:           absolute;
    width:              240px;
    height:             240px;
    right:              -90px;
    top:                -110px;
    border-radius:      50%;
    background:         rgba(255,255,255,0.10);
    pointer-events:     none;
}
.ke-bday-card-body   { position: relative; min-width: 0; }

.ke-bday-card-eyebrow {
    display:            inline-flex;
    align-items:        center;
    gap:                7px;
    margin-bottom:      14px;
    padding:            6px 12px 6px 9px;
    border-radius:      var(--kep-r-pill, 100px);
    background:         rgba(255,255,255,0.18);
    color:              #ffffff;
    font-size:          11.5px;
    font-weight:        800;
    letter-spacing:     0.8px;
    text-transform:     uppercase;
    line-height:        1;
}
.ke-bday-card-icon   { font-size: 15px; line-height: 1; }

.ke-bday-card-title {
    margin:             0 0 14px;
    font-size:          26px;
    line-height:        1.1;
    font-weight:        800;
    letter-spacing:     -0.6px;
    color:              #ffffff;
    overflow-wrap:      break-word;
}

.ke-bday-card-perks {
    list-style:         none;
    margin:             0;
    padding:            0;
    display:            flex;
    flex-direction:     column;
    gap:                9px;
}
.ke-bday-card-perks li {
    display:            flex;
    align-items:        flex-start;
    gap:                10px;
    font-size:          15.5px;
    line-height:        1.45;
    font-weight:        500;
    color:              rgba(255,255,255,0.94);
}
.ke-bday-card-perks svg {
    flex-shrink:        0;
    width:              20px;
    height:             20px;
    margin-top:         1px;
    color:              #ffffff;
}
.ke-bday-card-desc {
    margin:             0;
    font-size:          15.5px;
    line-height:        1.6;
    color:              rgba(255,255,255,0.94);
}

/* The button: white pill with the accent as ink — the highest-contrast
   object on the page, which is the whole point of the card. Every state is
   declared so WP.com's link/button globals can't repaint it. */
.ke-bday-widget .ke-bday-card-link,
.ke-bday-widget .ke-bday-card-link:link,
.ke-bday-widget .ke-bday-card-link:visited,
.ke-bday-widget .ke-bday-card-link:hover,
.ke-bday-widget .ke-bday-card-link:focus,
.ke-bday-widget .ke-bday-card-link:focus-visible,
.ke-bday-widget .ke-bday-card-link:active {
    position:           relative;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    gap:                10px;
    width:              100%;
    min-height:         54px;
    padding:            14px 22px;
    border:             0;
    border-radius:      var(--kep-r-pill, 100px);
    background:         #ffffff;
    color:              var(--kep-accent-1, #6366f1);
    font-family:        var(--kep-font, inherit);
    font-weight:        800;
    font-size:          16px;
    letter-spacing:     -0.2px;
    line-height:        1.2;
    text-decoration:    none;
    box-shadow:         0 8px 22px rgba(0,0,0,0.16);
    transition:         transform 0.15s ease, box-shadow 0.15s ease;
}
.ke-bday-widget .ke-bday-card-link:hover  { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,0.20); }
.ke-bday-widget .ke-bday-card-link:active { transform: translateY(0);    box-shadow: 0 6px 16px rgba(0,0,0,0.16); }
.ke-bday-widget .ke-bday-card-link:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
.ke-bday-card-link svg { width: 20px; height: 20px; flex-shrink: 0; }
.ke-bday-card-link .ke-bday-arrow { transition: transform 0.15s ease; }
.ke-bday-card-link:hover .ke-bday-arrow { transform: translateX(3px); }

@media (min-width: 768px) {
    .ke-bday-card {
        flex-direction:  row;
        align-items:     center;
        justify-content: space-between;
        gap:             36px;
        padding:         30px 32px;
    }
    .ke-bday-card-body  { flex: 1 1 auto; }
    .ke-bday-card-title { font-size: 28px; }
    /* Same selector list as the base rule: its :link/:visited variants are
       (0,3,0) and would otherwise keep width:100% and starve the text column. */
    .ke-bday-widget .ke-bday-card-link,
    .ke-bday-widget .ke-bday-card-link:link,
    .ke-bday-widget .ke-bday-card-link:visited,
    .ke-bday-widget .ke-bday-card-link:hover,
    .ke-bday-widget .ke-bday-card-link:focus,
    .ke-bday-widget .ke-bday-card-link:focus-visible,
    .ke-bday-widget .ke-bday-card-link:active {
        flex:      0 0 auto;
        width:     auto;
        min-width: 270px;
        max-width: 46%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ke-bday-widget .ke-bday-card-link,
    .ke-bday-card-link .ke-bday-arrow { transition: none !important; }
}