/* ==========================================================================
   Breadcrumbs UngShop Style Guide (Контрастные стрелочки-капсулы)
   ========================================================================== */

/* Глобальный контейнер компонента */
.breadcrumbs-ungshop {
    padding: 15px 0 25px 0 !important;
    background: transparent !important;
}
.breadcrumbs-ungshop .container-fluid {
    padding: 0 !important;
}

/* Стилизация главного промо-заголовка */
.breadcrumbs-ungshop .bc-ung-header {
    text-align: center !important;
    margin-bottom: 25px !important;
    margin-top: 25px !important;
    background: linear-gradient(135deg, #fdf2f8 0%, #f0fdf4 100%) !important;
    padding: 20px !important;
    border-radius: 12px !important;
    border: 1px solid #fbcfe8 !important;
    box-shadow: 0 4px 15px rgba(219, 39, 119, 0.05) !important;
}
.breadcrumbs-ungshop .bc-ung-header h3 {
    margin: 0 !important;
    font-weight: 900 !important;
    font-size: 24px !important;
    color: #db2777 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
.breadcrumbs-ungshop .bc-ung-badge {
    background: linear-gradient(90deg, #7360f2 0%, #503ebd 100%) !important;
    color: #ffffff !important;
    padding: 6px 16px !important;
    border-radius: 30px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 10px rgba(115, 96, 242, 0.3) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    display: inline-block !important;
}

/* Флекс-контейнер для стрелочек */
.breadcrumbs-ungshop .bc-ung-arrow-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Общие базовые стили для каждой крошки-стрелочки */
.breadcrumbs-ungshop .bc-ung-item {
    padding: 10px 20px 10px 30px;
    font-size: 14px;
    text-decoration: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease;
    margin-right: 2px;
}

/* Геометрия острого треугольника (наконечника) справа */
.breadcrumbs-ungshop .bc-ung-item:not(.bc-ung-active)::after {
    content: "";
    position: absolute;
    right: -14px;
    top: 0;
    width: 0;
    height: 0;
    border-left: 14px solid;
    border-top: 22px solid transparent;
    border-bottom: 21px solid transparent;
    z-index: 2;
}

/* 🎨 УНИКАЛЬНЫЕ И КОНТРАСТНЫЕ ЦВЕТА ДЛЯ КАЖДОГО СТАТУСА */

/* 1. Первая крошка (В магазин) — Желто-зеленая */
.breadcrumbs-ungshop .bc-ung-first {
    background: #ffef00 !important;
    color: #2c7214 !important;
    font-weight: 700 !important;
    padding-left: 25px !important;
}
.breadcrumbs-ungshop .bc-ung-first i {
    font-size: 16px !important;
    color: #4f46e5 !important;
    margin-right: 6px;
}
.breadcrumbs-ungshop .bc-ung-first::after {
    border-left-color: #ffef00 !important;
}

/* 2. Новые товары — Светло-серая, текст зеленый */
.breadcrumbs-ungshop .bc-ung-secondary {
    background: #f1f5f9 !important;
    /*color: #185105 !important;*/
    color: #bb098e !important;
    font-weight: 600 !important;
}
.breadcrumbs-ungshop .bc-ung-secondary::after {
    border-left-color: #f1f5f9 !important;
}

/* 3. Личный Кабинет — Серый металл */
.breadcrumbs-ungshop .bc-ung-auth {
    background: #cbd5e1 !important;
    color: #0f172a !important;
    font-weight: 600 !important;
}
.breadcrumbs-ungshop .bc-ung-auth::after {
    border-left-color: #cbd5e1 !important;
}

/* 4. Акции Доставки (Warning-блок) — Золотая акция */
.breadcrumbs-ungshop .bc-ung-warning {
    background: #fef08a !important;
    color: #854d0e !important;
    font-weight: 800 !important;
    border-top: 1px solid #fde047 !important;
    border-bottom: 1px solid #fde047 !important;
}
.breadcrumbs-ungshop .bc-ung-warning i {
    color: #ca8a04 !important;
    margin-right: 6px;
}
.breadcrumbs-ungshop .bc-ung-warning::after {
    border-left-color: #fef08a !important;
}

/* 5. Активная последняя страница (Danger-капсула со стрелкой) — Малиновая */
.breadcrumbs-ungshop .bc-ung-active {
    background: #db2777 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    width: fit-content !important;
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
    box-shadow: 0 4px 10px rgba(219, 39, 119, 0.25) !important;
    padding-right: 25px !important;
}
.breadcrumbs-ungshop .bc-ung-active::after {
    content: "";
    position: absolute;
    right: -10px;
    top: 6px;
    width: 28px;
    height: 28px;
    background: #db2777;
    transform: rotate(45deg);
    border-top-right-radius: 6px;
    z-index: 1;
    box-shadow: 3px -3px 5px rgba(219, 39, 119, 0.15);
}

/* Эффект наведения (Hover) для всех интерактивных ссылок */
.breadcrumbs-ungshop a.bc-ung-item:hover {
    background: #7360f2 !important;
    color: #ffffff !important;
    border-color: #7360f2 !important;
}
.breadcrumbs-ungshop a.bc-ung-item:hover::after {
    border-left-color: #7360f2 !important;
}
.breadcrumbs-ungshop a.bc-ung-item:hover i {
    color: #ffffff !important;
}

/* Анимация плавного прыжка для иконок */
.breadcrumbs-ungshop .bc-ung-icon-bounce {
    animation: bounce 2s infinite !important;
}

/* Дополнения для каталога и вложенных динамических категорий UngShop */
.breadcrumbs-ungshop .bc-ung-text-raw {
    font-size: 16px !important;
    color: #475569 !important;
    text-transform: none !important;
    font-weight: 700 !important;
}

/* Контрастные системные бейджи для заголовков */
.breadcrumbs-ungshop .bc-ung-badge {
    padding: 5px 12px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    display: inline-block !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04) !important;
}
.breadcrumbs-ungshop .bc-badge-primary { background: #eff6ff !important; color: #1d4ed8 !important; border: 1px solid #bfdbfe !important; }
.breadcrumbs-ungshop .bc-badge-warning { background: #fef08a !important; color: #854d0e !important; border: 1px solid #fde047 !important; }
.breadcrumbs-ungshop .bc-badge-success { background: #f0fdf4 !important; color: #166534 !important; border: 1px solid #bbf7d0 !important; }

/* Стилизация счетчиков (кружков) количества товаров внутри стрелочек */
.breadcrumbs-ungshop .bc-count-pill {
    background: #22c55e !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    margin-left: 8px !important;
    display: inline-block !important;
    box-shadow: 0 1px 3px rgba(34, 197, 94, 0.3) !important;
}

.breadcrumbs-ungshop .bc-pill-warn {
    background: #eab308 !important;
    box-shadow: 0 1px 3px rgba(234, 179, 8, 0.3) !important;
}

/* Стили для стрелок второго динамического уровня (вложенность) */
.breadcrumbs-ungshop .bc-sub-level {
    margin-top: 10px !important;
    background: #f8fafc !important;
    padding: 6px !important;
    border-radius: 8px !important;
    border: 1px dashed #cbd5e1 !important;
}

/* Фиолетовая активная под-категория */
.breadcrumbs-ungshop .bc-ung-active-sub {
    background: #7360f2 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    width: fit-content !important;
    padding: 10px 25px 10px 30px;
    font-size: 14px;
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: 2px;
}
.breadcrumbs-ungshop .bc-ung-active-sub::after {
    content: "";
    position: absolute;
    right: -14px;
    top: 0;
    width: 0;
    height: 0;
    border-left: 14px solid #7360f2 !important;
    border-top: 22px solid transparent;
    border-bottom: 21px solid transparent;
    z-index: 2;
}
/* ==========================================================================
   Стили для Дополнительного Уровня Брендов (Related Brands Component)
   ========================================================================== */

/* Пунктирный контейнер для уровня брендов */
.breadcrumbs-ungshop .bc-brands-level {
    background: #bfe1ba !important;
    border: 1px dashed #cbd5e1 !important;
    padding: 6px !important;
    border-radius: 8px !important;
}

/* Фиксированная активная плашка бренда (Начало строки) */
.breadcrumbs-ungshop .bc-ung-active-brand {
    background: #ea5455 !important; /* Насыщенный красный/алый цвет для сущности бренда */
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 14px;
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: 2px;
    padding: 10px 25px 10px 30px;
}

.breadcrumbs-ungshop .bc-ung-active-brand::after {
    content: "";
    position: absolute;
    right: -14px;
    top: 0;
    width: 0;
    height: 0;
    border-left: 14px solid #ea5455 !important;
    border-top: 22px solid transparent;
    border-bottom: 21px solid transparent;
    z-index: 2;
}

/* Корректировка отступов внутри стрелочки бренда для аватарки */
.breadcrumbs-ungshop .bc-ung-brand-item {
    position: relative !important;
    text-transform: inherit !important;
    padding-left: 35px !important; /* Освобождаем место слева под аватарку */
}

/* Стильная круглая аватарка первой буквы */
.breadcrumbs-ungshop .bc-brand-avatar {
    color: #ffffff !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-weight: 2000 !important;
    position: absolute !important; /* Абсолютное позиционирование внутри стрелки */
    top: 30% !important;
    transform: translateY(-50%) !important; /* Идеальное центрирование по вертикали */
    left: 2px !important;
    z-index: 3;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
}

.breadcrumbs-ungshop .bc-brand-name-text {
    font-weight: 900 !important;
}

/* Асинхронное лого (если понадобится в будущем) */
.breadcrumbs-ungshop .async-brand-logo {
    transition: opacity 0.5s ease-in;
    opacity: 0;
    vertical-align: middle;
    margin-right: 5px;
}
.breadcrumbs-ungshop .async-brand-logo[src] {
    opacity: 1;
}

/* ==========================================================================
   ✨ КРАСИВЫЙ КОМПАКТНЫЙ БАББЛ КОЛИЧЕСТВА ТОВАРОВ В КРОШКАХ
   ========================================================================== */
.breadcrumbs-ungshop .bc-ung-count-bubble {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Сочный зеленый фон с градиентом для эффекта объема */
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: #ffffff !important;

    /* Жирный, четкий шрифт */
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    /* Форма идеального круга/овала */
    padding: 3px 8px !important;
    min-width: 20px !important;
    height: 18px !important;
    border-radius: 10px !important;

    /* Отступ слева от названия бренда */
    margin-left: 8px !important;

    /* Легкая аккуратная тень, чтобы баббл «приподнимался» над стрелкой */
    box-shadow: 0 2px 5px rgba(22, 163, 74, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
}

/* Эффект при наведении на саму крошку — баббл слегка увеличивается */
.bc-ung-brand-item:hover .bc-ung-count-bubble {
    background: #ffffff !important;
    color: #7360f2 !important; /* Меняется на фиолетовый под цвет ховера крошки */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    transform: scale(1.08);
    transition: all 0.2s ease;
}

/* Стилизация новой панели сортировки UngShop */
.sort-select-group select:hover {
    color: #7360f2 !important;
}
.view-mode-ungshop a:hover:not([style*="background: rgb(115"]) {
    background: #e2e8f0 !important;
    color: #1e293b !important;
}

/* Интерактивный эффект для микро-карточек новинок */
.recent-product-mini-row:hover {
    border-color: #7360f2 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 10px rgba(115, 96, 242, 0.08) !important;
}
.recent-product-mini-row:hover h4 a {
    color: #7360f2 !important;
}
/* Адаптивные стили для широкого горизонтального блока новинок */
.recent-horiz-card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}
.recent-horiz-card:hover h4 a {
    color: #7360f2 !important;
}
.recent-horiz-card a[href*="product-cat"]:hover {
    color: #7360f2 !important;
    text-decoration: underline !important;
}
/* Интерактивный эффект для вертикальных плиток хитов продаж */
.ordered-grid-card:hover {
    border-color: #22c55e !important; /* Зеленый контур подчеркивает, что товар часто покупают */
    transform: translateY(-3px) !important; /* Карточка слегка приподнимается */
    box-shadow: 0 10px 20px rgba(34, 197, 94, 0.06) !important;
}
.ordered-grid-card:hover h4 a {
    color: #22c55e !important;
}

/* ==========================================================================
   Checkout UngShop Style Guide (Современная форма оформления)
   ========================================================================== */

.checkout-ungshop-section {
    padding: 30px 0 60px 0;
    background-color: #f8fafc;
}

/* Карточка формы */
.checkout-ungshop-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
    border: 1px solid #e2e8f0;
}

/* Стили заголовков */
.checkout-ungshop-card h2 {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.checkout-ungshop-card .user-name-highlight {
    color: #db2777;
    background: #fdf2f8;
    padding: 2px 10px;
    border-radius: 8px;
    border: 1px solid #fbcfe8;
}

.checkout-ungshop-card p.subtitle {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 25px;
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 15px;
}

/* Блок призыва к авторизации */
.checkout-ungshop-auth-alert {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    color: #1e40af;
    width: 100%;
    margin-top: 10px;
}

.checkout-ungshop-auth-alert a {
    color: #2563eb;
    text-decoration: underline;
    font-weight: 700;
    transition: color 0.2s ease;
}

.checkout-ungshop-auth-alert a:hover {
    color: #1d4ed8;
}

/* ==========================================================================
   UngShop Form Inputs Style Guide (Контрастные и удобные инпуты)
   ========================================================================== */

/* Контейнер группы полей */
.checkout-ungshop-card .form-group {
    margin-bottom: 22px;
    position: relative;
}

/* Стилизация этикеток (Labels) */
.checkout-ungshop-card .form-group label {
    font-size: 14px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 8px;
    display: inline-block;
}

.checkout-ungshop-card .form-group label span {
    color: #db2777;
    margin-left: 4px;
    font-weight: 900;
}

/* Ошибки валидации Laravel */
.checkout-ungshop-card .text-danger {
    font-size: 12px;
    font-weight: 700;
    color: #e11d48 !important;
    display: block;
    margin-top: -4px;
    margin-bottom: 6px;
    background: #fff1f2;
    padding: 4px 10px;
    border-radius: 6px;
    border-left: 3px solid #e11d48;
}

/* Базовый инпут */
.checkout-ungshop-card .form-group input[type="text"],
.checkout-ungshop-card .form-group input[type="email"] {
    width: 100%;
    height: 48px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    transition: all 0.2s ease-in-out;
}

/* Состояния фокуса */
.checkout-ungshop-card .form-group input:focus {
    background: #ffffff;
    border-color: #7360f2;
    box-shadow: 0 0 0 4px rgba(115, 96, 242, 0.15);
    outline: none;
}

/* Стилизация составного поля телефона */
.checkout-ungshop-card .phone-container {
    display: flex;
    align-items: center;
    position: relative;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    transition: all 0.2s ease-in-out;
}

.checkout-ungshop-card .phone-container:focus-within {
    background: #ffffff;
    border-color: #7360f2;
    box-shadow: 0 0 0 4px rgba(115, 96, 242, 0.15);
}

.checkout-ungshop-card .phone-prefix {
    background: #e2e8f0;
    color: #475569;
    font-weight: 800;
    font-size: 14px;
    height: 46px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
    border-right: 1px solid #cbd5e1;
    user-select: none;
}

.checkout-ungshop-card .phone-container input.profile-phone {
    border: none !important;
    background: transparent !important;
    height: 46px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    box-shadow: none !important;
    padding-left: 12px !important;
}

/* Статус валидации JS (иконка или текст справа) */
#validation_status {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
}
/* Динамические ошибки от jQuery Validation */
.checkout-ungshop-card span.text-danger-js {
    font-size: 12px;
    font-weight: 700;
    color: #e11d48 !important;
    display: block;
    margin-bottom: 6px;
    background: #fff1f2;
    padding: 4px 10px;
    border-radius: 6px;
    border-left: 3px solid #e11d48;
    width: 100%;
    box-sizing: border-box;
}
/* ==========================================================================
   UngShop Delivery Methods Style Guide
   ========================================================================== */

/* Обнуляем старый список */
.breadcrumbs-ungshop .dropdown {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Контейнер карточки доставки */
.ungshop-delivery-card {
    background: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s ease-in-out !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;
}

/* Состояние, когда этот способ доставки выбран */
.ungshop-delivery-card.is-active {
    border-color: #7360f2 !important;
    background: #f8fafc !important;
    box-shadow: 0 4px 12px rgba(115, 96, 242, 0.08) !important;
}

/* Скрываем дефолтный радиобаттон визуально, оставляя его доступным */
.ungshop-radio-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
}

.ungshop-radio-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    z-index: 3;
}

/* Кастомный красивый кружок радиобаттона */
.ungshop-custom-radio {
    width: 22px;
    height: 22px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    position: relative;
    transition: all 0.2s ease;
    z-index: 1;
    background: #fff;
}

.ungshop-radio-input:checked + .ungshop-custom-radio {
    border-color: #7360f2;
    background: #7360f2;
}

.ungshop-radio-input:checked + .ungshop-custom-radio::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Текстовый блок */
.ungshop-delivery-info {
    flex-grow: 1;
}

.ungshop-delivery-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 4px 0 !important;
}

.ungshop-delivery-desc {
    font-size: 13px !important;
    color: #64748b !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.4 !important;
}

.ungshop-delivery-price {
    font-size: 13px !important;
    color: #334155 !important;
    margin: 0 !important;
}

.ungshop-delivery-price strong {
    color: #22c55e !important;
    font-weight: 800 !important;
}

/* Логотип перевозчика */
.ungshop-delivery-logo {
    min-width: 60px;
    max-width: 70px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ungshop-delivery-logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Плашка активных акций */
.ungshop-delivery-action {
    position: absolute;
    top: -8px;
    right: 15px;
    z-index: 5;
}

.ungshop-delivery-action .badge-promo {
    background: #fef08a !important;
    color: #e11d48 !important;
    border: 1px solid #fde047 !important;
    padding: 3px 8px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 6px rgba(234, 179, 8, 0.2) !important;
}
/* ==========================================================================
   UngShop Contrast Color Style Guide (Коричневые маркеры и цветные инпуты)
   ========================================================================== */

/* Глобальные настройки группы полей */
.checkout-ungshop-card .form-group {
    margin-bottom: 24px;
    position: relative;
}

/* 🏷️ БАЗОВЫЙ СТИЛЬ ЛЕЙБЛОВ: Теперь строго благородный коричневый */
.checkout-ungshop-card .form-group label.ung-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 900 !important; /* Максимальная жирность */
    text-transform: uppercase !important;
    letter-spacing: 0.7px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;

    /* Базовый контрастный коричневый стиль */
    background: #fdf6f0 !important; /* Светло-кофейный фон */
    color: #5c4033 !important;      /* Глубокий коричневый текст */
    border: 1px solid #d7ccc8 !important;
    border-left: 4px solid #8d6e63 !important; /* Коричневый маркер */
    box-shadow: 0 2px 5px rgba(92, 64, 51, 0.05) !important;
}

.checkout-ungshop-card .form-group label.ung-label span {
    color: #e11d48 !important; /* Яркая звездочка */
    font-weight: 900 !important;
}

/* 🎨 ЦВЕТНЫЕ АКЦЕНТЫ ДЛЯ ТЕКСТА И ИНПУТОВ (Убираем серый) */

/* 👤 1. Личные данные (Имя, Фамилия) — Насыщенный синий текст */
.checkout-ungshop-card .inp-user {
    color: #1e3a8a !important;
    font-weight: 700 !important;
    border: 1px solid #bfdbfe !important;
    background: #f8fafc !important;
}
.checkout-ungshop-card .inp-user:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2) !important;
    background: #ffffff !important;
}

