@font-face {
    font-family: kalameh;
    src: url("../fonts/KalamehWeb-Medium.woff2");
}

/* متغیرهای اصلی (برندینگ آذر پلاس) */
:root {
    --color-primary: #FF5722; /* رنگ اصلی آذر پلاس */
    --color-primary-light: #FF8A65;
    --color-text-dark: #333333;
    --color-text-medium: #666666;
    --color-border: #EEEEEE;
    --transition-speed: 0.3s;
}

* {
    font-family: kalameh;
}

/* کانتینر اصلی */
.azarplus-toggle {
    max-width: 900px;
    margin: 30px auto;
    direction: rtl;
    font-family: Tahoma, Arial, sans-serif;
    border-radius: 8px;
    overflow: hidden;
}

/* آیتم تکی آکاردئون */
.ap-toggle-item {
    /* می‌توانید این قسمت را برای حفظ ظاهر کلی آکاردئون‌های قبلی نگه دارید */
    margin-bottom: 10px;
    border: 1px solid #eee;
    border-radius: 5px;
}

/* حذف فلش پیش‌فرض مرورگر */
.ap-toggle-item summary {
    list-style: none;
    /* این خط برای فایرفاکس است */
}
.ap-toggle-item summary::-webkit-details-marker {
    /* این خط برای مرورگرهای مبتنی بر کرومیوم است */
    display: none;
}

/* استایل‌دهی تایتل (Summary) */
.ap-toggle-title {
    padding: 15px;
    background-color: #f9f9f9;
    cursor: pointer;
    display: flex; /* برای قرار دادن عنوان و آیکون کنار هم */
    justify-content: space-between;
    align-items: center;
}

/* استایل‌دهی محتوا (Content) */
.ap-toggle-content {
    padding: 10px 15px;
    border-top: 1px solid #eee;
    /* برای انیمیشن ساده (البته Details/Summary اجازه کنترل Transition را روی خودش نمی‌دهد) */
    /* اگر انیمیشن نیاز دارید، باید از روش "چک‌باکس" استفاده کنید. */
}

/* --- کنترل آیکون --- */

.ap-toggle-icon svg {
    width: 15px;
    height: 15px;
    transition: transform 0.3s ease; /* انیمیشن نرم برای چرخش آیکون */
}

/* حالت پیش‌فرض آیکون: برای آیکون + (جمع) */
/* .ap-toggle-item[open] به معنی "اگر <details> باز بود" */
.ap-toggle-item[open] .ap-toggle-icon svg {
    /* چرخش برای تبدیل آیکون + به آیکون - (منفی/خط افقی) */
    transform: rotate(45deg); 
}