/*
 * ПОЛНОЕ ИСПРАВЛЕНИЕ ДЛЯ КНОПОК
 */

/* Глобальный reset для box-sizing */
*,
*::before,
*::after {
    box-sizing: border-box !important;
}

/* Контейнеры верхнего уровня */
.wp-block-group.alignfull {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Контейнеры с padding 10% */
.wp-block-group[style*="padding-right:10%"] {
    padding-right: 10% !important;
    padding-left: 10% !important;
    width: 100% !important;
}

/* Основной контейнер кнопок - FIXED */
.custom-button-row {
    display: flex !important;
    flex-wrap: nowrap !important; /* На больших экранах кнопки не переносятся */
    width: 100% !important;
    margin-bottom: 5px !important; /* Отступ под всем блоком кнопок */
    align-items: stretch !important;
    gap: 0 !important; /* Убираем gap полностью, так как используем margin-right на item */
}

/* Сбрасываем все возможные margin/padding у кнопок */
.custom-button-row .custom-button-item {
    display: flex !important;
    flex-direction: row; /* Иконка и текст в ряд */
    align-items: center !important;
    justify-content: flex-start !important; /* Выравнивание содержимого по левому краю */
    padding: 15px 10px !important;
    text-align: left !important; /* Выравнивание текста по левому краю */
    text-decoration: none !important;
    font-size: 1.1em !important; /* Размер шрифта */
    font-weight: bold !important;
    border-radius: 8px !important; /* Радиус углов, будет переопределен neumorph */
    box-sizing: border-box !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
    cursor: pointer !important;
    border: none !important; /* Убираем границу */
    white-space: normal !important; /* Разрешаем перенос текста на новую строку */
    overflow: visible !important; /* Разрешаем видимое содержимое */
    text-overflow: clip !important; /* Отключаем обрезку многоточием */
    line-height: 1.4 !important; /* Высота строки */
    min-height: 45px !important;

    /* Сбрасываем все margin и добавляем margin-right для горизонтального отступа */
    margin: 0 !important;
    margin-right: 4px !important; /* Отступ между кнопками по горизонтали */
}

/* У последней кнопки убираем margin-right, чтобы не было лишнего отступа справа */
.custom-button-row .custom-button-item:last-child {
    margin-right: 0 !important;
}

/* Стили для синих кнопок */
.custom-button-row .custom-button-item.button-blue {
    background-color: #2a5c8a !important; /* Основной синий фон */
    box-shadow: 0 3px 7px rgba(0, 170, 255, 0.2) !important; /* Слабое синее свечение по умолчанию */
}

/* Стили для красных кнопок */
.custom-button-row .custom-button-item.button-red {
    background-color: #a03030 !important; /* Основной красный фон */
    box-shadow: 0 3px 7px rgba(255, 77, 77, 0.2) !important; /* Слабое красное свечение по умолчанию */
}

/* Стили для иконок */
.custom-button-row .custom-button-item i {
    flex-shrink: 0; /* Иконка не сжимается */
    margin-right: 15px !important; /* Отступ справа от иконки */
    vertical-align: middle !important;
    font-size: 1.8em !important; /* Размер иконки */
    color: inherit !important; /* Иконка наследует цвет текста кнопки */
    transition: transform 0.3s ease, text-shadow 0.3s ease, opacity 0.3s ease !important;
}

/* Стили HOVER для синих кнопок (усиленное свечение) */
.custom-button-row .custom-button-item.button-blue:hover {
    background-color: #3a6e9a !important; /* Немного более яркий синий при наведении */
    box-shadow: 0 6px 15px rgba(0, 170, 255, 0.5) !important; /* Сильное синее свечение (тень) */
}

/* Стили HOVER для красных кнопок (усиленное свечение) */
.custom-button-row .custom-button-item.button-red:hover {
    background-color: #b33a3a !important; /* Немного более яркий красный при наведении */
    box-shadow: 0 6px 15px rgba(255, 77, 77, 0.5) !important; /* Сильное красное свечение (тень) */
}

/* Свечение и увеличение иконки при наведении (общий стиль для всех кнопок),
   будет переопределено для neumorph */
.custom-button-row .custom-button-item:hover i {
    transform: scale(1.2) !important; /* Иконка увеличивается */
    text-shadow: 0 0 5px #fff !important; /* Белое свечение иконки */
}

/* === Neumorphism стиль === */
.custom-button-row .custom-button-item.neumorph {
    background: #e0e5ec !important;
    color: #6d7587 !important;
    border-radius: 12px !important;
    box-shadow: 5px 5px 10px #caced1, -5px -5px 10px #ffffff !important;
    transition: all 0.2s ease !important;
    border: none !important;
}

.custom-button-row .custom-button-item.neumorph:hover {
    box-shadow: inset 5px 5px 10px #caced1, inset -5px -5px 10px #ffffff !important;
}

.custom-button-row .custom-button-item.neumorph:hover i {
    transform: scale(1.1) rotate(-5deg) !important;
    opacity: 0.8 !important;
}

/* Точные ширины с учетом margin-right */
/* Поскольку margin-right: 4px для кнопок, кроме последней,
   для N кнопок будет (N-1)*4px общего margin между ними.
   На 4 кнопки: 3 * 4px = 12px.
   Расчет: 20% от всей доступной ширины, минус доля от общего margin.
   Для 4 кнопок (3 маржина):
   Пусть x = 20%, y = 30%.
*/
.custom-button-row .button-col-20 {
    flex: 0 0 calc(20% - (12px * 0.20)) !important; /* 20% минус 20% от общей ширины margins */
    max-width: calc(20% - (12px * 0.20)) !important;
}

.custom-button-row .button-col-30 {
    flex: 0 0 calc(30% - (12px * 0.30)) !important; /* 30% минус 30% от общей ширины margins */
    max-width: calc(30% - (12px * 0.30)) !important;
}

/* Медиа-запросы */
@media (max-width: 768px) {
    .custom-button-row {
        flex-wrap: wrap !important; /* Разрешаем перенос кнопок */
        gap: 0 !important; /* Убираем gap */
    }
    .custom-button-row .custom-button-item {
        flex: 1 1 calc(50% - 5px) !important; /* Две кнопки в ряд, с отступом между ними */
        margin-right: 5px !important; /* Отступ справа */
        margin-bottom: 5px !important; /* Уменьшили вертикальный отступ */
        max-width: none !important;
    }
    .custom-button-row .custom-button-item:nth-child(2n) {
        margin-right: 0 !important; /* У каждой второй кнопки убираем margin-right */
    }
}

@media (max-width: 480px) {
    .custom-button-row .custom-button-item {
        flex: 1 1 100% !important; /* Одна кнопка на всю ширину */
        margin-right: 0 !important; /* Убираем правый отступ */
        margin-bottom: 5px !important; /* Уменьшили вертикальный отступ */
    }
}