/* ===========================================================================
   system.css -- sistemul vizual al paginilor publice de pe www.3xforum.ro
   (forum.html, inscriere.php, news/index.php, news/404.php).

   Directia "Placa": adresa e obiectul central al paginii.

   Doua lucruri de tinut minte cind se umbla aici:

   1. Fisierul e scris peste clasele care existau deja in paginile astea
      (punmain, punhead, puncon1right, puncon2, punspacer), ca sa nu fie
      nevoie de rescris markupul din inscriere.php. Clasele noi sint cele
      din blocurile marcate mai jos.

   2. NU se incarca pe forumurile propriu-zise. Acolo rulează in
      continuare style/<tema>.css, cele 18 teme, prin header.php.
      /style/ e servit de nginx cu expires 365d, deci orice modificare
      aici cere bumpul lui SYSTEM_CSS_V din include/subdomeniu.php.
   =========================================================================== */

:root {
	--navy:      #0A2B47;
	--blue:      #12507F;
	--blue-lift: #1D6FAE;
	--ice:       #F2F7FB;
	--rule:      #C9D7E3;
	--rule-soft: #E5EDF4;
	--ink:       #101E29;
	--mute:      #5B6E7E;
	--paper:     #FFFFFF;
	--ok:        #276B4C;
	--ok-bg:     #E4F1EA;
	--warn:      #8A4B12;
	--warn-bg:   #FBEFE2;

	--ff:      "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--ff-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--gutter:    34px;
	--radius:    7px;
	--radius-sm: 5px;
	--maxw:      1140px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--ff);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

:focus-visible { outline: 2px solid var(--blue-lift); outline-offset: 2px; }

.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--ff-mono); }

/* --- latimea paginii ---------------------------------------------------- */
.band { width: 100%; }
.band > .inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* --- antet -------------------------------------------------------------- */
.mast { border-bottom: 1px solid var(--rule); background: var(--paper); }
.mast .inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px;
}
.mark {
	display: inline-flex; align-items: center; gap: 2px;
	font-weight: 600; font-size: 17px; letter-spacing: -.02em; color: var(--ink);
}
.mark:hover { text-decoration: none; }

/* Sigla: doua bule de dialog (una in spate, palida -- raspunsul) cu "3x"
   asezat peste bula din fata. Formele sint SVG, literele raman text HTML,
   deci nu depind de incarcarea fontului. Culorile se inverseaza in subsol,
   vezi .sub .mark mai jos. */
/* inline-block, nu doar flex item: in subsol `.sub a { display: block }`
   (0,1,1) bate `.mark { display: inline-flex }` (0,1,0), deci marca nu e
   flex acolo, iar un span inline ar ignora width/height si bulele ar cadea
   peste cuvint. */
.sigla {
	position: relative; flex: none; display: inline-block; vertical-align: middle;
	width: 31px; height: 26px; margin-right: 2px; font-size: 11px;
}
.sigla svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.sigla .ecou { fill: var(--blue); opacity: .34; }
.sigla .bula { fill: var(--blue); }
/* Procente, nu px: asa sigla se scaleaza schimbind doar width/height/font-size
   pe .sigla (vezi subsolul, unde sta singura si mai mare). Valorile sint
   corpul bulei din fata din viewBox: 4/26, 27/31, 17/26. */
.sigla i {
	position: absolute; left: 0; top: 15.4%; width: 87.1%; height: 65.4%;
	display: grid; place-items: center; font-style: normal; color: #fff;
	font-size: 1em; font-weight: 700; font-family: var(--ff-mono); letter-spacing: -.03em;
}
.mast nav { display: flex; align-items: center; gap: 4px; font-size: 14px; flex-wrap: wrap; }
/* :not(.cta) -- altfel "color: var(--mute)" bate "color: #fff" din .cta
   (specificitate 0,1,2 fata de 0,1,0) si butonul albastru din antet ramine
   cu text gri pe albastru. La fel pentru padding. */
.mast nav a:not(.cta) { padding: 7px 11px; border-radius: var(--radius-sm); color: var(--mute); }
.mast nav a:not(.cta):hover { background: var(--ice); color: var(--ink); text-decoration: none; }

