/**
 * WyConsent banner + preferences panel styles.
 *
 * Themeable via --wyco-* custom properties. Self-contained, low specificity but
 * scoped under .wyco-* to avoid theme bleed. Respects reduced motion.
 */

.wyco-root {
	/* Colors (light defaults mirror Lot 1). */
	--wyco-bg: #ffffff;
	--wyco-fg: #1f2937;
	--wyco-muted: #6b7280;
	--wyco-border: #e5e7eb;
	--wyco-link: #2271b1;
	--wyco-link-hover: #135e96;
	--wyco-accent: #2271b1;
	--wyco-accent-fg: #ffffff;
	--wyco-overlay: rgba(0, 0, 0, 0.5);

	/* Buttons. */
	--wyco-btn-accept-bg: #2271b1;
	--wyco-btn-accept-fg: #ffffff;
	--wyco-btn-accept-border: #2271b1;
	--wyco-btn-accept-hover: #135e96;
	--wyco-btn-reject-bg: transparent;
	--wyco-btn-reject-fg: #1f2937;
	--wyco-btn-reject-border: #e5e7eb;
	--wyco-btn-reject-hover: rgba(0, 0, 0, 0.04);
	--wyco-btn-customize-bg: transparent;
	--wyco-btn-customize-fg: #1f2937;
	--wyco-btn-customize-border: #e5e7eb;
	--wyco-btn-customize-hover: rgba(0, 0, 0, 0.04);
	--wyco-btn-save-bg: #2271b1;
	--wyco-btn-save-fg: #ffffff;
	--wyco-btn-save-border: #2271b1;
	--wyco-btn-save-hover: #135e96;

	/* Toggles. */
	--wyco-toggle-on: #2271b1;
	--wyco-toggle-off: #e5e7eb;
	--wyco-toggle-handle: #ffffff;

	/* Widget (reopen trigger). */
	--wyco-widget-bg: #ffffff;
	--wyco-widget-fg: #1f2937;
	--wyco-widget-icon: #2271b1;

	/* Shape & spacing. */
	--wyco-radius: 12px;
	--wyco-radius-button: 8px;
	--wyco-radius-toggle: 999px;
	--wyco-border-width: 1px;
	--wyco-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
	--wyco-padding: 20px;
	--wyco-gap: 8px;
	--wyco-max-width: 420px;
	--wyco-max-width-modal: 560px;
	--wyco-logo-max-height: 40px;

	/* Typography. */
	--wyco-font-family: inherit;
	--wyco-font-size: 14px;
	--wyco-font-size-title: 17px;
	--wyco-font-size-button: 14px;
	--wyco-font-weight-title: 700;
	--wyco-font-weight-body: 400;
	--wyco-font-weight-button: 600;
	--wyco-line-height: 1.5;

	--wyco-z: 2147483000;

	font-family: var(--wyco-font-family);
	font-size: var(--wyco-font-size);
	font-weight: var(--wyco-font-weight-body);
	line-height: var(--wyco-line-height);
	color: var(--wyco-fg);
	box-sizing: border-box;
}

.wyco-root *,
.wyco-root *::before,
.wyco-root *::after {
	box-sizing: border-box;
}

/* ------------------------------- Banner card ------------------------------ */

.wyco-banner {
	position: fixed;
	z-index: var(--wyco-z);
	max-width: var(--wyco-max-width);
	width: calc(100% - 32px);
	background: var(--wyco-bg);
	color: var(--wyco-fg);
	border: var(--wyco-border-width) solid var(--wyco-border);
	border-radius: var(--wyco-radius);
	box-shadow: var(--wyco-shadow);
	padding: var(--wyco-padding);
}

/* --- Level 1 — box (floating card) positions --- */
.wyco-banner[data-position="bottom-left"] {
	left: 16px;
	bottom: 16px;
}

.wyco-banner[data-position="bottom-right"] {
	right: 16px;
	bottom: 16px;
}

.wyco-banner[data-position="top-left"] {
	left: 16px;
	top: 16px;
}

.wyco-banner[data-position="top-right"] {
	right: 16px;
	top: 16px;
}

.wyco-banner[data-position="bottom"],
.wyco-banner[data-position="bottom-center"] {
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
}

.wyco-banner[data-position="top"],
.wyco-banner[data-position="top-center"] {
	left: 50%;
	top: 16px;
	transform: translateX(-50%);
}

/* --- Level 1 — bar (full-width band, top or bottom) --- */
.wyco-banner[data-layout="bar"] {
	max-width: none;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
	border-radius: 0;
	transform: none;
}

