/**
 * SchoolDXP Popups — Frontend Styles
 *
 * Covers all four popup styles:
 *   .schooldxp-popup--modal          Centred overlay modal
 *   .schooldxp-popup--banner-top     Full-width top banner
 *   .schooldxp-popup--banner-bottom  Full-width bottom banner
 *   .schooldxp-popup--slide-in       Bottom-right slide-in card
 *
 * All popups share a base state of display:none (set inline by PHP).
 * The JS adds the --visible modifier class to reveal them.
 * CSS transitions handle the enter/exit animation.
 *
 * Colours and font come from --schooldxp-popup-* custom properties, written
 * out per-site by SchoolDXP_Popups::get_theme_style_css() from the active
 * WordPress theme's own palette/typography. The literal values below are
 * fallbacks only — they apply when a theme exposes nothing detectable, and
 * keep every var() self-documenting about what it's for.
 */

/* =========================================================================
   Base
   ========================================================================= */

.schooldxp-popup {
	box-sizing: border-box;
	font-family: var(--schooldxp-popup-font, inherit);
	font-size: 16px;
	line-height: 1.5;
	color: var(--schooldxp-popup-text, #333);
}

.schooldxp-popup *,
.schooldxp-popup *::before,
.schooldxp-popup *::after {
	box-sizing: inherit;
}

/* =========================================================================
   Modal — centred full-page overlay
   ========================================================================= */

.schooldxp-popup--modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.schooldxp-popup--modal.schooldxp-popup--visible {
	opacity: 1;
	visibility: visible;
}

.schooldxp-popup--modal .schooldxp-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
}

/* Overlay darkness is deliberately fixed (not theme-derived) — it sits
   behind every theme's content, not on top of it, so there's no theme
   colour it should be matching. */

.schooldxp-popup--modal .schooldxp-popup__container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100%;
	padding: 20px;
}