/* 📞 2. Контакты (Телефон) — Глубокий изумрудно-зеленый текст */
.checkout-ungshop-card .phone-container {
    border: 1px solid #bbf7d0 !important;
    background: #f8fafc !important;
    border-radius: 10px;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}
.checkout-ungshop-card .phone-container:focus-within {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2) !important;
    background: #ffffff !important;
}
.checkout-ungshop-card .phone-prefix {
    background: #dcfce7 !important; /* Зеленая подложка кода страны */
    color: #115e59 !important;
    font-weight: 900;
    font-size: 15px;
    height: 46px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
    border-right: 1px solid #bbf7d0;
    user-select: none;
}
.checkout-ungshop-card .inp-phone {
    color: #065f46 !important;
    font-weight: 700 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ✉️ 3. Почта (Email) — Благородный темно-фиолетовый текст */
.checkout-ungshop-card .inp-email {
    color: #581c87 !important;
    font-weight: 700 !important;
    border: 1px solid #e9d5ff !important;
    background: #f8fafc !important;
}
.checkout-ungshop-card .inp-email:focus {
    border-color: #a855f7 !important;
    box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.2) !important;
    background: #ffffff !important;
}

/* Общие стили высоты и скругления для всех инпутов */
.checkout-ungshop-card .form-group input[type="text"],
.checkout-ungshop-card .form-group input[type="email"] {
    width: 100%;
    height: 48px;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 16px; /* Чуть крупнее для читаемости */
    transition: all 0.2s ease-in-out;
    outline: none;
}


/* 🚚 4. Логистика (Способ доставки, Город, Адрес) — Малиново-розовый маркер */
.checkout-ungshop-card .form-group label.lbl-delivery {
    background: #fdf2f8 !important;
    color: #b91c1c !important;
    border-left: 3px solid #db2777 !important;
}
/* ==========================================================================
   UngShop Contrast Placeholders Style Guide (Цветные подсказки)
   ========================================================================== */

/* 👤 1. Подсказки для личных данных (Имя, Фамилия) — Мягкий синий */
.checkout-ungshop-card .inp-user::placeholder {
    color: #93c5fd !important;
    opacity: 1 !important; /* Гарантирует правильный цвет в Firefox */
    font-weight: 500;
}

/* 📞 2. Подсказка для телефона — Нежный мятно-зеленый */
.checkout-ungshop-card .inp-phone::placeholder {
    color: #6ee7b7 !important;
    opacity: 1 !important;
    font-weight: 500;
}

/* ✉️ 3. Подсказка для Email — Светло-сиреневый / фиолетовый */
.checkout-ungshop-card .inp-email::placeholder {
    color: #d8b4fe !important;
    opacity: 1 !important;
    font-weight: 500;
}

/* Дополнительно: Стилизация подсказок для старых браузеров (на всякий случай) */
.checkout-ungshop-card .inp-user:-ms-input-placeholder  { color: #93c5fd !important; }
.checkout-ungshop-card .inp-phone:-ms-input-placeholder { color: #6ee7b7 !important; }
.checkout-ungshop-card .inp-email:-ms-input-placeholder { color: #d8b4fe !important; }
/* ==========================================================================
   UngShop Active Delivery Card Style Guide (ИСПРАВЛЕНО)
   ========================================================================== */

/* Базовое состояние карточки (когда НЕ выбрана) */
.ungshop-delivery-card {
    background: #ffffff !important;
    border: 2px solid #e2e8f0 !important; /* Светлая рамка */
    border-radius: 12px !important;
    padding: 16px 20px !important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.25s ease-in-out !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;
    list-style: none !important;
}

/* 🌟 АКТИВНОЕ СОСТОЯНИЕ КАРТОЧКИ: Рамка и фон меняются на коричневые тона */
.ungshop-delivery-card.is-active {
    border-color: #5c4033 !important; /* Глубокий шоколадно-коричневый ободок */
    background: #fdf6f0 !important;   /* Мягкий кофейно-бежевый фон карточки */
    box-shadow: 0 6px 20px rgba(92, 64, 51, 0.08) !important; /* Легкая тень */
}

/* Базовое состояние кружка (когда НЕ выбран) */
.ungshop-custom-radio {
    width: 22px !important;
    height: 22px !important;
    border: 2px solid #cbd5e1 !important; /* Спокойный ободок */
    border-radius: 50% !important;
    position: relative !important;
    transition: all 0.2s ease-in-out !important;
    z-index: 1 !important;
    background: #ffffff !important;
}

/* 🌟 АКТИВНОЕ СОСТОЯНИЕ РАДИОКНОПКИ: Окрашивается в цвет карточки */
.ungshop-delivery-card.is-active .ungshop-custom-radio {
    border-color: #5c4033 !important; /* Коричневый ободок радиокнопки */
    background: #5c4033 !important;   /* Коричневый фон радиокнопки */
}

/* Белая точка по центру внутри active кружка (Синтаксис полностью исправлен) */
.ungshop-delivery-card.is-active .ungshop-custom-radio::after {
    content: '' !important;
    position: absolute !important;
    width: 8px !important;
    height: 8px !important;
    background: #ffffff !important; /* Белый маркер по центру */
    border-radius: 50% !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2 !important;
}

/* Эффект легкого наведения (Hover) на неактивную карточку */
.ungshop-delivery-card:not(.is-active):hover {
    border-color: #bcaaa4 !important; /* Приглушенный коричневый при наведении */
    background: #faf8f6 !important;
}

/* Убираем маркеры списков для тега li внутри выпадающего меню доставки */
.form-group ul.dropdown {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.form-group ul.dropdown li {
    list-style: none !important;
}

/* ==========================================================================
   UngShop Search Cities & Departments Style Guide
   ========================================================================== */

/* 🔍 Поиск городов — Теплый коньячный оттенок */
.checkout-ungshop-card .inp-search-city {
    color: #7c2d12 !important; /* Насыщенный терракотово-коричневый */
    font-weight: 800 !important;
    border: 1px solid #fed7aa !important;
    background: #fdf6f0 !important;
}
.checkout-ungshop-card .inp-search-city:focus {
    border-color: #ea580c !important;
    box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.2) !important;
    background: #ffffff !important;
}
.checkout-ungshop-card .inp-search-city::placeholder {
    color: #fdba74 !important;
    font-weight: 500;
}

/* 🚚 Полный адрес — Фирменный шоколадный */
.checkout-ungshop-card .inp-full-address {
    color: #5c4033 !important;
    font-weight: 800 !important;
    border: 1px solid #d7ccc8 !important;
    /*background: #fdf6f0 !important;*/
    background: #ecff0e !important;
    font-size: 15px !important;
}
.checkout-ungshop-card .inp-full-address:focus {
    border-color: #5c4033 !important;
    box-shadow: 0 0 0 4px rgba(92, 64, 51, 0.2) !important;
    background: #ffffff !important;
}

/* 📝 Комментарий к заказу — Мягкий графитовый */
.checkout-ungshop-card .txt-comment {
    width: 100%;
    border-radius: 10px;
    padding: 12px 16px;
    outline: none;
    transition: all 0.2s ease-in-out;
    color: #1e293b !important;
    font-weight: 700 !important;
    border: 1px solid #cbd5e1 !important;
    background: #f8fafc !important;
}
.checkout-ungshop-card .txt-comment:focus {
    border-color: #64748b !important;
    box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.2) !important;
    background: #ffffff !important;
}
.checkout-ungshop-card .txt-comment::placeholder {
    color: #94a3b8 !important;
    font-weight: 500;
}

/* ==========================================================================
   NiceSelect с живым поиском отделений
   ========================================================================== */
.checkout-ungshop-card .nice-select {
    width: 100% !important;
    height: 48px !important;
    line-height: 44px !important;
    background: #fdf6f0 !important;
    border: 2px solid #d7ccc8 !important;
    border-radius: 10px !important;
    float: none !important;
    padding-left: 16px !important;
}
.checkout-ungshop-card .nice-select:focus,
.checkout-ungshop-card .nice-select.open {
    border-color: #5c4033 !important;
    box-shadow: 0 0 0 4px rgba(92, 64, 51, 0.15) !important;
}
.checkout-ungshop-card .nice-select .current {
    font-weight: 800 !important;
    color: #5c4033 !important;
    font-size: 15px !important;
}
.checkout-ungshop-card .nice-select .list {
    width: 100% !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    border-radius: 10px !important;
    border: 2px solid #5c4033 !important;
    box-shadow: 0 8px 24px rgba(92, 64, 51, 0.15) !important;
    padding-top: 50px !important; /* Место под инпут фильтрации */
}

/* Строка фильтрации внутри выпадающего списка */
.nice-select-search-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 6px 10px;
    background: #fdf6f0;
    border-bottom: 1px solid #d7ccc8;
    z-index: 9;
    box-sizing: border-box;
}
.nice-select-search-input {
    width: 100% !important;
    height: 36px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #5c4033 !important;
    outline: none !important;
}
/* ==========================================================================
   🟧 ЗОНА 1: Поиск городов и отделений — Коньячно-оранжевая палитра
   ========================================================================== */

.location-search-group,
.department-search-group {
    position: relative;
    margin-bottom: 24px;
}

/* Оранжевые лейблы для групп поиска городов и отделений */
.checkout-ungshop-card .location-search-group label.ung-label,
.checkout-ungshop-card .department-search-group label.ung-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.7px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    background: #fff7ed !important; /* Очень мягкий оранжевый */
    color: #9a3412 !important;      /* Насыщенный коньячный текст */
    border: 1px solid #ffedd5 !important;
    border-left: 4px solid #ea580c !important; /* Оранжевый маркер */
    box-shadow: 0 2px 5px rgba(154, 52, 18, 0.05) !important;
}

.checkout-ungshop-card label.ung-label span {
    color: #e11d48 !important;
    font-weight: 900 !important;
}

/* Инпуты поиска городов и отделений: Коньячно-терракотовый стиль */
.checkout-ungshop-card .inp-search-city,
.checkout-ungshop-card .inp-search-dept {
    width: 100%;
    height: 48px;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 16px;
    color: #7c2d12 !important; /* Терракотовый текст ввода */
    font-weight: 800 !important;
    border: 1px solid #fed7aa !important;
    background: #fff7ed !important;
    outline: none;
    transition: all 0.2s ease-in-out;
}

.checkout-ungshop-card .inp-search-city:focus,
.checkout-ungshop-card .inp-search-dept:focus:not(:disabled) {
    border-color: #ea580c !important;
    box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.2) !important;
    background: #ffffff !important;
}

/* Заблокированное состояние инпута отделений (пока не выбран город) */
.checkout-ungshop-card .inp-search-dept:disabled {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
}

.checkout-ungshop-card .inp-search-city::placeholder,
.checkout-ungshop-card .inp-search-dept::placeholder {
    color: #fdba74 !important; /* Нежный оранжевый плейсхолдер */
    font-weight: 500;
}

/* ==========================================================================
   🟫 ЗОНА 2: Проверка полного адреса — Фирменная кофейно-коричневая палитра
   ========================================================================== */
.checkout-ungshop-card .inp-full-address-wrapper label.ung-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.7px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    background: #fdf6f0 !important; /* Светло-кофейный фон */
    color: #5c4033 !important;      /* Глубокий шоколадный текст */
    border: 1px solid #d7ccc8 !important;
    border-left: 4px solid #8d6e63 !important; /* Коричневый маркер */
    box-shadow: 0 2px 5px rgba(92, 64, 51, 0.05) !important;
}

.checkout-ungshop-card .inp-full-address {
    width: 100%;
    height: 48px;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 16px !important;
    color: #5c4033 !important; /* Шоколадный текст ввода */
    font-weight: 800 !important;
    border: 1px solid #d7ccc8 !important;
    background: #9eff2a !important;
    outline: none;
    transition: all 0.2s ease-in-out;
}

.checkout-ungshop-card .inp-full-address:focus {
    border-color: #5c4033 !important;
    box-shadow: 0 0 0 4px rgba(92, 64, 51, 0.2) !important;
    background: #ffffff !important;
}

.checkout-ungshop-card .inp-full-address::placeholder {
    color: #bcaaa4 !important; /* Спокойный кофейный плейсхолдер */
    font-weight: 500;
}

/* ==========================================================================
   🟦 ЗОНА 3: Комментарий к заказу — Строгая стальная / чернильно-синяя палитра
   ========================================================================== */
.checkout-ungshop-card .txt-comment-wrapper label.ung-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.7px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    background: #f0fdfa !important; /* Светлый ментолово-стальной фон */
    color: #042f2e !important;      /* Глубокий чернильный текст */
    border: 1px solid #ccfbf1 !important;
    border-left: 4px solid #0d9488 !important; /* Бирюзово-стальной маркер */
    box-shadow: 0 2px 5px rgba(13, 148, 136, 0.05) !important;
}

.checkout-ungshop-card .txt-comment {
    width: 100%;
    border-radius: 10px;
    padding: 12px 16px;
    color: #0f172a !important; /* Графитовый текст ввода */
    font-weight: 700 !important;
    border: 1px solid #cbd5e1 !important;
    background: #f8fafc !important;
    outline: none;
    transition: all 0.2s ease-in-out;
}

.checkout-ungshop-card .txt-comment:focus {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.2) !important;
    background: #ffffff !important;
}

.checkout-ungshop-card .txt-comment::placeholder {
    color: #94a3b8 !important; /* Мягкий серый плейсхолдер */
    font-weight: 500;
}

/* ==========================================================================
   🔥 УЛУЧШЕННЫЙ ВЫПАДАЮЩИЙ СПИСОК РЕЗУЛЬТАТОВ (Города и Отделения)
   ========================================================================== */
.ungshop-autocomplete-list {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    background: #fdfaf7 !important; /* Контрастный легкий кофейно-кремовый фон */
    border: 2px solid #5c4033 !important; /* Наш шоколадный ободок */
    border-radius: 12px !important;
    padding: 6px 0 !important;
    margin: 6px 0 0 0 !important;
    list-style: none !important;
    box-shadow: 0 10px 25px rgba(92, 64, 51, 0.15) !important;
    z-index: 9999 !important;
    display: none;
}

