/* ═══════════════════════════════════════════════════════════════
   Formularz kontaktowy CF7 — Papaja Brand Agency
   ═══════════════════════════════════════════════════════════════ */

   .ms-form {
	/* Metryka */
	--ms-line:  2px;      /* grubość podkreślenia pola */
	--ms-fs:    1.25rem;  /* stopień pisma pól i przycisku */
	--ms-lh:    1.5;
	--ms-pad:   .6rem;    /* tekst → linia */
	--ms-gap:   3rem;     /* linia → następne pole */

	/* Kolory */
	--ms-ink:   #111;
	--ms-muted: #999;     /* „(wymagane)" */
	--ms-error: #c00;

	/* Strzałka — proporcje 1:1 z przyciskami na stronie */
	--ms-arrow:      url(https://papajabrandagency.com/wp-content/uploads/2026/07/strzalka.svg);
	--ms-arrow-size: 1em;
	--ms-arrow-gap:  1em;
	--ms-arrow-move: .3125em;   /* odpowiednik 5px */

	max-inline-size: 45rem;
	color: var(--ms-ink);
	color-scheme: light;        /* bez tego Chrome maluje autofill szarością */
	font-size: var(--ms-fs);
	line-height: var(--ms-lh);
}

.ms-form .ms-field {
	position: relative;
	margin-block-end: var(--ms-gap);
}

.ms-form .wpcf7-form-control-wrap { display: block; }

/* ── Pola ───────────────────────────────────────────────────────
   Klasa .wpcf7-form-control (0,3,1) wygrywa z regułami motywu typu
   `.wpcf7 input[type="text"]` bez !important. `:not([type="submit"])`
   trzyma przycisk poza tą regułą — inaczej dostałby 100% szerokości
   i dolną linię.                                                   */

.ms-form .ms-field input.wpcf7-form-control:not([type="submit"]),
.ms-form .ms-field textarea.wpcf7-form-control {
	display: block;
	inline-size: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0 0 var(--ms-pad);
	border: 0;
	border-block-end: var(--ms-line) solid var(--ms-ink);
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: var(--ms-lh);
	appearance: none;
}

.ms-form .ms-field textarea.wpcf7-form-control {
	resize: none;
	overflow: hidden auto;
	field-sizing: content;   /* rośnie z treścią; bez wsparcia zostaje 1 wiersz */
	max-block-size: 10em;
}

/* Focus bez skoku layoutu — cień pogrubia linię zamiast border-width */
.ms-form .ms-field :is(input:not([type="submit"]), textarea).wpcf7-form-control:focus-visible {
	outline: 0;
	box-shadow: 0 var(--ms-line) 0 0 var(--ms-ink);
}

/* Autofill — zdejmujemy tło dokładane przez przeglądarkę.
   Trick z `box-shadow: inset` odpada (zamalowałby pole prostokątem,
   a tło formularza jest przezroczyste). Odroczona tranzycja sprawia,
   że UA nigdy nie zdąży domalować koloru.                          */
.ms-form .ms-field :is(input:not([type="submit"]), textarea).wpcf7-form-control:-webkit-autofill,
.ms-form .ms-field :is(input:not([type="submit"]), textarea).wpcf7-form-control:-webkit-autofill:hover,
.ms-form .ms-field :is(input:not([type="submit"]), textarea).wpcf7-form-control:-webkit-autofill:focus,
.ms-form .ms-field :is(input:not([type="submit"]), textarea).wpcf7-form-control:-webkit-autofill:active {
	-webkit-text-fill-color: var(--ms-ink);
	caret-color: var(--ms-ink);
	transition: background-color 0s 600000s, color 0s 600000s;
}

/* ── Etykieta w roli placeholdera ───────────────────────────────
   Prawdziwy <label> nałożony na pole: dwukolorowy tekst (czego
   natywny placeholder nie potrafi), klik ustawia focus, czytniki
   ekranu widzą etykietę. Natywny placeholder zostaje przezroczysty
   wyłącznie po to, żeby działał selektor :placeholder-shown.       */

.ms-form .ms-field ::placeholder { color: transparent; opacity: 1; }

.ms-form .ms-label {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	max-inline-size: 100%;
	line-height: var(--ms-lh);
	cursor: text;
	transition: opacity .15s ease;
}

.ms-form .ms-label__note { color: var(--ms-muted); }

/* :not(:placeholder-shown) zakotwiczone na konkretnej kontrolce —
   samo :has(:not(:placeholder-shown)) łapie każdy element w środku. */
.ms-form .ms-field:has(input:not(:placeholder-shown)) .ms-label,
.ms-form .ms-field:has(textarea:not(:placeholder-shown)) .ms-label {
	opacity: 0;
	pointer-events: none;
}

/* ── Zgoda RODO ─────────────────────────────────────────────────
   Struktura CF7: span.wpcf7-list-item > label > input + span      */

.ms-form .ms-field--consent {
	font-size: .875rem;
	line-height: 1.45;
}

.ms-form .wpcf7-acceptance .wpcf7-list-item {
	display: block;
	margin: 0;
}

.ms-form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: .625rem;
	cursor: pointer;
}