.schooldxp-popup--modal .schooldxp-popup__inner {
	position: relative;
	background: var(--schooldxp-popup-bg, #fff);
	border-radius: var(--schooldxp-popup-radius, 8px);
	max-width: 680px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
	transform: scale(0.92) translateY(12px);
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.schooldxp-popup--modal.schooldxp-popup--visible .schooldxp-popup__inner {
	transform: scale(1) translateY(0);
}

.schooldxp-popup--modal .schooldxp-popup__body {
	padding: 40px 36px 32px;
}

/* =========================================================================
   Banner — Top
   ========================================================================= */

.schooldxp-popup--banner-top {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999999;
	opacity: 0;
	transform: translateY(-100%);
	transition: opacity 0.3s ease, transform 0.35s ease;
}

.schooldxp-popup--banner-top.schooldxp-popup--visible {
	opacity: 1;
	transform: translateY(0);
}

.schooldxp-popup--banner-top .schooldxp-popup__container {
	position: relative;
	background: var(--schooldxp-popup-accent, #1a73e8);
	color: var(--schooldxp-popup-accent-text, #fff);
}

.schooldxp-popup--banner-top .schooldxp-popup__body {
	padding: 14px 52px 14px 24px;
}

/* =========================================================================
   Banner — Bottom
   ========================================================================= */

.schooldxp-popup--banner-bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999999;
	opacity: 0;
	transform: translateY(100%);
	transition: opacity 0.3s ease, transform 0.35s ease;
}

.schooldxp-popup--banner-bottom.schooldxp-popup--visible {
	opacity: 1;
	transform: translateY(0);
}

.schooldxp-popup--banner-bottom .schooldxp-popup__container {
	position: relative;
	background: var(--schooldxp-popup-accent, #1a73e8);
	color: var(--schooldxp-popup-accent-text, #fff);
}

.schooldxp-popup--banner-bottom .schooldxp-popup__body {
	padding: 14px 52px 14px 24px;
}

/* =========================================================================
   Slide-In — bottom-right card
   ========================================================================= */

.schooldxp-popup--slide-in {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 999999;
	opacity: 0;
	transform: translateY(30px) scale(0.95);
	transition: opacity 0.3s ease, transform 0.35s ease;
	pointer-events: none;
}

.schooldxp-popup--slide-in.schooldxp-popup--visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.schooldxp-popup--slide-in .schooldxp-popup__inner {
	position: relative;
	background: var(--schooldxp-popup-bg, #fff);
	border-radius: var(--schooldxp-popup-radius, 10px);
	max-width: 340px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.schooldxp-popup--slide-in .schooldxp-popup__body {
	padding: 24px 20px 20px;
}

/* =========================================================================
   Image styles — Full-Width Image, and Text/Image 50-50 splits
   ========================================================================= */

.schooldxp-popup--image-full,
.schooldxp-popup--image-right,
.schooldxp-popup--image-left {
	position: fixed;
	inset: 0;
	z-index: 999999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.schooldxp-popup--image-full.schooldxp-popup--visible,
.schooldxp-popup--image-right.schooldxp-popup--visible,
.schooldxp-popup--image-left.schooldxp-popup--visible {
	opacity: 1;
	visibility: visible;
}

.schooldxp-popup--image-full .schooldxp-popup__overlay,
.schooldxp-popup--image-right .schooldxp-popup__overlay,
.schooldxp-popup--image-left .schooldxp-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
}

.schooldxp-popup--image-full .schooldxp-popup__container,
.schooldxp-popup--image-right .schooldxp-popup__container,
.schooldxp-popup--image-left .schooldxp-popup__container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100%;
	padding: 20px;
}

.schooldxp-popup--image-full .schooldxp-popup__inner,
.schooldxp-popup--image-right .schooldxp-popup__inner,
.schooldxp-popup--image-left .schooldxp-popup__inner {
	position: relative;
	background: var(--schooldxp-popup-bg, #fff);
	border-radius: var(--schooldxp-popup-radius, 8px);
	width: 100%;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
	transform: scale(0.92) translateY(12px);
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.schooldxp-popup--image-full.schooldxp-popup--visible .schooldxp-popup__inner,
.schooldxp-popup--image-right.schooldxp-popup--visible .schooldxp-popup__inner,
.schooldxp-popup--image-left.schooldxp-popup--visible .schooldxp-popup__inner {
	transform: scale(1) translateY(0);
}

/* Full-width image: no title/content — the image is the entire popup. */
.schooldxp-popup--image-full .schooldxp-popup__inner {
	max-width: 680px;
	max-height: 90vh;
}

.schooldxp-popup--image-full .schooldxp-popup__media {
	display: block;
	line-height: 0;
}

.schooldxp-popup--image-full .schooldxp-popup__media img {
	width: 100%;
	max-height: 90vh;
	display: block;
	object-fit: cover;
}

/* Split layouts: image fills one half at full height, text fills the other.
   Which side the image lands on comes from DOM order (rendered by PHP),
   not from CSS — image-right prints body-then-media, image-left the reverse. */
.schooldxp-popup--image-right .schooldxp-popup__inner,
.schooldxp-popup--image-left .schooldxp-popup__inner {
	display: flex;
	max-width: 760px;
	min-height: 320px;
	max-height: 90vh;
}

.schooldxp-popup--image-right .schooldxp-popup__body,
.schooldxp-popup--image-left .schooldxp-popup__body {
	width: 50%;
	padding: 40px 36px;
	overflow-y: auto;
}

.schooldxp-popup--image-right .schooldxp-popup__media,
.schooldxp-popup--image-left .schooldxp-popup__media {
	width: 50%;
	display: block;
	line-height: 0;
	flex-shrink: 0;
}

.schooldxp-popup--image-right .schooldxp-popup__media img,
.schooldxp-popup--image-left .schooldxp-popup__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Close button sits directly on the image in these styles, so it needs its
   own contrast rather than inheriting theme text colour. */
.schooldxp-popup--image-full .schooldxp-popup__close,
.schooldxp-popup--image-right .schooldxp-popup__close,
.schooldxp-popup--image-left .schooldxp-popup__close {
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	opacity: 0.85;
}

/* =========================================================================
   Close button — common to all styles
   ========================================================================= */

.schooldxp-popup__close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: transparent;
	border: none;
	cursor: pointer;
	font-size: 26px;
	line-height: 1;
	color: inherit;
	opacity: 0.55;
	padding: 4px;
	transition: opacity 0.2s;
	z-index: 1;
}

.schooldxp-popup__close:hover {
	opacity: 1;
}

/* Banners: close sits flush with the banner background */
.schooldxp-popup--banner-top .schooldxp-popup__close,
.schooldxp-popup--banner-bottom .schooldxp-popup__close {
	top: 50%;
	transform: translateY(-50%);
	right: 16px;
	color: var(--schooldxp-popup-accent-text, #fff);
}

/* =========================================================================
   CTA button — whole-popup link (rendered below the popup's content when a
   Link URL is set on the popup itself; see includes/class-popups.php
   $cta_url — not to be confused with the image's own click-through
   $link_url, which wraps .schooldxp-popup__media instead). Background uses
   the same accent colour already used by banners/content links, so it
   inherits theme detection / per-popup Colours & Font overrides for free.
   Text/icon colour is a fixed white — always readable against the accent
   background, and not dependent on theme detection resolving a usable
   accent-text value.

   Two shapes, chosen per-popup (Call to Action → Style):
     --icon  circular badge, arrow only (default)
     --pill  rounded button with the CTA's own label text + trailing arrow
   ========================================================================= */

.schooldxp-popup__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
	border-radius: 999px;
	background: var(--schooldxp-popup-accent, #1a73e8);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	transition: filter 0.15s;
}

.schooldxp-popup__cta:hover {
	filter: brightness(90%);
}

.schooldxp-popup__cta svg {
	display: block;
	width: 18px;
	height: 10px;
	flex-shrink: 0;
}

.schooldxp-popup__cta--icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
}

.schooldxp-popup__cta--pill {
	padding: 12px 22px;
}

/* image-full has no .schooldxp-popup__body to sit inside — centre it under
   the image instead of left-aligning it like the text-flow default above. */
.schooldxp-popup--image-full .schooldxp-popup__cta {
	display: flex;
	width: fit-content;
	margin: 16px auto;
}

/* =========================================================================
   Body content resets
   ========================================================================= */

/* The host theme's own CSS almost always sets `color` directly on <p> (and
   other content tags) — e.g. a plain "p { color: #333 }" reset. A direct
   rule on the element itself always wins over the inherited value from
   .schooldxp-popup, regardless of specificity, so relying on inheritance
   alone silently loses the popup's own text colour to whatever theme it's
   embedded in. !important guarantees the popup's own colour choice (an
   override or the theme-detected default) always wins instead — this is a
   self-contained overlay injected via wp_footer, not part of the page's own
   content flow, so it should never take on the surrounding page's styling. */
.schooldxp-popup__body,
.schooldxp-popup__body * {
	color: inherit !important;
}

.schooldxp-popup__body p           { margin-top: 0; margin-bottom: 1em; }
.schooldxp-popup__body p:last-child { margin-bottom: 0; }

.schooldxp-popup__body a {
	/* Needs !important too — otherwise it loses to the .schooldxp-popup__body *
	   rule above by the normal !important-beats-everything rule, regardless
	   of this being the more specific selector. */
	color: var(--schooldxp-popup-accent, #1a73e8) !important;
	text-decoration: underline;
}

.schooldxp-popup__body img {
	max-width: 100%;
	height: auto;
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 600px) {
	.schooldxp-popup--modal .schooldxp-popup__inner {
		max-width: 100%;
	}

	.schooldxp-popup--modal .schooldxp-popup__body {
		padding: 28px 20px 24px;
	}

	.schooldxp-popup--slide-in {
		bottom: 0;
		right: 0;
		left: 0;
	}

	.schooldxp-popup--slide-in .schooldxp-popup__inner {
		max-width: 100%;
		border-radius: var(--schooldxp-popup-radius, 10px) var(--schooldxp-popup-radius, 10px) 0 0;
	}

	.schooldxp-popup--image-full .schooldxp-popup__inner {
		max-width: 100%;
	}

	/* Split layouts stack: image on top (fixed height), text below, full width. */
	.schooldxp-popup--image-right .schooldxp-popup__inner,
	.schooldxp-popup--image-left .schooldxp-popup__inner {
		flex-direction: column;
		max-width: 100%;
		max-height: 90vh;
		overflow-y: auto;
	}

	.schooldxp-popup--image-right .schooldxp-popup__inner {
		flex-direction: column-reverse; /* body prints first in DOM; flip so the image is still on top */
	}

	.schooldxp-popup--image-right .schooldxp-popup__body,
	.schooldxp-popup--image-left .schooldxp-popup__body,
	.schooldxp-popup--image-right .schooldxp-popup__media,
	.schooldxp-popup--image-left .schooldxp-popup__media {
		width: 100%;
	}

	.schooldxp-popup--image-right .schooldxp-popup__media,
	.schooldxp-popup--image-left .schooldxp-popup__media {
		height: 180px;
		flex-shrink: 0;
	}

	.schooldxp-popup--image-right .schooldxp-popup__body,
	.schooldxp-popup--image-left .schooldxp-popup__body {
		padding: 24px 20px;
	}
}