/* =========================================================================
   Events Manager — /outsellevents
   =========================================================================
   Scoped to body.osb-em-events / body.osb-em-event-single (see
   osb_is_em_events_page() / osb_is_em_single_event()).

   Kept separate from events.css deliberately: that file styles The Events
   Calendar + Event Tickets (.tribe-*), which is a different plugin. The live
   site renders /outsellevents with Events Manager, so these are the selectors
   that actually apply there.

   Colours come from The7's own button custom properties (--the7-btn-*) rather
   than hardcoded hex, so the buttons keep tracking Theme Options if the brand
   colour changes. Fallbacks are the current live values:
     accent #13cc96 · hover #119fd3 · text #fff · radius 3px · weight 800

   ON !important. This stylesheet is enqueued with `events-manager` as a
   dependency so it loads after EM's own CSS and usually wins on order alone.
   Two areas are exceptions and are flagged: the event-list action buttons and
   the ticket checkboxes both fall inside EM 7.4's `.em.pixelbones .input`
   reset, where every declaration is itself !important — there, ours have to be
   flagged AND out-specify it. Each of those blocks explains why in place; do
   not copy the pattern anywhere it is not already needed.
   ====================================================================== */


/* -------------------------------------------------------------------------
   Search submit — "Search"

   NOTE: `em-search-submit` is on BOTH the wrapping <div> and the <button>
   inside it, so every rule here is scoped to `button.`. Without that the
   wrapper div picks up the background and padding too and renders as a
   second, oversized block behind the button.
   ---------------------------------------------------------------------- */
