/* ==========================================================================
   MaskeZaTelefon — kontakt strana i forma (PL-04, 23.08.2026.)

   Učitava se SAMO na strani sa slugom `kontakt` — vidi `mzm_kontakt_stilovi()`
   u `inc/mzm-kontakt-forma.php`. Footer stoji na 20.408 strana proizvoda; ovaj
   fajl ne sme da im se pridruži (`PF-01`).
   ========================================================================== */

/* ── Raspored: podaci levo, forma desno ───────────────────────────────────── */

.mzm-kontakt-omot {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

/*
 * ⚠️ `minmax(0, 1fr)`, ne `1fr`. Gola `1fr` kolona uzima min-content sadržaja
 *    kao minimum i raširi se preko svoje kutije — izmereno 21.08. na koraku 2
 *    print dizajnera, gde je mreža šablona izgurala ceo grid van ekrana.
 */

@media (max-width: 860px) {
	.mzm-kontakt-omot {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}

/* ── Blok sa podacima o firmi ─────────────────────────────────────────────── */

.mzm-kontakt {
	padding: 24px;
	background: #f7f8f9;
	border-radius: 12px;
}

.mzm-kontakt h2 {
	font-size: 18px;
	font-weight: 700;
	color: var(--mzm-navy, #130a52);
	font-family: var(--mzm-font-family, inherit);
	margin: 0 0 10px;
}

.mzm-kontakt h2 + p {
	margin: 0 0 24px;
}

.mzm-kontakt p:last-child {
	margin-bottom: 0;
}

.mzm-kontakt a {
	color: var(--mzm-accent, #a313d1);
}

/* ── Forma ────────────────────────────────────────────────────────────────── */

.mzm-kontakt-forma {
	max-width: 720px;
}

.mzm-kontakt-red {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 16px;
}

@media (max-width: 549px) {
	.mzm-kontakt-red {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
}

.mzm-kontakt-polje {
	margin: 0 0 16px;
}

.mzm-kontakt-polje label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--mzm-navy, #130a52);
	font-family: var(--mzm-font-family, inherit);
}

/*
 * ⚠️ FLATSOME GAZI `border-radius` I `margin` NA SVAKOM `<input>`.
 *
 *    Isto je već palo na pretrazi kategorija (12.08.) i na pretrazi modela u
 *    print dizajneru: pravilo traži zaobljenje, a na ekranu je pravougaonik.
 *    Rešenje je selektor veće specifičnosti, BEZ `!important` — ovde `0,2,1`
 *    (`.mzm-kontakt-forma` + `input.mzm-...`), isto kao tamo.
 *
 * ⚠️ `margin: 0` nije ukras: Flatsome dodaje donju marginu inputu, pa se ona
 *    sabira sa marginom omotača i polja se razmaknu neujednačeno.
 */
.mzm-kontakt-forma input[type="text"],
.mzm-kontakt-forma input[type="email"],
.mzm-kontakt-forma textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1.5px solid #e5e7eb;
	border-radius: 8px;
	background: #fff;
	font-size: 15px;
	font-family: var(--mzm-font-family, inherit);
	color: var(--mzm-navy, #130a52);
	box-sizing: border-box;
	margin: 0;
	transition: border-color .15s;
}

.mzm-kontakt-forma input[type="text"]:focus,
.mzm-kontakt-forma input[type="email"]:focus,
.mzm-kontakt-forma textarea:focus {
	border-color: var(--mzm-accent, #a313d1);
	outline: none;
}

.mzm-kontakt-forma textarea {
	resize: vertical;
	min-height: 150px;
}

.mzm-kontakt-napomena {
	font-size: 12px;
	color: #6b7280;
	margin: 0 0 16px;
}

/*
 * ⚠️ Dugme je `<button>`, a Flatsome i njemu daje bočnu marginu — izmereno
 *    21.08.: `margin-right: 15.52px` na kartici šablona. Ne vidi se kao margina
 *    nego kao pogrešna širina.
 */
/*
 * ⚠️ `width: auto` je OBAVEZAN. Izmereno 23.08.: dugme je bilo 330px široko —
 *    tačno širina forme — iako je `inline-flex`. Flatsome dugmadima daje punu
 *    širinu, pa se `min-width` nije ni video: dugme nije bilo preveliko zbog
 *    svoje vrednosti nego zato što je uzelo sve što je moglo.
 *
 *    Isti obrazac kao margina na `<button>` (21.08.): tema postavi nešto što se
 *    ne vidi kao svoj uzrok, pa se popravlja pogrešan broj.
 */
.mzm-kontakt-forma .mzm-kontakt-dugme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 0;
	min-height: 44px;
	padding: 11px 28px;
	margin: 0;
	border: none;
	border-radius: 8px;
	background: var(--mzm-accent, #a313d1);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	font-family: var(--mzm-font-family, inherit);
	cursor: pointer;
	transition: background .15s;
}

@media (hover: hover) {
	.mzm-kontakt-forma .mzm-kontakt-dugme:hover {
		background: #7a0aa3;
	}
}

@media (max-width: 549px) {
	.mzm-kontakt-forma .mzm-kontakt-dugme {
		width: 100%;
	}
}

/* ── Poruka o ishodu ──────────────────────────────────────────────────────── */

.mzm-kontakt-poruka {
	padding: 14px 18px;
	border-radius: 8px;
	font-size: 14px;
	margin: 0 0 20px;
}

.mzm-kontakt-poruka--uspeh {
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	color: #065f46;
}

.mzm-kontakt-poruka--greska {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
}

/* ── Honeypot ─────────────────────────────────────────────────────────────── */

/*
 * ⚠️ `position: absolute` + `left: -9999px`, NE `display: none`.
 *
 *    Sakriveno polje bot prepoznaje po `display: none` i preskoči ga — a cela
 *    poenta je da ga popuni. Ovako je za bota obično polje, a čovek ga ne vidi.
 *
 * ⚠️ Ne dirati bez razloga: ovo je jedan od tri sloja zaštite od spama, i
 *    jedini koji ne traži ni JS ni transient.
 */
.mzm-kontakt-hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}