/* --- butoane ------------------------------------------------------------ */
.cta {
	display: inline-block; background: var(--blue); color: #fff;
	font-family: var(--ff); font-weight: 600; font-size: 14px;
	padding: 9px 16px; border: 1px solid var(--blue); border-radius: var(--radius-sm);
	cursor: pointer;
}
.cta:hover { background: var(--blue-lift); border-color: var(--blue-lift); color: #fff; text-decoration: none; }
.cta.ghost { background: transparent; color: var(--blue); border-color: var(--rule); }
.cta.ghost:hover { background: var(--ice); color: var(--blue); }

/* --- eroul cu placa ----------------------------------------------------- */
.hero { background: var(--ice); border-bottom: 1px solid var(--rule); text-align: center; }
.hero .inner { padding-top: 62px; padding-bottom: 54px; }
.hero h1 {
	font-size: 46px; line-height: 1.02; letter-spacing: -.035em; font-weight: 600;
	margin: 0 auto 14px; max-width: 19ch; text-wrap: balance;
}
.hero .sell { font-size: 17.5px; line-height: 1.5; color: var(--mute); max-width: 50ch; margin: 0 auto 32px; }

.plate {
	max-width: 660px; margin: 0 auto; background: var(--paper);
	border: 1px solid var(--rule); border-radius: 12px; padding: 28px 28px 24px;
	box-shadow: 0 12px 34px -14px rgba(10,43,71,.30);
}
.plate .big {
	font-family: var(--ff-mono); font-size: 34px; letter-spacing: -.03em;
	color: var(--navy); line-height: 1.12; word-break: break-all;
}
.plate .big s { text-decoration: none; color: #93A8B8; }
.plate .row {
	display: flex; align-items: center; justify-content: center;
	gap: 10px; margin: 14px 0 20px; min-height: 24px; flex-wrap: wrap;
}
.plate .stamp { font-size: 13px; color: var(--mute); }
.plate .micro { font-size: 13px; color: var(--mute); margin: 14px 0 0; }

/* --- cimpul de adresa --------------------------------------------------- */
.addr {
	display: flex; align-items: stretch; max-width: 520px; margin: 0 auto;
	background: var(--paper); border: 1px solid var(--rule);
	border-radius: var(--radius); overflow: hidden;
	box-shadow: 0 1px 2px rgba(10,43,71,.07);
}
.addr:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29,111,174,.16); }
.addr.err { border-color: var(--warn); }
.addr input {
	flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
	font-family: var(--ff-mono); font-size: 17px; color: var(--ink);
	padding: 12px 4px 12px 14px;
}
.addr .suffix {
	flex: none; display: grid; place-items: center; padding: 0 12px 0 0;
	font-family: var(--ff-mono); font-size: 17px; color: #8FA3B3; white-space: nowrap;
}
.addr button {
	flex: none; border: 0; background: var(--blue); color: #fff; cursor: pointer;
	font-family: var(--ff); font-weight: 600; font-size: 14.5px;
	padding: 0 20px; white-space: nowrap;
}
.addr button:hover { background: var(--blue-lift); }

.badge {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--ok-bg); color: var(--ok);
	font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 20px;
	white-space: nowrap;
}
.badge b { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: block; }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.mut  { background: var(--ice); color: var(--mute); }

.sugestii { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.sugestii button {
	font-family: var(--ff-mono); font-size: 12.5px; color: var(--blue); cursor: pointer;
	background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 4px 9px;
}
.sugestii button:hover { border-color: var(--blue); background: var(--ice); }

/* --- banda cu forumuri noi ---------------------------------------------- */
.live { border-bottom: 1px solid var(--rule); background: var(--paper); }
.live .head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 16px; padding-top: 18px; padding-bottom: 12px; flex-wrap: wrap;
}
.live .head p { margin: 0; font-size: 13px; font-weight: 600; color: var(--mute); letter-spacing: .02em; }
.live .head a { font-size: 13px; }
/* Cinci coloane, cate randuri intoarce interogarea. minmax-ul e potrivit
   ca la 1140px sa incapa toate cinci pe un rand: al saselea ar cadea singur
   pe randul doi, cu chenarul din stanga atirnind in gol. Daca vin mai putine
   randuri, auto-fit le intinde pe latime, fara celule goale. */
