/* Основные стили плашек BERI-BABKI */
:root {
    --bba-font: 'Unbounded', sans-serif;
}

.bba-alert {
    margin: 25px 0;
    padding: 20px 25px;
    border-radius: 12px;
    border-left: 6px solid;
    font-family: var(--bba-font);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.bba-alert::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.05;
    z-index: 0;
}

.bba-alert-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.bba-alert-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 12px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.bba-alert-title {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bba-alert-content {
    font-size: 15px;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    font-weight: 400;
}

.bba-alert-content p {
    margin: 0 0 10px 0;
}

.bba-alert-content p:last-child {
    margin-bottom: 0;
}

/* ===== ИКОНКИ SVG ===== */

/* Важно - восклицательный знак в круге */
.bba-icon-important {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23e53e3e' d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/svg%3E");
}

/* Примечание - ручка */
.bba-icon-note {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%233182ce' d='M441 58.9L453.1 71c9.4 9.4 9.4 24.6 0 33.9L424 134.1 377.9 88 407 58.9c9.4-9.4 24.6-9.4 33.9 0zM337.7 128L209 256.7 172.3 220 301 91.3 337.7 128zM124 299.7C110.7 313 101.3 329.5 96.8 347.2l-24.4 96.3c-3.2 12.6 7.5 23.3 20.1 20.1l96.3-24.4c17.7-4.5 34.2-13.9 47.5-27.2l125-125L316.7 243 191.7 368c-4.4 4.4-10.4 7.4-16.9 8.7L101 395.7l19-73.8c1.3-6.5 4.3-12.5 8.7-16.9L253.7 180 299.7 226 174.7 351c-3.1 3.1-3.1 8.2 0 11.3s8.2 3.1 11.3 0L361 187.3 324.7 151 149.7 326c-3.1 3.1-3.1 8.2 0 11.3s8.2 3.1 11.3 0L336 162.3 299.7 126 124 299.7z'/%3E%3C/svg%3E");
}

/* Предупреждение - треугольник */
.bba-icon-warning {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23dd6b20' d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E");
}

/* Совет - лампочка */
.bba-icon-tip {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%2338a169' d='M272 384c9.6-31.9 29.5-59.1 49.2-86.2l0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4l0 0c19.8 27.1 39.7 54.4 49.2 86.2H272zM192 512c44.2 0 80-35.8 80-80V416H112v16c0 44.2 35.8 80 80 80zM112 176c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-61.9 50.1-112 112-112c8.8 0 16 7.2 16 16s-7.2 16-16 16c-44.2 0-80 35.8-80 80z'/%3E%3C/svg%3E");
}

/* Информация - буква i в круге */
.bba-icon-info {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23805ad5' d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E");
}

/* ===== ЦВЕТОВЫЕ СХЕМЫ ===== */

/* Важно - Красный */
.bba-alert-important {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
    border-left-color: #e53e3e;
    color: #742a2a;
}

.bba-alert-important .bba-alert-title {
    color: #c53030;
}

.bba-alert-important::before {
    background: #e53e3e;
}

/* Примечание - Синий */
.bba-alert-note {
    background: linear-gradient(135deg, #ebf8ff 0%, #d6e4ff 100%);
    border-left-color: #3182ce;
    color: #2a4365;
}

.bba-alert-note .bba-alert-title {
    color: #2b6cb0;
}

.bba-alert-note::before {
    background: #3182ce;
}

/* Предупреждение - Оранжевый */
.bba-alert-warning {
    background: linear-gradient(135deg, #fffaf0 0%, #ffecd7 100%);
    border-left-color: #dd6b20;
    color: #7b341e;
}

.bba-alert-warning .bba-alert-title {
    color: #c05621;
}

.bba-alert-warning::before {
    background: #dd6b20;
}

/* Совет - Зеленый */
.bba-alert-tip {
    background: linear-gradient(135deg, #f0fff4 0%, #d6ffe2 100%);
    border-left-color: #38a169;
    color: #22543d;
}

.bba-alert-tip .bba-alert-title {
    color: #2f855a;
}

.bba-alert-tip::before {
    background: #38a169;
}

/* Информация - Фиолетовый */
.bba-alert-info {
    background: linear-gradient(135deg, #faf5ff 0%, #e9d8fd 100%);
    border-left-color: #805ad5;
    color: #44337a;
}

.bba-alert-info .bba-alert-title {
    color: #6b46c1;
}

.bba-alert-info::before {
    background: #805ad5;
}

/* Адаптивность */
@media (max-width: 768px) {
    .bba-alert {
        margin: 20px 0;
        padding: 15px 20px;
        border-radius: 8px;
    }
    
    .bba-alert-icon {
        width: 20px;
        height: 20px;
    }
    
    .bba-alert-title {
        font-size: 16px;
    }
    
    .bba-alert-content {
        font-size: 14px;
    }
}

/* Анимация появления */
@keyframes bbaSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bba-alert {
    animation: bbaSlideIn 0.4s ease-out;
}