/* ImagFAQ Duyu - Frontend Styles (v11 - Final Version) */

.imagfaq-duyu-wrapper {
    display: flex;
    padding: 20px;
    flex-direction: var(--desktop-direction, row);
    overflow: hidden;
}

/* --- Columns --- */
.imagfaq-duyu-images,
.imagfaq-duyu-accordion {
    width: 50%;
    box-sizing: border-box;
    min-width: 0; 
}

.imagfaq-duyu-images { 
    position: relative; 
}

.imagfaq-duyu-accordion { 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
}

/* --- NEW: Main Header Styling --- */
.imagfaq-main-header {
    margin-bottom: 30px; /* Space between header and FAQ list */
}
.imagfaq-main-title {
    margin: 0 0 10px 0;
}
.imagfaq-main-description {
    margin: 0;
}


/* --- Image Item --- */
.imagfaq-duyu-image-item {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}
.imagfaq-duyu-image-item.active { opacity: 1; visibility: visible; }
.imagfaq-duyu-image-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

/* --- Accordion Item Separators --- */
.imagfaq-separators-yes .imagfaq-duyu-accordion-item { 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
}
.imagfaq-separators-yes .imagfaq-duyu-accordion-item:last-child { 
    border-bottom: none;
}
.imagfaq-duyu-accordion-item {
    border-bottom: 1px solid transparent;
}

/* --- Accordion Title & Content --- */
.imagfaq-duyu-accordion-title {
    padding: 20px 0; cursor: pointer; display: flex;
    justify-content: space-between; align-items: center; transition: color 0.3s;
}
.imagfaq-duyu-accordion-title .title-text { 
    font-weight: 500;
    word-break: break-word;
}
.imagfaq-duyu-accordion-title .icon {
    /* Default size */
    width: 14px; 
    height: 14px; 
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor; 
    transform: rotate(45deg);
    transition: transform 0.3s ease-in-out, width 0.3s, height 0.3s;
    margin-left: 15px; 
    flex-shrink: 0;
}
.imagfaq-duyu-accordion-title.active .icon { 
    transform: rotate(-135deg); 
}
.imagfaq-duyu-accordion-content { display: none; padding: 0 0 20px 0; }
.imagfaq-duyu-accordion-content .content-inner p:first-child { margin-top: 0; }
.imagfaq-duyu-accordion-content .content-inner p:last-child { margin-bottom: 0; }

/* --- Mobile Layout --- */
@media (max-width: 767px) {
    .imagfaq-duyu-wrapper {
        flex-direction: var(--mobile-direction, column);
    }
    .imagfaq-duyu-images, .imagfaq-duyu-accordion { 
        width: 100%; 
    }
    .imagfaq-duyu-images { 
        min-height: 250px;
    }
    .imagfaq-duyu-accordion {
        justify-content: flex-start;
    }
}