@charset "UTF-8";
/* Poptávkový formulář – Figma 391:1168 (1920 × 765): #F3F6F9, radius 12, padding 84/79, content 1370 left,
   vertical gaps 26. Fields 52px (border 1px #DFDFDF inside, radius 8, padding 14/16, placeholder #91A5BF);
   rows 2 × 677 / 3 × 446 (gap 16) → 6-column grid. Consent checkbox Figma 420:521 (396:1317).
   States (focus, error, checked, sending, success) are not in the design – decisions 2026-10-20. */
.inquiry {
	padding-block: 84px 79px;
	border-radius: 12px;
	background: var(--color-megamenu-card);
}

.inquiry__header {
	display: flex;
	flex-direction: column;
	gap: 26px;
	margin-bottom: 26px;
}

.inquiry__header p {
	margin: 0;
}

.inquiry__eyebrow {
	color: var(--theme-accent);
	font-size: 12px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
}

.inquiry__title {
	margin: 0;
	color: var(--color-navy);
	font-size: clamp(26px, 1.25rem + 1.4vw, 34px);
	font-weight: 500;
	line-height: 42px;
}

.inquiry__text {
	color: var(--color-text);
}

.inquiry-form__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 26px 16px;
}

.form-field {
	grid-column: span 6;
}

.form-field__control {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 52px;
	padding: var(--field-padding);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-white);
	color: var(--color-black);
	font: inherit;
	font-size: var(--font-size-body);
	line-height: 1.5;
	transition: border-color var(--transition);
}

.form-field__control::placeholder {
	color: var(--color-placeholder);
	opacity: 1;
}

/* Textarea with its mobile hint (see the max-width: 767px query). */
.form-area {
	position: relative;
}

.form-area__hint {
	display: none;
}

textarea.form-field__control {
	height: 120px;
	min-height: 120px;
	padding: 16px;
	resize: vertical;
}

/* Select – label inside the field (Figma 391:1180: "Druh přepravy:" 16/700 navy, gap 6, value #595C65,
   chevron 16px #595C65 on the right). The whole box looks like a field; the native select is transparent.
   Narrow fields (2026-11-12, design chybí): a long label ("Preferovaný způsob odpovědi:") pushed the value out of
   the field – the value wraps under the label once it would get less than 96 px. */
.form-select {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 6px;
	min-height: 52px;
	padding: var(--field-padding);
	padding-block: 13px; /* 1 + 13 + 24 + 13 + 1 = 52 */
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-white);
	cursor: pointer; /* the whole box opens the list (assets/js/forms.js) */
	transition: border-color var(--transition);
}

.form-select__label {
	flex-shrink: 0;
	color: var(--color-navy);
	font-weight: 700;
}

/* A long value fades out before the chevron (24px right padding) instead of a hard cut (2026-10-21). */
.form-select .form-field__control {
	flex: 1 0 96px;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent calc(100% - 24px));
	height: 24px; /* one text line – keeps the field 52 px (auto gave 54) */
	padding: 0 24px 0 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--color-text);
	cursor: pointer;
	appearance: none;
}

/* The whole field shows the focus ring (the select inside has none). */
.form-select:focus-within {
	outline: 2px solid var(--color-orange);
	outline-offset: 2px;
}

.form-select .form-field__control:focus-visible {
	outline: none;
}

.form-select__chevron {
	position: absolute;
	right: 16px;
	bottom: 17px; /* centred on the value line, also when it wraps under the label */
	width: 16px;
	height: 16px;
	color: var(--color-text);
	pointer-events: none;
}

/* Options list (not in the design, decision 2026-10-21): customizable select (appearance: base-select, Chrome /
   Edge) – a list under the whole field like the field itself: white, 1px #DFDFDF, radius 8, button hover shadow,
   options padding 10/16, 16/400 #595C65, hover / focus #F3F6F9, selected navy 700, "Vyberte…" in the placeholder
   colour, no checkmark. Other browsers keep the native list (padding of <option> cannot be styled there). */
