/* =============================================================================
   WM Webinar Manager — Front-end styles
   Loaded only on pages that contain the [wm_webinar_sessions] shortcode.
   All brand-critical rules carry !important to beat theme/page-builder resets.
   ============================================================================= */

/* ── Single-session time display ─────────────────────────────────────────── */

.wm-webinar-time {
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 25px !important;
    line-height: 28px !important;
    letter-spacing: -0.015em !important;
    font-feature-settings: "liga" off !important;
    color: #00597A !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* ── Multi-session slot list ─────────────────────────────────────────────── */

.wm-sessions-selector {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.wm-session-slot {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    border: 1px solid #d0dde5 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: border-color 0.18s ease, background-color 0.18s ease !important;
    background: #ffffff !important;
    outline: none !important;
    box-sizing: border-box !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.wm-session-slot:hover,
.wm-session-slot:focus-visible {
    border-color: #23a8d5 !important;
    background: #f0f9fd !important;
}

.wm-session-slot--active {
    border-color: #23a8d5 !important;
    background: #E3F2FB !important;
}

/* ── Time text inside a slot ─────────────────────────────────────────────── */

.wm-session-slot .wm-session-time {
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 25px !important;
    line-height: 28px !important;
    letter-spacing: -0.015em !important;
    font-feature-settings: "liga" off !important;
    color: #00597A !important;
    flex: 1 !important;
}

/* ── Region badge ────────────────────────────────────────────────────────── */

.wm-session-slot .wm-session-region {
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: #ffffff !important;
    background: #23a8d5 !important;
    border-radius: 4px !important;
    padding: 3px 9px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* ── Selection state: shrink + dim unselected slots ─────────────────────── */
/*
 * Once any slot is chosen (.wm-has-selection on the container), unchosen slots
 * shrink in text size and fade in opacity. Hovering any unchosen slot fully
 * restores it, signalling the choice can still be changed.
 */

/* Include font-size and padding in the transition for smooth scaling */
.wm-session-slot {
    transition: border-color 0.22s ease,
                background-color 0.22s ease,
                opacity 0.22s ease,
                padding 0.22s ease !important;
}
.wm-session-slot .wm-session-time {
    transition: font-size 0.22s ease, line-height 0.22s ease !important;
}
.wm-session-slot .wm-session-region {
    transition: font-size 0.22s ease, padding 0.22s ease !important;
}

/* Inactive slots: dimmed, reduced padding and smaller text */
.wm-sessions-selector.wm-has-selection .wm-session-slot:not(.wm-session-slot--active) {
    opacity: 0.5 !important;
    padding: 10px 16px !important;
}
.wm-sessions-selector.wm-has-selection .wm-session-slot:not(.wm-session-slot--active) .wm-session-time {
    font-size: 16px !important;
    line-height: 20px !important;
}
.wm-sessions-selector.wm-has-selection .wm-session-slot:not(.wm-session-slot--active) .wm-session-region {
    font-size: 9px !important;
    padding: 2px 7px !important;
}

/* Hovering an inactive slot: fully restore it to normal size */
.wm-sessions-selector.wm-has-selection .wm-session-slot:not(.wm-session-slot--active):hover {
    opacity: 1 !important;
    padding: 16px 20px !important;
    border-color: #23a8d5 !important;
    background: #f0f9fd !important;
}
.wm-sessions-selector.wm-has-selection .wm-session-slot:not(.wm-session-slot--active):hover .wm-session-time {
    font-size: 25px !important;
    line-height: 28px !important;
}
.wm-sessions-selector.wm-has-selection .wm-session-slot:not(.wm-session-slot--active):hover .wm-session-region {
    font-size: 11px !important;
    padding: 3px 9px !important;
}