.ms-form .wpcf7-acceptance input[type="checkbox"] {
	flex: 0 0 auto;
	inline-size: 1.125em;
	block-size: 1.125em;
	margin: .15em 0 0;
	accent-color: var(--ms-ink);
}

/* ── Przycisk + strzałka ────────────────────────────────────────
   <input> nie przyjmuje ::after, więc pseudoelement siedzi na
   opakowaniu. `flex: 0 0 auto` jest krytyczne — bez niego flexbox
   ściska strzałkę przy ciasnym kontenerze. `order` pilnuje
   kolejności: tekst → strzałka → spinner CF7.                     */

.ms-form .ms-field--submit {
	margin-block-start: 2rem;
	margin-block-end: 0;
}

.ms-form .ms-submit {
	display: inline-flex;
	align-items: center;
	transition: opacity .3s ease;
}

.ms-form .ms-submit input[type="submit"] {
	flex: 0 0 auto;
	inline-size: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	appearance: none;
}

.ms-form .ms-submit::after {
	content: '';
	order: 1;
	flex: 0 0 auto;
	display: block;
	inline-size: var(--ms-arrow-size);
	block-size: auto;
	aspect-ratio: 16 / 14;   /* proporcje oryginalnego SVG */
	margin-inline-start: var(--ms-arrow-gap);
	background-color: currentColor;
	-webkit-mask: var(--ms-arrow) no-repeat center / contain;
	mask: var(--ms-arrow) no-repeat center / contain;
	transition: transform 1.5s cubic-bezier(0, .9, .4, 1.01);
}

.ms-form .ms-submit:has(input:hover:not(:disabled))::after,
.ms-form .ms-submit:has(input:focus-visible:not(:disabled))::after {
	transform: translateX(var(--ms-arrow-move));
}

/* Stan nieaktywny (niezaznaczona zgoda) — strzałka stoi w miejscu */
.ms-form .ms-submit:has(input:disabled) { opacity: .35; }
.ms-form .ms-submit:has(input:disabled)::after { transform: none; }
.ms-form .ms-submit input[type="submit"]:disabled { cursor: not-allowed; }

.ms-form .ms-submit input[type="submit"]:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.ms-form .wpcf7-spinner {
	order: 2;
	flex: 0 0 auto;
	margin-inline-start: 1rem;
}

/* ── Honeypot (mini-plugin) ─────────────────────────────────────
   Bez display:none — część botów pomija pola ukryte w ten sposób. */

.ms-form .ms-hp {
	position: absolute !important;
	inset-inline-start: -9999px;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
}

/* ── Komunikaty CF7 ─────────────────────────────────────────────
   Błąd sygnalizuje wyłącznie czerwona linia — bez wypełnienia,
   żeby nie łamać układu opartego na samych podkreśleniach.        */

.ms-form .ms-field :is(input:not([type="submit"]), textarea).wpcf7-form-control.wpcf7-not-valid {
	background: none;
	border-block-end-color: var(--ms-error);
}

.ms-form .wpcf7-not-valid-tip {
	margin-block-start: .5rem;
	font-size: .875rem;
	color: var(--ms-error);
}

.ms-form .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: .875rem 1rem;
	font-size: .9375rem;
}