.addNewLineGroop{
	margin: 10px 0;
}
.lineGroopDiv{
    border: 1px solid #d3d1d1;
    padding: 10px 0px 0px 10px;
}
.imgproctel{
  width: 200px;
}
.buttonDiv{
    padding: 7px 32px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: space-around;
}

.lineBotton{
	padding: 3px;
    width: 100%;
    display: inline-flex;
    flex-wrap: nowrap;
}
.bottonTg{
    width: 100%;
    margin: 0px 5px;
}
.lineBottonKn{
    width: 90%;
    display: flex;
}
.groop_shortcode {
    display: none;
}

.line_shortcode,
.add_shortcode {
    cursor: pointer;
}

.st_line_shortcode {
    margin: 0px 10px 0px 0px;
}

.shortcode_modal {
    width: 500px;
    height: 400px;
    max-width: 90%;
    overflow: auto;
    position: absolute;
    background: #ffffff;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
    z-index: 100000000000000000000;
    scrollbar-width: thin;
    scrollbar-color: #bfbfbf #f9f8f8;
}


.shortcode_info {
    position: absolute;
    right: 1px;
    z-index: 2;
    display: block;
    width: 33px;
    height: 33px;
    line-height: 32px;
    text-align: center;
    background: #cdcccc;
    cursor: pointer;
    bottom: 0px;
}

.shortcode_add {
    position: relative;
}

.shortcode_add input[type="text"] {
    padding-right: 43px;
}
.code_for_copy {
    cursor: pointer;
}
.shortcode-copied {
    margin-left: 5px;
    color: green;
}
/*
@media (max-width: 768px) {
    #modalService .modal-dialog {
        width: 100%;
        margin: 0;
    }

    #modalService .modal-content {
        border-radius: 0;
    }
}
*/

.for_rank{ font-size:10px}
.faq_mini {
    cursor: pointer
}

.faq_mini_text.active {
    display: block;
}

.vertical_delim {
    font-size: 16px;

}

.vertical_delim a {
    margin-top: 15px;
}

iframe {
    max-width: 100%;
}

.small_tarif_info {
    padding: 10px;
}

.small_pad_tb {
    padding: 10px 0;
}

.small_pad_rl {
    padding: 0 10px;
}

.small_pad {
    padding: 10px;
}

.c_red {
    color: #e74c3c !important;
}

.bread_crumbs {
    padding: 10px 0;
}

.ajax_style {
    border-bottom: dashed 1px #000;
    cursor: pointer
}

.cursor {
    cursor: pointer
}

.btn-vertical-margin {
    white-space: normal;
}

.action-btn-group {
    width: 120px;
}

.btn-getcourse {
    color: #fff;
    background-color: #1cc3b6;
    border-color: #16b1a5;
}

.btn-getcourse:hover {
    color: #fff;
    background-color: #16b1a5;
    border-color: #16b1a5;
}

.btn-amo {
    color: #fff;
    background-color: #006f9f;
    border-color: #025e86;
}

.btn-amo:hover {
    color: #fff;
    background-color: #025e86;
    border-color: #025e86;
}

.btn-bitrix {
    color: #fff;
    background-color: #b7db2a;
    border-color: #b7db2a;
}

.btn-bitrix:hover {
    color: #fff;
    background-color: #cfee52;
    border-color: #cfee52;
}

.btn-ss {
    color: #fff;
    background-color: #1380f6;
    border-color: #1380f6;
}

.btn-ss:hover {
    color: #fff;
    background-color: #439dff;
    border-color: #439dff;
}

.important {
    color: red;
    font-weight: bold;
    font-size: 1.8rem;
}

.checkbox label, .radio label {
    padding-left: 0px;
}

.step_info_full {
    padding-top: 20px;
    display: none;
}

.step_info_video {
    padding-top: 20px;
    display: none;
}


.for_copy {
    position: relative;
}

.btn_copy {
    position: absolute;
    top: 3px;
    right: 3px;
}

.modal-dialog.modal-lg {
    width: 90%;
}

@media (max-width: 768px) {
    .modal-dialog.modal-lg {
        width: 100%;
        margin-left: 0px;
    }
}

.tip_info {
    display: inline-block;
    padding-left: 0px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.5);
    cursor: help;
}

.fa-info-circle {
    border: 3px solid #fff;
    border-radius: 50%;
    z-index: 100;
    color: lightseagreen !important;
    position: relative;
}

.fa-info-circle:before {
    content: "\f059" !important;
}

