/* =========================================================
   VABANK CLUB — WOW UI REDESIGN
   ========================================================= */

:root{
    --vb-blue:#0f4a75;
    --vb-blue-dark:#071f31;
    --vb-blue-light:#358bcb;
    --vb-blue-soft:#eaf5fc;
    --vb-orange:#eb9c1c;
    --vb-orange-dark:#c87d09;
    --vb-orange-light:#f6b13e;
    --vb-bg:#f4f7fb;
    --vb-card:#ffffff;
    --vb-card-2:#f9fbfd;
    --vb-text:#334150;
    --vb-muted:#6e7b88;
    --vb-line:#dfe7ef;
    --vb-line-soft:#edf2f7;
    --vb-radius-sm:12px;
    --vb-radius-md:18px;
    --vb-radius-lg:28px;
    --vb-shadow-sm:0 8px 24px rgba(8, 28, 45, 0.06);
    --vb-shadow-md:0 16px 42px rgba(8, 28, 45, 0.10);
    --vb-shadow-lg:0 28px 70px rgba(8, 28, 45, 0.14);
    --vb-transition:.28s ease;
}

/* Общая база */
html{
    scroll-behavior:smooth;
}

body,
.main{
    background:
        radial-gradient(circle at top right, rgba(53,139,203,.10), transparent 26%),
        radial-gradient(circle at top left, rgba(235,156,28,.08), transparent 20%),
        var(--vb-bg) !important;
    color:var(--vb-text) !important;
    font-family:Roboto, Open Sans, Arial, sans-serif !important;
    font-size:16px !important;
    line-height:1.75 !important;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

.main{
    padding-bottom:60px;
}

/* Центральный контент */
.main .container{
    max-width:1240px;
}

.main .col-lg-9,
.main .col-md-9,
.main .col-sm-9,
.main .content,
.main article{
    position:relative;
}

/* Эффект карточки для основной статьи */
.main .col-lg-9 > div:first-child,
.main .col-md-9 > div:first-child,
.main article,
.main .page-content{
    position:relative;
}

/* Текст */
.main p{
    margin:0 0 18px;
    color:var(--vb-text);
    line-height:1.8;
    font-size:16px;
}

.main strong{
    color:#23313e;
    font-weight:700;
}

.main a{
    color:var(--vb-blue-light);
    text-decoration:none;
    transition:all var(--vb-transition);
}

.main a:hover{
    color:var(--vb-orange);
    text-decoration:none;
}

/* Заголовки */
h1{
    color:#22303c !important;
    position:relative;
    max-width:920px;
    margin:0 auto 36px !important;
    padding:0 20px 22px !important;
    text-align:center;
    z-index:2;
    font-size:clamp(30px, 4vw, 46px) !important;
    font-weight:700 !important;
    line-height:1.15 !important;
    letter-spacing:-0.03em;
}

h1:after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:88px;
    height:5px;
    border-radius:30px;
    background:linear-gradient(90deg, var(--vb-blue-light), var(--vb-orange));
    box-shadow:0 6px 18px rgba(53,139,203,.22);
}

h2, h3, h4, h5, h6{
    color:#22303c !important;
    font-weight:700 !important;
    letter-spacing:-0.02em;
}

h2{
    position:relative;
    margin:48px 0 22px !important;
    padding:0 0 12px;
    font-size:clamp(24px, 2.8vw, 34px) !important;
    line-height:1.25 !important;
}

h2:after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:62px;
    height:4px;
    border-radius:20px;
    background:linear-gradient(90deg, var(--vb-orange), var(--vb-blue-light));
}

h3{
    margin:28px 0 14px !important;
    font-size:24px !important;
}

.text-6 strong{
    color:#22303c !important;
    font-size:1.15em !important;
    font-weight:700 !important;
    padding:0 !important;
}

/* Списки */
.main ul,
.main ol{
    margin:16px 0 24px;
    padding-left:26px;
}

.main li{
    margin-bottom:10px;
    color:var(--vb-text);
}

.main ul li::marker{
    color:var(--vb-orange);
}

.main ol li::marker{
    color:var(--vb-blue-light);
    font-weight:700;
}

/* =========================================================
   ХЕРО-БАННЕР / СЛАЙДЕР
   ========================================================= */

.slider-container{
    margin:0 0 36px;
    overflow:hidden;
    border-radius:0 0 26px 26px;
    box-shadow:var(--vb-shadow-lg);
    background:none !important;
}

.rev_slider_wrapper,
.rev_slider{
    border-radius:0 0 26px 26px;
    overflow:hidden;
}

.rev_slider li.slide-overlay .slotholder:after{
    opacity:0;
}

.tp-bgimg.defaultimg:before{
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(3,18,30,.42), rgba(3,18,30,.12));
    z-index:1;
}