@supports (appearance: base-select) {
	.form-select {
		anchor-name: --po-select;
	}

	.form-select .form-field__control,
	.form-select .form-field__control::picker(select) {
		appearance: base-select;
	}

	.form-select .form-field__control::picker-icon {
		display: none;
	}

	.form-select .form-field__control::picker(select) {
		position-anchor: --po-select;
		top: anchor(bottom);
		left: anchor(left);
		width: anchor-size(width);
		margin: 4px 0 0;
		padding: 6px 0;
		border: 1px solid var(--color-border);
		border-radius: var(--radius);
		background: var(--color-white);
		box-shadow: var(--shadow-button-hover);
	}

	/* Long options (e.g. the joined placeholder of Poštovní služby) stay on one line, cut with an ellipsis. */
	.form-select option {
		display: block;
		overflow: hidden;
		padding: 10px 16px;
		color: var(--color-text);
		font-size: var(--font-size-body);
		line-height: 1.5;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.form-select option:hover,
	.form-select option:focus-visible {
		background: var(--color-megamenu-card);
		outline: none;
	}

	.form-select option:checked {
		color: var(--color-navy);
		font-weight: 700;
	}

	.form-select option[value=""] {
		color: var(--color-placeholder);
		font-weight: 400;
	}

	.form-select option::checkmark {
		display: none;
	}
}

/* Field label: on desktop only for screen readers (the placeholder or the select label names the field, Figma).
   Below 1024 px (2026-11-12, decision of the user, design chybí): every field has its name above it – long names
   were cut in the placeholder and a mix of labels and placeholders looked inconsistent. See the media query below. */
.form-field__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Error (not in the design): red border and message 14px – megamenu red #D42000 (existing token). */
.form-field__error {
	margin: 6px 0 0;
	color: var(--color-error);
	font-size: var(--font-size-small);
	line-height: 1.45;
}

.form-field.is-invalid .form-field__control,
.form-field.is-invalid .form-select {
	border-color: var(--color-error);
}

/* The red border belongs to the select box, not to the native select inside it. */
.form-field.is-invalid .form-select .form-field__control {
	border: 0;
}

/* Consent – Figma 420:521: checkbox 24px, white, 1px #DFDFDF, radius 4, gap 12, text 16/400 #595C65.
   Checked (not in the design): orange fill with a white tick. */
.form-consent {
	margin-top: 26px;
}

/* Top-aligned: the 24px box matches the first 24px text line (Figma one line, centred – the same). */
.form-consent__row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.form-consent__input {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	margin: 0;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	background: var(--color-white) center / 14px no-repeat;
	cursor: pointer;
	appearance: none;
	transition: background-color var(--transition), border-color var(--transition);
}

.form-consent__input:checked {
	border-color: var(--color-orange);
	background-color: var(--color-orange);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.form-consent.is-invalid .form-consent__input {
	border-color: var(--color-error);
}

.form-consent__label {
	color: var(--color-text);
	cursor: pointer;
}

.inquiry-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.inquiry-form__message {
	margin: 26px 0 0;
	color: var(--color-error);
	text-align: center;
}

.inquiry-form__actions {
	display: flex;
	justify-content: center;
	margin-top: 26px;
}

/* Figma 391:1195: 296 × 60 (wider than its text + padding 24); main.css .button--primary (248) loads later. */
.inquiry-form .inquiry-form__submit {
	min-width: 296px;
}

.inquiry-form__submit:disabled {
	cursor: progress;
	opacity: 0.7;
}

/* Success (not in the design): white box replacing the form. */
.inquiry__success {
	margin: 0;
	padding: 24px 26px;
	border-radius: var(--radius);
	background: var(--color-white);
	color: var(--color-navy);
	font-weight: 700;
}

.inquiry__success:focus {
	outline: none;
}

@media (min-width: 1024px) {
	.form-field--half {
		grid-column: span 3;
	}

	.form-field--third {
		grid-column: span 2;
	}
}

/* Below 1024px – mobile and tablet (2026-11-12, decision of the user, design chybí): one column with the field names
   above the fields. On tablet the half / third columns cut the names in the placeholders even more than on mobile
   (32 of 66 fields at 768 px); from 1024 px the desktop layout of Figma. */
@media (max-width: 1023px) {
	/* Field names above the fields (see .form-field__label): navy, small text, regular weight, with a colon. The
	   placeholder repeats the name, so it is hidden; the select shows only its value ("Vyberte…" when empty). */
	.form-field__label {
		position: static;
		display: block;
		width: auto;
		height: auto;
		margin: 0 0 6px;
		overflow: visible;
		clip: auto;
		white-space: normal;
		color: var(--color-navy);
		font-size: var(--font-size-small);
		font-weight: 400;
		line-height: 1.45;
	}

	/* After the required star ("E-mailová adresa*:"); the screen-reader "(povinné)" before it is out of the flow. */
	.form-field__label::after {
		content: ":";
	}

	.form-field__control::placeholder {
		color: transparent;
	}

	/* The hidden placeholder of a textarea still overflowed it and showed a scrollbar while empty. */
	textarea.form-field__control:placeholder-shown {
		overflow: hidden;
	}

	/* Hint of an empty textarea (2026-11-12, decision of the user, design chybí): the part of the name the label
	   leaves out, in the placeholder style; at most 3 lines (padding 16, height 120), no scrolling. Gone once typing. */
	.form-area__hint {
		position: absolute;
		inset: 17px 17px auto;
		overflow: hidden;
		color: var(--color-placeholder);
		font-size: var(--font-size-body);
		line-height: 1.5;
		pointer-events: none;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}

	.form-field__control:placeholder-shown + .form-area__hint {
		display: -webkit-box;
	}

	.form-select__label {
		display: none;
	}
}

@media (max-width: 767px) {
	.inquiry {
		padding-block: 56px;
	}

	.inquiry__title {
		line-height: 1.25;
	}

	.inquiry-form__grid {
		row-gap: 16px;
	}

	.inquiry-form .inquiry-form__submit {
		width: 100%;
		min-width: 0;
	}
}

/* Variant S kontakty – Kontakt (Figma 776:1433): box 1370 × 713, #F3F6F9, radius 12 in the container; contact details
   525 | 1px #DFDFDF | form 844 (Figma has the line on the left edge of the box – kap. 12). 91px below the compact hero;
   no bottom padding of its own (the next block gives the gap). The form panel keeps the section header and fields. */
.inquiry--split {
	padding-block: 91px 0;
	border-radius: 0;
	background: none;
}

.inquiry__split {
	display: grid;
	grid-template-columns: minmax(0, 525fr) minmax(0, 845fr);
	overflow: hidden;
	border-radius: 12px;
	background: var(--color-megamenu-card);
}

/* Bottom 63: Figma pads 79 but clips the panel at the box height 713 (button ends 63px above). */
.inquiry__panel {
	padding: 48px 48px 63px;
	border-left: 1px solid var(--color-border);
}

/* Contact details (template-parts/components/contact-info.php, Figma 776:1434): padding 48, gap 32; header gaps 12;
   rows icon circle 40 #FFF3E6 + 16 + label 14/700 navy, 4, value 16/400 #595C65; rows 16 apart, address and
   opening hours 20 (Figma 781:1497). */
.contact-info {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 48px;
}

.contact-info__header {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.contact-info__header > * {
	margin: 0;
}

.contact-info__eyebrow {
	color: var(--theme-accent);
	font-size: 12px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
}

.contact-info__title {
	color: var(--color-navy);
	font-size: clamp(26px, 1.25rem + 1.4vw, 34px);
	font-weight: 500;
	line-height: 42px;
}

.contact-info__text {
	color: var(--color-text);
}

.contact-info__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-info__item--details + .contact-info__item--details {
	margin-top: 4px;
}

.contact-info__item {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.contact-info__icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--color-orange);
	background: var(--color-icon-bg);
}

.contact-info__icon .icon {
	width: 20px;
	height: 20px;
}

/* Phone and e-mail 22px, stroke 2 (Figma 776:1442 / 776:1450) – the shared 13px icons scale their stroke. */
.contact-info__icon :is(.icon--phone, .icon--mail) {
	width: 22px;
	height: 22px;
}

.contact-info__icon :is(.icon--phone, .icon--mail) path {
	stroke-width: 1.18;
}

.contact-info__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.contact-info__label {
	margin: 0;
	color: var(--color-navy);
	font-size: var(--font-size-small);
	font-weight: 700;
	line-height: 1.35;
}

.contact-info__value {
	margin: 0;
	color: var(--color-text);
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.contact-info__value--multiline {
	line-height: 1.45;
}

.contact-info__link {
	align-self: flex-start;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: text-decoration-color var(--transition);
}

.contact-info__link:hover,
.contact-info__link:focus-visible {
	text-decoration-color: currentColor;
}

.contact-info__link--email {
	color: var(--color-orange);
}

.contact-info__note {
	color: var(--color-orange);
	font-weight: 500;
}

/* Below 1024px (proposal, design missing): contact details above the form, the line between them horizontal. */
@media (max-width: 1023px) {
	.inquiry__split {
		grid-template-columns: minmax(0, 1fr);
	}

	.inquiry__panel {
		padding: 32px;
		border-top: 1px solid var(--color-border);
		border-left: 0;
	}

	.contact-info {
		padding: 32px;
	}
}

@media (max-width: 767px) {
	.inquiry--split {
		padding-block: 48px 0;
	}

	.inquiry__panel,
	.contact-info {
		padding: 24px 16px;
	}
}

/* Section titles of a form (field type "Nadpis sekce", Nezávazná poptávka – Figma 808:913 / 808:948 / 808:1029):
   24/500/42 navy, the whole row; the vertical gap 26 comes from the field grid. */
.inquiry-form__section-title {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--color-navy);
	font-size: 24px;
	font-weight: 500;
	line-height: 42px;
}

/* Area cards (field type "Výběr oblasti (karty)", Figma 810:598): 2 columns, gap 12; card 69px, padding 14/16,
   white, 1px #DFDFDF (inside the 14/16 padding as in Figma), radius 8, centred: icon 16 orange + 6 + title 14/700 navy, 4, text 12/400 #595C65.
   Selected (Figma 810:600): #EEF4FB, 2px blue border, icon and text blue. Hover and focus are not in the design:
   hover blue border, focus orange outline (as the fields). Native radios – arrows and space work. */
.form-cards {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.form-cards__legend {
	float: left;
	width: 100%;
	margin-bottom: 26px;
	padding: 0;
}

.form-cards__grid {
	clear: both;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.form-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 69px;
	padding: 13px 15px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-white);
	text-align: center;
	cursor: pointer;
	transition: border-color var(--transition), background-color var(--transition);
}

.form-card__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.form-card__title {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--color-navy);
	font-size: var(--font-size-small);
	font-weight: 700;
	line-height: 20px;
}

.form-card__icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--color-orange);
}

