/**
 * SAM Consent — стилі завіси, панелі налаштувань і таблиці для DSE.
 *
 * Файл самодостатній: плагін має працювати і без теми `sam-engineering`.
 * Токени теми використовуються через `var()` з фолбеком — так вигляд
 * підхоплюється автоматично там, де тема є, і не ламається там, де її немає.
 *
 * TABLE OF CONTENTS
 * -----------------
 * 1. Tokens
 * 2. Veil ........... фон замість сервісу + панель згоди над ним
 * 3. Panel .......... діалог керування вибором (точка відкликання)
 * 4. Link ........... кнопка-посилання шорткоду `[sam_consent_settings]`
 * 5. Table .......... `[sam_consent_table]` для Datenschutzerklärung
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

.sam-consent-veil,
.sam-consent-prompt,
.sam-consent-panel,
.sam-consent-table {
	--sam-consent-accent: var(--sam-accent, #f08600);
	--sam-consent-ink: var(--e-global-color-primary, #27272a);
	--sam-consent-muted: #52525b;
	--sam-consent-line: var(--e-global-color-accent, #e4e4e7);
	--sam-consent-surface: #fff;
	--sam-consent-radius: 14px;
	--sam-consent-ease: var(--sam-ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
}

/* ==========================================================================
   2. VEIL
   ==========================================================================
   Завіса — два шари, а не один, і рівні в стеку різні навмисно.

   `.sam-consent-veil` заміняє сам сервіс і лежить на його місці: `z-index: 1`,
   тобто **під** тим, що тема кладе поверх. У секції контактів це картки зі
   Standort-адресами (`z-index: 2`) — без згоди на карту вони мають лишатись
   читабельними, це самостійний контент, а не оформлення карти.

   `.sam-consent-prompt` — навпаки, `z-index: 3`: кнопку має бути видно й чим
   натиснути. Одним елементом це не робиться — шар з власним `z-index` створює
   стековий контекст, і дитина з нього вже не підніметься вище за батька.

   Розкладка панелі — з `veil.placement` у реєстрі:
     center (типово)  по центру елемента, коли поверх нього нічого немає
     bottom           у нижню смугу, коли центр уже зайнятий чужим контентом
   ========================================================================== */

.sam-consent-gated {
	position: relative;
}

.sam-consent-veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, hsl(40 20% 96%), hsl(40 15% 92%));
}

.sam-consent-prompt {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;

	/*
	 * Шар розтягнутий на весь елемент, але клікабельна тільки сама картка —
	 * інакше він перехоплював би кліки по картках адрес під ним.
	 */
	pointer-events: none;
}

.sam-consent-prompt .sam-consent-veil__card {
	display: flex;
	align-items: center;
	gap: 18px;
	max-width: 760px;
	padding: 16px 22px;
	border-radius: var(--sam-consent-radius);
	background: var(--sam-consent-surface);
	box-shadow: 0 18px 40px rgb(0 0 0 / 12%);
	pointer-events: auto;
}

/*
 * Нижній варіант — смуга на всю ширину, а не картка з відступами.
 * Вільного місця під картками адрес рівно 128 px, і картка з полями в нього
 * не вкладалась. Смуга і компактніша, і не залежить від того, скільки рядків
 * займе текст: якщо вона колись підросте, це лишиться акуратним баром, а не
 * плямою, що наповзла на адреси.
 */
.sam-consent-prompt--bottom {
	align-items: flex-end;
	padding: 0;
}

.sam-consent-prompt--bottom .sam-consent-veil__card {
	justify-content: center;
	width: 100%;
	max-width: none;
	padding: 14px 24px;
	border-radius: 0;
	box-shadow: 0 -8px 24px rgb(0 0 0 / 8%);
}

.sam-consent-prompt .sam-consent-veil__icon {
	display: inline-flex;
	flex: none;
	color: var(--sam-consent-accent);
}

.sam-consent-prompt .sam-consent-veil__text {
	flex: 1;
	min-width: 0;
}

.sam-consent-prompt .sam-consent-veil__actions {
	flex: none;
	text-align: center;
}

.sam-consent-prompt .sam-consent-veil__headline {
	margin: 0;
	color: var(--sam-consent-ink);
	font-size: 16px;
	font-weight: 600;
}

.sam-consent-prompt .sam-consent-veil__body {
	margin: 4px 0 0;
	color: var(--sam-consent-muted);
	font-size: 14px;
	line-height: 1.5;
}

/*
 * Усі селектори всередині завіси навмисно подвійні. Elementor Kit тримає
 * власну типографіку на `button` і `p` через `.elementor-kit-10 …` (0,1,1):
 * підпис кнопки виходив як «Karte Laden» (глобальний accent-стиль ставить
 * `text-transform: capitalize`), а параграфи отримували `margin-bottom` до
 * 24 px, через що панель виростала до 182 px замість сотні і наповзала на
 * картки адрес. Одинарний клас (0,1,0) цього набору не перебиває.
 */
.sam-consent-prompt .sam-consent-veil__button {
	margin: 0;
	padding: 13px 24px;
	border: 0;
	border-radius: 8px;
	background: var(--sam-consent-accent);

	/*
	 * Чорний, а не білий: помаранчевий на світлому дає близько 3:1, і білий
	 * текст на ньому не дотягує до 4.5:1. Такий самий підпис у формі Karriere.
	 */
	color: #000;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.24s var(--sam-consent-ease);
}