.live .grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	border-top: 1px solid var(--rule-soft);
}
.live .grid div { padding: 13px 0 13px 16px; border-left: 1px solid var(--rule-soft); min-width: 0; }
.live .grid div:first-child { border-left: 0; padding-left: 0; }
.live .grid a {
	font-family: var(--ff-mono); font-size: 13.5px; display: block;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.live .grid em { font-style: normal; display: block; color: var(--mute); font-size: 12.5px; margin-top: 3px; }

/* --- bara de cifre ------------------------------------------------------ */
.stats { border-bottom: 1px solid var(--rule); background: var(--ice); }
.stats .inner { display: flex; flex-wrap: wrap; padding: 0; }
.stats div {
	flex: 1 1 155px; padding: 17px var(--gutter);
	border-left: 1px solid var(--rule); font-size: 13px; color: var(--mute);
}
.stats div:first-child { border-left: 0; }
.stats b {
	display: block; font-size: 27px; font-weight: 600; letter-spacing: -.03em;
	color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; margin-bottom: 1px;
}

/* --- sectiuni ----------------------------------------------------------- */
.sect .inner { padding-top: 40px; padding-bottom: 40px; }
.sect.tint { background: var(--ice); border-top: 1px solid var(--rule); }
.secttl { font-size: 21px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 5px; }
.secsub { font-size: 14.5px; color: var(--mute); margin: 0 0 22px; max-width: 58ch; }
.prose { max-width: 64ch; }

/* --- tabele: clasele mostenite ------------------------------------------ */
table.punmain {
	width: 100%; border-collapse: collapse; background: var(--paper);
	border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
}
table.punmain td { padding: 14px 16px; vertical-align: top; text-align: left; }
td.punhead, tr.punhead td {
	background: var(--ice); color: var(--mute);
	font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
	padding-top: 9px; padding-bottom: 9px; border-bottom: 1px solid var(--rule);
}
td.puncon1right {
	width: 212px; font-weight: 600; font-size: 14.5px;
	color: var(--ink); background: var(--paper); white-space: normal;
}
td.puncon1, td.puncon2 { color: var(--mute); font-size: 14.5px; background: var(--paper); }
table.punmain tr + tr td { border-top: 1px solid var(--rule-soft); }
table.punspacer { display: none; }

/* --- formulare ---------------------------------------------------------- */
.field { margin-bottom: 4px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--ink); }
.field .hint { font-size: 12.5px; color: var(--mute); margin-top: 6px; }
.field .hint.warn { color: var(--warn); }

input[type=text], input[type=password], input[type=email], select, textarea {
	font-family: var(--ff); font-size: 15px; color: var(--ink); background: var(--paper);
	border: 1px solid var(--rule); border-radius: var(--radius-sm);
	padding: 10px 12px; width: 100%; max-width: 420px;
}
textarea { max-width: 100%; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
	outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29,111,174,.16);
}
.subdomeniu { display: flex; align-items: stretch; max-width: 420px; }
.subdomeniu input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); border-right: 0; }
.subdomeniu .suffix {
	display: grid; place-items: center; padding: 0 12px;
	border: 1px solid var(--rule); border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	background: var(--ice); color: var(--mute); font-family: var(--ff-mono); font-size: 14px;
	white-space: nowrap;
}
.stickycta { position: sticky; bottom: 0; background: var(--paper); border-top: 1px solid var(--rule); }
.stickycta .inner { padding-top: 12px; padding-bottom: 12px; }

/* --- portal ------------------------------------------------------------- */
.findbar { display: flex; gap: 8px; max-width: 520px; }
.findbar input[type=text] { max-width: none; }
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.cats a {
	display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
	padding: 14px 15px; border: 1px solid var(--rule); border-radius: var(--radius);
	background: var(--paper); color: var(--ink); font-weight: 500; font-size: 14.5px;
}
.cats a:hover { border-color: var(--blue); background: var(--ice); text-decoration: none; }
.cats a i {
	font-style: normal; color: var(--mute); font-size: 13px;
	font-family: var(--ff-mono); font-variant-numeric: tabular-nums;
}
.feed {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 0 30px; border-top: 1px solid var(--rule-soft);
}
.feed a {
	display: block; padding: 11px 0; border-bottom: 1px solid var(--rule-soft);
	color: var(--ink); font-size: 14.5px; line-height: 1.35;
}
.feed a:hover { color: var(--blue); text-decoration: none; }
.feed em { display: block; font-style: normal; font-size: 12.5px; color: var(--mute); margin-top: 3px; font-family: var(--ff-mono); }

/* Slot de banner cu inaltime rezervata, ca reclama sa nu mai impinga
   continutul in jos cind se incarca. */
