/**
 * SNG Exit Intent — Popup Styles
 *
 * Three popup types: modal · slide-in · fullscreen
 * CSS custom properties set inline by PHP from admin colour settings.
 *
 * @package SNG_Exit_Intent
 * @version 1.0.4
 */

/* ── Custom property fallbacks ────────────────────────────────── */
#sngei-popup-wrapper {
	--sngei-accent:  #2271b1;
	--sngei-text:    #1d2327;
	--sngei-bg:      #ffffff;
	--sngei-radius:  10px;
	--sngei-speed:   0.25s;
	--sngei-ease:    cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* ── Body scroll lock ─────────────────────────────────────────── */
body.sngei-body-locked {
	overflow: hidden;
}

/* ── Wrapper — hidden by default ──────────────────────────────── */
.sngei-popup-wrapper {
	display:  none;
	position: fixed;
	inset:    0;
	z-index:  2147483647; /* max safe z-index */
	isolation: isolate;
}

.sngei-popup-wrapper.sngei-is-open {
	display: block !important;
}

/* ── Backdrop ─────────────────────────────────────────────────── */
.sngei-backdrop {
	position:   fixed;
	inset:      0;
	background: rgba(0, 0, 0, 0.6);
	opacity:    0;
	transition: opacity var(--sngei-speed) ease;
}

.sngei-is-open .sngei-backdrop {
	opacity: 1;
}

/* Slide-in doesn't dim the page */
.sngei-type-slide-in .sngei-backdrop {
	display: none;
}

/* ════════════════════════════════════════════════════════════════
   MODAL — centred overlay
   ════════════════════════════════════════════════════════════════ */

.sngei-type-modal .sngei-panel {
	position:      fixed;
	top:           50%;
	left:          50%;
	z-index:       2147483647;
	transform:     translate(-50%, -46%) scale(0.95);
	opacity:       0;
	transition:
		transform var(--sngei-speed) var(--sngei-ease),
		opacity   var(--sngei-speed) ease;

	background:    var(--sngei-bg);
	color:         var(--sngei-text);
	border-radius: var(--sngei-radius);
	box-shadow:    0 12px 48px rgba(0, 0, 0, 0.22);

	width:         min(500px, 94vw);
	max-height:    90vh;
	overflow-y:    auto;
	padding:       40px 36px 36px;
	outline:       none;
}

.sngei-type-modal.sngei-is-open .sngei-panel {
	transform: translate(-50%, -50%) scale(1);
	opacity:   1;
}

/* ════════════════════════════════════════════════════════════════
   SLIDE-IN — bottom-right corner
   ════════════════════════════════════════════════════════════════ */

.sngei-type-slide-in .sngei-panel {
	position:      fixed;
	bottom:        28px;
	right:         28px;
	transform:     translateY(20px);
	opacity:       0;
	transition:
		transform var(--sngei-speed) var(--sngei-ease),
		opacity   var(--sngei-speed) ease;

	background:    var(--sngei-bg);
	color:         var(--sngei-text);
	border-radius: var(--sngei-radius);
	box-shadow:    0 8px 36px rgba(0, 0, 0, 0.18);

	width:         min(360px, calc(100vw - 32px));
	max-height:    calc(100vh - 56px);
	overflow-y:    auto;
	padding:       32px 28px 28px;
	outline:       none;
}

.sngei-type-slide-in.sngei-is-open .sngei-panel {
	transform: translateY(0);
	opacity:   1;
}

/* ════════════════════════════════════════════════════════════════
   FULLSCREEN
   ════════════════════════════════════════════════════════════════ */

.sngei-type-fullscreen .sngei-backdrop {
	display: none;
}

.sngei-type-fullscreen .sngei-panel {
	position:       fixed;
	inset:          0;
	display:        flex;
	flex-direction: column;
	align-items:    center;
	justify-content: center;
	padding:        48px 24px;
	overflow-y:     auto;

	background: var(--sngei-bg);
	color:      var(--sngei-text);

	opacity:    0;
	transform:  scale(0.98);
	transition:
		opacity   var(--sngei-speed) ease,
		transform var(--sngei-speed) ease;
	outline: none;
}

.sngei-type-fullscreen.sngei-is-open .sngei-panel {
	opacity:   1;
	transform: scale(1);
}

/* Centre content in fullscreen */
.sngei-type-fullscreen .sngei-headline,
.sngei-type-fullscreen .sngei-description,
.sngei-type-fullscreen .sngei-coupon,
.sngei-type-fullscreen .sngei-content {
	max-width: 520px;
	width:     100%;
	text-align: center;
}

.sngei-type-fullscreen .sngei-form {
	text-align: left;
}

/* ════════════════════════════════════════════════════════════════
   PANEL CONTENT
   ════════════════════════════════════════════════════════════════ */

