/**
 * Biobeauty CMP — stiluri front-end (banner / modal / iconiță / declarație).
 *
 * Tokens: albastru primar #0037B3, text #111, carduri albe, border #E3E5EB,
 * radius 14px card / 999px butoane. Font text = font-ul body-ului (Novela);
 * butoanele = "Silka-Medium".
 *
 * z-index: drawerul/headerul/backdrop-ul mobil din tema copil ajung la 130
 * (mobile.css). Stăm net deasupra tuturor, inclusiv plugin-uri terțe.
 */

:root {
	--biob-cmp-blue: #0037B3;
	--biob-cmp-blue-dark: #002a8a;
	--biob-cmp-ink: #111;
	--biob-cmp-border: #E3E5EB;
	--biob-cmp-muted: #6b7280;
	--biob-cmp-z: 2147483000;
}

/* Ascunse implicit; JS le dezvăluie (evită FOUC). */
#biob-cmp[hidden],
.biob-cmp-banner[hidden],
.biob-cmp-backdrop[hidden],
.biob-cmp-icon[hidden] {
	display: none !important;
}

/* ======================================================================= */
/* Banner                                                                  */
/* ======================================================================= */

.biob-cmp-banner {
	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: var(--biob-cmp-z);
	width: 380px;
	max-width: calc(100vw - 48px);
	background: #fff;
	color: var(--biob-cmp-ink);
	border: 1px solid var(--biob-cmp-border);
	border-radius: 14px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
	padding: 20px 22px 18px;
	box-sizing: border-box;
	animation: biob-cmp-in .28s ease both;
}

.biob-cmp-banner-title {
	margin: 0 0 8px;
	font-size: 17px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--biob-cmp-ink);
}

/* Insignă mod previzualizare (doar admin logat) */
.biob-cmp-preview-badge {
	display: inline-block;
	vertical-align: middle;
	margin-left: 8px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--biob-cmp-muted);
	background: #f4f5f8;
	border: 1px solid var(--biob-cmp-border);
	border-radius: 999px;
	padding: 3px 8px;
}

.biob-cmp-banner-desc {
	margin: 0 0 16px;
	font-size: 13.5px;
	line-height: 1.55;
	color: #333;
}

.biob-cmp-banner-desc p { margin: 0 0 8px; }
.biob-cmp-banner-desc p:last-child { margin-bottom: 0; }
.biob-cmp-banner-desc a { color: var(--biob-cmp-blue); text-decoration: underline; }

.biob-cmp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

/* ======================================================================= */
/* Butoane                                                                 */
/* ======================================================================= */

.biob-cmp-btn {
	font-family: "Silka-Medium", sans-serif;
	font-size: 13.5px;
	line-height: 1;
	border-radius: 999px;
	padding: 12px 20px;
	min-height: 44px;
	cursor: pointer;
	border: 1.5px solid transparent;
	transition: background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease;
	box-sizing: border-box;
}

.biob-cmp-btn-primary {
	background: var(--biob-cmp-blue);
	color: #fff;
	border-color: var(--biob-cmp-blue);
	flex: 1 1 auto;
}
.biob-cmp-btn-primary:hover { background: var(--biob-cmp-blue-dark); border-color: var(--biob-cmp-blue-dark); }

.biob-cmp-btn-outline {
	background: #fff;
	color: var(--biob-cmp-blue);
	border-color: var(--biob-cmp-blue);
	flex: 1 1 auto;
}
.biob-cmp-btn-outline:hover { background: #f4f7ff; }

.biob-cmp-btn-link {
	background: transparent;
	color: var(--biob-cmp-muted);
	border-color: transparent;
	text-decoration: underline;
	padding: 12px 12px;
	flex: 0 0 auto;
}
.biob-cmp-btn-link:hover { color: var(--biob-cmp-ink); }

.biob-cmp-btn:focus-visible,
.biob-cmp-icon:focus-visible,
.biob-cmp-close:focus-visible {
	outline: 2px solid var(--biob-cmp-blue);
	outline-offset: 2px;
}

/* ======================================================================= */
/* Modal preferințe                                                        */
/* ======================================================================= */

.biob-cmp-backdrop {
	position: fixed;
	inset: 0;
	z-index: var(--biob-cmp-z);
	background: rgba(10, 13, 22, .45);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
	animation: biob-cmp-fade .18s ease both;
}

.biob-cmp-modal {
	background: #fff;
	color: var(--biob-cmp-ink);
	border-radius: 14px;
	width: 520px;
	max-width: 100%;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
	animation: biob-cmp-in .24s ease both;
}

.biob-cmp-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 22px;
	border-bottom: 1px solid var(--biob-cmp-border);
}
.biob-cmp-modal-title { margin: 0; font-size: 17px; font-weight: 700; }