/* Inaltimea e cea a creativei din include/reclama.php (468x60), rezervata
   ca bannerul sa nu mai impinga continutul in jos cind se incarca. */
.slot { min-height: 60px; display: grid; place-items: center; }
.slot.gol { border: 1px dashed var(--rule); border-radius: var(--radius); background: var(--ice); }

.forumcard {
	border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper);
	padding: 16px 18px; margin-bottom: 10px;
}
.forumcard h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.forumcard h3 a { font-family: var(--ff-mono); font-size: 15px; }
.forumcard .cifre { font-size: 12.5px; color: var(--mute); font-variant-numeric: tabular-nums; margin: 0 0 6px; }
.forumcard p { margin: 0; font-size: 14px; color: var(--mute); }

.pager { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 22px; }
.pager a, .pager span {
	padding: 7px 12px; border: 1px solid var(--rule); border-radius: var(--radius-sm);
	font-size: 14px; color: var(--blue); font-variant-numeric: tabular-nums;
}
.pager span { background: var(--blue); border-color: var(--blue); color: #fff; }
.pager a:hover { background: var(--ice); text-decoration: none; }

/* --- subsol ------------------------------------------------------------- */
.sub { background: var(--navy); color: #B7CBDC; font-size: 13.5px; }
.sub .inner {
	padding-top: 36px; padding-bottom: 36px;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 26px;
}
.sub a { color: #DCE8F2; display: block; padding: 3px 0; }
.sub h5 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: #7B98B2; letter-spacing: .04em; }
.sub .mark { color: #fff; margin-bottom: 8px; }
.sub .mark .ecou,
.sub .mark .bula { fill: #fff; }
.sub .mark i { color: var(--navy); }
/* In subsol marca sta fara cuvint, deci sigla poate creste. */
.sub .singura .sigla { width: 43px; height: 36px; font-size: 15px; margin-right: 0; }
.sub .desc { color: #7B98B2; }

/* --- mesaje ------------------------------------------------------------- */
.mesaj {
	border: 1px solid var(--rule); border-left: 3px solid var(--warn);
	border-radius: var(--radius); background: var(--paper);
	padding: 18px 20px; max-width: 620px;
}
.mesaj h2 { margin: 0 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.mesaj p { margin: 0 0 12px; color: var(--mute); }
.mesaj p:last-child { margin-bottom: 0; }

/* --- telefon si tableta ------------------------------------------------- */
@media (max-width: 700px) {
	:root { --gutter: 18px; }
	body { font-size: 14.5px; }

	.mast nav a:not(.cta) { display: none; }

	.hero .inner { padding-top: 30px; padding-bottom: 28px; }
	.hero h1 { font-size: 29px; max-width: none; }
	.hero .sell { font-size: 15px; margin-bottom: 22px; }

	.plate { padding: 18px 16px 16px; border-radius: 10px; }
	.plate .big { font-size: 21px; }

	.addr { flex-wrap: wrap; }
	.addr input { width: 100%; flex: 1 1 60%; font-size: 16px; }
	.addr button { width: 100%; flex: 1 1 100%; padding: 12px 0; }

	/* O coloana, nu doua: la doua, al cincilea rand ramine singur. */
	.live .grid { grid-template-columns: 1fr; }
	.live .grid div { border-left: 0; border-top: 1px solid var(--rule-soft); padding-left: 0; }
	.live .grid div:first-child { border-top: 0; }

	.stats div { flex: 1 1 50%; padding: 14px var(--gutter); }
	.stats div:nth-child(3) { border-left: 0; }

	.sect .inner { padding-top: 24px; padding-bottom: 24px; }

	/* Tabelele mostenite: eticheta urca deasupra cimpului. Lucreaza
	   impreuna cu scoaterea lui width=180 din atributele din inscriere.php. */
	table.punmain, table.punmain tbody, table.punmain tr, table.punmain td { display: block; width: auto; }
	td.puncon1right { padding-bottom: 2px; font-size: 14px; }
	td.puncon1, td.puncon2 { padding-top: 0; font-size: 14px; }
	table.punmain tr + tr td.puncon1right { border-top: 1px solid var(--rule-soft); }
	table.punmain tr + tr td.puncon1, table.punmain tr + tr td.puncon2 { border-top: 0; }

	.sub .inner { grid-template-columns: 1fr 1fr; padding-top: 24px; padding-bottom: 24px; }
	.slot { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}