/* Close button */
.sngei-close {
	position:   absolute;
	top:        14px;
	right:      14px;
	width:      32px;
	height:     32px;
	display:    flex;
	align-items: center;
	justify-content: center;
	padding:    0;
	background: transparent;
	border:     none;
	border-radius: 50%;
	color:      #8c8f94;
	cursor:     pointer;
	transition: background 0.15s ease, color 0.15s ease;
	line-height: 1;
}

.sngei-close:hover {
	background: #f0f0f1;
	color:      #1d2327;
}

.sngei-close:focus-visible {
	outline:        2px solid var(--sngei-accent);
	outline-offset: 2px;
}

/* Headline */
.sngei-headline {
	margin:      0 0 10px;
	padding-right: 32px;   /* avoid overlap with close btn */
	font-size:   1.4rem;
	font-weight: 700;
	line-height: 1.25;
	color:       var(--sngei-text);
}

/* Description */
.sngei-description {
	margin:      0 0 16px;
	font-size:   0.9375rem;
	line-height: 1.6;
	color:       var(--sngei-text);
	opacity:     0.75;
}

/* Content area */
.sngei-content {
	margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════════
   FORM STYLES (email + phone modes)
   ════════════════════════════════════════════════════════════════ */

.sngei-form {
	display:        flex;
	flex-direction: column;
	gap:            14px;
}

.sngei-field {
	display:        flex;
	flex-direction: column;
	gap:            5px;
}

.sngei-label {
	font-size:   0.8125rem;
	font-weight: 600;
	color:       var(--sngei-text);
}

.sngei-input {
	width:        100%;
	padding:      10px 12px;
	border:       1px solid #c3c4c7;
	border-radius: 5px;
	font-size:    0.9375rem;
	color:        var(--sngei-text);
	background:   #fff;
	box-sizing:   border-box;
	transition:   border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
}

.sngei-input:focus {
	border-color: var(--sngei-accent);
	box-shadow:   0 0 0 2px color-mix(in srgb, var(--sngei-accent) 22%, transparent);
	outline:      none;
}

.sngei-submit {
	margin-top:    4px;
	padding:       12px 20px;
	background:    var(--sngei-accent);
	color:         #fff;
	border:        none;
	border-radius: 5px;
	font-size:     1rem;
	font-weight:   600;
	cursor:        pointer;
	width:         100%;
	transition:    opacity 0.15s ease, transform 0.1s ease;
}

.sngei-submit:hover {
	opacity: 0.88;
}

.sngei-submit:active {
	transform: scale(0.98);
}

.sngei-submit:focus-visible {
	outline:        2px solid var(--sngei-accent);
	outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════
   COUPON — zip mode only, with clipboard copy
   ════════════════════════════════════════════════════════════════ */

.sngei-coupon {
	display:        inline-flex;
	align-items:    center;
	gap:            8px;
	margin-bottom:  20px;
	padding:        10px 16px;
	background:     color-mix(in srgb, var(--sngei-accent) 10%, transparent);
	border:         1px dashed var(--sngei-accent);
	border-radius:  5px;
	font-size:      0.9rem;
	font-weight:    600;
	color:          var(--sngei-accent);
	box-sizing:     border-box;
}

/* Scenario A — full-width display badge, no interaction */
.sngei-coupon--display {
	width:          100%;
	justify-content: center;
	cursor:         default;
	user-select:    text;
}





/* ════════════════════════════════════════════════════════════════
   FORM — Phase 3 states (errors, loading, success)
   ════════════════════════════════════════════════════════════════ */

/* Field error text */
.sngei-field-error {
	display:    block;
	font-size:  0.75rem;
	color:      #d63638;
	margin-top: 4px;
	min-height: 1em;
	transition: opacity 0.15s ease;
}

/* Input error state */
.sngei-input--error {
	border-color: #d63638 !important;
	box-shadow:   0 0 0 2px rgba(214, 54, 56, 0.15) !important;
}

/* Form-level error (network / server) */
.sngei-form-error {
	display:       none;
	padding:       10px 12px;
	background:    #fdf0f0;
	border-left:   3px solid #d63638;
	border-radius: 3px;
	font-size:     0.8125rem;
	color:         #8a1f20;
	margin-bottom: 4px;
}

.sngei-form-error--visible {
	display: block;
}

/* Submit button loading state */
.sngei-submit {
	position: relative;
}

.sngei-submit-label {
	transition: opacity 0.15s ease;
}

.sngei-submit-spinner {
	position:   absolute;
	inset:      0;
	display:    flex;
	align-items: center;
	justify-content: center;
	opacity:    0;
	transition: opacity 0.15s ease;
}

.sngei-submit-spinner::after {
	content:       '';
	width:         18px;
	height:        18px;
	border:        2px solid rgba(255,255,255,0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation:     sngei-spin 0.7s linear infinite;
}

@keyframes sngei-spin {
	to { transform: rotate(360deg); }
}

.sngei-submit--loading {
	cursor: not-allowed;
	opacity: 0.85;
}

/* Success state */
.sngei-success {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	text-align:      center;
	padding:         20px 0 8px;
	gap:             14px;
	animation:       sngei-fadein 0.3s ease;
}

@keyframes sngei-fadein {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.sngei-success-icon {
	color: #00a32a;
}

.sngei-success-message {
	font-size:   1rem;
	font-weight: 600;
	color:       var(--sngei-text);
	margin:      0;
	line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════
   ZIP MODE
   ════════════════════════════════════════════════════════════════ */

.sngei-mode-zip {
	/* Shortcode styles are self-contained; nothing needed here */
}

/* ════════════════════════════════════════════════════════════════
   MOBILE
   ════════════════════════════════════════════════════════════════ */

@media ( max-width: 600px ) {

	/* Modal → slides up from bottom on mobile */
	.sngei-type-modal .sngei-panel {
		top:           auto;
		left:          0;
		right:         0;
		bottom:        0;
		transform:     translateY(24px);
		opacity:       0;
		border-radius: var(--sngei-radius) var(--sngei-radius) 0 0;
		width:         100%;
		max-height:    88vh;
		padding:       28px 20px 36px;
	}

	.sngei-type-modal.sngei-is-open .sngei-panel {
		transform: translateY(0);
		opacity:   1;
	}

	/* Slide-in → full-width bottom sheet */
	.sngei-type-slide-in .sngei-panel {
		bottom:        0;
		right:         0;
		left:          0;
		width:         100%;
		border-radius: var(--sngei-radius) var(--sngei-radius) 0 0;
	}

	.sngei-headline {
		font-size: 1.2rem;
	}
}

/* ════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════════════════════════════ */

@media ( prefers-reduced-motion: reduce ) {
	.sngei-panel,
	.sngei-backdrop {
		transition: opacity var(--sngei-speed) ease !important;
		transform:  none !important;
	}

	.sngei-is-open .sngei-panel {
		transform: none !important;
		opacity:   1 !important;
	}
}

/* ════════════════════════════════════════════════════════════════
   ZIP SCENARIO B — Apply Coupon UI
   ════════════════════════════════════════════════════════════════ */

.sngei-mode-zip-b {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	text-align:     center;
	gap:            12px;
	padding:        4px 0;
}

.sngei-zip-b-hint {
	font-size:   0.875rem;
	color:       var(--sngei-text);
	opacity:     0.7;
	margin:      0;
	line-height: 1.5;
}

.sngei-zip-b-code {
	font-size:      1.3rem;
	font-weight:    800;
	letter-spacing: 0.1em;
	color:          var(--sngei-accent);
	background:     color-mix(in srgb, var(--sngei-accent) 10%, transparent);
	border:         2px dashed var(--sngei-accent);
	border-radius:  6px;
	padding:        10px 24px;
	width:          100%;
	box-sizing:     border-box;
}

.sngei-zip-b-apply {
	width: 100%;
}

.sngei-zip-b-applied {
	font-size:   0.875rem;
	color:       #00a32a;
	font-weight: 600;
	margin:      0;
}

/* ── Coupon pulse animation (applied to #coupon_code on the page) ── */

@keyframes sngei-pulse-green {
	0%   { box-shadow: 0 0 0 0   rgba(0, 163, 42, 0.6); border-color: #00a32a; }
	50%  { box-shadow: 0 0 0 6px rgba(0, 163, 42, 0);   border-color: #00a32a; }
	100% { box-shadow: 0 0 0 0   rgba(0, 163, 42, 0);   border-color: inherit; }
}

.sngei-coupon-pulse {
	animation:    sngei-pulse-green 0.7s ease 2 !important;
	border-color: #00a32a !important;
	outline:      none !important;
}

/* ── SMS consent checkbox ─────────────────────────────────────── */

.sngei-field--consent {
	margin-top: 4px;
}

.sngei-consent-label {
	display:     flex;
	align-items: flex-start;
	gap:         10px;
	cursor:      pointer;
	line-height: 1.5;
}

.sngei-consent-label input[type="checkbox"] {
	flex-shrink:  0;
	margin-top:   3px;
	width:        16px;
	height:       16px;
	accent-color: var(--sngei-accent);
	cursor:       pointer;
}

.sngei-consent-label span {
	font-size: 0.75rem;
	color:     color-mix(in srgb, var(--sngei-text) 70%, transparent);
	line-height: 1.5;
}