.ytcp-wrap {
    --ytcp-bg: #111;
    --ytcp-panel: #181818;
    --ytcp-text: #fff;
    --ytcp-border: rgba(0,0,0,.12);
    --ytcp-shadow: 0 12px 35px rgba(0,0,0,.12);
    --ytcp-radius: 14px;
    width: 100%;
    max-width: 100%;
    margin: 1.25em 0;
    border-radius: var(--ytcp-radius);
    overflow: hidden;
    background: var(--ytcp-bg);
    box-shadow: var(--ytcp-shadow);
    border: 1px solid var(--ytcp-border);
}

.ytcp-poster-play:hover {
  background: var(--ytcp-poster-hover-bg, #00000040);
}

.ytcp-ratio {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.ytcp-player,
.ytcp-player iframe {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

.ytcp-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 50px;
    padding: 14px;
    background: var(--ytcp-panel);
    color: var(--ytcp-text);
}

.ytcp-controls.ytcp-has-title {
    flex-wrap: wrap;
}

.ytcp-video-title {
    flex: 0 0 100%;
    width: 100%;
    font-size: var(--ytcp-video-title-font-size, 18px);
    color: var(--ytcp-video-title-color, inherit);
    text-align: var(--ytcp-video-title-align, left);
    line-height: 1.3;
	margin: 0px 2px 10px;
}

.ytcp-btn {
    appearance: none;
    border: 0;
    border-radius: 99px;
    min-height: 34px;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
margin-bottom: 0rem;
margin-right: 0px;
}

.ytcp-btn:hover,
.ytcp-btn:focus-visible {
    background: rgba(127,127,127,.18);
    outline: none;
}

.ytcp-icon { font-size: 16px; line-height: 1; }
.ytcp-gear-icon { width: 18px; height: 18px; display: inline-flex; }
.ytcp-gear-icon svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.ytcp-label { font-size: 13px; }
.ytcp-time {
    margin-left: 2px;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    opacity: .8;
}
.ytcp-progress-wrap {
    flex: 1 1 180px;
    min-width: 80px;
    display: flex;
    align-items: center;
    padding: 0 6px;
}

.ytcp-progress {
    --ytcp-progress: 0%;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 24px;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    touch-action: pan-y;
	border: 0px !important;
}

.ytcp-progress::-webkit-slider-runnable-track {
    height: var(--ytcp-progress-height, 3px);
    border-radius: 999px;
    background: linear-gradient(to right, var(--ytcp-progress-color, #ff8300) 0, var(--ytcp-progress-color, #ff8300) var(--ytcp-progress), var(--ytcp-progress-track-color, #eaeaea) var(--ytcp-progress), var(--ytcp-progress-track-color, #eaeaea) 100%);
}

.ytcp-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: var(--ytcp-desktop-scrub-width, 15px);
    height: var(--ytcp-desktop-scrub-height, 15px);
    border: 0;
    border-radius: var(--ytcp-desktop-scrub-radius, 50%);
    background: var(--ytcp-desktop-scrub-color, #ff8300);
    margin-top: calc((var(--ytcp-progress-height, 3px) - var(--ytcp-desktop-scrub-height, 15px)) / 2);
}

.ytcp-progress::-moz-range-track {
  height: var(--ytcp-progress-height, 3px);
  border: 0;
  border-radius: 999px;
  background: var(--ytcp-progress-track-color, #eaeaea);
}

.ytcp-progress::-moz-range-progress {
  height: var(--ytcp-progress-height, 3px);
  border-radius: 999px;
  background: var(--ytcp-progress-color, #ff8300);
}

.ytcp-progress::-moz-range-thumb {
  width: var(--ytcp-desktop-scrub-width, 15px);
  height: var(--ytcp-desktop-scrub-height, 15px);
  border: 0;
  border-radius: var(--ytcp-desktop-scrub-radius, 50%);
  background: var(--ytcp-desktop-scrub-color, #ff8300);
}

.ytcp-progress:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 4px;
}

.ytcp-fullscreen { margin-left: auto; }

.ytcp-skin-dark {
    --ytcp-bg: #090909;
    --ytcp-panel: #090909;
    --ytcp-text: #fff;
    --ytcp-border: rgba(255,255,255,.08);
    --ytcp-shadow: 0 14px 40px rgba(0,0,0,.24);
    --ytcp-radius: 10px;
}

.ytcp-skin-light {
    --ytcp-bg: #fff;
    --ytcp-panel: #fff;
    --ytcp-text: #181818;
    --ytcp-border: rgba(0,0,0,.10);
    --ytcp-shadow: 0 10px 28px rgba(0,0,0,.09);
    --ytcp-radius: 14px;
}

.ytcp-skin-frameless {
    --ytcp-bg: transparent;
    --ytcp-panel: transparent;
    --ytcp-text: currentColor;
    --ytcp-border: transparent;
    --ytcp-shadow: none;
    --ytcp-radius: 0px;
    border: 0;
}

.ytcp-skin-frameless .ytcp-controls { padding-left: 0; padding-right: 0; }

.ytcp-ratio:fullscreen,
.ytcp-ratio:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    aspect-ratio: auto;
    background: #000;
}

.ytcp-error {
    padding: 10px 12px;
    border-left: 4px solid #b32d2e;
    background: #fff5f5;
    color: #7a1818;
    margin: 1em 0;
}

@media (max-width: 520px) {
    .ytcp-controls { gap: 3px; }
    .ytcp-btn { padding-left: 8px; padding-right: 8px; }
    .ytcp-label { display: none; }
}


/* Brief loading message shown only while YouTube settings toggle rebuilds the
   player and the selected clip-start frame is being prepared. */
.ytcp-reload-loading {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    opacity: 1;
    transition: opacity .35s ease;
    pointer-events: none;
}
.ytcp-reload-loading[hidden] {
    display: none;
}
.ytcp-reload-loading.is-entering {
    opacity: 0;
}
.ytcp-reload-loading.is-leaving {
    opacity: 0;
}

/* Optional clip fade: video image fades against the existing black player background. */
.ytcp-fade-enabled .ytcp-player {
    opacity: 0;
    transition: opacity .8s ease;
}

.ytcp-fade-enabled.ytcp-fade-visible .ytcp-player {
    opacity: 1;
}


/* Optional clip poster: the cued frame at the selected clip start stays visible
   until the visitor starts playback. */
.ytcp-poster-play {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ytcp-poster-play[hidden] {
    display: none;
}

.ytcp-poster-play-icon {
    position: relative;
    display: block;
    width: 68px;
    height: 48px;
    border-radius: 14px;
    background: #ff0033;
    box-shadow: 0 2px 12px rgba(0,0,0,.28);
}

.ytcp-poster-play-icon::after {
    content: '';
    position: absolute;
    left: 28px;
    top: 14px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 17px solid #fff;
}

.ytcp-poster-play:hover .ytcp-poster-play-icon,
.ytcp-poster-play:focus-visible .ytcp-poster-play-icon {
    transform: scale(1.06);
}

.ytcp-poster-play:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -6px;
}

/* When poster and fade are both enabled, keep the selected start frame visible
   before playback. Once Play is pressed, the existing fade-in takes over. */
.ytcp-fade-enabled.ytcp-poster-active .ytcp-player {
    opacity: 1;
}

/* After a YouTube settings ON/OFF rebuild, show the exact paused clip-start
   frame even when the normal clip fade starts from opacity 0. */
.ytcp-fade-enabled.ytcp-start-frame-ready .ytcp-player {
    opacity: 1;
}

/* While the exact clip-start frame is being rendered, never expose YouTube's
   generic video thumbnail. */
.ytcp-poster-priming .ytcp-player {
    opacity: 0 !important;
}


.ytcp-custom-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.ytcp-custom-icon img {
    display: block;
    max-width: none;
    height: auto;
}


/* Play and Pause share the same control position and swap by player state. */
.ytcp-play-pause-slot {
    display: inline-grid;
    align-items: center;
}
.ytcp-play-pause-slot .ytcp-btn {
    grid-area: 1 / 1;
}
.ytcp-play-pause-slot .ytcp-btn[hidden] {
    display: inline-flex !important;
    visibility: hidden;
    pointer-events: none;
}
.ytcp-play.is-active,
.ytcp-pause.is-active {
    background: rgba(127,127,127,.16);
}


/* Mobile fullscreen fallback for iPhone Safari and browsers where the native
   Fullscreen API rejects a custom external control. This intentionally changes
   only the fullscreen button result; normal inline layout remains untouched. */
html.ytcp-viewport-fullscreen-open,
body.ytcp-viewport-fullscreen-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

.ytcp-wrap.ytcp-mobile-viewport-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483647 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    background: #000 !important;
}

.ytcp-wrap.ytcp-mobile-viewport-fullscreen .ytcp-ratio {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    background: #000 !important;
}

@media (orientation: portrait) {
    .ytcp-wrap.ytcp-mobile-viewport-fullscreen .ytcp-controls {
        flex: 0 0 auto !important;
        padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
    }
}

@media (orientation: landscape) {
    .ytcp-wrap.ytcp-mobile-viewport-fullscreen .ytcp-controls {
        display: none !important;
    }
}


/* Sound on/off share the same control position and swap by mute state. */
.ytcp-mute-slot {
    display: inline-grid;
    align-items: center;
}
.ytcp-mute-slot .ytcp-btn {
    grid-area: 1 / 1;
}
.ytcp-mute-slot .ytcp-btn[hidden] {
    display: inline-flex !important;
    visibility: hidden;
    pointer-events: none;
}
.ytcp-mute-on.is-active,
.ytcp-mute-off.is-active {
    background: rgba(127,127,127,.16);
}

/* On narrow layouts, the clip time itself becomes the visible scrubber thumb. */
.ytcp-time-scrub {
    display: none;
}

@media (max-width: 900px) {
    .ytcp-controls > .ytcp-time:not(.ytcp-time-scrub) {
        display: none;
    }

    .ytcp-progress-wrap {
        position: relative;
        padding-top: 0;
    }

    .ytcp-time-scrub {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        left: clamp(48px, var(--ytcp-scrub-position, 0%), calc(100% - 48px));
        transform: translate(-50%, -50%);
        min-height: var(--ytcp-mobile-time-min-height, 32px);
        min-width: var(--ytcp-mobile-time-min-width, 88px);
        padding: var(--ytcp-mobile-time-padding, 6px 12px);
        margin: 0;
        border-radius: 999px;
        background: var(--ytcp-mobile-time-bg, #ff8300);
        color: var(--ytcp-mobile-time-text-color, #fff);
        opacity: 1;
        white-space: nowrap;
        pointer-events: auto;
        touch-action: none;
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
        line-height: 1;
        z-index: 2;
        box-sizing: border-box;
        font-size: var(--ytcp-mobile-time-text-size, 10px);
    }

    .ytcp-progress::-webkit-slider-thumb {
        width: 1px;
        height: 1px;
        margin-top: 1px;
        background: transparent;
        box-shadow: none;
    }

    .ytcp-progress::-moz-range-thumb {
        width: 1px;
        height: 1px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
}

/* YouTube settings ON/OFF share the same control position and swap by state. */
.ytcp-youtube-settings-slot {
    display: inline-grid;
    align-items: center;
}
.ytcp-youtube-settings-slot .ytcp-btn {
    grid-area: 1 / 1;
}
.ytcp-youtube-settings-slot .ytcp-btn[hidden] {
    display: inline-flex !important;
    visibility: hidden;
    pointer-events: none;
}
.ytcp-youtube-settings-on.is-active,
.ytcp-youtube-settings-off.is-active {
    background: rgba(127,127,127,.16);
}

/* Remote Embed native fullscreen: fullscreen the entire embedded document and
   pin only the clicked YouTube Clip Player to the physical fullscreen viewport. */
html.ytcp-native-document-fullscreen,
html.ytcp-native-document-fullscreen body {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
}

.ytcp-wrap.ytcp-native-document-fullscreen-player {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483647 !important;
    width: 100vw !important;
    width: 100dvw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    background: #000 !important;
}

.ytcp-wrap.ytcp-native-document-fullscreen-player .ytcp-ratio {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    background: #000 !important;
}

.ytcp-wrap.ytcp-native-document-fullscreen-player .ytcp-controls {
    flex: 0 0 auto !important;
}



/* Custom controls: state/icon swaps must be immediate and must not inherit
   the theme's pressed/active button colour. */
.ytcp-btn.ytcp-restart,
.ytcp-play-pause-slot .ytcp-btn,
.ytcp-mute-slot .ytcp-btn,
.ytcp-youtube-settings-slot .ytcp-btn,
.ytcp-btn.ytcp-restart *,
.ytcp-play-pause-slot .ytcp-btn *,
.ytcp-mute-slot .ytcp-btn *,
.ytcp-youtube-settings-slot .ytcp-btn * {
    transition: none !important;
}

.ytcp-btn.ytcp-restart:active,
.ytcp-play-pause-slot .ytcp-btn:active,
.ytcp-mute-slot .ytcp-btn:active,
.ytcp-youtube-settings-slot .ytcp-btn:active {
    color: inherit !important;
    background-color: transparent !important;
    box-shadow: none !important;
}