.osb-em-events .em button.em-search-submit,
.osb-em-event-single .em button.em-search-submit {
    background: var(--the7-btn-bg-color, #13cc96);
    border: var(--the7-btn-m-border-width, 0) solid var(--the7-btn-border-color, #13cc96);
    border-radius: var(--the7-btn-m-border-radius, 3px);
    color: var(--the7-btn-color, #fff);
    font-family: var(--the7-btn-m-font-family, inherit);
    font-size: var(--the7-btn-m-font-size, 16px);
    font-weight: var(--the7-btn-m-font-weight, 800);
    line-height: 1.2;
    padding: 12px 24px;
    text-transform: var(--the7-btn-m-text-transform, none);
    box-shadow: none;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.osb-em-events .em button.em-search-submit:hover,
.osb-em-events .em button.em-search-submit:focus-visible,
.osb-em-event-single .em button.em-search-submit:hover,
.osb-em-event-single .em button.em-search-submit:focus-visible {
    background: var(--the7-btn-hover-bg-color, #119fd3);
    border-color: var(--the7-btn-border-hover-color, #119fd3);
    color: var(--the7-btn-hover-color, #fff);
}

.osb-em-events .em button.em-search-submit:focus-visible,
.osb-em-event-single .em button.em-search-submit:focus-visible {
    outline: 2px solid var(--the7-btn-bg-color, #13cc96);
    outline-offset: 2px;
}


/* -------------------------------------------------------------------------
   Reset — "Clear All" (advanced-search modal). Outline secondary.
   ---------------------------------------------------------------------- */
.osb-em-events .em button[type="reset"].button-secondary,
.osb-em-event-single .em button[type="reset"].button-secondary {
    background: transparent;
    border: 1px solid var(--the7-btn-bg-color, #13cc96);
    border-radius: var(--the7-btn-m-border-radius, 3px);
    color: var(--the7-btn-bg-color, #13cc96);
    font-size: var(--the7-btn-m-font-size, 16px);
    font-weight: var(--the7-btn-m-font-weight, 800);
    line-height: 1.2;
    padding: 11px 24px;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.osb-em-events .em button[type="reset"].button-secondary:hover,
.osb-em-events .em button[type="reset"].button-secondary:focus-visible,
.osb-em-event-single .em button[type="reset"].button-secondary:hover,
.osb-em-event-single .em button[type="reset"].button-secondary:focus-visible {
    background: var(--the7-btn-bg-color, #13cc96);
    color: var(--the7-btn-color, #fff);
}


/* -------------------------------------------------------------------------
   Event list / single actions — "Register" and "More Info", onto the same
   button system so the whole page reads as one set of controls.

   WHY THESE SELECTORS LOOK LIKE THIS. Both buttons live in
   <div class="em-item-actions input">, which puts them inside EM 7.4's
   pixelbones button reset:

     .em.pixelbones .input .button:not([data-nostyle]) {
         background-color: transparent !important;
         color: var(--text-color-softer) !important;
         border: 1px solid var(--border-color) !important;
         ... every single property !important
     }

   That is what was rendering Register as a grey outline instead of the Outsell
   green: the colours below were already correct, they just never applied.
   Every property in that reset is flagged, and it scores (0,5,0), so beating it
   takes BOTH `!important` and more specificity — !important alone still loses.
   Hence `.em.pixelbones .input` repeated in our own selectors, which lands at
   (0,6,0). This is the one place in this file that needs !important; the
   comment at the top about avoiding it still holds everywhere else.

   Only colour is overridden. EM's sizing (38px tall, 11px uppercase with
   letter-spacing) is left alone so the buttons keep the proportions the rest of
   the events list is laid out around.

   AND WHY EVERY RULE KILLS background-image. The7 runs with its
   `accent-gradient` option on (see the body class), which paints
   `linear-gradient(340deg, #13cc96, #81ffaa)` onto these buttons — a
   background-IMAGE, so it sits on top of whatever background-COLOR wins and
   both buttons come out gradient-filled, "More Info" included. It was never
   visible before because the rules here used the `background` shorthand, which
   resets background-image to none as a side effect. Setting it explicitly keeps
   that suppression when the colour is set with a longhand, and says out loud
   what the shorthand was doing by accident.
   ---------------------------------------------------------------------- */
.osb-em-events .em.pixelbones .input .em-event-book-now.button,
.osb-em-event-single .em.pixelbones .input .em-event-book-now.button {
    background-color: var(--the7-btn-bg-color, #13cc96) !important;
    background-image: none !important;
    border-color: var(--the7-btn-bg-color, #13cc96) !important;
    color: var(--the7-btn-color, #fff) !important;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.osb-em-events .em.pixelbones .input .em-event-book-now.button:hover,
.osb-em-events .em.pixelbones .input .em-event-book-now.button:focus,
.osb-em-event-single .em.pixelbones .input .em-event-book-now.button:hover,
.osb-em-event-single .em.pixelbones .input .em-event-book-now.button:focus {
    background-color: var(--the7-btn-hover-bg-color, #119fd3) !important;
    background-image: none !important;
    border-color: var(--the7-btn-hover-bg-color, #119fd3) !important;
    color: var(--the7-btn-hover-color, #fff) !important;
}

.osb-em-events .em.pixelbones .input .em-event-book-now.button:focus-visible,
.osb-em-event-single .em.pixelbones .input .em-event-book-now.button:focus-visible {
    outline: 2px solid var(--the7-btn-bg-color, #13cc96) !important;
    outline-offset: 2px;
}

/* The ticket glyph on the Register button.

   EM paints its icons as `background-image: var(--icon-ticket)`, and that SVG
   has stroke='#000' baked into the data URI — there is no currentColor to
   inherit, so on a green button it stayed black. Re-hanging the same SVG as a
   mask turns it into a shape filled with background-color, which is how EM
   itself recolours icons elsewhere (.em-icon-trash uses background:red +
   mask-image). --icon-ticket is EM's own custom property, so the artwork stays
   whatever EM ships. */
.osb-em-events .em.pixelbones .input .em-event-book-now.button .em-icon-ticket,
.osb-em-event-single .em.pixelbones .input .em-event-book-now.button .em-icon-ticket {
    background-image: none;
    background-color: var(--the7-btn-color, #fff);
    -webkit-mask-image: var(--icon-ticket);
            mask-image: var(--icon-ticket);
    -webkit-mask-size: 18px;
            mask-size: 18px;
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}

/* "More Info" stays secondary so "Register" is the clear primary action —
   EM's own outline shape, just recoloured to the Outsell green. */
.osb-em-events .em.pixelbones .input .em-item-read-more.button {
    background-color: transparent !important;
    background-image: none !important;
    border-color: var(--the7-btn-bg-color, #13cc96) !important;
    color: var(--the7-btn-bg-color, #13cc96) !important;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.osb-em-events .em.pixelbones .input .em-item-read-more.button:hover,
.osb-em-events .em.pixelbones .input .em-item-read-more.button:focus {
    background-color: var(--the7-btn-bg-color, #13cc96) !important;
    background-image: none !important;
    border-color: var(--the7-btn-bg-color, #13cc96) !important;
    color: var(--the7-btn-color, #fff) !important;
}

.osb-em-events .em.pixelbones .input .em-item-read-more.button:focus-visible {
    outline: 2px solid var(--the7-btn-bg-color, #13cc96) !important;
    outline-offset: 2px;
}


/* -------------------------------------------------------------------------
   Hide the redundant bookings summary block on the single event page.

   The single event template renders "Bookings" TWICE:

     1. <section class="em-event-bookings-meta">  — hidden here
            <h3>Bookings</h3>
            $0.00 - $10.00                 (price range)
            <a href="#em-event-booking-form">Register</a>   (jump link)

     2. <section class="em-event-bookings">      — kept, this is the real one
            <h2>Bookings</h2>
            ticket table + Registration Information + Register submit

   (1) only duplicates the heading and repeats a price/CTA that (2) already
   shows in full, so it's suppressed. The booking form itself stays visible and
   fully working — do NOT extend this to .em-event-bookings, which would remove
   registration from the page entirely.

   Matched on the exact class: .em-event-bookings-meta and .em-event-bookings
   share a prefix, so a prefix/substring match would take the form down too.
   ---------------------------------------------------------------------- */
.osb-em-event-single .em section.em-event-bookings-meta {
    display: none;
}


/* -------------------------------------------------------------------------
   Booking form submit — "Register".
   Rendered as <input type="submit" class="em-booking-submit em-button">.
   ---------------------------------------------------------------------- */
.osb-em-event-single .em input.em-booking-submit,
.osb-em-event-single .em .em-booking-submit.em-button {
    background: var(--the7-btn-bg-color, #13cc96);
    border: var(--the7-btn-m-border-width, 0) solid var(--the7-btn-border-color, #13cc96);
    border-radius: var(--the7-btn-m-border-radius, 3px);
    color: var(--the7-btn-color, #fff);
    font-size: var(--the7-btn-m-font-size, 16px);
    font-weight: var(--the7-btn-m-font-weight, 800);
    line-height: 1.2;
    padding: 12px 28px;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.osb-em-event-single .em input.em-booking-submit:hover,
.osb-em-event-single .em .em-booking-submit.em-button:hover {
    background: var(--the7-btn-hover-bg-color, #119fd3);
    color: var(--the7-btn-hover-color, #fff);
}


/* -------------------------------------------------------------------------
   Ticket picker — one ticket per registration.

   The quantity dropdown in each ticket row is replaced server-side by a single
   checkbox (see the "ONE TICKET PER REGISTRATION" section in
   outsell-blog-enhancer.php). EM's checkbox styling is kept — the custom box
   and tick are its own, drawn with :after — and only three things change here:
   the box is enlarged from EM's 15px into a comfortable target, the whole cell
   becomes clickable via the wrapping <label>, and the selected state picks up
   the Outsell green instead of EM's grey #666 tick.

   The !important and the doubled-up selectors are for the same reason as the
   buttons above: EM's checkbox rules under `.em.pixelbones .input` are all
   flagged and score (0,5,1), so ours have to clear that.
   ---------------------------------------------------------------------- */
.osb-em-event-single .em .em-tickets .osb-em-ticket-choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px is the minimum comfortable touch target; the box itself is 22px. */
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    /* Without this the inline-flex label aligns on the cell's text baseline and
       sits above the price beside it, which is noticeable on the tall rows. */
    vertical-align: middle;
    cursor: pointer;
}

.osb-em-event-single .em.pixelbones .input .em-tickets input.em-ticket-select[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    top: 0 !important;
    margin: 0 !important;
    border: 2px solid var(--border-color, #b3b3b3) !important;
    border-radius: 4px !important;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.osb-em-event-single .em.pixelbones .input .em-tickets input.em-ticket-select[type="checkbox"]:hover {
    border-color: var(--the7-btn-bg-color, #13cc96) !important;
}

.osb-em-event-single .em.pixelbones .input .em-tickets input.em-ticket-select[type="checkbox"]:checked {
    background-color: var(--the7-btn-bg-color, #13cc96) !important;
    border-color: var(--the7-btn-bg-color, #13cc96) !important;
}

/* EM draws the tick as two borders on :after, rotated. Re-centre it for the
   larger box and flip it white so it reads against the filled green. */
.osb-em-event-single .em.pixelbones .input .em-tickets input.em-ticket-select[type="checkbox"]:after {
    left: 7px !important;
    top: 3px !important;
    width: 6px !important;
    height: 11px !important;
    border-color: var(--the7-btn-color, #fff) !important;
    border-top: 0 !important;
    border-left: 0 !important;
}

/* Keyboard focus has to be restored: EM sets `outline: 0 !important` on
   checkbox focus, which with a bare checkbox as the only control in the row
   leaves nothing at all to show where you are. */
.osb-em-event-single .em.pixelbones .input .em-tickets input.em-ticket-select[type="checkbox"]:focus-visible {
    outline: 2px solid var(--the7-btn-bg-color, #13cc96) !important;
    outline-offset: 2px;
}

/* Centre the box in its cell. Rows vary a lot in height — the first ticket
   carries a four-line description, the rest one — and a top-aligned checkbox
   drifts away from the price sitting next to it. */
.osb-em-event-single .em.em-event-booking-form .em-tickets .em-bookings-ticket-table-spaces {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.osb-em-event-single .em.em-event-booking-form .em-tickets .em-bookings-ticket-table-price {
    vertical-align: middle;
}