/* ==========================================================
   Simple Home Popup Slider – Styles (v1.2.0)
   File: assets/css/shps-style.css
   ========================================================== */

/* ---------- Overlay (dark, semi-transparent) ---------- */
.shps-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, 0.75);
	opacity: 0;
	transition: opacity 0.25s ease;
	box-sizing: border-box;
}
.shps-overlay[hidden] { display: none !important; }
.shps-overlay.is-open { opacity: 1; }
.shps-overlay *, .shps-overlay *::before, .shps-overlay *::after { box-sizing: border-box; }

/* Prevent page scroll while the popup is open */
html.shps-lock, html.shps-lock body { overflow: hidden; }

/* ---------- Popup box (centered, responsive) ----------
   Width comes from --shps-w (set in PHP: 600px by default, or custom).
   Close button and arrows live directly inside this box, so they stay
   fixed on the popup (vertical centre) even if a tall image scrolls. */
.shps-box {
	position: relative;
	width: 100%;
	max-width: var(--shps-w, 600px);
	transform: translateY(12px) scale(0.98);
	transition: transform 0.25s ease;
}
.shps-overlay.is-open .shps-box { transform: none; }

/* Scrolls internally if an image is taller than the screen */
.shps-inner {
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

/* ---------- Close (X) – transparent, only border + cross ---------- */
.shps-overlay .shps-close {
	position: absolute !important;
	top: 10px !important;
	right: 10px !important;
	left: auto !important;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
	border-radius: 50%;
	background: transparent !important;
	box-shadow: none !important;
	color: #fff;
	cursor: pointer;
	line-height: 1;
	opacity: 0.8;
	-webkit-appearance: none;
	appearance: none;
	/* subtle dark edge so it stays visible on light images */
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7));
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.shps-overlay .shps-close:hover,
.shps-overlay .shps-close:focus,
.shps-overlay .shps-close:active {
	opacity: 1;
	background: transparent !important;
	color: #fff;
	transform: scale(1.08);
	outline: none;
}
.shps-overlay .shps-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Slider ---------- */
.shps-stage { position: relative; }

.shps-viewport {
	overflow: hidden;
	border-radius: 10px;
	transition: height 0.35s ease; /* JS sets height to the active slide (auto mode) */
}
.shps-track {
	display: flex;
	align-items: flex-start;
	transition: transform 0.5s ease;
	will-change: transform;
}
.shps-slide {
	position: relative;
	flex: 0 0 100%;
	min-width: 0;
}
.shps-slide__inner {
	display: block;
	position: relative;
	color: inherit;
	text-decoration: none;
	box-shadow: none;
}

/* Image fits popup width; height scales proportionally (auto mode) */
.shps-img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	border: 0;
	border-radius: 0;
}

/* ---------- Custom fixed height (only when a height is set in admin) ---------- */
.shps-fixed .shps-viewport { height: var(--shps-h); max-height: calc(100vh - 32px); transition: none; }
.shps-fixed .shps-track { align-items: stretch; height: 100%; }
.shps-fixed .shps-slide,
.shps-fixed .shps-slide__inner { height: 100%; }
.shps-fixed .shps-img { height: 100%; object-fit: cover; }

/* ---------- Prev / Next arrows – vertical centre of the popup,
   left arrow on the left edge, right arrow on the right edge.
   Transparent: only border + arrow icon. ---------- */
.shps-overlay .shps-arrow {
	position: absolute !important;
	top: 50% !important;
	bottom: auto !important;
	margin: 0 !important;
	transform: translateY(-50%);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
	border-radius: 50%;
	background: transparent !important;
	box-shadow: none !important;
	color: #fff;
	cursor: pointer;
	line-height: 1;
	opacity: 0.75;
	-webkit-appearance: none;
	appearance: none;
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7));
	transition: opacity 0.2s ease;
}
.shps-overlay .shps-prev { left: 10px !important; right: auto !important; }
.shps-overlay .shps-next { right: 10px !important; left: auto !important; }
.shps-overlay .shps-arrow:hover,
.shps-overlay .shps-arrow:focus,
.shps-overlay .shps-arrow:active {
	opacity: 1;
	background: transparent !important;
	color: #fff;
	transform: translateY(-50%);
	outline: none;
}
.shps-overlay .shps-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Text overlay at the bottom of each slide ---------- */
.shps-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 56px 22px 20px;
	color: #fff;
	text-align: left;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0) 100%);
}
.shps-title {
	margin: 0 0 6px;
	padding: 0;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}
.shps-desc {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
}
.shps-btn {
	display: inline-block;
	margin-top: 12px;
	padding: 8px 18px;
	border-radius: 4px;
	background: #fff;
	color: #111;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
}
.shps-slide__inner:hover .shps-btn { background: #f2f2f2; }

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
	.shps-overlay { padding: 10px; }
	.shps-inner { max-height: calc(100vh - 20px); }
	.shps-fixed .shps-viewport { max-height: calc(100vh - 20px); }
	.shps-caption { padding: 40px 14px 14px; }
	.shps-title { font-size: 1rem; }
	.shps-desc { font-size: 0.8125rem; }
	.shps-btn { margin-top: 8px; padding: 6px 14px; }
	.shps-overlay .shps-arrow { width: 32px; height: 32px; }
	.shps-overlay .shps-prev { left: 6px !important; }
	.shps-overlay .shps-next { right: 6px !important; }
}

/* ---------- Respect reduced-motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
	.shps-overlay, .shps-box, .shps-track, .shps-viewport { transition: none; }
}