/**
 * WEPRO Accessibility — LUXURY polish (frontend)
 * Couture warm palette applied on top of the base widget CSS.
 * All accessibility modes (high-contrast, reduce-motion, dyslexic font)
 * still win via their own override rules — this layer is purely cosmetic.
 */

/* ─── Root palette — platinum pearl ─── */
.wepro-acc-widget {
	/* Kept the --lux-gold-* token names to avoid churning the rest of this
	   stylesheet, but re-tuned to platinum/pearl neutrals. */
	--lux-gold-hi:    #E8D5C4;
	--lux-gold:       #BFA493;
	--lux-gold-mid:   #A08676;
	--lux-gold-deep:  #6E5A4C;
	--lux-cream:      #F5EFE8;
	--lux-cream-soft: #E4D9CC;
	--lux-ivory:      #FBF7F2;
	--lux-ink:        #14161A;
	--lux-ink-soft:   rgba(20, 22, 26, 0.72);
	--lux-ink-faint:  rgba(20, 22, 26, 0.48);
	--lux-hairline:      rgba(60, 65, 72, 0.22);
	--lux-hairline-soft: rgba(60, 65, 72, 0.10);

	/* Re-map existing widget tokens so buttons/borders inherit platinum.
	 *
	 * These are declared at .wepro-acc-widget scope, which is a NEARER declaring
	 * ancestor than :root. A custom property resolves from the nearest ancestor
	 * that declares it, so a bare value here silently beat every :root source —
	 * the admin "Icon Color" setting emitted by Toolbar::enqueue_styles(), the
	 * Design-Tokens --wdt-color-primary chain, and Avada's --primary_color — no
	 * matter which stylesheet loaded last. That made a documented admin field
	 * inert on every tenant that set it.
	 *
	 * The fix is a fallback rather than an override: --wepro-acc-brand is emitted
	 * at :root ONLY when a tenant has explicitly configured a valid Icon Color, so
	 * a tenant that configured one now wins, and a tenant that did not still
	 * resolves to the product default below and renders identically. */
	--wepro-acc-primary:      var(--wepro-acc-brand, var(--lux-gold-deep));
	--wepro-acc-primary-dark: var(--wepro-acc-brand-dark, var(--lux-ink));
	--wepro-acc-text:         var(--lux-ink);
	--wepro-acc-bg:           var(--lux-cream);
	--wepro-acc-border:       var(--lux-hairline-soft);
	--wepro-acc-focus:        var(--lux-gold);
	--wepro-acc-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 2px 6px -2px rgba(60, 65, 72, 0.12),
		0 14px 32px -16px rgba(60, 65, 72, 0.22),
		0 28px 50px -32px rgba(60, 65, 72, 0.20);
	--wepro-acc-radius: 14px;

	/* ─── Launcher surface: product default ───────────────────────────────
	   The default "Bronze / Cream" preset (Presets::palette('bronze') returns []
	   on purpose, so these render). Declared ONCE here as named product tokens
	   instead of being repeated as bare literals inside four separate toggle
	   rules — a tenant overriding the launcher must have exactly one contract to
	   override, and canonical CSS must never carry an un-owned brand literal.

	   Resolution order consumed by the rules below:
	     1. --wepro-acc-toggle-grad, -grad-hover, -grad-open, -fg
	        = explicit preset or per-role admin override (Presets.php)
	     2. --wepro-acc-launcher-bg-default and siblings
	        = this product default
	   Anything a tenant declares therefore wins without editing this file. */
	--wepro-acc-launcher-bg-default:
		linear-gradient(91deg, #996B55 25%, #E5AB8E 42%, #E5AB8E 58%, #996B55 75%);
	--wepro-acc-launcher-bg-hover-default:
		linear-gradient(91deg, #B38A78 25%, #F0C8AE 42%, #F0C8AE 58%, #B38A78 75%);
	--wepro-acc-launcher-bg-open-default:
		linear-gradient(91deg, #EAE5DC 25%, #FBF7EE 42%, #FBF7EE 58%, #EAE5DC 75%);
	--wepro-acc-launcher-fg-default: #06162E;
}

/* ─── Toggle button — soft brass nameplate ─── */
.wepro-acc-toggle {
	background: var(--wepro-acc-toggle-grad, var(--wepro-acc-launcher-bg-default)) !important;
	color: var(--wepro-acc-toggle-fg, var(--wepro-acc-launcher-fg-default)) !important;
	border: 0 !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 246, 224, 0.38),
		inset 0 -1px 0 rgba(142, 116, 73, 0.22),
		2px 0 10px -3px rgba(142, 116, 73, 0.22),
		4px 0 20px -10px rgba(142, 116, 73, 0.3) !important;
	overflow: hidden;
	isolation: isolate;
	position: relative;
}
.wepro-acc-toggle::before {
	content: "";
	position: absolute;
	inset: 1px;
	background: linear-gradient(
		90deg,
		rgba(255, 246, 224, 0.22) 0%,
		rgba(255, 246, 224, 0.03) 60%,
		transparent 100%
	);
	pointer-events: none;
	z-index: 1;
	border-radius: inherit;
}
.wepro-acc-toggle::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	top: -60%;
	height: 60%;
	background: linear-gradient(
		195deg,
		transparent 0%,
		rgba(255, 246, 224, 0) 30%,
		rgba(255, 246, 224, 0.28) 50%,
		rgba(255, 246, 224, 0) 70%,
		transparent 100%
	);
	pointer-events: none;
	z-index: 2;
	animation: wepro-acc-shimmer 11s cubic-bezier(.4,.05,.6,.95) 2s infinite;
}
@keyframes wepro-acc-shimmer {
	0%   { top: -60%; }
	65%  { top: 110%; }
	100% { top: 110%; }
}
.wepro-acc-toggle svg {
	position: relative;
	z-index: 3;
	filter: drop-shadow(0 1px 1px rgba(42, 33, 18, 0.25));
}
.wepro-acc-toggle:hover,
.wepro-acc-toggle:focus {
	background: var(--wepro-acc-toggle-grad-hover, var(--wepro-acc-launcher-bg-hover-default)) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 246, 224, 0.6),
		3px 0 16px -4px rgba(142, 116, 73, 0.3),
		9px 0 28px -12px rgba(142, 116, 73, 0.35) !important;
}

