/* ============================================================
 * Cococure — page-global tweaks for Tribe event single pages.
 *
 * Loaded by cococure-event-guestlist on every tribe_events single
 * page regardless of whether guest-list mode is enabled, so the
 * paid quantity widget gets the upgraded styling too.
 *
 * Selectors are deliberately position-based (:first-of-type /
 * :last-of-type) rather than class-based. Tribe v2 ships duplicate
 * +/- buttons inside the quantity widget for keyboard / a11y flow
 * — class-based styling un-hid both pairs by overriding Tribe's
 * intentional display: none. Picking the leftmost and rightmost
 * button by position guarantees we only touch the outer pair, no
 * matter which class names this Tribe version uses.
 * ============================================================ */

/* ---------------- Hide the duplicate top tile grid ----------------
 * Avada-child/tribe-events/single-event.php renders TWO ticket
 * lists on every event page:
 *   1. .coco-ticket-grid — pretty custom tiles with [Select]
 *      buttons (above the fold).
 *   2. #coco-tickets-raw — the original Tribe Tickets widget,
 *      with the +/- quantity widgets, gold Join the Guest List
 *      CTA (added by this plugin), gold-outlined Join Waitlist
 *      trigger (added by cococure-waitlist18), and the sticky-cart-
 *      driving Buy form.
 * Hiding the bottom widget broke the cart + waitlist + checkout, so
 * we hide the top duplicate instead. The bottom widget styled by
 * this plugin is the single source of truth for ticket actions.
 */
.coco-ticket-grid,
.coco-ticket-full-toggle,
.coco-tickets-empty,
.coco-trust-line {
    display: none !important;
}

/* ---------------- Force-hide class used by guestlist-form.js ---------------- */
/*
 * On £0 tickets, guestlist-form.js tags the native cart UI with this
 * class to hide it before showing the gold "Join the Guest List" CTA.
 *
 * Selectors below pile up specificity multiple ways so we beat
 * Avada / Tribe / venue-theme rules that may also use !important:
 *  - Form-ID prefix (#tribe-tickets__tickets-form)
 *  - body + venue-theme prefixes
 *  - chained class with the actual ticket-quantity classes (covers
 *    the WC-injected .minus/.plus inputs that aren't `<button>` tags)
 */
#tribe-tickets__tickets-form .coco-egl-force-hide,
body .coco-egl-force-hide,
body.coco-event-page .coco-egl-force-hide,
body.venue-theme-haus .coco-egl-force-hide,
body.venue-theme-twnty7 .coco-egl-force-hide,
body.venue-theme-cite .coco-egl-force-hide,
body.venue-theme-haus-garden .coco-egl-force-hide,
body .coco-egl-force-hide.tribe-tickets__tickets-item-quantity,
body .coco-egl-force-hide.tribe-tickets__tickets-item-quantity-number,
body .coco-egl-force-hide.tribe-tickets__tickets-item-quantity-add,
body .coco-egl-force-hide.tribe-tickets__tickets-item-quantity-remove,
body .coco-egl-force-hide.tribe-tickets__tickets-item-quantity-number-input,
body .coco-egl-force-hide.tribe-tickets__tickets-item-extra-available {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    pointer-events: none !important;
}

/* ---------------- Force-show the waitlist trigger on sold-out rows ----------------
 * On sold-out free rows the cococure-waitlist18 plugin renders its
 * Join Waitlist trigger nested inside .tribe-tickets__tickets-item-
 * quantity -> .tribe-tickets__tickets-item-extra-available ->
 * .tribe-tickets__tickets-item-waitlist. Something in the Avada /
 * Tribe / theme cascade was hiding the .quantity wrapper for
 * data-available="false" rows, taking the waitlist trigger with it.
 *
 * Force-show the chain so the waitlist always renders. Only applies
 * to rows that are NOT this-plugin-converted (.coco-egl-converted is
 * added by guestlist-form.js installCta on in-stock free rows), so
 * we don't accidentally re-show the cart UI on in-stock free
 * tickets.
 */