.tp-mask-wrap{
    text-transform:none;
    text-align:right;
    line-height:1.2em !important;
    color:#fff;
    text-shadow:0 8px 24px rgba(0,0,0,.26);
    font-weight:700;
}

.slider_text_2{
    color:#ffffff !important;
    line-height:1.35 !important;
    font-size:30px !important;
    margin-top:25px !important;
    text-shadow:0 6px 18px rgba(0,0,0,.18);
}

a.tp-caption{
    background:none !important;
    margin-top:20px !important;
    text-transform:none;
}

.tp-bannertimer{
    background-color:var(--vb-orange) !important;
}

/* =========================================================
   КНОПКИ
   ========================================================= */

.btn,
button,
input[type="submit"]{
    border-radius:14px !important;
    font-weight:700 !important;
    transition:all var(--vb-transition) !important;
}

.btn-primary{
    background:linear-gradient(135deg, var(--vb-blue-light), var(--vb-blue)) !important;
    border:none !important;
    box-shadow:0 10px 24px rgba(32,107,162,.28) !important;
}

.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 30px rgba(32,107,162,.35) !important;
    opacity:1 !important;
}

.btn-warning{
    color:#fff !important;
    border:none !important;
    text-transform:uppercase;
    font-weight:700 !important;
    border-radius:999px !important;
    background:linear-gradient(135deg, var(--vb-orange-light), var(--vb-orange)) !important;
    box-shadow:0 6px 0 var(--vb-orange-dark), 0 16px 28px rgba(199,129,9,.24) !important;
}

.btn-warning:hover{
    transform:translateY(-2px);
    background:linear-gradient(135deg, #f8bc58, var(--vb-orange-light)) !important;
    box-shadow:0 6px 0 var(--vb-orange-dark), 0 20px 36px rgba(199,129,9,.32) !important;
}

.btn-slider{
    text-align:center !important;
    display:block !important;
    width:350px;
}

.btn-slider .btn{
    z-index:2;
    position:relative;
    zoom:1.08;
}

/* =========================================================
   КАРТОЧКИ ИГР
   ========================================================= */

.thumb-info{
    overflow:hidden;
    border-radius:18px !important;
    border:1px solid rgba(255,255,255,.35);
    background:#fff;
    box-shadow:0 10px 24px rgba(8,28,45,.08);
    transition:transform var(--vb-transition), box-shadow var(--vb-transition), border-color var(--vb-transition);
}

.thumb-info:hover{
    transform:translateY(-6px) scale(1.02);
    box-shadow:0 20px 44px rgba(8,28,45,.16);
    border-color:rgba(53,139,203,.22);
}

.thumb-info img{
    border-radius:16px !important;
    transition:transform .4s ease;
}

.thumb-info:hover img{
    transform:scale(1.06);
}

.thumb-info .thumb-info-type{
    background:linear-gradient(135deg, var(--vb-blue-light), var(--vb-blue)) !important;
    border-radius:16px !important;
    width:50px;
    color:#fff;
    height:50px;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    float:none;
    font-size:18px;
    padding:0;
    text-transform:uppercase;
    z-index:2;
    line-height:1;
    box-shadow:0 10px 24px rgba(53,139,203,.26);
}

/* =========================================================
   ХЛЕБНЫЕ КРОШКИ
   ========================================================= */

.breadcrumbs {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 !important;

    width: auto;
    margin: 18px 0 28px !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    color: #7a8793;
    font-size: 14px;
    line-height: 1.5;

    counter-reset: none !important;
}

.breadcrumbs a {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;

    float: none !important;
    min-height: auto !important;

    margin: 0 !important;
    padding: 0 24px 0 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    color: #687684 !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5 !important;
    text-decoration: none !important;

    transition: color 0.2s ease;
}

/* Полностью отключаем старые стрелки и кружки */

.breadcrumbs a::before {
    display: none !important;
    content: none !important;
}

.breadcrumbs a::after {
    content: "›" !important;

    position: absolute !important;
    top: 50% !important;
    right: 9px !important;
    left: auto !important;

    display: block !important;

    width: auto !important;
    height: auto !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    color: #aab4bd !important;
    font-size: 20px;
    font-weight: 300;
    line-height: 1;

    transform: translateY(-52%) !important;
}

/* Последний элемент — текущая страница */

.breadcrumbs a:last-child {
    padding-right: 0 !important;
    color: #eb9c1c !important;
    font-weight: 600;
    pointer-events: none;
}

.breadcrumbs a:last-child::after {
    display: none !important;
    content: none !important;
}

/* Наведение только как у обычной ссылки */

.breadcrumbs a:hover {
    color: #358bcb !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.breadcrumbs a.active {
    color: #eb9c1c !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Мобильная версия хлебных крошек */

@media (max-width: 767px) {
    .breadcrumbs {
        margin: 12px 0 22px !important;
        font-size: 13px;
    }

    .breadcrumbs a {
        padding-right: 20px !important;
        font-size: 13px;
    }

    .breadcrumbs a::after {
        right: 7px !important;
        font-size: 17px;
    }

    .breadcrumbs a:last-child {
        padding-right: 0 !important;
    }
}

/* =========================================================
   КОНТЕНТНЫЙ БЛОК
   ========================================================= */

/* Если весь текст идет сплошняком — делаем ощущение воздушности */
.main .col-lg-9 > *{
    position:relative;
    z-index:2;
}

/* Можно использовать дополнительный класс-обертку .vb-article */
.vb-article{
    padding:34px 38px;
    border-radius:28px;
    background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.92));
    box-shadow:var(--vb-shadow-md);
    border:1px solid rgba(255,255,255,.8);
    backdrop-filter:blur(10px);
}

