/* ==========================================================================
   Split TV for WordPress :: assets/wp/split-tv-wp.css
   Loaded after the addon's own split_tv.css. Four jobs:
     1. keep the theme's styling out of the wall (buttons, inputs, images ...)
     2. the overlay under the WordPress admin bar
     3. the inline wall - [split_tv] inside a page, next to a sidebar
     4. the WordPress launchers (floating button, menu item, widget, button)
   ========================================================================== */

/* -- 1. theme isolation --------------------------------------------------
   Every rule in split_tv.css is "#stv_wrap .class" (1-1-0), so these
   (1-0-1) lose to the wall's own rules and beat the theme's
   ".entry-content button" (0-1-1) or "button:hover" (0-1-1). */
#stv_wrap button,
#stv_wrap input,
#stv_wrap select,
#stv_wrap textarea {
    font-family: inherit;
    text-transform: none;
    letter-spacing: normal;
    text-shadow: none;
    text-decoration: none;
    box-shadow: none;
    margin: 0;
    min-height: 0;
    max-width: none;
    font-weight: inherit;
    background-image: none;
}
#stv_wrap button,
#stv_wrap input[type="text"],
#stv_wrap input[type="search"] { -webkit-appearance: none; appearance: none; }
#stv_wrap button:focus,
#stv_wrap button:hover { text-decoration: none; }
/* .stv_fsx is styled by a bare class (it moves into whatever is full screen),
   so the reset above outranks it - put back what it set. */
#stv_wrap .stv_fsx { line-height: 1; border-radius: 0 9px 9px 0; box-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
#stv_wrap .stv_fsx:hover,
#stv_wrap .stv_fsx:focus { box-shadow: 0 3px 14px rgba(0, 0, 0, .6); }
#stv_wrap img,
#stv_wrap video,
#stv_wrap iframe,
#stv_wrap canvas {
    margin: 0;
    border: 0;
    box-shadow: none;
}
#stv_wrap ul,
#stv_wrap ol,
#stv_wrap li { margin: 0; padding: 0; list-style: none; }
#stv_wrap p { margin: 0; }
#stv_wrap a { text-decoration: none; box-shadow: none; }
#stv_wrap,
#stv_wrap * { box-sizing: border-box; }
#stv_wrap {
    line-height: 1.35;
    /* The theme's body font (often a serif) is not the wall's: a TV surface
       reads as an app. Override #stv_wrap's font-family to use your own. */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Hebrew", "Arial Hebrew", Arial, sans-serif;
    text-align: start;
}

/* -- 2. overlay under the admin bar -------------------------------------- */
body.admin-bar #stv_wrap:not(.stv_inline):not(.stv_mode_compact):not(.stv_fs) { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar #stv_wrap:not(.stv_inline):not(.stv_mode_compact):not(.stv_fs) { top: 46px; }
}
/* Above the admin bar (99999) and the usual sticky headers / chat widgets. */
#stv_wrap { z-index: 100000; }
#stv_wrap.stv_mode_compact { z-index: 100001; }
#stv_wrap.stv_fs { z-index: 2147482000; }

/* -- 3. the inline wall -------------------------------------------------- */
.stv_host {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: var(--stv-ratio, 16 / 9);
    min-height: var(--stv-min, 340px);
    margin: 0 0 1.6em;
    padding: 0;
    background: #0d1117;
    border-radius: 10px;
    overflow: hidden;
    color: #e8eef5;
    clear: both;
}
.stv_host.stv_host_fixed { aspect-ratio: auto; height: var(--stv-h, 600px); }
.stv_host.stv_host_fill {
    aspect-ratio: auto;
    height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
    height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
    border-radius: 0;
    margin: 0;
}
/* Wide blocks and full-width alignments in block themes. */
.alignfull > .stv_host,
.stv_host.alignfull { border-radius: 0; }

/* Phones and tablets: the addon's own small-screen rules stack the windows
   and scroll inside the wall, so the wall needs a real height to scroll in. */
