.order-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 10000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.order-modal--active {
opacity: 1;
visibility: visible;
}
.order-modal__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
}
.order-modal__content {
position: relative;
width: 100%;
max-width: 600px;
max-height: 90vh;
margin: 50px auto;
background-color: var(--clr-white);
border-radius: var(--bor-radius-l);
padding: 40px;
overflow-y: auto;
transform: translateY(-50px);
transition: transform 0.3s ease;
}
.order-modal--active .order-modal__content {
transform: translateY(0);
}
.order-modal__close {
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
border: none;
cursor: pointer;
border-radius: var(--bor-radius-xl);
transition: background-color 0.3s ease;
z-index: 10;
}
.order-modal__close:hover {
background-color: var(--clr-gray);
}
.order-modal__close-icon {
font-size: 32px;
line-height: 1;
color: var(--clr-black);
font-weight: 300;
}
.order-modal__header {
margin-bottom: 30px;
text-align: center;
}
.order-modal__title {
font-size: 32px;
font-weight: 500;
line-height: 120%;
color: var(--clr-black);
margin: 0 0 10px 0;
}
.order-modal__subtitle {
font-size: 16px;
line-height: 140%;
color: #666;
margin: 0;
} .order-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.order-form__group {
display: flex;
flex-direction: column;
gap: 8px;
}
.order-form__label {
font-size: 16px;
font-weight: 500;
color: var(--clr-black);
}
.order-form__input,
.order-form__textarea {
padding: 12px 15px;
border: 1px solid var(--clr-gray);
border-radius: var(--bor-radius-m);
font-size: 16px;
color: var(--clr-black);
background-color: var(--clr-white);
transition: border-color 0.3s ease;
font-family: inherit;
}
.order-form__input:focus,
.order-form__textarea:focus {
outline: none;
border-color: var(--clr-green);
}
.order-form__textarea {
resize: vertical;
min-height: 60px;
}
.order-form__group--checkbox {
margin-top: 10px;
}
.order-form__checkbox-label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-size: 14px;
line-height: 140%;
color: var(--clr-black);
}
.order-form__checkbox {
margin-top: 3px;
width: 18px;
height: 18px;
min-width: 18px;
cursor: pointer;
accent-color: var(--clr-green);
}
.order-form__checkbox-text {
flex: 1;
}
.order-form__policy-link {
color: var(--clr-green);
text-decoration: underline;
transition: color 0.3s ease;
}
.order-form__policy-link:hover {
color: var(--clr-green-light);
}
.order-form__submit {
padding: 15px 30px;
background-color: var(--clr-green);
color: var(--clr-white);
border: none;
border-radius: var(--bor-radius-l);
font-size: 18px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 10px;
}
.order-form__submit:hover {
background-color: var(--clr-green-light);
}
.order-form__submit:disabled {
opacity: 0.6;
cursor: not-allowed;
}
@media screen and (max-width: 768px) {
.order-modal__content {
max-width: 90%;
margin: 20px auto;
padding: 30px 20px;
}
.order-modal__title {
font-size: 24px;
}
.order-modal__subtitle {
font-size: 14px;
}
.order-form__input,
.order-form__textarea {
font-size: 14px;
padding: 10px 12px;
}
.order-form__submit {
font-size: 16px;
padding: 12px 25px;
}
}