/**
 * Sogo Webinar Plugin — CSS overrides
 *
 * Fixes conflicts between theme CSS (sogo-webinar-page.css) and plugin rendering.
 * These rules are scoped tightly to avoid affecting anything outside the plugin.
 */

/* ── CONFLICT 1 FIX ──────────────────────────────────────────────────────────
   Theme CSS: .sogo-cardSection.up-comingwebinar { display: none; }
   This hides the inner upcoming section permanently via CSS class.
   Our outer #sogo-section-upcoming wrapper controls visibility via JS inline style.
   The inner div visibility is forced via JS (style.setProperty 'important').
   No CSS fix needed here — JS handles it with !important inline.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── CONFLICT 3 FIX ──────────────────────────────────────────────────────────
   Theme CSS positions error divs absolutely off-screen:
   #webinar-current-event-error, #webinar-upcoming-event-error {
       position: absolute; top: -2.94rem; left: 50%; transform: translateX(-50%);
   }
   We override to keep them in the document flow.
   ─────────────────────────────────────────────────────────────────────────── */
#webinar-current-event-error,
#webinar-upcoming-event-error {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 auto 2rem !important;
    display: none; /* JS controls show/hide */
}

/* ── Float containment ──────────────────────────────────────────────────────
   WPBakery .col.span_12 children are floated, collapsing the parent to 0 height.
   overflow:hidden on these wrappers forces them to contain their floated children,
   preventing the filter bar and card sections from overlapping each other.
   ─────────────────────────────────────────────────────────────────────────── */
.sogo-tabNfilter_section,
.sogo-cardSection {
    overflow: hidden;
}

/* ── Plugin section wrappers ─────────────────────────────────────────────────
   These are the outer divs our shortcode renders.
   They must never be hidden by any theme class rule.
   ─────────────────────────────────────────────────────────────────────────── */
#sogo-section-ondemand,
#sogo-section-upcoming {
    /* base style — JS overrides display inline */
    min-height: 10rem;
}

/* ── Loading spinner ─────────────────────────────────────────────────────────*/
#sogo-webinar-loading {
    text-align: center;
    padding: 4rem 0;
    min-height: 8rem;
}

/* ── Clear filter button (×) inside dropdown ─────────────────────────────────
   Theme CSS already styles .fa.fa-times inside .select-selected.
   Our × button uses that same class so it inherits the green circle style.
   Extra: ensure pointer-events work even though parent has pointer-events:none.
   ─────────────────────────────────────────────────────────────────────────── */
.sogo-webinarfilter-select .select-selected i.sogo-plugin-clear-filter {
    pointer-events: all !important;
    cursor: pointer !important;
}

/* ── Ensure upcoming inner card section isn't hidden by CSS class ────────────
   Override the theme rule for the inner div when it's inside our wrapper.
   JS also sets inline !important, but belt-and-suspenders here.
   ─────────────────────────────────────────────────────────────────────────── */
#sogo-section-upcoming .sogo-cardSection.up-comingwebinar {
    display: block !important;
}

/* ── View More overlay ───────────────────────────────────────────────────────*/
.view-more-card-sec-wrapper {
    position: relative;
    z-index: 2;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
}


.sogo-cardSection{
    padding-top:0;
}


.sogo-tabNfilter_section{
    z-index:9;
}