.form-card__icon path {
	stroke-width: 2;
}

.form-card__text {
	color: var(--color-text);
	font-size: 12px;
	line-height: 17px;
}

.form-card:hover {
	border-color: var(--color-blue);
}

.form-card:has(:checked) {
	padding: 12px 14px;
	border: 2px solid var(--color-blue);
	background: var(--color-selected);
}

.form-card:has(:checked) :is(.form-card__icon, .form-card__text) {
	color: var(--color-blue);
}

.form-card:has(:focus-visible) {
	outline: 2px solid var(--color-orange);
	outline-offset: 2px;
}

.form-cards.is-invalid .form-card:not(:has(:checked)) {
	border-color: var(--color-error);
}

/* Variant Poptávka – Nezávazná poptávka (Figma 808:589): form box | 50 | side panel 438 in the 1370 container (Figma
   850 | 50 | 438 from x 304 – kap. 12). The section starts 96px below the banner; 73 at the bottom + 67 of Naši
   klienti = 140 (Figma). Box #F3F6F9, radius 12, bottom line 1px #CDD9E9, padding 48 (bottom 53 – Figma clips the
   box 53px below the button), full-width button. Note below the box (Figma 816:1130): lock 24 blue + 10 + 16/400 navy,
   50px below. */
.inquiry--aside {
	padding-block: 96px 73px;
	border-radius: 0;
	background: none;
}

