/* ============================================================
   redesign.css — balti.ro, refacere vizuala completa
   Ticket balti.ro-2026-09-11-2.

   Portat din arhiva de design aprobata (balti-ro-redesign.zip):
   app/page.tsx + app/globals.css. Arhiva era scrisa in Tailwind;
   aici este transcrisa in CSS simplu, fara dependente de build,
   ca sa functioneze in aplicatia PHP/Smarty existenta.

   Se incarca DUPA display.css si tokens.css.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ------------------------------------------------------------
   1. Baza
   ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
	background: var(--br-fundal) !important;
	color: var(--br-text) !important;
	font-family: var(--br-font) !important;
	margin: 0;
	padding: 0;
	-webkit-text-size-adjust: 100%;
}

body { font-size: 16px; line-height: 1.5; }

img { max-width: 100%; height: auto; }

a { color: var(--br-verde); text-decoration: none; }
a:hover { color: var(--br-verde-hover); }

::selection { background: var(--br-accent); color: var(--br-accent-text); }

/* Latimea fixa de 939px din template.css nu mai are ce cauta aici. */
.shell {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	background: transparent !important;
	padding: 0 !important;
}

.br-wrap {
	max-width: var(--br-latime);
	margin: 0 auto;
	padding-left: var(--br-pad);
	padding-right: var(--br-pad);
}

/* Vechea structura cu coloane fixe este inlocuita de .br-main */
.row, .container { width: auto !important; height: auto !important; }
.container { padding: 0 !important; background: transparent !important; }
.left, .leftContainer, .right, .rightContainer, .blockContainer {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
}
.clear { clear: both; }

/* ------------------------------------------------------------
   2. Header
   ------------------------------------------------------------ */

.br-header {
	background: var(--br-verde);
	color: #fff;
	position: relative;
	z-index: 50;
}

/* Homepage: header-ul sta peste fotografie, deci fara fundal propriu */
.br-header--peste {
	background: transparent;
	position: absolute;
	top: 0; left: 0; right: 0;
}

.br-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: 18px;
	padding-bottom: 18px;
}

.br-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #fff !important;
	flex: 0 0 auto;
}

.br-brand-mark {
	width: 46px; height: 46px;
	background: #fff;
	border-radius: var(--br-raza);
	display: grid;
	place-items: center;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
	flex: 0 0 auto;
}

.br-brand-mark img { width: 100%; height: 100%; object-fit: contain; padding: 3px; display: block; }

.br-brand-text {
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -.06em;
	line-height: 1;
	white-space: nowrap;
}

.br-brand-text span { color: var(--br-accent); }

/* h1#logo din templateul vechi devine doar containerul brandului.
   display.css il stilizeaza ca pe vechiul logo (185x100, fundal alb, chenar,
   `text-indent:-4000px` pe link). Daca regulile acelea nu sunt oprite, caseta
   alba acopera sigla si textul, iar latimea fixa de 185px comprima meniul
   pana ajunge sa se suprapuna peste butoane. */
h1#logo {
	float: none !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	text-indent: 0 !important;
	background: none !important;
	border: 0 !important;
	overflow: visible !important;
	display: block !important;
	font-size: inherit !important;
	line-height: normal !important;
}

/* `h1#logo a` din display.css are `height:94px` si fundalul vechiului logo
   (balti-pescuit-logo.jpg — o caseta alba cu numele scris pe ea). Daca nu
   anulam si fundalul si inaltimea, vechiul logo se vede prin sigla noua, iar
   textul brandului se suprapune peste literele lui. */
h1#logo a.br-brand {
	text-indent: 0 !important;
	display: flex !important;
	background: none !important;
	height: auto !important;
}

/* --- Navigatie --- */

/* `min-width:0` + `flex:1 1 auto`: altfel meniul se comprima sub latimea
   continutului si elementele ajung sa se suprapuna peste butoane. */
.br-nav { display: none; align-items: center; gap: 26px; flex: 1 1 auto; min-width: 0; justify-content: center; }

@media (min-width: 900px) { .br-nav { display: flex; } }
@media (min-width: 900px) and (max-width: 1150px) { .br-nav, .br-nav > ul { gap: 15px; } }

/* display.css are `#nav { width: 0 }` — un hack pentru vechiul meniu, care
   isi pozitiona elementele absolut. Cu latimea 0, elementele meniului nou
   (flex) se revarsa peste butoanele din dreapta. */
#nav { width: auto !important; }

.br-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 26px; }

.br-nav > ul > li { position: relative; }

.br-nav > ul > li > a {
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: none;
	display: block;
	padding: 8px 0;
	border: 0 !important;
	background: none !important;
	white-space: nowrap;
}

.br-nav > ul > li > a:hover { color: var(--br-accent) !important; }

/* Submeniul — pastreaza ul#nav li > ul ca sa functioneze JS-ul de hover */
.br-nav ul ul {
	display: none;
	position: absolute;
	top: 100%; left: 0;
	min-width: 200px;
	background: #fff;
	border-radius: var(--br-raza);
	box-shadow: 0 18px 42px rgba(18, 41, 35, .18);
	padding: 8px;
	margin: 0;
	list-style: none;
	z-index: 60;
}

.br-nav ul ul li a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--br-raza-mica);
	color: var(--br-verde) !important;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.br-nav ul ul li a:hover { background: var(--br-verde-muted); }

/* --- Actiuni in header (cont / cauta) --- */

.br-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.br-btn-cont {
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	padding: 9px 18px;
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	background: none;
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
	transition: background .15s, color .15s;
}

