/* ==========================================================================
   BIS gated video: poster button and the dialog with the lead form or the video.
   ========================================================================== */

.bis-vg { width: 100%; }

/* ---- Poster ---------------------------------------------------------------- */

body .bis-vg__poster {
	position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; margin: 0;
	border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; overflow: hidden; cursor: pointer;
	background:
		radial-gradient(ellipse 70% 80% at 80% 10%, rgba(0, 154, 203, .35) 0%, rgba(0, 154, 203, 0) 60%),
		linear-gradient(160deg, #0b2a3d 0%, #0a1620 100%);
	box-shadow: 0 1px 2px rgba(25, 25, 25, .06), 0 20px 40px rgba(25, 25, 25, .16);
	color: #fff; text-align: left; font: inherit;
}
/* The theme reset paints hovered/focused buttons pink (#c36) at higher specificity; keep the poster exactly as
   it is. The only hover effect is the play button's (below). */
body .bis-vg button.bis-vg__poster:hover,
body .bis-vg button.bis-vg__poster:focus {
	background:
		radial-gradient(ellipse 70% 80% at 80% 10%, rgba(0, 154, 203, .35) 0%, rgba(0, 154, 203, 0) 60%),
		linear-gradient(160deg, #0b2a3d 0%, #0a1620 100%);
	color: #fff; border-color: rgba(255, 255, 255, .12);
	transform: none; box-shadow: 0 1px 2px rgba(25, 25, 25, .06), 0 20px 40px rgba(25, 25, 25, .16);
}
body .bis-vg button.bis-vg__poster:focus-visible { outline: 3px solid rgba(0, 154, 203, .6); outline-offset: 3px; }

/* Cover image (config "poster"): fills the 16:9 frame, shown as is; the play button sits on top. */
body .bis-vg__poster .bis-vg__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: left center; }

/* Placeholder without a cover image: a suggestion of an app screen, drawn with blocks. */
.bis-vg__art { position: absolute; inset: 9% 7% 26% 7%; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1.6fr; gap: 3%; opacity: .55; }
.bis-vg__art span { border-radius: 4px; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .10); }
.bis-vg__art span:nth-child(4) { grid-column: 1 / -1; background: linear-gradient(90deg, rgba(0, 154, 203, .22), rgba(255, 255, 255, .06)); }

/* Play button matched to gomotive.com/watch-demo: an 80 px translucent grey circle with a thin light border and a
   white triangle. Hovering the cover (or the button) fills the circle white and turns the triangle black, over
   0.3 s; nothing else moves. 64 px below 1024 px wide, 48 px below 768 px. */
