/* Blok „Kontakt z formularzem" */

.rb-contact {
	background: var(--rb-color-bg-alt);
	padding-block: var(--rb-space-16);
}

.rb-contact__heading {
	font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);   /* do 52 px */
	line-height: 1.25;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.rb-contact__accent { display: block; }

.rb-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

/* ---------------------------------- lewa kolumna -------------------------------- */

.rb-contact__intro {
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: flex-start;
}

.rb-contact__text {
	font-size: 1.125rem;   /* 18 px */
	line-height: 1.55;     /* ~28 px */
	color: var(--rb-gray-600);
}
.rb-contact__text p:last-child { margin-bottom: 0; }

.rb-contact__cta {
	margin-top: auto;
	font-size: 1.125rem;   /* 18 px */
	line-height: 1;
	padding: 1.2rem 2.75rem;
}

/* ---------------------------------- formularz ----------------------------------- */

.rb-contact__form { position: relative; }

/* Strzałka prowadząca wzrok od przycisku do formularza. */
.rb-contact__arrow {
	position: absolute;
	left: clamp(-7.125rem, -8vw, -4rem);
	bottom: 3.5rem;
	display: grid;
	place-items: center;
	font-size: 0;
	width: 68px;
	height: 68px;
	border-radius: var(--rb-radius-full);
	background: var(--rb-color-accent);
	color: #fff;
}
.rb-contact__arrow .rb-icon { transform: rotate(180deg); }

.rb-contact__form-title {
	font-size: 1.125rem;   /* 18 px */
	font-weight: 700;
	/* W projekcie ten tytuł jest niemal czarny, ciemniejszy od granatu nagłówków. */
	color: #111;
	margin-bottom: var(--rb-space-6);
}

.rb-contact__missing {
	padding: var(--rb-space-4);
	border: 1px dashed var(--rb-gray-400);
	border-radius: var(--rb-radius-md);
	color: var(--rb-gray-500);
	font-size: var(--rb-fs-body-s);
}

/* ------------------------- pola Contact Form 7 -------------------------
 * CF7 renderuje własny markup, więc stylujemy go z zewnątrz. Pola są
 * podkreślone linią, bez ramek — jak w projekcie.
 */

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

.rb-form__row { margin-bottom: var(--rb-space-6); }

.rb-contact input[type="text"],
.rb-contact input[type="email"],
.rb-contact input[type="tel"] {
	width: 100%;
	padding: var(--rb-space-3) 0;
	font-family: inherit;
	font-size: 1.125rem;   /* 18 px */
	color: var(--rb-color-heading);
	background: transparent;
	border: 0;
	/* Linie pól są w projekcie ciemne, nie szare. */
	border-bottom: 1px solid #000;
	border-radius: 0;
	transition: border-color var(--rb-transition-fast);
}
.rb-contact input::placeholder { color: var(--rb-gray-400); }
.rb-contact input[type="text"]:focus,
.rb-contact input[type="email"]:focus,
.rb-contact input[type="tel"]:focus {
	outline: none;
	border-bottom-color: var(--rb-color-accent);
}

/* --- checkboxy: uczeń / rodzic oraz zgoda --- */

.rb-contact .wpcf7-checkbox,
.rb-contact .wpcf7-acceptance { display: block; }

.rb-contact .wpcf7-list-item { display: inline-flex; margin: 0 var(--rb-space-8) 0 0; }
.rb-contact .wpcf7-list-item label { display: inline-flex; align-items: center; gap: var(--rb-space-3); cursor: pointer; }

.rb-contact input[type="checkbox"] {
	appearance: none;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	margin: 0;
	background: #fff;
	border: 1px solid #000;
	border-radius: 8px;
	cursor: pointer;
	transition: border-color var(--rb-transition-fast), background var(--rb-transition-fast);
}
.rb-contact input[type="checkbox"]:hover { border-color: var(--rb-color-accent); }
.rb-contact input[type="checkbox"]:checked {
	background: var(--rb-color-accent);
	border-color: var(--rb-color-accent);
	/* haczyk rysowany tłem — bez dodatkowego elementu w markupie CF7 */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5.2 5.2L20 7' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 16px;
	background-repeat: no-repeat;
	background-position: center;
}
.rb-contact input[type="checkbox"]:focus-visible { outline: 3px solid var(--rb-orange-300); outline-offset: 2px; }

.rb-form__row--roles {
	padding-bottom: var(--rb-space-6);
	border-bottom: 1px solid #000;
}
.rb-form__row--roles .wpcf7-list-item label { font-size: 1.125rem; color: var(--rb-color-heading); }

.rb-form__row--consent { font-size: 0.875rem; line-height: 1.4; color: var(--rb-gray-600); }
.rb-form__row--consent .wpcf7-list-item { margin-right: 0; }
.rb-form__row--consent .wpcf7-list-item label { align-items: flex-start; gap: var(--rb-space-4); }

/* --- przycisk wysyłki --- */

.rb-form__actions { display: flex; justify-content: flex-end; }

.rb-contact input[type="submit"] {
	padding: 1.25rem 3.5rem;
	font-family: inherit;
	font-size: 1.125rem;   /* 18 px */
	line-height: 1;
	font-weight: var(--rb-fw-btn);
	color: #fff;
	background: var(--rb-navy-900);
	border: 0;
	border-radius: var(--rb-radius-full);
	cursor: pointer;
	transition: background var(--rb-transition-fast), transform var(--rb-transition-fast);
}
.rb-contact input[type="submit"]:hover { background: var(--rb-navy-950); transform: translateY(-1px); }
.rb-contact input[type="submit"]:focus-visible { outline: 3px solid var(--rb-orange-300); outline-offset: 3px; }

/* --- komunikaty walidacji --- */

.rb-contact .wpcf7-not-valid-tip { font-size: var(--rb-fs-body-xs); color: #b3261e; margin-top: var(--rb-space-2); }
.rb-contact .wpcf7-response-output {
	margin: var(--rb-space-5) 0 0;
	padding: var(--rb-space-4);
	border: 1px solid var(--rb-gray-300);
	border-radius: var(--rb-radius-md);
	font-size: var(--rb-fs-body-s);
}

/* ---------------------------------- responsywnie -------------------------------- */

@media (max-width: 900px) {
	.rb-contact { padding-block: var(--rb-space-10); }
	.rb-contact__heading { text-align: center; margin-bottom: var(--rb-space-6); }
	.rb-contact__accent { display: inline; }

	.rb-contact__grid { grid-template-columns: 1fr; gap: var(--rb-space-8); }

	.rb-contact__intro { align-items: center; text-align: center; gap: var(--rb-space-6); }
	.rb-contact__cta { padding-inline: var(--rb-space-5); }
	.rb-contact__cta { margin-top: 0; }

	/* Strzałka celuje w formularz obok — w układzie pionowym nie ma czego wskazywać. */
	.rb-contact__arrow { display: none; }

	.rb-contact__form-title { color: var(--rb-navy-900); }
	.rb-form__row--roles .wpcf7-list-item { display: flex; margin: 0 0 var(--rb-space-4); }
}