/* RESERVATION FORM */

.t_k_reservation-container {
    position: relative;
    border-radius: 1.5rem;
    background-color: #9ECDFF;
    padding: 2rem;
    box-shadow: 0 2.5rem 5rem rgba(0, 0, 0, 1);
    max-width: 800px;
}

.reservation_form_text, .t_k_reservation-container h3  {
    padding-top: 1rem;
    color: #ffffff;
}

.t_k_reservation-container label, .t_k_reservation-container button , .t_k_reservation-container h3 {
    font-weight: 700;
    font-size: 1rem;
}

.t_k_reservation-container input,
.t_k_reservation-container textarea,
.t_k_reservation-container select,
.t_k_reservation-container button {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0.5rem
}


/* ------------------------------------------------------- */
/* Log-In */
    #loginform {
        font-size: 1rem;
        max-width: 300px;
        margin: 0.1rem auto;
        padding-left: 0.6rem;
        background-color: #f9f9f9;
        border: 1px solid #ddd;
        border-radius: 1rem;
        box-shadow: 0 0 2rem rgba(0,0,0,0.1);
    }


.loginform-title {
    font-size: 1rem;
    max-width: 300px;
    margin: 0.1rem auto 0.5rem auto;
    padding: 0;
    text-align: center;
}

    #loginform input[type="text"],
    #loginform input[type="password"],
    #loginform input[type="submit"] {
        width: 94%;
        height: 1.8rem;
        margin-bottom: 0.2rem;
        padding-left: 0.4rem;
        border: 0.1rem solid #ccc;
        border-radius: 0.3rem;
    }

    #loginform input[type="submit"] {
        background-color: #007bff;
        color: #fff;
    }

    #loginform input[type="submit"]:hover {
        background-color: #007BFF;
    }

    #loginform label {
        display: block;
        margin-bottom: 0.3rem;
    }

    #loginform .forgetmenot label {
        display: inline-block;
    }

    .duplicate_info {
        font-size: 0.7rem;
        color: #666666;
    }

    #reservation-form .form_entry {
        margin-top: 0.6rem;
    }





.flatpickr-calendar {
    min-width: 300px;
    width: 100% !important;
    transform-origin: top left;
    transition: transform 0.2s ease;
}


.flatpickr-day {
    min-height: 26px;
    height: 5vw;
    max-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}


@media (max-width: 420px) {
    .flatpickr-calendar {
        transform: scale(0.9);
    }
}

@media (max-width: 380px) {
    .flatpickr-calendar {
        transform: scale(0.8);
    }
}

@media (max-width: 340px) {
    .flatpickr-calendar {
        transform: scale(0.7);
    }
}

@media (max-width: 320px) {
    .flatpickr-calendar {
        transform: scale(0.6);
    }
}

.flatpickr-time {
    flex-wrap: wrap;
}
.flatpickr-time .numInputWrapper {
    width: 40%;
}




/* ============================================
   CONTAINER-BASED RESPONSIVE SCALING
   ============================================ */

/* Enable container queries for all block wrappers */
.t_k_reservation-container,
{
    container-type: inline-size;
    container-name: tk-block;
}

/* Small containers (< 400px) - Widget areas */
@container tk-block (max-width: 400px) {

    /* Reservation Form */
    .t_k_reservation-container h3 { font-size: 0.84rem; }
     .t_k_reservation-container .form_entry :is(input:not([type="hidden"]), textarea, select) {
        font-size: 0.5rem !important;
        line-height: 1.2;
        padding: 6px 8px;
        height: auto;
        }
     .t_k_reservation-container :is(p, label, .reservation_form_text) {
        font-size: 0.5rem !important;
        }
      .t_k_reservation-container h3 {
        font-size: 0.7rem;
        }


}