/* =========================================================
   ТАБЛИЦЫ
   ========================================================= */

.table-responsive,
.vabank-table-wrap{
    position:relative;
    margin:30px 0 46px;
    overflow:hidden;
    border:1px solid var(--vb-line);
    border-radius:22px;
    background:linear-gradient(180deg, #ffffff, #fbfdff);
    box-shadow:var(--vb-shadow-md);
}

.table-responsive{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

table,
.vabank-table{
    width:100%;
    min-width:680px;
    border-collapse:separate;
    border-spacing:0;
    margin:0;
    background:#fff;
}

table thead,
.vabank-table thead{
    background:linear-gradient(135deg, var(--vb-blue), var(--vb-blue-light));
}

table th,
.vabank-table th{
    padding:18px 22px;
    color:#fff;
    font-size:13px;
    font-weight:700;
    text-align:left;
    letter-spacing:.05em;
    text-transform:uppercase;
    border:none;
}

table td,
.vabank-table td{
    padding:16px 22px;
    border:none;
    border-bottom:1px solid var(--vb-line-soft);
    color:var(--vb-text);
    font-size:15px;
    line-height:1.55;
    vertical-align:top;
}

table tr:nth-child(even) td,
.vabank-table tr:nth-child(even) td{
    background:#f8fbfe;
}

table tr:hover td,
.vabank-table tr:hover td{
    background:#eef7fc;
}

table td:first-child,
.vabank-table td:first-child{
    width:34%;
    color:#26333f;
    font-weight:700;
}

table tr:last-child td,
.vabank-table tr:last-child td{
    border-bottom:none;
}

/* =========================================================
   FAQ / АККОРДЕОН
   ========================================================= */

.faq-accordion,
.vabank-faq{
    display:grid;
    gap:14px;
    margin:24px 0 46px;
}

.faq-accordion details,
.vabank-faq details{
    overflow:hidden;
    border:1px solid var(--vb-line);
    border-radius:18px;
    background:linear-gradient(180deg, #ffffff, #fbfdff);
    box-shadow:var(--vb-shadow-sm);
    transition:all var(--vb-transition);
}

.faq-accordion details:hover,
.vabank-faq details:hover{
    transform:translateY(-2px);
    box-shadow:var(--vb-shadow-md);
    border-color:rgba(53,139,203,.25);
}

.faq-accordion details[open],
.vabank-faq details[open]{
    border-color:rgba(53,139,203,.38);
    box-shadow:0 18px 38px rgba(8,28,45,.10);
}

.faq-accordion summary,
.vabank-faq summary{
    position:relative;
    display:flex;
    align-items:center;
    min-height:68px;
    padding:18px 60px 18px 22px;
    color:#293744;
    font-size:16px;
    font-weight:700;
    line-height:1.45;
    cursor:pointer;
    list-style:none;
    user-select:none;
    background:
        linear-gradient(90deg, rgba(53,139,203,.07), transparent 62%);
}

.faq-accordion summary::-webkit-details-marker,
.vabank-faq summary::-webkit-details-marker{
    display:none;
}

.faq-accordion summary::before,
.faq-accordion summary::after,
.vabank-faq summary::before,
.vabank-faq summary::after{
    content:"";
    position:absolute;
    top:50%;
    right:22px;
    width:16px;
    height:2px;
    border-radius:4px;
    background:var(--vb-blue-light);
    transform:translateY(-50%);
    transition:transform var(--vb-transition);
}

.faq-accordion summary::after,
.vabank-faq summary::after{
    transform:translateY(-50%) rotate(90deg);
}

.faq-accordion details[open] summary,
.vabank-faq details[open] summary{
    color:var(--vb-blue);
    background:
        linear-gradient(90deg, rgba(53,139,203,.12), rgba(235,156,28,.06));
}

.faq-accordion details[open] summary::after,
.vabank-faq details[open] summary::after{
    transform:translateY(-50%) rotate(0);
}

.faq-accordion details > p,
.faq-accordion details > div,
.vabank-faq details > p,
.vabank-faq details > div{
    margin:0;
    padding:18px 22px 22px;
    border-top:1px solid var(--vb-line-soft);
    color:var(--vb-muted);
    background:#fff;
    font-size:15px;
    line-height:1.72;
}

/* =========================================================
   ФОРМЫ / КОММЕНТАРИИ
   ========================================================= */

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select,
.form-control{
    min-height:50px;
    border:1px solid var(--vb-line) !important;
    border-radius:14px !important;
    background:#fff !important;
    box-shadow:none !important;
    padding:12px 16px !important;
    color:#293744 !important;
    transition:all var(--vb-transition);
}

textarea{
    min-height:140px;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus{
    border-color:rgba(53,139,203,.45) !important;
    box-shadow:0 0 0 4px rgba(53,139,203,.10) !important;
    outline:none;
}

.comment,
.comment-body,
.comment-block{
    position:relative;
    padding:22px 24px !important;
    border:1px solid var(--vb-line) !important;
    border-radius:22px !important;
    background:linear-gradient(180deg, #ffffff, #fbfdff) !important;
    box-shadow:var(--vb-shadow-sm);
    transition:all var(--vb-transition);
}

.comment:hover,
.comment-body:hover,
.comment-block:hover{
    transform:translateY(-3px);
    box-shadow:var(--vb-shadow-md);
}

/* =========================================================
   МЕНЮ / САЙДБАР
   ========================================================= */

a.active.dropdown-item{
    color:var(--vb-orange) !important;
}

a.dropdown-item{
    color:rgb(74,74,74) !important;
    transition:all var(--vb-transition);
}

a.dropdown-item:hover{
    color:var(--vb-blue) !important;
}

#header .header-btn-collapse-nav{
    background:var(--vb-blue-dark);
    border-radius:12px;
    box-shadow:0 8px 20px rgba(7,31,49,.22);
}

nav.collapse{
    margin-top:20px;
}

/* =========================================================
   ФУТЕР
   ========================================================= */

#footer{
    margin-top:70px;
    position:relative;
    overflow:hidden;
}

#footer:before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top left, rgba(53,139,203,.18), transparent 28%),
        radial-gradient(circle at top right, rgba(235,156,28,.12), transparent 18%);
    pointer-events:none;
}

#footer .footer-copyright{
    background:linear-gradient(to top, #05131d, #0f4a75) !important;
    position:relative;
}

.footer__providers{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:10px 18px;
}

.footer__providers img{
    display:inline-block;
    margin:5px 10px 10px 10px;
    opacity:.78;
    filter:grayscale(20%);
    transition:all var(--vb-transition);
}

.footer__providers img:hover{
    opacity:1;
    transform:translateY(-3px);
    filter:none;
}

.foot_text{
    font-size:2.5em !important;
    font-weight:700;
    letter-spacing:-0.03em;
}

/* =========================================================
   МОБИЛКА
   ========================================================= */

@media (max-width: 991px){
    #header .header-nav-main:before{
        background:#fff !important;
    }

    #header .header-nav-main nav>ul>li>a.active{
        color:var(--vb-orange) !important;
        background:#fff;
    }

    #header .header-nav-main nav>ul li{
        border:none;
    }

    #header .header-nav.header-nav-links-side-header nav>ul>li.dropdown>.dropdown-item:before{
        opacity:0 !important;
    }

    .slider-container,
    .rev_slider_wrapper,
    .rev_slider{
        border-radius:0 0 18px 18px;
    }

    h1{
        font-size:32px !important;
        margin-bottom:30px !important;
    }

    h2{
        font-size:26px !important;
    }

    .vb-article{
        padding:24px 18px;
        border-radius:18px;
    }

    .faq-accordion summary,
    .vabank-faq summary{
        min-height:62px;
        padding:16px 50px 16px 16px;
        font-size:15px;
    }

    .faq-accordion details > p,
    .faq-accordion details > div,
    .vabank-faq details > p,
    .vabank-faq details > div{
        padding:16px;
        font-size:14px;
    }

    table th,
    table td,
    .vabank-table th,
    .vabank-table td{
        padding:14px 14px;
    }
}

@media (max-width: 767px){
    body,
    .main{
        font-size:15px !important;
    }

    .main p{
        font-size:15px;
    }

    h1{
        font-size:28px !important;
        padding:0 10px 18px !important;
    }

    h2{
        font-size:24px !important;
        margin:36px 0 18px !important;
    }

    .btn-slider{
        width:100%;
    }

    .table-responsive,
    .vabank-table-wrap{
        border-radius:16px;
    }

    .faq-accordion,
    .vabank-faq{
        gap:10px;
    }
}