.inquiry__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 438px;
	gap: 50px;
	align-items: start;
}

.inquiry__box {
	padding: 48px 48px 53px;
	border-bottom: 1px solid var(--color-card-border);
	border-radius: 12px;
	background: var(--color-megamenu-card);
}

.inquiry--aside .inquiry-form__actions {
	display: block;
}

.inquiry--aside .inquiry-form .inquiry-form__submit {
	width: 100%;
	min-width: 0;
}

.inquiry__note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 50px 0 0;
	color: var(--color-navy);
	line-height: 1.45;
}

.inquiry__note-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: var(--color-blue);
}

/* Side panel (template-parts/components/inquiry-aside.php) – cards 44px apart (Figma 44 / 62 – kap. 12). */
.inquiry-aside {
	display: flex;
	flex-direction: column;
	gap: 44px;
}

.inquiry-aside h2,
.inquiry-aside p {
	margin: 0;
}

/* Benefits – the Hodnoty card (Figma 808:1063): gradient, radius 8, padding 24, gap 16; icon 32 #F47700 (stroke 2)
   + 12 + title 21/700 white; rows tick 16 white + 9 + 16/24 #BECDEF, the bold part 600; rows 16 apart. */
.inquiry-aside__benefits {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	border-radius: var(--radius);
	background: var(--gradient-card);
}

.inquiry-aside__benefits-title {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--color-white);
	font-size: var(--font-size-contact-name);
	font-weight: 700;
	line-height: 1.5;
}

.inquiry-aside__benefits-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	color: var(--color-megamenu-orange);
}

.inquiry-aside__benefits-icon path {
	stroke-width: 2;
}

.inquiry-aside__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.inquiry-aside__list li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	color: var(--color-benefit-text);
	line-height: 24px;
}

.inquiry-aside__list strong {
	font-weight: 600;
}

.inquiry-aside__check {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 4px;
	color: var(--color-white);
}

