/* dictionary/css/collapsible.css */

.collapsible-container {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px; /* Spacing between sections */
    overflow: hidden; /* Ensures content is hidden properly when collapsed */
    transition: all 0.3s ease-in-out; /* Smooth transition for background, shadow etc. */
}

.collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 25px; /* Increased padding */
    background-color: #f0f4f8; /* Lighter background for header */
    cursor: pointer;
    border-bottom: 1px solid #e0e6eb; /* Separator */
    border-radius: 12px 12px 0 0; /* Rounded top corners */
    user-select: none; /* Prevent text selection on header click */
    transition: background-color 0.3s ease;
}

.collapsible-header:hover {
    background-color: #e5edf4; /* Slightly darker on hover */
}

.collapsible-header h2 {
    margin: 0;
    font-size: 1.4em; /* Larger font for titles */
    color: #333;
    display: flex; /* Allow icon next to title */
    align-items: center;
}

.collapsible-header h2 i {
    margin-right: 10px; /* Space between icon and text */
    color: #666;
}

.collapsible-header .toggle-icon {
    font-size: 1.2em;
    color: #666;
    transition: transform 0.3s ease; /* Smooth rotation */
}

/* Collapsed state */
.collapsible-container:not(.expanded) .collapsible-header {
    border-radius: 12px; /* Fully rounded when collapsed */
    border-bottom: none; /* No bottom border when fully collapsed */
}

.collapsible-container:not(.expanded) .collapsible-content {
    max-height: 0;
    padding: 0 25px; /* Zero padding when collapsed */
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out, opacity 0.3s ease, visibility 0.3s ease;
}

.collapsible-container:not(.expanded) .toggle-icon {
    transform: rotate(-90deg); /* Rotate icon for collapsed state */
}

/* Expanded state */
.collapsible-container.expanded .collapsible-content {
    max-height: 2000px; /* Increased to a very large value */
    padding: 25px; /* Padding when expanded */
    opacity: 1;
    visibility: visible;
    transition: max-height 0.5s ease-in, padding 0.5s ease-in, opacity 0.4s ease 0.1s, visibility 0.4s ease 0.1s;
}

.collapsible-container.expanded .toggle-icon {
    transform: rotate(0deg); /* Normal rotation for expanded state */
}

/* Specific adjustments for initial content like search input */
.collapsible-container .search-section,
.collapsible-container .image-to-text-section,
.collapsible-container .history-section {
    /* Reset padding/margin if these classes had their own */
    padding: 0;
    margin: 0;
    box-shadow: none; /* Remove shadow from inner content if it existed */
    background-color: transparent; /* Remove background from inner content if it existed */
    border-radius: 0;
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .collapsible-header {
        padding: 15px 20px;
    }
    .collapsible-header h2 {
        font-size: 1.2em;
    }
    .collapsible-container.expanded .collapsible-content {
        padding: 20px;
    }
}