/* #region Header */
.Header {
	width: 100%;
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--floating-action-bar-height) - var(--navbar-height) - 5vw);
}
.HeaderContainerDesktop {
	gap: 1rem;
	justify-content: center;
}
.HeaderContainerMobile {
	gap: 0.5rem;
	padding-top: .25rem;
	padding-bottom: .25rem;
}
.HeaderContainerMobile p, .HeaderContainerMobile h1 {
	max-width: 32rem;
}
@media (min-width: 1024px) {
	.HeaderContainerDesktop {
		display: flex;
	}
	.HeaderContainerMobile {
		display: none;
	}
}
@media (max-width: 1024px) {
	.HeaderContainerMobile {
		display: flex;
	}
	.HeaderContainerDesktop {
		display: none;
	}
}
.HeaderContainerDesktop, .HeaderContainerMobile {
	height: 100%;
	width: 100%;
	position: relative;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.HeaderContainerDesktop *, .HeaderContainerMobile * {
	z-index: 5;
}
.HeaderBackground {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
	pointer-events: none;
}
.HeaderContainerDesktop h1 {
	width: 70vw;
	max-width: 45rem;
}
.HeaderContainerDesktop > p:nth-child(2) {
	width: 50vw;
	max-width: 40rem;
}
.HeaderContainerDesktop > p:nth-child(3) {
	margin-top: 4rem;
}
.RentFormDesktop {
	margin-top: 1rem;
	background-color: var(--text-white);
	padding: 1rem;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	text-align: start;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 1.25rem;
	gap: .75rem;
	height: 6.25rem;
}
.VehicleTypeSelectDesktopLabel {
	flex-direction: column;
}
.PickerContainer > input {
	cursor: text;
	color: var(--text-black);
}
.PickerContainer > input:focus {
	border: none;
	outline: none;
}
.DateInputContainer > input {
	appearance: none;
  	-webkit-appearance: none;
	-moz-appearance: textfield;
	background-size: .9rem;
	margin-left: 1.25rem;
	padding-right: 0;
}
@-moz-document url-prefix() {
    .DateInputContainer > input {
        margin-left: 0;
    }
	.DateInputContainer {
		position: relative;
	}
	.DateInputContainer::after {
		content: "";
		position: absolute;
		right: 0.25rem;
		bottom: -.25rem;
		width: 1rem;
		height: 100%;
		background-color: var(--text-white);
		pointer-events: none;
	}
}
.DateInputContainer > input::before {
	content: '';
	display: inline-block;
	position: absolute;
	margin-left: -1.25rem;
	width: 1rem;
  	height: 1.25rem;
	background: url('../../public/icons/calendar.png') no-repeat center/contain;
	vertical-align: middle;
	pointer-events: none;
}
.DateInputContainer > input::-webkit-inner-spin-button,
.DateInputContainer > input::-webkit-calendar-picker-indicator {
	display: none;
	background: none;
    -webkit-appearance: none;
}
.RentFormDesktop > label {
	color: var(--input-label);
	display: flex;
	border: 1px solid var(--input-divider-line);
	border-radius: 1.25rem;
	padding: .75rem;
	padding-left: 1rem;
	padding-right: 1rem;
	height: 4rem;
	cursor: pointer;
}
.RentFormDesktop > button {
	border-radius: 1.25rem;
	white-space: nowrap;
	height: 4rem;
}
.RentFormMobile {
	margin-top: 1.5rem;
	background-color: var(--text-white);
	width: 82vw;
	max-width: 25rem;
	padding: 1.5rem;
	text-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 1.25rem;
}
.RentFormMobile input, .RentFormMobile select {
	appearance: none;
	-webkit-appearance: none;
	color: var(--text-black);
	width: 100%;
	height: 2rem;
	border-bottom: 1px solid var(--input-divider-line);
	margin-bottom: 1rem;
	text-align: left;
}
.RentFormMobile .DateBox {
	width: 70%;
}
.RentFormMobile .TimeBox {
	width: auto;
	flex: 1;
}
.RentFormMobile > label {
	width: 100%;
	color: var(--input-label);
	display: flex;
	flex-wrap: wrap;
}
.RentFormMobile > label > p {
	width: 100%;
}
.RentFormMobile .ButtonRed {
	border-radius: 1.25rem;
	height: 3.5rem;
	width: 100%;
	margin-top: 1rem;
}
.RentProgressTracker {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    background-color: var(--floating-action-bar-desktop-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    color: var(--text-black);
}
.RentProgressTracker > a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.RentProgressTracker .Divider {
    width: 2rem;
    border: .5px solid var(--progress-divider-line);
}
.RentProgressTracker > a > div {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--text-black);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color var(--button-hover-speed) ease-in-out;
}
.RentProgressTracker > a.Active > div {
    background-color: var(--accent-red-1);
    border: 0;
    color: var(--text-white);
}
.RentProgressTracker > a:hover > div {
    background-color: var(--text-black);
    color: var(--text-white);
}
@media (max-width: 1023px) {
    .RentProgressTracker > a > p {
        display: none;
    }
    .RentProgressTracker > a.Active > p{
        display: flex;
    }
    .RentProgressTracker > .Divider {
        display: flex;
    }
}
@media (max-width: 767px) {
	.RentProgressTracker {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
    .RentProgressTracker > a {
        display: none;
    }
    .RentProgressTracker > a.Active {
        display: flex;
    }
    .RentProgressTracker > .Divider {
        display: none;
    }
}
/* #endregion */

/* #region Split section - Text half */
.SplitSection {
    width: 100%;
    background-color: var(--accent-bg);
}
.SplitSectionContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 3rem 0 6rem 0;
    gap: 4rem;
}
.SplitSection .Spacer {
    height: 1.5rem;
}
.SplitSection .SpacerSmall {
    height: 1rem;
}
/* .SplitSection .BackgroundImgContainer {
    position: relative;
    display: inline-block;
    border-radius: .5rem;
    overflow: hidden;
}
.SplitSection .BackgroundImgContainer > img {
    display: block;
    object-fit: cover;
    height: 100%;
    width: 100%;
    border-radius: .5rem;
} */
.SplitSection .TextContainer {
    display: flex;
    flex-direction: column;
    align-items: start;
    color: var(--text-black);
}
.SplitSection .TextContainer ul {
    list-style-type: disc;
    padding-left: 1.75rem;
}
@media (max-width: 900px) {
	.SplitSection {
		background-color: var(--text-white);
	}
    .SplitSectionContainer {
        display: flex;
        flex-wrap: wrap;
        padding: 1rem 0 3rem 0;
        gap: 2rem;
    }
    .SplitSectionContainer > .TextContainer {
        width: 100%;
        order: 1;
    }
    /* .SplitSectionContainer > .BackgroundImgContainer {
        width: 100%;
        order: 2;
        min-height: 20rem;
    }
    .SplitSection .BackgroundImgContainer {
        max-height: 40rem;
    } */
    .SplitSection .SplitSectionContainer .TextContainer h2 {
        width: 100%;
        text-align: center;
        margin-bottom: 1rem;
    }
    .LastSection {
        padding-bottom: 1rem;
    }
}
/* #endregion */

/* Split section - Work hours info */
.GridStore {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-auto-rows: minmax(auto, max-content);
    gap: 1rem;
    color: var(--text-black);
    align-items: stretch;
}
.GridStore a:hover {
    text-decoration: underline;
	text-underline-offset: .25rem;
	text-decoration-thickness: .075rem;
}
.GridStore .Divider {
    width: 100%;
	margin: .5rem 0 .5rem 0;
    border-top: 1px solid var(--input-divider-line);
    border-bottom: 1px solid var(--input-divider-line);
}
.GridStore .WorkHoursBox {
    background-color: var(--split-section-bg);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.GridStore .ContactsBox {
    background-color: var(--split-section-bg);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
@media (max-width: 900px) {
    .GridStore {
		width: 100%;
        display: flex;
        justify-content: center;
    }
    .GridStore h1 {
        text-align: center;
        margin-bottom: 1rem;
    }
    .GridStore .ContactsBox {
        padding: 0;
        margin-top: 1rem;
        background-color: var(--text-white);
    }
    .GridStore .WorkHoursBox {
        padding: 0;
        margin-top: 1rem;
        background-color: var(--text-white);
    }
}
/* #endregion */
@media (max-width: 540px) {
    .GridStore {
		width: 100%;
        display: flex;
        flex-direction: column;
    }
}