.biob-cmp-close {
	background: none;
	border: 0;
	font-size: 26px;
	line-height: 1;
	color: var(--biob-cmp-muted);
	cursor: pointer;
	padding: 0 4px;
}
.biob-cmp-close:hover { color: var(--biob-cmp-ink); }

.biob-cmp-modal-body {
	padding: 18px 22px;
	overflow-y: auto;
}
.biob-cmp-modal-intro { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: #333; }

.biob-cmp-cat {
	border: 1px solid var(--biob-cmp-border);
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 10px;
}
.biob-cmp-cat-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.biob-cmp-cat-name { font-size: 14px; font-weight: 600; }
.biob-cmp-cat-desc { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--biob-cmp-muted); }

.biob-cmp-pill {
	font-size: 11px;
	font-weight: 600;
	color: var(--biob-cmp-blue);
	background: #eef2fb;
	border-radius: 999px;
	padding: 4px 10px;
	white-space: nowrap;
}

.biob-cmp-modal-foot {
	padding: 16px 22px;
	border-top: 1px solid var(--biob-cmp-border);
	text-align: right;
}
.biob-cmp-modal-foot .biob-cmp-btn { min-width: 200px; }

/* Varianta detaliată (doar desktop ≥993px — JS o activează la deschidere):
   două coloane — stânga lista verticală de taburi, dreapta panoul. */
.biob-cmp-modal--wide { width: 680px; }
/* Înălțime fixă pe desktop (modul detaliat): schimbarea taburilor nu mai
   redimensionează modalul; panoul din dreapta scrollează intern. */
@media (min-width: 993px) {
	.biob-cmp-modal--wide { height: 540px; max-height: 85vh; display: flex; flex-direction: column; }
	/* Corpul NU scrollează el însuși: ocupă tot spațiul rămas (footerul stă
	   mereu lipit jos), iar scroll-ul e DOAR pe panoul din dreapta —
	   coloana de taburi din stânga rămâne fixă. */
	.biob-cmp-modal--wide .biob-cmp-modal-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
	.biob-cmp-modal--wide .biob-cmp-modal-intro { flex: none; }
	.biob-cmp-modal--wide .biob-cmp-ext { flex: 1; min-height: 0; }
	.biob-cmp-modal--wide .biob-cmp-ext-panels { overflow-y: auto; padding-right: 6px; }
}

.biob-cmp-ext {
	display: flex;
	align-items: stretch;
	gap: 18px;
}
.biob-cmp-ext[hidden],
.biob-cmp-simple[hidden] { display: none !important; }

.biob-cmp-ext .biob-cmp-tabbar {
	flex: 0 0 176px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: #F7F8FA;
	border-radius: 12px;
	padding: 8px;
	align-self: stretch;
}

.biob-cmp-tab-btn {
	font-family: "Silka-Medium", sans-serif;
	font-size: 13px;
	line-height: 1.3;
	text-align: left;
	padding: 11px 12px;
	border: 0;
	border-left: 3px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: var(--biob-cmp-ink);
	cursor: pointer;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.biob-cmp-tab-btn:hover { color: var(--biob-cmp-blue); }
.biob-cmp-tab-btn[aria-selected="true"] {
	background: #fff;
	color: var(--biob-cmp-blue);
	border-left-color: var(--biob-cmp-blue);
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
}
.biob-cmp-tab-btn:focus-visible { outline: 2px solid var(--biob-cmp-blue); outline-offset: 2px; }

.biob-cmp-ext-panels { flex: 1; min-width: 0; }
.biob-cmp-panel[hidden] { display: none !important; }

/* Antetul panoului: titlu + descriere la stânga, „Permite toate" sus-dreapta */
.biob-cmp-panel-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--biob-cmp-border);
	margin-bottom: 4px;
}
.biob-cmp-panel-title { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--biob-cmp-ink); }
.biob-cmp-panel-desc { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--biob-cmp-muted); }

