/**
 * WS Cookie Notice — оформление полосы/окна.
 *
 * Плагин ставится в чужие темы, поэтому здесь ничего не берётся из переменных
 * темы: только собственные значения и то, что задано в настройках (переменные
 * --ws-ckn-* приходят в атрибуте style). Логические свойства (inset-inline,
 * start/end) держат вёрстку правильной и в иврите, и в русском.
 */

.ws-ckn {
	position: fixed;
	inset-inline: 0;
	z-index: 9999;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .75rem 1.25rem;
	padding: .9rem 1.1rem;
	background: var(--ws-ckn-bg, #1d2327);
	color: var(--ws-ckn-color, #fff);
	box-shadow: 0 -2px 18px rgb(0 0 0 / .18);
	font-size: 15px;
	line-height: 1.5;
	text-align: start;
}

.ws-ckn[hidden] { display: none; }
.ws-ckn *, .ws-ckn *::before, .ws-ckn *::after { box-sizing: inherit; }

.ws-ckn--bottom { bottom: 0; }
.ws-ckn--top { top: 0; box-shadow: 0 2px 18px rgb(0 0 0 / .18); }

/* Полоса может быть уже экрана (настройка «ширина полосы»): width + авто-поля
   центрируют fixed-элемент между inset-inline: 0. */
.ws-ckn--bar { width: var(--ws-ckn-bar-w, auto); margin-inline: auto; }

/* «Окном» — компактная карточка в углу, а не полоса во всю ширину. */
.ws-ckn--box {
	inset-inline: auto;
	inset-inline-start: 18px;
	max-width: 24rem;
	flex-direction: column;
	align-items: flex-start;
	border-radius: 6px;
}

.ws-ckn--box.ws-ckn--bottom { bottom: 18px; }
.ws-ckn--box.ws-ckn--top { top: 18px; }

/* Панель администратора WordPress закреплена сверху и выше по z-index — без
   поправки верхняя полоса пряталась бы под ней (видно только вошедшим). */
body.admin-bar .ws-ckn--top { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .ws-ckn--top { top: 46px; }
}

.ws-ckn__body { max-width: 60ch; }
.ws-ckn__title { display: block; margin-bottom: .2rem; font-weight: 700; }
.ws-ckn__text p { margin: 0; }
.ws-ckn__text p + p { margin-top: .4rem; }
.ws-ckn__link { color: inherit; text-decoration: underline; }
.ws-ckn__link:hover { text-decoration: none; }

.ws-ckn__actions { display: flex; gap: .5rem; flex: 0 0 auto; }

.ws-ckn__btn {
	margin: 0;
	padding: .5rem 1.1rem;
	border: var(--ws-ckn-btn-bw, 1px) solid var(--ws-ckn-btn-bc, transparent);
	border-radius: var(--ws-ckn-btn-radius, 4px);
	background: var(--ws-ckn-btn-bg, #fff);
	color: var(--ws-ckn-btn-color, #1d2327);
	font: inherit;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	white-space: nowrap;
}

.ws-ckn__btn:hover { filter: brightness(.94); }
.ws-ckn__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.ws-ckn__btn--ghost {
	background: transparent;
	border-color: currentColor;
	color: inherit;
	font-weight: 400;
}

.ws-ckn__btn--ghost:hover { filter: none; opacity: .85; }

/* Размер кнопок. */
.ws-ckn--btn-small .ws-ckn__btn { padding: .35rem .8rem; font-size: .88em; }
.ws-ckn--btn-large .ws-ckn__btn { padding: .7rem 1.5rem; font-size: 1.08em; }

/* Кнопки отдельной строкой — над или под текстом. */
.ws-ckn--btn-top,
.ws-ckn--btn-bottom { flex-direction: column; align-items: stretch; }
.ws-ckn--btn-top .ws-ckn__actions { order: -1; }

/* Выравнивание строки кнопок; start/end уже учитывают направление письма
   (PHP переводит «слева/справа» из настроек в логические стороны). */
.ws-ckn--btn-start .ws-ckn__actions { justify-content: flex-start; }
.ws-ckn--btn-center .ws-ckn__actions { justify-content: center; }
.ws-ckn--btn-end .ws-ckn__actions { justify-content: flex-end; }

@media (max-width: 600px) {
	.ws-ckn { flex-direction: column; align-items: stretch; }
	.ws-ckn--bar { width: auto; } /* узкая полоса на телефоне тесна */
	.ws-ckn--box { inset-inline: 10px; max-width: none; }
	.ws-ckn--box.ws-ckn--bottom { bottom: 10px; }
	.ws-ckn__actions { justify-content: stretch; }
	.ws-ckn__btn { flex: 1; }
}

@media print {
	.ws-ckn { display: none !important; }
}