.gfvg {
	--gfvg-accent: #d32128;
	--gfvg-accent-hover: #1d181a;
	--gfvg-surface: #1d181a;
	--gfvg-text: #fff;
	--gfvg-button-text: #fff;
	--gfvg-panel: #f4f4f4;
	--gfvg-ink: #1d181a;
	--gfvg-safe-bottom: 20px;
	--gfvg-safe-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	position: fixed;
	right: clamp(14px, 2.2vw, 32px);
	bottom: var(--gfvg-safe-bottom);
	z-index: 999990;
	visibility: hidden;
	color: var(--gfvg-text);
	font-family: inherit;
	font-size: 16px;
	font-style: normal;
	line-height: 1.3;
	pointer-events: none;
}

.gfvg,
.gfvg *,
.gfvg *::before,
.gfvg *::after { box-sizing: border-box; }

.gfvg--left { right: auto; left: clamp(14px, 2.2vw, 32px); }
.gfvg.gfvg-is-visible { visibility: visible; }
.gfvg.gfvg--preview:not(.gfvg-is-dismissed) { visibility: visible !important; }
.gfvg.gfvg-is-suppressed { display: none !important; }

.gfvg__preview-flag {
	position: absolute;
	right: 0;
	bottom: calc(100% + 9px);
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 5px 10px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 7px 22px rgba(29, 24, 26, .14);
	color: var(--gfvg-ink);
	font-size: 10px;
	font-weight: 750;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
}

.gfvg__preview-flag::before {
	content: '';
	width: 7px;
	height: 7px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--gfvg-accent);
}

/* Isolate every control from Elementor Kit and theme button styling. */
body .gfvg button,
body .gfvg button:hover,
body .gfvg button:focus,
body .gfvg button:focus-visible,
body .gfvg button:active {
	-webkit-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	font-family: inherit !important;
	font-style: normal !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	background-image: none !important;
}

.gfvg__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(29, 24, 26, .34);
	-webkit-backdrop-filter: blur(2.5px) saturate(.82);
	backdrop-filter: blur(2.5px) saturate(.82);
	opacity: 0;
	pointer-events: none;
	transition: opacity .38s cubic-bezier(.2, .8, .2, 1);
}

.gfvg__shell {
	position: relative;
	width: clamp(98px, 7.5vw, 112px);
	aspect-ratio: 9 / 14;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 20px;
	background: var(--gfvg-surface);
	box-shadow: 0 16px 45px rgba(29, 24, 26, .22);
	transform: translate3d(0, 20px, 0) scale(.9);
	opacity: 0;
	isolation: isolate;
	pointer-events: auto;
	transition: width .58s cubic-bezier(.16, 1, .3, 1), aspect-ratio .58s cubic-bezier(.16, 1, .3, 1), border-radius .58s cubic-bezier(.16, 1, .3, 1), border-color .3s ease, transform .58s cubic-bezier(.16, 1, .3, 1), opacity .3s ease, box-shadow .35s ease;
}

.gfvg.gfvg-is-visible .gfvg__shell,
.gfvg.gfvg--preview:not(.gfvg-is-dismissed) .gfvg__shell {
	transform: translate3d(0, 0, 0) scale(1);
	opacity: 1;
	animation: gfvg-glow 2.7s 1.1s ease-out 2;
}

.gfvg__video,
.gfvg__wash { position: absolute; inset: 0; width: 100%; height: 100%; }
.gfvg__video { display: block; object-fit: cover; background: var(--gfvg-surface); transition: opacity .2s ease; }
.gfvg__wash { background: linear-gradient(180deg, rgba(29, 24, 26, .02) 34%, rgba(29, 24, 26, .82) 100%); pointer-events: none; }

.gfvg__media-fallback {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 20px;
	background: var(--gfvg-surface);
	color: var(--gfvg-text);
	font-size: 12px;
	font-weight: 650;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}

.gfvg.gfvg-has-media-error .gfvg__video { opacity: 0; }
.gfvg.gfvg-has-media-error .gfvg__media-fallback { opacity: 1; }

body .gfvg .gfvg__open,
body .gfvg .gfvg__open:hover,
body .gfvg .gfvg__open:focus,
body .gfvg .gfvg__open:active {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100% !important;
	height: 100% !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: inherit !important;
	background: transparent !important;
	color: var(--gfvg-text) !important;
	cursor: pointer;
}

.gfvg__launcher-label {
	position: absolute;
	left: 7px;
	right: 7px;
	bottom: 8px;
	display: block;
	padding: 7px 8px;
	border-radius: 999px;
	background: var(--gfvg-accent);
	color: var(--gfvg-button-text);
	font-size: 9px;
	font-weight: 750;
	line-height: 1.05;
	letter-spacing: -.015em;
	text-align: center;
}