/*
 * `:focus` тут не менш важливий за `:hover`. Elementor Kit фарбує будь-яку
 * `button` в обох станах одним правилом `.elementor-kit-10 button:hover,
 * .elementor-kit-10 button:focus` (0,2,1) — фон і рамка перескакували на його
 * червоний. Панель до того ж сама ставить фокус на першу кнопку при відкритті,
 * тож без `:focus` вона червоніла одразу, ще до будь-якого наведення.
 */
.sam-consent-prompt .sam-consent-veil__button:hover,
.sam-consent-prompt .sam-consent-veil__button:focus {
	border-color: transparent;
	background: var(--sam-consent-ink);
	color: #fff;
}

.sam-consent-prompt .sam-consent-veil__note {
	margin: 4px 0 0;
	color: var(--sam-consent-muted);
	font-size: 12px;
	line-height: 1.45;
}

.sam-consent-prompt .sam-consent-veil__note a {
	color: inherit;
	text-decoration: underline;
}

/* ==========================================================================
   3. PANEL
   ========================================================================== */

.sam-consent-panel {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgb(0 0 0 / 45%);
}

.sam-consent-panel .sam-consent-panel__box {
	width: 100%;
	max-width: 560px;
	max-height: 85vh;
	overflow-y: auto;
	padding: 28px;
	border-radius: var(--sam-consent-radius);
	background: var(--sam-consent-surface);
	color: var(--sam-consent-ink);
}

.sam-consent-panel .sam-consent-panel__title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
}

.sam-consent-panel .sam-consent-panel__intro {
	margin: 10px 0 0;
	color: var(--sam-consent-muted);
	font-size: 15px;
	line-height: 1.55;
}

.sam-consent-panel .sam-consent-panel__row {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--sam-consent-line);
}

.sam-consent-panel .sam-consent-panel__text {
	flex: 1;
}

.sam-consent-panel .sam-consent-panel__name {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}

.sam-consent-panel .sam-consent-panel__desc {
	margin: 6px 0 0;
	color: var(--sam-consent-muted);
	font-size: 14px;
	line-height: 1.5;
}

.sam-consent-panel .sam-consent-panel__toggle {
	flex: none;
	padding: 10px 18px;
	border: 1px solid var(--sam-consent-ink);
	border-radius: 8px;
	background: transparent;
	color: var(--sam-consent-ink);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.24s var(--sam-consent-ease), color 0.24s var(--sam-consent-ease);
}

.sam-consent-panel .sam-consent-panel__toggle:hover,
.sam-consent-panel .sam-consent-panel__toggle:focus {
	border-color: var(--sam-consent-ink);
	background: var(--sam-consent-ink);
	color: #fff;
}

.sam-consent-panel .sam-consent-panel__toggle.is-granted {
	border-color: var(--sam-consent-accent);
}


.sam-consent-panel .sam-consent-panel__close {
	margin-top: 24px;
	padding: 13px 24px;
	border: 0;
	border-radius: 8px;
	background: var(--sam-consent-accent);
	color: #000;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

.sam-consent-panel .sam-consent-panel__close:hover,
.sam-consent-panel .sam-consent-panel__close:focus {
	background: var(--sam-consent-ink);
	color: #fff;
}

/* ==========================================================================
   4. LINK
   ==========================================================================
   Шорткод малює `<button>`, а не `<a>`: він нікуди не веде, а відкриває
   діалог. Вигляд посилання лишається, семантика — правильна.

   Обгортка `.sam-consent-settings` існує рівно заради специфічності: без
   батьківського класу правило (0,1,0) програє `.elementor-kit-10 button`
   і кнопка отримує чужу типографіку замість типографіки сусіднього тексту.
   ========================================================================== */


.sam-consent-settings .sam-consent-link {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	text-decoration: underline;
	cursor: pointer;
}

.sam-consent-settings .sam-consent-link:hover,
.sam-consent-settings .sam-consent-link:focus {
	background: none;
	color: inherit;
}

/* ==========================================================================
   5. TABLE
   ========================================================================== */

.sam-consent-table {
	overflow-x: auto;
}

.sam-consent-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.sam-consent-table th,
.sam-consent-table td {
	padding: 10px 12px;
	border: 1px solid var(--sam-consent-line);
	text-align: left;
	vertical-align: top;
}

.sam-consent-table thead th {
	background: hsl(40 20% 96%);
	font-weight: 600;
}

/* ==========================================================================
   Доступність
   ==========================================================================
   Elementor не дає `:focus-visible` — ставимо самі, інакше керування з
   клавіатури лишається без жодного видимого стану.
   ========================================================================== */

.sam-consent-prompt .sam-consent-veil__button:focus-visible,
.sam-consent-panel .sam-consent-panel__toggle:focus-visible,
.sam-consent-panel .sam-consent-panel__close:focus-visible,
.sam-consent-settings .sam-consent-link:focus-visible,
.sam-consent-prompt .sam-consent-veil__note a:focus-visible {
	outline: 2px solid var(--sam-consent-ink);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.sam-consent-prompt .sam-consent-veil__button,
	.sam-consent-panel .sam-consent-panel__toggle {
		transition: none;
	}
}

@media (max-width: 767px) {
	.sam-consent-prompt,
	.sam-consent-prompt--bottom {
		align-items: center;
		padding: 16px;
	}

	.sam-consent-prompt .sam-consent-veil__card {
		flex-direction: column;
		gap: 12px;
		padding: 20px;
		text-align: center;
	}

	.sam-consent-panel .sam-consent-panel__row {
		flex-direction: column;
		gap: 12px;
	}
}