/**
 * Instagram Media Modal Styles
 * Additional styles for the split-screen modal
 */

/* Ensure modal is above everything */
#instagram-media-modal {
    z-index: 200;
}

/* Custom scrollbar for Instagram feed - light theme */
.instagram-feed-section::-webkit-scrollbar {
    width: 8px;
}

.instagram-feed-section::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

.instagram-feed-section::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.instagram-feed-section::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Ensure Elfsight widget fits well */
.instagram-feed-section .elfsight-app-2f158ca1-8251-4139-8eca-9a6541524b1a {
    width: 100%;
    max-width: 100%;
}

/* Smooth transitions for modal */
.modal-backdrop,
.modal-content-wrapper {
    transition: opacity 0.3s ease-in-out;
}

/* Video container styling */
.video-section video {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Close button hover effect */
.modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .modal-container {
        max-height: 95vh;
    }

    .video-section {
        min-height: 40vh;
    }

    .instagram-feed-section {
        min-height: 50vh;
    }
}

/* Ensure modal content doesn't overflow */
.modal-content-wrapper {
    overflow: hidden;
}

/* Instagram feed header styling */
.instagram-feed-section h3 {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}