/* Настройка полосы прокрутки (скроллбара) в шоколадном стиле */
.ungshop-autocomplete-list::-webkit-scrollbar { width: 8px; }
.ungshop-autocomplete-list::-webkit-scrollbar-track { background: #fdf6f0; border-radius: 10px; }
.ungshop-autocomplete-list::-webkit-scrollbar-thumb { background: #bcaaa4; border-radius: 10px; }
.ungshop-autocomplete-list::-webkit-scrollbar-thumb:hover { background: #8d6e63; }

/* Каждая кликабельная строка списка результатов */
.ungshop-autocomplete-list li.dept-item,
.ungshop-autocomplete-list li.city-item {
    padding: 14px 18px !important;
    border-bottom: 1px solid #f3ebe4 !important; /* Мягкая кофейная линия-разделитель */
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
    background: transparent !important;
}

.ungshop-autocomplete-list li:last-child {
    border-bottom: none !important;
}

/* Эффект наведения мышки на строку списка результатов */
.ungshop-autocomplete-list li.dept-item:hover,
.ungshop-autocomplete-list li.city-item:hover {
    background: #f5e9df !important; /* Более сочный кофейный оттенок */
    padding-left: 22px !important;   /* Плавный сдвиг вправо при наведении */
}

/* Крупный текст названия ГОРОДА */
.ungshop-autocomplete-list .city-title {
    font-weight: 900 !important;
    font-size: 17px !important;
    color: #5c4033 !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: 0.3px;
}

/* Крупный текст адреса ОТДЕЛЕНИЯ */
.ungshop-autocomplete-list .dept-title {
    font-weight: 800 !important;
    font-size: 16px !important;
    color: #2e1c14 !important;   /* Глубокий кофейный цвет для легкого чтения */
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Если ничего не найдено */
.ungshop-autocomplete-list .empty-results {
    padding: 18px !important;
    color: #8d6e63 !important;
    font-size: 15px !important;
    text-align: center !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   UngShop Layout & Sidebar Component Styles
   ========================================================================== */
/* Поддержка современных флекс-отступов (gap) для старых браузеров */
.gap-4 {
    gap: 1.5rem !important;
}

/* Специфические заголовки блоков в сайдбаре */
.checkout-ungshop-card .sidebar-block-title {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #5c4033 !important; /* Наш шоколадный */
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Липкий сайдбар при скролле на ПК */
@media (min-width: 992px) {
    .checkout-sidebar-sticky {
        position: -webkit-sticky !important;
        position: sticky !important;
    }
}

/* ==========================================================================
   Компонент: Пустая корзина (Убираем синие ссылки и гигантские шрифты)
   ========================================================================== */
.empty-cart-container {
    background: #ffffff;
    border-radius: 16px;
    padding: 50px 30px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
    border: 1px solid #e2e8f0;
    max-width: 600px;
    margin: 40px auto;
}

.empty-cart-icon {
    font-size: 64px;
    color: #bcaaa4; /* Мягкий кофейный */
    margin-bottom: 16px;
}

.empty-cart-container .title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #5c4033 !important;
    margin-bottom: 8px !important;
}

.empty-cart-container .subtitle {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 24px;
}

/* Кнопка продолжить покупки в стиле UngShop */
.btn-ungshop-continue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #5c4033 !important;
    color: #ffffff !important;
    font-weight: 800;
    font-size: 16px;
    padding: 12px 30px;
    border-radius: 10px;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 12px rgba(92, 64, 51, 0.15);
}

.btn-ungshop-continue:hover {
    background: #8d6e63 !important;
    transform: translateY(-1px);
}
/* ==========================================================================
   UngShop Order Summary Widget (Контрастный чек корзины)
   ========================================================================= */

.order-summary-card {
    background: #ffffff !important;
    border: 2px solid #d7ccc8 !important; /* Наш кофейный ободок */
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 4px 15px rgba(92, 64, 51, 0.05) !important;
}

/* Сетка параметров заказа */
.order-summary-card .summary-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.order-summary-card .summary-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 12px !important;
    border-bottom: 1px dashed #e2e8f0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #475569 !important;
}

/* Количество товаров */
.order-summary-card .summary-count {
    color: #5c4033 !important; /* Шоколадный */
    background: #fdf6f0 !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
}

/* Финальная итоговая строка */
.order-summary-card .summary-item.total-row {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-top: 6px !important;
    font-size: 16px !important;
    color: #0f172a !important;
}

.order-summary-card .total-price-badge {
    font-size: 22px !important; /* Крупный акцент на цене */
    font-weight: 900 !important;
    color: #166534 !important; /* Глубокий зеленый цвет денег */
    background: #dcfce7 !important; /* Мягкая зеленая подложка */
    padding: 4px 12px !important;
    border-radius: 8px !important;
    border: 1px solid #bbf7d0 !important;
    display: inline-block !important;
}

/* Промо-плашка действующих акций */
.order-summary-card .summary-action-banner {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #fef08a !important; /* Мягкий золотой */
    border: 1px solid #fde047 !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    margin-bottom: 18px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.order-summary-card .summary-action-banner a {
    color: #b91c1c !important; /* Контрастный красный текст ссылки */
    text-decoration: underline !important;
}

/* ==========================================================================
   UngShop Payment Block Component Style Guide (Блок Оплаты Сайдбара)
   ========================================================================== */

/* Карточка блока оплаты */
.payment-method-card {
    background: #ffffff !important;
    border: 2px solid #cbd5e1 !important; /* Базовый плотный контур */
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.25s ease-in-out;
}

/* Состояние, если заказ уже оплачен (Специальная мягкая золотая подсветка) */
.payment-method-card.payment-is-payed {
    border-color: #eab308 !important;
    background: #fefcbf !important;
    box-shadow: 0 6px 20px rgba(234, 179, 8, 0.1) !important;
}

/* Блок предупреждения: Наложенного платежа нет! */
.payment-method-card .payment-warning-banner {
    background: #fff1f2 !important; /* Мягкий розово-красный фон внимания */
    border: 1px solid #fecdd3 !important;
    border-left: 4px solid #e11d48 !important; /* Яркий красный маркер */
    padding: 12px 14px !important;
    border-radius: 8px !important;
    margin-top: 14px !important;
    margin-bottom: 5px !important;
}

.payment-method-card .payment-warning-banner h6 {
    color: #9f1239 !important; /* Глубокий винный цвет текста */
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

.payment-method-card .payment-warning-banner strong {
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Текстовые статусы предзаполнения полей */
.payment-status-text {
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    margin: 4px 0 0 0 !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
}

/* Статус: Нужно заполнить ФИО/Телефон (Пастельно-оранжевый) */
.status-need-fill {
    background: #fff7ed !important;
    color: #c2410c !important;
    border: 1px solid #ffedd5 !important;
}

/* Статус: Успешно оплачено (Пастельно-зеленый) */
.status-payed-success {
    background: #f0fdf4 !important;
    color: #166534 !important;
    border: 1px solid #bbf7d0 !important;
}

/* Ошибки платежной системы (Сессии) */
.payment-method-card .alert {
    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-bottom: 14px !important;
    display: flex;
    align-items: center;
    gap: 8px;
}
.payment-method-card .alert-danger {
    background: #fff1f2 !important;
    border: 1px solid #fecdd3 !important;
    color: #e11d48 !important;
}
.payment-method-card .alert-success {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    color: #15803d !important;
}
/* ==========================================================================
   UngShop Payment Gateway Grid Style Guide (Интерактивные методы оплаты)
   ========================================================================== */

/* Контейнер-группа методов оплаты */
.ungshop-payment-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 15px !important;
}

/* Карточка конкретного метода оплаты (LiqPay, Реквизиты и т.д.) */
.ungshop-pay-card {
    background: #ffffff !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.2s ease-in-out !important;
    position: relative !important;
}

/* Активное состояние выбранной платежной системы */
.ungshop-pay-card.pay-selected {
    border-color: #5c4033 !important; /* Наш фирменный шоколадный */
    /*background: #fdf6f0 !important;   !* Мягкий кофейный фон *!*/
    background: #efe217 !important;
}

/* Обертка для радиокнопки и текста */
.ungshop-pay-label-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    cursor: pointer !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #334155 !important;
    flex-grow: 1;
}

.ungshop-pay-card.pay-selected .ungshop-pay-label-wrapper {
    /*color: #5c4033 !important;*/
    color: #12980e !important;
}

/* Кастомный ободок радио-кружка для оплаты */
.ungshop-pay-radio-input {
    width: 20px !important;
    height: 20px !important;
    accent-color: #5c4033 !important; /* Окрашивает стандартную точку в шоколадный */
    cursor: pointer !important;
    margin: 0 !important;
}

/* Разделительная линия "або" */
.ungshop-payment-divider {
    text-align: center !important;
    margin: 20px 0 !important;
    position: relative !important;
}
.ungshop-payment-divider::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: 100% !important;
    height: 1px !important;
    background: #e2e8f0 !important;
    z-index: 1 !important;
}
.ungshop-payment-divider span {
    background: #ffffff !important;
    padding: 4px 14px !important;
    color: #8d6e63 !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    position: relative !important;
    z-index: 2 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
}

/* Контейнер логотипов электроных кошельков (GPay, Apple Pay) */
.ungshop-wallet-logos {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    margin: 15px 0 !important;
}
.ungshop-wallet-logos img {
    height: 34px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Кнопка инициализации шлюза "Оплатити картою" */
.btn-ungshop-gate-pay {
    width: 100% !important;
    height: 48px !important;
    background: #22c55e !important; /* Яркий сочный зеленый */
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2) !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
}
.btn-ungshop-gate-pay:hover:not(:disabled) {
    background: #16a34a !important;
    transform: translateY(-1px) !important;
}
.btn-ungshop-gate-pay:disabled {
    background: #cbd5e1 !important;
    color: #64748b !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* Форма ручного ввода данных карты (если LiqPay открывается инлайново) */
.ungshop-credit-card-form {
    background: #f8fafc !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 16px !important;
    margin-top: 15px !important;
}
.ungshop-credit-card-form label {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
    display: block !important;
}
.ungshop-credit-card-form input {
    width: 100% !important;
    height: 38px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 0 10px !important;
    margin-bottom: 12px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}
.ungshop-credit-card-form input:last-child {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   UngShop SweetAlert Custom Design (Контрастное предупреждение об оплате)
   ========================================================================== */

/* Текст внутри окна предупреждения */
.swal-text {
    font-weight: 800 !important;
    background: #fff7ed !important; /* Наш пастельно-оранжевый коньячный фон */
    font-size: 16px !important;
    color: #7c2d12 !important;      /* Терракотово-коричневый текст */
    line-height: 1.5 !important;
    padding: 14px 20px !important;
    border-radius: 10px !important;
    border-left: 4px solid #ea580c !important; /* Яркий маркер внимания */
    text-align: center !important;
    display: block !important;
}

/* Фирменная кнопка закрытия предупреждения */
.swal-button.btn-ungshop-swal-confirm {
    background-color: #5c4033 !important; /* Наш благородный шоколадный */
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    box-shadow: 0 4px 12px rgba(92, 64, 51, 0.15) !important;
    transition: all 0.2s ease;
}

.swal-button.btn-ungshop-swal-confirm:hover {
    background-color: #8d6e63 !important;
}
/* ==========================================================================
   UngShop Order Confirmation & Popup Loader Style Guide (Блок Подтверждения)
   ========================================================================== */

/* Блок вывода серверных ошибок валидации Laravel */
.checkout-ungshop-card .validation-summary-box {
    background: #fff1f2 !important; /* Пастельно-красный */
    border: 1px solid #fecdd3 !important;
    border-left: 4px solid #e11d48 !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
    margin-bottom: 20px !important;
}
.checkout-ungshop-card .validation-summary-title {
    font-weight: 900 !important;
    color: #9f1239 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: block !important;
    margin-bottom: 8px !important;
}
.checkout-ungshop-card .validation-summary-list {
    list-style: disc !important;
    padding-left: 20px !important;
    margin: 0 !important;
    color: #b91c1c !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}

/* 🟥 ГЛАВНАЯ КНОПКА: Малиновая капсула подтверждения заказа */
.btn-ungshop-submit-order {
    width: 100% !important;
    height: 52px !important;
    background: #db2777 !important; /* Фирменный малиновый цвет */
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 15px rgba(219, 39, 119, 0.25) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.2s ease-in-out !important;
}
.btn-ungshop-submit-order:hover:not(:disabled) {
    background: #be185d !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(219, 39, 119, 0.35) !important;
}

/* Вспомогательная кнопка якоря "Оплатити зараз" */
.btn-ungshop-anchor-pay {
    width: 100% !important;
    height: 46px !important;
    background: #f1f5f9 !important;
    color: #6366f1 !important; /* Сине-фиолетовый акцент */
    border: 1px dashed #cbd5e1 !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
.btn-ungshop-anchor-pay:hover {
    background: #e0e7ff !important;
    color: #4f46e5 !important;
    border-color: #c7d2fe !important;
}

/* ==========================================================================
   ПОПАП-ЛОАДЕР: Фиксированный полноэкранный экран ожидания (Замена старого div)
   ========================================================================== */
.ungshop-fullscreen-loader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.75) !important; /* Темный полупрозрачный фон */
    backdrop-filter: blur(4px) !important; /* Легкое размытие заднего плана */
    z-index: 99999 !important; /* Поверх абсолютно всего */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ungshop-loader-card {
    background: #ffffff !important;
    border: 3px solid #5c4033 !important; /* Наш шоколадный ободок */
    border-radius: 16px !important;
    padding: 30px 40px !important;
    text-align: center !important;
    max-width: 420px !important;
    width: 90% !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
}

.ungshop-loader-card h2 {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #5c4033 !important;
    margin: 0 0 10px 0 !important;
    text-transform: uppercase !important;
}

.ungshop-loader-message {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    background: #fff7ed !important; /* Мягкая конячная подложка */
    border-left: 4px solid #ea580c !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    margin: 15px 0 0 0 !important;
    line-height: 1.5 !important;
}
/* ==========================================================================
   UngShop Inline Buttons Style Guide (Две кнопки в один ряд)
   ========================================================================== */

/* Флекс-сетка для кнопок в одну линию */
.ungshop-buttons-inline-container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
}

/* Распределяем ширину кнопок поровну (50% на 50%) */
.ungshop-buttons-inline-container .ungshop-btn-col {
    flex: 1 1 0% !important;
    min-width: 0 !important;
}

/* Высота вспомогательной кнопки приравнивается к главной малиновой кнопке */
.ungshop-buttons-inline-container .btn-ungshop-anchor-pay {
    height: 52px !important;
    width: 100% !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.08) !important;
}

/* АДАПТИВНОСТЬ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА (Экраны меньше 768px) */
@media (max-width: 767px) {
    .ungshop-buttons-inline-container {
        flex-direction: column !important; /* Кнопки встают вертикально друг под друга */
        gap: 12px !important;
    }

    .ungshop-buttons-inline-container .ungshop-btn-col {
        width: 100% !important; /* Каждая кнопка занимает всю ширину экрана смартфона */
        flex: none !important;
    }
}

/* Гарантированное скрытие лоадера при загрузке */
.ungshop-fullscreen-loader {
    display: none !important;
}

/* ==========================================================================
   UngShop Pure Auth Form Style Guide (Форма Входа)
   ========================================================================== */
.login-form-card {
    background: #ffffff !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 16px !important;
    padding: 30px !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05) !important;
}

.login-form-card h2 {
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #5c4033 !important; /* Наш шоколадный */
    text-transform: uppercase !important;
    margin-bottom: 24px !important;
    letter-spacing: 0.5px;
}

/* Стилизация инпутов авторизации (Ментолово-стальная палитра) */
.login-form-card .auth-input-group label.ung-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.7px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    background: #f0fdfa !important; /* Светлый ментоловый */
    color: #042f2e !important;      /* Глубокий чернильный */
    border: 1px solid #ccfbf1 !important;
    border-left: 4px solid #0d9488 !important; /* Стальной маркер */
}

.login-form-card .auth-input-group label.ung-label span {
    color: #e11d48 !important;
}

.login-form-card .inp-auth {
    width: 100% !important;
    height: 48px !important;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    font-size: 16px !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    border: 1px solid #cbd5e1 !important;
    background: #f8fafc !important;
    outline: none !important;
    transition: all 0.2s ease-in-out !important;
}

.login-form-card .inp-auth:focus {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.2) !important;
    background: #ffffff !important;
}

/* Главная малиновая кнопка входа */
.btn-ungshop-login-submit {
    width: 100% !important;
    height: 48px !important;
    background: #db2777 !important; /* Фирменный малиновый */
    color: #ffffff !important;
    border: none !important;
    border-radius: 30px !important; /* Капсула */
    font-weight: 900 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 12px rgba(219, 39, 119, 0.2) !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
}
.btn-ungshop-login-submit:hover {
    background: #be185d !important;
    transform: translateY(-1px) !important;
}

/* Секция Социального входа */
.social-login-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #475569 !important;
    text-align: center !important;
    margin-bottom: 15px !important;
}

.social-buttons-row {
    display: flex !important;
    gap: 12px !important;
    width: 100% !important;
}

.btn-soc-capsule {
    flex: 1 !important;
    height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 30px !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
    border: 1px solid #cbd5e1 !important;
}

/* Бренд-цвета для кнопок авторизации */
.btn-soc-capsule.ts-google {
    background: #ffffff !important;
    color: #1e293b !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}
.btn-soc-capsule.ts-google:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    transform: translateY(-1px) !important;
}

.btn-soc-capsule.ts-facebook {
    background: #1877f2 !important; /* Официальный цвет FB */
    color: #ffffff !important;
    border-color: #1877f2 !important;
    box-shadow: 0 2px 4px rgba(24, 119, 242, 0.15) !important;
}
.btn-soc-capsule.ts-facebook:hover {
    background: #166fe5 !important;
    transform: translateY(-1px) !important;
}
/* Группы инпутов авторизации */
.auth-input-group label.ung-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.7px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    background: #f0fdfa !important; /* Ментоловый */
    color: #042f2e !important;
    border: 1px solid #ccfbf1 !important;
    border-left: 4px solid #0d9488 !important; /* Стальной маркер */
}

.inp-auth {
    width: 100% !important;
    height: 48px !important;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    font-size: 16px !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    border: 1px solid #cbd5e1 !important;
    background: #f8fafc !important;
    outline: none !important;
    transition: all 0.2s ease-in-out !important;
}
.inp-auth:focus {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.2) !important;
    background: #ffffff !important;
}

/* Главная малиновая кнопка */
.btn-ungshop-login-submit {
    width: 100% !important;
    height: 48px !important;
    background: #db2777 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 30px !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 12px rgba(219, 39, 119, 0.2) !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
}
.btn-ungshop-login-submit:hover {
    background: #be185d !important;
    transform: translateY(-1px) !important;
}

/* Заголовок социальных сетей */
.social-login-title {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #5c4033 !important;
    text-align: center !important;
    margin-bottom: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px;
}

/* Флекс-контейнер социальных кнопок */
.social-buttons-row {
    display: flex !important;
    gap: 12px !important;
    width: 100% !important;
}

.btn-soc-capsule {
    flex: 1 !important;
    height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 30px !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
    border: 1px solid #cbd5e1 !important;
}

.btn-soc-capsule.ts-google {
    background: #ffffff !important;
    color: #1e293b !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}
.btn-soc-capsule.ts-google:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    transform: translateY(-1px) !important;
}

.btn-soc-capsule.ts-facebook {
    background: #1877f2 !important;
    color: #ffffff !important;
    border-color: #1877f2 !important;
    box-shadow: 0 2px 4px rgba(24, 119, 242, 0.15) !important;
}
.btn-soc-capsule.ts-facebook:hover {
    background: #166fe5 !important;
    transform: translateY(-1px) !important;
}

/* На мобильных экранах перестраиваем кнопки вертикально */
@media (max-width: 575px) {
    .social-buttons-row {
        flex-direction: column !important;
    }
}
/* ==========================================================================
   UngShop Register & Lost Password Footer Components
   ========================================================================== */

/* Общий разделяющий контейнер */
.auth-footer-actions-zone {
    border-top: 2px dashed #cbd5e1 !important;
    padding-top: 40px !important;
    margin-top: 40px !important;
}

/* Карточка нового пользователя */
.auth-footer-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    height: 100% !important; /* Выравнивает карточки по высоте */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.auth-footer-card h3,
.auth-footer-card h4 {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #5c4033 !important; /* Наш шоколадный */
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 16px !important;
}

/* Серая кнопка регистрации-капсулы */
.btn-ungshop-register-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 46px !important;
    background: #64748b !important; /* Стальной оттенок */
    color: #ffffff !important;
    border: none !important;
    border-radius: 30px !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 4px 10px rgba(100, 116, 139, 0.15) !important;
}
.btn-ungshop-register-link:hover {
    background: #475569 !important;
    transform: translateY(-1px) !important;
}

/* Оранжевая кнопка восстановления пароля */
.btn-ungshop-reset-submit {
    width: 100% !important;
    height: 46px !important;
    background: #ea580c !important; /* Коньячно-оранжевый */
    color: #ffffff !important;
    border: none !important;
    border-radius: 30px !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.2) !important;
}
.btn-ungshop-reset-submit:hover {
    background: #c2410c !important;
    transform: translateY(-1px) !important;
}
/* ==========================================================================
   UngShop Messengers Promo Cards Style Guide (Горизонтальные плитки)
   ========================================================================== */

.messengers-promo-zone {
    margin-top: 40px !important;
    padding-top: 30px !important;
    border-top: 1px dashed #cbd5e1 !important;
}

.messengers-promo-zone .section-title {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #5c4033 !important; /* Наш шоколадный */
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 24px !important;
}

/* Контейнер горизонтального ряда */
.messengers-flex-row {
    display: flex !important;
    gap: 24px !important;
    width: 100% !important;
}

/* Общий стиль для обеих плиток */
.viber-promo-card, .tg-promo-card {
    flex: 1 !important; /* Делает плитки абсолютно одинаковыми по ширине */
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: center !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.25s ease-in-out !important;
}