/* ─── Panel — soft ivory tray, gilded inset ring ─── */
.wepro-acc-panel {
	background:
		var(--wepro-acc-panel-surface,
			radial-gradient(ellipse 140% 70% at 50% 0%, #FFFFFF 0%, transparent 60%),
			linear-gradient(180deg, #FAFAF7 0%, #F0ECE4 100%)) !important;
	border: 1px solid var(--lux-hairline-soft) !important;
}

/* Open-state toggle — pearl, not hard bronze. */
.wepro-acc-widget.panel-open .wepro-acc-toggle {
	background: var(--wepro-acc-toggle-grad-open, var(--wepro-acc-launcher-bg-open-default)) !important;
	color: var(--wepro-acc-toggle-fg, var(--wepro-acc-launcher-fg-default)) !important;
}
.wepro-acc-panel::before {
	content: "";
	position: absolute;
	inset: 5px;
	border: 1px solid var(--lux-hairline-soft);
	border-radius: calc(var(--wepro-acc-radius) - 5px);
	pointer-events: none;
	z-index: 0;
}
.wepro-acc-panel > * { position: relative; z-index: 1; }

/* ─── Header — ivory strip + italic serif title + gilded flourish ─── */
.wepro-acc-header {
	position: relative;
	background: linear-gradient(180deg,
		var(--lux-ivory) 0%,
		color-mix(in srgb, var(--lux-cream) 96%, white) 100%) !important;
	border-top: 0 !important;
	border-bottom: 1px solid var(--lux-hairline-soft) !important;
	padding: 12px 16px !important;
}
.wepro-acc-header h3 {
	font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif !important;
	font-style: italic !important;
	font-weight: 500 !important;
	font-size: 15px !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	color: var(--lux-ink) !important;
}
.wepro-acc-header::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: -1px;
	height: 1px;
	background: linear-gradient(to right,
		transparent 0%,
		var(--lux-gold) 50%,
		transparent 100%);
	pointer-events: none;
}

/* ─── Section / group titles ─── */
.wepro-acc-panel h4,
.wepro-acc-panel .wepro-acc-group-title,
.wepro-acc-panel .wepro-acc-section-title {
	color: var(--lux-ink-soft) !important;
	font-family: "Inter", system-ui, sans-serif !important;
	font-size: 10.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0.28em !important;
	text-transform: uppercase !important;
}
.wepro-acc-panel .wepro-acc-group,
.wepro-acc-panel .wepro-acc-section {
	border-color: var(--lux-hairline-soft) !important;
}

/* ─── Option cards / buttons ─── */
.wepro-acc-panel button,
.wepro-acc-panel .wepro-acc-btn,
.wepro-acc-panel .wepro-acc-option,
.wepro-acc-panel .wepro-acc-control {
	font-family: "Inter", system-ui, sans-serif !important;
	border-color: var(--lux-hairline-soft) !important;
	color: var(--wepro-acc-btn-fg, var(--lux-ink)) !important;
	background: var(--wepro-acc-btn-bg, var(--lux-ivory)) !important;
	transition:
		background .35s ease-out,
		border-color .35s ease-out,
		color .35s ease-out,
		transform .4s cubic-bezier(.2,.7,.15,1),
		box-shadow .4s ease-out !important;
}
.wepro-acc-panel button:hover,
.wepro-acc-panel .wepro-acc-btn:hover,
.wepro-acc-panel .wepro-acc-option:hover,
.wepro-acc-panel .wepro-acc-control:hover {
	background: color-mix(in srgb, var(--lux-gold) 10%, var(--lux-ivory)) !important;
	border-color: var(--lux-hairline) !important;
	color: var(--lux-gold-deep) !important;
	transform: translateY(-1px);
}

/* Active / pressed */
.wepro-acc-panel button.is-active,
.wepro-acc-panel button[aria-pressed="true"],
.wepro-acc-panel .wepro-acc-btn.is-active,
.wepro-acc-panel .wepro-acc-option.is-active,
.wepro-acc-panel .wepro-acc-control.is-active {
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--lux-gold-hi) 90%, white) 0%,
		var(--lux-gold) 48%,
		var(--lux-gold-deep) 100%) !important;
	border-color: var(--lux-gold-deep) !important;
	color: var(--lux-ivory) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 246, 224, 0.45),
		0 2px 6px -2px rgba(142, 116, 73, 0.45) !important;
}

