/**
 * tanzanite — poze la recenzii.
 *
 * Colțuri drepte peste tot, ca în restul temei — `--radius` e 0. Excepție face
 * butonul de încărcare, cu 4px, cerut anume ca să se deosebească de câmpuri.
 */

/* -------------------------------------------------------------------------
 * Câmpul din formular
 * ---------------------------------------------------------------------- */

.rp-field {
	margin-top: 4px;
}

.rp-field__label {
	display: block;
	margin-bottom: 8px;
	font-size: var(--fs-small, 0.875rem);
	font-weight: 600;
	color: var(--color-ink, #242424);
}

/* Fără casetă în jur: câmpul e opțional, iar o zonă desenată i-ar da mai multă
   greutate decât recenziei însăși. Rămâne un rând — buton și explicație. */
.rp-field__drop {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 0;
	border: 0;
	background: none;
}

/* La tragerea fișierelor peste câmp apare o linie subțire — singurul moment în
   care are rost să se vadă o margine. */
.rp-field__drop.is-over {
	outline: 1px solid var(--color-accent, #02B783);
	outline-offset: 8px;
}

/* Câmpul nativ de fișier nu se poate stiliza; se ascunde, iar eticheta lui
   preia rolul de buton. Rămâne găsibil din tastatură prin `for`. */
/* !important: pe pagina de păreri o regulă mai specifică pentru input-uri îi dădea
   1440px lățime, iar câmpul ascuns ieșea din pagină, spre dreapta. */
.rp-field__input {
	position: absolute;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/*
 * Buton cu fundal stins, nu plin: cel plin din formular e „Trimite recenzia",
 * iar două butoane pline unul sub altul se dispută aceeași privire.
 *
 * Selectorul e scris cu clasa părinte anume. Tema are `.form-field label
 * { display: block }`, care cântărește mai mult decât o singură clasă — fără
 * întărirea asta, eticheta redevine bloc, iar iconița sare pe rândul de
 * deasupra textului.
 */
.rp-field .rp-field__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin: 0;
	padding: 11px 20px;
	border-radius: 4px;
	border: 1px solid var(--color-border, #E8E8E6);
	background: var(--color-bg-soft, #F5F6F4);
	color: var(--color-ink, #242424);
	font-size: var(--fs-small, 0.875rem);
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background var(--dur, .25s) var(--ease, ease),
	            border-color var(--dur, .25s) var(--ease, ease),
	            color var(--dur, .25s) var(--ease, ease);
}

.rp-field .rp-field__button:hover,
.rp-field__input:focus-visible + .rp-field__button {
	background: #fff;
	border-color: var(--color-accent, #02B783);
	color: var(--color-accent, #02B783);
}

.rp-field .rp-field__button svg {
	width: 16px;
	height: 16px;
	flex: none;
	display: block;
}

.rp-field .rp-field__button span {
	display: inline-block;
	white-space: nowrap;
}

.rp-field__hint {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--color-muted, #767676);
}

/* Ajuns la numărul maxim, rândul dispare — un buton care nu mai face nimic e
   mai supărător decât lipsa lui. */
.rp-field.is-full .rp-field__drop {
	display: none;
}

.rp-field__error {
	margin: 8px 0 0;
	font-size: 0.8125rem;
	color: #b3261e;
}

/* -------------------------------------------------------------------------
 * Miniaturile din formular
 * ---------------------------------------------------------------------- */

.rp-field__list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.rp-shot {
	position: relative;
	width: 86px;
	height: 86px;
	border: 1px solid var(--color-border, #E8E8E6);
	background: var(--color-bg-soft, #F5F6F4);
	overflow: hidden;
}

.rp-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Cât ține încărcarea, poza stă stinsă sub o pâclă albă, cu o bară care se
   plimbă pe muchia de jos. Un dreptunghi gol cu „se încarcă" scris în el arată
   a eroare; poza palidă arată a poză care vine. */
.rp-shot.is-busy img {
	opacity: .35;
	filter: grayscale(1);
}

.rp-shot__spin {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	overflow: hidden;
	font-size: 0;
	background: rgba(2, 183, 131, .18);
}

.rp-shot__spin::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 40%;
	background: var(--color-accent, #02B783);
	animation: rp-slide 1.1s var(--ease, ease) infinite;
}

@keyframes rp-slide {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
	.rp-shot__spin::after {
		animation: none;
		width: 100%;
		opacity: .5;
	}
}

/* Butonul de scoatere se arată la trecerea cu mouse-ul. Pe ecranele fără mouse
   nu există „trecere”, așa că acolo rămâne mereu vizibil — altfel poza nu s-ar
   mai putea scoate deloc. */
.rp-shot__remove {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 22px;
	height: 22px;
	border: 0;
	background: rgba(8, 34, 120, .74);
	color: #fff;
	cursor: pointer;
	padding: 0;
	opacity: 0;
	transition: opacity var(--dur, .25s) var(--ease, ease),
	            background var(--dur, .25s) var(--ease, ease);

	/*
	 * Semnul se desenează din două linii, nu din caracterul „×".
	 *
	 * Caracterul are, în aproape orice font, spațiu inegal deasupra și dedesubt
	 * — e gândit să stea între cifre, nu în mijlocul unui pătrat. Centrat cu
	 * flex, arată tot lăsat într-o parte, iar corectura cu un pixel ținută din
	 * ochi se strică la următoarea schimbare de font.
	 *
	 * Rămâne scris în marcaj pentru cazul în care foaia de stil nu ajunge; cât
	 * timp ajunge, nu se vede.
	 */
	font-size: 0;
	line-height: 0;
}

.rp-shot__remove::before,
.rp-shot__remove::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 1.5px;
	background: currentColor;
	border-radius: 1px;
}

.rp-shot__remove::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.rp-shot__remove::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.rp-shot:hover .rp-shot__remove,
.rp-shot__remove:focus-visible {
	opacity: 1;
}

.rp-shot__remove:hover {
	background: #b3261e;
}

@media (hover: none) {
	.rp-shot__remove { opacity: 1; }
}

/* -------------------------------------------------------------------------
 * Pozele sub recenzii
 * ---------------------------------------------------------------------- */

.rp-shots {
	margin: 14px 0 0;
}

.rp-shots__caption {
	display: block;
	margin-bottom: 7px;
	font-size: 0.6875rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--color-muted, #767676);
}

.rp-shots__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rp-shots__item {
	margin: 0;
}

.rp-shots__link {
	position: relative;
	display: block;
	width: 96px;
	height: 96px;
	border: 1px solid var(--color-border, #E8E8E6);
	overflow: hidden;
	cursor: zoom-in;
}

.rp-shots__link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s var(--ease, ease);
}

/* Imaginea crește puțin sub cursor. Semnul că se poate deschide îl dă cursorul
   însuși — `zoom-in` de mai sus; o lupă desenată peste fotografie ar acoperi
   tocmai ce vrea omul să vadă. */
.rp-shots__link:hover img,
.rp-shots__link:focus-visible img {
	transform: scale(1.06);
}

/* Conturul se aprinde la focalizare din tastatură, unde nu există cursor care
   să spună ceva. */
.rp-shots__link:focus-visible {
	outline: 2px solid var(--color-accent, #02B783);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.rp-shots__link img { transition: none; }
	.rp-shots__link:hover img { transform: none; }
}

/* -------------------------------------------------------------------------
 * Lupa
 * ---------------------------------------------------------------------- */

.rp-lb {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(2, 1, 1, .88);
	padding: 5vh 4vw;
}

.rp-lb.is-open {
	display: flex;
}

body.rp-lb-open {
	overflow: hidden;
}

/* `dvh` și nu `vh`: pe telefon bara de adresă apare și dispare la derulare,
   iar o poză măsurată în `vh` ar sări de fiecare dată. */
.rp-lb__img {
	max-width: 100%;
	max-height: 90dvh;
	object-fit: contain;
	display: block;
}

.rp-lb__close,
.rp-lb__nav {
	position: absolute;
	border: 0;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--dur, .25s) var(--ease, ease);
}

.rp-lb__close:hover,
.rp-lb__nav:hover {
	background: rgba(255, 255, 255, .24);
}

.rp-lb__close {
	top: 16px;
	right: 16px;
	width: 42px;
	height: 42px;
	font-size: 26px;
	line-height: 1;
}

.rp-lb__nav {
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 66px;
	font-size: 30px;
	line-height: 1;
}

.rp-lb__nav--prev { left: 12px; }
.rp-lb__nav--next { right: 12px; }

.rp-lb__count {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, .72);
}

@media (max-width: 600px) {
	.rp-lb {
		padding: 0;
	}

	.rp-lb__nav {
		width: 38px;
		height: 54px;
		font-size: 24px;
	}
}