body .bis-vg__poster .bis-vg__play {
	position: absolute; left: 50%; top: 50%; z-index: 1; width: 80px; height: 80px; margin: 0; padding: 0;
	transform: translate(-50%, -50%); border: 1px solid #f2f2f2; border-radius: 50%;
	background: rgba(179, 179, 179, .4); box-shadow: none; transition: background .3s;
}
.bis-vg__play::before,
.bis-vg__play::after {
	content: ""; position: absolute; left: 37%; top: 50%; width: 34.5%; height: 40.7%; transform: translateY(-50%);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 39 46'%3E%3Cpath fill='%23fff' d='M39 23 0 46V0z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: opacity .3s;
}
.bis-vg__play::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 39 46'%3E%3Cpath fill='%23000' d='M39 23 0 46V0z'/%3E%3C/svg%3E");
	opacity: 0;
}
body .bis-vg button.bis-vg__poster:hover .bis-vg__play,
body .bis-vg button.bis-vg__poster:focus-visible .bis-vg__play { background: #fff; }
body .bis-vg button.bis-vg__poster:hover .bis-vg__play::before,
body .bis-vg button.bis-vg__poster:focus-visible .bis-vg__play::before { opacity: 0; }
body .bis-vg button.bis-vg__poster:hover .bis-vg__play::after,
body .bis-vg button.bis-vg__poster:focus-visible .bis-vg__play::after { opacity: 1; }
@media (max-width: 1023.98px) {
	body .bis-vg__poster .bis-vg__play { width: 64px; height: 64px; }
}
@media (max-width: 767.98px) {
	body .bis-vg__poster .bis-vg__play { width: 48px; height: 48px; }
}

.bis-vg__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Dialog ---------------------------------------------------------------- */

body .bis-vg__dialog {
	width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
	padding: 0; border: 0; border-radius: 8px; background: #fff; color: #191919; overflow: auto;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
}
/* Video width: also capped by the window height (frame + the close button above it), so the whole frame shows. */
body .bis-vg__dialog.is-video {
	width: min(1040px, calc(100vw - 32px), calc((100vh - 112px) * (var(--bis-vg-aspect, 16 / 9))));
	width: min(1040px, calc(100vw - 32px), calc((100dvh - 112px) * (var(--bis-vg-aspect, 16 / 9))));
	border-radius: 28px; background: #000; overflow: visible;
}
/* Non-modal dialog (see gated-video.js): fixed and centred like a modal one, with its own backdrop. Above the
   header (1000), Ask Amy and the cookie banner (99999); under reCAPTCHA's challenge window (2000000000). */
body .bis-vg__dialog { position: fixed; inset: 0; margin: auto; height: fit-content; z-index: 1000001; }
.bis-vg__scrim { position: fixed; inset: 0; z-index: 1000000; background: rgba(6, 12, 18, .72); }
.bis-vg__scrim[hidden] { display: none; }
html.bis-vg-lock { overflow: hidden; }
.bis-vg__box { position: relative; }

/* button.* + body prefix: beats the theme reset ([type=button]:hover / :focus pink) and the Elementor kit's button padding. */
body .bis-vg button.bis-vg__close {
	position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; min-height: 0; padding: 0; margin: 0;
	display: flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; cursor: pointer;
	background: rgba(25, 25, 25, .06); color: #333; font-size: 0; line-height: 0;
}
body .bis-vg button.bis-vg__close:hover, body .bis-vg button.bis-vg__close:focus { background: rgba(25, 25, 25, .12); color: #191919; }
body .bis-vg button.bis-vg__close:focus-visible { outline: 3px solid rgba(0, 154, 203, .5); outline-offset: 2px; }
body .bis-vg .bis-vg__dialog.is-video button.bis-vg__close { top: -48px; right: 0; background: rgba(255, 255, 255, .15); color: #fff; }
body .bis-vg .bis-vg__dialog.is-video button.bis-vg__close:hover,
body .bis-vg .bis-vg__dialog.is-video button.bis-vg__close:focus { background: rgba(255, 255, 255, .28); color: #fff; }

/* Form state: the dialog is sized to the visible screen (dvh: phones' address bar shown or not) and only the form
   scrolls, so the close button above it never scrolls or gets cut off. */
body .bis-vg__dialog:not(.is-video) { overflow: hidden; }
.bis-vg__panel--form {
	padding: clamp(24px, 4vw, 36px);
	max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
}
@media (max-width: 480px) { .bis-vg__panel--form { padding: 22px 18px 20px; } }
.bis-vg__panel--form .bis-lp-form__head { padding: 0 24px; }

.bis-vg__frame { position: relative; aspect-ratio: var(--bis-vg-aspect, 16 / 9); border-radius: 28px; overflow: hidden; background: #000 center / cover no-repeat; }
.bis-vg__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (prefers-reduced-motion: reduce) {
	body .bis-vg__poster .bis-vg__play, .bis-vg__play::before, .bis-vg__play::after { transition: none; }
}

/* ---- Video.js player (config "player": "videojs") ---------------------------------------------
   Fills the 16:9 frame. The theme reset and the Elementor kit style every <button> (pink hover, big padding),
   so the player's control buttons get their own look back. */
.bis-vg__frame .video-js { position: absolute; inset: 0; width: 100%; height: 100%; }
body .bis-vg .video-js button {
	min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit;
	font: inherit; line-height: inherit; text-transform: none; box-shadow: none;
}
body .bis-vg .video-js button:hover, body .bis-vg .video-js button:focus { background: transparent; color: inherit; }
body .bis-vg .video-js .vjs-big-play-button { border-radius: 50%; }

/* ---- Video.js 10 player (config "player": "videojs10"): fills the frame; the default skin styles itself. */
.bis-vg__frame video-player,
.bis-vg__frame video-skin,
.bis-vg__frame youtube-video,
.bis-vg__frame mux-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* 28px corners on the whole video popup: dialog, frame and the skin (its own default, set here so they stay in step). */
.bis-vg__frame video-player { --media-border-radius: 28px; }