/**
 * Cococure Event Page — V2 redesign (PREVIEW, iteration 2)
 * ------------------------------------------------------------------
 * Loaded only under body.coco-v2 (?coco_v2=1). Layers on single-event.css.
 * Iteration 2 pushes a genuinely DISTINCT identity per venue via typography +
 * shape language + hero treatment, not just accent colour:
 *   Haus   → Fraunces serif, warm editorial, pill buttons, soft cards
 *   TWNTY7 → Anton condensed caps, loud/high-contrast, sharp cards, hard buttons
 *   Cité   → Cormorant serif, cinematic & airy, minimal lines, light weights
 * Targets the REAL classes (.coco-event-title, .coco-event-hero__overlay,
 * .coco-event-final-cta__*, .coco-card*, .coco-ticket-tile*).
 */
/* Fonts enqueued in head by functions.php (coco-fonts-event) */

/* ============================================================
   SHARED V2 TOKENS
   ============================================================ */
body.coco-v2 .coco-event-page {
    --v2-accent:      #d4af37;
    --v2-accent-soft: rgba(212,175,55,.16);
    --v2-accent-line: rgba(212,175,55,.45);
    --v2-ink:         #ffffff;
    --v2-muted:       rgba(255,255,255,.66);
    --v2-dim:         rgba(255,255,255,.42);
    --v2-bg:          #07070a;
    --v2-surface:     #121319;
    --v2-surface-2:   #15161d;
    --v2-border:      rgba(255,255,255,.10);
    --v2-display:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --v2-radius:      18px;
    --v2-btn-radius:  12px;
    --v2-title-transform: none;
    --v2-title-spacing: -.02em;
    --v2-grad: linear-gradient(135deg, var(--v2-accent), color-mix(in srgb, var(--v2-accent) 55%, #fff));
}

/* ============================================================
   PER-VENUE IDENTITY
   ============================================================ */
/* HAUS — warm editorial serif, assured */
body.coco-v2 .venue-theme-haus {
    --v2-accent:      #d8a93a;
    --v2-accent-soft: rgba(216,169,58,.15);
    --v2-accent-line: rgba(216,169,58,.5);
    --v2-bg:          #0b0906;
    --v2-surface:     #14110b;
    --v2-surface-2:   #1b160d;
    --v2-ink:         #f6ecd8;
    --v2-display:     'Fraunces', Georgia, serif;
    --v2-radius:      20px;
    --v2-btn-radius:  999px;            /* pill */
    --v2-title-transform: none;
    --v2-title-spacing: -.01em;
}
/* TWNTY7 — loud condensed caps, street energy */
body.coco-v2 .venue-theme-twnty7 {
    --v2-accent:      #ff3b2e;
    --v2-accent-soft: rgba(255,59,46,.16);
    --v2-accent-line: rgba(255,59,46,.55);
    --v2-bg:          #08070a;
    --v2-surface:     #100c0f;
    --v2-surface-2:   #170f12;
    --v2-ink:         #ffffff;
    --v2-display:     'Anton', 'Archivo', sans-serif;
    --v2-radius:      6px;              /* sharp */
    --v2-btn-radius:  4px;
    --v2-title-transform: uppercase;
    --v2-title-spacing: .005em;
}
/* CITÉ — cinematic light serif, understated */
body.coco-v2 .venue-theme-cite {
    --v2-accent:      #e8893b;
    --v2-accent-soft: rgba(232,137,59,.14);
    --v2-accent-line: rgba(232,137,59,.45);
    --v2-bg:          #0a0805;
    --v2-surface:     #14100c;
    --v2-surface-2:   #1a140e;
    --v2-ink:         #f3e7d6;
    --v2-display:     'Cormorant Garamond', Georgia, serif;
    --v2-radius:      22px;
    --v2-btn-radius:  10px;
    --v2-title-transform: none;
    --v2-title-spacing: .005em;
}

body.coco-v2 .coco-event-page { background: var(--v2-bg); }

/* ============================================================
   HERO — venue-styled title + tint
   ============================================================ */
body.coco-v2 .coco-event-hero__overlay {
    background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(7,7,10,.55) 60%, var(--v2-bg) 100%),
                radial-gradient(120% 75% at 50% 6%, var(--v2-accent-soft), transparent 60%);
}
body.coco-v2 .coco-event-title {
    font-family: var(--v2-display);
    font-weight: 900;
    color: var(--v2-ink);
    text-transform: var(--v2-title-transform);
    letter-spacing: var(--v2-title-spacing);
    line-height: .98;
    font-size: clamp(2.4rem, 8vw, 5rem);
    text-wrap: balance;
}
/* TWNTY7 leans bigger + tighter; Cité lighter + airier */
body.coco-v2 .venue-theme-twnty7 .coco-event-title { line-height: .86; font-size: clamp(2.7rem, 9.5vw, 5.8rem); }
body.coco-v2 .venue-theme-cite   .coco-event-title { font-weight: 600; line-height: 1.02; }
body.coco-v2 .venue-theme-haus   .coco-event-title { font-weight: 800; }

body.coco-v2 .coco-card-eyebrow {
    color: var(--v2-accent);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 700;
    font-size: .72rem;
}

/* ============================================================
   SECTION HEADINGS — venue font + accent tick
   ============================================================ */
body.coco-v2 .coco-card-title,
body.coco-v2 .coco-event-final-cta__title {
    font-family: var(--v2-display);
    font-weight: 800;
    color: var(--v2-ink);
    text-transform: var(--v2-title-transform);
    letter-spacing: var(--v2-title-spacing);
    line-height: 1.06;
    font-size: clamp(1.5rem, 4.5vw, 2.1rem);
    position: relative;
    padding-left: 16px;
}
body.coco-v2 .venue-theme-cite .coco-card-title { font-weight: 700; }
body.coco-v2 .coco-card-title::before {
    content: "";
    position: absolute; left: 0; top: .14em; bottom: .14em;
    width: 4px; border-radius: 4px;
    background: var(--v2-accent);
    background: var(--v2-grad);
}
/* TWNTY7 swaps the tick for a hard underline bar (louder) */
body.coco-v2 .venue-theme-twnty7 .coco-card-title { padding-left: 0; padding-bottom: 10px; }
body.coco-v2 .venue-theme-twnty7 .coco-card-title::before {
    left: 0; top: auto; bottom: 0; width: 56px; height: 5px; border-radius: 0;
}
body.coco-v2 .coco-card-intro { color: var(--v2-muted); }

/* ============================================================
   CARDS — per-venue surface + shape
   ============================================================ */
body.coco-v2 .coco-card {
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
}
/* TWNTY7: sharp, with a bold accent edge */
body.coco-v2 .venue-theme-twnty7 .coco-card {
    border-left: 3px solid var(--v2-accent);
}
/* Cité: airier, near-borderless, divider-led */
body.coco-v2 .venue-theme-cite .coco-card {
    background: linear-gradient(180deg, var(--v2-surface), var(--v2-bg));
    border-color: rgba(255,255,255,.06);
}

/* ============================================================
   BUTTONS — one accent system, per-venue shape
   ============================================================ */
body.coco-v2 .coco-hero-cta--primary,
body.coco-v2 .coco-tables-cta,
body.coco-v2 .btn-gold,
body.coco-v2 .coco-add-btn,
body.coco-v2 .coco-ticket-tile__btn,
body.coco-v2 .coco-event-final-cta__row .coco-hero-cta--primary {
    background: var(--v2-accent);
    background: var(--v2-grad);
    color: #0a0a0a;
    font-weight: 800;
    border: none;
    border-radius: var(--v2-btn-radius);
    letter-spacing: .01em;
    box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--v2-accent) 70%, transparent);
    transition: transform .15s ease, filter .15s ease;
}
body.coco-v2 .venue-theme-twnty7 .coco-hero-cta--primary,
body.coco-v2 .venue-theme-twnty7 .coco-ticket-tile__btn,
body.coco-v2 .venue-theme-twnty7 .coco-tables-cta,
body.coco-v2 .venue-theme-twnty7 .coco-add-btn { text-transform: uppercase; letter-spacing: .04em; font-weight: 800; }
body.coco-v2 .coco-hero-cta--primary:hover,
body.coco-v2 .coco-ticket-tile__btn:hover,
body.coco-v2 .coco-tables-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }

body.coco-v2 .coco-hero-cta--secondary,
body.coco-v2 .btn-outline {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--v2-accent-line);
    color: var(--v2-ink);
    border-radius: var(--v2-btn-radius);
}

/* ============================================================
   TICKETS — clearer, higher-converting tiles
   ============================================================ */
/* Sheet-style rows — the same design language as the pop-up booking
   sheet (.coco-bsheet__row): one dark row per ticket, name + blurb on
   the left, price + a compact Select pill on the right. */
body.coco-v2 .coco-ticket-grid { display: flex; flex-direction: column; gap: 10px; }
body.coco-v2 .coco-ticket-tile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    row-gap: 3px;
    background: var(--v2-surface-2);
    border: 1px solid var(--v2-border);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color .15s ease, transform .15s ease;
}
body.coco-v2 .coco-ticket-tile:hover { border-color: var(--v2-accent-line); transform: translateX(2px); }
body.coco-v2 .coco-ticket-tile__head { grid-column: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.coco-v2 .coco-ticket-tile__name { font-weight: 600; font-size: .95rem; letter-spacing: -.01em; color: var(--v2-ink); margin: 0; }
body.coco-v2 .coco-ticket-tile__desc {
    grid-column: 1;
    color: var(--v2-dim); font-size: .8rem; line-height: 1.45; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.coco-v2 .coco-ticket-tile__foot {
    grid-column: 2; grid-row: 1 / span 2;
    display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
    gap: 8px; margin: 0; padding: 0;
}
body.coco-v2 .coco-ticket-tile__price {
    font-weight: 700; font-size: 1rem; letter-spacing: -.01em;
    color: var(--theme-accent, var(--v2-accent));
    white-space: nowrap;
}
body.coco-v2 .coco-ticket-tile__btn {
    min-height: 36px; padding: 0 18px;
    font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    border-radius: 8px;
}
body.coco-v2 .coco-ticket-tile.is-sold-out { opacity: .55; }
body.coco-v2 .coco-ticket-tile.is-sold-out:hover { transform: none; border-color: var(--v2-border); }
body.coco-v2 .coco-ticket-tile.is-sold-out .coco-ticket-tile__btn { display: none; }
body.coco-v2 .coco-ticket-tile__badge {
    background: var(--v2-accent-soft); color: var(--v2-accent);
    border-radius: 999px; padding: 2px 10px; font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
}

/* tables / dine&stay accents */
body.coco-v2 .coco-tables-features li svg,
body.coco-v2 .coco-dinestay-badge { color: var(--v2-accent); }
body.coco-v2 .coco-dinestay-badge { background: var(--v2-accent-soft); border: 1px solid var(--v2-accent-line); border-radius: 999px; }

/* ============================================================
   STICKY TAB BAR (Tickets / Tables) — accent the active tab
   ============================================================ */
body.coco-v2 .coco-sticky-footer {
    background: rgba(10,10,12,.92);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--v2-accent-line);
}
body.coco-v2 .coco-sticky-footer__tab.is-active { color: var(--v2-accent); }
body.coco-v2 .coco-sticky-footer__tab.is-active .coco-sticky-footer__tab-label { color: var(--v2-accent); }

/* final CTA */
body.coco-v2 .coco-event-final-cta { border-top: 1px solid var(--v2-accent-line); }

/* ============================================================
   FIXES — chat-float overlap, sticky footer layout, payment badges
   ============================================================ */
/* 1. Stack the floating bits ABOVE the sticky ticket footer (event pages always show it):
      footer (~78px) → "Chat with us" float → "Follow our WhatsApp Channel" badge.
      The channel badge defaults to bottom:100px (built for the chat at its old 24px); since
      the chat is lifted here it must move up too, or it lands on top of the chat. */
body.coco-v2 .coco-whatsapp-float {
    bottom: 90px !important;
    z-index: 95 !important;
}
body.coco-v2 #coco-wa-badge {
    bottom: 146px !important;
}