.wyco-banner[data-layout="bar"][data-position="top"],
.wyco-banner[data-layout="bar"][data-position="top-center"] {
	top: 0;
	bottom: auto;
}

/* --- Level 1 — modal (centered card with its own backdrop) --- */
.wyco-banner[data-layout="modal"] {
	left: 50%;
	top: 50%;
	right: auto;
	bottom: auto;
	transform: translate(-50%, -50%);
	max-height: calc(100vh - 32px);
	overflow-y: auto;
}

.wyco-banner[data-layout="modal"]::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: var(--wyco-overlay);
}

/* --- Level 1 — sidebar (full-height side panel, left or right) --- */
.wyco-banner[data-layout="sidebar"] {
	top: 0;
	bottom: 0;
	left: 0;
	right: auto;
	height: 100%;
	max-height: none;
	border-radius: 0;
	transform: none;
	overflow-y: auto;
}

.wyco-banner[data-layout="sidebar"][data-position="right"] {
	left: auto;
	right: 0;
}

.wyco-banner__title {
	margin: 0 0 var(--wyco-gap);
	font-size: var(--wyco-font-size-title);
	font-weight: var(--wyco-font-weight-title);
}

.wyco-banner__text {
	margin: 0 0 16px;
	color: var(--wyco-fg);
}

.wyco-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wyco-gap);
}

/* --------------------------------- Buttons -------------------------------- */

/*
 * Buttons are scoped under .wyco-root and use !important on the variable-driven
 * visual properties so the configurator always wins over aggressive theme /
 * page-builder button styles (e.g. Elementor global buttons). The base reset
 * neutralizes inherited shapes/typography that builders inject on <button>.
 */
.wyco-root .wyco-btn {
	flex: 1 1 auto;
	min-width: 120px;
	margin: 0;
	padding: 11px 16px !important;
	font-family: var(--wyco-font-family) !important;
	font-size: var(--wyco-font-size-button) !important;
	font-weight: var(--wyco-font-weight-button) !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	border-style: solid !important;
	border-width: var(--wyco-border-width) !important;
	border-color: transparent;
	border-radius: var(--wyco-radius-button) !important;
	box-shadow: none !important;
	text-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wyco-root .wyco-btn--accept {
	background: var(--wyco-btn-accept-bg) !important;
	color: var(--wyco-btn-accept-fg) !important;
	border-color: var(--wyco-btn-accept-border) !important;
}

.wyco-root .wyco-btn--accept:hover {
	background: var(--wyco-btn-accept-hover) !important;
}

.wyco-root .wyco-btn--reject {
	background: var(--wyco-btn-reject-bg) !important;
	color: var(--wyco-btn-reject-fg) !important;
	border-color: var(--wyco-btn-reject-border) !important;
}

.wyco-root .wyco-btn--reject:hover {
	background: var(--wyco-btn-reject-hover) !important;
}

.wyco-root .wyco-btn--customize {
	background: var(--wyco-btn-customize-bg) !important;
	color: var(--wyco-btn-customize-fg) !important;
	border-color: var(--wyco-btn-customize-border) !important;
}

.wyco-root .wyco-btn--customize:hover {
	background: var(--wyco-btn-customize-hover) !important;
}

.wyco-root .wyco-btn--save {
	background: var(--wyco-btn-save-bg) !important;
	color: var(--wyco-btn-save-fg) !important;
	border-color: var(--wyco-btn-save-border) !important;
}

.wyco-root .wyco-btn--save:hover {
	background: var(--wyco-btn-save-hover) !important;
}

.wyco-root .wyco-btn:focus-visible {
	outline: 2px solid var(--wyco-accent);
	outline-offset: 2px;
}

/* ------------------------------ Modal / panel ----------------------------- */

.wyco-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--wyco-z);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: var(--wyco-overlay);
}

