/* 
 * Aesthetic Accordion Override Styles for Elementor Native Widgets
 */

/* Base container spacing */
.is-aesthetic-accordion .elementor-accordion,
.is-aesthetic-accordion .e-n-accordion {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Individual Item wrappers */
.is-aesthetic-accordion .elementor-accordion-item,
.is-aesthetic-accordion .e-n-accordion-item {
    background-color: #ffffff;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0,0,0,0.03) !important;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-bottom: 0 !important;
}

/* Header */
.is-aesthetic-accordion .elementor-tab-title,
.is-aesthetic-accordion .e-n-accordion-item-title {
    padding: 20px 24px !important;
    background: transparent !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer;
    transition: background-color 0.3s ease !important;
    border: none !important;
}

.is-aesthetic-accordion .elementor-tab-title:hover,
.is-aesthetic-accordion .e-n-accordion-item-title:hover {
    background-color: rgba(0,0,0,0.02) !important;
}

/* Titles */
.is-aesthetic-accordion .elementor-accordion-title,
.is-aesthetic-accordion .e-n-accordion-item-title-text {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    transition: color 0.3s ease;
    order: 1;
    margin-right: 16px;
    flex: 1;
    text-align: left;
}

/* Icons container */
.is-aesthetic-accordion .elementor-accordion-icon,
.is-aesthetic-accordion .e-n-accordion-item-title-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.04);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease !important;
    float: none !important;
    order: 2;
    flex-shrink: 0;
}

.is-aesthetic-accordion .elementor-tab-title:hover .elementor-accordion-icon,
.is-aesthetic-accordion .e-n-accordion-item-title:hover .e-n-accordion-item-title-icon {
    background-color: rgba(0, 0, 0, 0.08);
}

.is-aesthetic-accordion .elementor-accordion-icon i,
.is-aesthetic-accordion .elementor-accordion-icon svg,
.is-aesthetic-accordion .e-n-accordion-item-title-icon i,
.is-aesthetic-accordion .e-n-accordion-item-title-icon svg {
    color: #1a1a1a !important;
    fill: #1a1a1a !important;
    width: 14px;
    height: 14px;
}

/* --- ACTIVE STATES --- */

/* Classic Accordion Active State */
.is-aesthetic-accordion .elementor-tab-title.elementor-active {
    background-color: rgba(0,0,0,0.02) !important;
}

.is-aesthetic-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon {
    transform: rotate(180deg) !important;
    background-color: #1a1a1a !important;
}

.is-aesthetic-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon i,
.is-aesthetic-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Modern fallback for adding shadow to wrapper if active */
.is-aesthetic-accordion .elementor-accordion-item.is-aesthetic-active,
.is-aesthetic-accordion .elementor-accordion-item:has(.elementor-tab-title.elementor-active) {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border-color: rgba(0,0,0,0.08) !important;
}

/* Nested Accordion Active State (<details open>) */
.is-aesthetic-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title {
    background-color: rgba(0,0,0,0.02) !important;
}

.is-aesthetic-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon {
    transform: rotate(180deg) !important;
    background-color: #1a1a1a !important;
}

.is-aesthetic-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon i,
.is-aesthetic-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.is-aesthetic-accordion .e-n-accordion-item[open] {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border-color: rgba(0,0,0,0.08) !important;
}

/* --- CONTENT AREA --- */

/* Content Area Classic */
.is-aesthetic-accordion .elementor-tab-content {
    padding: 0 24px 24px 24px !important;
    border: none !important;
    color: #555555;
    font-size: 16px;
    line-height: 1.6;
}

/* Content Area Nested */
.is-aesthetic-accordion .e-n-accordion-item-content {
    padding: 0 24px 24px 24px !important;
}