/* Page Layout */

.appointments-container {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 80px 10%;
    color: var(--navy);

}

/* Form Card */

.appointment-form {

    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);

}

.appointment-form h2 {
    margin-bottom: 20px;
}

/* Form Inputs */

label {
    display:block;
    margin-top:15px;
    margin-bottom:5px;
    font-weight:bold;
}

input,
textarea {

    width:100%;
    padding:12px;
    border-radius:8px;
    border:1px solid var(--border);

}

textarea {
    min-height:80px;
}

/* Button */

button {

    margin-top:20px;
    padding:14px;
    border-radius:10px;
    border:none;
    background:var(--green);
    color:white;
    cursor:pointer;
    width:100%;

}

/* Appointment List */

.appointments-list {

    background:white;
    padding:30px;
    border-radius:12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);

}

.appointments-list h2 {

    margin-bottom:20px;

}

/* Appointment Card */

.appointment-card {

    border:1px solid var(--border);
    border-radius:10px;
    padding:15px;
    margin-bottom:15px;
    background:#fafafa;

}

.appointment-card h4 {

    margin-bottom:5px;

}

.appointment-card p {

    font-size:14px;
}

/* Calendar */

.calendar-container {

background:white;
padding:30px;
border-radius:12px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
color: var(--navy);

}

.calendar-header {

display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;

}

.calendar-header button{

background:none;
color: #000;
border:none;
font-size:18px;
cursor:pointer;
width: auto;

}

/* Weekday Header */

.calendar-weekdays {

display:grid;
grid-template-columns:repeat(7,1fr);
text-align:center;
font-weight:600;
margin-bottom:10px;

}

.calendar-weekdays div {

padding:8px;
font-size:14px;
color:#6b7280;

}

.calendar-grid {

display:grid;
grid-template-columns:repeat(7,1fr);
gap:10px;

}

.calendar-day {

position:relative;
padding:14px;
text-align:center;
border-radius:8px;
cursor:pointer;
background:#f3f4f6;
font-weight:500;
transition:0.15s;

}

.calendar-day:hover{

background:#e5e7eb;

}

.calendar-day.today{

border:2px solid var(--green);

}

.calendar-day.has-appointment::after{

content:"";
width:6px;
height:6px;
background:var(--green);
border-radius:50%;
position:absolute;
bottom:4px;
left:50%;
transform:translateX(-50%);

}

.calendar-day.drag-over {

outline: 2px dashed var(--green);
background:#e0f7ff;

}

.selected-day{

border:2px solid var(--navy);

}


.time-slots {

display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
margin-top:20px;

}

.time-slot {

padding:12px;
background:#f3f4f6;
border-radius:8px;
text-align:center;
cursor:pointer;

}

.time-slot:hover {

background:#e5e7eb;

}
/* Mobile */

@media (max-width: 900px) {

.appointments-container {

grid-template-columns:1fr;

}

}