body .tribe-tickets__tickets-item[data-available="false"]:not(.coco-egl-converted) .tribe-tickets__tickets-item-quantity,
body .tribe-tickets__tickets-item[data-available="false"]:not(.coco-egl-converted) .tribe-tickets__tickets-item-quantity .tribe-tickets__tickets-item-extra-available,
body .tribe-tickets__tickets-item[data-available="false"]:not(.coco-egl-converted) .tribe-tickets__tickets-item-waitlist {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
}

body .tribe-tickets__tickets-item[data-available="false"]:not(.coco-egl-converted) .tribe-tickets__tickets-item-waitlist-trigger {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ---------------- Hide WC's duplicate +/- buttons ---------------- */
/*
 * The outer pair (.tribe-tickets__tickets-item-quantity-remove and
 * -add) are real <button> tags — those stay. The "duplicates" we saw
 * in the screenshots are WooCommerce's `.quantity.buttons_added`
 * helper INPUTS rendered inside .tribe-tickets__tickets-item-quantity-
 * number (an <input type="button" class="minus"> and a matching .plus).
 *
 * NB: we do NOT hide everything inside .tribe-tickets__tickets-item-
 * quantity, because Tribe's `item/quantity/unavailable.php` template
 * renders the cococure-waitlist18 Join Waitlist trigger INSIDE that
 * exact wrapper on sold-out rows. A blanket > * hide nukes the
 * waitlist button.
 */
body .tribe-tickets__tickets-item-quantity-number button,
body .tribe-tickets__tickets-item-quantity-number a,
body .tribe-tickets__tickets-item-quantity-number input[type="button"],
body .tribe-tickets__tickets-item-quantity-number .minus,
body .tribe-tickets__tickets-item-quantity-number .plus {
    display: none !important;
}

/* ---------------- Outer +/- buttons (leftmost / rightmost only) ---------------- */
/*
 * Square-rounded 48x48 pressable buttons. Position-based so we don't
 * accidentally restyle a hidden duplicate. Repeated under each
 * venue-theme class so we win specificity against Avada-child's
 * single-event.php scoped overrides.
 */
.tribe-tickets__tickets-item-quantity > button:first-of-type,
.tribe-tickets__tickets-item-quantity > button:last-of-type,
.coco-event-page .tribe-tickets__tickets-item-quantity > button:first-of-type,
.coco-event-page .tribe-tickets__tickets-item-quantity > button:last-of-type,
.venue-theme-haus .tribe-tickets__tickets-item-quantity > button:first-of-type,
.venue-theme-haus .tribe-tickets__tickets-item-quantity > button:last-of-type,
.venue-theme-twnty7 .tribe-tickets__tickets-item-quantity > button:first-of-type,
.venue-theme-twnty7 .tribe-tickets__tickets-item-quantity > button:last-of-type,
.venue-theme-cite .tribe-tickets__tickets-item-quantity > button:first-of-type,
.venue-theme-cite .tribe-tickets__tickets-item-quantity > button:last-of-type,
.venue-theme-haus-garden .tribe-tickets__tickets-item-quantity > button:first-of-type,
.venue-theme-haus-garden .tribe-tickets__tickets-item-quantity > button:last-of-type {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    border-radius: 6px !important;
    background: rgba(212, 175, 55, 0.08) !important;
    background-color: rgba(212, 175, 55, 0.08) !important;
    background-image: none !important;
    border: 1px solid rgba(212, 175, 55, 0.32) !important;
    color: #d4af37 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    transition:
        background-color 150ms ease,
        border-color 150ms ease,
        transform 100ms ease !important;
}

.tribe-tickets__tickets-item-quantity > button:first-of-type:hover,
.tribe-tickets__tickets-item-quantity > button:last-of-type:hover {
    background: rgba(212, 175, 55, 0.2) !important;
    background-color: rgba(212, 175, 55, 0.2) !important;
    border-color: rgba(212, 175, 55, 0.55) !important;
    color: #d4af37 !important;
}

.tribe-tickets__tickets-item-quantity > button:first-of-type:active,
.tribe-tickets__tickets-item-quantity > button:last-of-type:active {
    transform: scale(0.96) !important;
}

/* ---------------- Container layout ----------------
 * NOTE: we deliberately do NOT set `display` here. The guestlist-form.js
 * installCta() hides this element via inline `display: none` on £0 rows.
 * If we put `display !important` here it would override the inline style
 * and the quantity controls would re-appear next to the gold CTA.
 * Tribe's own CSS already sets a sensible flex display for paid rows.
 */
.tribe-tickets__tickets-item-quantity,
.coco-event-page .tribe-tickets__tickets-item-quantity,
.venue-theme-haus .tribe-tickets__tickets-item-quantity,
.venue-theme-twnty7 .tribe-tickets__tickets-item-quantity,
.venue-theme-cite .tribe-tickets__tickets-item-quantity,
.venue-theme-haus-garden .tribe-tickets__tickets-item-quantity {
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ---------------- Number readout ----------------
 * Same display caveat as the parent wrapper — guestlist-form.js
 * inline-hides this on £0 rows; we must not override that.
 */
.tribe-tickets__tickets-item-quantity-number,
.coco-event-page .tribe-tickets__tickets-item-quantity-number,
.venue-theme-haus .tribe-tickets__tickets-item-quantity-number,
.venue-theme-twnty7 .tribe-tickets__tickets-item-quantity-number,
.venue-theme-cite .tribe-tickets__tickets-item-quantity-number,
.venue-theme-haus-garden .tribe-tickets__tickets-item-quantity-number {
    min-width: 64px !important;
    width: 64px !important;
    height: 48px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    overflow: hidden !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.tribe-tickets__tickets-item-quantity-number-input {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #fff !important;
    border: none !important;
    text-align: center !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    -moz-appearance: textfield !important;
}

.tribe-tickets__tickets-item-quantity-number-input::-webkit-outer-spin-button,
.tribe-tickets__tickets-item-quantity-number-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .tribe-tickets__tickets-item-quantity > button:first-of-type,
    .tribe-tickets__tickets-item-quantity > button:last-of-type {
        transition: none !important;
    }
    .tribe-tickets__tickets-item-quantity > button:first-of-type:active,
    .tribe-tickets__tickets-item-quantity > button:last-of-type:active {
        transform: none !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────
 * Trending badge — pin to the row's top-left, above the title
 *
 * Event Tickets renders the badge inside a div with inline styles
 * `display: inline-block; width: auto; flex: none; margin-right: 10px;`.
 * Its natural position lands on top of the right-hand button column
 * (Join the Guest List / Join Waitlist), making both unreadable.
 *
 * We anchor it to the row's top-left corner instead, above the title.
 * Selectors target the unclassed wrapper via its `flex: none` inline
 * style — the cleanest stable hook available.
 *
 * The title container gets extra top padding ONLY when a Trending
 * badge is present (via adjacent-sibling combinator), so non-trending
 * tickets keep their tight layout.
 * ────────────────────────────────────────────────────────────────────── */

.tribe-tickets__tickets-item {
    position: relative !important;
}

/* Lift the badge wrapper out of flex flow and pin it top-left. */
.tribe-tickets__tickets-item > div[style*="flex: none"] {
    position: absolute !important;
    top: 8px !important;
    left: 14px !important;
    margin: 0 !important;
    z-index: 3;
    pointer-events: none; /* purely decorative — never blocks clicks */
}

/* Push the title down only when the badge is present, so untouched
   ticket rows keep their tight original spacing. */
.tribe-tickets__tickets-item > div[style*="flex: none"] + .tribe-tickets__tickets-item-content-title-container {
    padding-top: 26px;
}

/* Refined pill styling — overrides the inline background-color: #ff4500
   that Tribe ships, but keeps it red-orange to stay recognisable. */
.tribe-tickets__tickets-item .status-badge {
    display: inline-block !important;
    margin: 0 !important;
    padding: 3px 10px !important;
    background-color: rgba(255, 69, 0, 0.95) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border-radius: 999px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 6px rgba(255, 69, 0, 0.25) !important;
}

@media (max-width: 640px) {
    .tribe-tickets__tickets-item > div[style*="flex: none"] {
        top: 6px !important;
        left: 12px !important;
    }
    .tribe-tickets__tickets-item .status-badge {
        font-size: 9px !important;
        padding: 2px 8px !important;
    }
    .tribe-tickets__tickets-item > div[style*="flex: none"] + .tribe-tickets__tickets-item-content-title-container {
        padding-top: 24px;
    }
}