/*!
Theme Name: ecommerce
*
*	Стили для модального окна
* 
* 
* 
*/
.button {
	cursor: pointer;
}

div.modal {
	display: none;
}

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

.no_modal {
	width: 100%;
}

.no_modal__container {
	background: var(--bg2);
	color: var(--text_color2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 6px;
}

.modal:target {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000c;
	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;
    border-radius: 6px;
}

.modal__container a {
	color: var(--elem_color1);
}

.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: 1em 0;
}

.modal__form-field > input[type="submit"] {
	background: var(--elem_color1);
	color: var(--text_color1);
    padding: 0.5em;
    border-radius: 6px;
}

.modal__form-field > input[type="text"]:focus,
.modal__form-field > input[type="tel"]:focus {
	background: var(--text_color1);
    color: var(--elem_color1);
}

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

.hide {
	display: none;
}

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



@media (max-width: 600px) {

	.modal__container {
		max-width: 100%;
		height: 100%;
	}

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

	.modal:target {
		display: block;
	}

	.modal__noclose {
		display: flex;
	    flex-direction: column;
	    align-items: center;
	    width: 90%;
	    padding: 0;
	    gap: 2em;
	}

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


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

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

	.modal__agreement {
	    font-size: var(--h6-600);
	    padding-bottom: 1em;
	}


}

.debug {
color: red;
}


/* Добавьте, если форма на странице должна выглядеть как раньше */
#callback-form {
    margin: 20px 0;
}

#callback-form .no_modal__container {
    padding: 20px;
}

/* Стили для ошибок */
.error {
    color: red;
    font-size: 12px;
    display: none;
    margin-top: -10px;
    margin-bottom: 10px;
    text-align: center;
}

/* Чтобы модалка не мигала при загрузке */
.modal {
    display: none;
}

.modal:target {
    display: flex;
}

/* спиннер */

/* Стили для индикатора загрузки */
.loader-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
}

.loader {
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--elem_color1);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}