/*----------------------------------
*   Modal Actions Styling
*----------------------------------*/
.modal-action {
    @apply fixed z-50 inset-0 bg-gray-900 bg-opacity-60 overflow-y-auto h-screen w-full items-center justify-center
}

.modal-content-action {
    @apply relative rounded-lg text-center overflow-hidden transform transition-all z-50;
}

.modal-body-action {
    @apply px-4 py-3 flex flex-col sm:flex sm:flex-col sm:px-6 items-center gap-5;
}

/*----------------------------------
*   Modal Buttons Actions Styling
*----------------------------------*/
.btn-new-appointment,
.btn-block-appointment {
    @apply w-[250px] h-8 sm:h-8 xl:h-8 inline-flex items-center px-3 py-2.5 justify-center text-sm sm:text-xs xl:text-sm tracking-wider border border-gray-200 rounded-md shadow-md hover:-translate-y-0.5 transform transition;
    /*
        Common styles for new appointment and block appointment buttons:
        - Fixed width of 250px and responsive heights.
        - Horizontal and vertical item alignment.
        - Default text and border style.
        - Soft shadow and transition effect on hover.
    */
}

.btn-new-appointment {
    @apply bg-color hover:bg-color-hover text-color border-bg-color;
    /*
        Specific style for the new appointment button:
        - Defined background color (bg-color).
        - Hover background color (hover:bg-color-hover).
        - Defined text color (text-color).
    */
}

.btn-block-appointment {
    @apply bg-red-800 hover:bg-red-700 text-white border-red-800;
    /*
        Specific style for the block appointment button:
        - Defined red background color (bg-red-600).
        - Hover red background color (hover:bg-red-700).
        - Defined text color (text-color).
    */
}

/*----------------------------------
*   Modal PIN Actions Styling
*----------------------------------*/
.pin-container {
    @apply flex flex-col items-center justify-center h-auto text-white text-center rounded-lg shadow-lg p-8 font-bold;
    /*
        Styles for the PIN container:
        - Flexbox container with vertical stacking (column direction).
        - Center items horizontally and vertically.
        - Auto height adjustment.
        - White text color and centered alignment.
        - Rounded corners, shadow effect, padding, and bold font.
    */
}

.title-display {
    @apply text-3xl mb-4;
    /*
        Styles for the title display:
        - Large text size.
        - Bottom margin for spacing.
    */
}

.pin-display {
    @apply text-6xl mb-4;
    /*
        Styles for the PIN display:
        - Very large text size.
        - Bottom margin for spacing.
    */
}

.pin-pad {
    @apply grid grid-cols-3 gap-4;
    /*
        Styles for the PIN pad:
        - Grid layout with 3 columns.
        - Gap between grid items.
    */
}

.pin-pad button {
    @apply w-16 h-16 text-xl border-2 border-white rounded-full text-white cursor-pointer focus:outline-none
    flex items-center justify-center;
    /*
        Styles for PIN pad buttons:
        - Fixed width and height.
        - Medium text size.
        - White border and rounded corners.
        - White text color.
        - Pointer cursor and no outline on focus.
    */
}

.pin-pad button:hover {
    @apply bg-white text-black;
    /*
        Hover effect for PIN pad buttons:
        - White background and black text on hover.
    */
}

@media (max-width: 768px) {
    .pin-pad button {
        @apply w-14 h-14 text-xl;
        /*
            Responsive styles for PIN pad buttons on screens up to 768px wide:
            - Smaller width and height.
            - Smaller text size.
        */
    }
}

@media (max-width: 480px) {
    .pin-pad button {
        @apply w-12 h-12 text-lg;
        /*
            Responsive styles for PIN pad buttons on screens up to 480px wide:
            - Further reduced width and height.
            - Even smaller text size.
        */
    }
}

/*----------------------------------
*   Modal Loading Styling
*----------------------------------*/
.modal-loading {
    @apply fixed z-50 inset-0 bg-gray-900 bg-opacity-60 overflow-y-auto h-screen w-full items-center justify-center ;
    /*
        Styles for the loading modal:
        - Fixed position with high z-index.
        - Full-screen overlay with semi-transparent background.
        - Centered items horizontally and vertically.
    */
}

.modal-body-loading {
    @apply px-4 py-3 flex flex-col sm:flex sm:flex-col sm:px-6 items-center gap-5;
    /*
        Styles for the loading modal body:
        - Padding and vertical spacing between elements.
        - Flexbox container with column direction.
        - Centered items horizontally and vertically.
    */
}

.modal-body-loading .loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-body-loading .calendar-icon {
    position: relative;
    width: 50px;
    height: 50px;
    border: 4px solid var(--text-color);
    border-radius: 5px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    padding: 5px;
    box-sizing: border-box;
    background-color: var(--bg-color);

}

.modal-body-loading .calendar-icon::before,
.modal-body-loading .calendar-icon::after {
    content: "";
    position: absolute;
    top: -8px;
    width: 10px;
    height: 10px;
    background-color: var(--text-color);
    border-radius: 2px;
}

.modal-body-loading .calendar-icon::before {
    left: 5px;
}

.modal-body-loading .calendar-icon::after {
    right: 5px;
}

.modal-body-loading .day-square {
    width: 100%;
    height: 100%;
    background-color: var(--text-color);
    border-radius: 2px;
    animation: pulse 1.2s ease-in-out infinite;
    opacity: 0.2;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.2;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.modal-body-loading .day-square:nth-child(1) { animation-delay: 0s; }
.modal-body-loading .day-square:nth-child(2) { animation-delay: 0.2s; }
.modal-body-loading .day-square:nth-child(3) { animation-delay: 0.4s; }
.modal-body-loading .day-square:nth-child(4) { animation-delay: 0.6s; }
.modal-body-loading .day-square:nth-child(5) { animation-delay: 0.8s; }
.modal-body-loading .day-square:nth-child(6) { animation-delay: 1s; }
.modal-body-loading .day-square:nth-child(7) { animation-delay: 1.2s; }
.modal-body-loading .day-square:nth-child(8) { animation-delay: 1.4s; }
.modal-body-loading .day-square:nth-child(9) { animation-delay: 1.6s; }

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}