.biob-cmp-allow-all {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
	margin-top: 2px;
}
.biob-cmp-allow-txt { font-size: 12px; color: var(--biob-cmp-muted); white-space: nowrap; }

/* Rânduri plate de serviciu / cookie (separatoare, fără carduri imbricate) */
.biob-cmp-svc-list { display: block; }
.biob-cmp-svc-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 2px;
	border-bottom: 1px solid #EEF0F4;
}
.biob-cmp-svc-row:last-child { border-bottom: 0; }
.biob-cmp-svc-txt { min-width: 0; }
.biob-cmp-svc-name { display: block; font-size: 13.5px; font-weight: 600; color: var(--biob-cmp-ink); }
label.biob-cmp-svc-name { cursor: pointer; }
.biob-cmp-svc-desc { margin: 3px 0 0; font-size: 12px; line-height: 1.5; color: var(--biob-cmp-muted); word-break: break-word; }
.biob-cmp-svc-row .biob-cmp-switch { margin-top: 2px; }

/* Lacăt în locul toggle-ului (rândurile strict necesare) */
.biob-cmp-lock-glyph {
	flex: none;
	color: #9aa0a8;
	margin-top: 3px;
	/* aliniat pe coloana comutatoarelor din celelalte panouri */
	width: 44px;
	display: flex;
	justify-content: center;
}

/* Toggle-uri (pill switch) */
.biob-cmp-switch { position: relative; flex: none; cursor: pointer; display: inline-block; }
.biob-cmp-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.biob-cmp-switch-track {
	display: block; width: 44px; height: 26px; border-radius: 999px;
	background: #d0d3d9; transition: background .15s ease;
}
.biob-cmp-switch-dot {
	position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
	border-radius: 50%; background: #fff; transition: transform .15s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.biob-cmp-switch input:checked + .biob-cmp-switch-track { background: var(--biob-cmp-blue); }
.biob-cmp-switch input:checked + .biob-cmp-switch-track .biob-cmp-switch-dot { transform: translateX(18px); }
.biob-cmp-switch input:focus-visible + .biob-cmp-switch-track { outline: 2px solid var(--biob-cmp-blue); outline-offset: 2px; }

/* ======================================================================= */
/* Iconiță flotantă (jos-stânga)                                           */
/* ======================================================================= */

.biob-cmp-icon {
	position: fixed;
	left: 20px;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	z-index: var(--biob-cmp-z);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--biob-cmp-border);
	background: #fff;
	color: var(--biob-cmp-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}
.biob-cmp-icon:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .24); }

/* ======================================================================= */
/* Declarație publică ([biob_cookies])                                     */
/* ======================================================================= */

.biob-cmp-decl-cat { margin: 24px 0 10px; font-size: 18px; }
.biob-cmp-decl-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 8px;
	font-size: 13.5px;
}
.biob-cmp-decl-table th,
.biob-cmp-decl-table td {
	text-align: left;
	padding: 8px 10px;
	border: 1px solid var(--biob-cmp-border);
	vertical-align: top;
}
.biob-cmp-decl-table th { background: #f7f8fa; font-weight: 600; }
.biob-cmp-decl-table code { font-size: 12.5px; word-break: break-word; }

/* ======================================================================= */
/* Animații                                                                */
/* ======================================================================= */

@keyframes biob-cmp-in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes biob-cmp-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.biob-cmp-banner, .biob-cmp-backdrop, .biob-cmp-modal { animation: none; }
}

/* ======================================================================= */
/* Mobil (≤992px): bandă full-width jos, butoane stivuite                  */
/* ======================================================================= */

@media (max-width: 992px) {
	.biob-cmp-banner {
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		border-radius: 14px 14px 0 0;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
		padding: 18px 18px calc(16px + env(safe-area-inset-bottom, 0));
	}
	.biob-cmp-actions { flex-direction: column; align-items: stretch; }
	.biob-cmp-btn { width: 100%; flex: none; }
	.biob-cmp-btn-link { order: 3; }
}

/* Plasă de siguranță: dacă fereastra se îngustează CU modalul deschis (varianta
   detaliată rămâne aleasă per-deschidere), stivuim coloanele ca să nu se strivească. */
@media (max-width: 992px) {
	.biob-cmp-ext { flex-direction: column; }
	.biob-cmp-ext .biob-cmp-tabbar { flex-direction: row; overflow-x: auto; width: 100%; }
}