.br-btn-cont:hover { background: #fff; color: var(--br-verde) !important; }

.br-btn-add {
	background: var(--br-accent);
	color: var(--br-accent-text) !important;
	border: 0;
	border-radius: var(--br-raza);
	padding: 11px 18px;
	font-size: 14px;
	font-weight: 800;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.br-btn-add:hover { background: var(--br-accent-deschis); }

.br-burger {
	display: grid;
	place-items: center;
	width: 42px; height: 42px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: var(--br-raza-mica);
	background: none;
	cursor: pointer;
	color: #fff;
	padding: 0;
}

@media (min-width: 900px) { .br-burger { display: none; } }

/* Pe ecrane mici nav-ul orizontal dispare si ramane burger-ul. Butonul de
   cont iese din bara (este oricum in meniul mobil), altfel antetul depaseste
   latimea ecranului. */
@media (max-width: 899px) {
	.br-btn-cont { display: none; }
	.br-header-inner { gap: 12px; }
}

@media (max-width: 560px) {
	.br-btn-add { padding: 10px 14px; font-size: 13px; }
	.br-brand-text { font-size: 19px; }
}

/* Meniul mobil, controlat prin checkbox (fara JS nou) */
.br-burger-input { position: absolute; opacity: 0; pointer-events: none; }

.br-mobile-nav {
	display: none;
	background: #fff;
	border-radius: var(--br-raza);
	box-shadow: 0 24px 48px rgba(18, 41, 35, .22);
	padding: 10px;
	margin: 0 var(--br-pad) 14px;
	position: relative;
	z-index: 55;
}

.br-burger-input:checked ~ .br-mobile-nav { display: block; }

@media (min-width: 900px) {
	.br-burger-input:checked ~ .br-mobile-nav { display: none; }
}

.br-mobile-nav a {
	display: block;
	padding: 12px 14px;
	border-radius: var(--br-raza-mica);
	color: var(--br-verde) !important;
	font-weight: 700;
	font-size: 15px;
}

.br-mobile-nav a:hover { background: var(--br-verde-muted); }

/* ------------------------------------------------------------
   3. Hero (doar homepage)
   ------------------------------------------------------------ */

.br-hero {
	position: relative;
	background: var(--br-verde);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.br-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: 58% center;
	opacity: .9;
}

@media (min-width: 640px) { .br-hero-bg { object-position: center; } }

.br-hero-voal {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(10,43,38,.94) 0%, rgba(10,43,38,.78) 44%, rgba(10,43,38,.28) 100%);
}

@media (min-width: 640px) {
	.br-hero-voal {
		background: linear-gradient(90deg, rgba(10,43,38,.92) 0%, rgba(10,43,38,.76) 37%, rgba(10,43,38,.16) 100%);
	}
}

.br-hero-inner {
	position: relative;
	z-index: 2;
	padding-top: 120px;
	padding-bottom: 90px;
	min-height: 630px;
	display: grid;
	align-content: center;
}

@media (min-width: 900px) { .br-hero-inner { padding-top: 140px; min-height: 650px; } }

.br-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--br-accent-deschis);
}

.br-eyebrow::before {
	content: "";
	width: 32px; height: 1px;
	background: var(--br-accent);
	display: block;
}

.br-hero h1,
.br-hero .br-hero-titlu {
	margin: 0;
	max-width: 20ch;
	font-size: clamp(34px, 7vw, 68px);
	font-weight: 900;
	line-height: .96;
	letter-spacing: -.055em;
	color: #fff;
	text-transform: none;
}

.br-hero-titlu span { color: var(--br-accent); }

.br-hero-lead {
	margin: 24px 0 0;
	max-width: 34em;
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .85);
}

/* --- Bara de cautare --- */

.br-search {
	margin-top: 38px;
	max-width: 940px;
	background: rgba(255, 255, 255, .96);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: var(--br-raza-card);
	padding: 12px;
	box-shadow: 0 24px 48px rgba(0, 0, 0, .2);
	display: grid;
	gap: 8px;
}

@media (min-width: 768px) {
	.br-search { grid-template-columns: 1fr 1.3fr auto; padding: 14px; }
}

.br-search-field {
	background: #fff;
	border: 1px solid var(--br-bordura);
	border-radius: var(--br-raza);
	padding: 10px 16px;
	display: block;
	min-width: 0;
}

.br-search-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--br-text-4);
	margin-bottom: 3px;
}

.br-search-field select,
.br-search-field input[type="text"] {
	width: 100%;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	color: var(--br-text);
	padding: 0;
	margin: 0;
	outline: none;
	height: 26px;
	line-height: 26px;
}

.br-search-field input::placeholder { color: #9aa89f; font-weight: 500; }

.br-search-submit {
	background: var(--br-verde);
	color: #fff !important;
	border: 0;
	border-radius: var(--br-raza);
	padding: 16px 26px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	white-space: nowrap;
}

.br-search-submit:hover { background: var(--br-verde-hover); }

/* Varianta din antetul paginilor interioare: un singur camp + buton, deci
   fara coloana dubla si fara latimea mare de pe prima pagina. */
.br-header-cautare { padding-bottom: 16px; }

/* Specificitate dubla: altfel regula din @media (min-width:768px) de mai sus
   (aceeasi specificitate) ar putea castiga si butonul ar ocupa 1.3fr. */
.br-search.br-search--compact {
	margin-top: 0;
	max-width: 560px;
	padding: 10px;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
	grid-template-columns: 1fr auto;
}

.br-search--compact .br-search-submit { min-height: 48px; padding: 12px 22px; }

.br-hero-puncte {
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	font-size: 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, .9);
}

