﻿/**/
.wrapper-all {
    display: flex;
    flex-direction: column;
    min-height: 100vh
}

main {
    flex: 1;
}
/**/

form {
    padding: 0;
    margin: 0;
}

a {
    color: var(--color-blue-navy);
}

:root {
    --font-primary: 'Montserrat', sans-serif;
    --font-heading: 'Rubik', sans-serif;
    --color-orange: #ff6600;
    --color-orange-hover: #e55c00;
    --color-blue-dark: #0f2b48;
    --color-blue-navy: #153b63;
    --color-bg-light: #f4f6f9;
    --color-border: #e2e8f0;
    --color-alert: #DC3545;
    --color-red: #d92525;
    --color-red-hover: #b81d1d;
    --color-navy: #0f2b48;
    --color-navy-dark: #0a1e33;
    --color-yellow: #ffc107;
    --color-green-price: #28a745;
}

body {
    font-family: var(--font-primary);
    color: #2d3748;
    background-color: var(--color-bg-light);
    font-size: 0.88rem;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: var(--font-heading);
}

/* Верхняя оранжевая информационная полоса */
.top-bar {
    background-color: var(--color-orange);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    border-bottom:1px white solid;
}

/* Главная навигация */
.navbar-brand .brand-title {
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--color-blue-dark);
    letter-spacing: -0.5px;
    line-height: 1;
}