.gfvg__sound-pulse {
	position: absolute;
	left: 8px;
	top: 8px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 2px;
	width: 29px;
	height: 29px;
	padding: 8px 7px;
	border-radius: 9px;
	background: var(--gfvg-accent);
	box-sizing: border-box;
}

.gfvg__sound-pulse span { width: 2px; height: 5px; border-radius: 2px; background: var(--gfvg-button-text); animation: gfvg-wave .9s ease-in-out infinite alternate; }
.gfvg__sound-pulse span:nth-child(2) { height: 9px; animation-delay: -.4s; }
.gfvg__sound-pulse span:nth-child(3) { height: 7px; animation-delay: -.2s; }

body .gfvg .gfvg__dismiss,
body .gfvg .gfvg__dismiss:focus,
body .gfvg .gfvg__dismiss:active,
body .gfvg .gfvg__icon-button,
body .gfvg .gfvg__icon-button:focus,
body .gfvg .gfvg__icon-button:active {
	display: inline-grid;
	place-items: center;
	width: 34px !important;
	height: 34px !important;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, .7) !important;
	border-radius: 10px !important;
	background: rgba(255, 255, 255, .94) !important;
	color: var(--gfvg-ink) !important;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease !important;
}

body .gfvg .gfvg__dismiss {
	position: absolute;
	z-index: 5;
	right: 8px;
	top: 8px;
	width: 29px !important;
	height: 29px !important;
	border-color: rgba(255, 255, 255, .18) !important;
	border-radius: 9px !important;
	background: rgba(29, 24, 26, .78) !important;
	color: #fff !important;
}

body .gfvg .gfvg__dismiss:hover,
body .gfvg .gfvg__icon-button:hover {
	border-color: var(--gfvg-accent) !important;
	background: var(--gfvg-accent) !important;
	color: var(--gfvg-button-text) !important;
	transform: translateY(-1px) !important;
}

