/* Enhanced Attachments styling */
.attachments-list {
    @apply space-y-3;
}

.attachment-item {
    @apply transition-all duration-200;
}

.attachment-item:hover {
    @apply transform translate-y-[-1px] shadow-md border-primary-300;
}

.attachment-icon i {
    @apply transition-transform duration-200;
}

.attachment-item:hover .attachment-icon i {
    @apply transform scale-110;
}

.attachment-link {
    @apply transition-all duration-200;
}

.attachment-action a {
    @apply transition-all duration-200 transform;
}

.attachment-action a:hover {
    @apply transform scale-105 shadow-md;
}

/* File type specific colors */
.fa-file-pdf { @apply text-red-500; }
.fa-file-word { @apply text-blue-500; }
.fa-file-excel { @apply text-green-500; }
.fa-file-archive { @apply text-yellow-500; }
.fa-file-image { @apply text-purple-500; }



.product-navigation-wrapper {
    @apply mt-8;
}

.navigation-tabs {
    background: rgba(249, 250, 251, 0.95);
    backdrop-filter: blur(10px);
}

.navigation-tabs button {
    @apply text-sm font-medium transition-all duration-200;
}

.navigation-tabs button:hover {
    @apply shadow-sm;
}

.product-section {
    @apply scroll-mt-24;
}

.section-title {
    @apply relative;
}

.section-title::before {
    content: '';
    @apply absolute -top-24 left-0 w-full h-24 pointer-events-none;
}

.prose {
    @apply text-gray-700 leading-relaxed;
}

.prose h3 {
    @apply text-lg font-semibold mt-6 mb-3 text-gray-900;
}

.prose p {
    @apply mb-4;
}

.prose ul {
    @apply list-disc pl-6 mb-4;
}

.prose ol {
    @apply list-decimal pl-6 mb-4;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Highlight active section */
.product-section:target .section-title,
.product-section.active .section-title {
    @apply text-primary-600;
}

/* Gerelateerde producten styling */
#section-related {
    @apply mt-12 pt-8 border-t border-gray-200;
}

/* Attachments styling */
.attachments-content {
    @apply space-y-3;
}

.attachments-content .attachment-item {
    @apply flex items-center p-3 bg-white rounded border hover:shadow-sm transition-shadow;
}

.attachments-content .attachment-icon {
    @apply mr-3 text-primary-600;
}

.attachments-content .attachment-link {
    @apply text-primary-600 hover:text-primary-800 font-medium no-underline;
}

@media (max-width: 1024px) {
    .navigation-content > .grid {
        @apply grid-cols-1 gap-6;
    }

    .right-column {
        @apply space-y-6;
    }
}

.prose iframe,
#section-description iframe,
.product-section iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
}

/* Specifiek voor video iframes */
.prose iframe[src*="youtube.com"],
.prose iframe[src*="youtu.be"],
.prose iframe[src*="vimeo.com"],
#section-description iframe[src*="youtube.com"],
#section-description iframe[src*="youtu.be"],
#section-description iframe[src*="vimeo.com"] {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16/9 !important;
    height: auto !important;
    min-height: 200px !important;
}

/* Voorkom horizontal scrolling door iframes */
.prose,
#section-description,
.product-section {
    overflow-x: hidden;
}

.prose > *,
#section-description > *,
.product-section > * {
    max-width: 100%;
    box-sizing: border-box;
}

/* Mobile specific - extra zeker */
@media (max-width: 768px) {
    .prose iframe,
    #section-description iframe,
    .product-section iframe {
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
        height: auto !important;
        min-height: 180px !important;
    }

    /* Reset alle width/height attributen */
    .prose iframe[width],
    .prose iframe[height],
    .prose iframe[style*="width"],
    .prose iframe[style*="height"],
    #section-description iframe[width],
    #section-description iframe[height],
    #section-description iframe[style*="width"],
    #section-description iframe[style*="height"] {
        width: 100% !important;
        height: auto !important;
    }
}