%button {
	text-transform: uppercase;
	font-size: $fz-5;
	min-width: 85px;
	font-weight: 600;
	box-shadow: none;

	&:hover {
		box-shadow: none;
	}
}

%cancel-button {
	background: $green-light;
	color: $green-dark;

	&:hover {
		background: $green-dark;
		color: white;
	}
}

.form-content {
	display: grid;
	gap: 0 $form-sidebar-gutter;

	@media($min-desktop-viewport) {
		grid-template-columns: $form-sidebar-width 1fr;
	}

	&--sidebox {
		width: 100%;
		margin-top: 0;

		@media($min-desktop-viewport) {
			grid-area: 1 / 1 / 3 / 2;
		}

		& + div#rub_service {
			width: unset;
		}
	}

	&--titlebar {
		@media(max-width: $very-small-limit) {
			grid-row: 1;
		}

		@media($min-desktop-viewport) {
			grid-column: 2;
		}
	}

	&--title {
		margin: 0;
	}

	&--theme-subtitle {
		margin: 0;
	}

	&--body {
		@media($min-desktop-viewport) {
			grid-column: 2;
		}
	}
}

label {
	font-size: $fz-5;
}

div#rub_service {
	margin-top: 0;
}

div#tracking-code {
	form {
		display: grid;
	}

	button {
		margin-right: 0;
	}

	.tracking-code-part {
		display: flex;
		justify-content: center;
		flex-direction: column;
		background: $green-dark;
		border-radius: $border-radius-small;


		@media (max-width: $mobile-limit) and (min-width: $very-small-limit) {
			flex-direction: row;
		}
		align-items: center;
	}

	h3 {
		background: transparent;
		color: white;
		text-transform: uppercase;
		margin: $space-large $space-large 0 $space-large;
		padding: 0;

		@media (max-width: $mobile-limit) and (min-width: $very-small-limit) {
			margin: $space-small $space-medium;
		}
	}

	a {
		color: white;
		text-align: center;
		margin: 0 $space-large $space-small $space-large;
		font-size: $fz-2;
		text-decoration: none;

		@media("(max-width: #{$mobile-limit}) and (min-width: #{$very-small-limit})") {
			margin: $space-small $space-medium;
		}
	}
}

.wcs-steps {
	border: 2px solid $green;
	border-radius: $border-radius-small;
	padding: $space-large;

	&--list {
		gap: $space-large;
		@media($min-desktop-viewport) {
			margin-bottom: 0;
		}
	}

}

.wcs-step {
	&--marker {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 2.3em;
		height: 2.3em;
		flex: 0 0 2.3em;
	}

	&--marker-nb {
		@media(min-width: $very-small-limit) {
			font-size: 1.6em;
		}
		margin: 0;
		font-weight: 900;
	}

	&--label {
		@media($min-desktop-viewport) {
			margin-left: $space-large;
		}

		@media(max-width: $very-small-limit) {
			margin-left: $space-large;
		}
		font-size: $fz-5;
		font-weight: bold;
	}
}

