/* Import Google Fonts */
@import url('../assets/css2.css');

/* Import Font Awesome */
@import url('../assets/all.min.css');

#recording-warning-modal .transform {
    transition: all 0.3s ease-out;
}

@media (max-width: 768px) {
    #grand-round-notification {
        bottom: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
        width: auto;
    }

    #recording-warning-modal .p-8 {
        padding: 1.5rem;
    }

    #recording-warning-modal h3 {
        font-size: 1.5rem;
    }

    #recording-warning-modal p {
        font-size: 1rem;
    }

    #upcoming-grand-round .p-8 {
        padding: 1.5rem;
    }

    #upcoming-grand-round h3 {
        font-size: 2rem;
    }
}

#fullscreen-image-modal {
    backdrop-filter: blur(10px);
    /* Ensure the modal content is scrollable */
    overflow: auto;
}

#fullscreen-image-modal .fullscreen-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Hide overflow during pan/zoom */
}

#fullscreen-image-modal .fullscreen-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.1s ease-out;
    /* Smooth transform for zoom/pan */
    transform-origin: 0 0;
    /* Set origin for zoom */
}

#fullscreen-image-modal button {
    z-index: 60;
    /* Ensure close button is above image */
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    line-height: 1;
    padding-bottom: 5px;
    /* Adjust for better centering of 'x' */
    transition: background-color 0.2s ease;
}

#fullscreen-image-modal button:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Styles for flyer images on education-rounds page */
.flyer-card {
    width: 100%;
    padding-top: 141.42%;
    /* Aspect ratio for A4 (210/297) */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 0.5rem;
    /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    /* shadow-lg */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    background-color: #f8fafc;
    /* slate-50, a fallback background */
}

.flyer-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

@media (max-width: 640px) {
    .flyer-card {
        padding-top: 100%;
        /* Adjust aspect ratio for square on small screens, or a different ratio if preferred */
    }

    /* Adjust fullscreen modal controls for smaller screens */
    #fullscreen-image-modal button {
        width: 32px;
        height: 32px;
        font-size: 1.5rem;
        padding-bottom: 3px;
    }

    #fullscreen-image-modal .absolute.bottom-4.right-4 {
        bottom: 10px;
        right: 10px;
        display: flex;
        flex-direction: column;
        /* Stack buttons vertically */
        gap: 0.5rem;
    }
}