.appointment-form { position: fixed; top: 20px !important; right: 20px; width: 340px; background: #ff0000; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1000; font-family: Arial, sans-serif; transition: transform 0.3s ease, opacity 0.3s ease; }
body.id4 .appointment-form,
body.id3 .appointment-form,
body.id1 .appointment-form,
body.id2 .appointment-form { position: fixed; top: unset !important; right: 20px; width: 340px; bottom: 110px; background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1000; font-family: Arial, sans-serif; transition: transform 0.3s ease, opacity 0.3s ease; }

@media (max-width: 767px) {
    body.id4 .appointment-form, body.id3 .appointment-form, body.id1 .appointment-form, body.id2 .appointment-form { position: fixed; padding: 20px !important; top: 0px !important; right: unset; width: calc(100% - 40px); background: #ffffffba; border-radius: unset; box-shadow: unset; z-index: 1000; font-family: Arial, sans-serif; transition: transform 0.3s ease, opacity 0.3s ease; height: 100vh; }

    div#appointmentForm .form-group { background-color: #fff; }
}

.flatpickr-calendar.open { position: relative !important; opacity: 1; visibility: visible; width: 100vw; left: 0px !important; top: 0px !important; position: fixed !important; z-index: 10000000; height: 100vh !important; max-height: unset !important; display: flex; justify-content: center; align-items: center; flex-direction: column; background: #fffffff0; }
    .flatpickr-calendar.open > div:last-child { margin-bottom: auto; max-width: 300px; width: 100%; display: flex; position: relative; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); background: #fff; }
    .flatpickr-calendar.open > div:first-child { margin-top: auto; max-width: 300px; width: 100%; display: flex; position: relative; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border-bottom: 0; border-radius: 12px; background: #fff; }