/* Sliders */
.wepro-acc-panel input[type="range"] {
	accent-color: var(--lux-gold-deep);
}

/* Footer / reset */
.wepro-acc-footer,
.wepro-acc-reset,
.wepro-acc-panel .wepro-acc-reset-btn {
	background: transparent !important;
	border-top: 1px solid var(--lux-hairline-soft) !important;
	color: var(--lux-ink-soft) !important;
	font-family: "Inter", system-ui, sans-serif !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 11px;
}
.wepro-acc-reset:hover,
.wepro-acc-panel .wepro-acc-reset-btn:hover {
	color: var(--lux-gold-deep) !important;
}

/* Close X — gilded + 90° on hover */
.wepro-acc-close {
	color: var(--lux-ink-soft) !important;
	transition: color .3s ease-out, transform .35s cubic-bezier(.2,.7,.15,1) !important;
}
.wepro-acc-close:hover {
	color: var(--lux-gold-deep) !important;
	transform: rotate(90deg);
}

/* Focus — gilded, visible */
.wepro-acc-widget *:focus-visible {
	outline: 2px solid var(--lux-gold) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 4px rgba(184, 153, 104, 0.18);
}

/* ─── Panel layout — body scrolls, header/footer stay anchored (all sizes) ─── */
.wepro-acc-panel {
	display: flex !important;
	flex-direction: column !important;
}
.wepro-acc-header {
	flex: 0 0 auto;
}
.wepro-acc-panel .wepro-acc-body {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch;
}
.wepro-acc-panel .wepro-acc-footer {
	flex: 0 0 auto !important;
}

/* ─── Mobile — full-screen panel on open ─── */
@media (max-width: 640px) {
	.wepro-acc-widget.panel-open {
		position: fixed !important;
		inset: 0 !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
	}
	.wepro-acc-widget.panel-open .wepro-acc-panel {
		position: fixed !important;
		inset: 0 !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		max-height: 100vh !important;
		max-height: 100dvh !important;
		height: 100vh !important;
		height: 100dvh !important;
		border-radius: 0 !important;
		border: 0 !important;
		margin: 0 !important;
		transform: none !important;
	}
	.wepro-acc-widget.panel-open .wepro-acc-panel::before {
		inset: 10px !important;
		border-radius: 0 !important;
	}
	/* Float the toggle icon above the full-screen panel so users can close */
	.wepro-acc-widget.panel-open .wepro-acc-toggle {
		position: fixed !important;
		top: auto !important;
		bottom: 16px !important;
		right: 16px !important;
		left: auto !important;
		z-index: calc(var(--wepro-acc-zindex) + 1) !important;
	}
	.wepro-acc-pos-left.wepro-acc-widget.panel-open .wepro-acc-toggle {
		right: auto !important;
		left: 16px !important;
	}

	/* Compacted type on mobile */
	.wepro-acc-header {
		padding: 14px 18px !important;
	}
	.wepro-acc-header h3 {
		font-size: 15px !important;
	}
	.wepro-acc-panel h4,
	.wepro-acc-panel .wepro-acc-group-title,
	.wepro-acc-panel .wepro-acc-section-title {
		font-size: 10px !important;
		letter-spacing: 0.22em !important;
	}
	.wepro-acc-panel button,
	.wepro-acc-panel .wepro-acc-btn,
	.wepro-acc-panel .wepro-acc-option,
	.wepro-acc-panel .wepro-acc-control {
		font-size: 13px !important;
	}
	.wepro-acc-footer,
	.wepro-acc-reset {
		font-size: 10px;
		letter-spacing: 0.08em;
		padding: 12px 14px !important;
	}
	.wepro-acc-footer a,
	.wepro-acc-footer button,
	.wepro-acc-footer .wepro-acc-statement-link,
	.wepro-acc-footer .wepro-acc-reset,
	.wepro-acc-footer .wepro-acc-feedback-btn {
		font-size: 10px !important;
		letter-spacing: 0.06em !important;
		white-space: nowrap;
	}
}

/* Reduced motion — no shimmer, no transforms */
@media (prefers-reduced-motion: reduce) {
	.wepro-acc-toggle::after { display: none; }
	.wepro-acc-panel button:hover,
	.wepro-acc-panel .wepro-acc-btn:hover,
	.wepro-acc-panel .wepro-acc-option:hover,
	.wepro-acc-panel .wepro-acc-control:hover,
	.wepro-acc-close:hover {
		transform: none !important;
	}
}