.br-hero-puncte li { display: flex; align-items: center; gap: 8px; }
.br-hero-puncte li::before { content: "✓"; color: var(--br-accent); font-weight: 800; }

/* ------------------------------------------------------------
   4. Benzi de sectiune
   ------------------------------------------------------------ */

.br-sectiune { padding: 56px 0; }
@media (min-width: 900px) { .br-sectiune { padding: 72px 0; } }

.br-sectiune--verde { background: var(--br-verde-secund); border-top: 1px solid var(--br-bordura); border-bottom: 1px solid var(--br-bordura); }

.br-sectiune-cap {
	display: flex;
	flex-direction: column;
	gap: 20px;
	justify-content: space-between;
	margin-bottom: 36px;
}

@media (min-width: 640px) {
	.br-sectiune-cap { flex-direction: row; align-items: flex-end; }
}

.br-sectiune-cap p.br-supra {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--br-text-5);
}

.br-sectiune-cap h2,
h2.br-titlu-sectiune {
	margin: 0;
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 900;
	letter-spacing: -.05em;
	line-height: 1.05;
	color: var(--br-text);
	text-transform: none;
	border: 0;
	padding: 0;
	background: none;
}

.br-numar {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--br-verde-secund);
	color: var(--br-text-2);
	border-radius: 999px;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	align-self: flex-start;
}

/* ------------------------------------------------------------
   5. Cardurile de balta
   ------------------------------------------------------------ */

.br-gril {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
}

@media (min-width: 700px) { .br-gril { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .br-gril { grid-template-columns: repeat(3, 1fr); } }

.card-balta {
	background: var(--br-card);
	border: 1px solid var(--br-bordura);
	border-radius: var(--br-raza-card);
	overflow: hidden;
	box-shadow: var(--br-umbra-card);
	transition: transform .3s, box-shadow .3s;
	display: flex;
	flex-direction: column;
	position: relative;
}

.card-balta:hover { transform: translateY(-4px); box-shadow: var(--br-umbra-hover); }

/* dunga colorata de sus, ca in arhiva */
.card-balta::before {
	content: "";
	display: block;
	height: 8px;
	background: var(--br-accent);
	flex: 0 0 auto;
}

.card-balta:nth-child(3n+2)::before { background: #86a898; }
.card-balta:nth-child(3n+3)::before { background: var(--br-verde); }

.card-balta-foto {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--br-verde-muted);
}

.card-balta-foto img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}

.card-balta-corpus { padding: 22px; display: flex; flex-direction: column; flex: 1 1 auto; }

.card-balta-antet {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 14px;
}

.card-balta-judet {
	margin: 0;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .13em;
	color: var(--br-text-5);
}

.card-balta h3,
h3.card-balta-titlu {
	margin: 4px 0 0;
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -.045em;
	line-height: 1.15;
	color: var(--br-text);
	text-transform: none;
	border: 0;
	padding: 0;
	background: none;
}

.card-balta h3 a { color: var(--br-text) !important; }
.card-balta h3 a:hover { color: var(--br-verde) !important; }

.card-balta-eticheta {
	background: var(--br-verde-muted);
	color: #42635a;
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 11px;
	font-weight: 800;
	white-space: nowrap;
	flex: 0 0 auto;
}

.card-balta-loc {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--br-text-3);
}

.card-balta-loc::before { content: "📍"; font-size: 13px; }

.card-balta-linie { height: 1px; background: #e5ebe5; margin: 18px 0; }

.card-balta-date { display: flex; justify-content: space-between; gap: 14px; }

.card-balta-date dt {
	margin: 0;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--br-text-6);
}

.card-balta-date dd {
	margin: 4px 0 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--br-text);
}

/* Regulile pentru `.br-taxa` (taxa afisata in coltul din dreapta al cardului)
   au fost scoase odata cu markup-ul: nu se mai publica preturi (decizie
   Dragoș, 15-09-2026). `justify-content: space-between` de mai sus ramane
   inofensiv cu un singur copil — speciile se aseaza in stanga. */

.card-balta-nota {
	margin: 18px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--br-text-4);
}

.card-balta-cta {
	margin-top: auto;
	padding-top: 20px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 900;
	color: var(--br-verde) !important;
}

.card-balta-cta::after { content: "→"; transition: transform .2s; }
.card-balta:hover .card-balta-cta::after { transform: translateX(4px); }

/* Card fara fotografie */
.card-balta-foto--lipsa {
	display: grid;
	place-items: center;
	background: var(--br-verde-secund);
	color: var(--br-text-5);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	padding: 20px;
}

/* ------------------------------------------------------------
   6. Chips-uri (judete, specii)
   ------------------------------------------------------------ */

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

.br-chips li { margin: 0; }

.br-chips a {
	display: block;
	background: #fff;
	border: 1px solid var(--br-bordura-2);
	border-radius: 999px;
	padding: 11px 17px;
	font-size: 14px;
	font-weight: 700;
	color: var(--br-text) !important;
	min-height: 44px;
	line-height: 20px;
	transition: background .15s, color .15s, border-color .15s;
}

.br-chips a:hover {
	background: var(--br-verde);
	border-color: var(--br-verde);
	color: #fff !important;
}

.br-chips--judete a { padding: 9px 15px; min-height: 40px; font-size: 13px; }

/* ------------------------------------------------------------
   7. Banda "ghid"
   ------------------------------------------------------------ */

.br-ghid {
	background: var(--br-verde);
	color: #fff;
	border-radius: 32px;
	padding: 34px 26px;
	display: grid;
	gap: 26px;
}