@media (max-width: 992px) {
    .stv_host:not(.stv_host_fill) {
        aspect-ratio: auto;
        height: var(--stv-mh, 78vh);
        height: var(--stv-mh, 78svh);
    }
}

#stv_wrap.stv_inline:not(.stv_mode_compact):not(.stv_fs) {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: auto;
    height: auto;
    border-radius: inherit;
    /* The narrow-column rules below are asked of the wall itself, not of the
       window - next to a sidebar a 1400px screen can hold a 700px wall. */
    container-type: inline-size;
    container-name: stvwall;
}
/* Turned (fake full screen on a phone) must stay fixed over everything. */
#stv_wrap.stv_inline.stv_fs.stv_turned { container-type: normal; }

/* A wall that is part of the page is not a window: nothing to minimise, and
   nothing to close - the page is where it lives. Full screen stays. */
#stv_wrap.stv_inline .stv_b_min,
#stv_wrap.stv_inline .stv_b_close { display: none !important; }
/* "Floating window" is only for a wall that is part of the page (stvFloat);
   popped out, its compact button takes it back. Nor is it offered on a phone,
   where the page's own frame already fills the width. */
#stv_wrap:not(.stv_inline) .stv_b_float { display: none !important; }
@media (max-width: 600px) { #stv_wrap .stv_b_float { display: none !important; } }
#stv_wrap.stv_floated .stv_b_cmp { display: inline-flex !important; }

/* Names mixing Hebrew and Latin ("רדיו קול הגליל 105.3FM") read in their own direction. */
#stv_wrap .stv_radio_nm, #stv_wrap .stv_tile .stv_nm, #stv_wrap .stv_pnm { unicode-bidi: plaintext; }

/* The view the wall is in, written in its header. */
#stv_wrap .stv_modelab {
    display: inline-flex; align-items: center; flex: 0 0 auto;
    height: 24px; padding: 0 10px; margin-inline: 2px 4px;
    border-radius: 999px; border: 1px solid rgba(1, 166, 212, .55);
    background: rgba(1, 166, 212, .14); color: #01a6d4;
    font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap;
}
#stv_wrap .stv_modelab:empty { display: none; }
#stv_wrap .stv_modelab[data-mode="compact"] { border-color: rgba(245, 166, 35, .6); background: rgba(245, 166, 35, .14); color: #e59400; }
#stv_wrap .stv_modelab[data-mode="focus"] { border-color: rgba(139, 92, 246, .6); background: rgba(139, 92, 246, .14); color: #8b5cf6; }
#stv_wrap.stv_mode_compact .stv_modelab { height: 20px; padding: 0 7px; font-size: 11px; }
#stv_wrap.stv_cw_sm .stv_modelab { display: none; }
/* A wall that is part of the page: no title (the page is its title - the
   floating window keeps it), the view it is in as plain words beside the one
   button that changes it, and the "split" menu only in the split screen. */
#stv_wrap.stv_inline .stv_ttl { display: none !important; }
#stv_wrap.stv_inline .stv_modelab { height: auto; padding: 0; margin-inline: 4px 8px; border: 0; background: none !important; color: inherit; opacity: .7; font-size: 13px; }
#stv_wrap.stv_inline.stv_mode_one .stv_views,
#stv_wrap.stv_inline.stv_mode_focus .stv_views,
#stv_wrap.stv_inline.stv_mode_compact .stv_views { display: none !important; }

/* Compact on an in-page wall is the split screen's own frame with one channel
   in it (stv_mode_grid + stv_mode_one), so only what means "more than one
   window" goes: holding a window big, and resizing it against the others. */
#stv_wrap.stv_mode_one .stv_t_pin,
#stv_wrap.stv_mode_one .stv_grip_se { display: none; }
#stv_wrap.stv_mode_one .stv_tile .stv_t_info { display: inline-block; }

/* Exact windows (see stvExact in split_tv.js): each window is a 16:9 box
   around its picture, with a gap and rounded corners, packed against the top
   of the wall, right under the buttons; the wall's spare room is left below
   them. --stv-exact-bg is the wall's colour around them (a theme sets it to
   its page background). */