/* ============================================================
   MOBILE polish
   ============================================================ */
@media (max-width: 768px) {
    body.coco-v2 .coco-card { border-radius: calc(var(--v2-radius) - 6px); }
    body.coco-v2 .coco-card-title { font-size: 1.45rem; }
}

/* .coco-card--dinestay carried order: -1 from the dining-first era, which
   still outranked the tickets-first card (order: 0). Removed from the base
   stylesheet, but that file never cache-busts — this override wins against
   stale cached copies. Source order is correct for both event kinds. */
body.coco-v2 .coco-event-left .coco-card--dinestay {
    order: 0 !important;
}

/* ============================================================
   DOOR POLICY LINE (hero, under the CTA row)
   Per-venue age + dress line from Reservations → Settings —
   part of the Haus (table-led, 21s/25s) vs TWNTY7 (18+ tickets)
   venue differentiation. Quietly authoritative, not a warning.
   ============================================================ */
body.coco-v2 .coco-hero-door-policy {
    margin-top: 14px;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.72);
}
body.coco-v2 .coco-hero-door-policy__main {
    display: block;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
body.coco-v2 .coco-hero-door-policy__note {
    display: block;
    margin: 4px auto 0; /* centred (Folabi 2026-07-19): the under-25s gents line reads as part of the hero, not a footnote */
    font-size: 11.5px;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.55);
    max-width: 520px;
    text-align: center;
}

