.tgv-player > div, .time-gated-video-player { position: relative; box-sizing: border-box; width: var(--tgv-poster-width, 100%); max-width: 100vw; margin-left: auto; margin-right: auto; background: #000; overflow: hidden; isolation: isolate; transition: none; }
.tgv-player > div *, .tgv-player > div *::before, .tgv-player > div *::after, .time-gated-video-player *, .time-gated-video-player *::before, .time-gated-video-player *::after { box-sizing: border-box; }
@media screen and (max-width: 480px) {
    .tgv-player > div, .time-gated-video-player { border-radius: 20px; }
}

.time-gated-video-player__video, .time-gated-video-player__placeholder, .time-gated-video-player__button, .tgv-player-loading.time-gated-video-player__loading--active { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.time-gated-video-player__video { z-index: 1; display: block; background: #000; object-fit: cover; pointer-events: none; }
.time-gated-video-player__video::-webkit-media-controls, .time-gated-video-player__video::-webkit-media-controls-enclosure, .time-gated-video-player__video::-webkit-media-controls-panel, .time-gated-video-player__video::-webkit-media-controls-play-button, .time-gated-video-player__video::-webkit-media-controls-start-playback-button, .time-gated-video-player__video::-webkit-media-controls-overlay-play-button, .time-gated-video-player__video::-webkit-media-controls-timeline, .time-gated-video-player__video::-webkit-media-controls-current-time-display, .time-gated-video-player__video::-webkit-media-controls-time-remaining-display, .time-gated-video-player__video::-webkit-media-controls-mute-button, .time-gated-video-player__video::-webkit-media-controls-volume-slider, .time-gated-video-player__video::-webkit-media-controls-fullscreen-button, #detach-button-host { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
.time-gated-video-player__placeholder { z-index: 10; background: #000; cursor: pointer; transition: opacity 0.2s ease; }
.time-gated-video-player__placeholder--transparent { opacity: 0; }
.time-gated-video-player__poster { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.time-gated-video-player__button { z-index: 11; cursor: pointer; }

/* Standard Loading */
.tgv-player-loading { margin: 0 auto; padding: 1rem; text-align: center; font-size: 2rem; color: #aaa; }
.tgv-player-loading.time-gated-video-player__loading--active { z-index: 20; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; background: rgba(0, 0, 0, 0.45); color: #fff; pointer-events: none; }

/* Standard Play Button */
.time-gated-video-player__button-red { width: 100%; height: 100%; cursor: pointer; }
.time-gated-video-player__button-box { box-sizing: border-box; position: absolute; left: 50%; top: 50%; z-index: 1; width: 300px; height: 240px; padding: 0 1rem; border-radius: 15px; background-color: rgb(194, 27, 16); transform: translate(-50%, -50%); cursor: pointer; }
.time-gated-video-player__button-box > span:first-child { display: block; padding: 1rem 0 0; font-size: 36px; color: rgb(255, 255, 255); text-align: center; font-weight: 700; cursor: pointer; }
.time-gated-video-player__button-icon, .time-gated-video-player__button-box > img { display: block; width: 80px; height: 80px; margin: 10px auto; opacity: 1; cursor: pointer; }
@media screen and (max-width: 480px) {
    .time-gated-video-player__button-box { width: 200px; height: 180px; }
    .time-gated-video-player__button-box > span:first-child { font-size: 24px; }
    .time-gated-video-player__button-icon, .time-gated-video-player__button-box > img { width: 60px; height: 60px; }
}

/* Custom CallToAction */
.tgv-player-call-action { text-align: center; padding: 40px 10px; }
.tgv-player-call-action a.call-button { background-color: #00cc03; color: #FFFFFF; text-decoration: none; display: inline-block; padding: .75em 1em; border-radius: 0.4em; font-size: 36px; line-height: 1; font-weight: 600; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4); }
.tgv-player-call-action a.call-button:hover { background-color: #04ba00; color: #ffffff; text-decoration: none; }
.tgv-player-call-action a.call-button span { font-size: 1.4em; line-height: 0.5; }
@media screen and (max-width: 480px) {
    .tgv-player-call-action a.call-button { padding: .5em; font-size: 48px; }
}