/**
 * 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*).
 */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700;9..144,900&family=Anton&family=Cormorant+Garamond:wght@500;600;700&family=Archivo:wght@500;600;700;800&display=swap');

/* ============================================================
   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
   ============================================================ */
body.coco-v2 .coco-ticket-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { body.coco-v2 .coco-ticket-grid { grid-template-columns: 1fr 1fr; } }
body.coco-v2 .coco-ticket-tile {
    display: flex; flex-direction: column; gap: 8px;
    background: var(--v2-surface-2);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-btn-radius);
    padding: 16px;
    transition: border-color .15s ease;
}
body.coco-v2 .coco-ticket-tile:hover { border-color: var(--v2-accent-line); }
body.coco-v2 .coco-ticket-tile__name { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; color: var(--v2-ink); }
body.coco-v2 .coco-ticket-tile__desc { color: var(--v2-dim); font-size: .82rem; line-height: 1.45; margin: 0; }
body.coco-v2 .coco-ticket-tile__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 8px; }
body.coco-v2 .coco-ticket-tile__price {
    font-family: var(--v2-display);
    font-weight: 800; font-size: 1.4rem; letter-spacing: -.02em; color: var(--v2-ink);
}
body.coco-v2 .coco-ticket-tile__btn { min-height: 46px; padding: 0 22px; }
body.coco-v2 .coco-ticket-tile.is-sold-out { opacity: .5; }
body.coco-v2 .coco-ticket-tile.is-sold-out .coco-ticket-tile__btn { background: rgba(255,255,255,.07); color: var(--v2-dim); box-shadow: none; pointer-events: 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;
}
body.coco-v2 .coco-payment-badge { background: rgba(255,255,255,.04); border: 1px solid var(--v2-border); border-radius: 8px; }

/* 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); }

/* ============================================================
   TICKET FORM POLISH — tidy the Tribe form (the real ticket UI)
   The card already has a "Tickets" title + intro, so the form's own redundant chrome is
   hidden, and each row is laid out cleanly so the price, steppers and guestlist button
   never overflow the screen (the live form pushed the +/- and "Join the Guest List"
   button off the right edge on mobile).
   ============================================================ */
/* 1. Remove the form's duplicate headers (card already says "Tickets"). */
body.coco-v2 #coco-tickets-raw .tribe-tickets__tickets-title,
body.coco-v2 #coco-tickets-raw .tribe-tickets-selection .selection-tabs,
body.coco-v2 #coco-tickets-raw .section-header,
body.coco-v2 #coco-tickets-raw .view-all-section,
body.coco-v2 #coco-tickets-raw .tribe-tickets__notice { display: none !important; }

/* 2. Strip the form's own box so it sits flush in the card. */
body.coco-v2 #coco-tickets-raw .tribe-tickets-selection {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.coco-v2 #coco-tickets-raw .ticket-items { gap: 10px !important; }

/* 3. Each ticket row → clean vertical card; nothing overflows. */
body.coco-v2 #coco-tickets-raw .tribe-tickets__tickets-item {
    display: block !important;
    width: 100% !important;
    padding: 16px !important;
    border: 1px solid var(--theme-border, rgba(255,255,255,.1)) !important;
    border-radius: 14px !important;
    background: var(--theme-bg-secondary, #14110b) !important;
}
body.coco-v2 #coco-tickets-raw .tribe-tickets__tickets-item-content-title-container,
body.coco-v2 #coco-tickets-raw .tribe-tickets__tickets-item-details-content,
body.coco-v2 #coco-tickets-raw .tribe-tickets__tickets-item-extra {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}
body.coco-v2 #coco-tickets-raw .tribe-tickets__tickets-item-content-title {
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
}
body.coco-v2 #coco-tickets-raw .tribe-tickets__tickets-item-details-content {
    font-size: .8rem !important;
    color: var(--theme-text-muted, rgba(255,255,255,.5)) !important;
}
body.coco-v2 #coco-tickets-raw .tribe-tickets__tickets-item-extra-price { font-weight: 800 !important; }

