/** ПОШАГОВАЯ ЗАЯВКА НА ЭКСПЕРТИЗУ **/

/* Шапка шагов */
.expertise-step-tab {
    background-color: var(--brand-normal-grey);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.expertise-step-tab span {
    color: #ffffff;
}

/* Цвет плашки шага, на котором пользователь находится СЕЙЧАС (Станет черным) */
.expertise-step-tab.is-active {
    background-color: var(--brand-grey);
}
.expertise-step-tab.is-active span {
    color: #ffffff;
}

/* Цвет плашек шагов, которые пользователь УЖЕ ПРОШЕЛ (Станет зеленым) */
.expertise-step-tab.is-done {
    background-color: var(--brand-green);
}
.expertise-step-tab.is-done span {
    color: #ffffff;
}

/** Панели шагов **/
.expertise-panel {
	display: none;
	padding: 20px;
}

.expertise-panel.is-active {
	display: block;
}

/** Поля формы **/
.expertise-field {
	display: flex;
	flex-direction: column;
}

.expertise-field label,
.expertise-label {
	font-size: 112%;
	margin: 8px 0;
	display: block;
}

.expertise-input,
.expertise-select,
.expertise-textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 16px;
	border: 1px solid #e0e0e0;
	background-color: #ffffff;
	font-family: inherit;
	font-size: 125%;
	color: #000000;
}

.expertise-textarea {
	min-height: 100px;
	resize: vertical;
}

.expertise-input:focus,
.expertise-select:focus,
.expertise-textarea:focus {
	outline: 1px solid var(--brand-normal-grey);
	outline-offset: -2px;
	border-color: transparent;
}

/** Сетка полей в форме **/
.expertise-fields-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0 20px;
}

.expertise-fields-grid .expertise-field-full {
	grid-column: 1 / -1;
}

/** Карточка стоимости и сроков **/
.expertise-info-card {
	padding: 0 40px;
}

.expertise-info-card .expertise-info-row {
	display: flex;
	justify-content: space-between;
	padding: 20px;
	border-bottom: 1px solid #e3e3e3;
	font-size: 125%;
}

.expertise-info-card .expertise-info-row:last-child {
	border-bottom: none;
}

.expertise-info-value {
	font-weight: 600;
    font-size: 1.05em;
}

/** Предзагрузка файлов **/
.expertise-file-drop {
	border: 2px dashed #c9c9c9;
	border-radius: 6px;
	padding: 24px;
	text-align: center;
	color: #757575;
	cursor: pointer;
	background-color: #fafafa;
}

.expertise-file-drop:hover {
	border-color: var(--brand-green);
	color: var(--brand-black);
}

.expertise-file-drop input[type="file"] {
	display: none;
}

.expertise-file-list {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.expertise-file-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 12px;
	background-color: var(--brand-light-grey);
	border-radius: 4px;
	font-size: 88%;
}

.expertise-file-remove {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--brand-orange);
	font-size: 112%;
	line-height: 1;
	padding: 0 4px;
}

/** Согласие на обработку персональных данных **/
.expertise-consent input[type="checkbox"] {
	margin-top: 3px;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	accent-color: var(--brand-green);
}

/** Кнопки навигации **/
.expertise-nav {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #e3e3e3;
}

.expertise-nav .btn {
	box-sizing: border-box;
	min-width: 160px;
}

/** Итоговый шаг **/
.expertise-success {
	text-align: center;
	padding: 40px 20px;
}

.expertise-success-number {
	font-size: 250%;
	font-weight: bold;
	color: var(--brand-green);
	margin: 20px 0;
}

.expertise-success-actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 32px;
}

.expertise-success-actions .btn {
	box-sizing: border-box;
	padding: 16px 32px;
	border-radius: 6px;
	text-decoration: none;
	display: inline-block;
}

/** Ошибки валидации **/
.expertise-error {
	color: #d77400;
	font-size: 80%;
	margin-top: 8px;
	display: none;
}

.expertise-field.has-error .expertise-input,
.expertise-field.has-error .expertise-select {
	border-color: var(--brand-orange);
}

.expertise-field.has-error .expertise-error {
	display: block;
}

/** Адаптив **/
@media (max-width: 900px) {
	.expertise-fields-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.expertise-nav {
		flex-direction: column-reverse;
	}

	.expertise-nav .btn {
		width: 100%;
	}
}