/* assets/css/custom-modal.css */

/* --- START: Custom Modal CSS (Independent) --- */

/* Overlay */
#custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Semi-transparent background */
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 10001; /* Ensure it's above other content */
    opacity: 0; /* Start fully transparent */
    transition: opacity 0.3s ease-in-out; /* Fade effect */
}

#custom-modal-overlay.visible {
    display: flex; /* Use flex for centering */
    opacity: 1; /* Fade in */
}

/* Modal Content Box */
#custom-modal-content {
    background-color: #fff;
    /* MODIFIED: Removed padding except bottom, removed border-radius */
    padding: 0 0 15px 0; /* No top/left/right padding, 15px bottom */
    border-radius: 0;    /* No rounded corners */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    max-width: 90%; /* Allow slightly wider */
    max-height: 90vh; /* Allow slightly taller */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Close Button */
#custom-modal-close {
    position: absolute;
    /* MODIFIED: Adjust position due to padding change */
    top: 5px;
    right: 10px;
    font-size: 28px;
    font-weight: bold;
    color: #333; /* Darker for visibility on white */
    background: none; /* Ensure no background */
    border: none; /* Ensure no border */
    padding: 5px; /* Add some clickable area */
    cursor: pointer;
    line-height: 1;
    z-index: 10;
}
#custom-modal-close:hover {
    color: #000;
}

/* Image Container */
#custom-modal-image-container {
    position: relative;
    /* MODIFIED: Add padding that was removed from parent */
    padding: 15px 10px 0 10px; /* Add space around image (top, left, right) */
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px; /* Ensure some height even if image fails */
}

/* Modal Image */
#custom-modal-image {
    display: block;
    max-width: 100%;
    /* MODIFIED: Adjust based on new padding/nav */
    max-height: calc(90vh - 80px); /* Adjust max height */
    object-fit: contain;
    border-radius: 0; /* Ensure image corners aren't rounded if container was */
}

/* Container for Navigation Arrows and Indicator */
#custom-modal-nav {
    /* MODIFIED: Use Flexbox for centering */
    display: flex;
    justify-content: center; /* Center items horizontally */
    align-items: center;     /* Center items vertically */
    margin-top: 10px;       /* Reduced space above the arrows */
    height: 35px;           /* Give it a fixed height */
    padding: 0 10px;        /* Add padding to prevent items hitting edge */
}

/* Arrow Buttons (Specific Selector & Style Resets) */
div#custom-modal-content button.custom-modal-arrow {
    /* --- Style Resets --- */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0 10px;
    margin: 0; /* Remove margin, flex gap will handle spacing */
    font-family: sans-serif;
    font-weight: normal;
    font-size: 35px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    height: 100%; /* Fill vertical space of nav container */
    display: flex; /* Use flex to center content if needed, helpful with line-height */
    align-items: center;
    justify-content: center;
    /* --- Core Styles --- */
    color: #000000;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    /* --- Remove Positioning --- */
    position: static;
    flex-shrink: 0; /* Prevent arrows from shrinking */
}

/* Arrow Hover State (Specific Selector) */
div#custom-modal-content button.custom-modal-arrow:hover {
    color: #555; /* Darker gray on hover */
    opacity: 1;
    background: transparent;
}

/* NEW: Page Indicator Styles */
#custom-modal-page-indicator {
    font-family: sans-serif;
    font-size: 14px;
    color: #444;
    margin: 0 15px; /* Space between indicator and arrows */
    flex-shrink: 0; /* Prevent shrinking */
}

/* --- END: Custom Modal CSS --- */