/* ==========================================================================
   UI KIT: ACCORDIONS (Сгъваеми панели, Промо кодове, FAQ)
   ========================================================================== */

/* 1. ГРУПИРАНЕ (Когато имаме няколко FAQ един под друг) */
.aopc-accordion-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 2. ГЛАВЕН КОНТЕЙНЕР (Details) */
.aopc-accordion {
    background-color: var(--fiptec-white);
    border: 1px solid var(--fiptec-slate-200);
    border-radius: var(--fiptec-radius-global, 14px);
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Вариация: Flush (Изчистен дизайн за FAQ без външна кутия) */
.aopc-accordion-flush {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--fiptec-slate-200);
}
.aopc-accordion-group-flush {
    gap: 0; /* При Flush няма разстояние между тях */
}
.aopc-accordion-flush:last-child {
    border-bottom: none; /* Махаме последната линия */
}

/* 3. ЗАГЛАВИЕ (Summary) */
.aopc-accordion-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    color: var(--fiptec-slate-900);
    background-color: var(--fiptec-white);
    user-select: none;
    transition: background-color 0.2s ease;
    
    /* Скриване на дефолтната стрелка */
    list-style: none;
}
.aopc-accordion-header::-webkit-details-marker {
    display: none;
}

.aopc-accordion-header:hover {
    background-color: var(--fiptec-slate-50);
}

/* Лявата част със заглавието и евентуална икона */
.aopc-accordion-title-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Иконката вдясно (Стрелка или Плюс) */
.aopc-accordion-icon {
    color: var(--fiptec-slate-400);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 4. СЪСТОЯНИЕ ОТВОРЕНО (Open) */
details[open].aopc-accordion .aopc-accordion-header {
    border-bottom: 1px solid var(--fiptec-slate-100);
}

details[open].aopc-accordion-flush .aopc-accordion-header {
    border-bottom: none; /* При Flush не ни трябва двойна линия */
}

/* Завъртане на иконката при отваряне */
details[open].aopc-accordion .aopc-accordion-icon {
    transform: rotate(180deg);
    color: var(--fiptec-blue); /* Става синя за акцент */
}

/* 5. СЪДЪРЖАНИЕ (Content) */
.aopc-accordion-content {
    padding: 20px;
    color: var(--fiptec-slate-700);
    line-height: 1.6;
    background-color: var(--fiptec-white);
    /* Плавна поява на съдържанието */
    animation: aopc-accordion-fade-in 0.3s ease-out forwards;
    transform-origin: top;
}

/* Анимация за съдържанието */
@keyframes aopc-accordion-fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}