/* ============================================================
   DOOR DEAL STRIP (hero, above the door-policy line)
   "Open till 4am" on every club night + the Fri/Sat walk-up
   offer (free before 11pm · £20 after). Deliberately louder
   than the policy line — this is a selling point, not small
   print.
   ============================================================ */
body.coco-v2 .coco-hero-door-deal {
    margin-top: 16px;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 10px 16px;
    border: 1px solid rgba(201, 169, 110, 0.6);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.38);
}
body.coco-v2 .coco-hero-door-deal__till {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #c9a96e;
    white-space: nowrap;
}
body.coco-v2 .coco-hero-door-deal__walkup {
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.03em;
    color: #fff;
}
@media (max-width: 640px) {
    body.coco-v2 .coco-hero-door-deal {
        display: flex;
        padding: 9px 12px;
    }
    body.coco-v2 .coco-hero-door-deal__walkup {
        font-size: 12.5px;
    }
}

/* ============================================================
   WEEKLY RESIDENCY BANNER — event page → its evergreen night hub
   ============================================================ */
body.coco-v2 .coco-event-series-link {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1200px;
    margin: 14px auto 0;
    padding: 14px 18px;
    background: var(--v2-surface-2, #141414);
    border: 1px solid var(--v2-border, #1f1f1f);
    border-left: 3px solid var(--theme-accent, var(--v2-accent));
    border-radius: 12px;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
body.coco-v2 .coco-event-series-link:hover {
    border-color: var(--theme-accent, var(--v2-accent));
    transform: translateX(2px);
}
body.coco-v2 .coco-event-series-link__icon { color: var(--theme-accent, var(--v2-accent)); flex: none; display: inline-flex; }
body.coco-v2 .coco-event-series-link__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
body.coco-v2 .coco-event-series-link__text strong { color: var(--v2-ink, #f2ece0); font-size: .95rem; font-weight: 700; }
body.coco-v2 .coco-event-series-link__text small { color: var(--v2-dim, #7c7263); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
body.coco-v2 .coco-event-series-link__cta { flex: none; color: var(--theme-accent, var(--v2-accent)); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 640px) {
    body.coco-v2 .coco-event-series-link { margin-left: 16px; margin-right: 16px; }
    body.coco-v2 .coco-event-series-link__cta { display: none; }
}