@media (min-width: 900px) {
	.br-ghid { grid-template-columns: 1.2fr .8fr; align-items: end; padding: 44px; }
}

.br-ghid .br-supra { color: var(--br-accent-deschis); margin: 0 0 12px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; }

.br-ghid h2 {
	margin: 0;
	max-width: 22ch;
	font-size: clamp(26px, 4vw, 40px);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -.055em;
	color: #fff;
	text-transform: none;
}

.br-ghid p { margin: 16px 0 0; max-width: 46em; line-height: 1.7; color: rgba(255, 255, 255, .78); }

.br-ghid-buton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--br-accent);
	color: var(--br-accent-text) !important;
	border-radius: var(--br-raza);
	padding: 17px 22px;
	font-size: 15px;
	font-weight: 900;
	justify-self: start;
	min-height: 52px;
}

.br-ghid-buton:hover { background: var(--br-accent-deschis); }

/* ------------------------------------------------------------
   8. Zona de continut pentru paginile interioare
   ------------------------------------------------------------ */

.br-main { padding: 36px 0 60px; }

/* minmax(0,1fr) si nu 1fr: o coloana de grid nu scade sub latimea minima a
   continutului, iar pe mobil pagina de detaliu iesea din ecran. */
.br-coloane { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }

.br-continut { min-width: 0; }

@media (min-width: 1000px) {
	.br-coloane { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
}

.br-sidebar { display: grid; gap: 22px; align-content: start; }

/* Cutii din sidebar (judete, solunar, comentarii).
   display.css le da latimi fixe in trei locuri — cutie, titlu si continut
   (213/193/211, 214/214/212, 160/140/158). Daca latimea este resetata doar
   pe cutie, titlul verde si continutul ramân înguste si lista iese din ea. */
.box-213, .box-226, .box-160,
.box-title-213, .box-title-226, .box-title-160,
.box-content-213, .box-content-226, .box-content-160 {
	width: auto !important;
	height: auto !important;
	float: none !important;
}

.box-213, .box-226, .box-160 {
	background: #fff !important;
	border: 1px solid var(--br-bordura);
	border-radius: var(--br-raza-card);
	overflow: hidden;
	margin: 0 !important;
}

.box-title-213, .box-title-226, .box-title-160,
.box-213 h3, .box-226 h3, .box-160 h3,
.box-title-213 h3, .box-title-226 h3, .box-title-160 h3 {
	background: var(--br-verde) !important;
	color: #fff !important;
	margin: 0 !important;
	padding: 15px 18px !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	line-height: 1.4 !important;
	height: auto !important;
	text-transform: uppercase;
	letter-spacing: .13em;
	border: 0 !important;
	text-shadow: none !important;
	display: block !important;
}

.box-content-213, .box-content-226, .box-content-160 {
	display: block !important;
	padding: 16px 18px !important;
	background: #fff !important;
}

/* Selectorii includ `ul` intentionat: display.css are `ul.listingJudete`
   (display:inline) si `ul.listingJudete li` (float:left), iar fara
   specificitate egala regulile vechi ar castiga si lista ar iesi din flux. */
ul.listingJudete { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }

ul.listingJudete li { margin: 0; float: none; width: auto; }

ul.listingJudete a {
	display: block;
	padding: 7px 8px;
	border-radius: var(--br-raza-mica);
	font-size: 13px;
	font-weight: 600;
	color: var(--br-text-3) !important;
}

ul.listingJudete a:hover { background: var(--br-verde-secund); color: var(--br-verde) !important; }

/* ------------------------------------------------------------
   9. Blocurile SEO de jos (ultimele / populare / sugestii)
   ------------------------------------------------------------ */

.br-gril-3 { display: grid; gap: 20px; grid-template-columns: 1fr; }

@media (min-width: 700px) { .br-gril-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .br-gril-3 { grid-template-columns: repeat(3, 1fr); } }

.br-card-seo {
	background: var(--br-card);
	border: 1px solid var(--br-bordura);
	border-radius: var(--br-raza-card);
	padding: 22px 22px 8px;
	height: 100%;
	box-shadow: var(--br-umbra-card);
}

.br-card-seo-titlu {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 800;
	color: var(--br-text);
	letter-spacing: -.01em;
}

.br-card-seo-lista { list-style: none; margin: 0; padding: 0; }

.br-card-seo-lista > li {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 13px 0;
	border-bottom: 1px solid #eef2ee;
}

.br-card-seo-lista > li:last-child { border-bottom: 0; }

.br-card-seo-foto { flex: 0 0 auto; display: block; }

.br-card-seo-foto img,
.br-card-seo-foto--lipsa {
	display: block;
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: var(--br-raza-mica);
}

.br-card-seo-foto--lipsa { background: var(--br-verde-muted); }

.br-card-seo-text { min-width: 0; }

.br-card-seo-nume {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--br-text) !important;
}

.br-card-seo-nume:hover { color: var(--br-verde) !important; text-decoration: underline; }

.br-card-seo-meta {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--br-text-6);
}

/* ------------------------------------------------------------
   9b. Banda solunar de pe prima pagina
   Blocul solunar este, in mod normal, un box de sidebar de 160px.
   Aici il asezam langa un text, ca banda sa nu rămână goala. In
   sidebar ramane neschimbat (regulile de mai sus se aplica acolo).
   ------------------------------------------------------------ */

.br-solunar-inner {
	display: grid;
	gap: 28px;
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 800px) { .br-solunar-inner { grid-template-columns: 1fr auto; } }