/* 4. Quantity steppers: a contained row that fits the screen. */
body.coco-v2 #coco-tickets-raw .tribe-tickets__tickets-item-quantity {
    display: inline-flex !important;
    align-items: center !important;
    float: none !important;
    position: static !important;
    margin: 4px 0 0 0 !important;
    width: auto !important;
    max-width: 100% !important;
}
/* The nested Woo +/- duplicate Tribe's own +/- — hide the inner Woo buttons, keep one set. */
body.coco-v2 #coco-tickets-raw .tribe-tickets__tickets-item-quantity .quantity .minus,
body.coco-v2 #coco-tickets-raw .tribe-tickets__tickets-item-quantity .quantity .plus { display: none !important; }
body.coco-v2 #coco-tickets-raw .tribe-tickets__tickets-item-quantity-number { width: auto !important; }
body.coco-v2 #coco-tickets-raw .tribe-tickets__tickets-item-quantity-number-input {
    width: 48px !important; text-align: center !important;
}

/* 5. Guestlist CTA → full-width, never cut off. */
body.coco-v2 #coco-tickets-raw .coco-egl-cta-wrapper { width: 100% !important; margin-top: 6px !important; float: none !important; }
body.coco-v2 #coco-tickets-raw .coco-egl-cta {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
}

/* 6. Sticky Tribe footer: tidy + venue-accented Get Tickets. */
body.coco-v2 .tribe-tickets__tickets-footer {
    background: rgba(10,10,12,.96) !important;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--theme-accent, var(--v2-accent)) !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
    gap: 12px !important;
}
body.coco-v2 #tribe-tickets__tickets-buy,
body.coco-v2 .tribe-tickets__tickets-buy {
    min-height: 52px !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
}

/* ============================================================
   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;
}

/* 2. Sticky Tribe footer → one compact row: "N · £Total" on the left, Get Tickets on the
      right. Shorter + the total is never hidden. */
body.coco-v2 .tribe-tickets__tickets-footer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) !important;
}
/* Hide the footer's separate "Quantity" block so the Total + Get Tickets fit ONE compact
   row (was wrapping to two rows → tall footer that the chat button overlapped). The total
   already conveys what's selected; the cart/checkout shows per-ticket quantities. */
body.coco-v2 .tribe-tickets__tickets-footer-quantity { display: none !important; }
body.coco-v2 .tribe-tickets__tickets-footer-total {
    order: 1 !important;
    margin: 0 auto 0 0 !important;
    white-space: nowrap !important;
}
body.coco-v2 .tribe-tickets__tickets-footer-total .tribe-amount {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
}
/* the buy button defaults to width:100% which forced a 2nd row — make it hug its text. */
body.coco-v2 #tribe-tickets__tickets-buy,
body.coco-v2 .tribe-tickets__tickets-footer .tribe-tickets__tickets-buy {
    order: 2 !important;
    width: auto !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 0 24px !important;
    margin: 0 !important;
}
/* hide the inline loader dots so they don't take footer space */
body.coco-v2 .tribe-tickets__tickets-footer .tribe-tickets-loader__dots { display: none !important; }

/* 3. Payment badges → clear, uniform pills with legible logo + label. */
body.coco-v2 .coco-payment-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 4px 0 16px !important;
}
body.coco-v2 .coco-payment-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px 12px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 9px !important;
    color: #1a1a1a !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    line-height: 1 !important;
    opacity: 1 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
}
body.coco-v2 .coco-payment-badge svg {
    width: 22px !important;
    height: auto !important;
    flex: 0 0 auto !important;
}
/* keep each brand's own icon colour where the SVG defines it; default mono icons read dark
   on the white pill (currentColor inherits the badge's dark text colour). */

/* ============================================================
   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; }
}