/* Специфические рамки для брендов */
.viber-promo-card { border: 2px solid #7360f2 !important; } /* Фирменный Viber */
.tg-promo-card { border: 2px solid #24a1de !important; }    /* Фирменный Telegram */

.viber-promo-card:hover { box-shadow: 0 8px 25px rgba(115, 96, 242, 0.15) !important; transform: translateY(-2px); }
.tg-promo-card:hover { box-shadow: 0 8px 25px rgba(36, 161, 222, 0.15) !important; transform: translateY(-2px); }

/* Лейблы описания */
.viber-label, .tg-label {
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
    margin-bottom: 18px !important;
    display: block !important;
}
.viber-label { color: #503bb1 !important; }
.tg-label { color: #1d729e !important; }

/* Адаптивные обертки QR кодов */
.viber-qr-wrapper, .tg-qr-wrapper {
    background: #f8fafc !important;
    padding: 16px !important;
    border-radius: 12px !important;
    margin-bottom: 18px !important;
    border: 1px solid #e2e8f0 !important;
    display: inline-block !important;
}

.viber-qr-render svg, .tg-qr-render svg {
    max-width: 180px !important; /* Оптимальный размер для сетки 50/50 */
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

.viber-qr-text, .tg-qr-text {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    margin: 8px 0 0 0 !important;
}

/* Адаптивные брендовые инлайн-кнопки */
.viber-btn-inline, .tg-btn-inline {
    width: 100% !important;
    height: 46px !important;
    border-radius: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    color: #ffffff !important;
    transition: all 0.2s ease !important;
}

.viber-btn-inline {
    background: #7360f2 !important;
    box-shadow: 0 4px 12px rgba(115, 96, 242, 0.2) !important;
}
.viber-btn-inline:hover { background: #5a48d4 !important; }

.tg-btn-inline {
    background: #24a1de !important;
    box-shadow: 0 4px 12px rgba(36, 161, 222, 0.2) !important;
}
.tg-btn-inline:hover { background: #1a87bd !important; }

/* МОБИЛЬНАЯ АДАПТАЦИЯ (Экраны меньше 768px) */
@media (max-width: 767px) {
    .messengers-flex-row {
        flex-direction: column !important; /* Плитки встают друг под друга */
        gap: 16px !important;
    }
}
/* ==========================================================================
   UngShop User Dashboard Breadcrumbs Style Guide (Особистий Кабінет)
   ========================================================================== */

/* Аватар пользователя внутри активной крошки-капсулы */
.breadcrumbs-ungshop .bc-ung-user-avatar {
    border-radius: 50% !important;
    border: 1px solid #ffffff !important;
    object-fit: cover !important;
    margin-right: 4px !important;
    vertical-align: middle !important;
}

/* Счетчик акционных подкатегорий в зеленой таблетке */
.breadcrumbs-ungshop .bc-ung-count-pill-green {
    background: #22c55e !important; /* Насыщенный сочный зеленый */
    color: #ffffff !important;
    font-weight: 900 !important;
    padding: 1px 7px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    margin-left: 4px !important;
    border: 1px solid #bbf7d0 !important;
    display: inline-block !important;
}
/* ==========================================================================
   UngShop Dashboard Top Stats Style Guide (Информер заказов пользователя)
   ========================================================================= */

/* Левый блок: Приветствие пользователя */
.dashboard-welcome-card {
    background: #ffffff !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03) !important;
}

.dashboard-welcome-card .user-avatar-large {
    border-radius: 50% !important;
    border: 3px solid #fdf6f0 !important;
    object-fit: cover !important;
    box-shadow: 0 2px 8px rgba(92, 64, 51, 0.1) !important;
}

.dashboard-welcome-card .welcome-text-group h3 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 4px 0 !important;
}

.dashboard-welcome-card .welcome-text-group p {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    margin: 0 !important;
}

/* Правый блок: Контрастная карточка статистики заказов */
.dashboard-stats-card {
    background: #ffffff !important;
    border: 2px solid #d7ccc8 !important; /* Наш фирменный кофейный ободок */
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 4px 15px rgba(92, 64, 51, 0.05) !important;
}

.dashboard-stats-card .stats-title {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #5c4033 !important; /* Шоколадный */
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Сетка параметров */
.dashboard-stats-card .stats-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.dashboard-stats-card .stats-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 12px !important;
    border-bottom: 1px dashed #e2e8f0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #475569 !important;
}

/* Счетчики количества */
.dashboard-stats-card .count-badge {
    color: #5c4033 !important;
    background: #fdf6f0 !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    border: 1px solid #f3ebe4 !important;
}

/* Финальная итоговая строка суммы */
.dashboard-stats-card .stats-item.total-row {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-top: 6px !important;
    font-size: 16px !important;
    color: #0f172a !important;
}

.dashboard-stats-card .total-price-badge {
    font-size: 20px !important; /* Крупный акцент на деньгах */
    font-weight: 900 !important;
    color: #166534 !important; /* Глубокий зеленый */
    background: #dcfce7 !important; /* Мягкая пастельно-зеленая подложка */
    padding: 4px 12px !important;
    border-radius: 8px !important;
    border: 1px solid #bbf7d0 !important;
    display: inline-block !important;
}

/* Мобильная адаптация */
@media (max-width: 575px) {
    .dashboard-welcome-card {
        flex-direction: column !important;
        text-align: center !important;
    }
}
/* ==========================================================================
   UngShop Fixed Dropdown Table Overflow Fix (Железный фикс вылета окна)
   ========================================================================== */

/* 🌟 ГЛАВНЫЙ ФИКС: Разрешаем таблице и её обертке выпускать элементы наружу */
.table-user-wrapper {
    background: #ffffff !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 10px !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.02) !important;
    margin-bottom: 50px !important;

    /* Отключаем обрезание краев! */
    overflow: visible !important;
}

.table-user-wrapper .table-responsive {
    /* Переводим в visible, чтобы выпадающий чек не прятался внутрь */
    overflow: visible !important;
}

/* Фиксируем ячейку как точку отсчета координат */
#order-dataTable td.action {
    position: relative !important;
    overflow: visible !important;
}


/* Показываем окно при наведении мышки на ячейку */
#order-dataTable td.action:hover .ungshop-order-items-dropdown {
    display: block !important;
}


/* Стилизация шапки таблицы */
#order-dataTable thead tr.main-hading {
    background: #5c4033 !important; /* Наш благородный шоколадный */
}

#order-dataTable thead th {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 14px 10px !important;
    border: none !important;
    vertical-align: middle !important;
}

/* Строки таблицы */
#order-dataTable tbody tr {
    transition: all 0.15s ease-in-out !important;
}

/* Эффект наведения — мягкий кофейный тон */
#order-dataTable tbody tr:hover {
    background-color: #fdf6f0 !important;
}

#order-dataTable tbody td {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    padding: 14px 10px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
}

/* Нумерация строк # */
#order-dataTable .order-row-index {
    color: #94a3b8 !important;
    font-weight: 600 !important;
}

/* Контрастный номер заказа */
#order-dataTable .order-row-number {
    font-weight: 800 !important;
    color: #1e293b !important;
    font-family: monospace !important;
    font-size: 15px !important;
}

/* Итоговая сумма в строке (Шоколадный акцент) */
#order-dataTable .order-row-price {
    font-weight: 800 !important;
    color: #5c4033 !important;
    background: #e6efcd;
}

/* Адаптивный горизонтальный скроллбар в шоколадном стиле */
.table-responsive::-webkit-scrollbar { height: 6px; }
.table-responsive::-webkit-scrollbar-track { background: #fdf6f0; border-radius: 10px; }
.table-responsive::-webkit-scrollbar-thumb { background: #bcaaa4; border-radius: 10px; }
.table-responsive::-webkit-scrollbar-thumb:hover { background: #8d6e63; }
/* ==========================================================================
   UngShop Dashboard Table Footer & Empty States Style Guide
   ========================================================================== */

/* Блок заглушки, если заказов еще нет */
#order-dataTable .empty-orders-box {
    padding: 40px 20px !important;
    background: #fff7ed !important; /* Наш пастельно-оранжевый коньячный фон */
    border-radius: 12px !important;
    border-left: 4px solid #ea580c !important; /* Яркий маркер внимания */
    margin: 20px 0 !important;
}

#order-dataTable .empty-orders-box h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #7c2d12 !important; /* Терракотово-коричневый текст */
    line-height: 1.6 !important;
}

#order-dataTable .empty-orders-box h3 span.user-highlight {
    background: #fed7aa !important; /* Подсветка имени */
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-weight: 900 !important;
}

/* Кнопка возврата в магазин (Малиновая капсула) */
.btn-ungshop-back-store {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 44px !important;
    padding: 0 24px !important;
    background: #db2777 !important; /* Фирменный малиновый */
    color: #ffffff !important;
    border: none !important;
    border-radius: 30px !important; /* Форма капсулы */
    font-weight: 800 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(219, 39, 119, 0.2) !important;
    transition: all 0.2s ease-in-out !important;
    margin-top: 24px !important;
}
.btn-ungshop-back-store:hover {
    background: #be185d !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* Центрирование и стилизация пагинации */
.ungshop-pagination-wrapper {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 24px !important;
}

/* Перебиваем стандартные цвета стрелок пагинации Bootstrap в кофейный цвет */
.ungshop-pagination-wrapper .page-item.active .page-link {
    background-color: #5c4033 !important;
    border-color: #5c4033 !important;
    color: #ffffff !important;
}
.ungshop-pagination-wrapper .page-link {
    color: #5c4033 !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    margin: 0 2px !important;
}
.ungshop-pagination-wrapper .page-link:hover {
    background-color: #fdf6f0 !important;
}
/* ==========================================================================
   UngShop Orders Table Rows & Status Badges Diverse Colors Guide
   ========================================================================== */

/* Дата и время заказа */
/* ==========================================================================
   UngShop High-Contrast Order Date Style Guide (Яскрава контрастна дата)
   ========================================================================== */

.order-datetime-box {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;

    /* 🌟 КОНТРАСТНЫЙ ФОН: Мягкий, пастельно-оранжевый коньячный оттенок */
    background: #fff7ed !important;

    /* Яркий терракотово-коричневый цвет шрифта */
    color: #c2410c !important;

    font-size: 13px !important;
    font-weight: 850 !important; /* Делаем шрифт более плотным */
    padding: 4px 10px !important;
    border-radius: 20px !important; /* Элегантная форма капсулы */

    /* Тонкий кофейный ободок и левый маркер внимания */
    border: 1px solid #fed7aa !important;
    border-left: 4px solid #ea580c !important;

    margin-top: 6px !important;
    box-shadow: 0 2px 4px rgba(234, 88, 12, 0.04) !important;
}

/* Иконка календаря внутри блока даты */
.order-datetime-box i {
    color: #ea580c !important; /* Выделяем иконку сочным оранжевым */
    font-size: 14px !important;
}

/* Блок данных получателя */
.order-recipient-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
.order-recipient-info .order-fio {
    font-weight: 800 !important;
    color: #1e293b !important;
    font-size: 14px !important;
}
.order-recipient-info .order-fio-phone {
    font-weight: 700 !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-family: monospace !important;
}

/* Универсальные капсулы статусов */
.order-dataTable-badge {
    display: inline-block !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
}
.badge-ung-new { background: #eff6ff !important; color: #1d4ed8 !important; border: 1px solid #bfdbfe !important; }      /* Синий */
.badge-ung-process { background: #fff7ed !important; color: #c2410c !important; border: 1px solid #fed7aa !important; }  /* Оранжевый */
.badge-ung-delivery { background: #faf5ff !important; color: #7e22ce !important; border: 1px solid #e9d5ff !important; } /* Фиолетовый */
.badge-ung-complete { background: #f0fdf4 !important; color: #166534 !important; border: 1px solid #bbf7d0 !important; } /* Зеленый */
.badge-ung-cancel { background: #fff1f2 !important; color: #b91c1c !important; border: 1px solid #fecdd3 !important; }   /* Красный */

/* Кнопки платежных действий */
.btn-order-pay-retry { color: #dc2626 !important; margin-left: 8px !important; font-size: 16px !important; transition: transform 0.2s; }
.btn-order-pay-retry:hover { transform: scale(1.1); }

.btn-order-receipt { color: #16a34a !important; margin-left: 8px !important; font-size: 16px !important; transition: transform 0.2s; }
.btn-order-receipt:hover { transform: scale(1.1); }

/* ==========================================================================
   UngShop User Orders Table & Dropdown Components — MASTER BLOCK (СТАБИЛЬНЫЙ)
   ========================================================================== */

/* 1. ОБЕРТКА КАРТОЧКИ ТАБЛИЦЫ (Изолирует блок и разрешает вылет элементов наружу) */
.table-user-wrapper {
    background: #ffffff !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 10px !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.02) !important;
    margin-bottom: 50px !important;
    overflow: visible !important; /* КРИТИЧНО: Разрешает окну всплывать ПОВЕРХ таблицы */
}

/* Фикс адаптивного контейнера Bootstrap */
.table-user-wrapper .table-responsive {
    overflow: visible !important; /* КРИТИЧНО: Убирает обрезание краев строк */
}

/* 2. СТИЛИЗАЦИЯ ТАБЛИЦЫ ЗАКАЗОВ */
#order-dataTable {
    margin-bottom: 0 !important;
    border: none !important;
}

/* Шапка таблицы (Шоколадный вельвет) */
#order-dataTable thead tr.main-hading {
    background: #5c4033 !important;
}

#order-dataTable thead th {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 14px 10px !important;
    border: none !important;
    vertical-align: middle !important;
}

/* Ячейки строк данных */
#order-dataTable tbody td {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    padding: 14px 10px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
}

/* Мягкая кофейная подсветка строки при наведении мышки */
#order-dataTable tbody tr {
    transition: all 0.15s ease-in-out !important;
}
#order-dataTable tbody tr:hover {
    background-color: #fdf6f0 !important;
}

#order-dataTable .order-row-index { color: #94a3b8 !important; font-weight: 600 !important; }
#order-dataTable .order-row-number { font-weight: 800 !important; color: #1e293b !important; font-family: monospace !important; }
#order-dataTable .order-row-price { font-weight: 800 !important; color: #5c4033 !important; }

/* 3. КНОПКА-СУМКА (Ячейка вызова состава) */
#order-dataTable td.action {
    position: relative !important; /* Точка отсчета для координат всплывающего окна */
    overflow: visible !important;
    text-align: center !important;
}

.ungshop-dash-bag-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background: #fdf6f0 !important;
    border: 1px solid #d7ccc8 !important;
    border-radius: 50% !important;
    color: #5c4033 !important;
    font-size: 16px !important;
    transition: all 0.2s ease !important;
}
.ungshop-dash-bag-btn:hover {
    background: #5c4033 !important;
    color: #ffffff !important;
    border-color: #5c4033 !important;
}

/* Малиновый бейдж количества товаров */
.ungshop-dash-bag-btn .bag-count-badge {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    background: #db2777 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    border: 1px solid #ffffff !important;
    line-height: 1 !important;
}

/* 4. 🌟 МОНОЛИТНОЕ ВСПЛЫВАЮЩЕЕ ОКНО СОСТАВА ЗАКАЗА */
.ungshop-order-items-dropdown {
    position: absolute !important;
    top: calc(100% + 5px) !important; /* Всплывает строго под кнопкой */
    right: 0 !important;
    width: 380px !important;
    max-height: 420px !important; /* Удобный внутренний скролл, если товаров много */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
    border: 2px solid #5c4033 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    box-shadow: 0 15px 35px rgba(92, 64, 51, 0.2) !important;
    z-index: 99999 !important; /* Гарантированный высший слой поверх инвойсов и дат */
    display: none;
    text-align: left !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Триггер отображения при наведении мышки на ячейку */
#order-dataTable td.action:hover .ungshop-order-items-dropdown {
    display: block !important;
}

/* Шапка выпадающего чека */
.ungshop-order-items-dropdown .dropdown-cart-header {
    border-bottom: 2px dashed #cbd5e1 !important;
    padding-bottom: 10px !important;
    margin-bottom: 12px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}
.ungshop-order-items-dropdown .dropdown-cart-header p {
    font-weight: 900 !important;
    color: #5c4033 !important;
    font-size: 14px !important;
    margin: 0 !important;
}

/* 5. ✨ СБРОС ВЫСОТЫ И ВЕРСТКА СПИСКА ТОВАРОВ (Выводит ВСЕ товары, а не один) */
.ungshop-order-items-dropdown ul.ungshop-drop-ul {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.ungshop-order-items-dropdown .ungshop-order-dropdown-item {
    display: flex !important;
    gap: 12px !important;
    height: auto !important; /* Динамическая высота строки */
    min-height: 70px !important;
    padding: 12px 0 !important;
    border-bottom: 1px dashed #e2e8f0 !important;
    position: relative !important;
}
.ungshop-order-items-dropdown .ungshop-order-dropdown-item:last-child {
    border-bottom: none !important;
}

/* Компактная миниатюра картинки товара */
.ungshop-order-items-dropdown .dash-img-thumb {
    width: 70px !important;
    height: 50px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
}

/* ==========================================================================
   UngShop Gold Stars Rating Style Guide (Золотисті зірочки рейтингу)
   ========================================================================== */

.ungshop-order-items-dropdown .star-rating-block {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;

    /* ✨ ИСПРАВЛЕНО: Теперь звёздочки горят благородным золотым цветом! */
    color: #f59e0b !important;

    font-size: 14px !important; /* Чуть увеличили для сочности */
    font-weight: 800 !important;
    margin-top: 4px !important;
}

/* Эффект при наведении мышки на конкретную звезду (делаем чуть ярче) */
.ungshop-order-items-dropdown .star-rating-block i:hover {
    color: #d97706 !important; /* Более насыщенный янтарный при наведении */
    transform: scale(1.2) !important;
}

/* Цвет цифр количества и средней оценки рядом со звездами оставляем шоколадным */
.ungshop-order-items-dropdown .star-rating-block .rate-counter {
    color: #94a3b8 !important; /* Серый для количества отзывов */
    font-size: 11px !important;
}
.ungshop-order-items-dropdown .star-rating-block .avg-rate-counter {
    color: #5c4033 !important; /* Шоколадный для средней оценки */
    font-size: 11px !important;
    margin-left: 2px !important;
}

/* Скроллбар выпадающего чека в стиле UngShop */
.ungshop-order-items-dropdown::-webkit-scrollbar { width: 5px; }
.ungshop-order-items-dropdown::-webkit-scrollbar-track { background: #fdf6f0; border-radius: 10px; }
.ungshop-order-items-dropdown::-webkit-scrollbar-thumb { background: #bcaaa4; border-radius: 10px; }
.ungshop-order-items-dropdown::-webkit-scrollbar-thumb:hover { background: #5c4033; }

/* ==========================================================================
   UngShop Dashboard PDF Invoice Column Style Guide (8 Колонка)
   ========================================================================== */

/* Центрирование содержимого в 8-й ячейке */
#order-dataTable td.pdf-action-cell {
    text-align: center !important;
    vertical-align: middle !important;
}

/* Красная интерактивная кнопка-капсула для PDF накладной */
.btn-ungshop-pdf-invoice {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    background: #fff1f2 !important; /* Нежно-красная пастельная подложка */
    border: 1px solid #fecdd3 !important;
    border-radius: 50% !important; /* Капсула/круг */
    color: #e11d48 !important;      /* Фирменный насыщенный малиново-красный */
    font-size: 18px !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 2px 6px rgba(225, 29, 72, 0.05) !important;
}

/* Эффект наведения мышки (Мягкое увеличение и контраст) */
.btn-ungshop-pdf-invoice:hover {
    background: #e11d48 !important;
    color: #ffffff !important;
    border-color: #e11d48 !important;
    transform: scale(1.08) !important;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.2) !important;
}

/* ==========================================================================
   UngShop Expandable Orders Table Row Components (Крупний план деталізації)
   ========================================================================== */

/* Стилизация интерактивной ячейки триггера */
#order-dataTable .clickable-trigger-cell {
    cursor: pointer !important;
    position: relative;
    transition: background 0.15s ease;
}
#order-dataTable .clickable-trigger-cell:hover {
    background: #fff7ed !important; /* Легкая подсветка коньячным цветом при наведении */
}

