.sm-demo-widget {
	box-sizing: border-box;
	width: 100%;
}

.sm-demo-widget *,
.sm-demo-widget *::before,
.sm-demo-widget *::after {
	box-sizing: inherit;
}

.sm-demo-widget__title,
.sm-demo-widget__description {
	margin-top: 0;
}

.sm-demo-widget__title {
	margin-bottom: 0;
}

.sm-demo-widget__description {
	margin-bottom: 0;
}

/* ==========================================================
   Spicy Marmelade Radio Player
   ========================================================== */

.sm-radio-player {
    position: relative;
    min-height: var(--sm-radio-visualizer-size, 220px);
}


/* ----------------------------------------------------------
   Visualizer
   ---------------------------------------------------------- */

.sm-radio-player__visualizer {
    position: absolute;
    left: var(--sm-radio-position-x, 50%);
    top: 50%;

    width: var(--sm-radio-visualizer-size, 220px);
    height: var(--sm-radio-visualizer-size, 220px);

    transform: translate(-50%, -50%);
    overflow: visible;
    z-index: 1;
}

.sm-radio-player__visualizer canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}


/* ----------------------------------------------------------
   Main Play / Pause Button
   ---------------------------------------------------------- */

.sm-radio-player button.sm-radio-player__toggle {
    position: absolute !important;

    left: var(--sm-radio-position-x, 50%) !important;
    top: 50% !important;
    bottom: auto !important;

    transform: translate(-50%, -50%) !important;

    width: var(--sm-radio-button-size, 87px) !important;
    height: var(--sm-radio-button-size, 87px) !important;

    min-width: var(--sm-radio-button-size, 87px) !important;
    min-height: var(--sm-radio-button-size, 87px) !important;

    max-width: var(--sm-radio-button-size, 87px) !important;
    max-height: var(--sm-radio-button-size, 87px) !important;

    padding: 0 !important;
    margin: 0 !important;

    box-sizing: border-box !important;

    border-radius: 50% !important;
    border: 7px double var(--sm-radio-button-border, #F7B500) !important;

    background: var(--sm-radio-button-bg, #dc0454);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    line-height: 1 !important;

    z-index: 5 !important;
}

.sm-radio-player button.sm-radio-player__toggle:hover {
    background: var(--sm-radio-button-hover-bg, #F7B500);
}


/* ----------------------------------------------------------
   Play / Pause Icons
   ---------------------------------------------------------- */

.sm-radio-player__icon {
    position: absolute !important;
    pointer-events: none;
}

.sm-radio-player__icon--play {
    display: block !important;

    width: 0 !important;
    height: 0 !important;

    left: 54% !important;
    top: 50% !important;

    transform: translate(-50%, -50%) !important;

    border-top:
        calc(var(--sm-radio-button-size, 87px) * 0.16)
        solid transparent !important;

    border-bottom:
        calc(var(--sm-radio-button-size, 87px) * 0.16)
        solid transparent !important;

    border-left:
        calc(var(--sm-radio-button-size, 87px) * 0.24)
        solid var(--sm-radio-button-icon, #ffffff) !important;
}

.sm-radio-player__icon--pause {
    display: none !important;

    left: 50% !important;
    top: 50% !important;

    transform: translate(-50%, -50%) !important;

    align-items: center;
    justify-content: center;

    gap: calc(var(--sm-radio-button-size, 87px) * 0.07);
}

.sm-radio-player__icon--pause span {
    display: block !important;

    width: calc(var(--sm-radio-button-size, 87px) * 0.09) !important;
    height: calc(var(--sm-radio-button-size, 87px) * 0.28) !important;

    background: var(--sm-radio-button-icon, #ffffff) !important;
}


/* Playback state */

.sm-radio-player__toggle[data-state="playing"]
.sm-radio-player__icon--play {
    display: none !important;
}

.sm-radio-player__toggle[data-state="playing"]
.sm-radio-player__icon--pause {
    display: flex !important;
}

.sm-radio-player__toggle[data-state="paused"]
.sm-radio-player__icon--play {
    display: block !important;
}

.sm-radio-player__toggle[data-state="paused"]
.sm-radio-player__icon--pause {
    display: none !important;
}


/* ----------------------------------------------------------
   Loading Spinner
   ---------------------------------------------------------- */

.sm-radio-player__toggle[data-state="loading"]
.sm-radio-player__icon--play,

.sm-radio-player__toggle[data-state="loading"]
.sm-radio-player__icon--pause {
    display: none !important;
}

.sm-radio-player__toggle[data-state="loading"]::after {
    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: calc(var(--sm-radio-button-size, 87px) * 0.32) !important;
    height: calc(var(--sm-radio-button-size, 87px) * 0.32) !important;

    margin-left:
        calc(var(--sm-radio-button-size, 87px) * -0.16) !important;

    margin-top:
        calc(var(--sm-radio-button-size, 87px) * -0.16) !important;

    border:
        calc(var(--sm-radio-button-size, 87px) * 0.035)
        solid rgba(255,255,255,.3) !important;

    border-top-color:
        var(--sm-radio-button-icon, #ffffff) !important;

    border-radius: 50% !important;

    animation:
        sm-radio-loading-spin .75s linear infinite !important;
}

@keyframes sm-radio-loading-spin {
    to {
        transform: rotate(360deg);
    }
}


/* ----------------------------------------------------------
   iOS / Mobile Canvas Safeguard
   ---------------------------------------------------------- */

@media (max-width: 767px) {

    .sm-radio-player__visualizer {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: var(--sm-radio-visualizer-size, 220px) !important;
        height: var(--sm-radio-visualizer-size, 220px) !important;

        overflow: visible !important;
    }

    .sm-radio-player__visualizer canvas {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: 100% !important;
        height: 100% !important;

        max-width: none !important;
        max-height: none !important;
    }
}


/* ----------------------------------------------------------
   Zero-Energy / iOS Fallback Visualizer
   ---------------------------------------------------------- */

.sm-radio-player::before,
.sm-radio-player::after {
    content: "";

    position: absolute;

    pointer-events: none;
    opacity: 0;
}


/* Animated spectrum-style ring */

.sm-radio-player--fallback::before {
    opacity: 1;

    left: var(--sm-radio-position-x, 50%);
    top: 50%;

    transform: translate(-50%, -50%);

    width: calc(var(--sm-radio-button-size, 87px) * 1.35);
    height: calc(var(--sm-radio-button-size, 87px) * 1.35);

    border-radius: 50%;

    background:
        repeating-conic-gradient(
            from 0deg,
            #ffc400 0deg 7deg,
            #ff6d00 7deg 12deg,
            transparent 12deg 16deg
        );

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 0 55%,
            #000 56% 100%
        );

    mask:
        radial-gradient(
            circle,
            transparent 0 55%,
            #000 56% 100%
        );

    animation:
        sm-radio-fallback-pulse 1.1s ease-in-out infinite;

    z-index: 2;
}


/* Expanding secondary ring */

.sm-radio-player--fallback::after {
    opacity: .7;

    left: var(--sm-radio-position-x, 50%);
    top: 50%;

    transform: translate(-50%, -50%);

    width: calc(var(--sm-radio-button-size, 87px) * 1.55);
    height: calc(var(--sm-radio-button-size, 87px) * 1.55);

    border-radius: 50%;

    border:
        2px solid var(--sm-radio-button-border, #F7B500);

    animation:
        sm-radio-fallback-ring 1.4s ease-out infinite;

    z-index: 1;
}

@keyframes sm-radio-fallback-pulse {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(.92)
            rotate(0deg);

        opacity: .65;
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.08)
            rotate(8deg);

        opacity: 1;
    }
}

@keyframes sm-radio-fallback-ring {

    0% {
        transform:
            translate(-50%, -50%)
            scale(.8);

        opacity: .55;
    }

    100% {
        transform:
            translate(-50%, -50%)
            scale(1.2);

        opacity: 0;
    }
}


/* ==========================================================
   Spicy Marmelade Today Program
   ========================================================== */

.sm-today-program {
    width: 100%;
    box-sizing: border-box;
    color: #ffffff;
}

.sm-today-program *,
.sm-today-program *::before,
.sm-today-program *::after {
    box-sizing: border-box;
}


/* Header */

.sm-today-program__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.sm-today-program__heading {
    margin: 0;
    padding: 0;

    color: #ffffff;

    font-family: "Roboto Condensed", sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.sm-today-program__timezone {
    color: #8f819d;

    font-family: "Roboto Condensed", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}


/* Program list */

.sm-today-program__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.sm-today-program__row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 78px;
    align-items: center;
    column-gap: 12px;

    width: 100%;
    min-height: 43px;
}


/* Time */

.sm-today-program__time {
    color: #f7b500;

    font-family: "Roboto Condensed", sans-serif;
    font-size: 23px;
    font-weight: 700;
    line-height: 1;
}

.sm-today-program__row:has(.sm-today-program__badge--live)
.sm-today-program__time {
    color: #e90059;
}


/* Show */

.sm-today-program__show {
    min-width: 0;
}

.sm-today-program__title {
    overflow: hidden;

    color: #ffffff;

    font-family: "Roboto Condensed", sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;

    letter-spacing: 1.5px;
    text-transform: uppercase;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* Status */

.sm-today-program__status {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.sm-today-program__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 6px 7px;

    border-radius: 4px;

    font-family: "Roboto Condensed", sans-serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;

    white-space: nowrap;
}

.sm-today-program__badge--live {
    color: #ffffff;
    background: #ff1010;
}

.sm-today-program__badge--next {
    color: #090009;
    background: #f7b500;
}


/* Empty state */

.sm-today-program__empty {
    color: #8f819d;

    font-family: "Roboto Condensed", sans-serif;
    font-size: 15px;
    line-height: 1.4;
}


/* Tablet / Mobile */

@media (max-width: 767px) {

    .sm-today-program__header {
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 18px;
    }

    .sm-today-program__heading {
        font-size: 20px;
    }

    .sm-today-program__timezone {
        font-size: 11px;
    }

    .sm-today-program__row {
        grid-template-columns: 58px minmax(0, 1fr) 68px;
        column-gap: 8px;
    }

    .sm-today-program__time {
        font-size: 20px;
    }

    .sm-today-program__title {
        font-size: 14px;
        letter-spacing: 1px;
    }

    .sm-today-program__badge {
        padding: 5px 6px;
        font-size: 10px;
    }
}

/* Today Program typography refinement */

.sm-today-program__heading {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    letter-spacing: 0.3px;
}

.sm-today-program__title {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    letter-spacing: 1.5px;
}


/* ==========================================================
   SM NEXT LIVESTREAM
   ========================================================== */

.sm-next-livestream {
    width: 100%;
    text-align: center;
}

.sm-next-livestream__heading {
    margin: 0 0 8px;
    font-family: "Bebas Neue", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff;
}

.sm-next-livestream__event-title {
    margin: 0 0 8px;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 12px;
    line-height: 1.2;
    color: rgba(255,255,255,.55);
}

.sm-next-livestream__countdown {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    gap: 7px;
}

.sm-next-livestream__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 42px;
}

.sm-next-livestream__number {
    display: block;
    font-family: "Bebas Neue", sans-serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1px;
    color: #e31359;
    white-space: nowrap;
}

.sm-next-livestream__separator {
    display: block;
    padding-top: 0;
    font-family: "Bebas Neue", sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1;
    color: #e31359;
}

.sm-next-livestream__label {
    display: block;
    margin-top: 7px;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 9px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    color: #ffc400;
}

.sm-next-livestream__empty {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,.65);
}

@media (max-width: 767px) {

    .sm-next-livestream__countdown {
        gap: 4px;
    }

    .sm-next-livestream__unit {
        min-width: 36px;
    }

    .sm-next-livestream__number {
        font-size: 28px;
    }

    .sm-next-livestream__separator {
        font-size: 27px;
    }
}


/* SM Next Livestream featured event background */

.sm-next-livestream {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 18px;
    border-radius: 10px;
}

.sm-next-livestream--has-background {
    background-image: var(--sm-livestream-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.sm-next-livestream--has-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    /*
     * Darkest at bottom so countdown text stays readable,
     * slightly more transparent toward the top.
     */
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, calc(var(--sm-livestream-overlay) * 0.70)) 0%,
            rgba(0, 0, 0, var(--sm-livestream-overlay)) 100%
        );
}

.sm-next-livestream__heading,
.sm-next-livestream__event-title,
.sm-next-livestream__countdown,
.sm-next-livestream__empty {
    position: relative;
    z-index: 1;
}


/* ==========================================================
   NEXT LIVESTREAM - FULL HEIGHT FEATURED IMAGE
   ========================================================== */

/* Elementor widget wrapper fills its parent countdown container */
.elementor-widget-sm-next-livestream {
    height: 100%;
}

.elementor-widget-sm-next-livestream > .elementor-widget-container {
    height: 100%;
}

/* Our actual widget fills the complete available area */
.sm-next-livestream {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    overflow: hidden;
    isolation: isolate;

    padding: 20px;
}

/* Featured image fills the whole widget */
.sm-next-livestream--has-background {
    background-image: var(--sm-livestream-bg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Dark gradient over complete image */
.sm-next-livestream--has-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background: linear-gradient(
        180deg,
        rgba(0,0,0,calc(var(--sm-livestream-overlay) * 0.65)) 0%,
        rgba(0,0,0,calc(var(--sm-livestream-overlay) * 0.80)) 45%,
        rgba(0,0,0,var(--sm-livestream-overlay)) 100%
    );
}

/* All content stays above image + overlay */
.sm-next-livestream__heading,
.sm-next-livestream__event-title,
.sm-next-livestream__countdown,
.sm-next-livestream__empty {
    position: relative;
    z-index: 2;
}


/* Force Next Livestream to fill the countdown column */

.elementor-widget-sm-next-livestream,
.elementor-widget-sm-next-livestream .elementor-widget-container,
.sm-next-livestream {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
}

.elementor-widget-sm-next-livestream {
    align-self: stretch !important;
    flex-grow: 1 !important;
}

.sm-next-livestream {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Keep overlay across complete image */
.sm-next-livestream--has-background::before {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Keep content above the image */
.sm-next-livestream__heading,
.sm-next-livestream__event-title,
.sm-next-livestream__countdown,
.sm-next-livestream__empty {
    position: relative;
    z-index: 3;
}


/* ==========================================================
   RADIO / PROGRAM / LIVESTREAM - HEADING ALIGNMENT
   ========================================================== */

/* Same typography/baseline for program + livestream headings */
.sm-today-program__heading,
.sm-next-livestream__heading {
    font-family: "Bebas Neue", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.5px;
    margin: 0 !important;
}

/* Livestream heading fixed at same top position */
.sm-countdown-col .sm-next-livestream {
    position: relative;
    justify-content: center !important;
    padding: 22px 20px !important;
}

.sm-countdown-col .sm-next-livestream__heading {
    position: absolute !important;
    top: 22px;
    left: 20px;
    right: 20px;
    z-index: 3;
    text-align: left;
}

/* Countdown itself remains centered */
.sm-countdown-col .sm-next-livestream__countdown {
    position: relative;
    z-index: 2;
}


/* ==========================================================
   SM RADIO PLAYER - HEADING
   ========================================================== */

.sm-radio-player {
    position: relative;
}

.sm-radio-player__heading {
    position: absolute;
    top: 22px;
    left: 20px;
    right: 20px;
    z-index: 10;

    margin: 0;

    font-family: "Bebas Neue", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.5px;

    text-align: left;
    text-transform: uppercase;

    color: #ffffff;
    pointer-events: none;
}

.sm-radio-player__heading-accent {
    color: #e31359;
}


/* ==========================================================
   FINAL HEADING ALIGNMENT
   Reference: SM Today Program
   ========================================================== */

.sm-radio-player__heading,
.sm-today-program__heading,
.sm-next-livestream__heading {
    margin: 0 !important;
    font-family: "Bebas Neue", sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase;
}

/*
 * NEXT LIVESTREAM
 * Heading belongs at top of image,
 * countdown itself stays vertically centered.
 */
.sm-next-livestream__heading {
    position: absolute !important;
    top: 12px !important;
    left: 20px !important;
    right: 20px !important;
    z-index: 5 !important;
    text-align: left !important;
}

/*
 * RADIO
 * Pull heading upward independently from centered
 * play-button / visualizer content.
 */
.sm-radio-player__heading {
    top: -44px !important;
    left: 0 !important;
    right: auto !important;
    white-space: nowrap;
}


/* Final radio heading baseline correction */
.sm-radio-player__heading {
    top: -26px !important;
}



/* ==========================================================
   SM RADIO PLAYER - INFO BAR
   ========================================================== */

.sm-radio-player__info-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -34px;
    z-index: 12;

    display: flex;
    align-items: center;
    gap: 22px;

    color: #cfc4e4;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .6px;
    text-transform: uppercase;

    pointer-events: none;
}

.sm-radio-player__info-bar > span {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.sm-radio-player__status-dot {
    margin-right: 6px;
    color: #ff2d3b;
}

.sm-radio-player__status--online .sm-radio-player__status-dot {
    animation: sm-radio-status-blink 1.4s infinite;
}

.sm-radio-player__status--offline .sm-radio-player__status-dot {
    animation: none;
    opacity: 1;
}

.sm-radio-player__status--master .sm-radio-player__status-dot {
    color: #f7b500;
    animation: sm-radio-status-blink 1.4s infinite;
}

.sm-radio-player__status--checking .sm-radio-player__status-dot {
    opacity: .45;
    animation: none;
}

.sm-radio-player__info-icon {
    margin-right: 6px;
    color: #9d8fc0;
    font-size: 10px;
}

.sm-radio-player__signal-icon {
    margin-right: 6px;
    color: #f7b500;
    font-size: 9px;
}

@keyframes sm-radio-status-blink {
    50% {
        opacity: .35;
    }
}

@media (max-width: 767px) {
    .sm-radio-player__info-bar {
        gap: 12px;
        font-size: 9px;
        letter-spacing: .35px;
    }
}


/* SM Radio Player - Info Bar icon refinement */

.sm-radio-player__info-icon,
.sm-radio-player__signal-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    margin-right: 6px;
    fill: currentColor;
}

.sm-radio-player__info-icon {
    color: #9d8fc0;
}

.sm-radio-player__signal-icon {
    color: #f7b500;
}

.sm-radio-player__viewer-label {
    margin-left: 4px;
}


/* ==========================================================
   SPICY MARMELADE - LEGACY LANDING PAGE GLOBALS
   Migrated from Elementor HTML Radio Info widget.
   Old .sm-tbar radio-info styling intentionally excluded.
   ========================================================== */

.sm-page{--yel:#F7B500;--pink:#FF2D7A;--mag:#E6007E;--pur:#8B5CF6}
.sm-hl{background:linear-gradient(90deg,#F7B500,#FFC93E);color:#160826;padding:0 14px 2px;display:inline-block;transform:rotate(-1.2deg);border-radius:3px}
.sm-heart{color:#FF2D7A;font-size:.45em;vertical-align:super;font-style:normal}
.sm-badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.6px;padding:3px 10px;border-radius:5px;text-transform:uppercase;line-height:1.4}
.sm-badge.live{background:#FF2D3B;color:#fff}
.sm-badge.pink{background:#E6007E;color:#fff}
.sm-badge.upnext{background:#F7B500;color:#1A0B2E}
.sm-obadge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.6px;padding:2px 10px;border-radius:5px;text-transform:uppercase;border:1px solid}
.sm-obadge.p{color:#FF2D7A;border-color:#FF2D7A}
.sm-obadge.y{color:#F7B500;border-color:#F7B500}
.sm-obadge.v{color:#A78BFA;border-color:#A78BFA}
.sm-obadge.o{color:#FF7A00;border-color:#FF7A00}
.sm-glow>.elementor-widget-container, .sm-glow{box-shadow:0 0 34px rgba(230,0,126,.35)}
.sm-controls{display:flex;align-items:center;gap:12px;background:rgba(8,4,16,.92);border-radius:10px;padding:10px 14px;color:#cfc4e4;font-size:12px}
.sm-controls i{font-size:13px}
.sm-controls .lv{color:#FF2D3B;font-weight:800;font-size:11px;letter-spacing:.5px;white-space:nowrap}
.sm-prog{flex:1;height:4px;background:rgba(255,255,255,.18);border-radius:4px;overflow:hidden}
.sm-prog>div{width:62%;height:100%;background:linear-gradient(90deg,#FF2D3B,#FF2D7A);border-radius:4px}
.sm-hlsb{font-size:9px;font-weight:800;border:1px solid #7c6f96;border-radius:3px;padding:1px 5px}
.sm-realplayer,.sm-realonair{width:100%}
.sm-realplayer .proradio-playercontainer,.sm-realplayer .qtmplayer{background:transparent!important}
.sm-player{display:flex;align-items:center;gap:16px}
.sm-wave{display:flex;align-items:center;gap:2px;height:56px;flex:1;overflow:hidden}
.sm-wave b{width:3px;border-radius:2px;background:linear-gradient(180deg,#FF7A00,#FF2D7A)}
.sm-playbtn{width:64px;height:64px;min-width:64px;border-radius:50%;background:linear-gradient(135deg,#F7B500,#FF7A00);display:flex;align-items:center;justify-content:center;color:#1A0B2E;font-size:20px;box-shadow:0 0 0 6px rgba(230,0,126,.18),0 0 30px rgba(230,0,126,.5)}
.sm-nowinfo{display:flex;flex-direction:column;line-height:1.35}
.sm-nowinfo em{color:#F7B500;font-style:normal;font-size:10px;font-weight:800;letter-spacing:1px}
.sm-nowinfo strong{color:#fff;font-size:16px;font-weight:800}
.sm-nowinfo span{color:#B9AECB;font-size:12px}
.sm-progrow,.sm-volrow{display:flex;align-items:center;gap:10px;color:#8E80A6;font-size:11px;margin-top:12px}
.sm-prog2{flex:1;height:4px;background:rgba(255,255,255,.14);border-radius:4px;position:relative}
.sm-prog2>div{height:100%;background:#FF2D7A;border-radius:4px}
.sm-prog2>div:after{content:'';position:absolute;top:50%;left:var(--kx,62%);transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:#FF2D7A}
.sm-plist{display:flex;flex-direction:column;gap:14px}
.sm-plist .row{display:flex;align-items:center;gap:14px}
.sm-plist .tm{font-weight:800;font-size:14px;min-width:46px;color:#F7B500;letter-spacing:.2px}
.sm-plist .row.is-live .tm{color:#FF2D7A}
.sm-plist .tt{flex:1;line-height:1.25}
.sm-plist .tt b{display:block;color:#fff;font-size:14.5px;font-weight:700;letter-spacing:.2px;text-transform:uppercase}
.sm-plist .tt span{display:block;color:#9c8fb4;font-size:11.5px;font-weight:400;margin-top:1px}
/* countdown: open column divided by a hairline, not a separate box */
.sm-cd{position:relative;overflow:hidden;border-left:1px solid rgba(139,92,246,.22)}
.sm-cd:after{content:'';position:absolute;left:4%;right:4%;bottom:0;height:82px;pointer-events:none;
  background:url('https://next.spicymarmelade.com/wp-content/uploads/2025/07/sm3-flame.png') no-repeat center bottom;
  background-size:100% 100%;opacity:.9}
.sm-cdnum{font-size:36px;font-weight:900;letter-spacing:.5px;line-height:1;text-align:center;
  background:linear-gradient(90deg,#8B5CF6 0%,#C74BC8 38%,#FF2D7A 68%,#FF3B2F 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sm-cdl{display:flex;justify-content:center;gap:26px;color:#F7B500;font-size:9.5px;font-weight:800;letter-spacing:1.4px;margin-top:5px}
.sm-avatar img{border-radius:50%}
.sm-benefits{display:flex;align-items:stretch;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sm-benefit{display:flex;align-items:flex-start;gap:12px;flex:1;min-width:150px;padding:4px 8px}
.sm-benefit .ic{font-size:24px;line-height:1;margin-top:3px}
.sm-benefit .tt{color:#F7B500;font-size:12.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;margin-bottom:3px}
.sm-benefit .dd{color:#8E80A6;font-size:10px;line-height:1.5}
.sm-b18{width:34px;height:34px;min-width:34px;border-radius:50%;border:2px solid #FF2D7A;color:#FF2D7A;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;margin-top:1px}
.sm-dealbag{position:relative;display:inline-block;font-size:38px;color:#FF2D7A;filter:drop-shadow(0 0 14px rgba(255,45,122,.65))}
.sm-dealbag em{position:absolute;top:55%;left:50%;transform:translate(-50%,-50%);font-style:normal;font-weight:900;font-size:15px;color:#fff}
.sm-meta{color:#8E80A6;font-size:11px;display:flex;gap:14px;align-items:center}
.sm-18{width:44px;height:44px;border-radius:50%;border:2px solid #FF2D7A;color:#FF2D7A;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;margin:0 auto}
.sm-nl{display:flex;gap:10px;flex-wrap:wrap}
.sm-nl input[type=email]{flex:1;min-width:200px;background:#0F0214!important;background-color:#0F0214!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:9px!important;color:#fff!important;padding:13px 16px!important;font-size:13px!important;outline:none!important;box-shadow:none!important}
.sm-nl input[type=email]:focus{border-color:rgba(216,26,77,.7)!important;background:#0F0214!important}
.sm-nl input[type=email]::placeholder{color:#8d7f9c!important;opacity:1}
.sm-nl button{background:#D81A4D;color:#fff;border:0;border-radius:9px;font-weight:800;font-size:13px;letter-spacing:1px;padding:13px 34px;text-transform:uppercase;cursor:pointer}
.sm-nl button:hover{background:#E82757}
.sm-silh{height:150px;display:flex;align-items:flex-end;justify-content:center;border:1px dashed rgba(255,122,0,.45);border-radius:12px;
  background:linear-gradient(180deg,rgba(255,122,0,.10),rgba(230,0,126,.06));width:100%}
.sm-silh span{display:block;text-align:center;padding:0 0 16px;color:#c08a6e;font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;line-height:1.6}
.sm-silh em{font-style:normal;color:#8a6b60;font-weight:400;text-transform:none;letter-spacing:0}
.sm-quote{font-size:66px;line-height:.8;color:#D81A4D;font-weight:900;font-family:Georgia,serif}
.sm-fnav{display:flex;gap:30px;flex-wrap:wrap;color:#C9BFD9;font-size:12.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.sm-fsoc{display:flex;gap:14px;align-items:center}
.sm-fsoc a{width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:17px;background:transparent}
.sm-fsoc a.ig{border:2px solid #FF2D7A;color:#FF2D7A;border-radius:10px}
.sm-fsoc a.x,.sm-fsoc a.tt{color:#fff}
.sm-fsoc a.x .xg{font-family:Arial,Helvetica,sans-serif;font-weight:900;font-size:21px;line-height:1}
.sm-fsoc a.yt{color:#fff;background:#FF0000;border-radius:9px;width:40px;height:29px;font-size:16px}
.sm-fsoc a.dc{color:#8B5CF6;font-size:20px}
.sm-flogo{display:flex;align-items:center;gap:10px}
.sm-flogo .fl{font-size:34px;line-height:1}
.sm-flogo .ft{display:flex;flex-direction:column;line-height:1.02;font-weight:900;font-style:italic;letter-spacing:.3px}
.sm-flogo .ft b:first-child{color:#FF2D7A;font-size:21px}
.sm-flogo .ft b:last-child{color:#FF7A00;font-size:21px}




}
.sm-tsoc{display:flex;gap:14px;color:#9d8fc0;font-size:13px}
.sm-evcard .elementor-widget-container{line-height:1.3}
.sm-evph{display:flex;flex-direction:column;justify-content:flex-end;gap:3px;position:relative;height:128px;padding:12px 13px;text-decoration:none}
.sm-evph .ph{position:absolute;top:9px;right:10px;font-size:8px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:#6d6285;border:1px dashed #4a4160;border-radius:4px;padding:2px 6px}
.sm-evph b{font-size:14px;font-weight:900;letter-spacing:.3px;line-height:1.15;text-transform:uppercase}
.sm-evph em{font-size:9.5px;font-weight:700;font-style:normal;letter-spacing:.5px;line-height:1.35;text-transform:uppercase}
.sm-evcard img{width:100%!important;height:130px!important;object-fit:cover}
.sm-evcard .elementor-widget-image{width:100%}
.sm-lnk{color:#FF2D7A!important;font-size:12px;font-weight:700}
.sm-lnk a{color:#FF2D7A!important}
@media(max-width:1024px){.sm-wrap2>div{width:100%!important}}

/* ---- link behaviour: every anchor we output is a real, obvious link ---- */
.sm-page a,.sm-tsoc a,.sm-fnav a,.sm-fsoc a,.sm-flogo,.sm-lnk,.sm-cname{
  cursor:pointer;text-decoration:none;transition:opacity .15s ease,color .15s ease,transform .15s ease}
.sm-tsoc a{color:inherit}
.sm-tsoc a:hover,.sm-fsoc a:hover{opacity:1;transform:translateY(-1px)}
.sm-tsoc a:hover{color:#FF2D7A}
.sm-fnav a{color:inherit;text-decoration:none}
.sm-fnav a:hover{color:#FF2D7A}
.sm-flogo{text-decoration:none}
.sm-flogo:hover{opacity:.85}
.sm-lnk:hover{opacity:.75}
.sm-cname{color:#fff;font-size:13px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;text-decoration:none}
.sm-cname:hover{color:#FF2D7A}
.sm-avatar img,.sm-evcard img{transition:transform .18s ease}
.sm-avatar a:hover img,.sm-evcard a:hover img{transform:scale(1.04)}
/* placeholder links: no target page yet (Phase 1) */
.sm-todo{cursor:default;opacity:.72}


/* ==========================================================
   SM RADIO PLAYER - MOBILE MEDIA CARD
   Mobile only. Desktop rules intentionally untouched.
   ========================================================== */

@media (max-width: 767px) {

    .sm-radio-play-container {
        position: relative !important;
        width: 100% !important;
        aspect-ratio: 3 / 2;
        min-height: 0 !important;
        overflow: hidden !important;
        isolation: isolate;

        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    .sm-radio-play-container::after {
        content: "";
        position: absolute;
        z-index: 1;
        left: 0;
        right: 0;
        top: 38%;
        bottom: 0;

        pointer-events: none;

        background: linear-gradient(
            to bottom,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,.20) 40%,
            rgba(0,0,0,.78) 100%
        );
    }

    .sm-radio-play-container .sm-radio-player {
        position: relative;
        z-index: 2;

        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }

    .sm-radio-play-container .sm-radio-player__visualizer,
    .sm-radio-play-container button.sm-radio-player__toggle {
        top: 50% !important;
    }

    .sm-radio-play-container .sm-radio-player__info-bar {
        left: 18px !important;
        right: 18px !important;
        bottom: 18px !important;

        z-index: 4;

        gap: 10px;
        font-size: 9px;
        line-height: 1.15;
        letter-spacing: .35px;

        flex-wrap: wrap;
    }

    .sm-radio-play-container .sm-radio-player__heading {
        top: auto !important;
        left: 18px !important;
        right: 18px !important;
        bottom: 44px !important;

        z-index: 4 !important;

        white-space: normal;
        text-align: left;

        font-size: 20px !important;
        line-height: 1.05 !important;
    }

    .sm-radio-play-container button.sm-radio-player__toggle {
        z-index: 6 !important;
    }

    .sm-radio-play-container .sm-radio-player__visualizer {
        z-index: 5;
    }
}


/* ==========================================================
   SM RADIO PLAYER - MOBILE ELEMENTOR WIDTH FIX
   ========================================================== */

@media (max-width: 767px) {

    /* Elementor keeps this container as desktop row/nowrap */
    .sm-radio-play-container {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        row-gap: 0 !important;
        column-gap: 0 !important;
    }

    /* Desktop Elementor setting is 55% - mobile must fill card */
    .sm-radio-play-container > .elementor-widget-sm-radio-player {
        width: 100% !important;
        max-width: 100% !important;
        --container-widget-width: 100% !important;
        --container-widget-flex-grow: 1 !important;
        align-self: stretch !important;
    }

    /*
     * Separate desktop Radio Spicy Marmelade logo occupies 40%.
     * Remove it only inside the mobile media card.
     */
    .sm-radio-play-container > .elementor-widget-image {
        display: none !important;
    }

}


/* ==========================================================
   SPICY HLS PLAYER - MOBILE LAYOUT
   Mobile only. Desktop HLS styling untouched.
   ========================================================== */

@media (max-width: 767px) {

    /*
     * Taller mobile media card instead of desktop 16:9.
     */
    .sm-live-player {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 3 / 2 !important;
        overflow: hidden !important;
    }

    /*
     * Video fills the complete 3:2 card.
     * A small crop is intentional on mobile.
     */
    .sm-live-video,
    .sm-live-video > div,
    .sm-live-video .video-js {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }

    .sm-live-video .video-js video,
    .sm-live-video .video-js .vjs-tech {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center center !important;
    }

    /*
     * Keep play button geometrically centered.
     */
    .sm-live-video .video-js .vjs-big-play-button {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
    }

    /*
     * Turn the existing metadata overlay into a lower
     * readability gradient instead of a central text box.
     */
    .sm-live-overlay {
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100% !important;
        max-width: none !important;

        padding: 70px 18px 16px 18px !important;

        justify-content: flex-end !important;
        align-items: flex-start !important;

        background: linear-gradient(
            to bottom,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,.18) 35%,
            rgba(0,0,0,.82) 100%
        ) !important;

        pointer-events: none !important;
    }

    /*
     * Mobile typography.
     */
    .sm-live-overlay .sm-live-info {
        width: 100%;
        text-align: left;
    }

    .sm-live-overlay .sm-live-status,
    .sm-live-overlay .sm-offline-status {
        font-size: 10px !important;
        line-height: 1.2 !important;
        letter-spacing: 1.2px !important;
    }

    .sm-live-overlay .sm-live-title {
        font-size: 20px !important;
        line-height: 1.05 !important;
    }

    .sm-live-overlay .sm-live-host {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    .sm-live-overlay .sm-offline-text {
        font-size: 18px !important;
        line-height: 1.15 !important;
    }
}


/* ==========================================================
   SPICY HLS PLAYER - MOBILE POSTER / VIDEO.JS FIX
   ========================================================== */

@media (max-width: 767px) {

    /*
     * Disable Video.js' own 16:9 fluid sizing.
     * The outer .sm-live-player now defines the mobile 3:2 ratio.
     */
    .sm-live-player .video-js.vjs-fluid {
        height: 100% !important;
        padding-top: 0 !important;
    }

    /*
     * If Video.js creates a poster image, crop it to fill
     * the mobile 3:2 card instead of letterboxing it.
     */
    .sm-live-player .vjs-poster,
    .sm-live-player .vjs-poster img {
        width: 100% !important;
        height: 100% !important;
    }

    .sm-live-player .vjs-poster img {
        object-fit: cover !important;
        object-position: center center !important;
    }

    /*
     * Native video/poster surface.
     */
    .sm-live-player video.vjs-tech,
    .sm-live-player .video-js video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

}


/* ==========================================================
   SPICY HLS PLAYER - MOBILE INNER WRAPPER FIX
   ========================================================== */

@media (max-width: 767px) {

    /*
     * Elementor HTML widget contains one additional relative
     * wrapper around Video.js. It must also fill the 3:2 card.
     */
    .sm-live-player .sm-live-video > .elementor-widget-container,
    .sm-live-player .sm-live-video > .elementor-widget-container > div {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /*
     * Explicitly defeat Video.js fluid 16:9 sizing.
     */
    .sm-live-player .sm-live-video .video-js.vjs-fluid:not(.vjs-audio-only-mode) {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        padding-top: 0 !important;
    }

    .sm-live-player .sm-live-video .video-js .vjs-tech {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center center !important;
    }

}


/* ==========================================================
   SPICY HLS PLAYER - MOBILE SPECIFICITY OVERRIDE
   Beats page-inline 16:9 rule without affecting desktop.
   ========================================================== */

@media (max-width: 767px) {

    /*
     * Higher specificity than the page's:
     * .sm-live-player { aspect-ratio:16/9 !important; }
     */
    .sm-live-player.sm-live-player {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 3 / 2 !important;
        overflow: hidden !important;
    }

    /*
     * Force the HLS widget and Video.js surface to inherit
     * the new 3:2 card dimensions.
     */
    .sm-live-player.sm-live-player .sm-live-video,
    .sm-live-player.sm-live-player .sm-live-video .video-js {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }

    .sm-live-player.sm-live-player .sm-live-video .video-js.vjs-fluid:not(.vjs-audio-only-mode) {
        height: 100% !important;
        padding-top: 0 !important;
    }

    .sm-live-player.sm-live-player .sm-live-video video,
    .sm-live-player.sm-live-player .sm-live-video .vjs-tech {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

}


/* ==========================================================
   SPICY HLS PLAYER - MOBILE OVERLAY FINAL POSITION
   ========================================================== */

@media (max-width: 767px) {

    .sm-live-player.sm-live-player > .sm-live-overlay {
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-width: none !important;

        padding: 55px 18px 15px 18px !important;

        display: flex !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;

        background: linear-gradient(
            to bottom,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,.28) 45%,
            rgba(0,0,0,.84) 100%
        ) !important;

        pointer-events: none !important;
        z-index: 20 !important;
    }

    .sm-live-player.sm-live-player .sm-live-info {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .sm-live-player.sm-live-player .sm-live-status,
    .sm-live-player.sm-live-player .sm-offline-status {
        font-size: 10px !important;
        line-height: 1.15 !important;
        letter-spacing: 1.2px !important;
        margin-bottom: 3px !important;
    }

    .sm-live-player.sm-live-player .sm-live-title {
        font-size: 20px !important;
        line-height: 1.05 !important;
    }

    .sm-live-player.sm-live-player .sm-live-host {
        font-size: 12px !important;
        line-height: 1.2 !important;
        margin-top: 2px !important;
    }

    .sm-live-player.sm-live-player .sm-offline-text {
        font-size: 17px !important;
        line-height: 1.1 !important;
    }

}


/* ==========================================================
   SPICY HLS PLAYER - MOBILE FINAL TUNING
   ========================================================== */

@media (max-width: 767px) {

    /* Slightly stronger lower gradient + text ~10px higher */
    .sm-live-player.sm-live-player > .sm-live-overlay {
        padding: 65px 18px 25px 18px !important;

        background: linear-gradient(
            to bottom,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,.32) 42%,
            rgba(0,0,0,.90) 100%
        ) !important;
    }

}


/* ==========================================================
   SPICY HLS PLAYER - DESKTOP OVERLAY POSITION
   Desktop only. Mobile remains untouched.
   ========================================================== */

@media (min-width: 768px) {

    .sm-live-player > .sm-live-overlay {
        bottom: 30px !important;
    }

}


/* ==========================================================
   SM HLS LIVESTREAM WIDGET
   Dedicated reusable widget.
   Does not alter legacy .sm-live-player implementation.
   ========================================================== */

.sm-hls-livestream {
    position: relative;
    width: 100%;
}

.sm-hls-livestream__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

.sm-hls-livestream__player,
.sm-hls-livestream__media > .video-js {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
}

.sm-hls-livestream__media .video-js .vjs-tech,
.sm-hls-livestream__media video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center center;
}

.sm-hls-livestream__media .video-js .vjs-poster,
.sm-hls-livestream__media .video-js .vjs-poster img {
    width: 100%;
    height: 100%;
}

.sm-hls-livestream__media .video-js .vjs-poster img {
    object-fit: cover;
    object-position: center center;
}

.sm-hls-livestream__media .video-js .vjs-big-play-button {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 8;
}

.sm-hls-livestream__poster {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: opacity .25s ease;
    pointer-events: none;
}

.sm-hls-livestream__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    transition-property: opacity;
    transition-timing-function: ease;
}

.sm-hls-livestream__slide.is-active {
    opacity: 1;
}

.sm-hls-livestream__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 7;
    padding: 80px 24px 30px;
    color: #fff;
    pointer-events: none;

    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,.20) 42%,
        rgba(0,0,0,.88) 100%
    );
}

.sm-hls-livestream__online,
.sm-hls-livestream__offline {
    display: none;
}

.sm-hls-livestream--online .sm-hls-livestream__online {
    display: block;
}

.sm-hls-livestream--offline .sm-hls-livestream__offline {
    display: block;
}

.sm-hls-livestream__status,
.sm-hls-livestream__offline-status {
    margin-bottom: 5px;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.sm-hls-livestream__title {
    font-size: clamp(24px, 3vw, 42px);
    line-height: 1;
    font-weight: 700;
}

.sm-hls-livestream__host {
    margin-top: 5px;
    font-size: 15px;
    line-height: 1.3;
}

.sm-hls-livestream__offline-text {
    font-size: clamp(20px, 2.2vw, 30px);
    line-height: 1.1;
    font-weight: 600;
}

/*
 * Once actual playback starts, expose the video completely.
 */
.sm-hls-livestream--playing .sm-hls-livestream__poster {
    opacity: 0;
}

.sm-hls-livestream--playing .sm-hls-livestream__overlay {
    opacity: 0;
}

/*
 * Mobile geometry: taller 3:2 media card.
 */
@media (max-width: 767px) {

    .sm-hls-livestream__media {
        aspect-ratio: 3 / 2;
    }

    .sm-hls-livestream__overlay {
        padding: 65px 18px 25px 18px;

        background: linear-gradient(
            to bottom,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,.32) 42%,
            rgba(0,0,0,.90) 100%
        );
    }

    .sm-hls-livestream__status,
    .sm-hls-livestream__offline-status {
        font-size: 10px;
        line-height: 1.2;
        letter-spacing: 1.2px;
    }

    .sm-hls-livestream__title {
        font-size: 20px;
        line-height: 1.05;
    }

    .sm-hls-livestream__host {
        font-size: 12px;
        line-height: 1.25;
    }

    .sm-hls-livestream__offline-text {
        font-size: 17px;
        line-height: 1.15;
    }
}


/* ==========================================================
   SM HLS LIVESTREAM - DESKTOP VISUAL TUNING
   Desktop only. Mobile remains untouched.
   ========================================================== */

@media (min-width: 768px) {

    /*
     * Status label
     */
    .sm-hls-livestream__status,
    .sm-hls-livestream__offline-status {
        margin-bottom: 4px;

        font-family: "Bebas Neue", sans-serif;
        font-size: 15px;
        line-height: 1;
        font-weight: 400;
        letter-spacing: 1.4px;

        color: #FF2D7A;
        text-transform: uppercase;
    }

    /*
     * Main LIVE title
     */
    .sm-hls-livestream__title {
        font-family: "Bebas Neue", sans-serif;
        font-size: 38px;
        line-height: 1;
        font-weight: 400;
        letter-spacing: .3px;

        color: #ffffff;
    }

    /*
     * Host / supporting text
     */
    .sm-hls-livestream__host {
        margin-top: 4px;

        font-family: "Roboto Condensed", sans-serif;
        font-size: 16px;
        line-height: 1.2;
        font-weight: 500;

        color: #ffffff;
    }

    /*
     * Main OFFLINE message
     */
    .sm-hls-livestream__offline-text {
        font-family: "Roboto Condensed", sans-serif;
        font-size: 30px;
        line-height: 1.05;
        font-weight: 700;

        color: #ffffff;
    }

    /*
     * Keep desktop text in the same lower position
     * as the previous working player.
     */
    .sm-hls-livestream__overlay {
        padding: 80px 24px 30px;
    }
}



/* ==========================================================
   SM HLS LIVESTREAM - OFFLINE INTERACTION LOCK
   ========================================================== */

.sm-hls-livestream--offline .video-js {
    pointer-events: none;
}

.sm-hls-livestream--offline .vjs-big-play-button,
.sm-hls-livestream--offline .vjs-control-bar,
.sm-hls-livestream--offline .vjs-loading-spinner {
    display: none !important;
}



/* =========================================================
   SM Creator Carousel
   ========================================================= */

.sm-creator-carousel {
    --sm-creators-per-view: 4;
    --sm-creators-gap: 24px;
    position: relative;
    width: 100%;
}

.sm-creator-carousel__viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.sm-creator-carousel__viewport::-webkit-scrollbar {
    display: none;
}

.sm-creator-carousel__track {
    display: flex;
    gap: var(--sm-creators-gap);
    width: max-content;
}

.sm-creator-carousel__slide {
    flex: 0 0
        calc(
            (100vw - var(--sm-creators-gap) * (var(--sm-creators-per-view) - 1))
            / var(--sm-creators-per-view)
        );
    width: calc(
        (100vw - var(--sm-creators-gap) * (var(--sm-creators-per-view) - 1))
        / var(--sm-creators-per-view)
    );
    max-width: 420px;
    scroll-snap-align: start;
}

.elementor-widget-sm-creator-carousel .sm-creator-carousel__slide {
    flex-basis: calc(
        (100% - var(--sm-creators-gap) * (var(--sm-creators-per-view) - 1))
        / var(--sm-creators-per-view)
    );
    width: calc(
        (100% - var(--sm-creators-gap) * (var(--sm-creators-per-view) - 1))
        / var(--sm-creators-per-view)
    );
}

.sm-creator-carousel__card {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    border-radius: 14px;
    transform: translateZ(0);
}

.sm-creator-carousel__image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #111;
}

.sm-creator-carousel__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.4s ease;
}

.sm-creator-carousel__image--placeholder {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.02)
        ),
        #111;
}

.sm-creator-carousel__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.90) 0%,
            rgba(0, 0, 0, 0.55) 28%,
            rgba(0, 0, 0, 0.05) 60%,
            rgba(0, 0, 0, 0) 100%
        );
    pointer-events: none;
}

.sm-creator-carousel__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 20px;
    color: #fff;
}

.sm-creator-carousel__name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sm-creator-carousel__name {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: clamp(20px, 2vw, 30px);
    font-weight: 700;
    line-height: 1.05;
}

.sm-creator-carousel__verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ff5b1f;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.sm-creator-carousel__role {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.25;
    opacity: 0.86;
}

.sm-creator-carousel__tagline {
    margin-top: 7px;
    max-width: 95%;
    font-size: 13px;
    line-height: 1.3;
    opacity: 0.72;
}

.sm-creator-carousel__card:hover .sm-creator-carousel__image {
    transform: scale(1.035);
}


/* Navigation */

.sm-creator-carousel__nav {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 14px;
}

.sm-creator-carousel__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font: inherit;
    cursor: pointer;
    transition:
        opacity 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.sm-creator-carousel__arrow span {
    display: block;
    margin-top: -3px;
    font-size: 32px;
    font-weight: 300;
    line-height: 1;
}

.sm-creator-carousel__arrow:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.04);
}

.sm-creator-carousel__arrow:disabled {
    opacity: 0.25;
    cursor: default;
}

.sm-creator-carousel__empty {
    padding: 20px;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    border-radius: 8px;
}


/* Mobile */

@media (max-width: 767px) {
    .sm-creator-carousel__nav {
        display: none;
    }

    .sm-creator-carousel__content {
        padding: 15px;
    }

    .sm-creator-carousel__name {
        font-size: 20px;
    }
}



/* =========================================================
   SM Creator Carousel - geometry fix v1
   ========================================================= */

.sm-creator-carousel__viewport {
    width: 100%;
}

.sm-creator-carousel__track {
    display: flex;
    width: 100%;
    min-width: 100%;
    gap: var(--sm-creators-gap);
}

.sm-creator-carousel__slide {
    flex: 0 0 calc(
        (100% - (var(--sm-creators-gap) * (var(--sm-creators-per-view) - 1)))
        / var(--sm-creators-per-view)
    );

    width: calc(
        (100% - (var(--sm-creators-gap) * (var(--sm-creators-per-view) - 1)))
        / var(--sm-creators-per-view)
    );

    max-width: none;
}


/* =========================================================
   SM Creator Carousel - visual refinement v2
   ========================================================= */

/* Give overlay arrows room without creating a top navigation row */
.sm-creator-carousel {
    position: relative;
}

/* Navigation becomes an overlay spanning the carousel */
.sm-creator-carousel__nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    /*
     * Cards are square, so 50% of the carousel width is not useful here.
     * Position buttons independently below.
     */
    height: 100%;
    margin: 0;

    pointer-events: none;
    z-index: 10;
}

/* Shared arrow */
.sm-creator-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 46px;
    height: 46px;

    border: 1px solid rgba(255,255,255,0.30);
    background: rgba(10,0,8,0.78);
    backdrop-filter: blur(6px);

    pointer-events: auto;
    z-index: 11;
}

/* Half-overlap the outer edges */
.sm-creator-carousel__arrow--prev {
    left: -23px;
}

.sm-creator-carousel__arrow--next {
    right: -23px;
}

.sm-creator-carousel__arrow:hover:not(:disabled) {
    background: rgba(229, 0, 88, 0.90);
    transform: translateY(-50%) scale(1.06);
}


/* Portrait presentation */

.sm-creator-carousel__image-wrap {
    border-radius: 14px;
}

/* Let more of the actual portrait survive the overlay */
.sm-creator-carousel__overlay {
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,0.88) 0%,
            rgba(0,0,0,0.43) 25%,
            rgba(0,0,0,0.08) 48%,
            rgba(0,0,0,0) 68%
        );
}


/* Content slightly tighter */

.sm-creator-carousel__content {
    padding: 18px 20px;
}

.sm-creator-carousel__name {
    font-size: clamp(20px, 1.55vw, 27px);
    line-height: 1.02;
}

.sm-creator-carousel__role {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.2;
    opacity: 0.78;
}


/* Verified badge slightly smaller */

.sm-creator-carousel__verified {
    width: 18px;
    height: 18px;
    font-size: 11px;
}


/* Mobile remains swipe-first */
@media (max-width: 767px) {

    .sm-creator-carousel__nav {
        display: none;
    }

    .sm-creator-carousel__content {
        padding: 14px;
    }

    .sm-creator-carousel__name {
        font-size: 20px;
    }

    .sm-creator-carousel__role {
        font-size: 12px;
    }
}



/* =========================================================
   SM Creator Carousel - navigation position fix v3
   ========================================================= */

.sm-creator-carousel__nav {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    pointer-events: none;
    z-index: 20;
}

.sm-creator-carousel__arrow {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    pointer-events: auto;
}

.sm-creator-carousel__arrow--prev {
    left: -23px !important;
    right: auto !important;
}

.sm-creator-carousel__arrow--next {
    left: auto !important;
    right: -23px !important;
}

.sm-creator-carousel__arrow:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.06) !important;
}

@media (max-width: 767px) {
    .sm-creator-carousel__nav {
        display: none !important;
    }
}





/* ==========================================================
   SM HLS LIVESTREAM - OWNCAST EXPANDED VIEW
   ========================================================== */

.sm-hls-livestream__expand {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 20;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.72);
    color: #fff;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
}

.sm-hls-livestream__chat {
    display: none;
    min-width: 0;
    background: #111;
}

.sm-hls-livestream__chat iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 500px;
    border: 0;
}

body.sm-hls-expanded {
    overflow-x: hidden;
}

body.sm-hls-expanded .sm-hls-livestream.is-expanded {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(0, var(--sm-expanded-video-width, 72%))
        minmax(280px, calc(100% - var(--sm-expanded-video-width, 72%)));
    width: 100%;
}

body.sm-hls-expanded .sm-hls-livestream.is-expanded .sm-hls-livestream__media {
    grid-column: 1;
}

body.sm-hls-expanded .sm-hls-livestream.is-expanded .sm-hls-livestream__chat {
    display: block;
    grid-column: 2;
    grid-row: 1;
}

body.sm-hls-expanded .sm-hls-livestream.is-expanded .sm-hls-livestream__expand {
    right: calc(100% - var(--sm-expanded-video-width, 72%) + 14px);
}

@media (max-width: 767px) {

    body.sm-hls-expanded .sm-hls-livestream.is-expanded {
        display: block;
        width: 100%;
    }

    body.sm-hls-expanded .sm-hls-livestream.is-expanded .sm-hls-livestream__chat {
        display: block;
    }

    body.sm-hls-expanded .sm-hls-livestream.is-expanded .sm-hls-livestream__chat iframe {
        min-height: 520px;
    }

    body.sm-hls-expanded .sm-hls-livestream.is-expanded .sm-hls-livestream__expand {
        right: 14px;
    }
}


/* ==========================================================
   SM STREAM HERO - EXPANDED LAYOUT

   Elementor DOM:
   .sm-stream-hero
     > .e-con-inner
       > .sm-stream-hero-left
       > .sm-stream-hero-right
   ========================================================== */

@media (min-width: 768px) {

    /*
     * Elementor boxed containers put the real children
     * inside .e-con-inner. That inner wrapper is the row
     * that must wrap when expanded.
     */
    .sm-stream-hero.sm-stream-hero--expanded > .e-con-inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;

        width: 100% !important;
        max-width: none !important;
    }

    /*
     * First row:
     * HLS/video/chat gets the complete hero width.
     */
    .sm-stream-hero.sm-stream-hero--expanded
    > .e-con-inner
    > .sm-stream-hero-left {
        width: 100% !important;
        max-width: 100% !important;

        flex: 0 0 100% !important;
        flex-basis: 100% !important;

        order: 1 !important;
    }

    /*
     * Second row:
     * original hero-right content moves underneath.
     */
    .sm-stream-hero.sm-stream-hero--expanded
    > .e-con-inner
    > .sm-stream-hero-right {
        width: 100% !important;
        max-width: 100% !important;

        flex: 0 0 100% !important;
        flex-basis: 100% !important;

        order: 2 !important;
    }

    /*
     * Release width restrictions inside HERO Left so the
     * HLS widget can actually use the newly available width.
     */
    .sm-stream-hero--expanded .sm-stream-hero-left,
    .sm-stream-hero--expanded .sm-stream-hero-left > .e-con,
    .sm-stream-hero--expanded .sm-stream-hero-left > .elementor-element {
        width: 100% !important;
        max-width: none !important;
    }

    /*
     * Expanded HLS itself.
     * Existing widget variable determines video/chat split.
     */
    .sm-stream-hero--expanded
    .sm-hls-livestream.is-expanded {
        width: 100% !important;
        max-width: none !important;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .sm-stream-hero.sm-stream-hero--expanded > .e-con-inner {
        width: 100% !important;
        max-width: 100% !important;
    }

    .sm-stream-hero.sm-stream-hero--expanded
    > .e-con-inner
    > .sm-stream-hero-left,

    .sm-stream-hero.sm-stream-hero--expanded
    > .e-con-inner
    > .sm-stream-hero-right {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================
   SM HLS LIVESTREAM - EXPANDED GEOMETRY FINAL FIX
   Expand button must float above media, never create grid row.
   ========================================================== */

.sm-hls-livestream > .sm-hls-livestream__expand {
    position: absolute !important;

    top: 14px !important;
    right: 14px !important;
    bottom: auto !important;
    left: auto !important;

    z-index: 100 !important;

    width: 44px !important;
    height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;
}


/* Expanded widget = exactly ONE row */
body.sm-hls-expanded .sm-hls-livestream.is-expanded {
    grid-template-rows: auto !important;
    align-items: stretch !important;
}


/* Video and chat occupy the same row */
body.sm-hls-expanded
.sm-hls-livestream.is-expanded
.sm-hls-livestream__media {
    grid-column: 1 !important;
    grid-row: 1 !important;
}


body.sm-hls-expanded
.sm-hls-livestream.is-expanded
.sm-hls-livestream__chat {
    grid-column: 2 !important;
    grid-row: 1 !important;

    height: 100% !important;
    min-height: 0 !important;
}


body.sm-hls-expanded
.sm-hls-livestream.is-expanded
.sm-hls-livestream__chat iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
}


/* Close button sits over upper-right corner of whole widget */
body.sm-hls-expanded
.sm-hls-livestream.is-expanded
> .sm-hls-livestream__expand {
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
}


/* Mobile stays one-column */
@media (max-width: 767px) {

    body.sm-hls-expanded .sm-hls-livestream.is-expanded {
        display: block !important;
    }

    body.sm-hls-expanded
    .sm-hls-livestream.is-expanded
    > .sm-hls-livestream__expand {
        top: 12px !important;
        right: 12px !important;
    }
}


/* ==========================================================
   SM HLS LIVESTREAM - MOBILE EXPANDED GEOMETRY
   Video full width + chat immediately below.
   ========================================================== */

@media (max-width: 767px) {

    body.sm-hls-expanded .sm-hls-livestream.is-expanded {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        height: auto !important;

        grid-template-columns: none !important;
        grid-template-rows: none !important;
    }


    body.sm-hls-expanded
    .sm-hls-livestream.is-expanded
    .sm-hls-livestream__media {
        flex: 0 0 auto !important;

        width: 100% !important;
        height: auto !important;

        aspect-ratio: 16 / 9 !important;
    }


    body.sm-hls-expanded
    .sm-hls-livestream.is-expanded
    .sm-hls-livestream__chat {
        flex: 0 0 auto !important;

        display: block !important;

        width: 100% !important;
        height: 480px !important;
        min-height: 0 !important;
    }


    body.sm-hls-expanded
    .sm-hls-livestream.is-expanded
    .sm-hls-livestream__chat iframe {
        display: block !important;

        width: 100% !important;
        height: 480px !important;
        min-height: 0 !important;

        border: 0 !important;
    }


    body.sm-hls-expanded
    .sm-hls-livestream.is-expanded
    > .sm-hls-livestream__expand {
        position: absolute !important;

        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        bottom: auto !important;

        z-index: 100 !important;
    }
}



/* ==========================================================
   SM HLS — MOBILE LANDSCAPE CINEMA MODE
   Only while livestream is expanded.
   ========================================================== */

@media
    (max-width: 999px)
    and (orientation: landscape)
    and (max-height: 600px) {

    /* WordPress admin toolbar — development/login only */
    body.sm-hls-expanded #wpadminbar {
        display: none !important;
    }

    html {
        margin-top: 0 !important;
    }

    /*
     * Hide normal website header/navigation while watching
     * expanded stream in landscape.
     */
    body.sm-hls-expanded header {
        display: none !important;
    }

    /*
     * Remove unnecessary hero spacing.
     */
    body.sm-hls-expanded .sm-stream-hero,
    body.sm-hls-expanded .sm-stream-hero > .e-con-inner,
    body.sm-hls-expanded .sm-stream-hero-left {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /*
     * Stream begins directly at top of usable browser viewport.
     */
    body.sm-hls-expanded .sm-hls-livestream.is-expanded {
        margin-top: 0 !important;
    }

    /*
     * Landscape: don't force the portrait 480px chat height.
     * Let video + chat use available viewport more efficiently.
     */
    body.sm-hls-expanded
    .sm-hls-livestream.is-expanded
    .sm-hls-livestream__chat,

    body.sm-hls-expanded
    .sm-hls-livestream.is-expanded
    .sm-hls-livestream__chat iframe {
        height: min(62vh, 420px) !important;
    }
}


/* ==========================================================
   SM HLS — MOBILE LANDSCAPE EXPANDED MODE
   NO Fullscreen API / NO PiP
   ========================================================== */

@media
    (max-width: 999px)
    and (orientation: landscape)
    and (max-height: 650px) {

    /*
     * Logged-in development toolbar wastes critical height.
     */
    body.sm-hls-expanded #wpadminbar {
        display: none !important;
    }

    html {
        margin-top: 0 !important;
    }

    /*
     * Hide website navigation while expanded in landscape.
     */
    body.sm-hls-expanded header,
    body.sm-hls-expanded .elementor-location-header {
        display: none !important;
    }

    /*
     * Remove hero spacing.
     */
    body.sm-hls-expanded .sm-stream-hero,
    body.sm-hls-expanded .sm-stream-hero > .e-con-inner,
    body.sm-hls-expanded .sm-stream-hero-left {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /*
     * Expanded widget becomes landscape VIDEO | CHAT.
     */
    body.sm-hls-expanded .sm-hls-livestream.is-expanded {
        display: grid !important;

        grid-template-columns:
            minmax(0, 68%)
            minmax(280px, 32%) !important;

        grid-template-rows:
            min(100dvh, 650px) !important;

        width: 100% !important;
        height: min(100dvh, 650px) !important;

        overflow: hidden !important;
    }

    body.sm-hls-expanded
    .sm-hls-livestream.is-expanded
    .sm-hls-livestream__media {
        grid-column: 1 !important;
        grid-row: 1 !important;

        width: 100% !important;
        height: 100% !important;

        aspect-ratio: auto !important;
    }

    body.sm-hls-expanded
    .sm-hls-livestream.is-expanded
    .sm-hls-livestream__chat {
        grid-column: 2 !important;
        grid-row: 1 !important;

        width: 100% !important;
        height: 100% !important;

        min-height: 0 !important;
    }

    body.sm-hls-expanded
    .sm-hls-livestream.is-expanded
    .sm-hls-livestream__chat iframe {
        width: 100% !important;
        height: 100% !important;

        min-height: 0 !important;
    }

    body.sm-hls-expanded
    .sm-hls-livestream.is-expanded
    > .sm-hls-livestream__expand {
        top: 10px !important;
        right: 10px !important;
        left: auto !important;
        bottom: auto !important;
    }
}



/* ==========================================================
   SM HLS — CHAT TOGGLE / PORTRAIT DEFAULT COLLAPSED
   ========================================================== */


/*
 * Expanded desktop button:
 * replace round close icon with readable CHAT control.
 */
@media (min-width: 768px) {

    body.sm-hls-expanded
    .sm-hls-livestream.is-expanded
    > .sm-hls-livestream__expand {

        width: auto !important;
        min-width: 74px !important;
        height: 40px !important;

        padding: 0 16px !important;

        border-radius: 20px !important;

        color: #ffd21c !important;

        font-size: 14px !important;
        font-weight: 800 !important;
        letter-spacing: .06em !important;
    }
}


/*
 * Portrait mobile:
 * chat starts collapsed after opening expanded mode.
 */
@media
    (max-width: 767px)
    and (orientation: portrait) {

    body.sm-hls-expanded
    .sm-hls-livestream.is-expanded.sm-chat-collapsed
    .sm-hls-livestream__chat {

        display: none !important;
    }


    /*
     * CHAT button while expanded.
     */
    body.sm-hls-expanded
    .sm-hls-livestream.is-expanded
    > .sm-hls-livestream__expand {

        width: auto !important;
        min-width: 70px !important;
        height: 38px !important;

        padding: 0 14px !important;

        border-radius: 19px !important;

        color: #ffd21c !important;

        font-size: 13px !important;
        font-weight: 800 !important;
        letter-spacing: .05em !important;
    }
}



/* ==========================================================
   SM HLS — VIDEO.JS CHAT CONTROL
   ========================================================== */

/*
 * Original round expand button:
 * visible only before expanded mode.
 */
body.sm-hls-expanded
.sm-hls-livestream.is-expanded
> .sm-hls-livestream__expand {
    display: none !important;
}


/*
 * CHAT control lives inside Video.js bottom control bar.
 */
.sm-hls-livestream__video-chat {
    display: none !important;

    width: auto !important;
    min-width: 66px !important;

    padding: 0 12px !important;

    cursor: pointer !important;
}


.sm-hls-livestream__video-chat.is-visible {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;
}


.sm-hls-livestream__video-chat-label {
    color: #ffd21c !important;
}


/*
 * Active chat state can remain visually obvious
 * during development.
 */
.sm-hls-livestream__video-chat.is-active {
    background: rgba(230, 20, 80, .90) !important;
}


/*
 * Hide chat whenever CHAT control sets collapsed state.
 */
body.sm-hls-expanded
.sm-hls-livestream.is-expanded.sm-chat-collapsed
.sm-hls-livestream__chat {
    display: none !important;
}


/*
 * DESKTOP:
 * when chat is collapsed, video takes the complete width.
 */
@media (min-width: 1000px) {

    body.sm-hls-expanded
    .sm-hls-livestream.is-expanded.sm-chat-collapsed {
        grid-template-columns: minmax(0, 100%) !important;
    }

    body.sm-hls-expanded
    .sm-hls-livestream.is-expanded.sm-chat-collapsed
    .sm-hls-livestream__media {
        grid-column: 1 !important;
        width: 100% !important;
    }
}


/*
 * LANDSCAPE:
 * CHAT remains visible by default.
 * If manually collapsed, video fills the row.
 */
@media
    (max-width: 999px)
    and (orientation: landscape)
    and (max-height: 650px) {

    body.sm-hls-expanded
    .sm-hls-livestream.is-expanded.sm-chat-collapsed {
        grid-template-columns: minmax(0, 100%) !important;
    }
}



/* ==========================================================
   SM HLS — FINAL EXPAND / CHAT / MINIMIZE UI
   ========================================================== */


/* ----------------------------------------------------------
   NORMAL TOP-RIGHT EXPAND BUTTON
   ---------------------------------------------------------- */

.sm-hls-livestream__expand {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sm-hls-livestream__expand .sm-hls-expand-icon {
    display: flex;
    width: 21px;
    height: 21px;
}

.sm-hls-livestream__expand .sm-hls-expand-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.sm-hls-livestream__expand .sm-hls-expand-icon path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/*
 * Expanded mode owns its controls through Video.js.
 */
body.sm-hls-expanded
.sm-hls-livestream.is-expanded
> .sm-hls-livestream__expand {
    display: none !important;
}


/* ----------------------------------------------------------
   VIDEO.JS CHAT CONTROL
   ---------------------------------------------------------- */

.sm-hls-livestream__video-chat {
    display: none !important;

    width: auto !important;
    min-width: 66px !important;

    padding: 0 12px !important;

    cursor: pointer !important;
}

.sm-hls-livestream__video-chat.is-visible {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sm-hls-livestream__video-chat-label {
    color: #ffd21c !important;
}

.sm-hls-livestream__video-chat.is-active {
    background: rgba(230, 20, 80, .90) !important;
}


/* ----------------------------------------------------------
   VIDEO.JS MINIMIZE / RETURN CONTROL
   ---------------------------------------------------------- */

.sm-hls-livestream__video-minimize {
    display: none !important;

    width: 44px !important;
    min-width: 44px !important;

    padding: 0 !important;

    cursor: pointer !important;
}

.sm-hls-livestream__video-minimize.is-visible {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sm-hls-livestream__video-minimize-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 19px;
    height: 19px;
}

.sm-hls-livestream__video-minimize-icon svg {
    display: block;

    width: 100%;
    height: 100%;
}

.sm-hls-livestream__video-minimize-icon path {
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ----------------------------------------------------------
   CHAT STATE
   ---------------------------------------------------------- */

body.sm-hls-expanded
.sm-hls-livestream.is-expanded.sm-chat-collapsed
.sm-hls-livestream__chat {
    display: none !important;
}


/*
 * Desktop: chat hidden => video gets full expanded width.
 */
@media (min-width: 1000px) {

    body.sm-hls-expanded
    .sm-hls-livestream.is-expanded.sm-chat-collapsed {
        grid-template-columns:
            minmax(0, 100%) !important;
    }

    body.sm-hls-expanded
    .sm-hls-livestream.is-expanded.sm-chat-collapsed
    .sm-hls-livestream__media {
        grid-column: 1 !important;
        width: 100% !important;
    }
}


/*
 * Landscape: chat hidden => video gets full width.
 */
@media
    (max-width: 999px)
    and (orientation: landscape)
    and (max-height: 650px) {

    body.sm-hls-expanded
    .sm-hls-livestream.is-expanded.sm-chat-collapsed {
        grid-template-columns:
            minmax(0, 100%) !important;
    }
}


/*
 * IMPORTANT FINAL UX:
 *
 * No portrait-specific default collapse here.
 * JS opens chat whenever expanded mode is entered.
 */



/* ==========================================================
   SM HLS — FINAL VIDEO.JS CONTROL GEOMETRY
   ========================================================== */

/*
 * Native Video.js controls and our icon controls must not
 * get stretched/squeezed into ovals by flex sizing.
 */
.sm-hls-livestream
.video-js
.vjs-control-bar
> .vjs-control {
    flex: 0 0 auto !important;
}


/*
 * PiP
 */
.sm-hls-livestream
.video-js
.vjs-picture-in-picture-control {
    width: 44px !important;
    min-width: 44px !important;
    height: 40px !important;

    padding: 0 !important;
    border-radius: 20px !important;

    flex: 0 0 44px !important;
}


/*
 * CHAT remains intentionally wider because it contains text.
 */
.sm-hls-livestream
.video-js
.sm-hls-livestream__video-chat {
    width: 74px !important;
    min-width: 74px !important;
    height: 40px !important;

    padding: 0 12px !important;

    border-radius: 20px !important;

    flex: 0 0 74px !important;
}


/*
 * MINIMIZE
 */
.sm-hls-livestream
.video-js
.sm-hls-livestream__video-minimize {
    width: 44px !important;
    min-width: 44px !important;
    height: 40px !important;

    padding: 0 !important;

    border-radius: 20px !important;

    flex: 0 0 44px !important;
}


/*
 * FULLSCREEN
 */
.sm-hls-livestream
.video-js
.vjs-fullscreen-control {
    width: 44px !important;
    min-width: 44px !important;
    height: 40px !important;

    padding: 0 !important;

    border-radius: 20px !important;

    flex: 0 0 44px !important;
}


/*
 * Keep custom SVG perfectly centered.
 */
.sm-hls-livestream__video-minimize-icon {
    width: 18px !important;
    height: 18px !important;

    margin: auto !important;
}


/*
 * Normal top-right EXPAND button must remain truly round.
 */
.sm-hls-livestream
> .sm-hls-livestream__expand {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;

    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;

    padding: 0 !important;

    border-radius: 50% !important;

    aspect-ratio: 1 / 1 !important;

    align-items: center !important;
    justify-content: center !important;
}


/*
 * Keep expand SVG centered and proportional.
 */
.sm-hls-livestream
> .sm-hls-livestream__expand
.sm-hls-expand-icon {
    width: 20px !important;
    height: 20px !important;

    margin: 0 !important;
}



/* ==========================================================
   SM HLS — FINAL CONTROL BAR CORRECTION
   ========================================================== */

/*
 * IMPORTANT:
 * Undo our previous generic flex override.
 *
 * Video.js needs its native control/spacer flex behavior to
 * keep PiP / custom controls / fullscreen on the RIGHT.
 */
.sm-hls-livestream
.video-js
.vjs-control-bar
> .vjs-control {
    flex: initial !important;
}


/*
 * Restore Video.js spacer behavior explicitly.
 */
.sm-hls-livestream
.video-js
.vjs-control-bar
.vjs-custom-control-spacer {
    display: block !important;
    flex: 1 1 auto !important;
}


/*
 * Native PiP icon button.
 * Fixed circular control without changing bar distribution.
 */
.sm-hls-livestream
.video-js
.vjs-picture-in-picture-control {
    flex: 0 0 40px !important;

    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;

    height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 50% !important;
}


/*
 * CHAT is intentionally the only pill-shaped control.
 */
.sm-hls-livestream
.video-js
.sm-hls-livestream__video-chat {
    flex: 0 0 72px !important;

    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;

    height: 40px !important;

    margin: 0 !important;
    padding: 0 10px !important;

    border-radius: 20px !important;
}


/*
 * MINIMIZE icon.
 */
.sm-hls-livestream
.video-js
.sm-hls-livestream__video-minimize {
    flex: 0 0 40px !important;

    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;

    height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 50% !important;
}


/*
 * Native fullscreen icon.
 */
.sm-hls-livestream
.video-js
.vjs-fullscreen-control {
    flex: 0 0 40px !important;

    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;

    height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 50% !important;
}


/*
 * Keep the three icon controls visually circular.
 */
.sm-hls-livestream
.video-js
.vjs-picture-in-picture-control::before,

.sm-hls-livestream
.video-js
.sm-hls-livestream__video-minimize::before,

.sm-hls-livestream
.video-js
.vjs-fullscreen-control::before {
    border-radius: 50% !important;
}



/* ==========================================================
   SM HLS — VIDEO.JS BOTTOM EXPAND CONTROL
   ========================================================== */

.sm-hls-livestream
.video-js
.sm-hls-livestream__video-expand {
    display: none !important;

    flex: 0 0 40px !important;

    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;

    height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 50% !important;

    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;
}


/*
 * Visible ONLY in normal/minimized mode.
 */
.sm-hls-livestream
.video-js
.sm-hls-livestream__video-expand.is-visible {
    display: flex !important;
}


/*
 * Safety: never show bottom EXPAND while expanded.
 */
.sm-hls-livestream.is-expanded
.video-js
.sm-hls-livestream__video-expand {
    display: none !important;
}


.sm-hls-livestream__video-expand-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    margin: auto;
}


.sm-hls-livestream__video-expand-icon svg {
    display: block;

    width: 100%;
    height: 100%;
}


.sm-hls-livestream__video-expand-icon path {
    fill: none;

    stroke: #ffffff;
    stroke-width: 2.2;

    stroke-linecap: round;
    stroke-linejoin: round;
}



/* ==========================================================================
   SM HLS PLAYER CONTROLS — CANONICAL UI
   Elementor-configurable / responsive
   ========================================================================== */

.sm-hls-livestream {
    --sm-hls-current-control-size: var(--sm-hls-control-size, 40px);
    --sm-hls-current-control-gap: var(--sm-hls-control-gap, 3px);
    --sm-hls-current-chat-width: var(--sm-hls-chat-width, 72px);
    --sm-hls-current-icon-size: var(--sm-hls-icon-size, 18px);
}


/* --------------------------------------------------------------------------
   CONTROL BAR
   -------------------------------------------------------------------------- */

.sm-hls-livestream .video-js .vjs-control-bar {
    align-items: center !important;

    min-height: var(--sm-hls-current-control-size) !important;
    height: var(--sm-hls-current-control-size) !important;

    padding: 0 !important;
}


/*
 * Preserve Video.js spacer.
 * This is what keeps the right control group on the RIGHT.
 */
.sm-hls-livestream
.video-js
.vjs-control-bar
.vjs-custom-control-spacer {
    display: block !important;
    flex: 1 1 auto !important;
}


/* --------------------------------------------------------------------------
   COMMON ICON BUTTON GEOMETRY
   PiP / Minimize / Expand / Fullscreen
   -------------------------------------------------------------------------- */

.sm-hls-livestream .video-js .vjs-picture-in-picture-control,
.sm-hls-livestream .video-js .sm-hls-livestream__video-minimize,
.sm-hls-livestream .video-js .sm-hls-livestream__video-expand,
.sm-hls-livestream .video-js .vjs-fullscreen-control {
    flex: 0 0 var(--sm-hls-current-control-size) !important;

    width: var(--sm-hls-current-control-size) !important;
    min-width: var(--sm-hls-current-control-size) !important;
    max-width: var(--sm-hls-current-control-size) !important;

    height: var(--sm-hls-current-control-size) !important;
    min-height: var(--sm-hls-current-control-size) !important;
    max-height: var(--sm-hls-current-control-size) !important;

    margin-left: var(--sm-hls-current-control-gap) !important;
    margin-right: 0 !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: var(--sm-hls-control-bg, #e6174f) !important;
    color: var(--sm-hls-control-fg, #fff) !important;

    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
}


/* --------------------------------------------------------------------------
   NATIVE VIDEO.JS ICONS
   -------------------------------------------------------------------------- */

.sm-hls-livestream
.video-js
.vjs-picture-in-picture-control
.vjs-icon-placeholder::before,

.sm-hls-livestream
.video-js
.vjs-fullscreen-control
.vjs-icon-placeholder::before {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    line-height: 1 !important;

    color: var(--sm-hls-control-fg, #fff) !important;
}


/* --------------------------------------------------------------------------
   CUSTOM SVG ICONS
   -------------------------------------------------------------------------- */

.sm-hls-livestream__video-minimize-icon,
.sm-hls-livestream__video-expand-icon {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: var(--sm-hls-current-icon-size) !important;
    height: var(--sm-hls-current-icon-size) !important;

    margin: auto !important;
}

.sm-hls-livestream__video-minimize-icon svg,
.sm-hls-livestream__video-expand-icon svg {
    display: block !important;

    width: 100% !important;
    height: 100% !important;
}

.sm-hls-livestream__video-minimize-icon path,
.sm-hls-livestream__video-expand-icon path {
    fill: none !important;

    stroke: var(--sm-hls-control-fg, #fff) !important;
    stroke-width: 2.2 !important;

    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}


/* --------------------------------------------------------------------------
   CHAT BUTTON — ONLY PILL
   -------------------------------------------------------------------------- */

.sm-hls-livestream
.video-js
.sm-hls-livestream__video-chat {
    flex: 0 0 var(--sm-hls-current-chat-width) !important;

    width: var(--sm-hls-current-chat-width) !important;
    min-width: var(--sm-hls-current-chat-width) !important;
    max-width: var(--sm-hls-current-chat-width) !important;

    height: var(--sm-hls-current-control-size) !important;
    min-height: var(--sm-hls-current-control-size) !important;
    max-height: var(--sm-hls-current-control-size) !important;

    margin-left: var(--sm-hls-current-control-gap) !important;
    margin-right: 0 !important;

    padding: 0 8px !important;

    border: 0 !important;
    border-radius: calc(var(--sm-hls-current-control-size) / 2) !important;

    background: var(--sm-hls-control-bg, #e6174f) !important;

    box-sizing: border-box !important;

    align-items: center !important;
    justify-content: center !important;
}

.sm-hls-livestream__video-chat-label {
    color: var(--sm-hls-chat-fg, #ffd21c) !important;

    white-space: nowrap !important;
}


/* --------------------------------------------------------------------------
   LEFT SIDE — PLAY / MUTE
   Keep them geometrically consistent without destroying Video.js behavior.
   -------------------------------------------------------------------------- */

.sm-hls-livestream
.video-js
.vjs-play-control,

.sm-hls-livestream
.video-js
.vjs-mute-control {
    flex: 0 0 var(--sm-hls-current-control-size) !important;

    width: var(--sm-hls-current-control-size) !important;
    min-width: var(--sm-hls-current-control-size) !important;

    height: var(--sm-hls-current-control-size) !important;

    padding: 0 !important;

    border-radius: 50% !important;

    background: var(--sm-hls-control-bg, #e6174f) !important;
    color: var(--sm-hls-control-fg, #fff) !important;
}


/* --------------------------------------------------------------------------
   VOLUME — FIX OVERLAP WITH LIVE LABEL
   -------------------------------------------------------------------------- */

/*
 * Do not allow the Video.js volume panel to permanently consume horizontal
 * space in our compact live control bar.
 */
.sm-hls-livestream
.video-js
.vjs-volume-panel {
    flex: 0 0 var(--sm-hls-current-control-size) !important;

    width: var(--sm-hls-current-control-size) !important;
    min-width: var(--sm-hls-current-control-size) !important;
    max-width: var(--sm-hls-current-control-size) !important;

    height: var(--sm-hls-current-control-size) !important;

    margin: 0 !important;

    overflow: visible !important;
}


/*
 * Volume slider becomes an overlay/popout instead of pushing LIVE sideways.
 */
.sm-hls-livestream
.video-js
.vjs-volume-panel
.vjs-volume-control {
    position: absolute !important;

    left: var(--sm-hls-current-control-size) !important;
    bottom: 0 !important;

    height: var(--sm-hls-current-control-size) !important;

    margin: 0 !important;

    z-index: 20 !important;

    background: rgba(20, 10, 25, .90) !important;

    border-radius:
        0
        calc(var(--sm-hls-current-control-size) / 2)
        calc(var(--sm-hls-current-control-size) / 2)
        0 !important;
}


/*
 * Closed volume state occupies no additional horizontal width.
 */
.sm-hls-livestream
.video-js
.vjs-volume-panel:not(.vjs-hover)
.vjs-volume-control {
    visibility: hidden !important;
    opacity: 0 !important;
}


/*
 * Hover/focus reveals the slider.
 */
.sm-hls-livestream
.video-js
.vjs-volume-panel.vjs-hover
.vjs-volume-control,

.sm-hls-livestream
.video-js
.vjs-volume-panel:focus-within
.vjs-volume-control {
    visibility: visible !important;
    opacity: 1 !important;
}


/* --------------------------------------------------------------------------
   NORMAL TOP-RIGHT EXPAND BUTTON
   Uses same widget colors.
   -------------------------------------------------------------------------- */

.sm-hls-livestream
> .sm-hls-livestream__expand {
    background: var(--sm-hls-control-bg, #e6174f) !important;
    color: var(--sm-hls-control-fg, #fff) !important;
}


/* --------------------------------------------------------------------------
   TABLET
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

    .sm-hls-livestream {
        --sm-hls-current-control-size:
            var(--sm-hls-control-size-tablet, 38px);

        --sm-hls-current-control-gap:
            var(--sm-hls-control-gap-tablet, 3px);

        --sm-hls-current-chat-width:
            var(--sm-hls-chat-width-tablet, 68px);

        --sm-hls-current-icon-size:
            var(--sm-hls-icon-size-tablet, 17px);
    }
}


/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    .sm-hls-livestream {
        --sm-hls-current-control-size:
            var(--sm-hls-control-size-mobile, 34px);

        --sm-hls-current-control-gap:
            var(--sm-hls-control-gap-mobile, 2px);

        --sm-hls-current-chat-width:
            var(--sm-hls-chat-width-mobile, 62px);

        --sm-hls-current-icon-size:
            var(--sm-hls-icon-size-mobile, 16px);
    }

    /*
     * No horizontal volume slider on touch/mobile.
     * Mute remains directly usable.
     */
    .sm-hls-livestream
    .video-js
    .vjs-volume-panel
    .vjs-volume-control {
        display: none !important;
    }
}



/* ==========================================================================
   SM HLS PLAYER CONTROLS — FINAL AUTHORITY
   Elementor values control ALL native + custom controls.
   ========================================================================== */


/* --------------------------------------------------------------------------
   BUTTON GEOMETRY
   -------------------------------------------------------------------------- */

.sm-hls-livestream .video-js .vjs-play-control,
.sm-hls-livestream .video-js .vjs-mute-control,
.sm-hls-livestream .video-js .vjs-picture-in-picture-control,
.sm-hls-livestream .video-js .vjs-fullscreen-control,
.sm-hls-livestream .video-js .sm-hls-livestream__video-expand,
.sm-hls-livestream .video-js .sm-hls-livestream__video-minimize {

    flex: 0 0 var(--sm-hls-current-control-size, 40px) !important;

    width: var(--sm-hls-current-control-size, 40px) !important;
    min-width: var(--sm-hls-current-control-size, 40px) !important;
    max-width: var(--sm-hls-current-control-size, 40px) !important;

    height: var(--sm-hls-current-control-size, 40px) !important;
    min-height: var(--sm-hls-current-control-size, 40px) !important;
    max-height: var(--sm-hls-current-control-size, 40px) !important;

    padding: 0 !important;

    border-radius: 50% !important;

    display: flex;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
}


/* --------------------------------------------------------------------------
   VIDEO.JS FONT ICONS
   THIS is what was missing.
   -------------------------------------------------------------------------- */

.sm-hls-livestream .video-js .vjs-play-control .vjs-icon-placeholder::before,
.sm-hls-livestream .video-js .vjs-mute-control .vjs-icon-placeholder::before,
.sm-hls-livestream .video-js .vjs-picture-in-picture-control .vjs-icon-placeholder::before,
.sm-hls-livestream .video-js .vjs-fullscreen-control .vjs-icon-placeholder::before {

    font-size: var(--sm-hls-current-icon-size, 18px) !important;

    line-height: var(--sm-hls-current-control-size, 40px) !important;

    width: 100% !important;
    height: 100% !important;

    top: 0 !important;
    left: 0 !important;

    display: block !important;

    text-align: center !important;

    color: var(--sm-hls-control-fg, #fff) !important;
}


/* Video.js sometimes sizes the button itself by em. Kill that inheritance. */
.sm-hls-livestream .video-js .vjs-button {
    font-size: inherit !important;
}


/* --------------------------------------------------------------------------
   CUSTOM SVG ICONS
   -------------------------------------------------------------------------- */

.sm-hls-livestream .sm-hls-livestream__video-expand-icon,
.sm-hls-livestream .sm-hls-livestream__video-minimize-icon {

    width: var(--sm-hls-current-icon-size, 18px) !important;
    height: var(--sm-hls-current-icon-size, 18px) !important;

    flex: 0 0 var(--sm-hls-current-icon-size, 18px) !important;

    margin: auto !important;
}


/* --------------------------------------------------------------------------
   CHAT
   -------------------------------------------------------------------------- */

.sm-hls-livestream .video-js .sm-hls-livestream__video-chat {

    flex: 0 0 var(--sm-hls-current-chat-width, 72px) !important;

    width: var(--sm-hls-current-chat-width, 72px) !important;
    min-width: var(--sm-hls-current-chat-width, 72px) !important;
    max-width: var(--sm-hls-current-chat-width, 72px) !important;

    height: var(--sm-hls-current-control-size, 40px) !important;
    min-height: var(--sm-hls-current-control-size, 40px) !important;
    max-height: var(--sm-hls-current-control-size, 40px) !important;

    border-radius: calc(var(--sm-hls-current-control-size, 40px) / 2) !important;
}


/* --------------------------------------------------------------------------
   CONTROL BAR
   -------------------------------------------------------------------------- */

.sm-hls-livestream .video-js .vjs-control-bar {

    height: var(--sm-hls-current-control-size, 40px) !important;
    min-height: var(--sm-hls-current-control-size, 40px) !important;

    align-items: center !important;
}


/* --------------------------------------------------------------------------
   GAPS
   -------------------------------------------------------------------------- */

.sm-hls-livestream .video-js .vjs-picture-in-picture-control,
.sm-hls-livestream .video-js .vjs-fullscreen-control,
.sm-hls-livestream .video-js .sm-hls-livestream__video-expand,
.sm-hls-livestream .video-js .sm-hls-livestream__video-minimize,
.sm-hls-livestream .video-js .sm-hls-livestream__video-chat {

    margin-left: var(--sm-hls-current-control-gap, 3px) !important;
}


/* --------------------------------------------------------------------------
   TOP-RIGHT EXPAND
   Match the configured geometry too.
   -------------------------------------------------------------------------- */

.sm-hls-livestream > .sm-hls-livestream__expand {

    width: var(--sm-hls-current-control-size, 40px) !important;
    height: var(--sm-hls-current-control-size, 40px) !important;

    min-width: var(--sm-hls-current-control-size, 40px) !important;
    min-height: var(--sm-hls-current-control-size, 40px) !important;

    border-radius: 50% !important;
}

.sm-hls-livestream > .sm-hls-livestream__expand .sm-hls-expand-icon {

    width: var(--sm-hls-current-icon-size, 18px) !important;
    height: var(--sm-hls-current-icon-size, 18px) !important;
}


/* --------------------------------------------------------------------------
   AUT0HIDE OFF
   JS adds this class when Elementor Auto-hide = NO.
   -------------------------------------------------------------------------- */

.sm-hls-livestream.sm-hls-controls-always-visible
.video-js
.vjs-control-bar {

    display: flex !important;

    visibility: visible !important;
    opacity: 1 !important;

    transform: none !important;

    pointer-events: auto !important;
}


/* ==========================================================================
   SM HLS — PLAYER CONTROLS FINAL
   Single final override layer.
   ========================================================================== */


/* ==========================================================================
   CHAT
   Typography is controlled by Elementor Group_Control_Typography.
   Do NOT couple CHAT font size to Icon Size.
   ========================================================================== */

.sm-hls-livestream
.sm-hls-livestream__video-chat-label {

    color: var(--sm-hls-chat-fg, #ffd21c) !important;

    white-space: nowrap !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* ==========================================================================
   AUTOHIDE OFF
   Video.js receives inactivityTimeout: 0.
   This CSS guarantees our custom theme cannot hide the bar.
   ========================================================================== */

.sm-hls-livestream.sm-hls-controls-always-visible
.video-js .vjs-control-bar,

.sm-hls-livestream.sm-hls-controls-always-visible
.video-js.vjs-user-active .vjs-control-bar,

.sm-hls-livestream.sm-hls-controls-always-visible
.video-js.vjs-user-inactive .vjs-control-bar {

    display: flex !important;

    visibility: visible !important;
    opacity: 1 !important;

    transform: none !important;

    pointer-events: auto !important;
}


/* ==========================================================================
   VOLUME PANEL
   Fixed-width slot in control bar.
   Slider is an overlay and NEVER pushes LIVE.
   ========================================================================== */

.sm-hls-livestream
.video-js
.vjs-volume-panel {

    position: relative !important;

    flex:
        0 0
        var(--sm-hls-current-control-size, 40px) !important;

    width:
        var(--sm-hls-current-control-size, 40px) !important;

    min-width:
        var(--sm-hls-current-control-size, 40px) !important;

    max-width:
        var(--sm-hls-current-control-size, 40px) !important;

    height:
        var(--sm-hls-current-control-size, 40px) !important;

    margin: 0 !important;

    overflow: visible !important;
}


/* Never let Video.js hover expansion change panel width. */

.sm-hls-livestream
.video-js
.vjs-volume-panel.vjs-hover,

.sm-hls-livestream
.video-js
.vjs-volume-panel:active,

.sm-hls-livestream
.video-js
.vjs-volume-panel:focus {

    width:
        var(--sm-hls-current-control-size, 40px) !important;

    min-width:
        var(--sm-hls-current-control-size, 40px) !important;

    max-width:
        var(--sm-hls-current-control-size, 40px) !important;
}


/* ==========================================================================
   MUTE BUTTON
   ========================================================================== */

.sm-hls-livestream
.video-js
.vjs-volume-panel
.vjs-mute-control {

    position: absolute !important;

    left: 0 !important;
    bottom: 0 !important;

    width:
        var(--sm-hls-current-control-size, 40px) !important;

    height:
        var(--sm-hls-current-control-size, 40px) !important;

    min-width:
        var(--sm-hls-current-control-size, 40px) !important;

    max-width:
        var(--sm-hls-current-control-size, 40px) !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 50 !important;
}


/* ==========================================================================
   VERTICAL VOLUME POPUP
   ========================================================================== */

.sm-hls-livestream
.video-js
.vjs-volume-panel
.vjs-volume-control {

    display: block !important;

    position: absolute !important;

    left: 50% !important;

    bottom:
        calc(var(--sm-hls-current-control-size, 40px) + 8px) !important;

    transform: translateX(-50%) !important;

    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;

    height: 118px !important;

    margin: 0 !important;
    padding: 12px 0 !important;

    box-sizing: border-box !important;

    border-radius: 17px !important;

    background: rgba(18, 10, 24, .96) !important;

    z-index: 49 !important;

    visibility: hidden !important;
    opacity: 0 !important;

    pointer-events: none !important;

    transition:
        opacity .12s ease,
        visibility .12s ease !important;
}


/* Show popup. */

.sm-hls-livestream
.video-js
.vjs-volume-panel:hover
.vjs-volume-control,

.sm-hls-livestream
.video-js
.vjs-volume-panel.vjs-hover
.vjs-volume-control,

.sm-hls-livestream
.video-js
.vjs-volume-panel:focus-within
.vjs-volume-control {

    visibility: visible !important;
    opacity: 1 !important;

    pointer-events: auto !important;
}


/* ==========================================================================
   VOLUME TRACK
   ========================================================================== */

.sm-hls-livestream
.video-js
.vjs-volume-control
.vjs-volume-bar {

    position: absolute !important;

    left: 50% !important;
    top: 12px !important;

    transform: translateX(-50%) !important;

    width: 4px !important;
    height: 94px !important;

    margin: 0 !important;

    background: rgba(255,255,255,.28) !important;

    border-radius: 4px !important;
}


/* Current volume fill. */

.sm-hls-livestream
.video-js
.vjs-volume-control
.vjs-volume-level {

    position: absolute !important;

    left: 0 !important;
    bottom: 0 !important;

    width: 4px !important;

    background:
        var(--sm-hls-control-fg, #fff) !important;

    border-radius: 4px !important;
}


/* ==========================================================================
   VOLUME HANDLE
   ========================================================================== */

.sm-hls-livestream
.video-js
.vjs-volume-control
.vjs-volume-level::before {

    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    top: 0 !important;

    transform: translate(-50%, -50%) !important;

    width: 11px !important;
    height: 11px !important;

    border-radius: 50% !important;

    background:
        var(--sm-hls-control-fg, #fff) !important;
}


/* ==========================================================================
   REMOVE VIDEO.JS VOLUME TEXT / TOOLTIPS
   No "60%" floating above slider.
   ========================================================================== */

.sm-hls-livestream
.video-js
.vjs-volume-tooltip,

.sm-hls-livestream
.video-js
.vjs-volume-control
.vjs-mouse-display,

.sm-hls-livestream
.video-js
.vjs-volume-control
.vjs-mouse-display::before,

.sm-hls-livestream
.video-js
.vjs-volume-control
.vjs-mouse-display::after {

    display: none !important;

    visibility: hidden !important;
    opacity: 0 !important;
}


/* ==========================================================================
   MOBILE / TOUCH
   Mute/unmute only.
   ========================================================================== */

@media (max-width: 1024px) {

    .sm-hls-livestream
    .video-js
    .vjs-volume-panel
    .vjs-volume-control {

        display: none !important;
    }
}



/* ==========================================================================
   SM HLS — CONTROL GAP FINAL AUTHORITY
   ========================================================================== */


/*
 * LEFT GROUP
 *
 * PLAY -> VOLUME -> LIVE
 *
 * Do not put a gap before the first Play button.
 */

.sm-hls-livestream
.video-js
.vjs-play-control {
    margin-left: 0 !important;
    margin-right: var(--sm-hls-current-control-gap, 3px) !important;
}


.sm-hls-livestream
.video-js
.vjs-volume-panel {
    margin-left: 0 !important;
    margin-right: var(--sm-hls-current-control-gap, 3px) !important;
}


/*
 * RIGHT GROUP
 *
 * PiP -> CHAT -> MINIMIZE/EXPAND -> FULLSCREEN
 */

.sm-hls-livestream
.video-js
.vjs-picture-in-picture-control,

.sm-hls-livestream
.video-js
.sm-hls-livestream__video-chat,

.sm-hls-livestream
.video-js
.sm-hls-livestream__video-expand,

.sm-hls-livestream
.video-js
.sm-hls-livestream__video-minimize,

.sm-hls-livestream
.video-js
.vjs-fullscreen-control {

    margin-left: var(--sm-hls-current-control-gap, 3px) !important;
    margin-right: 0 !important;
}


/* ==========================================================================
   CHAT TYPOGRAPHY FINAL AUTHORITY

   Deliberately NO font-size / font-family / weight here.
   Elementor Group_Control_Typography owns those properties.
   ========================================================================== */

.sm-hls-livestream
.sm-hls-livestream__video-chat-label {

    color: var(--sm-hls-chat-fg, #ffd21c) !important;

    white-space: nowrap !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}



/* ==========================================================================
   SM HLS — VERTICAL VOLUME INTERACTION
   ========================================================================== */

.sm-hls-livestream
.video-js
.vjs-volume-control {

    touch-action: none !important;
    cursor: pointer !important;
}


.sm-hls-livestream
.video-js
.vjs-volume-bar {

    cursor: pointer !important;
}


/*
 * The Video.js level element already receives the correct percentage.
 * Keep it anchored from the bottom.
 */

.sm-hls-livestream
.video-js
.vjs-volume-level {

    top: auto !important;
    bottom: 0 !important;
}


/*
 * No native Video.js percentage / mouse display.
 */

.sm-hls-livestream
.video-js
.vjs-volume-tooltip,

.sm-hls-livestream
.video-js
.vjs-volume-control
.vjs-mouse-display,

.sm-hls-livestream
.video-js
.vjs-volume-control
.vjs-mouse-display::before,

.sm-hls-livestream
.video-js
.vjs-volume-control
.vjs-mouse-display::after {

    display: none !important;
}



/* ==========================================================================
   SM HLS — AUDIO ICON FINAL AUTHORITY

   The widget explicitly owns the visible speaker glyph.
   Video.js internal vjs-vol-* state no longer decides which glyph is shown.
   ========================================================================== */

.sm-hls-livestream
.video-js
.vjs-mute-control.sm-hls-audio-muted
.vjs-icon-placeholder::before {
    content: "\f104" !important;
}


.sm-hls-livestream
.video-js
.vjs-mute-control.sm-hls-audio-on
.vjs-icon-placeholder::before {
    content: "\f107" !important;
}



/* ==========================================================================
   SM HLS — AUDIO ICON FINAL AUTHORITY

   The widget explicitly owns the visible speaker glyph.
   Video.js internal vjs-vol-* state no longer decides which glyph is shown.
   ========================================================================== */

.sm-hls-livestream
.video-js
.vjs-mute-control.sm-hls-audio-muted
.vjs-icon-placeholder::before {
    content: "\f104" !important;
}


.sm-hls-livestream
.video-js
.vjs-mute-control.sm-hls-audio-on
.vjs-icon-placeholder::before {
    content: "\f107" !important;
}



/* ================================================================
   SM HLS — AUTHORITATIVE OFFLINE UI
   Owncast offline media must expose no interactive video controls.
   Keep this block at the END so it wins over Video.js control styling.
   ================================================================ */

.sm-hls-livestream.sm-hls-livestream--offline
.video-js
.vjs-control-bar,

.sm-hls-livestream.sm-hls-livestream--offline
.video-js
.vjs-big-play-button,

.sm-hls-livestream.sm-hls-livestream--offline
.video-js
.vjs-loading-spinner,

.sm-hls-livestream.sm-hls-livestream--offline
.video-js
.vjs-play-control,

.sm-hls-livestream.sm-hls-livestream--offline
.video-js
.vjs-volume-panel,

.sm-hls-livestream.sm-hls-livestream--offline
.video-js
.vjs-mute-control,

.sm-hls-livestream.sm-hls-livestream--offline
.video-js
.vjs-picture-in-picture-control,

.sm-hls-livestream.sm-hls-livestream--offline
.video-js
.vjs-fullscreen-control,

.sm-hls-livestream.sm-hls-livestream--offline
.video-js
.sm-hls-livestream__video-expand,

.sm-hls-livestream.sm-hls-livestream--offline
.video-js
.sm-hls-livestream__video-chat,

.sm-hls-livestream.sm-hls-livestream--offline
.video-js
.sm-hls-livestream__video-minimize,

.sm-hls-livestream.sm-hls-livestream--offline
> .sm-hls-livestream__expand {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/*
 * Offline poster remains visual-only.
 * Prevent Owncast's still-valid offline HLS media from receiving clicks.
 */
.sm-hls-livestream.sm-hls-livestream--offline
.sm-hls-livestream__player,

.sm-hls-livestream.sm-hls-livestream--offline
.video-js {
    pointer-events: none !important;
}



/* ================================================================
   SM HLS — ELEMENTOR CHAT CONTAINER CONTROLS

   These properties affect the Elementor-side Owncast chat container
   and iframe only. Owncast iframe contents retain their Owncast theme.
   ================================================================ */

.sm-hls-livestream__chat {
    min-width: var(--sm-hls-chat-min-width, 280px);

    background: var(--sm-hls-chat-background, #09050d);

    border:
        var(--sm-hls-chat-border-width, 1px)
        solid
        var(--sm-hls-chat-border-color, #e6174f);

    border-radius: var(--sm-hls-chat-radius, 0px);

    overflow: hidden;
}

.sm-hls-livestream__chat iframe {
    opacity: calc(var(--sm-hls-chat-opacity, 100) / 100);

    border-radius: inherit;
}


/* Expanded desktop geometry */

@media (min-width: 768px) {

    body.sm-hls-expanded
    .sm-hls-livestream.is-expanded {
        grid-template-columns:
            minmax(0, var(--sm-expanded-video-width, 72%))
            minmax(
                var(--sm-hls-chat-min-width, 280px),
                calc(100% - var(--sm-expanded-video-width, 72%))
            );
    }
}


/* Expanded mobile/tablet chat height */

@media (max-width: 767px) {

    body.sm-hls-expanded
    .sm-hls-livestream.is-expanded
    .sm-hls-livestream__chat {
        height: var(--sm-hls-chat-height, 480px) !important;
    }

    body.sm-hls-expanded
    .sm-hls-livestream.is-expanded
    .sm-hls-livestream__chat iframe {
        height: var(--sm-hls-chat-height, 480px) !important;
    }
}



/* ==========================================================================
   SM HLS — HERO LIVE STATE
   --------------------------------------------------------------------------
   Owncast LIVE/OFFLINE state is supplied by hls-livestream.js.

   Hero Right relocation is now handled by DOM movement:
       .sm-stream-hero-right
           -> .sm-owncast-live-anchor

   Elementor remains authoritative for Hero Right geometry.
   ========================================================================== */

/*
 * LIVE: HLS side gets the full original hero width.
 * Hero Right is physically elsewhere in the DOM.
 */
.sm-stream-hero.sm-stream-hero--live
> .e-con-inner
> .sm-stream-hero-left,
.sm-stream-hero.sm-stream-hero--live
> .sm-stream-hero-left {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
}

/*
 * Empty destination must consume no vertical space.
 */
.sm-owncast-live-anchor:empty {
    min-height: 0 !important;
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/*
 * Once relocated, Hero Right fills its Elementor destination.
 */
.sm-owncast-live-anchor
> .sm-stream-hero-right {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
}


/* ========================================================================
   SPICY MARMELADE — HERO DESIGN TUNING
   2026-09-16
   ======================================================================== */

@media (min-width: 1025px) {

    /* ------------------------------------------------------------
       BRANDING
       ------------------------------------------------------------ */

    /* "Wir Streamen" deliberately offset from main headline */
    .sm-stream-hero-right .sm-hero-branding
    .elementor-element-6a9b437e {
        position: relative;
        right: 18px;
        z-index: 2;
    }

    /* Heart slightly further right */
    .sm-stream-hero-right .sm-hero-branding
    .elementor-element-2872c6fb {
        position: relative;
        left: 12px;
    }


    /* ------------------------------------------------------------
       HERO CTA — ICON/TEXT INSTEAD OF LARGE PILLS
       ------------------------------------------------------------ */

    .sm-stream-hero-right .sm-hero-actions
    .elementor-button {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 6px 4px !important;
        min-width: 0 !important;
        box-shadow: none !important;
    }

    .sm-stream-hero-right .sm-hero-actions
    .elementor-button:hover {
        background: transparent !important;
        box-shadow: none !important;
        transform: translateY(-1px);
    }

    .sm-stream-hero-right .sm-hero-actions
    .elementor-button-content-wrapper {
        gap: 7px;
        align-items: center;
    }

    .sm-stream-hero-right .sm-hero-actions
    .elementor-button-icon {
        font-size: 25px;
    }

    .sm-stream-hero-right .sm-hero-actions
    .elementor-button-text {
        font-size: 16px;
        line-height: 1;
        white-space: nowrap;
    }

    /* Radio CTA keeps yellow identity */
    .sm-stream-hero-right .sm-radio-external-play
    .elementor-button,
    .sm-stream-hero-right .sm-radio-external-play
    .elementor-button:hover {
        color: #F7B500 !important;
    }

    /* JoyClub CTA keeps pink identity */
    .sm-stream-hero-right
    .elementor-element-28d0194f
    .elementor-button,
    .sm-stream-hero-right
    .elementor-element-28d0194f
    .elementor-button:hover {
        color: #FF2F7D !important;
    }


    /* ------------------------------------------------------------
       FOUR HERO FEATURE ICONS
       ------------------------------------------------------------ */

    .sm-stream-hero-right
    .elementor-element-1d3551ce {
        row-gap: 2px !important;
        column-gap: 10px !important;
        align-content: center;
    }

    .sm-stream-hero-right
    .elementor-element-1d3551ce > .e-con {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .sm-stream-hero-right
    .elementor-element-1d3551ce .elementor-icon-box-wrapper {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .sm-stream-hero-right
    .elementor-element-1d3551ce .elementor-widget-icon-box {
        margin-bottom: 0 !important;
    }

    /* Pull second icon row upward */
    .sm-stream-hero-right
    .elementor-element-686524ba,
    .sm-stream-hero-right
    .elementor-element-587a5990 {
        position: relative;
        top: -5px;
    }
}



/* ==========================================================================
   SM HERO — FINAL DESKTOP POSITION TUNING
   ========================================================================== */

@media (min-width: 1025px) {

    /*
     * "Wir Streamen"
     * More deliberate overlap with WAS EUCH.
     */
    .sm-stream-hero-right .sm-hero-branding
    .elementor-element-6a9b437e {
        right: 48px !important;
        top: 3px !important;
    }

    /*
     * Heart: slightly to the right of branding composition.
     */
    .sm-stream-hero-right .sm-hero-branding
    .elementor-element-2872c6fb {
        left: 20px !important;
    }

    /*
     * CTA row:
     * move slightly toward the Actions side and upward.
     */
    .sm-stream-hero-right .sm-hero-actions
    .elementor-element-26c227d7 {
        position: relative;
        left: 18px;
        top: -8px;
    }

    /*
     * Tighten feature grid.
     */
    .sm-stream-hero-right
    .elementor-element-1d3551ce {
        row-gap: 0 !important;
    }

    /*
     * Pull CREATOR + COMMUNITY row substantially upward.
     */
    .sm-stream-hero-right
    .elementor-element-686524ba,
    .sm-stream-hero-right
    .elementor-element-587a5990 {
        top: -30px !important;
    }

}



/* ==========================================================================
   HERO TUNING V2
   Stable container classes + structural selectors.
   ========================================================================== */

@media (min-width:1025px) {

    /* ==============================================================
       BRANDING
       Structure:
       1 Herz
       2 Wir streamen
       3 Was Euch Anmacht
       4 Underline container
       ============================================================== */

    .sm-hero-branding {
        position: relative;
    }

    /* Wir streamen */
    .sm-hero-branding > :nth-child(2) {
        position: relative !important;
        left: 35px !important;
        top: 8px !important;
        z-index: 5 !important;
    }

    /* Heart */
    .sm-hero-branding > :nth-child(1) {
        position: relative !important;
        left: 45px !important;
        top: 5px !important;
        z-index: 6 !important;
    }


    /* ==============================================================
       ACTIONS
       Structure:
       1 Container BUTTONS
       2 Container ICONS
       ============================================================== */

    .sm-hero-actions {
        position: relative;
    }

    /* CTA icons/text */
    .sm-hero-actions > :nth-child(1) {
        position: relative !important;
        top: -12px !important;
        left: 25px !important;
    }


    /* ==============================================================
       ICON GRID

       Container ICONS contains the four feature containers.
       ============================================================== */

    .sm-hero-actions > :nth-child(2) {
        display: flex !important;
        flex-wrap: wrap !important;

        column-gap: 10px !important;
        row-gap: 0 !important;

        align-content: flex-start !important;
    }

    /* Each icon item */
    .sm-hero-actions > :nth-child(2) > * {
        width: calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
        flex: 0 0 calc(50% - 5px) !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* CREATOR + COMMUNITY = second row */
    .sm-hero-actions > :nth-child(2) > :nth-child(3),
    .sm-hero-actions > :nth-child(2) > :nth-child(4) {
        position: relative !important;
        top: -25px !important;
    }

}



/* ==========================================================================
   HERO BRANDING — FINAL POSITION CORRECTION
   ========================================================================== */

@media (min-width:1025px) {

    /*
     * Wir Streamen
     * Previous +35px was too far right.
     * Pull it back and lift it above EUCH.
     */
    .sm-hero-branding > :nth-child(2) {
        position: relative !important;
        left: 5px !important;
        top: -18px !important;
        z-index: 5 !important;
    }

    /*
     * Heart
     * Keep it slightly right of the Wir Streamen composition.
     */
    .sm-hero-branding > :nth-child(1) {
        position: relative !important;
        left: 20px !important;
        top: -4px !important;
        z-index: 6 !important;
    }

}




/* ==========================================================================
   OWNCAST HERO — FINAL LIVE/OFFLINE SWITCH
   --------------------------------------------------------------------------
   Elementor owns both layouts.

   OFFLINE:
       normal Hero Right visible
       LIVE HERO PROMO hidden

   LIVE:
       normal Hero Right hidden
       LIVE HERO PROMO visible
       HLS Hero Left gets full width
   ========================================================================== */


/* Prevent LIVE promo flash before Owncast status has been resolved. */

.sm-owncast-live-promo {
    display: none !important;
}


/* LIVE promo */

.sm-owncast-live-promo.sm-owncast-live-promo--visible {
    display: flex !important;
}


/* LIVE: remove normal promotional right side from the main Hero. */

.sm-stream-hero.sm-stream-hero--live
.sm-stream-hero-right {
    display: none !important;
}


/* LIVE: HLS gets the complete Hero width. */

.sm-stream-hero.sm-stream-hero--live
> .e-con-inner
> .sm-stream-hero-left,

.sm-stream-hero.sm-stream-hero--live
> .sm-stream-hero-left {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
}


/* OFFLINE remains entirely Elementor-controlled. */