.wyco-modal {
	background: var(--wyco-bg);
	color: var(--wyco-fg);
	border-radius: var(--wyco-radius);
	box-shadow: var(--wyco-shadow);
	width: 100%;
	max-width: var(--wyco-max-width-modal);
	max-height: calc(100vh - 32px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* --- Level 2 — panel alignment (modal center/left/right) --- */
.wyco-overlay[data-position="left"] {
	justify-content: flex-start;
}

.wyco-overlay[data-position="right"] {
	justify-content: flex-end;
}

/* --- Level 2 — sidebar (full-height side panel) --- */
.wyco-overlay[data-layout="sidebar"] {
	padding: 0;
	align-items: stretch;
}

.wyco-overlay[data-layout="sidebar"] .wyco-modal {
	height: 100%;
	max-height: 100vh;
	border-radius: 0;
}

.wyco-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 20px 12px;
	border-bottom: var(--wyco-border-width) solid var(--wyco-border);
}

.wyco-modal__title {
	margin: 0;
	font-size: var(--wyco-font-size-title);
	font-weight: var(--wyco-font-weight-title);
}

.wyco-modal__intro {
	margin: 4px 0 0;
	color: var(--wyco-muted);
	font-size: 13px;
}

.wyco-modal__close {
	flex: 0 0 auto;
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: var(--wyco-muted);
	padding: 4px;
}

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

.wyco-modal__body {
	padding: 8px 20px;
	overflow-y: auto;
}

.wyco-cat {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	border-bottom: var(--wyco-border-width) solid var(--wyco-border);
}

.wyco-cat:last-child {
	border-bottom: none;
}

.wyco-cat__label {
	margin: 0 0 4px;
	font-weight: 600;
}

.wyco-cat__desc {
	margin: 0;
	font-size: 13px;
	color: var(--wyco-muted);
}

.wyco-modal__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 16px 20px;
	border-top: var(--wyco-border-width) solid var(--wyco-border);
}

/* --------------------------------- Toggle --------------------------------- */

.wyco-switch {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 24px;
}

.wyco-switch input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.wyco-switch__track {
	position: absolute;
	inset: 0;
	background: var(--wyco-toggle-off);
	border-radius: var(--wyco-radius-toggle);
	transition: background 0.15s ease;
}

.wyco-switch__track::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	background: var(--wyco-toggle-handle);
	border-radius: 50%;
	transition: transform 0.15s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.wyco-switch input:checked + .wyco-switch__track {
	background: var(--wyco-toggle-on);
}

.wyco-switch input:checked + .wyco-switch__track::after {
	transform: translateX(20px);
}

.wyco-switch input:disabled + .wyco-switch__track {
	opacity: 0.6;
	cursor: not-allowed;
}

.wyco-switch input:focus-visible + .wyco-switch__track {
	outline: 2px solid var(--wyco-accent);
	outline-offset: 2px;
}

.wyco-switch__always {
	font-size: 12px;
	color: var(--wyco-muted);
	white-space: nowrap;
}

/* ----------------------------- Reopen trigger ----------------------------- */

.wyco-trigger {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: calc(var(--wyco-z) - 1);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--wyco-widget-fg);
	background: var(--wyco-widget-bg);
	border: var(--wyco-border-width) solid var(--wyco-border);
	border-radius: var(--wyco-radius-toggle);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	cursor: pointer;
}

.wyco-trigger[data-position="bottom-right"] {
	left: auto;
	right: 16px;
	bottom: 16px;
}

.wyco-trigger[data-position="top-left"] {
	top: 16px;
	bottom: auto;
	left: 16px;
}

.wyco-trigger[data-position="top-right"] {
	top: 16px;
	bottom: auto;
	left: auto;
	right: 16px;
}

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

.wyco-trigger__icon {
	display: inline-flex;
	align-items: center;
	color: var(--wyco-widget-icon);
}

.wyco-trigger__icon svg {
	width: 16px;
	height: 16px;
}

/* ---------------------------------- Logo --------------------------------- */

.wyco-logo {
	margin-bottom: 12px;
}

.wyco-logo__img {
	max-height: var(--wyco-logo-max-height, 40px);
	width: auto;
	display: block;
}

.wyco-logo[data-position="left"] {
	float: left;
	margin: 0 12px 8px 0;
}

.wyco-hidden {
	display: none !important;
}

/*
 * Mobile fold: below the breakpoint every level-1 layout collapses to a safe
 * bottom sheet and the level-2 panel goes full-screen. Selectors are scoped
 * under .wyco-root and use [data-layout] so they out-specify the layout rules
 * above (which would otherwise win inside the media query).
 */
@media (max-width: 480px) {
	.wyco-root .wyco-banner[data-layout] {
		left: 8px;
		right: 8px;
		bottom: 8px;
		top: auto;
		width: auto;
		max-width: none;
		height: auto;
		max-height: calc(100vh - 16px);
		transform: none;
		border-radius: var(--wyco-radius);
		overflow-y: auto;
	}

	.wyco-root .wyco-banner[data-layout="bar"] {
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 0;
	}

	.wyco-root .wyco-btn {
		flex-basis: 100%;
	}

	.wyco-root .wyco-overlay {
		padding: 0;
	}

	.wyco-root .wyco-overlay .wyco-modal {
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: 100vh;
		border-radius: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wyco-btn,
	.wyco-switch__track,
	.wyco-switch__track::after {
		transition: none;
	}
}