/* =========================================
APPOINTMENT MODAL
========================================= */

.appointment-modal {
position: fixed;
inset: 0;

z-index: 2000;

display: flex;
align-items: center;
justify-content: center;

padding: 30px;

visibility: hidden;
opacity: 0;

pointer-events: none;

transition:
    opacity 0.25s ease,
    visibility 0.25s ease;

}

/* =========================================
ACTIVE STATE
========================================= */

.appointment-modal.active {
visibility: visible;
opacity: 1;

pointer-events: auto;

}

/* =========================================
BACKGROUND OVERLAY
========================================= */

.appointment-overlay {
    position: absolute;
    inset: 0;

    background: rgba(15, 25, 22, 0.65);
}

/* =========================================
MODAL BOX
========================================= */

.appointment-box {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 600px;
    max-height: 90vh;

    overflow-y: auto;

    background: white;

    border-radius: 28px;

    padding: 45px;

    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.25);

    transform: translateY(20px) scale(0.98);

    transition:
        transform 0.25s ease;

    scrollbar-width: thin;
}
.appointment-modal.active .appointment-box {
transform: translateY(0) scale(1);
}

/* =========================================
CLOSE BUTTON
========================================= */

.appointment-close {
position: absolute;


top: 18px;
right: 20px;

width: 40px;
height: 40px;

display: flex;
align-items: center;
justify-content: center;

padding: 0;

border: none;
border-radius: 50%;

background: #f3f6f5;

color: var(--dark);

font-family: inherit;
font-size: 28px;
font-weight: 300;

line-height: 1;

cursor: pointer;

transition:
    background 0.2s ease,
    transform 0.2s ease;


}

.appointment-close:hover {
background: #e5ece9;


transform: rotate(90deg);


}

/* =========================================
HEADER
========================================= */

.appointment-header {
margin-bottom: 30px;


padding-right: 35px;


}

.appointment-header h2 {
margin-bottom: 10px;


color: var(--dark);

font-size: 2rem;
line-height: 1.2;


}

.appointment-header p {
margin: 0;


color: var(--gray);

font-size: 0.95rem;
line-height: 1.6;


}

/* =========================================
FORM GROUP
========================================= */

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;


margin-bottom: 8px;

color: var(--dark);

font-size: 0.95rem;
font-weight: 600;


}

/* =========================================
INPUTS
========================================= */

.form-group input,
.form-group textarea {
width: 100%;


padding: 14px 16px;

border: 1px solid #d9e2df;
border-radius: 12px;

background: #fafcfb;

color: var(--dark);

font-family: inherit;
font-size: 1rem;

outline: none;

transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;


}

.form-group textarea {
min-height: 110px;


resize: vertical;


}

.form-group input::placeholder,
.form-group textarea::placeholder {
color: #9ca3af;
}

.form-group input:focus,
.form-group textarea:focus {
border-color: var(--primary);


background: white;

box-shadow:
    0 0 0 3px rgba(127, 178, 164, 0.15);


}

/* =========================================
CONSENT
========================================= */

.form-consent {
display: flex;
align-items: flex-start;


gap: 10px;

margin: 10px 0 25px;

color: var(--gray);

font-size: 0.85rem;

line-height: 1.5;

cursor: pointer;


}

.form-consent input {
flex-shrink: 0;


width: 17px;
height: 17px;

margin-top: 2px;

accent-color: var(--primary);

cursor: pointer;


}

/* =========================================
SUBMIT BUTTON
========================================= */

.appointment-submit {
width: 100%;


padding: 15px 25px;

border: none;
border-radius: 14px;

background: var(--primary);

color: white;

font-family: inherit;
font-size: 1rem;
font-weight: 600;

cursor: pointer;

transition:
    background 0.25s ease,
    transform 0.25s ease;


}

.appointment-submit:hover {
background: var(--primary-dark);


transform: translateY(-2px);


}

.appointment-submit:active {
transform: translateY(0);
}

/* =========================================
MOBILE
========================================= */

@media (max-width: 600px) {

.appointment-modal {
    padding: 15px;
}


.appointment-box {
    max-height: 92vh;

    padding: 30px 22px;

    border-radius: 22px;
}


.appointment-header {
    padding-right: 35px;

    margin-bottom: 25px;
}


.appointment-header h2 {
    font-size: 1.7rem;
}


.appointment-header p {
    font-size: 0.9rem;
}


.appointment-close {
    top: 12px;
    right: 12px;
}


.form-group {
    margin-bottom: 17px;
}


.form-group input,
.form-group textarea {
    padding: 13px 14px;

    font-size: 16px;
}


.appointment-submit {
    padding: 14px 20px;
}
}

.appointment-box::-webkit-scrollbar {
    width: 6px;
    display: none;
}

.appointment-box::-webkit-scrollbar-track {
    max-height: 28px;
    margin-bottom: 28px;

    background: transparent;
}

.appointment-box::-webkit-scrollbar-thumb {
    background: #cbd5d1;
    border-radius: 10px;
}