.for_code {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.callout.bg-purple {
    border-color: #2c2c5f;
}

.inline {
    display: inline
}

.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mb-15 { margin-bottom: 15px; }
.icon-autopay { color: green; font-size: 22px; }

.h1, .h2, .h3, h1, h2, h3 {
    margin-bottom: 20px;
}


.table-account {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.table-account .text-box {
    width: auto;
    overflow: hidden; /* Скрываем всё, что выходит за рамки */
    background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 120px;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 1px 5px rgb(0 0 0 / 20%);
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
    font-size: 15px;
    max-width: 160px;
    min-width: 160px;
    margin: 0 0.5% 1% 0.5%;

}

.table-account .text-box img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 60px;
    object-fit: contain;
    display: block;
}

@media (max-width: 650px) {
    .table-account .text-box {

        height: 110px;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        padding: 10px;

        font-size: 16px;
        max-width: 48%;
        min-width: 48%;
        margin: 0 1% 2% 1%;
        word-break: break-all;
    }
}


.end_line {
    -webkit-box-shadow: 0px -3px 5px -5px rgba(34, 60, 80, 1) inset;
    -moz-box-shadow: 0px -3px 5px -5px rgba(34, 60, 80, 1) inset;
    box-shadow: 0px -3px 5px -5px rgba(34, 60, 80, 1) inset;

}

/*Выпадающее меню*/
.dropdown-menu-vakas {
    padding: 10px 20px 20px 20px !important;
    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
}

.dropdown-menu-vakas li a {
    color: #777 !important;
    background-color: #f4f4f4 !important;

}

.dropdown-menu-vakas .btn-flat {
    color: #fff !important;
    background-color: #3c8dbc !important;
    border-color: #367fa9 !important;
}

.dropdown-menu-vakas .btn-default {
    padding: 5px 10px !important;
}

.dropdown-menu-vakas .data-tarif {
    color: #00c0ef;
}

.dropdown-menu-vakas .base-tarif {
    background-color: rgba(0, 166, 90, 0.2);
    padding: 2px 5px 5px 10px;
    margin-bottom: 15px;
}

.flex-tarif {
    display: flex;
!important;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.btn-icon-container {
    display: flex; /* Горизонтальное размещение элементов */
    flex-wrap: wrap; /* Перенос на следующую строку, если не хватает места */
    gap: 5px; /* Зазор между блоками */
}

.btn-icon {
    position: relative;
    height: 34px; /* Фиксируем высоту блока */
    width: 103px;
    display: flex; /* Для центрирования изображения */
    align-items: center;
    justify-content: center;
}

.btn-icon img {
    max-height: 100%; /* Изображение не превышает высоту родителя */
    max-width: 100%; /* Изображение масштабируется пропорционально */
    object-fit: contain; /* Сохраняем пропорции изображения */
}

.hr-small {
    margin: 10px 0
}

.demo-a {
    background-color: green !important;
}

@media (max-width: 650px) {
    .nav-tabs > li, .nav-tabs-custom > .nav-tabs > li {
        /*      width: 100% !important;*/
    }

    .nav-tabs-custom > .nav-tabs > li > a {
        /*    font-weight: 600!important;*/
    }
}


.info_ico {
    margin-left: 32px !important;
    margin-right: 32px !important;

    position: absolute;
    top: 20px;
    right: -8px;
    border-radius: 20px;
    padding: 9px 11px;
    line-height: 1;
    font-size: 20px;
    background-color: #F2F5F5;

    -webkit-transition: all 30ms ease-in-out 15ms;
    transition: all 30ms ease-in-out 15ms;

}

.info_ico:hover {
    -webkit-box-shadow: 0 0 0 3px rgb(49 193 120 / 20%);
    box-shadow: 0 0 0 3px rgb(49 193 120 / 20%);
}

.info_ico.active {
    background-color: white;
    -webkit-box-shadow: 0 0 0 3px rgb(49 193 120 / 20%);
    box-shadow: 0 0 0 3px rgb(49 193 120 / 20%);
}

.info_ico:hover:after, .info_ico:active:after {
    content: '';
    position: absolute;

    right: 1px;
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid \9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    -webkit-transition: all 60ms ease-in-out 30ms;
    transition: all 60ms ease-in-out 30ms;
    top: 19px !important;
}

/*.info_ico:active {
    -webkit-box-shadow: 0 0 0 1px #31c178, 0 0 0 4px rgba(49, 193, 120, 0.2);
    box-shadow: 0 0 0 1px #31c178, 0 0 0 4px rgba(49, 193, 120, 0.2);
}*/

#relevantKbHtml {
    min-width: 320px;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: transparent;
    position: absolute;
    left: auto !important;
    right: 8px;
    top: 58px !important;
    z-index: 110;


}

.relevant-kb-content {
    min-width: 280px;
    position: relative;
    top: 23px;
    left: -14px;
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    -webkit-box-shadow: 0px 5px 15px rgb(0 0 0 / 15%);
    box-shadow: 0px 5px 15px rgb(0 0 0 / 15%);
    border: 2px solid rgb(49 193 120 / 20%);
}

.relevant-kb-content h5 {
    font-weight: 600;
}

.relevant-kb-content:before {
    border: 16px solid transparent;
    border-bottom: 16px solid rgb(49 193 120 / 20%);
    content: '';
    position: absolute;
    right: 8px;
    top: -32px;
}

.del-div {
    padding-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 650px) {
    .del-contact-mounth {
        max-width: 285px;
        flex-wrap: inherit;
        white-space: inherit;
        margin-bottom: 10px;
    }
}

.hr2 {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

.menu-lk {
    position: relative;
    height: 205px;
    padding: 25px 25px 20px 25px;
    margin: 0px 0 20px 0;
    font-size: 16px;
    line-height: 18px;
    border-radius: 8px;
    border: 2px solid rgb(226, 226, 226);
    background: rgb(255, 255, 255);
    box-shadow: rgb(100 151 203 / 21%) 0px 0px 7px 0px;

}


.menu-lk .title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0px 0 5px 0;

    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
}

/*.menu-lk img {
    margin: 10px auto;
    max-width: 26px;
}*/
.video-lk-two {
    padding-left: 25px;
}

.menu-lk .img {

    max-width: 35px;
}

.menu-lk .img2 {

    max-width: 280px;
    width: 100%;
    margin: 10px 0;
    display: block;
}

.menu-lk .small-text {
    font-size: 14px;
    line-height: 14px;
}

.menu-lk2 {
    height: 380px;
}

.video-lk {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0;
    height: auto;
    text-align: left;
}

.video-lk iframe {
    border-radius: 10px;
    height: 156px;
    margin-top: 10px;
    max-width: 310px;
}

.menu-lk .title2 {
    text-align: left;
    margin-bottom: 20px;

}

@media (max-width: 1100px) {
    .menu-lk {
        height: 296px;
    }

    .video-lk {
        flex-direction: column;
        align-items: center;
        text-align: left;
    }

    .video-lk-two {
        margin-top: 20px;
        padding-left: 0px;
    }

}

@media (max-width: 1000px) {

    .menu-lk {
        padding: 25px;
        height: auto;
    }
}

.balance-body {
    padding-bottom: 23px !important;
}
.balance-body a.btn {
    margin-top: 8px;
}
.balance-body hr {
    border-color: #eee;
}
.balance-body a {
    color: #0c66b2;
    transition: color 0.15s ease;
}
.balance-body a:hover {
    color: #18a2e0;
}

.dop_a_cond {
    border-bottom: 1px dotted #3c8dbc;
}

.dop_cond_div {
    margin: 20px 0;
    padding: 20px;
    background-color: antiquewhite;
}

.dop_cond_div2 {
    background-color: inherit;
    padding: 0;
    color: rgba(0, 0, 0, 0.5);
    font-size: 13px;
    line-height: 24px;
    margin-top: 10px;
}

.delete {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    height: 59px;
}

.table-white {
    background-color: #fff !important;
}

.table-white th {
    color: #333;
    font-size: 12px;
}

.main-header .logo .logo-lg img {
    max-width: 145px;
    margin: 0 auto;
    width: 100%;
}

/******base tags*****/

.addTag,
.removeTag,
.addModalTag {
    cursor: pointer
}

input.form-control.is-invalid {
    border-color: #dc3545 !important;
    padding-right: 2.25rem;
    background-image: url(data:image/svg+xml,%3csvg xmlns= 'http://www.w3.org/2000/svg' width= '12' height= '12' fill= 'none' stroke= '%23dc3545' viewBox= '0 0 12 12' %3e%3ccircle cx= '6' cy= '6' r= '4.5' /%3e%3cpath stroke-linejoin= 'round' d= 'M5.8 3.6h.4L6 6.5z' /%3e%3ccircle cx= '6' cy= '8.2' r= '.6' fill= '%23dc3545' stroke= 'none' /%3e%3c/svg%3e);
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-valid {
    border-color: #28a745 !important;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.mr5 {
    margin-right: 5px;
}

.ml3 {
    margin-left: 3px;
}

.erraddtag {
    margin-bottom: 5px;
    display: block;
    color: red;
}

.addTag {
    display: inline-block;
    padding: 5px;
    margin-bottom: 5px;
}

.atag {
    cursor: pointer;
}

/*Теги*/
.teg-sm-all {
    margin-bottom: 30px;
}

.teg-sm {
    -webkit-box-shadow: 0 1px 1px rgba(0 0 0 / 10%);
    box-shadow: 0 1px 0px rgba(0 0 0 / 10%);
    background: #fafbfc;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    padding: 2px 5px;
    color: rgba(0 0 0 / 60%);
    margin-right: 2px;
    margin-bottom: 5px;
    display: inline-block;
}

.teg-sm:hover, .teg-sm.active {
    -webkit-box-shadow: 0 1px 1px rgba(0 0 0 / 10%);
    box-shadow: 0 1px 0px rgba(0 0 0 / 10%);
    background: #b7c5db;
    border: 1px solid #85a0cc;
    color: #19212f;

}

.teg-sm-chois {
    background: #ecf0f6;
    border: 1px solid #b7c5db;
    color: #728baf;
    margin-bottom: 3px;
    display: inline-block;
    border-radius: 3px;
    padding: 2px 5px;
}

.teg-sm-add {
    -webkit-box-shadow: 0 1px 1px rgba(0 0 0 / 10%);
    box-shadow: 0 1px 0px rgba(0 0 0 / 10%);
    background: #fff;
    border: 1px solid #f4f4f4;
    border-radius: 3px;
    padding: 2px 5px;
    color: rgba(0 0 0 / 60%);
    margin-right: 0px;
    display: inline-block;
}

@media (max-width: 650px) {
    .nav-tabs .sm-width {
        float: none !important;
    }

    .nav-tabs .font-sm {
        font-size: 12px !important;
    }

    .btn-width {
        width: 100%;
        margin-bottom: 3px;
    }
}

.btn-group2 {
    padding-top: 20px;
    display: inline-flex !important;

}

.btn-group3 {
    padding-top: 0px;


}

.div-flex {
    display: flex;
    flex-direction: row;
}

.div-flex-left {
    width: 49%;
    margin-right: 1%;
}

.div-flex-right {
    width: 50%;
    margin-left: 1%;
}

@media (max-width: 760px) {
    .div-flex {
        flex-direction: column;
    }

    .div-flex-left {
        width: 100%;
        margin: 0%;
        order: 2;
    }

    .div-flex-right {
        width: 100%;
        margin: 0%;
        order: 1;
    }
}

.info-text {
    background-color: #f6f6f6;
    font-size: 13px;
    padding: 20px;
}

.box-header > .fa, .box-header > .glyphicon, .box-header > .ion, .box-header .box-title {
    font-size: 15px !important;
}

@media (max-width: 760px) {
    .info-text {
        margin-bottom: 15px;
    }

    .btn-m {
        margin-bottom: 15px;
    }

    .box-body {
        padding: 10px 20px 30px 20px !important;
    }

    .h3, h3 {
        font-size: 20px !important;
    }

    .info_ico {
        top: 7px;
        right: -25px;

        padding: 4px 6px;
        line-height: 1;
        font-size: 17px;

    }

}


.pagination {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin: 0px;
}

@media (max-width: 991.98px) {
    .pagination {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

.pagination__wrap {
    background-color: #f9f9f9;
    border-radius: .75rem
}

.pagination__item {
    list-style: none;
    margin: 0;
    padding: 0
}

.pagination__link {
    border-radius: .5rem;
    color: #000;
    display: block;
    font: 400 14px/20px Rubik, arial, sans-serif;
    font-weight: 700;
    padding: 1rem 2rem;
    text-align: center;
    -webkit-transition: background-color .25s ease-in-out, color .25s ease-in;
    transition: background-color .25s ease-in-out, color .25s ease-in
}

@media (max-width: 991.98px) {
    .pagination__link {
        padding: .5rem 1rem
    }
}

.pagination__link:hover {
    background-color: #999;
    color: #fff
}

.pagination__link.active {
    background-color: #555;
    color: #fff
}

.d-flex, .flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important
}

.badge_border {
    border: 1px solid;
}

.pre {
    display: block;
    padding: 15px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}


.banner-sale {
    background-color: #72c181;
    padding: 15px 5px;
    color: #000;
    font: 700 18px/22px "Rubik", arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-sale .btn {
    margin-left: 10px;
    height: 30px !important;
    background-color: brown;
}

@media (max-width: 991.98px) {
    /* .banner-sale{
       display: none;
     }*/
}

.one_by_one {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.align-items-center {
    display: flex;
    align-items: center;
}

.align-items-end-center {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.mw-10 { max-width: 10%; }
.mw-20 { max-width: 20%; }
.mw-30 { max-width: 30%; }
.mw-40 { max-width: 40%; }
.mw-50 { max-width: 50%; }
.mw-60 { max-width: 60%; }
.mw-70 { max-width: 70%; }
.mw-80 { max-width: 80%; }
.mw-90 { max-width: 90%; }
.mw-100 { max-width: 100%; }

/* Контейнер для выпадающего меню */
.dropdown-base {
    display: inline-block;
}

.dropdown-bc {
    top: 90%;
}

/* Стили для иконки */
.dropdown-icon {
    cursor: pointer;
    margin-left: 10px; /* Отступ слева */
    transition: color 0.3s ease;
}

/* Изменение цвета при наведении */
.dropdown-icon:hover {
    color: #27435e;
}

/* Показываем подменю при наведении */
.dropdown-base:hover .dropdown-menu {
    display: block;
}

/* Для пунктов меню с классом centered-item */
.dropdown-menu .centered-item a {
    display: flex; /* Flexbox для выравнивания */
    align-items: center; /* Центрирование по вертикали */
    justify-content: center; /* Центрирование по горизонтали */
    padding: 10px; /* Отступы */
    text-decoration: none;
    color: #333; /* Цвет текста */
}

/* Стили для изображений */
.dropdown-menu .centered-item a img {
    max-height: 20px; /* Фиксированная высота для изображений */
    max-width: auto; /* Автоматическая ширина */
    margin: 0; /* Убираем отступы вокруг изображения */
}

/* Эффект при наведении */
.dropdown-menu .centered-item a:hover {
    background-color: #f2f2f2; /* Подсветка при наведении */
    color: #000; /* Цвет текста при наведении */
}

.dropdown-menu.dropdown-bc .divider {
    margin: 1px 0;

}

/* ========================================
   Дашборд ЛК (account/index)
   ======================================== */

.vkt-dash { display: flex; margin: 0 -5px; flex-wrap: wrap; gap: 0; }
.vkt-dash .vkt-main { padding: 0 5px; width: 65%; min-width: 0; }
.vkt-dash .vkt-side { padding: 0 5px; width: 35%; min-width: 0; }

.vkt-card-sm {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e8ecf0;
    padding: 20px 22px;
    margin-bottom: 16px;
    transition: box-shadow .2s;
}
.vkt-card-sm:hover { box-shadow: 0 4px 18px rgba(0,0,0,.05); }

.vkt-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 6px;
    line-height: 1;
}
.vkt-label-green  { background: #e6f9f0; color: #0d9e5c; }
.vkt-label-orange { background: #fff4e5; color: #d97706; }
.vkt-label-red    { background: #fef2f2; color: #dc2626; }

/* Тариф — компактная полоса */
.vkt-tarif-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 12px;
    padding: 14px 22px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.vkt-tarif-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.vkt-tarif-bar-label {
    font-size: 13px;
    font-weight: 600;
    color: #7a8599;
    white-space: nowrap;
}
.vkt-tarif-bar-name {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    white-space: nowrap;
}
.vkt-tarif-bar-sep {
    width: 1px;
    height: 20px;
    background: #e0e4ea;
}
.vkt-tarif-bar-days {
    font-size: 12px;
    font-weight: 600;
    color: #7a8599;
    white-space: nowrap;
}
.vkt-tarif-bar-days.urgent { color: #dc2626; }
.vkt-tarif-bar-usage {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 120px;
}
.vkt-tarif-bar-usage-text {
    font-size: 13px;
    color: #5a6577;
    white-space: nowrap;
}
.vkt-tarif-bar-progress {
    flex: 1;
    height: 7px;
    background: #f1f3f6;
    border-radius: 6px;
    overflow: hidden;
    min-width: 60px;
}
.vkt-tarif-bar-fill {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #4f8cf7, #6c5ce7);
    transition: width .4s ease;
}
.vkt-tarif-bar-fill.warn { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.vkt-btn-manage-sm {
    display: inline-block;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #4f8cf7, #6c5ce7);
    border: none;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    margin-left: auto;
    transition: opacity .2s;
}
.vkt-btn-manage-sm:hover { opacity: .88; color: #fff; text-decoration: none; }

.vkt-notify {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 14px;
    font-size: 14px;
    color: #92400e;
}
.vkt-notify.vkt-notify-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}
.vkt-notify.vkt-notify-discount {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}
.vkt-notify.vkt-notify-discount i { color: #16a34a; margin-right: 4px; }
.vkt-notify.vkt-notify-discount b { color: #15803d; }
.vkt-notify-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.vkt-notify .vkt-notify-icon { background: #fef3c7; color: #d97706; }
.vkt-notify.vkt-notify-danger .vkt-notify-icon { background: #fee2e2; color: #dc2626; }
.vkt-notify a { color: inherit; font-weight: 600; text-decoration: underline; }

.vkt-side-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 10px;
    line-height: 1.3;
}

.vkt-side-text {
    font-size: 13px;
    color: #5a6577;
    line-height: 1.55;
    margin: 0;
}
.vkt-side-text a { color: #4f8cf7; font-weight: 600; }

.vkt-side-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.vkt-head-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.vkt-head-row .vkt-side-title { margin: 0; }
.vkt-head-row .vkt-side-icon { margin: 0; }

.vkt-section-title {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 30px 0 18px;
}

.vkt-link-card {
    cursor: pointer;
}

/* Промо-плашки (партнёрка + польза) */
.vkt-promo-row {
    display: flex;
    gap: 12px;
    margin-bottom: 22px;
}
.vkt-promo-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #fff;
    border-radius: 10px;
    padding: 14px 18px;
    transition: box-shadow .2s, transform .15s;
}
.vkt-promo-card:hover {
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
}
.vkt-promo-blue {
    background: linear-gradient(135deg, #38bdf8, #3b82f6);
}
.vkt-promo-blue:hover { box-shadow: 0 6px 24px rgba(59,130,246,.3); }
.vkt-promo-purple {
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
}
.vkt-promo-purple:hover { box-shadow: 0 6px 24px rgba(124,58,237,.3); }
.vkt-promo-card .vkt-head-row { margin-bottom: 0; }
.vkt-promo-card .vkt-side-icon { width: 30px; height: 30px; font-size: 13px; }
.vkt-promo-card .vkt-side-title { font-size: 13px; }
.vkt-promo-card .vkt-promo-link {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #fde68a;
    border-bottom: 1px dashed rgba(253,230,138,.6);
    display: inline-block;
    width: fit-content;
}

/* Мини-обучение — превью видео */
.vkt-video-thumb {
    display: block;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 4px;
}
.vkt-video-thumb img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}
.vkt-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: rgba(0,0,0,.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    transition: background .2s;
}
.vkt-video-thumb:hover .vkt-video-play { background: rgba(239,68,68,.9); }
.vkt-video-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,.6);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
}
.vkt-btn-yt {
    display: inline-block;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #ef4444;
    border-radius: 7px;
    text-decoration: none;
}
.vkt-btn-yt:hover { opacity: .85; color: #fff; text-decoration: none; }
.vkt-btn-vk {
    display: inline-block;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #4a76a8;
    border-radius: 7px;
    text-decoration: none;
}
.vkt-btn-vk:hover { opacity: .85; color: #fff; text-decoration: none; }

/* Telegram — объединённый блок */
.vkt-tg-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vkt-tg-group {}
.vkt-tg-label {
    font-size: 11px;
    font-weight: 600;
    color: #7a8599;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 4px;
}
.vkt-tg-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f0f9ff;
    color: #0369a1;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
}
.vkt-tg-link:hover { background: #e0f2fe; color: #0369a1; text-decoration: none; }
.vkt-tg-link i { font-size: 14px; flex-shrink: 0; }

/* Стандартные связки — карточки */
.vkt-ready-grid { display: flex; flex-wrap: wrap; }
.vkt-ready-grid > [class*="col-"] { display: flex; }
.vkt-ready-card {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 12px;
    padding: 22px;
    margin-bottom: 16px;
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s;
}
.vkt-ready-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.06); }
.vkt-ready-icons {
    display: flex;
    align-items: center;
    gap: 6px;
}
.vkt-ready-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.vkt-ready-arrow {
    font-size: 12px;
    color: #c4cad3;
}
.vkt-ready-desc {
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-top: 4px;
}
.vkt-ready-link {
    margin-top: auto;
    padding-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #3b82f6;
}
.vkt-ready-card:hover .vkt-ready-link { color: #2563eb; }

/* Форма регистрации (account/first) */
.vkt-form-group {
    margin-bottom: 20px;
}
.vkt-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}
.vkt-input {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    color: #1a1a2e;
    transition: border-color .2s, box-shadow .2s;
    height: auto;
}
.vkt-input:focus {
    border-color: #4f8cf7;
    box-shadow: 0 0 0 3px rgba(79,140,247,.15);
    outline: none;
}

@media (max-width: 991px) {
    .vkt-dash { flex-direction: column; }
    .vkt-dash { margin: 0 !important; }
    .vkt-dash .vkt-main { width: 100% !important; padding: 0 !important; }
    .vkt-dash .vkt-side { padding: 0 !important; }
    .vkt-dash .vkt-side { width: 100% !important; order: 2; }
    .vkt-ready-wrap { order: 3; }
    .vkt-tarif-bar { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 14px !important; }
    .vkt-tarif-bar-left { flex-wrap: wrap; gap: 8px; }
    .vkt-tarif-bar-name { font-size: 14px; }
    .vkt-tarif-bar-sep { display: none; }
    .vkt-btn-manage-sm { margin-left: 0; white-space: normal; max-width: 100%; }
    .vkt-promo-row { flex-direction: column; }
    .vkt-pay-row { flex-direction: column; }
    .vkt-first-card { padding: 20px 16px; }
    .vkt-first-btn { padding: 8px 12px; font-size: 12px; white-space: normal; max-width: 100%; box-sizing: border-box; }
    .modal-body iframe { max-width: 100%; height: auto; aspect-ratio: 16/9; }
    .vkt-notify { flex-direction: row; gap: 10px; }
    .vkt-notify-icon { flex-shrink: 0; }
    /* Партнёрская страница */
    .vkt-dash-partner .vkt-main { display: block !important; width: 100% !important; padding: 0 !important; }
    .vkt-dash-partner .vkt-side { width: 100% !important; padding: 0 !important; }
    .vkt-partner-links { flex-direction: column; }
    .vkt-partner-links .vkt-card-sm { flex: none !important; min-width: 0 !important; }
    .vkt-mini-table { display: block; overflow-x: auto; }
    .vkt-mini-table th, .vkt-mini-table td { white-space: nowrap; font-size: 11px; padding: 6px 6px; }
    section.content { padding: 15px 10px !important; }
    .vkt-dd-notif-text { word-break: break-word; }
    .vkt-dd-notif { gap: 8px; }
}

/* ========================================
   Форма регистрации (first.php) — утилиты
   ======================================== */

/* Партнёрская страница */
.vkt-dash-partner { gap: 0; }
.vkt-dash-partner .vkt-main { width: 76%; min-width: 0; padding-right: 16px; }
.vkt-dash-partner .vkt-side { width: 24%; min-width: 0; }
.vkt-partner-links {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 16px;
}

.vkt-first-card { padding: 32px 36px; }
.vkt-first-title { margin-top: 0; margin-bottom: 8px; }
.vkt-first-subtitle { margin-bottom: 28px; }
.vkt-first-btn { margin-left: 0; padding: 12px 36px; font-size: 14px; }

.vkt-icon-blue    { background: #e0f2fe; color: #0284c7; }
.vkt-icon-green   { background: #ecfdf5; color: #059669; }
.vkt-icon-orange  { background: #fef3c7; color: #d97706; }
.vkt-icon-purple  { background: #f3e8ff; color: #7c3aed; }

/* ========================================
   Страница оплаты (pay/index.php)
   ======================================== */

.none { display: none; }

.vkt-dash-pay { gap: 0; }
.vkt-dash-pay .vkt-main { width: 78%; min-width: 0; }
.vkt-dash-pay .vkt-side { width: 22%; min-width: 0; }

.vkt-pay-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    align-items: stretch;
}
.vkt-pay-row-item { flex: 1; min-width: 0; }
.vkt-pay-row-item .vkt-card-sm { margin-bottom: 0; height: 100%; }
.vkt-pay-row-tarif { flex: 2; }
.vkt-pay-row-balance { flex: 1; }

.vkt-card-yellow {
    background: #fffbeb !important;
    border: 1px solid #fde68a;
}
.vkt-card-yellow hr { border-color: #fde68a; }

.vkt-card-compact { padding: 14px 16px; }
.vkt-card-compact .vkt-side-text { font-size: 13px; margin-bottom: 2px; }
.vkt-card-compact .vkt-head-row { margin-bottom: 8px; }

.vkt-sidebar-link {
    display: block;
    padding: 6px 0;
    font-size: 13px;
    color: #4f8cf7;
    border-bottom: 1px solid #f1f3f6;
}
.vkt-sidebar-link:last-child { border-bottom: none; }
.vkt-sidebar-link:hover { color: #2563eb; text-decoration: none; }
.vkt-sidebar-link i { width: 18px; text-align: center; color: #7a8599; }

.vkt-pay-name {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 12px 0 4px;
    line-height: 1.3;
}
.vkt-pay-date {
    font-size: 13px;
    color: #5a6577;
    margin-bottom: 8px;
}
.vkt-pay-limits {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    padding: 4px 0;
}
.vkt-pay-limits b { color: #0c66b2; }

.vkt-pay-expired {
    font-size: 16px;
    font-weight: 600;
    color: #dc2626;
    margin: 12px 0;
}

.vkt-tarif-card { padding: 28px 32px; }
.vkt-tarif-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.vkt-tarif-card-name {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
}
.vkt-tarif-card-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #3a3f4b;
    border-top: 1px solid #e9ecef;
    padding-top: 14px;
    margin-bottom: 20px;
}
.vkt-tarif-card-stats b { color: #0c66b2; }

.vkt-tarif-card-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    justify-content: flex-start;
    text-align: left;
}
.vkt-tarif-card-buttons .vkt-btn-manage-sm {
    padding: 12px 28px;
    font-size: 15px;
    border-radius: 10px;
    margin-left: 0;
}
.vkt-btn-accent {
    background: linear-gradient(135deg, #7c5cfc 0%, #6366f1 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(99,102,241,.3);
}
.vkt-btn-accent:hover {
    background: linear-gradient(135deg, #6d4de8 0%, #4f46e5 100%) !important;
    box-shadow: 0 6px 20px rgba(99,102,241,.4);
    transform: translateY(-1px);
}
.vkt-btn-accent i { margin-right: 6px; }

.vkt-tarif-card-footer {
    border-top: 1px solid #e9ecef;
    padding-top: 14px;
    text-align: center;
}
.vkt-tarif-card-change {
    font-size: 14px;
    color: #5a6577;
    border-bottom: 1px dashed #adb5bd;
    text-decoration: none;
}
.vkt-tarif-card-change:hover { color: #2563eb; border-color: #2563eb; text-decoration: none; }

.vkt-pay-future {
    font-size: 13px;
    color: #5a6577;
    padding: 6px 10px;
    background: #f0f7ff;
    border-radius: 6px;
    border-left: 3px solid #4f8cf7;
    margin-top: 6px;
}

/* Expired tariff card */
.vkt-tarif-card-expired {
    border-left: 4px solid #dc2626;
    background: linear-gradient(135deg, #fff 0%, #fef2f2 100%);
}
.vkt-tarif-expired-info {
    border-top: 1px solid #fecaca;
    padding-top: 14px;
    margin-bottom: 16px;
}
.vkt-tarif-expired-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 14px;
}
.vkt-tarif-expired-label { color: #7a8599; }
.vkt-tarif-expired-value { font-weight: 600; color: #1a1a2e; }
.vkt-tarif-expired-cta {
    border-top: 1px solid #fecaca;
    padding-top: 16px;
    text-align: center;
}
.vkt-tarif-expired-cta p {
    color: #7a8599;
    font-size: 14px;
    margin: 0 0 12px;
}

/* Overage comparison card */
.vkt-overage-card { padding: 28px 32px; }
.vkt-overage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
.vkt-overage-item {
    background: #f8fafc;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}
.vkt-overage-label {
    font-size: 12px;
    color: #7a8599;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 6px;
}
.vkt-overage-value {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 4px;
}
.vkt-overage-value.vkt-overage-over { color: #dc2626; }
.vkt-overage-value.vkt-overage-ok { color: #16a34a; }
.vkt-overage-sub {
    font-size: 12px;
    color: #9ca3af;
}
.vkt-overage-total {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 16px;
}
.vkt-overage-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    color: #1a1a2e;
    margin-bottom: 10px;
}
.vkt-overage-total-sum {
    font-weight: 700;
    font-size: 18px;
    color: #dc2626;
}
.vkt-overage-total.vkt-overage-total-ok {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #166534;
    font-size: 14px;
    font-weight: 600;
}
.vkt-overage-total-ok i { margin-right: 6px; color: #16a34a; }
.vkt-overage-recommend {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #166534;
}
.vkt-overage-recommend i { font-size: 18px; color: #16a34a; margin-top: 2px; flex-shrink: 0; }
.vkt-overage-recommend.vkt-overage-recommend-neutral {
    background: #f0f7ff;
    border-color: #bfdbfe;
    color: #1e40af;
}
.vkt-overage-recommend-neutral i { color: #3b82f6; }
.vkt-overage-saving {
    color: #16a34a;
    font-weight: 700;
}
.vkt-overage-footer {
    border-top: 1px solid #e9ecef;
    padding-top: 12px;
    margin-top: 16px;
}

/* Tarifs page */
.vkt-tarifs-top {
    margin-bottom: 20px;
}
.vkt-tarifs-plan-row {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.vkt-tarifs-plan-row .vkt-tarifs-plan-head { margin-bottom: 0; }
.vkt-tarifs-plan-row .vkt-tarifs-plan-desc { margin-bottom: 0; }
.vkt-tarifs-plan-row .vkt-tarifs-features { margin-bottom: 0; }
.vkt-tarifs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}
.vkt-tarifs-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}
.vkt-tarifs-plan {
    background: #f8fafc;
    border-radius: 12px;
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.vkt-tarifs-plan-head {
    margin-bottom: 8px;
}
.vkt-tarifs-plan-name {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 4px;
}
.vkt-tarifs-plan-price {
    font-size: 24px;
    font-weight: 700;
    color: #4f8cf7;
}
.vkt-tarifs-plan-price span {
    font-size: 14px;
    font-weight: 400;
    color: #7a8599;
}
.vkt-tarifs-plan-desc {
    font-size: 13px;
    color: #7a8599;
    margin-bottom: 14px;
}
.vkt-tarifs-features {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}
.vkt-tarifs-features li {
    font-size: 13px;
    color: #3a3f4b;
    padding: 4px 0;
}
.vkt-tarifs-features li i {
    color: #16a34a;
    margin-right: 6px;
    font-size: 12px;
}
.vkt-tarifs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: auto;
}
.vkt-tarifs-table thead th {
    text-align: left;
    font-weight: 600;
    color: #7a8599;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 8px 10px;
    border-bottom: 2px solid #e2e8f0;
}
.vkt-tarifs-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid #e9ecef;
    color: #3a3f4b;
}
.vkt-tarifs-table tbody tr:last-child td { border-bottom: none; }
.vkt-tarifs-table tbody tr:hover { background: #eef4ff; }
.vkt-tarifs-current {
    background: #eff6ff !important;
    border-left: 3px solid #4f8cf7;
}
.vkt-tarifs-current td:first-child { padding-left: 7px; }
.vkt-tarifs-note {
    background: #f8fafc;
    border-radius: 10px;
    padding: 16px 20px;
    font-size: 13px;
    color: #5a6577;
    line-height: 1.6;
    margin-bottom: 24px;
}
.vkt-tarifs-note p { margin: 0 0 8px; }
.vkt-tarifs-note p:last-child { margin-bottom: 0; }
.vkt-tarifs-discounts { margin-top: 4px; }
.vkt-tarifs-discount-grid {
    display: flex;
    gap: 16px;
}
.vkt-tarifs-discount-item {
    flex: 1;
    background: #f8fafc;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    border: 1px solid #e9ecef;
}
.vkt-tarifs-discount-period {
    font-size: 13px;
    color: #7a8599;
    margin-bottom: 4px;
}
.vkt-tarifs-discount-value {
    font-size: 28px;
    font-weight: 700;
    color: #16a34a;
}
.vkt-tarifs-discount-best {
    background: #ecfdf5;
    border-color: #bbf7d0;
}
.vkt-tarifs-plan-vat {
    font-size: 14px;
    color: #7a8599;
    font-weight: 400;
}
.vkt-tarifs-vat-cell {
    color: #5a6577;
    font-weight: 600;
}
.vkt-overage-total-vat {
    font-size: 13px;
    color: #7a8599;
    margin-bottom: 6px;
}
.vkt-overage-total-vat span { font-weight: 500; }

/* Overage comparison table */
.vkt-overage-compare {
    background: #f8fafc;
    border-radius: 10px;
    padding: 16px 20px;
    margin-top: 16px;
}
.vkt-overage-compare-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 12px;
}
.vkt-overage-compare-title i { color: #4f8cf7; margin-right: 6px; }
.vkt-overage-compare-table { font-size: 14px; }
.vkt-overage-compare-table thead th { font-size: 12px; }
.vkt-overage-compare-note {
    font-size: 11px;
    color: #7a8599;
    font-weight: 400;
}
.vkt-overage-compare-best {
    background: #ecfdf5 !important;
}
.vkt-overage-compare-badge {
    display: inline-block;
    background: #16a34a;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.vkt-overage-compare-hint {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 10px;
}

.vkt-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.vkt-mini-table th {
    text-align: left;
    font-weight: 600;
    color: #7a8599;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 6px 8px;
    border-bottom: 2px solid #e9ecef;
}
.vkt-mini-table td {
    padding: 8px 8px;
    border-bottom: 1px solid #f1f3f6;
    color: #3a3f4b;
}
.vkt-mini-table tr:last-child td { border-bottom: none; }

.vkt-btn-block {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 8px;
}
.vkt-btn-outline {
    background: transparent !important;
    border: 1px solid #4f8cf7 !important;
    color: #4f8cf7 !important;
    box-shadow: none !important;
}
.vkt-btn-outline:hover {
    background: rgba(79,140,247,0.08) !important;
    color: #2563eb !important;
    text-decoration: none;
}

.vkt-btn-muted {
    background: #e9ecef !important;
    color: #5a6577 !important;
    border: 1px solid #d1d5db !important;
    box-shadow: none !important;
}
.vkt-btn-muted:hover {
    background: #dee2e6 !important;
    color: #3a3f4b !important;
    text-decoration: none;
}

.vkt-icon-red { background: #fef2f2; color: #dc2626; }

.vkt-pay-balance {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a2e;
}
.vkt-pay-balance-currency {
    font-size: 14px;
    color: #7a8599;
    font-weight: 400;
}

.text-grey {
    color: #888;
    font-size: 13px;
    line-height: 1.5;
    font-weight: normal !important;
}

.pay_form { max-width: 100%; }

.pay_tarif {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    margin-bottom: 20px;
    gap: 12px;
}

.pay-box, .pay-box_change {
    padding: 16px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    width: 160px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}
.pay-box:hover, .pay-box_change:hover {
    border-color: #18a2e0;
    box-shadow: 0 4px 16px rgba(24,162,224,0.15);
    transform: translateY(-2px);
}
.pay-box .sm, .pay-box_change .sm { font-size: 13px; font-weight: 400; color: #888; }
.pay-box .pay-box-number, .pay-box_change .pay-box-number { font-size: 15px; margin-top: 4px; color: #333; }
.pay-box .pay-box-text, .pay-box_change .pay-box-text { font-size: 16px; font-weight: 700; color: #1a1a2e; margin-bottom: 2px; }
.pay-box.active, .pay-box_change.active {
    background: linear-gradient(135deg, #e8f8f2 0%, #d0f0e4 100%);
    border: 2px solid #27ae60;
    box-shadow: 0 4px 16px rgba(39,174,96,0.15);
}
.pay-box.active .pay-box-text, .pay-box_change.active .pay-box-text { color: #1b8964; }

.tarif-box {
    padding: 20px;
    background: linear-gradient(135deg, #e8f8f2 0%, #d0f0e4 100%);
    border-radius: 8px;
    border: 1px solid #b8e6d0;
}
.tarif-box .title { font-size: 15px; margin-bottom: 8px; font-weight: 700; color: #1b8964; }
.tarif-box hr { margin: 6px 0; padding: 0; border: none; border-top: 1px solid #b8e6d0; }

.vkt-card-sm .form-control {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    height: auto;
    transition: border-color .2s, box-shadow .2s;
}
.vkt-card-sm .form-control:focus {
    border-color: #4f8cf7;
    box-shadow: 0 0 0 3px rgba(79,140,247,.15);
    outline: none;
}

.vkt-card-sm .radio label {
    font-size: 14px;
    line-height: 1.5;
    padding-left: 5px;
}

#price_breakdown {
    background: #f8f9fa;
    padding: 14px 16px;
    border-radius: 8px;
    margin-bottom: 12px;
    border: 1px solid #e9ecef;
    font-size: 14px;
    line-height: 1.8;
}
.vkt-price-total { font-size: 16px; font-weight: 700; color: #1a1a2e; margin-top: 4px; }
#discount_text { color: #27ae60; font-weight: 600; font-size: 14px; }
#js_promocode .form-control { margin-bottom: 8px; }

.vkt-promo-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #4f8cf7;
    margin-top: 8px;
}
.vkt-promo-link:hover { color: #2563eb; text-decoration: none; }
.vkt-promo-link i { font-size: 14px; }

.vkt-promocode-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.vkt-promocode-row .form-control {
    width: 200px;
    flex: none;
    height: 34px;
    margin: 0;
    padding: 4px 12px;
    font-size: 13px;
    box-sizing: border-box;
}
.vkt-promocode-row .vkt-btn-manage-sm {
    height: 34px;
    padding: 0 16px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    box-sizing: border-box;
}
.vkt-promocode-row #promocode-res { width: 100%; }

.vkt-tarif-features {
    list-style: none;
    padding: 0;
    margin: 0;
}
.vkt-tarif-features li {
    padding: 5px 0;
    font-size: 13px;
    line-height: 1.4;
    color: #1b8964;
    border-bottom: 1px solid #b8e6d0;
}
.vkt-tarif-features li:last-child { border-bottom: none; }
.vkt-tarif-features i { color: #27ae60; margin-right: 6px; font-size: 12px; }

.vkt-tarif-features-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    color: #1b8964;
    font-weight: 600;
}
.vkt-tarif-features-link:hover { color: #166534; text-decoration: none; }
.vkt-tarif-features-link i { margin-right: 4px; font-size: 11px; }

.change-tarif-notice {
    margin-bottom: 15px;
    background: linear-gradient(135deg, #e74c3c 0%, #ff6b6b 100%);
    color: #fff;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.5;
}
.change-tarif-notice b { font-weight: 700; }

.btn-pay {
    width: 270px;
    display: flex;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    border: none;
}
.btn-pay:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.btn-robokassa { background: linear-gradient(135deg, #1773ce 0%, #2196f3 100%); color: #fff !important; }
.btn-robokassa:hover { background: linear-gradient(135deg, #135ca4 0%, #1773ce 100%); }
.btn-spb { margin: 5px 0; background: linear-gradient(135deg, #454d56 0%, #5a6269 100%); }
.btn-spb:hover { background: linear-gradient(135deg, #5a6269 0%, #6c757d 100%); }

.vkt-pay-info-card {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.6;
    color: #92400e;
}
.vkt-pay-info-card a { color: #4f8cf7; font-weight: 600; }
.vkt-pay-info-card strong { color: #78350f; }

.vkt-pay-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.vkt-pay-links a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: #f0f7ff;
    border-radius: 8px;
    color: #0c66b2;
    font-size: 14px;
    font-weight: 500;
    transition: background .15s;
    text-decoration: none;
}
.vkt-pay-links a:hover { background: #e0f2fe; text-decoration: none; }

.vkt-faq-list { margin-top: 8px; }
.vkt-faq-item { border-bottom: 1px solid #e9ecef; }
.vkt-faq-item:last-child { border-bottom: none; }
.vkt-faq-q {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a2e;
    padding: 14px 0;
    cursor: default;
}
.vkt-faq-q i { color: #4f8cf7; font-size: 11px; margin-right: 8px; }
.vkt-faq-a {
    font-size: 14px;
    color: #3a3f4b;
    line-height: 1.6;
    padding: 0 0 14px 20px;
}
.vkt-faq-a p { margin: 0 0 8px; }
.vkt-faq-a p:last-child { margin-bottom: 0; }
.vkt-faq-a a { color: #4f8cf7; font-weight: 500; }

@media screen and (max-width: 991px) {
    .vkt-dash-pay { flex-direction: column; }
    .vkt-dash-pay .vkt-main { width: 100% !important; padding-right: 0 !important; }
    .vkt-dash-pay .vkt-side { width: 100% !important; order: 2; }
    .vkt-pay-row { flex-direction: column; }
    .pay_tarif { flex-wrap: wrap; align-items: flex-start; gap: 8px; }
    .pay-box, .pay-box_change,
    .pay-box.active, .pay-box_change.active {
        padding: 12px; width: auto; flex: 1; min-width: 120px;
    }
    .pay-box .pay-box-number, .pay-box_change .pay-box-number { font-size: 13px; }
    .pay-box .sm, .pay-box_change .sm { font-size: 11px; }
    .tarif-box { margin-top: 16px; }
    .vkt-tarif-card { padding: 18px 16px; }
    .vkt-tarif-card-head { flex-wrap: wrap; gap: 8px; }
    .vkt-tarif-card-name { font-size: 16px; }
    .vkt-tarif-card-stats { flex-wrap: wrap; gap: 6px; }
    .vkt-tarif-card-buttons { flex-wrap: wrap; }
    .vkt-tarif-card-buttons .vkt-btn-manage-sm { white-space: normal; font-size: 12px; padding: 8px 14px; }
    .vkt-card-yellow { margin-top: 0; }
    .vkt-card-compact { padding: 12px 14px; }
    .vkt-promocode-row { flex-wrap: wrap; }
    .vkt-promocode-row .form-control { min-width: 0; }
    .vkt-mini-table th, .vkt-mini-table td { padding: 6px 4px; font-size: 11px; }
    .vkt-overage-card { padding: 18px 16px; }
    .vkt-overage-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .vkt-overage-value { font-size: 16px; }
    .vkt-overage-total-row { flex-direction: column; gap: 4px; font-size: 14px; }
    .vkt-tarif-expired-row { flex-direction: column; align-items: flex-start; gap: 2px; }
    .vkt-tarifs-grid, .vkt-tarifs-grid-2 { grid-template-columns: 1fr; gap: 16px; }
    .vkt-tarifs-plan-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .vkt-tarifs-discount-grid { flex-direction: column; gap: 10px; }
    .pay_form { max-width: 100%; }
    .pay_form select, .pay_form input { max-width: 100%; box-sizing: border-box; }
    .vkt-price-total { font-size: 14px; }
    .vkt-sidebar-link { font-size: 12px; padding: 8px 0; }
    /* Партнёрская */
    .vkt-dash-partner { flex-direction: column; }
    .vkt-dash-partner .vkt-main { width: 100% !important; padding-right: 0 !important; }
    .vkt-dash-partner .vkt-side { width: 100% !important; order: 2; }
}

/* ========================================
   Профиль (account/edit)
   ======================================== */

.vkt-notify.vkt-notify-success {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #166534;
}
.vkt-notify.vkt-notify-success .vkt-notify-icon { background: #dcfce7; color: #16a34a; }

.vkt-status-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
}
.vkt-status-badge i { font-size: 16px; flex-shrink: 0; }
.vkt-status-connected { background: #ecfdf5; border: 1px solid #bbf7d0; color: #059669; }
.vkt-status-disconnected { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }

.vkt-edit-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #4f8cf7;
    cursor: pointer;
    text-decoration: none;
}
.vkt-edit-toggle:hover { color: #2563eb; text-decoration: none; }
.vkt-edit-toggle i { font-size: 12px; }

.vkt-email-value {
    font-size: 14px;
    color: #1a1a2e;
    margin: 0;
}
.vkt-email-value a { color: #4f8cf7; font-weight: 600; }

.vkt-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    font-size: 13px;
    color: #1a1a2e;
    font-weight: 500;
}
.vkt-checkbox-row i { color: #4f8cf7; font-size: 14px; }

/* ========================================
   Тёмная тема (модерн): хедер, сайдбар, футер
   ======================================== */

/* --- Хедер (тёмный, чуть светлее) --- */
.skin-blue .main-header .logo {
    background: #232840 !important;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.skin-blue .main-header .logo:hover {
    background: #2a3050 !important;
}
.skin-blue .main-header .navbar {
    background: #272d45 !important;
}
.skin-blue .main-header .navbar .sidebar-toggle {
    color: rgba(255,255,255,.7) !important;
}
.skin-blue .main-header .navbar .sidebar-toggle:hover {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
}
.skin-blue .main-header .navbar .nav > li > a {
    color: rgba(255,255,255,.8) !important;
}
.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > li > a:focus {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
}
.skin-blue .main-header .navbar .nav .open > a,
.skin-blue .main-header .navbar .nav .open > a:hover,
.skin-blue .main-header .navbar .nav .open > a:focus {
    background: rgba(255,255,255,.1) !important;
    color: #fff !important;
}

/* --- Сайдбар (тёмный, чуть светлее) --- */
.skin-blue .main-sidebar,
.skin-blue .left-side {
    background: #232840 !important;
}

/* Главные пункты — компактный тонкий шрифт */
.skin-blue .sidebar-menu > li > a {
    color: rgba(255,255,255,.75) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 9px 14px !important;
    background: transparent !important;
    border-left: 3px solid transparent !important;
    letter-spacing: .1px;
    transition: all .15s ease;
    line-height: 1.4;
}
.skin-blue .sidebar-menu > li > a > i {
    color: rgba(255,255,255,.4) !important;
    font-size: 14px !important;
    width: 22px !important;
    margin-right: 4px;
    display: inline-block !important;
    transition: color .15s ease;
}
.skin-blue .sidebar-menu > li > a > .pull-right-container {
    display: none !important;
}
.skin-blue .sidebar-menu > li > a:hover {
    background: rgba(255,255,255,.06) !important;
    color: #fff !important;
    border-left-color: rgba(255,255,255,.15) !important;
}
.skin-blue .sidebar-menu > li > a:hover > i {
    color: rgba(255,255,255,.7) !important;
}

/* Подпункты — компактнее */
.skin-blue .sidebar-menu .treeview-menu {
    background: rgba(0,0,0,.15) !important;
    padding: 2px 0 !important;
    margin: 0 !important;
}
.skin-blue .sidebar-menu .treeview-menu > li > a {
    color: rgba(255,255,255,.5) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 6px 14px 6px 40px !important;
    border-left: none !important;
    transition: all .15s ease;
    line-height: 1.4;
}
.skin-blue .sidebar-menu .treeview-menu > li > a > i,
.skin-blue .sidebar-menu .treeview-menu > li > a > .fa {
    display: none !important;
}
.skin-blue .sidebar-menu .treeview-menu > li > a:hover {
    background: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.9) !important;
}
.skin-blue .sidebar-menu .treeview-menu > li.active > a {
    background: rgba(79,140,247,.15) !important;
    color: #7bb3ff !important;
    font-weight: 500 !important;
}

/* Разделение между блоками */
.skin-blue .sidebar-menu > li {
    border-top: 1px solid rgba(255,255,255,.06) !important;
}
.skin-blue .sidebar-menu > li:first-child {
    border-top: none !important;
}

/* li.header (текст «Доступы») */
.skin-blue .sidebar-menu > li.header {
    color: rgba(255,255,255,.3) !important;
    background: transparent !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 14px 14px 4px !important;
    border-bottom: none !important;
}

.skin-blue .sidebar-menu {
    padding: 4px 0 20px !important;
}

/* Текущий активный пункт (по URL) */
.skin-blue .sidebar-menu > li.vkt-current > a {
    background: rgba(79,140,247,.18) !important;
    color: #93c5fd !important;
    border-left-color: #4f8cf7 !important;
    font-weight: 600 !important;
}
.skin-blue .sidebar-menu > li.vkt-current > a > i {
    color: #7bb3ff !important;
}
.skin-blue .sidebar-menu .treeview-menu > li.vkt-current > a {
    background: rgba(79,140,247,.2) !important;
    color: #93c5fd !important;
    font-weight: 600 !important;
    border-left: 3px solid #4f8cf7 !important;
    padding-left: 37px !important;
}

/* --- Дропдауны в vkt-стиле --- */
.vkt-dropdown {
    background: #fff !important;
    border: 1px solid #e8ecf0 !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 6px 24px rgba(0,0,0,.12) !important;
    padding: 0 !important;
    overflow: visible;
    min-width: 260px;
    margin-top: 0 !important;
    top: 100% !important;
}
/* Dropdown вплотную к нижней границе хедера */
.navbar-custom-menu .navbar-nav > li.dropdown {
    position: relative !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
}
.navbar-custom-menu .nav.navbar-nav > li > ul.vkt-dropdown {
    border-top-width: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    margin-top: 0 !important;
    top: 50px !important;
    right: 0 !important;
    left: auto !important;
    padding: 0 !important;
    position: absolute !important;
}
.vkt-dropdown > li.header,
.vkt-dropdown > li.footer {
    display: none !important;
}
.vkt-dd-section {
    padding: 12px 16px;
    list-style: none;
}
.vkt-dd-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.vkt-dd-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.3;
}
.vkt-dd-sub {
    font-size: 12px;
    color: #7a8599;
    line-height: 1.4;
}
.vkt-dd-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #7a8599;
    margin-bottom: 4px;
}
.vkt-dd-stat {
    font-size: 13px;
    color: #3a3f4b;
    padding: 2px 0;
}
.vkt-dd-stat b {
    color: #1a1a2e;
}
.vkt-dd-usage {
    background: #eef1f5;
    border-top: 1px solid #e0e4ea;
    border-bottom: 1px solid #e0e4ea;
}
.vkt-dd-balance {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.vkt-dd-balance-val {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
}
.vkt-dd-balance-val.vkt-dd-red {
    color: #dc2626;
}

/* Кнопка в дропдауне — перебиваем AdminLTE */
.vkt-dropdown .vkt-btn-manage-sm {
    display: block !important;
    background: linear-gradient(135deg, #4f8cf7, #6c5ce7) !important;
    color: #fff !important;
    text-align: center !important;
    padding: 11px 20px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

/* Уведомления */
.vkt-dd-notif {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px !important;
    text-decoration: none !important;
    color: #3a3f4b !important;
    background: transparent !important;
    transition: background .15s;
}
.vkt-dd-notif:hover {
    background: #f8fafc !important;
}
.vkt-dd-notif-text {
    font-size: 12px;
    color: #3a3f4b;
    line-height: 1.4;
    word-break: break-word;
    white-space: normal !important;
}
.vkt-dd-notif {
    white-space: normal !important;
}
.vkt-dd-notif-time {
    font-size: 11px;
    color: #7a8599;
    margin-top: 2px;
}
.vkt-dd-footer-link {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #4f8cf7 !important;
    text-decoration: none !important;
    padding: 4px 0;
}
.vkt-dd-footer-link:hover {
    color: #2563eb !important;
}

/* Пользователь — ссылки */
.vkt-dd-link {
    display: block !important;
    padding: 9px 16px !important;
    font-size: 13px !important;
    color: #3a3f4b !important;
    background: transparent !important;
    text-decoration: none !important;
    border-top: 1px solid #f1f3f6;
    transition: background .15s;
}
.vkt-dd-link:hover {
    background: #f8fafc !important;
    color: #1a1a2e !important;
}
.vkt-dd-link i {
    width: 18px;
    text-align: center;
    color: #7a8599;
    margin-right: 6px;
}

/* Аватар — буква вместо картинки */
.vkt-avatar-sm {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, #4f8cf7, #6c5ce7);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}
.vkt-avatar-md {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #4f8cf7, #6c5ce7);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}

/* Убираем AdminLTE стили для user-menu с vkt-dropdown */
.skin-blue .user-menu .vkt-dropdown .user-header,
.skin-blue .user-menu .vkt-dropdown .user-footer,
.skin-blue .user-menu .vkt-dropdown .user-body {
    display: none !important;
}

/* --- Фон контента --- */
.skin-blue .content-wrapper {
    background: #f2f4f7 !important;
}

/* --- Футер --- */
.main-footer {
    background: #fff !important;
    border-top: 1px solid #e0e3e8 !important;
    color: #888;
}

/*Описание общего правила*/
/* Контейнер всего блока */
.vakas-guide-wrapper {
  padding-top: 30px;
}

/* Заголовок */
.guide-header {
    margin-bottom: 30px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 20px;
}

.guide-header h3 {
    font-size: 22px;
    margin: 0 0 10px 0;
    color: #2d3748;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.guide-header p {
    margin: 0;
    color: #4a5568;
    font-size: 16px;
}

/* Список шагов */
.guide-steps {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.guide-step {
    display: flex;
    gap: 15px;
}

/* Номер шага */
.step-number {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    background: #72c181;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;

    margin-top: -5px;
}

.step-content {
    flex-grow: 1;
}

.step-content h4 {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: #2d3748;
}

.step-content p {
    margin: 0 0 10px 0;
    font-size: 15px;
    line-height: 1.5;
    color: #4a5568;
}

/* Стилизация списков внутри шагов */
.step-list {
    margin: 0;
    padding-left: 20px;
    color: #4a5568;
}
.step-list li {
    margin-bottom: 5px;
}

/* Элементы интерфейса в тексте (кнопки) */
.ui-element {
    background: #edf2f7;
    border: 1px solid #cbd5e0;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: 600;
    color: #2d3748;
    white-space: nowrap;
}

/* --- БЛОК ПОДСКАЗКИ (guide) --- */
.vakas-guide-wrapper .info-box {
    background: #ebf8ff;
    border-left: 4px solid #3182ce;
    padding: 15px;
    border-radius: 6px;
    display: flex;
    gap: 7px;
    margin-top: 15px;
    align-items: flex-start;
}

.vakas-guide-wrapper .info-box .info-icon {
    font-size: 24px;
    margin-top: -4px;
}

.vakas-guide-wrapper .info-box .info-text {
    font-size: 14px;
    color: #2b6cb0;
    line-height: 1.5;
}

.vakas-guide-wrapper .info-box .info-text strong {
    font-size: 15px;
    display: block;
    margin-bottom: 4px;
}

/* --- БЛОК ВНИМАНИЯ (КРАСНЫЙ) --- */
.warning-box {
    background: #fff5f5;
    border-left: 4px solid #e53e3e;
    padding: 15px;
    border-radius: 6px;
    display: flex;
    gap: 7px;
    margin-top: 15px;
    align-items: flex-start;
}

.warning-icon {
    font-size: 16px;
    margin-top: 1px;
}

.warning-text {
    font-size: 14px;
    color: #c53030;
    line-height: 1.5;
}

.warning-text strong {
    font-size: 15px;
    display: block;
    margin-bottom: 4px;
    text-transform: uppercase;
}

/* Адаптив для мобильных */
@media (max-width: 600px) {
    .vakas-guide-wrapper {
        padding: 20px;
    }
    .guide-step {
        flex-direction: column;
        gap: 10px;
    }
    .step-number {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
}

/* Мобильные дропдауны — ПОСЛЕ десктопных стилей чтобы перебить */
@media (max-width: 991px) {
    .navbar-custom-menu .navbar-nav > li.dropdown {
        position: static !important;
        height: auto !important;
    }
    .navbar-custom-menu,
    .navbar-custom-menu .nav.navbar-nav {
        position: static !important;
    }
    .navbar-custom-menu .nav.navbar-nav > li > ul.vkt-dropdown {
        position: fixed !important;
        top: 100px !important;
        right: 8px !important;
        left: 8px !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        border-radius: 8px !important;
        border-top: 1px solid #e8ecf0 !important;
        box-shadow: 0 8px 32px rgba(0,0,0,.2) !important;
        z-index: 9999 !important;
    }
}

.vkt-paynav-shell {
    border-radius: 18px;
    border: 1px solid #e8ecf0;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.vkt-paynav {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid #edf2f7;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.vkt-paynav-items,
.vkt-paynav-side {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vkt-paynav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #e5edf6;
    background: #f8fafc;
    color: #526071;
    font-weight: 600;
    text-decoration: none;
    transition: .18s ease;
}

.vkt-paynav-link:hover {
    border-color: #bfdbfe;
    background: #f1f7ff;
    color: #0f4fa8;
    text-decoration: none;
}

.vkt-paynav-link.is-active {
    border-color: #bcd7ff;
    background: linear-gradient(180deg, #eff6ff 0%, #e6f0ff 100%);
    color: #0f4fa8;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.05);
}

.vkt-paynav-link-ghost {
    background: #fff;
}

.vkt-paynav-body {
    padding: 20px 18px 18px;
}

.vkt-paygw-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 16px;
}

.vkt-paygw-title {
    margin: 0 0 6px;
    font-size: 22px;
    color: #0f172a;
}

.vkt-paygw-subtitle {
    margin: 0;
    color: #64748b;
    line-height: 1.6;
}

.vkt-paygw-topbar .btn-success {
    border-radius: 12px;
    padding: 10px 16px;
    font-weight: 600;
}

.vkt-paygw-grid,
.vkt-paygw-choice-grid,
.vkt-paygw-metrics,
.vkt-paygw-checklist {
    display: grid;
    gap: 16px;
}

.vkt-paygw-grid {
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.vkt-paygw-choice-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.vkt-paygw-card,
.vkt-paygw-choice,
.vkt-paygw-panel {
    border: 1px solid #e8ecf0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.vkt-paygw-card {
    padding: 20px;
}

.vkt-paygw-choice {
    display: block;
    padding: 20px;
    color: inherit;
    text-decoration: none;
    transition: .18s ease;
}

.vkt-paygw-choice:hover {
    border-color: #93c5fd;
    transform: translateY(-2px);
    text-decoration: none;
    box-shadow: 0 18px 36px rgba(37, 99, 235, 0.12);
}

.vkt-paygw-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #dbeafe, #e0f2fe);
    color: #0f4fa8;
    font-size: 18px;
}

.vkt-paygw-card-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.vkt-paygw-name {
    margin: 0 0 4px;
    font-size: 20px;
    color: #0f172a;
}

.vkt-paygw-desc {
    margin: 0;
    color: #64748b;
    line-height: 1.5;
}

.vkt-paygw-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.vkt-paygw-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
}

.vkt-paygw-badge.is-success { background: #dcfce7; color: #15803d; }
.vkt-paygw-badge.is-warning { background: #fef3c7; color: #b45309; }
.vkt-paygw-badge.is-danger { background: #fee2e2; color: #b91c1c; }
.vkt-paygw-badge.is-info { background: #e0f2fe; color: #0369a1; }

.vkt-paygw-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 14px;
}

.vkt-paygw-metric {
    padding: 12px 14px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
}

.vkt-paygw-metric-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
}

.vkt-paygw-metric-value {
    display: block;
    margin-top: 8px;
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
}

.vkt-paygw-hint {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    color: #526071;
    line-height: 1.6;
}

.vkt-paygw-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vkt-paygw-row .btn,
.vkt-paygw-row .btn-group {
    margin: 0;
}

.vkt-paygw-shell {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.vkt-paygw-main {
    flex: 1 1 auto;
    min-width: 0;
}

.vkt-paygw-side {
    flex: 0 0 320px;
}

.vkt-paygw-panel {
    padding: 20px;
    margin-bottom: 16px;
}

.vkt-paygw-panel h4 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 17px;
    color: #0f172a;
}

.vkt-paygw-panel p:last-child,
.vkt-paygw-hint:last-child {
    margin-bottom: 0;
}

.vkt-paygw-checklist {
    margin: 14px 0 0;
}

.vkt-paygw-check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    border-top: 1px solid #eef2f7;
}

.vkt-paygw-check:first-child {
    border-top: none;
    padding-top: 0;
}

.vkt-paygw-check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    font-size: 11px;
    flex-shrink: 0;
}

.vkt-paygw-check.is-done .vkt-paygw-check-icon {
    background: #dcfce7;
    color: #15803d;
}

.vkt-paygw-check strong {
    display: block;
    margin-bottom: 2px;
    color: #0f172a;
}

.vkt-paygw-check span {
    display: block;
    color: #64748b;
    line-height: 1.5;
}

.vkt-paygw-copy {
    display: flex;
    gap: 10px;
    align-items: center;
}

.vkt-paygw-copy input {
    flex: 1 1 auto;
    min-width: 0;
}

.vkt-paygw-empty {
    padding: 36px 28px;
    border-radius: 22px;
    background:
        radial-gradient(circle at top left, rgba(14, 165, 233, 0.14), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #dbeafe;
}

.vkt-paygw-empty h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 26px;
    color: #0f172a;
}

.vkt-paygw-empty p {
    margin: 0 0 18px;
    max-width: 760px;
    color: #64748b;
    line-height: 1.7;
}

.vkt-paygw-empty-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.vkt-paygw-empty-point {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.84);
    border: 1px solid #e5edf6;
    color: #334155;
    font-weight: 600;
}

.vkt-paygw-inline-form {
    display: inline;
}

@media (max-width: 1199px) {
    .vkt-paygw-shell {
        flex-direction: column;
    }
    .vkt-paygw-side {
        flex: 1 1 auto;
        width: 100%;
    }
}

@media (max-width: 991px) {
    .vkt-paynav,
    .vkt-paygw-topbar {
        flex-direction: column;
    }
    .vkt-paygw-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .vkt-paynav {
        padding: 14px 14px 12px;
    }
    .vkt-paynav-body {
        padding: 16px 14px 14px;
    }
    .vkt-paygw-metrics,
    .vkt-paygw-choice-grid {
        grid-template-columns: 1fr;
    }
    .vkt-paygw-card-head {
        flex-direction: column;
    }
    .vkt-paygw-badges {
        justify-content: flex-start;
    }
    .vkt-paygw-copy {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── Payment Sub-navigation ── */
.vkt-subnav {
    border-bottom: 1px solid #edf2f7;
    padding: 0 18px;
    background: #f7fafc;
    display: flex;
    gap: 4px;
}
.vkt-subnav a {
    padding: 10px 14px;
    font-size: 13px;
    color: #526071;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all .15s;
}
.vkt-subnav a:hover {
    color: #1a1a2e;
    text-decoration: none;
}
.vkt-subnav a.is-active {
    color: #0f4fa8;
    font-weight: 600;
    border-bottom-color: #2563eb;
}

/* ── Orders screen ── */
.vkt-orders-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.vkt-orders-head h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #1a1a2e;
}
.vkt-btn-create {
    padding: 10px 24px;
    font-size: 15px;
    border-radius: 10px;
    background: #10b981;
    border: none;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s;
}
.vkt-btn-create:hover {
    background: #059669;
    color: #fff;
    text-decoration: none;
}

.vkt-stat-bar {
    display: flex;
    gap: 24px;
    padding: 16px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid #edf2f7;
}
.vkt-stat-item {
    text-align: center;
    min-width: 80px;
}
.vkt-stat-item .num {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.2;
}
.vkt-stat-item .num small {
    font-size: 14px;
    font-weight: 400;
    color: #8898aa;
}
.vkt-stat-item .lbl {
    font-size: 12px;
    color: #8898aa;
    margin-top: 2px;
}

.vkt-search {
    display: flex;
    gap: 8px;
    align-items: center;
}
.vkt-search input[type=text] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 14px;
    width: 300px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.vkt-search input[type=text]:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.vkt-search button {
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background .15s;
}
.vkt-search button:hover {
    background: #f7fafc;
}

.vkt-filters {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.vkt-pill {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    text-decoration: none;
    color: #526071;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    transition: all .15s;
}
.vkt-pill:hover {
    background: #edf2f7;
    color: #333;
    text-decoration: none;
}
.vkt-pill.is-active {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.vkt-orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.vkt-orders-table thead th {
    background: #f7fafc;
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #8898aa;
    border-bottom: 2px solid #edf2f7;
    font-weight: 600;
}
.vkt-orders-table tbody tr {
    border-bottom: 1px solid #f0f2f5;
    transition: background .1s;
}
.vkt-orders-table tbody tr:hover {
    background: #f7fafc;
}
.vkt-orders-table td {
    padding: 10px 12px;
    vertical-align: middle;
}
.vkt-orders-table .vkt-amount {
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .vkt-orders-head { flex-direction: column; align-items: stretch; }
    .vkt-search input[type=text] { width: 100%; }
    .vkt-stat-bar { flex-wrap: wrap; gap: 16px; }
    .vkt-od-grid { flex-direction: column; }
}

/* ── Order Detail Card ── */
.vkt-order-detail {
    max-width: 960px;
}
.vkt-od-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid #edf2f7;
}
.vkt-od-grid {
    display: flex;
    gap: 24px;
}
.vkt-od-main {
    flex: 2;
    min-width: 0;
}
.vkt-od-sidebar {
    flex: 1;
    min-width: 260px;
}
.vkt-od-section {
    background: #f7fafc;
    border: 1px solid #edf2f7;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}
.vkt-od-section-title {
    margin: 0 0 12px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #8898aa;
    font-weight: 600;
}
.vkt-od-props {
    width: 100%;
    font-size: 14px;
}
.vkt-od-props td {
    padding: 4px 0;
    vertical-align: top;
}
.vkt-od-props td:first-child {
    color: #8898aa;
    width: 100px;
    padding-right: 12px;
}
.vkt-od-items {
    width: 100%;
    font-size: 14px;
    border-collapse: collapse;
}
.vkt-od-items td {
    padding: 8px 0;
    border-bottom: 1px solid #edf2f7;
}
.vkt-od-items .vkt-od-total td {
    border-bottom: none;
    border-top: 2px solid #e2e8f0;
    padding-top: 10px;
    font-size: 15px;
}

/* Timeline */
.vkt-od-timeline {
    position: relative;
    padding-left: 20px;
}
.vkt-od-timeline::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: #e2e8f0;
}
.vkt-od-tl-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 13px;
    position: relative;
}
.vkt-od-tl-item:last-child { margin-bottom: 0; }
.vkt-od-tl-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
    z-index: 1;
    margin-left: -20px;
}
.vkt-od-tl-item small {
    color: #8898aa;
}

/* ── Shared Payment UI Components ── */

/* Page header with title + actions */
.vkt-page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.vkt-page-head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a2e;
}

/* Compact data table (replaces table-bordered table-striped) */
.vkt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.vkt-table thead th {
    background: #f7fafc;
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #8898aa;
    border-bottom: 2px solid #edf2f7;
    font-weight: 600;
}
.vkt-table tbody tr {
    border-bottom: 1px solid #f0f2f5;
    transition: background .1s;
}
.vkt-table tbody tr:hover {
    background: #f7fafc;
}
.vkt-table td {
    padding: 10px 12px;
    vertical-align: middle;
}
.vkt-table code {
    font-size: 12px;
    background: #f0f2f5;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Status badges */
.vkt-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}
.vkt-badge-success { background: #d1fae5; color: #065f46; }
.vkt-badge-warning { background: #fef3c7; color: #92400e; }
.vkt-badge-danger  { background: #fee2e2; color: #991b1b; }
.vkt-badge-info    { background: #dbeafe; color: #1e40af; }
.vkt-badge-muted   { background: #f3f4f6; color: #6b7280; }

/* Search bar (reusable across pages) */
.vkt-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.vkt-toolbar input[type=text],
.vkt-toolbar select {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 13px;
    outline: none;
    transition: border-color .15s;
}
.vkt-toolbar input[type=text]:focus,
.vkt-toolbar select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37,99,235,.1);
}
.vkt-toolbar .vkt-toolbar-count {
    font-size: 13px;
    color: #8898aa;
    margin-left: 8px;
}

/* Empty state */
.vkt-empty {
    text-align: center;
    padding: 48px 20px;
    background: #f7fafc;
    border-radius: 12px;
    border: 2px dashed #e2e8f0;
}
.vkt-empty p { color: #8898aa; margin: 0 0 16px; }

/* Action buttons row */
.vkt-actions { display: flex; gap: 4px; }
.vkt-actions .btn { padding: 4px 10px; font-size: 12px; }