.navbar-brand .brand-subtitle {
    font-size: 0.65rem;
    color: var(--color-orange);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.nav-link-custom {
    background-color: #f3761a;
    color: #ffffff !important;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 4px;
    padding: 14px !important;
    transition: background-color 0.2s;
    border: 1px #fff solid;
}

    .nav-link-custom:hover {
        background-color: var(--color-orange-hover);
    }

    .nav-link-custom.active {
        background-color: var(--color-orange-hover);
    }

.header-phone-box {
    background-color: #ffffff;
    border: 2px solid var(--color-orange);
    border-radius: 8px;
    padding: 4px 14px;
    color: var(--color-blue-dark);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}

    .header-phone-box:hover {
        background-color: var(--color-orange);
        color: #ffffff !important;
    }

/* ==========================================
       Интерактивный слайдер под меню (Slick)
       ========================================== */
/* Слайдер баннеров под меню */
.hero-slider-section {
    background: linear-gradient(135deg, #0f2b48 0%, #1a4979 100%);
    color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(15, 43, 72, 0.12);
}

.hero-slide {
    padding: 2.2rem 2rem;
    min-height: 250px;
    display: flex !important;
    align-items: center;
}

.slick-dots {
    bottom: 10px;
}

    .slick-dots li button:before {
        color: #ffffff;
        font-size: 8px;
        opacity: 0.4;
    }

    .slick-dots li.slick-active button:before {
        color: var(--color-orange);
        opacity: 1;
    }

/* Кастомизация точек Slick Slider */
.slick-dots {
    bottom: 12px;
}

    .slick-dots li button:before {
        color: #ffffff;
        font-size: 8px;
        opacity: 0.4;
    }

    .slick-dots li.slick-active button:before {
        color: var(--color-orange);
        opacity: 1;
    }

/* ==========================================
       Плашки преимуществ (5 элементов)
       ========================================== */
.advantage-box {
    background-color: var(--color-blue-navy);
    color: #ffffff;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background-color 0.2s;
}

    .advantage-box:hover {
        transform: translateY(-2px);
        background-color: var(--color-blue-dark);
    }

/* ==========================================
       Боковой фильтр (Sidebar)
       ========================================== */
.filter-card {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.filter-group-title {
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    color: var(--color-blue-dark);
    letter-spacing: 0.5px;
    margin-bottom: 0.6rem;
}

/* Кастомизация jQuery UI Slider */
.custom-range-slider.ui-slider {
    background: #e2e8f0;
    border: none;
    height: 6px;
    border-radius: 3px;
    margin: 12px 4px 8px 4px;
}

.custom-range-slider .ui-slider-range {
    background: var(--color-orange);
    border-radius: 3px;
}

.custom-range-slider .ui-slider-handle {
    width: 16px;
    height: 16px;
    background: #ffffff;
    border: 3px solid var(--color-orange);
    border-radius: 50%;
    top: -5px;
    margin-left: -8px;
    cursor: pointer;
    outline: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.filter-input-num {
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    padding: 4px 6px;
}

.btn-orange {
    background-color: var(--color-orange);
    color: #ffffff;
    font-weight: 700;
    border-radius: 6px;
    border: none;
    transition: background-color 0.2s;
}

    .btn-orange:hover {
        background-color: var(--color-orange-hover);
        color: #ffffff;
    }

.btn-blue {
    background-color: var(--color-blue-dark);
    color: #ffffff;
    font-weight: 700;
    border-radius: 6px;
    border: none;
    transition: background-color 0.2s;    
}

    .btn-blue:hover {
        background-color: var(--color-blue-navy);
        color: #ffffff;
    }

/* ==========================================
       Карточки магазинов
       ========================================== */
.store-card {
    background-color: #ffffff;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    transition: all 0.2s ease;
}

    .store-card:hover {
        border-color: var(--color-orange);
        box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    }

.store-title {
    color: var(--color-blue-dark);
    font-weight: 700;
    font-size: 1rem;
}

/* Блок карты и доставки */
.delivery-banner {
    background: #fff;
    border: 2px dashed var(--color-orange);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

/* Табы типов транспорта */
.nav-pills-custom .nav-link {
    color: var(--color-blue-dark);
    font-weight: 600;
    border-radius: 20px;
    padding: 6px 18px;
    font-size: 0.85rem;
    background-color: #ffffff;
    border: 1px solid var(--color-border);
    margin: 2px;
}

    .nav-pills-custom .nav-link.active {
        background-color: var(--color-orange);
        color: #ffffff;
        border-color: var(--color-orange);
    }

    .nav-pills-custom .nav-link:hover {
        background-color: var(--color-orange);
        color: #ffffff;
        border-color: var(--color-orange);
    }

/* Карточки отзывов */
.review-card {
    background-color: #ffffff;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    padding: 1.25rem;
    height: 100%;
}

.stars-rating {
    color: #ffb703;
    font-size: 0.85rem;
}

/* Карточки Вопросов FAQ */
.faq-card {
    background-color: #ffffff;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    padding: 1.2rem;
    height: 100%;
    transition: transform 0.2s;
}

    .faq-card:hover {
        transform: translateY(-2px);
    }

.faq-question {
    font-weight: 700;
    color: var(--color-blue-dark);
    font-size: 0.88rem;
    margin-bottom: 0.5rem;
}

/* Подвал сайта */
footer {
    background-color: var(--color-blue-dark);
    color: #94a3b8;
    font-size: 0.82rem;
}

    footer a {
        color: #cbd5e1;
        text-decoration: none;
        transition: color 0.2s;
    }

        footer a:hover {
            color: var(--color-orange);
        }

.footer-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
}

.count-cart-heaeder {
    top:7px;
}

.phone-descr {
    font-size:8pt;
    display:block;
    color:gray;
}

.logo-header{
    width:100%;
    max-width: 160px;
}

.main-slide {
    background: linear-gradient(135deg, #ffffff 0%, #fff7f2 100%);
    color: #000;
}

.text-alert {
    color: var(--color-alert);
}

.hero-title-main {
    
}

.shop__title
{
    margin:20px 0;
}

.wrapper-item-index {
    margin:60px 0;
}

.wrapper-item-index-bg-white {
    background: #F8FAFC;
    padding: 40px 15px;
    border-radius: 12px;
}
.wrapper-item-index-bg-orange {
    background: linear-gradient(135deg, #ffffff 0%, #fff7f2 100%);
    padding: 40px 15px;
    border-radius: 12px;
}

.color-white {
    color:#fff !important;
}



/*Раздел Сервис*/
/* Главный промо-блок АКБ СЕРВИС */
.service-hero-card {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    padding: 2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.service-brand-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--color-navy);
    letter-spacing: -0.5px;
    line-height: 1;
}

    .service-brand-title span {
        color: var(--color-red);
    }

.hero-main-heading {
    font-size: clamp(1.2rem, 3.5vw, 2.2rem);
    font-weight: 800;
    color: var(--color-navy);
    line-height: 1.15;
    letter-spacing: -0.5px;
}

.btn-red-action {
    background-color: var(--color-red);
    color: #ffffff;
    font-weight: 700;
    border-radius: 6px;
    padding: 0.75rem 1.8rem;
    border: none;
    font-size: 0.95rem;
    transition: background-color 0.2s;
}

    .btn-red-action:hover {
        background-color: var(--color-red-hover);
        color: #ffffff;
    }

.step-feature-box {
    background-color: #f8fafc;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    height: 100%;
}

.step-feature-title {
    font-weight: 700;
    color: var(--color-navy);
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
}

.free-included-card {
    background-color: #f8fafc;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    padding: 1.5rem;
    position: relative;
}

.badge-free-yellow {
    background-color: var(--color-yellow);
    color: #000000;
    font-weight: 800;
    font-size: 0.9rem;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Секция Ассортимента */
.assortment-card {
    background-color: #ffffff;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    height: 100%;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .assortment-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    }

    .assortment-card::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        width: 45px;
        height: 45px;
        background: radial-gradient(circle at 100% 100%, #ffe8b3 0%, transparent 70%);
        border-radius: 50% 0 0 0;
    }

/* Темная секция Поддержки */
.navy-support-section {
    background: linear-gradient(135deg, #0f2b48 0%, #0a1e33 100%);
    color: #ffffff;
    border-radius: 14px;
    padding: 3rem 2rem;
}

.navy-inner-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 1.5rem;
    height: 100%;
}

/* Галерея Работ (6 блоков) */
.work-gallery-card {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: transform 0.2s;
}

    .work-gallery-card:hover {
        transform: translateY(-3px);
    }

.work-bg-1 {
    background: linear-gradient(135deg, #64748b 0%, #334155 100%);
}

.work-bg-2 {
    background: linear-gradient(135deg, #475569 0%, #1e293b 100%);
}

.work-bg-3 {
    background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
}

.work-bg-4 {
    background: linear-gradient(135deg, #991b1b 0%, #450a0a 100%);
}

.work-bg-5 {
    background: linear-gradient(135deg, #475569 0%, #0f172a 100%);
}

.work-bg-6 {
    background: linear-gradient(135deg, #7f1d1d 0%, #360707 100%);
}

/* Красный акцентный баннер */
.red-callout-banner {
    background: linear-gradient(90deg, #d92525 0%, #b81d1d 100%);
    color: #ffffff;
    border-radius: 12px;
    padding: 1.8rem 2rem;
}

.btn-white-callout {
    background-color: #ffffff;
    color: var(--color-navy);
    font-weight: 800;
    border-radius: 6px;
    padding: 0.6rem 1.5rem;
    border: none;
    font-size: 0.9rem;
    transition: background-color 0.2s;
}

    .btn-white-callout:hover {
        background-color: #f1f5f9;
        color: var(--color-navy);
    }

/* Вопросы FAQ */
.faq-card {
    background-color: #ffffff;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    padding: 1.25rem;
    height: 100%;
}

.faq-question {
    font-weight: 700;
    color: var(--color-navy);
    font-size: 0.88rem;
    margin-bottom: 0.4rem;
}

/* Желтая плашка замечания */
.notice-yellow-box {
    background-color: #ffffff;
    border-left: 4px solid var(--color-yellow);
    border-radius: 0 8px 8px 0;
    padding: 1rem 1.25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
/*Раздел Сервис КОНЕЦ*/

.color-red {
    color: var(--color-red);
}

.color-blue {
    color: var(--color-blue-navy);
}

.logo-service {
    width:100%;
    max-width:400px;
    margin-bottom:10px;
}

.ul-order-list i:before {
    vertical-align: bottom;
}

.ul-support-list {
    font-size: 0.9rem;
}
.faq-answer {
    font-size: 0.95rem;
}

input[type=checkbox], input[type=radio] {
    accent-color: var(--color-orange-hover) !important;
}
.form-check-input:checked, .form-check input:checked {
    background-color: var(--color-orange-hover) !important;
    border-color: var(--color-orange-hover) !important;
}
.form-check-radio {
    padding-left:0;
}
    .form-check-radio label {
        padding-left: 5px;
    }
    .form-check-radio input {
        /*--bs-form-check-bg: var(--bs-body-bg);
        flex-shrink: 0;
        width: 1em;
        height: 1em;
        margin-top: .25em;
        vertical-align: top;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: var(--bs-form-check-bg);
        background-image: var(--bs-form-check-bg-image);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        border: var(--bs-border-width) solid var(--bs-border-color);
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
        print-color-adjust: exact;
        border-radius:25px;*/
        margin-bottom:10px;
    }


    /* Заголовок страницы Каталога и счетчик */
    .page-title {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    font-weight: 700;
    color: var(--color-navy);
    letter-spacing: -0.5px;
    margin: 0;
}

.catalog-count-badge {
    background-color: var(--color-navy);
    color: #ffffff;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 0.9rem;
}

/* Блок Брендов */
.brands-card {
    background-color: #ffffff;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    padding: 1.25rem;
}

.brand-item-box {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 12px;
    text-align: center;
    transition: all 0.2s;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .brand-item-box:hover {
        border-color: var(--color-orange);
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

.brand-name {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--color-navy);
}

.brand-sub {
    font-size: 0.65rem;
    color: #718096;
}

/* ==========================================
       Карточки товаров (Batteries Grid)
       ========================================== */
.battery-card {
    background-color: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .battery-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.06);
        border-color: var(--color-orange);
    }

.battery-img-box {
    height: 150px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
}

    .battery-img-box img {
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
    }

.battery-title {
    color: var(--color-orange);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    padding: 0 0.8rem;
    margin-bottom: 0.8rem;
    min-height: 2.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-orange {
    color: var(--color-orange);    
    text-decoration:none;
}

.battery-specs-table {
    width: 100%;
    font-size: 0.74rem;
    border-collapse: collapse;
}

    .battery-specs-table tr:nth-child(odd) {
        background-color: #fff9f5;
    }

    .battery-specs-table tr:nth-child(even) {
        background-color: #ffffff;
    }

    .battery-specs-table td {
        padding: 4px 8px;
        border-top: 1px solid #f1f5f9;
    }

        .battery-specs-table td:first-child {
            color: #475569;
            font-weight: 500;
        }

        .battery-specs-table td:last-child {
            color: #0f172a;
            font-weight: 600;
            text-align: right;
        }

.battery-price {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-green-price);
}

.xsltPager {
    width: 100%;
    margin: 15px 0;
}

    .xsltPager .selected {
        padding: 2px 7px;
        background: var(--color-blue-navy);
        color: #fff;
    }

.small-1x
{
    font-size:0.7rem;
    display:block;    
    font-weight:400;
}

.map-shop-item {
    border: 1px solid var(--color-border);
    height: 360px;
}

.shop-card-item img {
    border-radius: 10px;
}

.talon {
    border-radius:10px !important;
    display:inline-block;
    font-weight:600;
}

table.table-cart td {
    text-align:center !important;
}
table.table-cart td input.quantity-num{
    width:100%;
    max-width:40px;
    text-align:center
}

table.ui label{
    padding-left:4px;
    padding-right:4px;
}

.header {
    background: var(--color-orange) !important;
}

.ppu {
    background: var(--color-orange);
    color: #fff;
    font-weight: bold;
    padding: 7px 17px;
    border-radius: 10px;
}
.akbza {
    color:#000;
    font-weight:600;
}

.size-285rem {
    font-size: 2.85rem;
}

.ppuazakb {
    margin:33px 0;
}

.mnez {
    color: #071B63;
}

.text-orange {
    color: var(--color-orange);    
}

.t-prod-item td {
    padding:8px;
}