/**
 * 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 */
	--wepro-acc-primary:      var(--lux-gold-deep);
	--wepro-acc-primary-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;
}

/* ─── Toggle button — soft brass nameplate ─── */
.wepro-acc-toggle {
	background: linear-gradient(91deg, #996B55 25%, #E5AB8E 42%, #E5AB8E 58%, #996B55 75%) !important;
	color: #06162E !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: linear-gradient(91deg, #B38A78 25%, #F0C8AE 42%, #F0C8AE 58%, #B38A78 75%) !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:
		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: linear-gradient(91deg, #EAE5DC 25%, #FBF7EE 42%, #FBF7EE 58%, #EAE5DC 75%) !important;
	color: #06162E !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(--lux-ink) !important;
	background: 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;
	}
}