/*
 * RRPS Video play button — [rrps_video_play].
 *
 * Only the trigger is styled here. The modal overlay is built by
 * assets/js/video-modal.js on first click, and its styles are injected by that
 * script too: they must survive FlyingPress "Remove Unused CSS", which keeps
 * only rules that match the page at scan time (the modal is not on the page).
 */

.rrps-vp {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1 1 auto;
	align-self: stretch;
	align-items: center;
	justify-content: center;
	min-height: 0;
}

.rrps-vp--inline {
	flex: 0 0 auto;
	align-self: auto;
}

/*
 * Elementor wraps the shortcode in a widget div. For the button to centre in
 * the space it is given (e.g. between the top of the home "Who We Are" photo
 * and the stats box), that wrapper and the shortcode div must stretch too.
 */
.elementor-widget:has(> .elementor-shortcode > .rrps-vp:not(.rrps-vp--inline)) {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-self: stretch;
	min-height: 0;
	margin: 0;
}

.elementor-widget:has(> .elementor-shortcode > .rrps-vp:not(.rrps-vp--inline)) > .elementor-shortcode {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

.rrps-vp__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	color: var(--rrps-navy);
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.rrps-vp__btn:focus-visible {
	outline: 2px solid var(--rrps-teal-light);
	outline-offset: 4px;
}

/* Soft ring that breathes outward behind the disc. */
.rrps-vp__pulse {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	animation: rrps-vp-pulse 2.4s ease-out infinite;
}

.rrps-vp__disc {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 12px 32px rgba(14, 43, 71, 0.28);
	transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

/* Optical centring: a play triangle reads centred when nudged right. */
.rrps-vp__disc svg {
	margin-left: 4px;
}

.rrps-vp__btn:hover .rrps-vp__disc,
.rrps-vp__btn:focus-visible .rrps-vp__disc {
	transform: scale(1.06);
	background: var(--rrps-navy);
	color: #fff;
}

.rrps-vp__notice {
	padding: 8px 12px;
	border-radius: 8px;
	background: #fff3cd;
	color: #6b4f00;
	font-size: 14px;
}

@keyframes rrps-vp-pulse {
	0% {
		transform: scale(1);
		opacity: 0.8;
	}

	100% {
		transform: scale(1.7);
		opacity: 0;
	}
}

@media (max-width: 767px) {
	.rrps-vp__btn {
		width: 72px;
		height: 72px;
	}

	.rrps-vp__disc svg {
		width: 26px;
		height: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rrps-vp__pulse {
		animation: none;
		opacity: 0;
	}

	.rrps-vp__disc {
		transition: none;
	}
}