#stv_wrap.stv_exact .stv_wall {
    grid-template-columns: repeat(var(--stv-cols, 3), var(--stv-tw, 1fr));
    grid-template-rows: repeat(var(--stv-rows, 2), var(--stv-th, 1fr));
    gap: var(--stv-gap, 8px);
    padding: var(--stv-gap, 8px);
    justify-content: center;
    align-content: start;
    background: var(--stv-exact-bg, #0d1117);
}
#stv_wrap.stv_exact .stv_tile { border-radius: var(--stv-radius, 12px); }
#stv_wrap.stv_exact .stv_tile::after { border: 0; box-shadow: none; border-radius: inherit; }
#stv_wrap.stv_exact .stv_slot { margin: 0; border-radius: var(--stv-radius, 12px); }

/* The placeholders: shown while the wall is closed (autoplay off, or the
   viewer closed it), and while it plays in the floating compact window. */
.stv_host .stv_host_ph {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    text-align: center;
    z-index: 1;
}
.stv_host.stv_host_off .stv_host_ph_off { display: flex; }
.stv_host.stv_host_away .stv_host_ph_away { display: flex; flex-wrap: wrap; }
.stv_host .stv_host_ph_off {
    background:
        radial-gradient(ellipse at 50% 40%, rgba(1, 166, 212, .22), rgba(13, 17, 23, 0) 65%),
        #0d1117;
}
.stv_host .stv_host_play {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 18px 26px;
    border-radius: 14px;
    color: #e8eef5;
    font: inherit;
    transition: transform .15s ease, background .15s ease;
}
.stv_host .stv_host_play:hover,
.stv_host .stv_host_play:focus-visible { background: rgba(255, 255, 255, .05); transform: scale(1.03); }
.stv_host .stv_host_icon { width: 72px; height: auto; max-width: none; margin: 0; border: 0; box-shadow: none; }
.stv_host .stv_host_t { font-size: 20px; font-weight: 800; letter-spacing: .2px; }
.stv_host .stv_host_go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    border-radius: 999px;
    background: #01a6d4;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
}
.stv_host .stv_host_ph_away { color: #9fb3c8; font-size: 15px; }
.stv_host .stv_host_ph_away .fa { color: #01a6d4; font-size: 20px; }
.stv_host .stv_host_back {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid #01a6d4;
    color: #e8eef5;
    font: inherit;
    font-weight: 700;
}
.stv_host .stv_host_back:hover { background: rgba(1, 166, 212, .25); }
/* While the wall floats elsewhere the page gets its space back. */
.stv_host.stv_host_away:not(.stv_host_fill) {
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
}
.stv_host.stv_host_away .stv_host_ph_away { position: relative; inset: auto; min-height: 76px; }

/* Narrow wall (a content column beside a sidebar, or a small screen):
   the same choices split_tv.css makes for a narrow window. */
@container stvwall (max-width: 760px) {
    #stv_wrap .stv_hlab { display: none; }
}
@container stvwall (max-width: 900px) {
    #stv_wrap .stv_picker {
        position: absolute;
        inset-block: 0;
        inset-inline-end: 0;
        z-index: 12;
        width: 82%;
        max-width: 300px;
        box-shadow: 0 0 40px rgba(0, 0, 0, .55);
    }
}
@container stvwall (max-width: 560px) {
    #stv_wrap .stv_hd { gap: 5px; padding: 6px; }
    #stv_wrap .stv_hbtn { padding: 6px 8px; min-width: 32px; }
    #stv_wrap .stv_ttl { font-size: 13px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
    #stv_wrap .stv_slot_txt { display: none; }
    #stv_wrap .stv_tile .stv_nm { font-size: 11px; }
}
@container stvwall (max-width: 420px) {
    #stv_wrap .stv_ttl { display: none; }
    #stv_wrap.stv_inline .stv_modelab { display: none; }
}
#stv_wrap.stv_inline .stv_b_cmp .stv_hlab { display: inline !important; }

/* -- 4. launchers -------------------------------------------------------- */
.stv_wp_float {
    position: fixed;
    bottom: var(--stv-float-bottom, 20px);
    z-index: 99998;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 16px 8px 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: #0d1117;
    color: #e8eef5;
    font: 700 14px/1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
    transition: transform .15s ease, box-shadow .15s ease;
}
.stv_wp_float:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, .45); background: #151c25; color: #fff; }
.stv_wp_float img { width: 30px; height: auto; max-width: none; margin: 0; border: 0; }
.stv_wp_float_bl { left: var(--stv-float-side, 20px); }
.stv_wp_float_br { right: var(--stv-float-side, 20px); }
[dir="rtl"] .stv_wp_float { padding: 8px 10px 8px 16px; }
.stv_wp_float.stv_open { opacity: 0; pointer-events: none; }
.stv_wp_float.stv_live { border-color: #01a6d4; }
.stv_wp_float.stv_live::after,
.stv_wp_launch.stv_wp_btn.stv_live::after {
    content: '';
    position: absolute;
    top: -2px;
    inset-inline-end: -2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #01a6d4;
    box-shadow: 0 0 0 3px rgba(1, 166, 212, .3);
    animation: stv_pulse 1.8s ease-in-out infinite;
}
@media (max-width: 600px) {
    .stv_wp_float .stv_wp_float_t { display: none; }
    .stv_wp_float, [dir="rtl"] .stv_wp_float { padding: 8px; }
}
@media print { .stv_wp_float, #stv_min_icon { display: none !important; } }

/* The way back to a minimised wall when there is no floating button. */
#stv_min_icon.stv_min_float {
    position: fixed;
    bottom: var(--stv-float-bottom, 20px);
    inset-inline-start: var(--stv-float-side, 20px);
    z-index: 99998;
    width: 52px;
    height: 52px;
    margin: 0;
    padding: 0;
    border: 1px solid #01a6d4;
    border-radius: 50%;
    background: #0d1117;
    color: #01a6d4;
    cursor: pointer;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
}
#stv_min_icon.stv_min_float i { font-size: 22px; }

.stv_wp_launch { cursor: pointer; }
.stv_wp_btn { position: relative; }
.stv_wp_float { position: fixed; }
.stv_wp_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: #01a6d4;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
    line-height: 1.2;
    border: 0;
    box-shadow: 0 4px 14px rgba(1, 166, 212, .3);
    transition: background .15s ease, transform .15s ease;
}
.stv_wp_btn:hover,
.stv_wp_btn:focus { background: #0190b8; color: #fff; transform: translateY(-1px); }
.stv_wp_link { text-decoration: underline; }
.stv_wp_menu_a .fa { margin-inline-end: 4px; }

.stv_wp_denied {
    padding: 18px 20px;
    border-radius: 10px;
    background: #0d1117;
    color: #e8eef5;
    text-align: center;
    margin: 0 0 1.6em;
}
.stv_wp_denied a { color: #01a6d4; font-weight: 700; }

/* The widget. */
.stv_wp_wbox .stv_wp_wopen { width: 100%; justify-content: center; box-sizing: border-box; }
.stv_wp_wlist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.stv_wp_wlist li { margin: 0; padding: 0; list-style: none; }
.stv_wp_wlist li::before { content: none; }
.stv_wp_wlist a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: 8px;
    background: #0d1117;
    color: #e8eef5 !important;
    text-decoration: none !important;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    transition: background .15s ease;
}
.stv_wp_wlist a:hover { background: #1b2633; }
.stv_wp_wlist img { width: 100%; max-width: 64px; height: 36px; object-fit: contain; margin: 0; border: 0; }
.stv_wp_wph { display: flex; align-items: center; justify-content: center; height: 36px; color: #01a6d4; font-size: 20px; }
.stv_wp_wname { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The "Split TV - full page" template. */
body.stv_canvas { margin: 0; background: #05080c; }
body.stv_canvas .stv_canvas_main { margin: 0; padding: 0; }
body.stv_canvas .stv_host { margin: 0; border-radius: 0; }
body.stv_canvas .stv_canvas_content { max-width: 960px; margin: 24px auto; padding: 0 16px; color: #e8eef5; }