/*!
Theme Name: ecommerce
*
*	Стили для модального окна
* 
* 
* 
*/


div.modal {
	display: none;
}

.close {
	display: none;
	position: absolute;
	top: 15px;
	right: 15px;
}

.modal:target {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000c;
	/*z-index: 1000;*/
	z-index: 10000000;
}

.modal:target .close {
	display: flex;
}

.modal .close::after {
	right: -1rem;
	top: -1rem;
	width: 2rem;
	height: 2rem;
	position: absolute;
	display: flex;
	z-index: 1;
	align-items: center;
	justify-content: center;
	background-color: var(--dark-blue);
	border-radius: 0;
	/*color: white;*/
	font-size: 2rem;
	content: 'x';
	cursor: pointer;
}

/* Lightbox overlay */
.modal .close::before {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	position: fixed;
	content: '';
	cursor: default;
	z-index: -1;
}

.modal__container {
	background: var(--bg2);
	color: var(--text_color2);
    max-width: 60vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.modal__noclose {
	display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
}

.modal__header {
	font-size: var(--h3);
}

.modal__header-desc {
	font-size: var(--h7);
}

.modal__phone {
	font-size: var(--h3);
	color: var(--elem_color1);
}

/*******form*********/

.modal__form {
	width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal__form-container {
	width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal__form-field {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 1rem 0;
}

.modal__form-field > * {
	width: 100%;
}

.hide {
	display: none;
}

.modal__agreement {
	font-size: var(--h7);
    font-weight: 400;
    font-style: italic;
    text-transform: math-auto;
}



@media (max-width: 600px) {

/*.modal__container {
    max-width: 80vw;
}*/
.modal__container {
	max-width: 100%;
	height: 100%;
}

.close {
    top: 50px;
    right: 50px;
}


}

.debug {
color: red;
}