/* Иконка-стрелочка поворота */
.order-datetime-box .expand-indicator-arrow {
    margin-left: auto;
    display: inline-block;
    transition: transform 0.2s ease-in-out;
    color: #ea580c;
}

/* Класс-модификатор активной (раскрытой) строки для поворота стрелки на 180 градусов */
.order-main-row.is-expanded .expand-indicator-arrow {
    transform: rotate(180deg);
}

/* Главный контейнер развернутого инвойс-чека */
.ungshop-expanded-invoice-box {
    animation: fadeInRow 0.25s ease-out forwards;
}

@keyframes fadeInRow {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.expanded-block-title {
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #5c4033 !important; /* Наш шоколадный */
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 16px !important;
    border-bottom: 2px solid #d7ccc8 !important;
    padding-bottom: 6px !important;
}

/* Крупная карточка товара в деталях */
.expanded-products-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
.expanded-product-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02) !important;
}

.expanded-product-card .expanded-p-img {
    width: 80px !important;
    height: 60px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
}

.expanded-product-card .expanded-p-info {
    flex-grow: 1 !important;
}
.expanded-product-card .expanded-p-info h5 {
    font-size: 14px !important;
    font-weight: 800 !important;
    margin: 0 0 4px 0 !important;
}
.expanded-product-card .expanded-p-info h5 a {
    color: #1e293b !important;
    text-decoration: none !important;
}
.expanded-product-card .expanded-p-info h5 a:hover {
    color: #db2777 !important; /* Малиновый ховер на товар */
}

.expanded-p-meta {
    font-size: 12px !important;
    color: #64748b !important;
    margin: 0 !important;
}

.expanded-p-total {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #5c4033 !important;
}

/* Правый блок: Текстовый инвойс-чек параметров */
.expanded-info-check {
    background: #ffffff !important;
    border: 1px dashed #bcaaa4 !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
}

.info-check-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.info-check-list li {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-bottom: 1px dotted #e2e8f0 !important;
    padding-bottom: 8px !important;
}
/* ==========================================================================
   UngShop High-Contrast Expanded Labels (Контрастні лейбли деталізації)
   ========================================================================== */

/* Левые метки параметров (Шоколадный акцент) */
.info-check-list li .lbl {
    color: #5c4033 !important; /* Наш благородный шоколадный */
    font-weight: 900 !important; /* Делаем шрифт максимально плотным и читаемым */
    font-size: 13px !important;
    text-transform: uppercase !important; /* Переводим в аккуратный верхний регистр */
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Правые значения параметров (Глубокий графитовый) */
.info-check-list li .val {
    color: #1e293b !important; /* Насыщенный темный сланец */
    font-weight: 800 !important;
    font-size: 14px !important;
    text-align: right !important;
}

/* Особый стиль для меток адреса и комментария, которые стоят над блоками */
.info-check-list li.address-li-row .lbl,
.info-check-list li.comment-li-row .lbl {
    margin-bottom: 4px !important;
}


.info-check-list li.address-li-row,
.info-check-list li.comment-li-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
}
.info-check-list li .system-address-text {
    color: #1e293b !important;
    background: #f1f5f9 !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    text-align: left !important;
    font-size: 13px !important;
    display: block;
    width: 100%;
}
.info-check-list li .user-comment-text {
    color: #7c2d12 !important;
    background: #fff7ed !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    text-align: left !important;
    font-size: 13px !important;
    font-style: italic !important;
    display: block;
    width: 100%;
}

/* Статусы оплаты */
.info-check-list .pay-status { font-weight: 900 !important; font-size: 12px !important; padding: 3px 8px !important; border-radius: 6px !important; }
.info-check-list .pay-status.paid { background: #dcfce7 !important; color: #166534 !important; }
.info-check-list .pay-status.unpaid { background: #fff1f2 !important; color: #9f1239 !important; }

/* Итоговая сумма */
.info-check-list li.final-sum-row { border-bottom: none !important; padding-bottom: 0 !important; margin-top: 6px !important; align-items: center !important;}
.info-check-list .final-sum-badge { font-size: 18px !important; font-weight: 900 !important; color: #166534 !important; background: #dcfce7 !important; padding: 2px 10px !important; border-radius: 6px !important;}

/* ==========================================================================
   UngShop Main Row High-Contrast Payment Indicators (Індикатори оплати)
   ========================================================================== */

/* Общая базовая капсула индикатора оплаты */
.ungshop-table-pay-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    border-radius: 20px !important; /* Форма капсулы */
    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-top: 6px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03) !important;
}

/* СТАTУС: УСПЕШНО ОПЛАЧЕНО (Изумрудно-зеленый) */
.ungshop-table-pay-badge.pay-success {
    background: #f0fdf4 !important; /* Мягкая пастельная подложка */
    color: #166534 !important;      /* Насыщенный зеленый */
    border: 1px solid #bbf7d0 !important;
}
.ungshop-table-pay-badge.pay-success i {
    color: #16a34a !important;
    font-size: 14px !important;
}

/* СТАТУС: НЕ ОПЛАЧЕНО (Малиново-красный) */
.ungshop-table-pay-badge.pay-danger {
    background: #fff1f2 !important; /* Нежно-красная подложка */
    color: #9f1239 !important;      /* Бордово-малиновый */
    border: 1px solid #fecdd3 !important;
}

/* Интерактивная кнопка-карта для повторной оплаты внутри красного индикатора */
.ungshop-table-pay-badge .pay-retry-link {
    color: #e11d48 !important;
    margin-left: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: transform 0.2s ease-in-out !important;
}
.ungshop-table-pay-badge .pay-retry-link:hover {
    transform: scale(1.15) !important;
    color: #be185d !important;
}
/* ==========================================================================
   UngShop Interactive Payment Icon-Button Style Guide (5 Колонка)
   ========================================================================== */

/* Контейнер выравнивания цены и значка в ячейке */
#order-dataTable .payment-cell-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: center !important;
}

/* Базовый стиль интерактивной круглой кнопки-значка */
.btn-ungshop-interactive-pay {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important; /* Строгий круг */
    font-size: 16px !important;
    transition: all 0.2s ease-in-out !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

/* СОСТОЯНИЕ: УСПЕШНО ОПЛАЧЕНО (Изумрудно-зеленый значок квитанции) */
.btn-ungshop-interactive-pay.status-paid {
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border: 1px solid #bbf7d0 !important;
}
.btn-ungshop-interactive-pay.status-paid:hover {
    background: #16a34a !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25) !important;
}

/* СОСТОЯНИЕ: НЕ ОПЛАЧЕНО (Малиново-красный значок для быстрой карты) */
.btn-ungshop-interactive-pay.status-unpaid {
    background: #fff1f2 !important;
    color: #e11d48 !important;
    border: 1px solid #fecdd3 !important;
}
.btn-ungshop-interactive-pay.status-unpaid:hover {
    background: #e11d48 !important;
    color: #ffffff !important;
    border-color: #e11d48 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.25) !important;
}

/* ==========================================================================
   UngShop Brand Capsules Enhanced Mobile Style Guide
   ========================================================================== */

/* Обертка аватарки буквы внутри бренда */
.bc-ung-brand-item .bc-brand-avatar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    margin-right: 6px !important;
    line-height: 1 !important;
    text-align: center !important;
}

/* Название бренда */
.bc-ung-brand-item .bc-brand-name-text {
    font-weight: 700 !important;
}

/* Компактный баббл количества товаров справа от текста бренда */
.bc-ung-brand-item .bc-ung-count-bubble {
    background: #febe59 !important;
    color: #475569 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 1px 6px !important;
    border-radius: 10px !important;
    margin-left: 6px !important;
    border: 1px solid #cbd5e1 !important;
}

/* При наведении на бренд подсвечиваем и баббл счетчика */
.bc-ung-brand-item:hover .bc-ung-count-bubble {
    background: #db2777 !important; /* Малиновый акцент при ховере */
    color: #ffffff !important;
    border-color: #db2777 !important;
}

/* ==========================================================================
   НОВЫЙ БЛОК ДЛЯ КАРТОЧКИ ТОВАРA (PRODUCT-DETAIL)
   ========================================================================== */

/* Основная секция товара */
.shop.single.section {
    overflow-x: hidden;
}

/* Галерея изображений */
.product-gallery .main-image {
    transition: transform 0.2s ease-in-out;
}

.product-gallery .thumbnail-images .cursor-pointer {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.product-gallery .thumbnail-images .cursor-pointer:hover {
    border-color: #0d6efd !important;
    opacity: 0.9;
}

/* Элементы ценового блока */
.price-card .fw-black {
    font-size: 42px;
    line-height: 1;
    font-weight: 900;
    color: #15803d;
    background-color: #f0fdf4;
    letter-spacing: -1px;
    border: 1px solid #dcfce7;
}

.price-card s {
    color: #166534 !important;
    opacity: 0.5;
}

.price-card .badge {
    font-size: 14px;
    background-color: #16a34a !important;
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.15);
    letter-spacing: 0.5px;
}

/* Кнопки изменения количества */
.quantity-selector-block .btn-number[data-type="minus"] {
    background-color: #dc3545;
    color: #fff;
    border-radius: 8px 0 0 8px;
}
.quantity-selector-block .btn-number[data-type="minus"]:hover {
    background-color: #bb2d3b;
}

.quantity-selector-block .btn-number[data-type="plus"] {
    background-color: #198754;
    color: #fff;
    border-radius: 0 8px 8px 0;
}
.quantity-selector-block .btn-number[data-type="plus"]:hover {
    background-color: #157347;
}

.quantity-selector-block .input-number {
    border-color: #dee2e6;
    box-shadow: none !important;
}

/* Вкладки (Табы) */
.tab-content.product-tab-border {
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}

.table-specs {
    max-width: 600px;
    margin: 0 auto;
}

/* Панель комментариев */
.avatar-placeholder {
    width: 45px;
    height: 45px;
}

.comment-form-rating {
    max-width: 200px;
}

/* Адаптивные стили для мобильных устройств (До 768px) */
@media (max-width: 767.98px) {
    .product-main-info {
        margin-top: 1.5rem;
    }

    .product-gallery .main-image img {
        max-height: 350px;
        object-fit: contain;
    }

    .nav-tabs .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
} /* <- ИСПРАВЛЕНО: Сюда добавлена пропущенная закрывающая скобка медиа-запроса */

/* Стили для ссылок-бейджей */
.meta-link-btn {
    transition: all 0.2s ease-in-out;
}
.meta-link-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    opacity: 0.95;
}

/* Эффекты при наведении */
.bg-primary-subtle.meta-link-btn:hover {
    background-color: #0d6efd !important;
    color: #fff !important;
}
.bg-info-subtle.meta-link-btn:hover {
    background-color: #0dcaf0 !important;
    color: #000 !important;
}
.bg-dark-subtle.meta-link-btn:hover {
    background-color: #212529 !important;
    color: #fff !important;
}

/* Страна */
.country-badge {
    font-size: 11px;
    color: #2d3748;
    background-color: #fffaf0;
    border-color: #f6ad55;
    letter-spacing: 0.5px;
}

/* Кастомные внутренние отступы и промежутки */
.p-3-5 { padding: 1.25rem !important; }
.px-2-5 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.py-1-5 { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; }
.pt-2-5 { padding-top: 0.85rem !important; }
.gap-1-5 { gap: 0.4rem !important; }

/* ==========================================================================
   ПОЛНОСТЬЮ КАСТОМНЫЙ ПОСЛЕДОВАТЕЛЬНЫЙ БЛОК ХАРАКТЕРИСТИК (БЕЗ BADGE)
   ========================================================================== */