.inquiry-aside__check path {
	stroke-width: 2;
}

/* Contacts – the light contact box (Figma 808:992): white, radius 8, shadow, padding 27/26/36; title 21/700 navy
   (Figma black – kap. 12), 5, text 16/400 #595C65; rows (contact-card variant row, main.css); head office line
   31px below the rows, 16/400 #595C65 with the number 700. */
.inquiry-aside__contacts {
	padding: 27px 26px 36px;
	border-radius: var(--radius);
	background: var(--color-white);
	box-shadow: var(--shadow-contact);
}

.inquiry-aside__contacts-header {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.inquiry-aside__contacts-title {
	color: var(--color-navy);
	font-size: var(--font-size-contact-name);
	font-weight: 700;
	line-height: 1.5;
}

.inquiry-aside__contacts-text,
.inquiry-aside__central {
	color: var(--color-text);
	line-height: 1.3;
}

.inquiry-aside__people {
	margin: 0;
	padding: 0;
	list-style: none;
}

.inquiry-aside .inquiry-aside__central {
	margin-top: 31px;
}

.inquiry-aside__central a {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: text-decoration-color var(--transition);
}

.inquiry-aside__central a:hover,
.inquiry-aside__central a:focus-visible {
	text-decoration-color: currentColor;
}

/* Info box (Figma 820:1286): no fill, centred, padding 0/24/24; image 112, 16, title 21/700 navy, 16, text 16/600
   #91A5BF. */
.inquiry-aside__info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 0 24px 24px;
	text-align: center;
}

.inquiry-aside__image {
	width: 112px;
	height: 112px;
	object-fit: contain;
}

.inquiry-aside__info-title {
	color: var(--color-navy);
	font-size: var(--font-size-contact-name);
	font-weight: 700;
	line-height: 1.5;
}

.inquiry-aside__info-text {
	color: var(--color-placeholder);
	font-weight: 600;
	line-height: 24px;
}

/* Below 1200px (proposal, design missing): the panel below the form – benefits and info box side by side, contacts
   across the row. Below 768: one column, box padding 24/16, cards in one column under 600px. */
@media (max-width: 1199px) {
	.inquiry__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 56px;
	}

	.inquiry-aside {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px;
		align-items: start;
	}

	.inquiry-aside__contacts {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

@media (max-width: 767px) {
	.inquiry--aside {
		padding-block: 48px 56px;
	}

	.inquiry__box {
		padding: 24px 16px;
	}

	.inquiry-form__section-title {
		line-height: 1.3;
	}

	.inquiry__note {
		margin-top: 32px;
	}

	.inquiry-aside {
		grid-template-columns: minmax(0, 1fr);
	}

	.inquiry-aside__contacts {
		grid-row: auto;
		padding: 24px 20px 28px;
	}
}

@media (max-width: 599px) {
	.form-cards__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Attachment – Figma 886:1101: 68px, #EEF4FB, 2px #BECDEF, radius 8, centred; paperclip 16, label 14/700, hint 14/400,
   button 200 × 40 (Button 2, blue outline). Hover of the button = Outline button (kap. 9). */
.form-file {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 68px;
	padding: 12px 16px;
	border: 2px solid var(--color-benefit-text);
	border-radius: var(--radius);
	color: var(--color-navy);
	background: var(--color-selected);
	font-size: var(--font-size-small);
	line-height: 19.6px;
}

.is-invalid .form-file {
	border-color: var(--color-error);
}

.form-file__icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--color-blue);
}

.form-file__label {
	margin-right: -4px;
}

.form-file__label strong {
	font-weight: 700;
}

.form-file .form-file__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	opacity: 0;
}

.form-file__button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 40px;
	border: 1px solid var(--color-blue);
	border-radius: var(--radius);
	color: var(--color-navy);
	box-shadow: var(--shadow-button);
	cursor: pointer;
	font-size: var(--font-size-body);
	font-weight: 700;
	transition: color var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.form-file__button:hover,
.form-file__input:focus-visible ~ .form-file__button {
	border-color: transparent;
	color: var(--color-white);
	background: #4d8acf;
	box-shadow: var(--shadow-button-hover);
}

.form-file__input:focus-visible ~ .form-file__button {
	outline: 2px solid var(--color-blue);
	outline-offset: 2px;
}

.form-file__name {
	flex-basis: 100%;
	margin: 0;
	text-align: center;
	overflow-wrap: anywhere;
}

/* Note inside the form (section variant, Figma 920:1419). */
.inquiry-form .inquiry__note {
	margin-top: 26px;
}