.br-solunar-text h2 { margin: 0 0 10px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--br-text); }
.br-solunar-text p { margin: 0; max-width: 60ch; font-size: 15px; line-height: 1.65; color: var(--br-text-3); }
.br-solunar-text .br-supra { margin: 0 0 10px; }

/* In banda, box-ul isi pierde aspectul de cutie cu titlu verde. */
.br-solunar-box .box-160 {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0;
	overflow: visible;
	width: auto !important;
}

.br-solunar-box .box-title-160 { display: none !important; }

.br-solunar-box .box-content-160 {
	background: var(--br-card) !important;
	border: 1px solid var(--br-bordura);
	border-radius: var(--br-raza-card);
	padding: 18px !important;
	text-align: center;
	box-shadow: var(--br-umbra-card);
}

.br-solunar-box .box-content-160 img { border-radius: var(--br-raza-mica); display: block; }

/* ------------------------------------------------------------
   10. Banner publicitar — pastrate, dar discret restilizate
   ------------------------------------------------------------ */

.br-banner-zona {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 14px var(--br-pad);
	overflow: hidden;
}

.br-banner-zona--sus { background: var(--br-verde-secund); border-bottom: 1px solid var(--br-bordura); }
.br-banner-zona--jos { background: var(--br-verde-secund); border-top: 1px solid var(--br-bordura); }

/* display.css le da dimensiuni fixe si fundal gri (#eaeaea). Cand nu se
   incarca nicio reclama, containerele ramaneau dreptunghiuri gri goale si
   impingeau pagina in jos. Le lasam sa se dimensioneze dupa continut. */
.banner728x90, .banner468x60, .banner160x600 {
	float: none !important;
	margin: 0 auto !important;
	display: block !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	background: transparent !important;
	max-width: 100%;
	overflow: hidden;
}

.banner160x600 { margin: 0 auto !important; }

/* O zona publicitara fara continut nu trebuie sa ocupe spatiu. */
.br-banner-zona:not(:has(img, iframe, ins, embed, object, video)) { display: none; }

/* ------------------------------------------------------------
   11. Footer
   ------------------------------------------------------------ */

.br-footer {
	border-top: 1px solid var(--br-bordura);
	background: var(--br-fundal);
	padding: 32px 0;
	font-size: 14px;
	color: var(--br-text-4);
}