.meta-specifications-box-custom {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.meta-row-inline-item {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #f1f3f5 !important;
}

.meta-row-inline-item.no-border-custom {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* Стили заголовков (Левая последовательная часть) */
.meta-label-inline-custom {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #212529 !important;
    white-space: nowrap !important;
}

.meta-value-inline-custom {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* Цветные подложки для иконок слева */
.meta-icon-box-custom {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
}
.meta-icon-box-custom.icon-category { background-color: #e7f1ff !important; color: #0d6efd !important; }
.meta-icon-box-custom.icon-subcategory { background-color: #e0f7fa !important; color: #00acc1 !important; }
.meta-icon-box-custom.icon-brand { background-color: #f3e5f5 !important; color: #9c27b0 !important; }
.meta-icon-box-custom.icon-status-success { background-color: #e8f5e9 !important; color: #2e7d32 !important; }
.meta-icon-box-custom.icon-status-danger { background-color: #ffebee !important; color: #c62828 !important; }

/* Интерактивные кастомные кнопки-теги */
.custom-meta-btn {
    display: inline-block !important;
    padding: 6px 14px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    line-height: 1 !important;
    transition: all 0.2s ease-in-out !important;
}
.custom-meta-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Кастомные палитры кнопок */
.btn-category { background-color: #e7f1ff !important; color: #0d6efd !important; border: 1px solid #b6d4fe !important; }
.btn-category:hover { background-color: #0d6efd !important; color: #ffffff !important; }

.btn-subcategory { background-color: #e0f7fa !important; color: #00838f !important; border: 1px solid #b2ebf2 !important; }
.btn-subcategory:hover { background-color: #00838f !important; color: #ffffff !important; }

.btn-brand { background-color: #f3e5f5 !important; color: #9c27b0 !important; border: 1px solid #e1bee7 !important; }
.btn-brand:hover { background-color: #9c27b0 !important; color: #ffffff !important; }

/* Кастомные плашки наличия */
.custom-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    line-height: 1 !important;
}
.status-pill-active { background-color: #f0fdf4 !important; color: #166534 !important; border: 1px solid #bbf7d0 !important; }
.status-pill-out { background-color: #fef2f2 !important; color: #991b1b !important; border: 1px solid #fecaca !important; }

/* Вспомогательные элементы */
.custom-meta-country {
    display: inline-flex !important;
    align-items: center !important;
    background-color: #fff7ed !important;
    color: #c2410c !important;
    border: 1px solid #ffedd5 !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
.flag-emoji-inline { font-size: 14px !important; margin-right: 4px !important; line-height: 1 !important; }
.custom-text-muted { color: #6c757d !important; font-size: 13px !important; }

/* Базовый контейнер */
.product-tabs-wrapper {
    width: 100%;
    display: block;
}

/* Скролл вкладок на мобилках, если они не помещаются в экран */
.tabbed {
    display: flex;
    flex-direction: column;
}

/* Стили для лейблов-переключателей */
.rate-label {
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
    font-weight: bold;
    white-space: nowrap; /* Не дает тексту переноситься */
}

/* ==========================================================================
   СТИЛИ ДЛЯ ТАБ-ПАНЕЛИ НА РАДИО-КНОПКАХ (PRODUCT TABS)
   ========================================================================== */
/* ==========================================================================
   ИСПРАВЛЕННЫЕ СТИЛИ ДЛЯ ТАБ-ПАНЕЛИ (ГОРИЗОНТАЛЬНЫЙ РЯД НА ПК)
   ========================================================================== */
/* ==========================================================================
   МНОГОЦВЕТНЫЙ ЯРКИЙ ДИЗАЙН ТАБ-ПАНЕЛИ (ГОРИЗОНТАЛЬНЫЙ РЯД НА ПК)
   ========================================================================== */
.product-tabs-wrapper {
    width: 100%;
    margin-top: 2rem;
}

.col-main-tab {
    width: 100%;
}

.tabbed {
    position: relative;
    display: block;
}

/* Скрываем стандартные кружочки радио-кнопок */
.tabbed input[type="radio"] {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

/* Базовые параметры для всех кнопок-табов (Labels) */
.tabbed .rate-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 22px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border-radius: 8px 8px 0 0 !important;
    margin-right: 6px !important;
    border: 1px solid #dee2e6 !important;
    border-bottom: none !important;
    cursor: pointer !important;
    position: relative;
    z-index: 2;
    margin-bottom: -1px;
    transition: all 0.2s ease-in-out !important;
}

.tabbed .rate-label i {
    font-size: 15px !important;
    transition: transform 0.2s ease-in-out !important;
}

.tabbed .rate-label:hover i {
    transform: scale(1.15) translateY(-1px) !important;
}
/* ==========================================================================
   УСИЛЕННЫЕ ЦВЕТНЫЕ ФОНЫ ДЛЯ НЕАКТИВНЫХ ТАБОВ (ЗАЩИТА ОТ ПЕРЕБИВАНИЯ)
   ========================================================================== */

/* 1. Опис — Мягкий нежно-синий */
.tabbed .rate-label.tab-btn-desc {
    background-color: #f0f6ff !important;
    color: #0d6efd !important;
    border-top: 3px solid #bfdbfe !important;
}

/* 2. Характеристики — Мягкий пастельно-бирюзовый */
.tabbed .rate-label.tab-btn-specs {
    background-color: #e0f7fa !important;
    color: #006064 !important;
    border-top: 3px solid #b2ebf2 !important;
}

/* 3. Рейтинг — Мягкий кремово-желтый */
.tabbed .rate-label.tab-btn-rating {
    background-color: #fffdf5 !important;
    color: #b45309 !important;
    border-top: 3px solid #fef3c7 !important;
}

/* 4. Залиште Відгук — Мягкий эко-зеленый */
.tabbed .rate-label.tab-btn-review {
    background-color: #f0fdf4 !important;
    color: #166534 !important;
    border-top: 3px solid #bbf7d0 !important;
}


/* -------------------------------------------------------------------------- */
/* УНИКАЛЬНЫЕ ПАСТЕЛЬНЫЕ ФОНЫ ДЛЯ НЕАКТИВНЫХ ТАБОВ                           */
/* -------------------------------------------------------------------------- */

/* 1. Опис — Мягкий нежно-синий */
.tab-btn-desc {
    background-color: #f0f6ff !important;
    color: #4b6584 !important;
    border-top: 3px solid #bfdbfe !important;
}

/* 2. Характеристики — Мягкий пастельно-бирюзовый */
.tab-btn-specs {
    background-color: #e0f7fa !important;
    color: #006064 !important;
    border-top: 3px solid #b2ebf2 !important;
}

/* 3. Рейтинг — Мягкий кремово-желтый */
.tab-btn-rating {
    background-color: #fffdf5 !important;
    color: #b45309 !important;
    border-top: 3px solid #fef3c7 !important;
}

/* 4. Залиште Відгук — Мягкий эко-зеленый */
.tab-btn-review {
    background-color: #f0fdf4 !important;
    color: #166534 !important;
    border-top: 3px solid #bbf7d0 !important;
}

/* -------------------------------------------------------------------------- */
/* ЯРКАЯ И ЧИСТАЯ СТИЛИЗАЦИЯ ПРИ КЛИКЕ (CHECKED АКТИВНОЕ СОСТОЯНИЕ)          */
/* -------------------------------------------------------------------------- */

/* Клик на Опис — Белый фон + Насыщенный синий текст */
#tab-nav-1:checked + .tab-btn-desc {
    background-color: #ffffff !important;
    color: #0d6efd !important;
    border-top: 3px solid #0d6efd !important;
    border-bottom: 2px solid #ffffff !important;
}

/* Клик на Характеристики — Белый фон + Глубокая бирюза */
#tab-nav-2:checked + .tab-btn-specs {
    background-color: #ffffff !important;
    color: #0097a7 !important;
    border-top: 3px solid #0097a7 !important;
    border-bottom: 2px solid #ffffff !important;
}

/* Клик на Рейтинг — Белый фон + Яркое золото */
#tab-nav-3:checked + .tab-btn-rating {
    background-color: #ffffff !important;
    color: #f59f00 !important;
    border-top: 3px solid #f59f00 !important;
    border-bottom: 2px solid #ffffff !important;
}

/* Активное состояние 4-й вкладки при клике */
#tab-nav-4:checked + .tab-btn-comments {
    background-color: #ffffff !important;
    color: #dc3545 !important;
    border-top: 3px solid #dc3545 !important;
    border-bottom: 2px solid #ffffff !important;
}

/* 5. Залиште відгук становится пятым по счету в CSS */
#tab-nav-5:checked + .tab-btn-review {
    background-color: #ffffff !important;
    color: #198754 !important;
    border-top: 3px solid #198754 !important;
    border-bottom: 2px solid #ffffff !important;
}

/* -------------------------------------------------------------------------- */
/* ОБЩАЯ КОНТЕНТНАЯ ОБЛАСТЬ И ВНУТРЕННИЕ СТИЛИ                               */
/* -------------------------------------------------------------------------- */
.tabs-content {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 0 8px 8px 8px;
    padding: 24px;
    position: relative;
    z-index: 1;
    min-height: 200px;
    clear: both;
}

/* Скрытие вкладок по умолчанию */
.tabbed .tab-pane {
    display: none !important;
}

/* --- ДОБАВЛЕНИЕ ЛОГИКИ ДЛЯ 5-ТИ ТАБОВ В CSS --- */
#tab-nav-1:checked ~ .tabs-content *[data-id="tab-nav-1"],
#tab-nav-2:checked ~ .tabs-content *[data-id="tab-nav-2"],
#tab-nav-3:checked ~ .tabs-content *[data-id="tab-nav-3"],
#tab-nav-4:checked ~ .tabs-content *[data-id="tab-nav-4"],
#tab-nav-5:checked ~ .tabs-content *[data-id="tab-nav-5"] {
    display: block !important;
}

/* 4. Новая вкладка Отзывы — Мягкий нежно-розовый пастельный фон */
.tab-btn-comments {
    background-color: #fff5f5 !important;
    color: #991b1b !important;
    border-top: 3px solid #fecaca !important;
}


.description-content {
    font-size: 15px;
    line-height: 1.7;
    color: #495057;
}

/* Адаптивность панели под мобильные телефоны (До 768px) */
@media (max-width: 767.98px) {
    .tabbed .rate-label {
        display: flex !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 6px !important;
        border-radius: 8px !important;
        border: 1px solid #dee2e6 !important;
        justify-content: flex-start !important;
        padding-left: 20px !important;
    }
    .tabs-content {
        border-radius: 8px;
        margin-top: 8px;
    }
    .tab-btn-desc, .tab-btn-specs, .tab-btn-rating, .tab-btn-review {
        border-top: 1px solid #dee2e6 !important;
    }
    #tab-nav-1:checked + .tab-btn-desc { border-left: 5px solid #0d6efd !important; border-bottom: 1px solid #dee2e6 !important; }
    #tab-nav-2:checked + .tab-btn-specs { border-left: 5px solid #0097a7 !important; border-bottom: 1px solid #dee2e6 !important; }
    #tab-nav-3:checked + .tab-btn-rating { border-left: 5px solid #f59f00 !important; border-bottom: 1px solid #dee2e6 !important; }
    #tab-nav-4:checked + .tab-btn-review { border-left: 5px solid #198754 !important; border-bottom: 1px solid #dee2e6 !important; }
}


/* ==========================================================================
   ПРОКАЧАННЫЕ ЦВЕТНЫЕ СТИЛИ ДЛЯ ТАБЛИЦЫ ХАРАКТЕРИСТИК (ВКЛАДКА 2)
   ========================================================================== */
.product-specifications-wrapper {
    max-width: 650px;
    margin: 0 auto;
    padding: 10px 0;
}

.custom-specs-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
    font-size: 14px !important;
}

.custom-specs-table tr {
    background-color: #ffffff !important;
    border: 1px solid #e9ecef !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.custom-specs-table tr:hover {
    transform: translateX(4px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

.custom-specs-table td {
    padding: 10px 14px !important;
    border-top: 1px solid #f1f3f5 !important;
    border-bottom: 1px solid #f1f3f5 !important;
}

.custom-specs-table td:first-child {
    border-left: 1px solid #f1f3f5 !important;
    border-radius: 8px 0 0 8px !important;
}

.custom-specs-table td:last-child {
    border-right: 1px solid #f1f3f5 !important;
    border-radius: 0 8px 8px 0 !important;
}

.spec-name {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-weight: 600 !important;
    color: #495057 !important;
}

.spec-icon-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    font-size: 13px !important;
}

.spec-value-pill {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
}

.spec-value-pill .unit-text {
    opacity: 0.7;
    margin-left: 3px;
    font-weight: 500 !important;
}

/* Индивидуальные цветовые схемы для параметров */
.theme-chocolate.spec-icon-badge { background-color: #efe5fd !important; color: #7c4dff !important; }
.theme-chocolate.spec-value-pill { background-color: #f3e5f5 !important; color: #6a1b9a !important; border: 1px solid #e1bee7 !important; }

.theme-weight.spec-icon-badge { background-color: #e3f2fd !important; color: #1e88e5 !important; }
.theme-weight.spec-value-pill { background-color: #e3f2fd !important; color: #0d47a1 !important; border: 1px solid #bbdefb !important; }

.theme-price.spec-icon-badge { background-color: #e8f5e9 !important; color: #2e7d32 !important; }
.theme-price.spec-value-pill { background-color: #f0fdf4 !important; color: #166534 !important; border: 1px solid #bbf7d0 !important; }

.theme-box.spec-icon-badge { background-color: #fff8e1 !important; color: #ffb300 !important; }
.theme-box.spec-value-pill { background-color: #fff8e1 !important; color: #b75700 !important; border: 1px solid #ffe082 !important; }

.theme-type.spec-icon-badge { background-color: #f3e5f5 !important; color: #8e24aa !important; }
.theme-type.spec-value-pill { background-color: #f3e5f5 !important; color: #4a148c !important; border: 1px solid #e1bee7 !important; }

.theme-percent.spec-icon-badge { background-color: #fbe9e7 !important; color: #d84315 !important; }
.theme-percent.spec-value-pill { background-color: #fbe9e7 !important; color: #bf360c !important; border: 1px solid #ffccbc !important; }

.theme-toy.spec-icon-badge { background-color: #fce4ec !important; color: #e91e63 !important; }
.theme-toy.spec-value-pill { background-color: #fce4ec !important; color: #880e4f !important; border: 1px solid #f8bbd0 !important; }

.theme-default.spec-icon-badge { background-color: #f8f9fa !important; color: #6c757d !important; }
.theme-default.spec-value-pill { background-color: #f8f9fa !important; color: #212529 !important; border: 1px solid #dee2e6 !important; }

@media (max-width: 576px) {
    .custom-specs-table tr { display: block !important; margin-bottom: 8px !important; border-radius: 8px !important; border: 1px solid #f1f3f5 !important; }
    .custom-specs-table td { display: block !important; width: 100% !important; border: none !important; }.spec-value { padding-top: 0 !important; padding-bottom: 12px !important; padding-left: 58px !important; }
}
/* ==========================================================================
   ПРОКАЧАННЫЕ ЦВЕТНЫЕ СТИЛИ ДЛЯ ТАБЛИЦЫ ХАРАКТЕРИСТИК
   ========================================================================== */
.custom-specs-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important; /* Делает отступы между строками-карточками */
    font-size: 14px !important;
}

.custom-specs-table tr {
    background-color: #ffffff !important;
    border: 1px solid #e9ecef !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.custom-specs-table tr:hover {
    transform: translateX(4px) !important; /* Легкий сдвиг вправо при наведении */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

.custom-specs-table td {
    padding: 10px 14px !important;
    border-top: 1px solid #f1f3f5 !important;
    border-bottom: 1px solid #f1f3f5 !important;
}

.custom-specs-table td:first-child {
    border-left: 1px solid #f1f3f5 !important;
    border-radius: 8px 0 0 8px !important;
}

.custom-specs-table td:last-child {
    border-right: 1px solid #f1f3f5 !important;
    border-radius: 0 8px 8px 0 !important;
}

/* Стилизация левой стороны (Ключ) */
.spec-name {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-weight: 600 !important;
    color: #495057 !important;
}

/* Круглые подложки для иконок параметров */
.spec-icon-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    font-size: 13px !important;
}

/* Стилизация правой стороны (Красивые пиллы значений) */
.spec-value-pill {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 20px !important; /* Закругленные теги */
    line-height: 1 !important;
}

.spec-value-pill .unit-text {
    opacity: 0.7;
    margin-left: 3px;
    font-weight: 500 !important;
}

/* ========================================== */
/* УНИКАЛЬНЫЕ ЦВЕТОВЫЕ ТЕМЫ ДЛЯ КАЖДОГО ПАРАМЕТРА */
/* ========================================== */

/* 1. Шоколад (Коричневый шоколадный стиль) */
.theme-chocolate.spec-icon-badge { background-color: #efe5fd !important; color: #7c4dff !important; }
.theme-chocolate.spec-value-pill { background-color: #f3e5f5 !important; color: #6a1b9a !important; border: 1px solid #e1bee7 !important; }

/* 2. Вес (Сине-голубой стиль) */
.theme-weight.spec-icon-badge { background-color: #e3f2fd !important; color: #1e88e5 !important; }
.theme-weight.spec-value-pill { background-color: #e3f2fd !important; color: #0d47a1 !important; border: 1px solid #bbdefb !important; }

/* 3. Цена за 1кг (Изумрудно-зеленый стиль) */
.theme-price.spec-icon-badge { background-color: #e8f5e9 !important; color: #2e7d32 !important; }
.theme-price.spec-value-pill { background-color: #f0fdf4 !important; color: #166534 !important; border: 1px solid #bbf7d0 !important; }

/* 4. Упаковка (Теплый янтарный стиль) */
.theme-box.spec-icon-badge { background-color: #fff8e1 !important; color: #ffb300 !important; }
.theme-box.spec-value-pill { background-color: #fff8e1 !important; color: #b75700 !important; border: 1px solid #ffe082 !important; }

/* 5. Вид продукции (Мягкий фиолетовый) */
.theme-type.spec-icon-badge { background-color: #f3e5f5 !important; color: #8e24aa !important; }
.theme-type.spec-value-pill { background-color: #f3e5f5 !important; color: #4a148c !important; border: 1px solid #e1bee7 !important; }

/* 6. Проценты (Оранжевый контрастный) */
.theme-percent.spec-icon-badge { background-color: #fbe9e7 !important; color: #d84315 !important; }
.theme-percent.spec-value-pill { background-color: #fbe9e7 !important; color: #bf360c !important; border: 1px solid #ffccbc !important; }

/* 7. Игрушка / Сюрприз (Яркий розово-красный стиль) */
.theme-toy.spec-icon-badge { background-color: #fce4ec !important; color: #e91e63 !important; }
.theme-toy.spec-value-pill { background-color: #fce4ec !important; color: #880e4f !important; border: 1px solid #f8bbd0 !important; }

/* Дефолтная тема */
.theme-default.spec-icon-badge { background-color: #f8f9fa !important; color: #6c757d !important; }
.theme-default.spec-value-pill { background-color: #f8f9fa !important; color: #212529 !important; border: 1px solid #dee2e6 !important; }

/* Мобильная адаптация */
@media (max-width: 576px) {
    .custom-specs-table tr {
        display: block !important;
        margin-bottom: 8px !important;
        border-radius: 8px !important;
        border: 1px solid #f1f3f5 !important;
    }
    .custom-specs-table td {
        display: block !important;
        width: 100% !important;
        border: none !important;
    }
    .spec-value {
        padding-top: 0 !important;
        padding-bottom: 12px !important;
        padding-left: 58px !important; /* Выравнивание под текст заголовка */
    }
}

/* ==========================================================================
   СТИЛИ ДЛЯ ВКЛАДКИ РЕЙТИНГА И АНАЛИТИКИ (RATING TAB 3)
   ========================================================================== */
.rating-tab-wrapper {
    padding: 10px 5px;
}

.rating-tab-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #212529 !important;
    margin-bottom: 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.rating-tab-title i { color: #198754 !important; }

/* Двухколоночная сетка аналитики */
.rating-analytics-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 24px !important;
}

/* Карточка №1: Главный скоринг */
.rating-score-card {
    background-color: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 12px !important;
    padding: 24px !important;
    text-align: center !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02) !important;
}

.score-number-box {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}
.score-number-box h2 {
    font-size: 54px !important;
    font-weight: 900 !important;
    color: #198754 !important;
    margin: 0 !important;
    line-height: 1 !important;
}
.score-number-box .max-score {
    font-size: 16px !important;
    color: #6c757d !important;
    font-weight: 600 !important;
}

.score-stars-row {
    display: flex !important;
    justify-content: center !important;
    gap: 4px !important;
    color: #ffc107 !important;
    font-size: 22px !important;
    margin-bottom: 18px !important;
}
.score-stars-row .star-rating {
    cursor: pointer !important;
}

.score-stats-labels {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.stat-label-item {
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.stat-label-item i { font-size: 12px !important; }
.label-rates { background-color: #f0fdf4 !important; color: #166534 !important; border: 1px solid #bbf7d0 !important; }
.label-reviews { background-color: #f3e5f5 !important; color: #6a1b9a !important; border: 1px solid #e1bee7 !important; }

/* Карточка №2: Счетчики просмотров и продаж */
.popularity-stats-card {
    background-color: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02) !important;
}

.popularity-card-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #495057 !important;
    margin-bottom: 18px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.pop-stat-row {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #f1f3f5 !important;
}
.pop-stat-row:last-child { border-bottom: none !important; }

.pop-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
}
.pop-icon.bg-views { background-color: #f3e5f5 !important; color: #9c27b0 !important; }
.pop-icon.bg-orders { background-color: #e8f5e9 !important; color: #2e7d32 !important; }

.pop-info {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 14px !important;
}
.pop-text { color: #495057 !important; font-weight: 500 !important; }
.pop-count { color: #212529 !important; font-weight: 700 !important; }

/* Адаптивность для мобильных телефонов */
@media (max-width: 576px) {
    .rating-analytics-grid {
        grid-template-columns: 1fr !important;
    }
}
/* ==========================================================================
   ЖЕСТКАЯ ФИКСАЦИЯ ЗОЛОТИСТОГО ЦВЕТА ДЛЯ ЗВЁЗД РЕЙТИНГА
   ========================================================================== */
.ung-golden-star {
    color: #ffc107 !important; /* Насыщенный золотисто-желтый цвет */
    text-shadow: 0 1px 2px rgba(255, 193, 7, 0.2) !important; /* Мягкое свечение */
    font-size: 22px !important; /* Единый размер для всех звёзд во вкладке */
    cursor: pointer !important;
    display: inline-block !important;
    transition: transform 0.15s ease-in-out !important;
}

/* Эффект увеличения при наведении мыши */
.ung-golden-star:hover {
    transform: scale(1.15) !important;
}

/* ==========================================================================
   СТИЛИ ДЛЯ ВЕРХНЕГО БЛОКА РЕЙТИНГА И АНАЛИТИКИ
   ========================================================================== */
.product-top-analytics-bar {
    border-bottom: 1px solid #e2e8f0 !important;
}

/* Округлая плашка рейтинга */
.top-rating-pill {
    background-color: #fffdf5 !important;
    border: 1px solid #fef3c7 !important;
    border-radius: 50px !important;
}

.top-score-link {
    font-size: 18px !important;
    letter-spacing: -0.2px !important;
}

.top-rates-count-wrapper {
    color: #b45309 !important;
    font-size: 15px !important;
}

/* Разделительная линия */
.top-analytics-divider {
    height: 35px !important;
    width: 2px !important;
    background-color: #cbd5e1 !important;
    opacity: 0.6 !important;
    margin: 0 5px !important;
}

/* Базовые бэйджи статистики */
.top-stat-badge {
    font-size: 15px !important;
    font-weight: 700 !important;
}
.top-stat-badge i {
    font-size: 16px !important;
}

/* Цвета просмотров */
.stat-badge-views {
    background-color: #fff5f5 !important;
    border: 1px solid #fed7d7 !important;
    color: #c53030 !important;
}

/* Цвета заказов */
.stat-badge-orders {
    background-color: #f3e8ff !important;
    border: 1px solid #e9d5ff !important;
    color: #6b46c1 !important;
}

/* ==========================================================================
   СТИЛИ ИНТЕРАКТИВНЫХ ЗВЁЗД В ФОРМЕ ОТПРАВКИ ОТЗЫВА (TAB 4)
   ========================================================================== */
.stars-interactive-group {
    display: flex;
    gap: 4px;
}

.interactive-star {
    font-size: 26px !important;
    color: #cbd5e1 !important; /* Серый контур по умолчанию */
    cursor: pointer !important;
    transition: transform 0.15s ease-in-out, color 0.1s ease-in-out !important;
}

/* Класс, который JS добавляет при наведении или клике */
.interactive-star.hovered,
.interactive-star.selected-star {
    color: #ffb300 !important; /* Насыщенное золото */
    font-weight: 900 !important; /* Переключение FontAwesome на solid-режим */
}

.interactive-star:hover {
    transform: scale(1.2) !important;
}
/* ==========================================================================
   СТИЛИ ДЛЯ СОЦИАЛЬНОЙ АВТОРИЗАЦИИ В ОТЗЫВАХ (GOOGLE / FACEBOOK)
   ========================================================================== */
.social-login-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 8px 16px;
    border-radius: 50px;
    margin-top: 5px;
}

.social-login-title {
    font-size: 13px;
    color: #475569;
}

.social-login-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.social-login-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
}

/* Размер SVG-иконок из вашей библиотеки */
.social-svg-icon {
    width: 18px;
    height: 18px;
    display: block;
}

/* Эффекты ховера для Google */
.social-login-link.google-link:hover {
    border-color: #ea4335;
    background-color: #fff5f5;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(234, 67, 53, 0.15);
}

/* Эффекты ховера для Facebook */
.social-login-link.facebook-link:hover {
    border-color: #1877f2;
    background-color: #f0f7ff;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(24, 119, 242, 0.15);
}
/* ==========================================================================
   ЖЕСТКАЯ ФИКСАЦИЯ И ЯРКОЕ ОФОРМЛЕНИЕ 4-Й ВКЛАДКИ (ФОРМА И АВТОРИЗАЦИЯ)
   ========================================================================== */

/* Общая обертка контента 4-й вкладки */
#setrating.tab-pane {
    padding: 10px 0 !important;
}

/* ЯРКИЙ БЛОК ПРЕДУПРЕЖДЕНИЯ ДЛЯ ГОСТЕЙ (ПРИНУДИТЕЛЬНЫЕ ЦВЕТА) */
#setrating .alert-warning {
    display: block !important;
    background-color: #fff9db !important; /* Насыщенный мягкий желтый цвет */
    border: 2px solid #ffe066 !important; /* Заметная золотистая рамка */
    border-radius: 12px !important;
    padding: 24px !important;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(245, 159, 0, 0.08) !important;
    margin-bottom: 20px !important;
}

/* Ссылка авторизации внутри предупреждения */
#setrating .alert-warning a {
    color: #d97706 !important;
    font-weight: 800 !important;
    text-decoration: underline !important;
    border: none !important;
}
#setrating .alert-warning a:hover {
    color: #b45309 !important;
}

/* Иконка пользователя в алерте */
#setrating .alert-warning i.fa-circle-user {
    color: #f59f00 !important;
    font-size: 28px !important;
    margin-bottom: 8px !important;
    display: inline-block !important;
}

/* Текст сообщения */
#setrating .alert-warning .fs-6 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #664d03 !important;
    display: block !important;
    margin-bottom: 16px !important;
}

/* БЛОК СЦЕНАРИЯ СОЦ. АВТОРИЗАЦИИ (ВЫРАВНИВАНИЕ) */
.social-login-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    background-color: #ffffff !important;
    border: 1px solid #ffe066 !important;
    padding: 10px 20px !important;
    border-radius: 50px !important;
    margin: 5px auto 0 auto !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

.social-login-title {
    font-size: 14px !important;
    color: #664d03 !important;
}

.social-login-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.social-login-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s !important;
}

.social-svg-icon {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

/* Ховеры для кнопок соцсетей */
.social-login-link.google-link:hover {
    border-color: #ea4335 !important;
    background-color: #fff5f5 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 8px rgba(234, 67, 53, 0.2) !important;
}

.social-login-link.facebook-link:hover {
    border-color: #1877f2 !important;
    background-color: #f0f7ff !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 8px rgba(24, 119, 242, 0.2) !important;
}

/* ПОЛЯ ФОРМЫ (ЕСЛИ ЮЗЕР АВТОРИЗОВАН) */
.custom-review-form {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
}

.review-form-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #212529 !important;
    margin-bottom: 16px !important;
}

.form-label-custom {
    font-weight: 600 !important;
    color: #495057 !important;
    font-size: 14px !important;
}

.form-control-custom {
    border: 1px solid #ced4da !important;
    background-color: #ffffff !important;
    color: #212529 !important;
    border-radius: 8px !important;
    padding: 12px !important;
}
.form-control-custom:focus {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}
/* ==========================================================================
   ОБНОВЛЕННЫЕ СТИЛИ ДЛЯ КНОПОК АВТОРИЗАЦИИ (ПОД FONTAWESOME)
   ========================================================================== */
.social-login-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    padding: 8px 18px !important;
    border-radius: 50px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
    margin: 10px auto 0 auto !important;
}

.social-login-title {
    font-size: 13px !important;
    color: #475569 !important;
}

.social-login-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Круглые кнопки-подложки */
.social-login-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 16px !important; /* Управляет размером иконок Google/Facebook */
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease !important;
}

/* Дефолтные цвета самих иконок */
.social-login-link.google-link { color: #ea4335 !important; }
.social-login-link.facebook-link { color: #1877f2 !important; }

/* Ховер-эффект для Google (кнопка становится красной, иконка — белой) */
.social-login-link.google-link:hover {
    border-color: #ea4335 !important;
    background-color: #ea4335 !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 10px rgba(234, 67, 53, 0.25) !important;
}

/* Ховер-эффект для Facebook (button становится синей, иконка — белой) */
.social-login-link.facebook-link:hover {
    border-color: #1877f2 !important;
    background-color: #1877f2 !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 10px rgba(24, 119, 242, 0.25) !important;
}
/* ==========================================================================
   ФИНАЛЬНЫЕ СТИЛИ ДЛЯ БЛОКА ГОСТЯ И СОЦСЕТЕЙ (100% ВАЛИДНОСТЬ)
   ========================================================================== */

/* Блок предупреждения для неавторизованных */
.guest-auth-alert {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: #fffdf5 !important; /* Нежный кремовый фон */
    border: 1px solid #fef3c7 !important; /* Золотистая рамка */
    border-radius: 12px !important;
    padding: 24px !important;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.05) !important;
    margin-bottom: 15px !important;
}

.guest-alert-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
}

.guest-alert-header i {
    color: #d97706 !important;
    font-size: 32px !important;
}

.guest-alert-text {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #451a03 !important;
}

.auth-redirect-link {
    color: #b45309 !important;
    font-weight: 800 !important;
    text-decoration: underline !important;
}
.auth-redirect-link:hover {
    color: #78350f !important;
}

/* Обертка социальной авторизации */
.social-login-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    padding: 8px 18px !important;
    border-radius: 50px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
}

.social-login-title {
    font-size: 13px !important;
    color: #475569 !important;
}

.social-login-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Круглые иконки кнопок */
.social-login-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease !important;
}

/* Фирменные цвета */
.social-login-link.google-link { color: #ea4335 !important; }
.social-login-link.facebook-link { color: #1877f2 !important; }

.social-login-link.google-link:hover {
    border-color: #ea4335 !important;
    background-color: #ea4335 !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 10px rgba(234, 67, 53, 0.25) !important;
}

.social-login-link.facebook-link:hover {
    border-color: #1877f2 !important;
    background-color: #1877f2 !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 10px rgba(24, 119, 242, 0.25) !important;
}
/* ==========================================================================
   ЯРКОЕ ЦВЕТНОЕ ОФОРМЛЕНИЕ ЗАГЛОВКОВ ТАБОВ С ИКОНКАМИ
   ========================================================================== */

/* Базовые изменения для всех ярлыков */
.tabbed .rate-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 22px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border-radius: 8px 8px 0 0 !important;
    margin-right: 6px !important;
    border: 1px solid #e2e8f0 !important;
    border-bottom: none !important;
    background-color: #f8fafc !important; /* Мягкий светлый фон для неактивных */
    color: #64748b !important;
    transition: all 0.25s ease-in-out !important;
}

/* Эффект легкого покачивания иконки при наведении */
.tabbed .rate-label:hover i {
    transform: translateY(-1px) scale(1.1);
}

.tabbed .rate-label i {
    transition: transform 0.2s ease-in-out !important;
    font-size: 15px !important;
}

/* --- МАГИЯ АКТИВНЫХ СОСТОЯНИЙ (ПРИ КЛИКЕ) --- */

/* 1. Описание - Яркий Синий бренд */
#tab-nav-1:checked + .tab-btn-desc {
    background-color: #ffffff !important;
    color: #0d6efd !important;
    border-top: 3px solid #0d6efd !important;
    border-bottom: 2px solid #ffffff !important;
}
#tab-nav-1:checked + .tab-btn-desc i { color: #0d6efd !important; }

/* 2. Характеристики - Насыщенный Бирюзовый */
#tab-nav-2:checked + .tab-btn-specs {
    background-color: #ffffff !important;
    color: #0097a7 !important;
    border-top: 3px solid #0097a7 !important;
    border-bottom: 2px solid #ffffff !important;
}
#tab-nav-2:checked + .tab-btn-specs i { color: #0097a7 !important; }

/* 3. Рейтинг - Благородный Золотой */
#tab-nav-3:checked + .tab-btn-rating {
    background-color: #ffffff !important;
    color: #f59f00 !important;
    border-top: 3px solid #f59f00 !important;
    border-bottom: 2px solid #ffffff !important;
}
#tab-nav-3:checked + .tab-btn-rating i { color: #f59f00 !important; }

/* 4. Оставить отзыв - Изумрудный Зеленый */
#tab-nav-4:checked + .tab-btn-review {
    background-color: #ffffff !important;
    color: #198754 !important;
    border-top: 3px solid #198754 !important;
    border-bottom: 2px solid #ffffff !important;
}
#tab-nav-4:checked + .tab-btn-review i { color: #198754 !important; }

/* Адаптивность панели под мобильные телефоны (До 768px — ПОЛНАЯ СБОРКА НА 5 ТАБОВ) */
@media (max-width: 767.98px) {
    .tabbed .rate-label {
        display: flex !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 6px !important;
        border-radius: 8px !important;
        border: 1px solid #dee2e6 !important;
        justify-content: flex-start !important;
        padding-left: 20px !important;
    }

    /* Сбрасываем жесткие рамки на мобильных для всех пяти элементов */
    .tab-btn-desc,
    .tab-btn-specs,
    .tab-btn-rating,
    .tab-btn-comments,
    .tab-btn-review {
        border-top: 1px solid #dee2e6 !important;
    }

    /* Выравниваем внутренние отступы при активации */
    #tab-nav-1:checked + .tab-btn-desc,
    #tab-nav-2:checked + .tab-btn-specs,
    #tab-nav-3:checked + .tab-btn-rating,
    #tab-nav-4:checked + .tab-btn-comments,
    #tab-nav-5:checked + .tab-btn-review {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        background-color: #ffffff !important;
    }

    /* Переключаем акцент на левую цветную полосу для каждой из 5 вкладок */
    #tab-nav-1:checked + .tab-btn-desc { border-left: 5px solid #0d6efd !important; border-bottom: 1px solid #dee2e6 !important; }
    #tab-nav-2:checked + .tab-btn-specs { border-left: 5px solid #0097a7 !important; border-bottom: 1px solid #dee2e6 !important; }
    #tab-nav-3:checked + .tab-btn-rating { border-left: 5px solid #f59f00 !important; border-bottom: 1px solid #dee2e6 !important; }
    #tab-nav-4:checked + .tab-btn-comments { border-left: 5px solid #dc3545 !important; border-bottom: 1px solid #dee2e6 !important; }
    #tab-nav-5:checked + .tab-btn-review { border-left: 5px solid #198754 !important; border-bottom: 1px solid #dee2e6 !important; }
}

/* ==========================================================================
   СТИЛИ ДЛЯ СЛАЙДЕРА СХОЖИХ ТОВАРОВ (RELATED PRODUCTS SWIPER)
   ========================================================================== */
.related-products-section {
    width: 100%;
    overflow: hidden;
}

.related-section-title a.related-cat-link {
    font-size: 18px !important;
    background-color: #ffe8cc !important; /* Мягкий оранжевый пастельный акцент */
    color: #d97706 !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    transition: background-color 0.2s, color 0.2s !important;
    display: inline-block;
}
.related-section-title a.related-cat-link:hover {
    background-color: #d97706 !important;
    color: #ffffff !important;
}

/* Карточка товара */
.related-product-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    overflow: hidden;
}
.related-product-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important;
}

/* Изображение внутри карточки */
.card-image-box {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.related-card-img {
    max-height: 150px;
    width: auto !important;
    object-fit: contain;
}

/* Скидочный бейдж */
.card-discount-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #dc3545 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    z-index: 2;
}

/* Обрезка длинных названий */
.card-product-title {
    line-height: 1.4;
    height: 2.8em;
    overflow: hidden;
}

/* Цены */
.card-price-current {
    font-size: 16px;
    line-height: 1.1;
}
.card-price-old {
    font-size: 14px !important; /* Увеличенный размер шрифта, как мы настраивали */
    text-decoration: line-through !important;
    opacity: 0.7 !important;
    background-color: #fef08a !important; /* Красивый мягкий пастельно-желтый фон */
    color: #9a3412 !important;            /* Благородный коричнево-терракотовый цвет */
    padding: 2px 6px !important;          /* Небольшие отступы, чтобы фон красиво обволакивал цену */
    border-radius: 4px !important;        /* Сглаженные углы желтой подложки */
    display: inline-block !important;     /* Чтобы отступы и фон легли ровно */
}


/* Маленькая круглая кнопка "Купить" */
.btn-quick-buy {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #198754;
    color: #ffffff;
    border: none;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}
.btn-quick-buy:hover { background-color: #157347; transform: scale(1.05); }
.btn-quick-buy:active { transform: scale(0.95); }

/* КНОПКИ НАВИГАЦИИ (СТРЕЛКИ ПО БОКАМ ДЛЯ ПК) */
.swiper-btn-prev, .swiper-btn-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    color: #212529;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
}
.swiper-btn-prev { left: -15px; }
.swiper-btn-next { right: -15px; }

.swiper-btn-prev:hover, .swiper-btn-next:hover {
    background-color: #212529;
    color: #ffffff;
    border-color: #212529;
}

/* Скрытие стрелок на мобильных устройствах */
@media (max-width: 991.98px) {
    .swiper-btn-prev, .swiper-btn-next { display: none !important; }
    .card-image-box { height: 150px; }
}
/* ==========================================================================
   КАСТОМНЫЕ СТИЛИ ДЛЯ БРЕНДА, СТРАНЫ И ПРЯМОУГОЛЬНЫХ КНОПОК КАРТОЧКИ
   ========================================================================== */

/* Раскрашенный бейдж бренда (Фиолетовый благородный стиль) */
.mini-brand-badge {
    background-color: #f3e5f5 !important;
    color: #9c27b0 !important;
    border: 1px solid #e1bee7 !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    letter-spacing: 0.3px;
    line-height: 1 !important;
}

.mini-brand-badge-none {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    border: 1px solid #dee2e6 !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    line-height: 1 !important;
}

/* Раскрашенный бейдж страны производства (Оранжево-терракотовый) */
.mini-country-badge {
    background-color: #fff7ed !important;
    color: #c2410c !important;
    border: 1px solid #ffedd5 !important;
    padding: 3px 8px !important;
    font-size: 10px !important;
    border-radius: 6px !important;
    letter-spacing: 0.3px;
    line-height: 1 !important;
}

/* Новая прямоугольная сглаженная кнопка "В Кошик" */
.btn-quick-buy-rectangular {
    background-color: #198754 !important; /* Зеленый цвет */
    color: #ffffff !important;
    border: none !important;
    height: 38px !important;
    border-radius: 8px !important; /* Сглаженные углы */
    font-size: 12px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
}
.btn-quick-buy-rectangular:hover {
    background-color: #157347 !important;
}
.btn-quick-buy-rectangular:active {
    transform: scale(0.98) !important;
}
.btn-quick-buy-rectangular i {
    font-size: 13px !important;
}

/* Кнопка Сердечка (Wishlist) */
.btn-quick-wishlist {
    background-color: #ffffff !important;
    color: #64748b !important;
    border: 1px solid #cbd5e1 !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important; /* Единое сглаживание с кнопкой купить */
    font-size: 15px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
.btn-quick-wishlist:hover {
    border-color: #dc3545 !important;
    background-color: #fef2f2 !important;
    color: #dc3545 !important; /* Краснеет при наведении */
}
.btn-quick-wishlist:active {
    transform: scale(0.95) !important;
}

/* Адаптивность текста страны для мобилок */
@media (max-width: 420px) {
    .mini-country-text-hidden {
        display: none !important; /* На супер-маленьких экранах прячем текст страны, оставляем только флаг */
    }
    .btn-quick-buy-rectangular span {
        display: none !important; /* На микро-мобилках прячем текст "В кошик", оставляя только иконку */
    }
    .btn-quick-buy-rectangular {
        width: 38px !important;
        flex-grow: 0 !important; /* Превращаем в квадрат на сверхмалых экранах, чтобы не ломать верстку */
    }
}
/* ==========================================================================
   ОБНОВЛЕННЫЙ КРАСНЫЙ ДИЗАЙН КНОПКИ WISHLIST В СЛАЙДЕРЕ
   ========================================================================== */
.btn-quick-wishlist {
    background-color: #fef2f2 !important; /* Нежно-розовый пастельный фон */
    color: #dc3545 !important;            /* Красный цвет сердечка */
    border: 1px solid #fecaca !important;  /* Мягкая красная рамка */
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;         /* Идеальное сглаживание углов */
    font-size: 15px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease-in-out !important;
}

/* Эффект при наведении: кнопка полностью заливается красным, а сердце становится белым */
.btn-quick-wishlist:hover {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 10px rgba(220, 53, 69, 0.2) !important;
}

.btn-quick-wishlist:active {
    transform: scale(0.95) !important;
}
/* ==========================================================================
   СТИЛИ ДЛЯ СПИСКА ОТЗЫВОВ (COMMENTS LIST UNDER TAB 3)
   ========================================================================== */
.product-comments-section {
    width: 100%;
}

.comments-section-title {
    font-size: 16px !important;
}
.comments-section-title i {
    margin-right: 4px;
}

/* Карточка одиночного отзыва */
.single-comment-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.single-comment-card:hover {
    transform: translateX(2px) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
}

/* Аватарка */
.comment-user-img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 1px solid #dee2e6 !important;
}

/* Плейсхолдер кружка с буквой, если нет аватарки (Приятный глубокий индиго) */
.comment-avatar-placeholder {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%) !important;
    font-size: 16px !important;
    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.15) !important;
}

.comment-user-name {
    font-size: 14px !important;
}

.comment-date-text {
    font-size: 11px !important;
}

/* Мини-звёздочки в отзыве */
.ung-golden-star-mini {
    color: #ffc107 !important;
    font-size: 12px !important;
}

.comment-message-text {
    font-size: 14px !important;
    color: #475569 !important;
    word-break: break-word !important; /* Защита от слишком длинных слов, ломающих мобильную верстку */
}

/* Заглушка пустого состояния */
.comments-empty-state {
    padding: 30px 20px !important;
}

/* Мобильная адаптация отзывов */
@media (max-width: 576px) {
    .single-comment-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 16px !important;
    }
    .comment-header-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}
/* ==========================================================================
   ПОЛНЫЙ ПАКЕТ СТИЛЕЙ ДЛЯ ВКЛАДКИ 4 (ОТЗЫВЫ, ФОРМА И АВТОРИЗАЦИЯ ГУГЛ/ФБ)
   ========================================================================== */

/* Контейнеры вкладки */
.review-form-wrapper {
    max-width: 600px;
    margin: 0 auto;
    padding: 10px 0;
}

.review-form-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #212529 !important;
    margin-bottom: 20px !important;
}

/* Блок автора (Аватар + Имя) */
.rating-author-box {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin-bottom: 24px !important;
}

.author-avatar-img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #dee2e6 !important;
}

.author-info-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.author-name-badge {
    font-size: 14px !important;
    font-weight: 700 !important;
}
.author-name-badge.user-logged { color: #0d6efd !important; }
.author-name-badge.user-guest { color: #dc3545 !important; }

.author-action-hint {
    font-size: 12px !important;
    color: #6c757d !important;
    font-weight: 500 !important;
}

/* --- СОСТОЯНИЕ @AUTH: ФОРМА И ПОЛЯ ВВОДА --- */
.custom-review-form {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
}

.form-stars-selector {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
}

.stars-label-text {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #495057 !important;
}

.form-label-custom {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #495057 !important;
    margin-bottom: 6px !important;
}

.form-control-custom {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    color: #212529 !important;
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
    border-radius: 8px !important;
    outline: none !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    resize: vertical !important;
}
.form-control-custom:focus {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

.btn-submit-review {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background-color: #212529 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}
.btn-submit-review:hover { background-color: #000000 !important; }

/* --- СОСТОЯНИЕ @ELSE: КАРТОЧКА ДЛЯ ГОСТЕЙ --- */
.guest-auth-alert {
    display: block !important;
    background-color: #fffdf5 !important;
    border: 1px solid #fef3c7 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.04) !important;
}

.guest-alert-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
}

.guest-alert-header i {
    color: #d97706 !important;
    font-size: 32px !important;
}

.guest-alert-text {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #451a03 !important;
    line-height: 1.6 !important;
}

/* Красивое оформление ссылки авторизации вместо желтого фона */
.auth-redirect-link {
    display: inline-block !important;
    background-color: #fef08a !important; /* Приятная пастельно-желтая подложка */
    color: #92400e !important;            /* Контрастный темно-коричневый текст */
    padding: 2px 10px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    border: 1px solid #fef08a !important;
    transition: all 0.2s ease !important;
}
.auth-redirect-link:hover {
    background-color: #fde047 !important;
    border-color: #fde047 !important;
    transform: translateY(-1px) !important;
}

/* Кнопки соцсетей */
.social-login-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    padding: 8px 18px !important;
    border-radius: 50px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
}

.social-login-title {
    font-size: 13px !important;
    color: #475569 !important;
}

.social-login-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.social-login-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.social-login-link.google-link { color: #ea4335 !important; }
.social-login-link.facebook-link { color: #1877f2 !important; }

.social-login-link.google-link:hover {
    border-color: #ea4335 !important;
    background-color: #ea4335 !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
}
.social-login-link.facebook-link:hover {
    border-color: #1877f2 !important;
    background-color: #1877f2 !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
}

/* ==========================================================================
   СТИЛИ ДЛЯ МИНИ-КАРТОЧКИ ТОВАРА В КОРЗИНЕ
   ========================================================================== */
.cart-item-details {
    width: 100%;
}

.cart-item-title a {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #212529 !important;
    text-decoration: none !important;
}
.cart-item-title a:hover { color: #0d6efd !important; }

.cart-item-summary {
    font-size: 13px !important;
    color: #6c757d !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
}

/* Флекс-сетка мета-данных в корзине */
.cart-item-meta-row-custom {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 12px !important;
}

/* Блок рейтинга */
.cart-item-rating-mini {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.ung-golden-star-cart {
    color: #ffb300 !important; /* Насыщенное золото */
    font-size: 11px !important;
}

.avg-rate-number-mini {
    font-weight: 800 !important;
    color: #475569 !important;
}

.rate-counter-mini, .no-rates-text-mini {
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

/* Мета-айтемы (Бренд / Категория) */
.cart-meta-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.cart-meta-label {
    color: #64748b !important;
    font-weight: 600 !important;
}

/* Компактные сглаженные бейджи для корзины */
.cart-mini-badge {
    padding: 2px 8px !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    line-height: 1.2 !important;
}

.cart-mini-badge.badge-purple { background-color: #f3e5f5 !important; color: #9c27b0 !important; border: 1px solid #e1bee7 !important; }
.cart-mini-badge.badge-blue { background-color: #e7f1ff !important; color: #0d6efd !important; border: 1px solid #b6d4fe !important; }

/* Кастомная страна в корзине */
.cart-mini-country-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    background-color: #fff7ed !important;
    color: #c2410c !important;
    border: 1px solid #ffedd5 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* ==========================================================================
   КОНТРОЛЬ СТАНДАРТНОЙ ГАЛЕРЕИ UNGSHOP (RESPONSIVE)
   ========================================================================== */
.main-product-slider {
    min-height: 560px !important; /* Удерживаем красивую десктопную высоту, чтобы не было дыр */
    border: 1px solid #e2e8f0 !important;
}

/* На мобильных экранах снимаем ограничение, чтобы картинка сжималась адаптивно */
@media (max-width: 767.98px) {
    .main-product-slider {
        min-height: auto !important;
        height: auto !important;
    }
}

/* ==========================================================================
   ФИНАЛЬНЫЙ CSS БЛОК ДЛЯ РЕКОМЕНДУЕМЫХ ТОВАРОВ В ФУТЕРЕ (SWIPER.JS)
   ========================================================================== */
.footer-recommended-section {
    width: 100% !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
}

/* Обязательный контекст позиционирования для боковых стрелок */
.footer-recommended-swiper {
    position: relative !important;
    /* Оставляем место внизу под пагинацию (точки) */
    padding-bottom: 30px !important;
}

/* Названия товаров: строго 2 строки без вылетов верстки */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.4rem;
    line-height: 1.2rem;
}

/* Плавный зум изображения при наведении на карточку */
.product-img-box img {
    transition: transform 0.3s ease-in-out !important;
}
.product-slider-card:hover .product-img-box img {
    transform: scale(1.05) !important;
}

/* Эффект плавного парения карточки товара при наведении */
.product-slider-card {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    will-change: transform, box-shadow;
}

.product-slider-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 20px rgba(33, 37, 41, 0.12) !important; /* Мягкая глубокая тень */
}

/* --- СТИЛИЗАЦИЯ ЦЕН --- */

/* Актуальная (текущая) цена */
.current-price {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/* Красивое пастельно-желтое выделение старой цены в слайдерах */
.old-price {
    font-size: 13px !important;
    text-decoration: line-through !important;
    opacity: 0.8 !important;
    background-color: #fef08a !important; /* Мягкий желтый пастельный маркер */
    color: #9a3412 !important;            /* Контрастный темно-коричневый текст */
    padding: 2px 8px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
}

/* --- НАВИГАЦИЯ СЛАЙДЕРА (Уникальные изолированные классы) --- */
.footer-prev,
.footer-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: all 0.2s ease-in-out !important;
}

/* Кастомный размер иконок FontAwesome внутри стрелок */
.footer-prev i,
.footer-next i {
    font-size: 14px !important;
}

/* Позиционирование стрелок по бокам слайдера */
.footer-prev { left: -5px !important; }
.footer-next { right: -5px !important; }

/* Ховер-эффекты кнопок перелистывания */
.footer-prev:hover,
.footer-next:hover {
    background-color: #212529 !important;
    color: #ffffff !important;
    border-color: #212529 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

/* --- ИНДИКАТОРЫ (Точки пагинации) --- */
.footer-recommended-section .swiper-pagination-bullet {
    background: #212529 !important;
    opacity: 0.2 !important;
    transition: all 0.2s ease !important;
}

.footer-recommended-section .swiper-pagination-bullet-active {
    opacity: 1 !important;
    background: #212529 !important;
    width: 18px !important;
    border-radius: 4px !important;
}

/* Фикс одинаковой высоты слайдов в сетке Flexbox Swiper */
.swiper-slide.h-auto {
    height: auto !important;
}

/* --- АДАПТИВНОСТЬ ПОД МОБИЛЬНЫЕ ТЕЛЕФОНЫ --- */
@media (max-width: 991.98px) {
    /* Полностью скрываем стрелки навигации на тач-скринах, управление идет жестом */
    .footer-prev,
    .footer-next {
        display: none !important;
    }
}

@media (max-width: 420px) {
    /* На микро-смартфонах зажимаем шрифты цен для защиты от вылетов */
    .current-price {
        font-size: 17px !important;
    }
    .old-price {
        font-size: 11px !important;
        padding: 1px 5px !important;
    }
}
/* ==========================================================================
   ОБНОВЛЕННЫЕ СТИЛИ ДЛЯ ШИРОКОФОРМАТНОГО СЛАЙДЕРА В ФУТЕРЕ (ОТ КРАЯ ДО КРАЯ)
   ========================================================================== */
.footer-recommended-section {
    width: 100% !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    padding: 40px 0 !important;
}

/* 🟢 СТАЛО: Заголовок секции стал значительно крупнее и заметнее */
.recommended-section-title h2 {
    font-size: 32px !important; /* Увеличили размер шрифта */
    font-weight: 900 !important; /* Сделали максимально жирным и массивным */
    letter-spacing: -0.5px !important;
    color: #1e293b !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.recommended-section-title h2 i {
    font-size: 28px !important; /* Увеличили иконку звезды в тон заголовку */
    color: #f59f00 !important;
}

/* 🟢 СТАЛО: Контейнер Swiper теперь растянут на 100% ширины экрана от края до края */
.footer-recommended-section .position-relative {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 40px !important; /* Мягкие отступы по бокам, чтобы крайние карточки не прилипали к рамке монитора */
}

.footer-recommended-slider {
    width: 100% !important;
    overflow: visible !important; /* Позволяет карточкам плавно уходить в тень по бокам */
}

/* Стилизация пагинации (точки Swiper) */
.footer-recommended-section .swiper-pagination-bullet-active {
    background: #212529 !important;
    width: 18px !important;
    border-radius: 4px !important;
}

/* 🟢 СТАЛО: Позиционирование стрелок адаптировано под широкий экран */
.footer-prev,
.footer-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    font-size: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

.footer-prev { left: 10px !important; } /* Сдвинули внутрь широкого контейнера */
.footer-next { right: 10px !important; }

.footer-prev:hover,
.footer-next:hover {
    background-color: #212529 !important;
    color: #ffffff !important;
    border-color: #212529 !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
}

/* Адаптивность под планшеты и мобильные устройства */
@media (max-width: 991.98px) {
    .footer-prev,
    .footer-next {
        display: none !important; /* Скрываем стрелки на тач-экранах */
    }
    .footer-recommended-section .position-relative {
        padding: 0 15px !important; /* На мобильных уменьшаем отступы по бокам */
    }
    .recommended-section-title h2 {
        font-size: 24px !important; /* Слегка уменьшаем заголовок на смартфонах */
    }
}
/* ==========================================================================
   УВЕЛИЧЕННОЕ НАЗВАНИЕ НА 4 СТРОКИ И ПОДКАТЕГОРИЯ В КАРТОЧКЕ СЛАЙДЕРА
   ========================================================================== */

/* Фиксируем высоту названия под 3-4 строки, чтобы карточки не прыгали по высоте */
.card-product-title.expanded-title {
    line-height: 1.4 !important;
    height: 5.6em !important; /* Высота ровно под 4 строки текста */
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important; /* Жесткое ограничение для старых браузеров */
    -webkit-box-orient: vertical !important;
    margin-bottom: 8px !important;
}

/* Стилизация новой пастельной плашки подкатегории */
.mini-subcategory-badge {
    background-color: #f0fdfa !important; /* Мягкий мятно-бирюзовый фон */
    color: #0d9488 !important;            /* Контрастный темно-бирюзовый текст */
    border: 1px solid #ccfbf1 !important;  /* Аккуратная рамка */
    padding: 3px 8px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    letter-spacing: 0.3px;
    max-width: 100% !important;
    overflow: hidden !important;
    text-truncate: true;
    white-space: nowrap !important;
}

.mini-subcategory-badge i {
    font-size: 10px !important;
    opacity: 0.8;
}
/* ==========================================================================
   МОДЕРНИЗИРОВАННЫЙ СТИЛЬ ГЛУБОКОГО ФУТЕРА (MAIN SITE FOOTER)
   ========================================================================== */
.main-site-footer {
    background-color: #0f172a !important; /* Глубокий премиальный темно-синий/грифельный тон */
}

.bg-dark-darker {
    background-color: #020617 !important; /* Еще более темный тон для полосы копирайта */
}

/* Стилизация текста описания компании */
.footer-description-text {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #94a3b8 !important; /* Мягкий не утомляющий глаза серый цвет */
}

/* Текст заголовков колонок */
.footer-widget-box .widget-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* Декоративная полоса под заголовком */
.footer-widget-box .widget-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35px;
    height: 2px;
    background-color: #3b82f6; /* Акцентная синяя полоска */
}

/* Ссылки меню в футере */
.footer-menu-links li a {
    font-size: 14px !important;
    color: #94a3b8 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center;
    transition: all 0.2s ease-in-out !important;
}

/* Скрытая микро-стрелочка, которая плавно выезжает при наведении на пункт меню */
.small-arrow {
    font-size: 10px !important;
    margin-right: 0px !important;
    width: 0px !important;
    opacity: 0;
    transition: all 0.2s ease-in-out !important;
}

.footer-menu-links li a:hover {
    color: #ffffff !important;
    padding-left: 4px !important;
}

.footer-menu-links li a:hover .small-arrow {
    width: 12px !important;
    margin-right: 4px !important;
    opacity: 1;
    color: #3b82f6 !important;
}

/* Плашка условий возврата */
.footer-accent-link {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #3b82f6 !important;
    text-decoration: none !important;
    border-bottom: 1px dashed #3b82f6;
    transition: color 0.15s;
}
.footer-accent-link:hover {
    color: #60a5fa !important;
    border-bottom-style: solid;
}

/* Карточка телефона техподдержки */
.footer-support-card {
    background-color: #1e293b !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    max-width: 300px;
}

.support-phone-link {
    transition: color 0.15s;
}
.support-phone-link:hover {
    color: #4ade80 !important; /* Зеленеет при наведении */
}

/* Список контактов 4 колонки */
.footer-contact-info {
    font-size: 14px !important;
    color: #94a3b8 !important;
}
.footer-contact-info i {
    font-size: 15px !important;
    width: 16px;
    text-align: center;
}

/* Копирайт бар */
.text-muted-footer-copyright {
    color: #64748b !important;
}

.footer-logo-img {
    max-height: 48px !important;
    width: auto;
}
/* ==========================================================================
   КОНТРАСТНЫЕ И ЯРКИЕ СТИЛИ ДЛЯ КНОПОК СОЦСЕТЕЙ ВОЗЛЕ ЛОГОТИПА
   ========================================================================== */
.footer-branding-header-row {
    width: 100%;
}

.footer-social-inline-row {
    display: inline-flex !important;
    gap: 10px !important; /* Увеличили зазор для лучшей читаемости */
}

/* 🟢 СТАЛО: Светлые, контрастные круглые кнопки-подложки */
.footer-inline-social-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.08) !important; /* Полупрозрачный белый — идеально ложится на любой темный фон */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    font-size: 16px !important;
    text-decoration: none !important;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1),
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease !important;
}

/* 🟢 СТАЛО: Задаем сочные фирменные цвета для иконок СРАЗУ (до наведения мыши), чтобы они не сливались */
.footer-inline-social-link.viber-personal { color: #bfb7ff !important; } /* Неоново-фиолетовый */
.footer-inline-social-link.viber-group    { color: #a193ff !important; }
.footer-inline-social-link.telegram-link   { color: #38bdf8 !important; } /* Яркий голубой */
.footer-inline-social-link.instagram-link  { color: #f472b6 !important; } /* Нежно-розовый */
.footer-inline-social-link.facebook-link   { color: #60a5fa !important; } /* Приятный синий */

/* ========================================== */
/* ПРЕМИАЛЬНЫЕ ЭФФЕКТЫ ПРИ НАВЕДЕНИИ КУРСОРA  */
/* ========================================== */

/* Личный Viber */
.footer-inline-social-link.viber-personal:hover {
    background-color: #7360f2 !important;
    border-color: #7360f2 !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.08) !important;
    box-shadow: 0 4px 12px rgba(115, 96, 242, 0.35) !important;
}

/* Сообщество Viber */
.footer-inline-social-link.viber-group:hover {
    background-color: #5944d6 !important;
    border-color: #5944d6 !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.08) !important;
    box-shadow: 0 4px 12px rgba(89, 68, 214, 0.35) !important;
}

/* Telegram */
.footer-inline-social-link.telegram-link:hover {
    background-color: #0088cc !important;
    border-color: #0088cc !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.08) !important;
    box-shadow: 0 4px 12px rgba(0, 136, 204, 0.35) !important;
}

/* Instagram */
.footer-inline-social-link.instagram-link:hover {
    background-color: #e1306c !important;
    border-color: #e1306c !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.08) !important;
    box-shadow: 0 4px 12px rgba(225, 48, 108, 0.35) !important;
}

/* Facebook */
.footer-inline-social-link.facebook-link:hover {
    background-color: #1877f2 !important;
    border-color: #1877f2 !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.08) !important;
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.35) !important;
}

/* Адаптивное поведение на экранах смартфонов */
@media (max-width: 480px) {
    .footer-branding-header-row {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
}