/**
 * VIVA Video Testimonials styles — premium click-to-play cards.
 */

.viva-vt {
	--viva-vt-accent: #f5b21c;
	--viva-vt-navy: #0a2a4e;
	font-family: 'Poppins', sans-serif;
	position: relative;
}
/* Optional background overlay (only renders when the overlay control is set,
   which adds `content`). Keeps content above the tint. */
.viva-vt::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.viva-vt-head,
.viva-vt-grid {
	position: relative;
	z-index: 1;
}

/* --- Heading --- */
.viva-vt-head { text-align: center; margin-bottom: 42px; }
.viva-vt-heading {
	margin: 0;
	color: var(--viva-vt-navy);
	font-weight: 800;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	letter-spacing: -0.5px;
}
.viva-vt-underline {
	display: block;
	width: 78px;
	height: 4px;
	margin: 16px auto 0;
	border-radius: 4px;
	background: var(--viva-vt-accent);
}

/* --- Grid --- */
.viva-vt-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: start; /* cards size to content — no stretch whitespace */
}

/* --- Card --- */
.viva-vt-card {
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(7, 31, 59, 0.08);
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}
.viva-vt-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 48px rgba(7, 31, 59, 0.16);
}

/* --- Media (thumbnail button) --- */
.viva-vt-media {
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	padding: 0 0 56.25%; /* robust 16:9 ratio — the fixed height removes the card whitespace */
	border: 0;
	margin: 0;
	background: #0a1a2e;
	cursor: pointer;
	overflow: hidden;
}
.viva-vt-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.viva-vt-card:hover .viva-vt-thumb { transform: scale(1.06); }

.viva-vt-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(7, 31, 59, 0.05) 0%, rgba(7, 31, 59, 0.45) 100%);
	transition: background 0.28s ease;
}
.viva-vt-media:hover .viva-vt-overlay { background: rgba(7, 31, 59, 0.35); }

/* Play button */
.viva-vt-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 66px;
	height: 66px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--viva-vt-accent);
	color: #071f3b;
	box-shadow: 0 8px 22px rgba(245, 178, 28, 0.45);
	transition: transform 0.25s ease, background 0.25s ease;
}
.viva-vt-play svg { width: 30px; height: 30px; margin-left: 3px; }
.viva-vt-media:hover .viva-vt-play {
	transform: translate(-50%, -50%) scale(1.1);
}
/* Soft pulsing ring */
.viva-vt-play::after {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	border: 2px solid rgba(245, 178, 28, 0.5);
	animation: viva-vt-pulse 2.4s ease-out infinite;
}
@keyframes viva-vt-pulse {
	0%   { transform: scale(1); opacity: 0.8; }
	100% { transform: scale(1.35); opacity: 0; }
}

/* --- Loaded iframe --- */
.viva-vt-media iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --- Title --- */
.viva-vt-title {
	padding: 16px 18px 20px;
	color: var(--viva-vt-navy);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- Load more --- */
.viva-vt-card.viva-vt-hidden { display: none; }
.viva-vt-card.viva-vt-reveal { animation: viva-vt-rise 0.5s ease both; }
@keyframes viva-vt-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}
.viva-vt-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 38px;
	position: relative;
	z-index: 1;
}
.viva-vt-subscribe {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 26px;
	border-radius: 999px;
	background: #ff0000;
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	box-shadow: 0 10px 24px rgba(255, 0, 0, 0.28);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.viva-vt-subscribe:hover {
	background: #e60000;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 16px 30px rgba(255, 0, 0, 0.4);
}
.viva-vt-subscribe svg { width: 22px; height: 22px; fill: currentColor; }
.viva-vt-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 34px;
	border: 0;
	border-radius: 999px;
	background: var(--viva-vt-accent);
	color: #071f3b;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(245, 178, 28, 0.30);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.viva-vt-more:hover {
	transform: translateY(-2px);
	background: #e09e0c;
	box-shadow: 0 16px 30px rgba(245, 178, 28, 0.42);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
	.viva-vt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.viva-vt-grid { grid-template-columns: 1fr; }
	.viva-vt-play { width: 58px; height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
	.viva-vt-play::after { animation: none; }
}

/* =====================================================================
   Lightbox modal
   ===================================================================== */
html.viva-vt-lock { overflow: hidden; }

.viva-vt-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	font-family: 'Poppins', sans-serif;
}
.viva-vt-modal.is-open { display: block; }

.viva-vt-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(4, 14, 28, 0.84);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	animation: viva-vt-fade 0.25s ease both;
}

.viva-vt-modal-dialog {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(1000px, 92vw);
	animation: viva-vt-zoom 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.viva-vt-modal-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
}
.viva-vt-modal-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.viva-vt-modal-close {
	position: absolute;
	top: -54px;
	right: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: #f5b21c;
	color: #071f3b;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(245, 178, 28, 0.4);
	transition: transform 0.2s ease, background 0.2s ease;
}
.viva-vt-modal-close:hover { transform: rotate(90deg); background: #ffc63d; }
.viva-vt-modal-close svg { width: 22px; height: 22px; }

/* Prev / next navigation */
.viva-vt-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	color: #fff;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.3);
	cursor: pointer;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.viva-vt-nav:hover { background: #f5b21c; border-color: #f5b21c; color: #071f3b; }
.viva-vt-nav svg { width: 24px; height: 24px; }
.viva-vt-prev { left: -70px; }
.viva-vt-next { right: -70px; }
.viva-vt-modal.viva-vt-single .viva-vt-nav { display: none; }

/* Keep the buttons perfectly round (theme button padding was making them oval)
   and force the icons to render over any global `svg { fill: ... }` rule. */
.viva-vt-modal-close,
.viva-vt-nav {
	box-sizing: border-box;
	padding: 0;
	min-width: 0;
	line-height: 0;
	aspect-ratio: 1 / 1;
	flex: 0 0 auto;
	overflow: visible;
}
.viva-vt-modal-close svg,
.viva-vt-modal-close svg path,
.viva-vt-nav svg,
.viva-vt-nav svg path {
	fill: none !important;
	stroke: currentColor !important;
}

@media (max-width: 900px) {
	/* Move the arrows inside, over the video edges, on smaller screens. */
	.viva-vt-prev { left: 10px; }
	.viva-vt-next { right: 10px; }
	.viva-vt-nav { width: 44px; height: 44px; background: rgba(7, 31, 59, 0.55); }
}

@keyframes viva-vt-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes viva-vt-zoom {
	from { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
	to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (max-width: 600px) {
	.viva-vt-modal-close { top: -48px; width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	.viva-vt-modal-backdrop,
	.viva-vt-modal-dialog { animation: none; }
}