/**
 * GreenPower Dealer Day Popup — front-end styles.
 *
 * Every class is prefixed with gpf- to avoid theme collisions.
 * Close-button colours are set inline from the admin settings (see the
 * #gpf-dealer-popup-inline <style> block printed in the footer).
 */

/* Full-viewport overlay. */
.gpf-popup-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba( 0, 0, 0, 0.7 );
	box-sizing: border-box;
	opacity: 0;
	transition: opacity 0.25s ease;
}

/* Hidden until JS reveals it; [hidden] keeps it out before JS runs. */
.gpf-popup-overlay[hidden] {
	display: none;
}

/* Fade-in state toggled by JS. */
.gpf-popup-overlay.gpf-is-visible {
	opacity: 1;
}

/* Centred container holding the image and the close button. */
.gpf-popup-box {
	position: relative;
	/* Clamp the box so it never overflows and leaves room for the close
	   button that sits at top: -16px; right: -16px. */
	max-width: min( 90vw, 900px );
	margin: 16px;
	line-height: 0;
}

/* The link / picture wrappers should not introduce extra inline spacing. */
.gpf-popup-link,
.gpf-popup-box picture {
	display: block;
	line-height: 0;
}

/* Responsive image — scales down on small screens, never overflows. */
.gpf-popup-image {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

/* Circular close button, sitting just outside the top-right corner. */
.gpf-popup-close {
	position: absolute;
	top: -16px;
	right: -16px;
	width: 34px;
	height: 34px;
	padding: 0;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.4 );
	/* background + color are set inline from settings. */
}

/* Build the × from two rotated bars so no icon font/SVG is needed. */
.gpf-popup-close::before,
.gpf-popup-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 2px;
	/* background colour is set inline from the cross colour setting. */
}

.gpf-popup-close::before {
	transform: translate( -50%, -50% ) rotate( 45deg );
}

.gpf-popup-close::after {
	transform: translate( -50%, -50% ) rotate( -45deg );
}

.gpf-popup-close:focus {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* On very small viewports, pull the box in so the close button stays
   on-screen and tappable. */
@media ( max-width: 480px ) {
	.gpf-popup-box {
		margin: 24px;
		max-width: calc( 100vw - 48px );
	}
}