/* ==========================================================================
   КАСТОМНЫЙ ACCORDION ДЛЯ СТРАНИЦЫ УСЛУГ (FRAGMENT)
   ========================================================================== */

/* Базовое состояние кнопок (Заголовков вкладок) */
.custom-accordion .accordion-button {
    background-color: #343a40 !important; /* Темно-серый */
    color: rgb(255, 255, 255) !important; /* Белый текст */
    display: flex !important;              /* Включаем флексбокс */
    justify-content: center !important;    /* Центрируем текст по горизонтали */
    position: relative !important;         /* Нужно для правильного позиционирования стрелочки */
}

/* Центрируем иконку-стрелку Bootstrap относительно правого края */
.custom-accordion .accordion-button::after {
    filter: invert(1) grayscale(1) brightness(2);
    position: absolute !important;         /* Вырываем стрелку из общего потока */
    right: 1.25rem !important;             /* Прижимаем её к правому краю с отступом */
}

/* Удаление стандартного неонового/синего свечения Bootstrap при фокусе */
.custom-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0, 0, 0, .125);
}

/* Состояние кнопки, когда вкладка развернута (Активна) */
.custom-accordion .accordion-button:not(.collapsed) {
    background-color: #212529 !important; /* Делаем фон глубже/темнее */
    color: #e9ecef !important;
}

/* Внутреннее тело раскрытого спойлера (Контентная часть) */
.custom-accordion .accordion-body {
    background-color: #f8f9fa !important; /* Светлый матовый фон для идеального контраста */
    color: #2b2d42 !important;            /* Приятный глубокий графитовый цвет текста */
    text-shadow: none !important;         /* Полный сброс размытий и свечений для читаемости */
    font-weight: 500;
    text-align: left !important;           /* Выравнивание по левому краю */
}

/* ==========================================================================
   ДОПОЛНЕНИЕ ДЛЯ ВНУТРЕННИХ ЭЛЕМЕНТОВ КОНВЕРТЕРА
   ========================================================================== */

/* Стили для окон выбора (селектов) внутри кастомного аккордеона */
.custom-accordion .converter-select {
    background-color: #495057 !important; /* Темно-серый фон самого окна */
    color: #ffffff !important;            /* Белый текст активного формата */
    border-color: #495057 !important;      /* Серый цвет рамки вокруг селекта */
}

/* Стили для выпадающих элементов (вариантов) внутри списка при клике */
.custom-accordion .converter-select option {
    background-color: #495057;             /* Серый фон списка опций */
    color: #ffffff;                        /* Белый текст опций */
}

/* Сброс стандартного фокуса Bootstrap для окон выбора */
.custom-accordion .converter-select:focus {
    border-color: #6c757d !important;
    box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.25) !important;
}

/* Размеры и форма для центральной кнопки обмена (круга со стрелками) */
.custom-accordion .converter-btn-swap {
    width: 50px;                           /* Ширина круга */
    height: 50px;                          /* Высота круга */
    transition: all 0.2s ease-in-out;       /* Плавный эффект смены цвета */
}

/* Эффект наведения мыши на кнопку обмена */
.custom-accordion .converter-btn-swap:hover {
    background-color: #6c757d !important;  /* Плавное закрашивание в серый */
    color: #ffffff !important;             /* Стрелочки становятся белыми */
}

/* ==========================================
   ОБЩАЯ РАМКА АККОРДЕОНА
   ========================================== */
/* Полностью убираем рамку вокруг блока */
.converter-item {
  border: none !important;     /* Убирает любую границу */
  background: transparent;     /* Оставляем фон прозрачным */
  box-shadow: none !important; /* На всякий случай отключаем тень, если она была */
}

/* Делаем кнопку аккордеона flex-строкой и центрируем текст */
.custom-accordion .accordion-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    padding-left: 4rem; /* Отступ слева, чтобы текст не налезал на иконку */
    padding-right: 4rem; /* Отступ справа для симметрии из-за стрелки */
    width: 100%;
}

/* Фиксируем иконки в идеальный вертикальный ряд строго слева */
.custom-accordion .accordion-emoji {
    order: -1;
    position: absolute;
    left: 1.5rem;
    width: 2rem;
    text-align: left;
    font-size: 1.3rem;
    display: inline-block;
}

/* Намертво прижимаем стандартную стрелку Bootstrap к правому краю */
.custom-accordion .accordion-button::after {
    position: absolute;
    right: 1.5rem;
    margin-left: 0 !important;
}

/* Опционально: делаем жирный текст в описании чуть ярче */
.custom-accordion .accordion-body strong {
    color: #000; /* Или твой акцентный цвет темы, например #0d6efd */
    font-weight: 700;
}

/* Настройки для плавающей кнопки контактов в углу экрана */
.btn-contact-float {
    width: 60px;
    height: 60px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, background-color 0.2s ease;
    border: none;
}
.btn-contact-float:hover {
    transform: scale(1.1);
}

/* Стилизация выпадающего меню плавающей кнопки */
.file-converter-fragment .dropdown-menu {
    border-radius: 12px;
    border: none;
}
.file-converter-fragment .dropdown-item {
    transition: background-color 0.2s ease;
}
.file-converter-fragment .dropdown-item:hover {
    background-color: #f8f9fa;
    border-radius: 6px;
}