/* Contrakto: what the site adds to the original landing, in the look of the landing.
   The demo form of the site (TWMP Privacy) dressed like the form of the old page (Bootstrap fields,
   rounded message box, blue pill button), the text pages (privacy, cookies, accessibility). */

/* Readable buttons (WCAG 2.2 AA, chosen by the user on 11/11/2026): the blue of the landing with
   the same hue, a step darker, so white text on it reaches 4.7:1 (it was 3.7:1). It is the variable
   of the template: buttons, social icons on hover and preloader follow it. */
:root {
	--azure-color: #2676c5;
}

/* The grey note under the free months in the pricing, a step darker on the light background (4.7:1). */
#pricing .text-muted {
	color: #68717a !important;
}

/* Demo form: name and phone side by side, email and message on their own row, as before. */
#contacts .twmp-contact {
	box-sizing: border-box;
	max-width: 800px;
	margin: 0 auto;
	padding: 0 12px;
	border: 0;
	background: none;
	box-shadow: none;
	text-align: start;
}

#contacts .twmp-contact__form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

#contacts .twmp-contact__form > p,
#contacts .twmp-contact__grid > p {
	margin: 0;
}

#contacts .twmp-contact__required-note {
	font-size: 14px;
	color: var(--grey-color, #747474);
}

#contacts .twmp-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}

@media (min-width: 768px) {
	#contacts .twmp-contact__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Order of the old form: name, phone, then email across the row. */
	#contacts .twmp-contact__grid > .twmp-contact__field:nth-child(1) {
		order: 1;
	}

	/* The plugin spreads an odd last field across the row: here the phone stays next to the name. */
	#contacts .twmp-contact__grid > .twmp-contact__field:nth-child(3) {
		order: 2;
		grid-column: auto;
	}

	#contacts .twmp-contact__grid > .twmp-contact__field:nth-child(2) {
		order: 3;
		grid-column: 1 / -1;
	}
}

#contacts .twmp-contact__field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Labels and fields measured on the old form: Inter, labels 20px regular, pill fields 60px tall. */
#contacts .twmp-contact__field label {
	font-family: "Inter", sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 30px;
	color: var(--body-color, #3c3c3c);
}

/* Fields like .form-control of Bootstrap, with the blue border of the landing on hover and focus. */
#contacts .twmp-contact__input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 60px;
	padding: 15px 20px;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #212529;
	background-color: #fff;
	border: 1px solid #747474;
	border-radius: 50px;
	box-shadow: none;
	transition: border-color 0.15s ease-in-out;
}

#contacts .twmp-contact__input:hover,
#contacts .twmp-contact__input:focus {
	border-color: var(--azure-color);
}

#contacts .twmp-contact__input:focus-visible {
	outline: 2px solid var(--azure-color);
	outline-offset: 2px;
}

#contacts textarea.twmp-contact__input {
	height: 200px;
	padding: 15px;
	border-radius: 25px;
	resize: none;
}

#contacts .twmp-contact__consent,
#contacts .twmp-contact__altcha {
	margin: 0;
}

/* The button of the landing: blue pill, white bold text, black on hover. */
#contacts .twmp-contact__actions {
	display: flex;
	justify-content: center;
	margin: 0;
}

#contacts .twmp-contact__submit {
	padding: 13px 36px;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: #fff;
	background-color: var(--azure-color);
	border: 0;
	border-radius: 50px;
	cursor: pointer;
	transition: background-color 0.4s ease-in-out;
}

#contacts .twmp-contact__submit:hover {
	background-color: #0e0e0e;
	color: #fff;
}

#contacts .twmp-contact__submit:focus-visible {
	outline: 2px solid #0e0e0e;
	outline-offset: 3px;
}

#contacts .twmp-contact__status {
	text-align: center;
}

/* Text pages: the title and the text on the width of a reading column, under the header. */
.contrakto-page {
	padding-top: 160px;
}

.contrakto-page__body {
	max-width: 52rem;
	margin: 0 auto;
}

.contrakto-page__title {
	margin-bottom: 2rem;
}

.contrakto-page__content h2 {
	margin-top: 2.5rem;
	margin-bottom: 1rem;
	font-size: 28px;
	line-height: 1.25;
}

.contrakto-page__content h3 {
	margin-top: 1.75rem;
	margin-bottom: 0.75rem;
	font-size: 22px;
}

.contrakto-page__content ul {
	margin-bottom: 1rem;
	padding-left: 1.25rem;
	list-style: disc;
}

.contrakto-page__content li {
	display: list-item;
	margin-bottom: 0.5rem;
	list-style: disc;
}

/* Links in the text: the blue of the landing a step darker, readable on white (AA). */
.contrakto-page__content a {
	color: #2a6fbd;
	text-decoration: underline;
}

/* Legal links in the bottom bar, next to each other like the single Privacy link of the old page. */
.sofax-footer-bottom a + a {
	margin-left: 1.25rem;
}