/* =============================================================
   KOMPONENT: Formularz kontaktowy (.mbw-form)
   Render: inc/mbw-form.php (shortcode [mbw_form]). Czyste, jasne pola,
   etykiety nad polami (jak we wzorcu hp4u). Tokeny --mbw-form-* = pokrętła.
   Kolory/fonty z theme.json; przycisk reużywa .mbw-btn.
   ============================================================= */
:root {
	--mbw-form-gap:        1.8rem;  /* odstęp między polami (więcej powietrza) */
	--mbw-form-line:       #d8d2cb;                                              /* cienka pozioma kreska pola (rest) */
	--mbw-form-line-focus: var(--wp--preset--color--theme-palette-6, #2980b9);   /* gruba kreska na focus = niebieska */
	--mbw-form-line-thick: var(--mbw-nav-line, 4px);                             /* grubość jak krecha w menu */
	--mbw-form-label:      var(--wp--preset--color--theme-palette-3, #262626);
	--mbw-form-error:      #c0392b;
}

.mbw-form-wrap {
	max-width: 100%;
}

.mbw-form__title {
	margin: 0 0 1.5rem;
	/* H2 → Playfair dziedziczy z globalnej skali */
}

/* Honeypot — całkowicie poza ekranem, niewidoczny dla ludzi. */
.mbw-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mbw-form__row {
	display: flex;
	flex-direction: column;
	margin: 0 0 var(--mbw-form-gap);
}

/* Etykieta — mała, UPPERCASE, dyskretna (klarownie jak we wzorze Coeval),
   ale naszym fontem (Jost). */
.mbw-form__label {
	font-family: var(--wp--preset--font-family--jost, system-ui, sans-serif);
	font-weight: 500;
	font-size: 0.8rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--mbw-form-label);
	margin-bottom: 0.5rem;
}
.mbw-form__req { color: var(--mbw-form-error); }

/* Pole = sama POZIOMA KRESKA na dole (bez ramki, tła, cienia, zaokrągleń). */
.mbw-form__field {
	position: relative;
	display: block;
}
/* GRUBA kreska wjeżdżająca L→R na focus — jak podkreślenie w menu (.mbw-nav). */
.mbw-form__field::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;             /* siada na cienkiej kresce pola */
	width: 100%;
	height: var(--mbw-form-line-thick);
	background: var(--mbw-form-line-focus);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .25s ease;
}
.mbw-form__field:focus-within::after {
	transform: scaleX(1);
}

.mbw-form__input {
	font-family: var(--wp--preset--font-family--jost, system-ui, sans-serif);
	font-size: 1.05rem;
	line-height: 1.5;
	color: var(--mbw-form-label);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--mbw-form-line);  /* cienka pozioma kreska */
	border-radius: 0;
	padding: 0.6rem 0;
	width: 100%;
	box-shadow: none;                               /* bez cieni */
}
.mbw-form__input:focus {
	outline: none;                                  /* podkreślenie robi ::after */
}
/* Kadence narzuca inputom żółty kolor tekstu (palette1) — wymuszamy grafit.
   Podwójna klasa (0,2,0) + !important bije regułę Kadence `input[type=...]`. */
.mbw-form__input.mbw-form__input {
	color: var(--wp--preset--color--theme-palette-3, #262626) !important;
	-webkit-text-fill-color: var(--wp--preset--color--theme-palette-3, #262626); /* Safari/autofill */
}
.mbw-form__input::placeholder {
	color: #9a948c;                                 /* placeholder dyskretny, nie żółty */
	opacity: 1;
}
/* Treść wiadomości — pole wieloliniowe: CAŁE obwiedzione linią (ramka),
   nie samo podkreślenie (na wysokim polu kreska u dołu gubi kształt). */
.mbw-form__textarea {
	resize: vertical;
	min-height: 150px;
	border: 1px solid var(--mbw-form-line);
	border-radius: 6px;
	padding: 0.85rem 1rem;
}
.mbw-form__textarea:focus {
	border-color: var(--mbw-form-line-focus);  /* na focus ramka niebieska */
}
/* textarea ma własną ramkę → nie rysujemy wjeżdżającej grubej kreski dołem */
.mbw-form__field--area::after {
	display: none;
}

/* Zgoda RODO — checkbox obok tekstu. */
.mbw-form__row--consent { margin-top: 0.5rem; }
.mbw-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-family: var(--wp--preset--font-family--jost, system-ui, sans-serif);
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--mbw-form-label);
	cursor: pointer;
}
.mbw-form__consent input { margin-top: 0.2rem; flex: 0 0 auto; }

.mbw-form__row--submit { margin-top: 0.5rem; }

/* Komunikaty walidacji / wysyłki. */
.mbw-form__error {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.9rem;
	color: var(--mbw-form-error);
}
.mbw-form__input[aria-invalid="true"] { border-color: var(--mbw-form-error); }

.mbw-form__notice {
	font-family: var(--wp--preset--font-family--jost, system-ui, sans-serif);
	font-size: 1rem;
	padding: 1rem 1.25rem;
	border-radius: var(--mbw-form-radius);
	margin: 0 0 1.5rem;
}
.mbw-form__notice--ok {
	background: rgba(41, 128, 185, 0.08);
	border-left: 4px solid var(--wp--preset--color--theme-palette-6, #2980b9);
}
.mbw-form__notice--err {
	background: rgba(192, 57, 43, 0.08);
	border-left: 4px solid var(--mbw-form-error);
}

/* Rząd przycisków w kolumnie danych (np. e-mail + telefon / mapy). */
.mbw-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.75rem;
}