/**
 * Offer Browser Language — Popup Styles
 *
 * Inherits the host site's fonts and accent colour via CSS custom
 * properties set by JS, matching the 352 Consent plugin pattern.
 *
 * @package Offer_Browser_Language
 * @version 3.3.2
 * @author  352 Digital
 */

/* ── CSS Custom Properties (scoped to popup to avoid page-wide repaint) ── */
.obl-popup {
	--obl-primary:       #555555;
	--obl-primary-hover: #333333;
	--obl-text:          #333333;
	--obl-text-light:    #666666;
	--obl-bg:            rgba(255, 255, 255, 0.92);
	--obl-border:        #dddddd;
	--obl-shadow:        0 -2px 16px rgba(0, 0, 0, 0.10);
	--obl-radius:        8px;
	--obl-focus:         #555555;
	--obl-z-index:       999998;
	--obl-body-font:     inherit;
}

/* ── Animations ───────────────────────────────────────────────────── */

@keyframes obl-slide-up {
	from { transform: translateY(100%); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

@keyframes obl-slide-down-out {
	from { transform: translateY(0);    opacity: 1; }
	to   { transform: translateY(100%); opacity: 0; }
}

/* ── Screen Reader Only ───────────────────────────────────────────── */

.obl-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Popup Container ──────────────────────────────────────────────── */

.obl-popup {
	position: fixed;
	bottom: 20px;
	right: 20px;
	max-width: 360px;
	padding: 18px 22px;
	background: var(--obl-bg);
	backdrop-filter: blur(16px) saturate(180%);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	border: 1px solid var(--obl-border);
	border-left: 4px solid var(--obl-primary);
	border-radius: var(--obl-radius);
	box-shadow: var(--obl-shadow);
	z-index: var(--obl-z-index);
	font-family: var(--obl-body-font);
	font-size: 14px;
	line-height: 1.55;
	color: var(--obl-text);

	/* Hidden by default — .obl-popup--visible triggers entrance */
	opacity: 0;
	transform: translateY(100%);
	pointer-events: none;
}

.obl-popup--visible {
	animation: obl-slide-up 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	pointer-events: auto;
}

.obl-popup--hiding {
	animation: obl-slide-down-out 0.25s ease-in forwards;
	pointer-events: none;
}

/* ── Message ──────────────────────────────────────────────────────── */

.obl-popup-message {
	margin: 0 0 14px 0;
	font-family: var(--obl-body-font);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.55;
}

/* ── Actions ──────────────────────────────────────────────────────── */

.obl-popup-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* ── Switch Link (primary action) ─────────────────────────────────── */

.obl-popup-link {
	display: inline-block;
	padding: 8px 16px;
	font-family: var(--obl-body-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: #ffffff;
	background-color: var(--obl-primary);
	border: 1px solid var(--obl-primary);
	border-radius: var(--obl-radius);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.obl-popup-link:hover,
.obl-popup-link:focus {
	background-color: var(--obl-primary-hover);
	border-color: var(--obl-primary-hover);
	color: #ffffff;
	text-decoration: none;
}

.obl-popup-link:focus-visible {
	outline: 2px solid var(--obl-focus);
	outline-offset: 2px;
}

/* ── Close Button (secondary action) ──────────────────────────────── */

.obl-popup-close {
	background: none;
	border: none;
	color: var(--obl-text-light);
	font-family: var(--obl-body-font);
	font-size: 13px;
	padding: 6px 8px;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.15s ease;
}

.obl-popup-close:hover {
	color: var(--obl-text);
}

.obl-popup-close:focus-visible {
	outline: 2px solid var(--obl-focus);
	outline-offset: 2px;
	border-radius: 3px;
}

/* ── Responsive ───────────────────────────────────────────────────── */

@media (max-width: 480px) {
	.obl-popup {
		bottom: 10px;
		right: 10px;
		left: 10px;
		max-width: none;
	}
}

/* ── High Contrast ────────────────────────────────────────────────── */

@media (prefers-contrast: high) {
	.obl-popup {
		border-width: 2px;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: var(--obl-bg);
	}

	.obl-popup-link:focus-visible,
	.obl-popup-close:focus-visible {
		outline-width: 3px;
	}
}

/* ── Reduced Motion ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.obl-popup,
	.obl-popup--visible,
	.obl-popup--hiding {
		animation: none;
		transition: none;
	}

	.obl-popup--visible {
		opacity: 1;
		transform: translateY(0);
	}

	.obl-popup--hiding {
		opacity: 0;
		transform: translateY(0);
	}

	.obl-popup-link,
	.obl-popup-close {
		transition: none;
	}
}

/* ── Print ────────────────────────────────────────────────────────── */

@media print {
	.obl-popup {
		display: none !important;
	}
}