.br-footer-inner {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

@media (min-width: 640px) {
	.br-footer-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

.br-footer-brand { font-weight: 800; color: var(--br-text-2); margin: 0; }

.br-footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 18px 0 0; }

.br-footer nav a { font-weight: 600; color: var(--br-text-3) !important; font-size: 13px; }
.br-footer nav a:hover { color: var(--br-verde) !important; }

.br-copyright {
	border-top: 1px solid var(--br-bordura);
	margin-top: 20px;
	padding-top: 18px;
	font-size: 13px;
	color: var(--br-text-6);
}

/* .footermenu vechi */
.footermenu { text-align: left !important; }

/* ------------------------------------------------------------
   12. Elemente mostenite din template.css pe care le aliniem
   ------------------------------------------------------------ */

.meniu { background: none !important; height: auto !important; }
.meniu .contul { background: none !important; }

.breadcrumb { color: var(--br-text-4) !important; font-size: 13px; padding: 0 0 18px; }
.breadcrumb a { color: var(--br-text-4) !important; }
.breadcrumb a:hover { color: var(--br-verde) !important; }

.utils { float: none !important; width: auto !important; }

#add-albastru, img#add-albastru { display: none !important; }

/* Titluri vechi de articol */
.title, .title a { font-family: var(--br-font) !important; font-weight: 900 !important; letter-spacing: -.04em; }
.title a { color: var(--br-text) !important; }
.title a:hover { color: var(--br-verde) !important; }

.details { color: var(--br-text-4); }
.detalii { color: var(--br-verde) !important; font-weight: 700; }
.comentarii { color: var(--br-text-4) !important; font-weight: 600; }

.contur { border: 0 !important; }

/* Paginare */
.pagination a, .pagination span {
	border-radius: var(--br-raza-mica);
	font-weight: 700;
	min-width: 40px;
	min-height: 40px;
	display: inline-grid;
	place-items: center;
}

.pagination a { background: #fff; border: 1px solid var(--br-bordura); color: var(--br-text) !important; }
.pagination a:hover, .pagination .active { background: var(--br-verde) !important; border-color: var(--br-verde); color: #fff !important; }
/* ------------------------------------------------------------
   13. Pagina de detaliu a baltii (displayContent2.tpl)
   Markup-ul este cel vechi: fiecare camp este un <div class="line">
   cu <label class="form"> si <div class="rightForm">. display.css le
   da latimi fixe (150px + 355px) si pozitioneaza .utileBalta absolut,
   de aceea continutul statea înghesuit pe o coloana îngusta.
   ------------------------------------------------------------ */

.br-continut > .innercontainer { background: none !important; border: 0 !important; padding: 0 !important; }

/* Titlul baltii si linia de metadate */
.br-continut h2.title {
	font-size: 34px;
	line-height: 1.15;
	margin: 0 0 8px;
	color: var(--br-text) !important;
}

.br-continut .utileBalta {
	position: static !important;
	width: auto !important;
	text-align: left !important;
	color: var(--br-text-6) !important;
	font-size: 13px !important;
	line-height: 1.6 !important;
	margin: 0 0 4px;
}

/* Linia dubla de sub titlu nu isi mai are rostul */
.br-continut .topLine { display: none !important; }

/* Fiecare camp: eticheta la stanga, valoarea la dreapta */
.br-continut .line {
	display: flex !important;
	align-items: flex-start;
	gap: 24px;
	width: auto !important;
	padding: 16px 0 !important;
	border-bottom: 1px solid var(--br-bordura) !important;
}

.br-continut > .innercontainer > div > .line:last-child { border-bottom: 0 !important; }

.br-continut label.form {
	float: none !important;
	width: 200px !important;
	flex: 0 0 200px;
	color: var(--br-text-4) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	line-height: 1.6;
	padding-top: 1px;
}

.br-continut div.rightForm {
	float: none !important;
	width: auto !important;
	flex: 1 1 auto;
	min-width: 0;
	color: var(--br-text) !important;
	font-size: 15px;
	line-height: 1.65;
}

.br-continut div.rightForm a { color: var(--br-verde) !important; font-weight: 600; }
.br-continut div.rightForm a:hover { text-decoration: underline; }

/* Cardul cu detaliile baltii */
.br-continut > .innercontainer > div[style*="position:relative"] {
	background: var(--br-card);
	border: 1px solid var(--br-bordura);
	border-radius: var(--br-raza-card);
	padding: 6px 26px 10px;
	margin-bottom: 24px;
}

/* Facilitatile, ca iconite egale */
.br-continut .imageFacilitati {
	float: none !important;
	display: inline-block;
	width: 92px !important;
	height: auto !important;
	overflow: visible !important;
	margin: 0 8px 10px 0;
	padding: 10px 4px;
	text-align: center;
	background: var(--br-verde-muted);
	border-radius: var(--br-raza);
	font-size: 12px;
	line-height: 1.35;
	color: var(--br-text-3);
	vertical-align: top;
}

.br-continut .imageFacilitati img { display: block; margin: 0 auto 6px; }

/* Imaginile baltii */
.br-continut .rightForm img.blockContur,
.br-continut img.blockContur {
	border: 1px solid var(--br-bordura) !important;
	border-radius: var(--br-raza);
	margin: 0 6px 6px 0 !important;
}

/* Butonul de comentariu: template-ul ii pune fundal si latime inline */
.br-continut label.form a[rel*="shadowbox"] {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-height: 40px;
	height: auto !important;
	margin-top: 10px !important;
	padding: 10px 18px !important;
	background: var(--br-accent) !important;
	background-image: none !important;
	color: var(--br-accent-text) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	border-radius: var(--br-raza) !important;
	text-align: center !important;
}

.br-continut label.form a[rel*="shadowbox"]:hover { background: var(--br-accent-deschis) !important; }

/* Recenziile — containerul.
   `display.css` defineste `.reviews` de DOUA ori: la linia ~773 cu `width:100%`
   si la linia ~827 cu `width:500px`. Amandoua au aceeasi specificitate, deci
   castiga ultima — 500px fix. La 390px asta scotea pagina din ecran (57 de
   elemente depaseau viewport-ul), iar panourile copil (`.jr_reviewContainer`,
   `.box_upperOuter`) preluau latimea. Redesign-ul isi doreste carduri pe toata
   latimea (vezi `.jr_review` de mai jos), deci anulam latimea fixa. */
.br-continut .reviews {
	width: auto !important;
	max-width: 100% !important;
	display: block !important;
	box-sizing: border-box;
}

.br-continut .roundedPanel,
.br-continut .jr_review,
.br-continut .box_upperOuter,
.br-continut .box_upperInner {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

.br-continut .jr_review {
	background: var(--br-card) !important;
	border: 1px solid var(--br-bordura) !important;
	border-radius: var(--br-raza-card);
	padding: 22px 24px !important;
	margin-bottom: 18px !important;
}

.br-continut .jr_reviewTitle {
	font-size: 17px !important;
	font-weight: 800 !important;
	color: var(--br-text) !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
}

.br-continut .jr_reviewContainer,
.br-continut .jr_reviewContainerSidebar {
	width: auto !important;
	float: none !important;
	font-size: 15px;
	line-height: 1.7;
	color: var(--br-text-2);
}

/* Voturi */
.br-continut .rating_table { margin: 0 0 18px; border-collapse: collapse; }
.br-continut .rating_label img { vertical-align: middle; }
.br-continut .rating_stars { padding-left: 10px; }
.br-continut .rating_value { padding-left: 10px; font-weight: 700; color: var(--br-text-3) !important; font-size: 14px; }

/* Pe ecrane mici eticheta si valoarea nu mai încap una lânga alta. */
@media (max-width: 699px) {
	.br-continut .line { flex-direction: column; gap: 4px; }
	.br-continut label.form { flex: 0 0 auto; width: auto !important; }
	.br-continut h2.title { font-size: 26px; }
	.br-continut > .innercontainer > div[style*="position:relative"] { padding: 4px 16px 8px; }
	.br-continut .imageFacilitati { width: 78px !important; }
}

/* Mesajele de stare (fara rezultate, criterii insuficiente) */
.br-mesaj {
	background: var(--br-card);
	border: 1px solid var(--br-bordura);
	border-radius: var(--br-raza-card);
	padding: 22px 24px;
	margin: 0 0 24px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--br-text-3);
}

/* Pagina de rezultate ale cautarii */
.br-rezultate .br-sectiune-cap { margin-bottom: 22px; }

/* ------------------------------------------------------------
   14. Liste de articole (categoriile de continut: Trusa pescarului,
       Specii de pesti, Partide balti.ro)
   ------------------------------------------------------------ */

.br-articole-wrap > .br-sectiune-cap { margin-bottom: 24px; }

/* Imaginea de categorie, cand exista, sta langa titlu. */
.br-categorie-poza { margin: 0 0 24px; }
.br-categorie-poza img {
	border-radius: var(--br-raza-card);
	border: 1px solid var(--br-bordura);
	max-width: 100%;
	height: auto;
}

.br-articole {
	display: grid;
	gap: 22px;
	/* minmax(0,1fr): o coloana de grid nu scade sub latimea minima a
	   continutului, iar textele lungi din articole ieseau din ecran. */
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 860px) {
	.br-articole { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.br-card-articol {
	background: var(--br-card);
	border: 1px solid var(--br-bordura);
	border-radius: var(--br-raza-card);
	padding: 24px;
	box-shadow: var(--br-umbra-card);
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.br-card-articol-titlu {
	margin: 0 !important;
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.25;
}

.br-card-articol-titlu a { color: var(--br-text) !important; }
.br-card-articol-titlu a:hover { color: var(--br-verde) !important; }

/* Textul articolului vine din baza de date si contine chiar el imaginea
   (<img hspace="6" width="148">), asa ca o tratam ca miniatura a cardului.
   display.css da deja `float:left` imaginilor din .article-content, dar cu
   latime venita din atributul width; o fixam si o rotunjim. */
.br-card-articol .article-content {
	font-size: 15px;
	line-height: 1.7;
	color: var(--br-text-3);
	min-width: 0;
	overflow-wrap: break-word;
}

.br-card-articol .article-content img {
	float: left;
	width: 128px !important;
	height: auto !important;
	margin: 4px 16px 10px 0 !important;
	border-radius: var(--br-raza);
}

.br-card-articol .article-content p { margin: 0 0 10px; }
.br-card-articol .article-content p:last-child { margin-bottom: 0; }

.br-card-articol .card-balta-cta { align-self: flex-start; }

/* Sageata din .card-balta-cta este animata doar la hover pe .card-balta. */
.br-card-articol:hover .card-balta-cta::after { transform: translateX(4px); }

/* ------------------------------------------------------------
   15. Pagina unui articol de continut
   ------------------------------------------------------------ */

.br-articol .br-sectiune-cap { margin-bottom: 22px; }

/* Textul articolului vine din baza de date, deci doar il incadram. */
.br-articol-text {
	background: var(--br-card);
	border: 1px solid var(--br-bordura);
	border-radius: var(--br-raza-card);
	padding: 28px 30px;
	box-shadow: var(--br-umbra-card);
	font-size: 16px;
	line-height: 1.8;
	color: var(--br-text-2);
	min-width: 0;
	overflow-wrap: break-word;
}

.br-articol-text p { margin: 0 0 16px; }
.br-articol-text p:last-child { margin-bottom: 0; }

/* Imaginile din articol au `align="left"` in baza de date, deci plutesc in
   continuare; le rotunjim si le departam de text. */
.br-articol-text img {
	border-radius: var(--br-raza);
	margin: 4px 18px 10px 0;
	max-width: 100%;
	height: auto;
}

/* display.css da `.ups` latime fixa de 510px si un chenar punctat de
   separare; latimea fixa scotea pagina din ecran pe mobil. */
.ups {
	width: auto !important;
	margin: 18px 0 0 !important;
	padding: 0 !important;
	border-bottom: 0 !important;
	text-align: left !important;
	font-size: 13px !important;
}

.ups a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--br-card) !important;
	border: 1px solid var(--br-bordura-2);
	border-radius: 999px;
	padding: 9px 18px;
	color: var(--br-verde) !important;
	font-weight: 700;
	text-decoration: none !important;
}

.ups a::before { content: "↑"; }
.ups a:hover { background: var(--br-verde) !important; color: #fff !important; }

/* ------------------------------------------------------------
   16. Pagini statice (contact, termeni si conditii, politici)
   ------------------------------------------------------------ */

.br-pagina-stat-wrap > .br-sectiune-cap { margin-bottom: 22px; }

.br-pagina-stat {
	background: var(--br-card);
	border: 1px solid var(--br-bordura);
	border-radius: var(--br-raza-card);
	padding: 28px 30px;
	box-shadow: var(--br-umbra-card);
	font-size: 15px;
	line-height: 1.8;
	color: var(--br-text-2);
	min-width: 0;
	overflow-wrap: break-word;
}

.br-pagina-stat b, .br-pagina-stat strong { color: var(--br-text); font-weight: 700; }
.br-pagina-stat a { color: var(--br-verde) !important; text-decoration: underline; }

/* Titlurile de secțiune din documentele lungi (politici, termeni).
   `h3` are stiluri in template.css/typo.css, deci le fixam explicit. */
.br-pagina-stat h3 {
	margin: 34px 0 12px;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.4;
	color: var(--br-text);
	letter-spacing: -0.01em;
}
.br-pagina-stat h3:first-child { margin-top: 0; }

.br-pagina-stat p { margin: 0 0 14px; }
.br-pagina-stat ul, .br-pagina-stat ol { margin: 0 0 16px; padding-left: 22px; }
.br-pagina-stat li { margin-bottom: 7px; }

/* Tabelele din politica de cookie-uri si din politica GDPR. Fara regulile
   astea mostenesc stilul de tabel din template.css (chenar gros, padding
   mare), care la 390px iese din ecran. */
.br-pagina-stat table {
	width: 100%;
	margin: 0 0 18px;
	border-collapse: collapse;
	font-size: 14px;
	table-layout: fixed;
}
.br-pagina-stat th, .br-pagina-stat td {
	padding: 9px 11px;
	border: 1px solid var(--br-bordura);
	text-align: left;
	vertical-align: top;
	overflow-wrap: break-word;
}
.br-pagina-stat th { background: var(--br-fundal); font-weight: 800; color: var(--br-text); }

.br-pagina-stat code {
	padding: 1px 5px;
	border-radius: 4px;
	background: var(--br-fundal);
	font-size: 13px;
	color: var(--br-text-2);
}

/* Bannerul care explica marcajele [DE COMPLETAT: ...] din documentele
   juridice. Se sterge odata cu completarea datelor. */
.br-draft {
	margin: 0 0 24px;
	padding: 16px 18px;
	border: 1px solid #e6c36c;
	border-radius: var(--br-raza-mica);
	background: #fdf6e3;
	font-size: 14px;
	line-height: 1.7;
	color: #6b5316;
}
.br-draft p { margin: 0; }
.br-draft code { background: #f6e9c4; color: #6b5316; }

/* --- Contact ---
   Formularul de contact a fost scos (nu se trimit emailuri din site), deci a
   ramas doar afisarea adresei. Regulile de formular de mai jos sunt folosite in
   continuare de paginile de cont (utilizator/). */

.br-form-lead { margin: 0 0 22px; font-size: 15px; line-height: 1.7; color: var(--br-text-3); }

.br-contact {
	margin: 0;
	padding: 22px 24px;
	border: 1px solid var(--br-bordura);
	border-radius: var(--br-raza-mica);
	background: var(--br-fundal);
}

.br-contact-eticheta {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--br-text-6);
}

.br-contact-valoare { margin: 0; font-size: 18px; font-weight: 700; word-break: break-word; }
.br-contact-valoare a { color: var(--br-verde) !important; text-decoration: none; }
.br-contact-valoare a:hover { text-decoration: underline; }

.br-form-gril {
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 760px) {
	.br-form-gril { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.br-camp { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.br-camp-eticheta {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--br-text-4);
}

.br-camp input[type="text"],
.br-camp input[type="password"],
.br-camp input[type="email"],
.br-camp textarea {
	width: 100%;
	background: var(--br-input);
	border: 1px solid var(--br-bordura-2);
	border-radius: var(--br-raza);
	padding: 13px 15px;
	font-family: inherit;
	font-size: 15px;
	color: var(--br-text);
	min-width: 0;
}

.br-camp input[type="text"]:focus,
.br-camp input[type="password"]:focus,
.br-camp input[type="email"]:focus,
.br-camp textarea:focus {
	outline: none;
	border-color: var(--br-verde);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(18, 58, 53, .12);
}

.br-camp--mesaj textarea { min-height: 170px; resize: vertical; }

.br-form-jos {
	display: grid;
	gap: 20px;
	margin-top: 18px;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 760px) {
	.br-form-jos { grid-template-columns: minmax(0, 1fr) 230px; }
}

.br-captcha {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	background: var(--br-fundal);
	border: 1px solid var(--br-bordura);
	border-radius: var(--br-raza);
	padding: 16px;
}

.br-captcha img { display: block; border-radius: var(--br-raza-mica); }
.br-captcha .br-camp { width: 100%; }

.br-btn-trimite {
	width: 100%;
	background: var(--br-accent);
	color: var(--br-accent-text);
	border: 0;
	border-radius: var(--br-raza);
	padding: 13px 24px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
}

.br-btn-trimite:hover { background: var(--br-accent-deschis); }

.br-form-mesaj {
	border: 1px solid;
	border-radius: var(--br-raza);
	padding: 14px 18px;
	margin: 0 0 20px;
	font-size: 15px;
	font-weight: 600;
}

.br-form-mesaj--err { background: #fdf0ee; border-color: #f0c4bc; color: #9b3b28; }
.br-form-mesaj--ok { background: #eef6ee; border-color: #c3ddc3; color: #2c6b3f; }

/* ------------------------------------------------------------
   17. Paginile de cont (autentificare, inregistrare, resetare, panou)
   ------------------------------------------------------------ */

.br-form-wrap { max-width: 720px; }
.br-form-wrap > .br-sectiune-cap { margin-bottom: 22px; }

/* Cardul care incadreaza un formular de cont. */
.br-card-form {
	background: var(--br-card);
	border: 1px solid var(--br-bordura);
	border-radius: var(--br-raza-card);
	padding: 28px 30px;
	box-shadow: var(--br-umbra-card);
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

/* Doua coloane de campuri pe ecrane normale. */
@media (min-width: 760px) {
	.br-form-gril--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Bifa „tine-ma minte”. */
.br-bifa {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: var(--br-text-2);
	cursor: pointer;
}

.br-bifa input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--br-verde);
	flex: 0 0 auto;
	margin: 0;
}

.br-form-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 0;
	padding-top: 4px;
	font-size: 14px;
	font-weight: 600;
}

/* Caseta de mesaj este si recipientul mesajelor AJAX (message_holder):
   cat timp nu are continut nu trebuie sa ocupe spatiu. */
.br-form-mesaj:empty { display: none; }

/* Codul de verificare, asezat pe orizontala langa camp. */
@media (min-width: 560px) {
	.br-captcha--lat { flex-direction: row; align-items: center; gap: 18px; }
	.br-captcha--lat .br-camp { flex: 1 1 auto; }
}

.br-captcha--lat img { flex: 0 0 auto; }

/* Butonul de submit din cardurile de cont nu are nevoie de toata latimea. */
.br-card-form .br-btn-trimite { align-self: flex-start; width: auto; min-width: 200px; }