/* Custom Dawn Hover Zoom & Stacked Full-Screen Lightbox Modal Styles */

.custom-dawn-image-container,
.custom-dawn-video-wrapper {
    position: relative !important;
}

/* Zoom cursors */
.custom-dawn-image-container {
    cursor: zoom-in !important;
}
.custom-dawn-image-container img {
    cursor: zoom-in !important;
}
.custom-dawn-zoom-trigger {
    cursor: pointer !important;
}

/* Zoom Magnifier Trigger Icon on gallery items */
.custom-dawn-zoom-trigger {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 100% !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1c1a1a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
}

/* Show zoom icon on hover of the parent container */
.custom-dawn-media-item:hover .custom-dawn-zoom-trigger {
    opacity: 1 !important;
}

.custom-dawn-zoom-trigger:hover {
    transform: scale(1.08) !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}

.custom-dawn-zoom-trigger svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
}

/* Lightbox Full-screen Modal */
.custom-dawn-lightbox {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important;
    background-color: #f3f3f3 !important; /* Off-white page background matching reference */
    overflow-y: auto !important;
    display: none; /* hidden by default, toggled via JS */
    box-sizing: border-box !important;
    padding: 80px 20px 40px 20px !important;
}

/* Close button in top right */
.custom-dawn-lightbox-close {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1c1a1a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 1000000 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
}

.custom-dawn-lightbox-close:hover {
    transform: scale(1.08) !important;
    background-color: #f5f5f5 !important;
}

.custom-dawn-lightbox-close svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
}

/* Lightbox Content Container (Centered max-width stack) */
.custom-dawn-lightbox-content {
    max-width: 1000px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important;
    align-items: center !important;
    width: 100% !important;
}

/* Modal media item wrap */
.custom-dawn-lightbox-item {
    width: 100% !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
    cursor: zoom-out !important;
}

.custom-dawn-lightbox-item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    cursor: zoom-out !important;
}

/* Video wrapper states */
.custom-dawn-lightbox-video-wrapper,
.custom-dawn-video-wrapper {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    background-color: #000000 !important;
    position: relative !important;
    overflow: hidden;
}

.custom-dawn-lightbox-video-wrapper iframe,
.custom-dawn-lightbox-video-wrapper video,
.custom-dawn-video-wrapper iframe,
.custom-dawn-video-wrapper video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    object-fit: contain !important;
    z-index: 2 !important;
}

/* Class-based Video/Iframe active state show/hide rules */
.custom-dawn-video-wrapper:not(.video-active) video,
.custom-dawn-video-wrapper:not(.video-active) iframe,
.custom-dawn-lightbox-video-wrapper:not(.video-active) video,
.custom-dawn-lightbox-video-wrapper:not(.video-active) iframe {
    display: none !important;
}

.custom-dawn-video-wrapper.video-active .custom-dawn-video-poster,
.custom-dawn-lightbox-video-wrapper.video-active .custom-dawn-video-poster {
    display: none !important;
}

.custom-dawn-video-wrapper.video-active video,
.custom-dawn-video-wrapper.video-active iframe,
.custom-dawn-lightbox-video-wrapper.video-active video,
.custom-dawn-lightbox-video-wrapper.video-active iframe {
    display: block !important;
}

/* Prevent double scrollbar bug (locks background browser window) */
html.custom-dawn-lightbox-open,
body.custom-dawn-lightbox-open {
    overflow: hidden !important;
    height: 100% !important;
}