/*
 * BANNERUL DE COOKIES
 *
 * Se scrie pe orice pagină a site-ului, nu doar în aplicație — deci nu se
 * poate sprijini pe variabilele temei noastre, care există numai acolo. De
 * aceea fiecare culoare are o rezervă scrisă după ea: `var(--gtc-card, #FFFFFF)`.
 * În aplicație ia culorile temei alese; pe o pagină a site-ului ia rezerva.
 *
 * Ce nu se împrumută de la temă: chenarul și umbra. Bannerul trebuie să se
 * vadă pe orice fundal, inclusiv pe o poză de copertă, iar o temă deschisă
 * cu un card alb pe fundal alb l-ar fi topit în pagină.
 */

.gt-cmp {
	position: fixed;
	z-index: 100000;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	padding: 1rem;
	box-sizing: border-box;
	pointer-events: none;
}

.gt-cmp[hidden] {
	display: none;
}

.gt-cmp--bottom {
	bottom: 0;
}

.gt-cmp--top {
	top: 0;
}

.gt-cmp__box {
	pointer-events: auto;
	box-sizing: border-box;
	width: 100%;
	max-width: 62rem;
	padding: 1rem 1.25rem;
	border-radius: var(--gtc-radius, 12px);
	border: 1px solid var(--gtc-line, #E2E2EC);
	background: var(--gtc-card, #FFFFFF);
	color: var(--gtc-ink, #1F2937);
	box-shadow: 0 10px 40px rgba(0, 0, 0, .22);
	font-size: .95rem;
	line-height: 1.5;
}

/* Cutia din colț, pentru cine vrea o fereastră, nu o bară. */
.gt-cmp--box {
	justify-content: flex-end;
}

.gt-cmp--box .gt-cmp__box {
	max-width: 26rem;
}

.gt-cmp__title {
	margin: 0 0 .35rem;
	font-size: 1.05rem;
	font-weight: 600;
}

.gt-cmp__text {
	margin: 0 0 .5rem;
}

.gt-cmp__links {
	margin: 0 0 .5rem;
	font-size: .88rem;
}

.gt-cmp__links a {
	margin-right: .9rem;
	color: inherit;
	text-decoration: underline;
}

/*
 * Lista categoriilor se poate derula: pe un telefon cu tastatură deschisă,
 * patru rânduri cu lămuriri sub ele ies din ecran împreună cu butoanele.
 */
.gt-cmp__kinds {
	margin: .5rem 0 .75rem;
	max-height: 40vh;
	overflow-y: auto;
	border-top: 1px solid var(--gtc-line, #E2E2EC);
	border-bottom: 1px solid var(--gtc-line, #E2E2EC);
	padding: .5rem 0;
}

.gt-cmp__kinds[hidden] {
	display: none;
}

.gt-cmp__kind {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	padding: .35rem 0;
	cursor: pointer;
}

.gt-cmp__kind input {
	margin-top: .25rem;
	flex: 0 0 auto;
}

.gt-cmp__kind small {
	display: block;
	opacity: .75;
	font-size: .84rem;
}

.gt-cmp__acts {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
}

/*
 * Cele două butoane mari arată la fel, iar asta e cerința, nu gustul: un
 * refuz care se vede mai șters decât acceptul nu culege consimțământ.
 */
.gt-cmp__btn {
	font: inherit;
	cursor: pointer;
	padding: .5rem 1rem;
	border-radius: var(--gtc-radius-sm, 8px);
	border: 1px solid var(--gtc-line, #E2E2EC);
	background: var(--gtc-bg, #EEEEF7);
	color: inherit;
	min-width: 8rem;
	text-align: center;
}

.gt-cmp__btn:hover {
	filter: brightness(.97);
}

.gt-cmp__btn--main {
	background: var(--gtc-accent, #F6BD31);
	border-color: var(--gtc-accent, #F6BD31);
	color: var(--gtc-on-accent, #1F2937);
}

.gt-cmp__btn--flat {
	min-width: 0;
	border-color: transparent;
	background: transparent;
	text-decoration: underline;
}

/* Butonul din subsol, care deschide iar alegerea. */
.gt-cmp-again {
	font: inherit;
	cursor: pointer;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	text-decoration: underline;
	opacity: .85;
}

@media (max-width: 40rem) {
	.gt-cmp {
		padding: .5rem;
	}

	.gt-cmp__box {
		padding: .85rem 1rem;
	}

	.gt-cmp__acts {
		flex-direction: column;
		align-items: stretch;
	}

	.gt-cmp__btn {
		width: 100%;
	}
}

/*
 * FĂRĂ VARIANTĂ ÎNTUNECATĂ
 *
 * Aici stătea o variantă pentru `prefers-color-scheme: dark`: pe un
 * telefon ori un calculator cu sistemul pus pe întunecat, bannerul ieșea
 * negru pe o pagină deschisă — pagina site-ului n-are temă întunecată, deci
 * variabilele ei lipseau și câștiga rezerva neagră. Site-ul și aplicația au
 * o singură înfățișare, deschisă, cu paleta Good Teacher, iar bannerul o
 * urmează la fel pe orice sistem. `color-scheme: only light` ține deschise
 * și căsuțele, și bara de derulare, și cere browserului să nu-l întunece
 * singur (întunecarea automată din Chrome pe Android).
 */
.gt-cmp {
	color-scheme: only light;
}

@media print {
	.gt-cmp {
		display: none !important;
	}
}