.gfvg__dismiss svg { width: 13px; height: 13px; fill: none !important; stroke: currentColor !important; stroke-width: 1.8; }
.gfvg__icon-button svg { width: 17px; height: 17px; fill: none !important; stroke: currentColor !important; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gfvg__dismiss svg path,
.gfvg__icon-button svg path { fill: none !important; stroke: currentColor !important; }

.gfvg__expanded-ui { position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.gfvg__topbar { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px; background: linear-gradient(180deg, rgba(29, 24, 26, .86) 0%, rgba(29, 24, 26, .3) 68%, transparent 100%); }
.gfvg__topbar > div:first-child { display: flex; min-width: 0; flex-direction: column; gap: 4px; padding-top: 2px; }
.gfvg__topbar strong { color: var(--gfvg-text); font-size: 15px; font-weight: 760; line-height: 1.12; letter-spacing: -.025em; }
.gfvg__topbar span { max-width: 230px; color: var(--gfvg-text); font-size: 11px; font-weight: 450; line-height: 1.35; opacity: .76; }
.gfvg__top-actions { display: flex; flex: none; gap: 7px; }

body .gfvg .gfvg__play-toggle,
body .gfvg .gfvg__play-toggle:hover,
body .gfvg .gfvg__play-toggle:focus,
body .gfvg .gfvg__play-toggle:active {
	position: absolute;
	inset: 76px 0 118px;
	width: 100% !important;
	height: auto !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	cursor: pointer;
}

.gfvg__play-toggle span { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; background: rgba(29, 24, 26, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: translate(-50%, -50%) scale(.72); opacity: 0; transition: opacity .2s ease, transform .2s ease; }
.gfvg__play-toggle span::before { content: ''; position: absolute; left: 23px; top: 17px; border-left: 14px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.gfvg.gfvg-is-paused .gfvg__play-toggle span { transform: translate(-50%, -50%) scale(1); opacity: 1; }

.gfvg__action {
	position: absolute;
	z-index: 6;
	left: 18px;
	right: 18px;
	bottom: 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	transform: translateY(10px);
	animation: gfvg-action-in .38s cubic-bezier(.16, 1, .3, 1) forwards;
}

.gfvg__action[hidden] { display: none; }
.gfvg__action > span { align-self: flex-start; padding: 5px 8px; border-radius: 999px; background: rgba(29, 24, 26, .74); color: #fff; font-size: 9px; font-weight: 750; line-height: 1.2; text-transform: uppercase; letter-spacing: .1em; }

body .gfvg .gfvg__action button,
body .gfvg .gfvg__action button:focus,
body .gfvg .gfvg__action button:active {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100% !important;
	min-height: 58px !important;
	padding: 11px 24px 11px 27px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--gfvg-accent) !important;
	color: var(--gfvg-button-text) !important;
	font-size: 15px !important;
	font-weight: 650 !important;
	line-height: 1.1 !important;
	letter-spacing: -.01em !important;
	text-align: left !important;
	cursor: pointer;
	transition: background-color .24s ease, color .24s ease, transform .24s ease !important;
}

body .gfvg .gfvg__action button::after { content: '→'; display: block; flex: none; width: auto; height: auto; border: 0; border-radius: 0; background: transparent; color: currentColor; font-size: 28px; font-weight: 400; line-height: .75; transition: transform .24s ease; }

body .gfvg .gfvg__action button:hover {
	border: 0 !important;
	background: var(--gfvg-accent-hover) !important;
	color: #fff !important;
	transform: translateY(-1px) !important;
}

body .gfvg .gfvg__action button:hover::after { background: transparent; color: currentColor; transform: translateX(3px); }

.gfvg__progress { position: absolute; z-index: 7; left: 18px; right: 18px; bottom: 7px; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.gfvg__progress span { display: block; width: 100%; height: 100%; background: var(--gfvg-accent); transform: scaleX(0); transform-origin: left center; }

.gfvg.gfvg-is-expanded .gfvg__backdrop { opacity: 1; pointer-events: auto; }
.gfvg.gfvg-is-expanded .gfvg__shell { width: min(400px, calc(100vw - 32px)); aspect-ratio: 9 / 16; max-height: calc(100vh - 40px); max-height: calc(100svh - 40px); max-height: calc(100dvh - 40px); border-color: rgba(255, 255, 255, .18); border-radius: 26px; box-shadow: 0 28px 80px rgba(29, 24, 26, .34); animation: none; }
.gfvg.gfvg-is-expanded .gfvg__expanded-ui { opacity: 1; pointer-events: auto; }
.gfvg.gfvg-is-expanded .gfvg__open,
.gfvg.gfvg-is-expanded > .gfvg__shell > .gfvg__dismiss { opacity: 0; pointer-events: none; }
.gfvg.gfvg-is-expanded .gfvg__wash { background: linear-gradient(180deg, rgba(29, 24, 26, .2), transparent 38%, rgba(29, 24, 26, .42)); }

body .gfvg button:focus:not(:focus-visible) { outline: 0 !important; }
body .gfvg button:focus-visible { outline: 3px solid var(--gfvg-accent) !important; outline-offset: 3px !important; }

.gfvg .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 767px) {
	body .gfvg { display: block !important; position: fixed !important; right: 12px; bottom: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
	body .gfvg.gfvg-is-visible,
	body .gfvg.gfvg--preview:not(.gfvg-is-dismissed) { visibility: visible !important; }
	body .gfvg.gfvg--left { right: auto !important; left: 12px; }
	.gfvg__shell { width: 94px; border-radius: 18px; }
	.gfvg.gfvg-is-expanded { left: 12px; right: 12px; bottom: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
	.gfvg.gfvg-is-expanded .gfvg__shell {
		width: min(calc(100vw - 24px), calc(56.25vh - 13.5px));
		width: min(calc(100vw - 24px), calc(56.25svh - 13.5px));
		width: min(calc(100vw - 24px), calc(56.25dvh - 13.5px));
		max-width: calc(100vw - 24px);
		max-height: calc(100vh - 24px);
		max-height: calc(100svh - 24px - env(safe-area-inset-bottom, 0px));
		max-height: calc(100dvh - 24px - env(safe-area-inset-bottom, 0px));
		margin-right: auto;
		margin-left: auto;
		border-radius: 23px;
	}
	.gfvg__launcher-label { font-size: 8.5px; }
	.gfvg__topbar { padding: 15px; }
	.gfvg__topbar span { max-width: 190px; }
	html.gfvg-modal-open,
	html.gfvg-modal-open body { overflow: hidden; overscroll-behavior: none; }
}

@media (max-width: 767px) and (max-height: 520px) {
	.gfvg__topbar { padding: 12px; }
	.gfvg__topbar span { display: none; }
	.gfvg__action { left: 12px; right: 12px; bottom: 14px; }
	.gfvg__progress { left: 12px; right: 12px; bottom: 5px; }
}

@media (prefers-reduced-motion: reduce) {
	.gfvg *, .gfvg *::before, .gfvg *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
}

@keyframes gfvg-wave { from { transform: scaleY(.55); } to { transform: scaleY(1.05); } }
@keyframes gfvg-glow {
	0% { box-shadow: 0 16px 45px rgba(29, 24, 26, .22), 0 0 0 0 color-mix(in srgb, var(--gfvg-accent) 42%, transparent); }
	70% { box-shadow: 0 16px 45px rgba(29, 24, 26, .22), 0 0 0 14px transparent; }
	100% { box-shadow: 0 16px 45px rgba(29, 24, 26, .22), 0 0 0 0 transparent; }
}
@keyframes gfvg-action-in { to { transform: translateY(0); } }
