#main-container {
    overflow-x: initial !important;
}

::-webkit-scrollbar {
  width: 10px; 
}

::-webkit-scrollbar-track {
  background: transparent; 
}

::-webkit-scrollbar-thumb {
  background-color: #ffa700;
  border-radius: 10px;
  border: 2px solid transparent; 
  background-clip: content-box;
}

.scrollbar-custom {
  scrollbar-width: thin;
  scrollbar-color: #ffa700 transparent;
}

@font-face {
    font-family: 'DS 737 Exp';
    src: url('/template/panel/assets/fonts/DS737/DS737Exp.woff2') format('woff2'),
         url('/template/panel/assets/fonts/DS737/DS737Exp.woff') format('woff'),
         url('/template/panel/assets/fonts/DS737/DS737Exp.ttf') format('truetype'),
         url('/template/panel/assets/fonts/DS737/DS737Exp.eot') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

/* Fix img Daily Rewareds*/
.prz__img {
    width: 50px !important;
    height: 50px !important;
    border-radius: 40%;
}

/* Fix Daily*/
.content.content-top {
    padding-top: 60px !important;
}

.content.content-full {
    padding-bottom: 14px !important;
}

.prz { 
    margin: 7px auto 0 auto !important;
}

.dw-hr {
    margin-top: 0.4rem;
    margin-bottom: 1rem;
}

.options-container .options-overlay-show {
    opacity: 1;
    visibility: visible;
}

/* чекбоксы платежного сервиса */
.cc-selector-2 input{
    position:absolute;
    z-index:999;
}
.cc-selector-2 input:active +.drinkcard-cc { opacity: .9;}
.cc-selector-2 input:checked +.drinkcard-cc {
    -webkit-filter: none;
    -moz-filter: none;
    filter: none;
}
.drinkcard-cc{
    cursor: pointer;
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
}
.drinkcard-cc:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
    -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
    filter: brightness(1.2) grayscale(.5) opacity(.9);
}
.drinkcard-cc img{
    border-radius: 4px;
}
/* чекбоксы платежного сервиса конец*/

/* список аккаунтов*/
/* [TBC fix] CMS 4.3.1: vendor's codebase.css задаёт .block.block-bordered
   border: 1px solid #e4e7ed — на тёмной теме это белая обводка вокруг
   карточки аккаунта (на проде 4.0 её не было). Убираем точечно для
   .list_account, чтобы не сломать другие .block-bordered. */
.list_account.block-bordered,
.list_account.block.block-bordered {
    border: 0 !important;
    box-shadow: none !important;
}
.list_account div.accordion_account::before {
    content: '\f105';
    opacity: .4;
}
.list_account.open>div.accordion_account::before {
    opacity: 0;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.list_account div.accordion_account::after {
    content: '\f103';
    opacity: 0;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.list_account.open>div.accordion_account::after {
    opacity: .4;
    -webkit-transform: rotate(0);
    transform: rotate(0);
}
.list_account div.accordion_account::before, .list_account div.accordion_account::after {
    position: absolute;
    left: 21px;
    width: 20px;
    height: 20px;
    display: block;
    text-align: center;
    font-family: FontAwesome,"Font Awesome 5 Free","Font Awesome 5 Pro";
    transition: all .2s cubic-bezier(.25,.46,.45,.94);
}
/* список аккаунтов конец*/
.btn-create-account{
    position: absolute;
    padding: 0.3571429rem 0.64285714rem;
    font-size: 0.9286rem;
    line-height: 20px;
    z-index: 2;
    top: 10px;
    right: -8px;
    padding-left: 12px;
    padding-right: 12px;
}
/* Кастомные выбор
https://bootsnipp.com/snippets/gvlK7
*/
.form-group input[type="radio"],
.form-group input[type="checkbox"]{
    display: none;
}

.form-group input[type="checkbox"] + .btn-group > label,
.form-group input[type="radio"] + .btn-group > label{
    white-space: normal;
}

.form-group input[type="checkbox"] + .btn-group > label.btn-default,
.form-group input[type="radio"] + .btn-group > label.btn-default{
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    cursor: pointer;
}

.form-group input[type="radio"] + .btn-group > label span:first-child,
.form-group input[type="checkbox"] + .btn-group > label span:first-child{
    display: none;
}

.form-group input[type="radio"] + .btn-group > label span:first-child + span,
.form-group input[type="checkbox"] + .btn-group > label span:first-child + span{
    display: inline-block;
}

.form-group input[type="radio"]:checked + .btn-group > label span:first-child,
.form-group input[type="checkbox"]:checked + .btn-group > label span:first-child{
    display: inline-block;
}

.form-group input[type="radio"]:checked + .btn-group > label span:first-child + span,
.form-group input[type="checkbox"]:checked + .btn-group > label span:first-child + span{
    display: none;
}

.form-group input[type="checkbox"] + .btn-group > label span[class*="fa-"],
.form-group input[type="radio"] + .btn-group > label span[class*="fa-"]{
    width: 15px;
    float: left;
    margin: 4px 0 2px -2px;
}

.form-group input[type="checkbox"] + .btn-group > label div.content-label,
.form-group input[type="radio"] + .btn-group > label div.content-label{
    margin-left: 22px;
}
/* Кастомные выбор конец*/

.donat_ukraine {
	font-size: 15px;
}

.donat_ukraine .sub_title {
	font-weight: 800;
    font-size: 18px;
    color: #ffa700;
}

.donat_ukraine img {
    opacity: 0.6;
    transition: opacity 1s ease;
}

.donat_ukraine:hover img {
    opacity: 1;
}

.donat_ukraine .open-chat {
    font-weight: 600;
    color: #1ec773 !important;
    text-decoration: underline !important;
}

.donat_ukraine .open-chat:hover {
    cursor: pointer;
}

.logo-header-custom {
	width: 100%;
}

.img_logo_header {
	width: 250px;
    margin-top: 16px;
}

.new_block_content {
	background: linear-gradient(132.48deg, #404043 0%, #171723bf 99.39%), #1e214b;
}

.form-control, .input-group-text {
    color: #e7e7e7!important;
    background-color: #2323235e!important;
    border-color: #353939!important;
	height: 48px!important;
	font-size: 18px!important;
}

label {
	color: #c7cdd1!important;
}

.bg_body_gradient {
	background: linear-gradient(132.48deg, #404043 0%, #171723bf 99.39%), #1e214b;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: #ffffff!important;
}

.flex_li li{
	display: flex;
	align-items: center;
	text-transform: uppercase;
	gap: 12px;
}

.flex_li li a i {
	font-size: 16px;
}

.sidebar-content-сustom {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.simplebar-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#change_lang {
    text-decoration: underline;  /* Добавляем подчеркивание */
    height: 30px;  /* Высота, как указано в вашем стиле */
    cursor: pointer;  /* Чтобы указать, что элемент интерактивный */
}

#change_lang option {
    background-color: transparent;  /* Прозрачный фон для опций */
    cursor: pointer;  /* Чтобы сделать опции 'кликабельными' */
}

.color_fa {
	color: #fead169c;
}

.btn-warning {
    color: #fff;
    background-color: #faa317;
    border-color: #eab000;
}

.sidebar-mini-show, .sidebar-mini-hide {
    margin-left: 12px;
}

.block-payment {
  flex-grow: 0;       /* Блок не растет */
  flex-shrink: 0;     /* Блок не сужается */
  flex-basis: 70%;    /* Начальная базовая ширина блока */
}

.block-payment-choose {
  flex-grow: 0;       /* Блок не растет */
  flex-shrink: 0;     /* Блок не сужается */
  flex-basis: 30%;    /* Начальная базовая ширина блока */
}

.block {
	background: linear-gradient(132.48deg, #404043 0%, #171723bf 99.39%), #1e214b;
	border-radius: 6px!important;
	box-shadow: none!important;
}

.block-content {
    padding: 20px 20px 20px;
}

body {
	color: #ffffff!important;
}

.irs--flat .irs-bar {
    background-color: #f9ba10!important;
}

.irs--flat .irs-handle > i:first-child {
    background-color: #e9b426!important;
}

.payment-title {
	color: #f9ba10;
}

.payment-title span {
	background-color: #f9ba10;
	color: #fff;
	border-radius: 30px;
	padding: 2px 9px;
	padding-left: 10px;
}

.btn_min_slider {
    font-size: 16px;
    background-color: #fff0;
    border-radius: 3px;
    border: 2px solid #f9ba10;
    color: #f9ba10;
    padding: 8px 0px;
    box-shadow: 3px 2px 5px 0px rgb(0 0 0 / 82%);
    flex: 1;
    font-weight: 900;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.btn_min_slider:hover {
    background-color: #f9ba10;
    border: 1px solid #00000073;
    color: #fff;
}


.btn_min_slider span{
	background-color: #e1e4e9;
    color: #161515;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #dbdbdb;
    margin-left: 6px;
}

.btn_min_slider_btn1 {
    background-color: #f9ba10;
    border: 1px solid #00000073;
    color: #fff;
}

.btn_min_slider_btn1 span {
	background-color: #ffffff;
    color: #211919;
    border: 1px solid #dbdbdb;
    font-weight: 900;
}

.block-solid {
  position: relative;
  overflow: hidden;
}

.block-solid::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px; 
  right: 6px;
  bottom: 6px;
  border: 1px dotted #5757578f; 
  pointer-events: none; 
  border-radius: 6px;
}

.item_board_style {
	flex: 1;
	position: relative;
	overflow: hidden;
	background: linear-gradient(132.48deg, #404043 0%, #171723bf 99.39%), #1e214b;
	border-radius: 6px!important;
	box-shadow: none!important;
	padding: 16px;
	padding-bottom: 0px;
	margin: 0 -16px;
	display: flex;
	flex-direction: column;
	gap: 15px;
	align-self: flex-start;
	padding-bottom: 15px;
}

.item_board_style::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px; 
  right: 6px;
  bottom: 6px;
  border: 1px dotted #ffeb008f; 
  pointer-events: none; 
  border-radius: 6px;
}

.item_board_style_next {
	flex: 1;
	position: relative;
	overflow: hidden;
	border-radius: 6px!important;
	box-shadow: none!important;
	padding: 16px;
	margin: 0 -16px;
	display: flex;
	flex-direction: column;
	gap: 15px;
	align-self: flex-start;
}

.block_all_gifts {
	gap: 32px;
}

.block_z_img {
	z-index: 10;
	border: 2px solid #f9ba10;
	border-radius: 6px;
}

.icon_x32_border {
	border-radius: 6px;
}

.desc_item_gift {
	border-radius: 5px;
    padding-left: 16px;
    height: 36px;
    padding-right: 4px;
    font-weight: bolder;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 1px;
    width: 100%;
    box-shadow: 4px 4px 8px 0px rgb(0 0 0 / 32%);
}

.info_count_custom {
    padding: 5px 0px;
    border-radius: 5px;
    background-color: #f9ba10;
    box-shadow: 3px 4px 5px 0px rgb(0 0 0 / 34%);
    width: 100%;
	text-align: center;
	text-transform: uppercase;
	color: #111;
	border: 2px solid #f9ba10;
	font-weight: 700;
}

.next_count_info_block {
	padding: 5px 0px;
    border-radius: 5px;
    border: 2px solid #f9ba10;
    box-shadow: 3px 4px 5px 0px rgb(0 0 0 / 34%);
    width: 100%;
	text-align: center;
	text-transform: uppercase;
	color: #f9ba10;
	font-weight: 700;
}

.pay_image {
	width: 100%;
    border-radius: 5px;
    background-color: #fff;
	text-align: center;
    box-shadow: 4px 4px 8px 0px rgb(0 0 0 / 32%);
}

.count_color {
    color: #333333;
    display: block;
    width: 30px;
    text-align: center;
    background-color: #fff;
    border-radius: 3px;
    font-size: 10px;
}

.bonus_coin_span {
	background-color: #ffba00;
    color: #2b2323;
    padding: 0 6px;
    border-radius: 4px;
}

.pay_submit {
	padding: 16px 46px;
    width: 100%;
    background-color: #09a78f;
    text-transform: uppercase;
    /* font-weight: bold; */
    position: relative;
    color: #f3f3f3;
    letter-spacing: 0.5px;
	border: none;
    box-shadow: 4px 4px 8px 0px rgb(0 0 0 / 32%);
}

.pay_submit::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px; 
  right: 6px;
  bottom: 6px;
  border: 1px dotted #fff; 
  pointer-events: none; 
  border-radius: 6px;
}

.table th, .table td {
    padding: 10px;
    vertical-align: top;
    border-top: 1px solid #5f5f5f !important;
	font-size: 13px;
}

.table {
	border: 1px solid #5f5f5f !important;
    color: #fff!important;
	border-radius: 6px;
}

.table th, .table td {
    border-top: 1px solid #5f5f5f !important;
	vertical-align: middle;
}

.table thead th {
    background-color: #f9ba10;
}

.content-heading {
    border-bottom-color: #b70c0c00!important;
}

@media (min-width: 768px) {
    .content-heading {
        margin-bottom: 25px!important;
        padding-top: 0!important;
    }
}
.content-heading {
    margin-bottom: 20px!important;
    padding-top: 0;
    padding-bottom: 0!important;
	text-transform: uppercase;
}

.breadcrumb-item.active {
    color: #ffffff!important;
}

.breadcrumb {
	font-size: 17px;
    text-transform: uppercase;
}

.nav-tabs-block {
    background-color: #71717100!important;
}

.nav-tabs-block .nav-link {
    border-color: transparent !important;
    border: 2px solid #adadad !important;
    border-radius: 3px !important;
    padding: 7px 15px !important;
    margin-left: 20px !important;
    color: #dfdfdf !important;
    text-transform: uppercase;
    box-shadow: 4px 4px 8px 0px rgb(22 19 19 / 88%);
}

.nav-tabs-block .nav-link.active, .nav-tabs-block .nav-item.show .nav-link {
    color: #ffffff!important;
    background-color: #f9ba10!important;
    border-color: transparent!important;
}

.gamepage {
    background: linear-gradient(132.48deg, #404043 0%, #171723bf 99.39%), #1e214b!important;
}

.wh {
	background-color: #00000000 !important;
    border: 3px solid #353535;
    border-radius: 6px;
    box-shadow: 4px 4px 8px 0px rgb(22 19 19 / 88%);
}

.wh::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px; 
  right: 6px;
  bottom: 6px;
  border: 2px dotted #ffeb008f; 
  pointer-events: none; 
  border-radius: 6px;
}

.wh_cases {
	background-color: #00000000 !important;
    border: 3px solid #353535;
    border-radius: 6px;
    box-shadow: 4px 4px 8px 0px rgb(22 19 19 / 88%);
	display: block!important;
	min-height: auto !important;
}

.wh_cases::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px; 
  right: 6px;
  bottom: 6px;
  border: 2px dotted #ffeb008f; 
  pointer-events: none; 
  border-radius: 6px;
}

.wh__gamef {
	background-color: #00000000!important;
}

.wheel {
	background-color: #00000000!important;
}

.wheel__itm::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px; 
  right: 6px;
  bottom: 6px;
  border: 2px dotted #ffeb008f; 
  pointer-events: none; 
  border-radius: 6px;
}

.wheel__itm .itm_active>.itm__container {
    transform: none!important;
}

@keyframes glow {
    0% {
        box-shadow: 0 0 5px 5px #ffcc00;
    }
    50% {
        box-shadow: 0 0 5px 5px white;
    }
    100% {
        box-shadow: 0 0 5px 5px #ffcc00;
    }
}

.wheel__itm .itm_active>.itm__pic {
    transform: none!important;
}

.wheel__itm .itm_active:after {
    transform: none!important;
    animation: glow 2s infinite;
}

.history {
	background: none!important;
}

.history__container {
    -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
    overflow-y: auto;
    margin: 0!important;
    /* [TBC] уже блок + меньше правый отступ — скролл не уходит вправо/на центр */
    padding: 0 8px 0 20px;
    box-sizing: border-box;
    max-height: 580px;
    width: 290px;
    /* [TBC] якорь, чтобы декоративные ::before не уезжали относительно страницы */
    position: relative;
    /* [TBC] тонкий тематический скроллбар вместо толстого серого (он выглядел
       «поехавшим» и налезал на центральную колонку) */
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 166, 35, 0.45) transparent;
}
.history__container::-webkit-scrollbar { width: 6px; }
.history__container::-webkit-scrollbar-thumb { background: rgba(245, 166, 35, 0.45); border-radius: 999px; }
.history__container::-webkit-scrollbar-track { background: transparent; }

/* [TBC] Убрана остаточная жёлтая пунктирная рамка истории (уезжала без
   позиционированного родителя → блок «поехавший»). Декор не нужен. */
.history__container::before {
  display: none !important;
}

/* [TBC fix] #toolbarDrop добавлен в селектор: вендор 4.3.1 убрал
   класс .chose_server_custom из render_menu_server(), теперь рендерит
   кнопку как .btn-alt-success.btn-rounded — наша темная стилизация
   не подцеплялась. id='toolbarDrop' остался — стилим через него. */
.chose_server_custom,
#toolbarDrop {
	border-color: #353232 !important;
    border-radius: 3px !important;
    padding: 15px 15px !important;
    color: #ffffff !important;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 2px;
    background-color: #2d2d2d !important;
}

.block-header-default {
	background-color: #00000000!important;
}

@media (min-width: 992px) {
    #page-container.sidebar-o {
        padding-left: 300px!important;
    }
}

.pay_button_menu {
    background: radial-gradient(128% 100% at 50% 0%, #FFD700 2.6%, #FFA500 57.29%, #FF8C00 100%);
	border: none;
    border-radius: 3px;
    color: white;
    padding: 6px 20px;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.3s;
    text-transform: uppercase;
    /* [TBC fix] flex-row с center чтобы icon+text шли в одну строку
       (вендорский 4.3.1 где-то ставит flex-direction:column для .btn-like) */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    font-weight: 600;
    text-align: center;
    position: relative;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	font-family: 'DS 737 Exp', sans-serif!important;
}

.pay_button_menu::before {
    content: "";
    background: radial-gradient(106.8% 45.71% at 50% 30.71%, #FFE135 31.33%, rgba(255, 140, 0, 0.60) 100%);
    position: absolute;
    inset: 0;
    border-radius: 3px;
    padding: 2px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 2;
}

.pay_button_icon {
    margin-right: 8px;
}

.pay_button_text {
    background: linear-gradient(180deg, #ffffff 20.5%, rgba(255, 221, 168, 0.60) 28.75%, rgba(255, 240, 212, 0.60) 37.5%), #FFF;
    -webkit-background-clip: text;
    color: #ffffff6e;
    text-shadow: 3px 3px 8px rgb(0 0 0 / 46%);
    letter-spacing: 1.3px;
    /* [TBC fix] После апгрейда CMS на 4.3.1 вендорский codebase.css добавил
       min-height/padding на .btn, текст "ПОПОЛНИТЬ БАЛАНС" не влезал в одну
       строку. nowrap + чуть меньше шрифт = ровно как на проде. */
    white-space: nowrap;
    font-size: 14px;
}



.pay_button_menu:hover {
	background: linear-gradient(45deg, #ffcc33, #fca913);
}

.balance_info_menu {
    display: flex;
    text-transform: uppercase;
    justify-content: space-between;
    margin-bottom: 16px;
    font-weight: 500;
    gap: 6px;
    color: #ffffff;
	align-items: center;
}

.support_button_menu {
    background: linear-gradient(45deg, #857e7e, #a1a1a1);
    border: none;
    border-radius: 3px;
    color: white;
    padding: 6px 20px;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.3s;
    text-transform: uppercase;
    /* [TBC fix] flex-row для icon+text inline (вендорский 4.3.1 column-bug) */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    font-weight: 600;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    text-decoration: none;
	font-family: 'DS 737 Exp', sans-serif!important;
}

.support_button_menu::before {
    content: "";
    background: radial-gradient(106.8% 45.71% at 50% 30.71%, #fffdfd 31.33%, rgb(45 45 45 / 60%) 100%);
    position: absolute;
    inset: 0;
    border-radius: 3px;
    padding: 1px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 2;
}

.support_button_icon {
    margin-right: 8px;
}

.support_button_text {
    background: linear-gradient(180deg, #ffffff 20.5%, rgba(255, 221, 168, 0.60) 28.75%, rgba(255, 240, 212, 0.60) 37.5%), #FFF;
    -webkit-background-clip: text;
    color: #ffffff6e;
    text-shadow: 3px 3px 8px rgb(0 0 0 / 59%);
    letter-spacing: 1.3px;
}


.span_balance {
	border-radius: 4px;
    padding: 2px 6px;
    color: #fff;
	font-size: 13px;
}

.span_balance_blue {
	background-color: #5eacd9;
}

.span_balance_green {
	background-color: #16b33f;
}

.wh_button_menu {
	border: 2px solid #ffffff75;
    border-radius: 5px;
    color: white;
    padding: 6px 12px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
    text-transform: uppercase;
    display: block;
    width: 100%;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
}

.sidebar-mini-hide {
	font-family: "Roboto", sans-serif!important;
    font-weight: 400;
    text-transform: capitalize;
    letter-spacing: 0.6px;
    color: #e9e9e9;
}

.sidebar-inverse #sidebar .nav-main a > i{
    color: #fff!important;
    padding: 6px;
	font-size: 13px;
    background: linear-gradient(45deg, #69696900, #d7cebe1f);
    border-radius: 3px;
    width: 28px;
    height: 28px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.custom_menu_ico {
	color: #fff!important;
    padding: 6px;
	font-size: 13px;
    background: linear-gradient(45deg, #69696900, #d7cebe1f);
    border-radius: 3px;
    width: 28px;
    height: 28px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.span_fortune {
    background: linear-gradient(45deg, #a8e6cf, #dcedc1);
    border-radius: 3px;
    padding: 3px 6px;
    color: #333; /* Цвет текста, чтобы он был читаемым на зеленом фоне */
    font-weight: bold; /* Дополнительно сделаем текст жирным для лучшего отображения */
    text-align: center; /* Выравнивание текста по центру */
    display: inline-block; /* Убедимся, что элемент ведет себя как инлайн-блок */
}

.pay_button_shop {
	border: 1px solid #fff;
	background-color: #ffffff00;
	border-radius: 3px;
	padding: 12px;
	text-transform: uppercase;
	width: 90%;
	display: block;
	margin: 20px auto;
}

.shop_new-item {
    width: 100%;
    margin: 10px 0;
}

/* [TBC] grid: [иконка фикс] [тело min-width:0] [кол-во фикс справа] —
   длинное имя не раздувает строку и не давит на количество. */
.shop_new-item-content {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 4px 10px;
    border-radius: 5px;
    box-sizing: border-box;
}

.shop_new-item-img {
    width: 27px;
    height: 27px;
    object-fit: contain;
    flex: none;
    border-radius: 3px;
    box-shadow: 0 4px 8px rgb(217 181 49 / 31%);
    border: 1px solid #ffcc0063;
}

/* тело: название (максимум 2 строки) + строка параметров под ним */
.shop_new-item-body {
    min-width: 0;
}

.shop_new-item-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-align: left;
    font-weight: 800;
    font-size: 11px;
    line-height: 1.3;
    /* [TBC] высота по содержимому: 1 строка у коротких (без пустой
       зарезервированной строки), максимум 2 у длинных (line-clamp + ellipsis).
       Иконка и количество центрируются по всему блоку (grid align-items:center). */
    color: #eee;
}

/* параметры (срок/заточка) — отдельной строкой под названием */
.shop_new-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
}

/* количество — фиксированная зона справа, всегда прижата, не переносится */
.shop_new-item-quantity {
    justify-self: end;
    align-self: center;
    white-space: nowrap;
    min-width: 24px;
    text-align: right;
    color: #fff;
    font-size: 12px;
    font-weight: 300;
}

/* [TBC] Срок Premium Account (дни) — плашка-пилюля как кол-во на складе:
   navy-фон + gold-текст + бордер. */
.shop_new-item-days {
    display: inline-block;
    background: var(--tbc-bg-card, #252942);
    color: var(--tbc-accent-cta, #F5A623);
    border: 1px solid var(--tbc-border-default, #2F3454);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}

/* [TBC] Заточка (+N) в превью — тот же размер шрифта, что метка дней (10px).
   .text-warning без явного font-size наследовала крупнее. Скоуп только на
   превью (.shop_new-item-meta), детальную страницу набора (.isel) не трогаем. */
.shop_new-item-meta .text-warning {
    font-size: 10px !important;
}

/* [TBC] Компактный блок цены набора — меньше вертикальных паддингов */
#page-container .shop-price.block-content {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* [TBC] Блок «скидка»: старая цена зачёркнутой + −50% (под ценой, компактно) */
.tbc-deal {
    margin: 3px 12px 2px;
    text-align: center;
}
.tbc-deal-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 0;
}
.tbc-oldprice {
    color: #8B90B0;
    text-decoration: line-through;
    text-decoration-color: rgba(231, 76, 60, 0.8);
    font-size: 14px;
    font-weight: 700;
}
.tbc-disc {
    display: inline-block;
    background: #E74C3C;
    color: #fff;
    font-weight: 800;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
}
.tbc-saletimer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.18), rgba(245, 166, 35, 0.14));
    border: 1px solid rgba(231, 76, 60, 0.45);
    font-size: 12px;
    color: #fff;
}
.tbc-saletimer-label {
    color: #FFB840;
    font-weight: 700;
}
.tbc-saletimer-clock {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    padding: 1px 8px;
    border-radius: 6px;
    white-space: nowrap;
}
/* [TBC] Таймер над картинкой набора (верхний вариант) — отступы по краям карточки */
.tbc-saletimer-top {
    margin: 12px 12px 0;
    position: relative;
    z-index: 4;
}

.shop-img-wrp {
    /* [TBC] Картинка естественного размера, не раздуваем верх карточки */
    flex-grow: 0!important;
}

/* [TBC] Карусель наборов: один горизонтальный ряд БЕЗ переноса вниз.
   Карточки целятся в 25% (4 заполняют ширину и тянутся на сверхшироких),
   но не уже 300px — когда не влезают, ряд прокручивается (стрелки/свайп). */
/* боковые отступы под стрелки — чтобы стрелки были ВНЕ карточек */
.js-filter { position: relative; padding-left: 46px; padding-right: 46px; }
.js-filter .row.items-push {
    flex-wrap: nowrap;
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 166, 35, 0.55) transparent;
}
.js-filter .row.items-push::-webkit-scrollbar { height: 8px; }
.js-filter .row.items-push::-webkit-scrollbar-thumb { background: rgba(245, 166, 35, 0.5); border-radius: 999px; }
.js-filter .row.items-push::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: 999px; }
/* Карточки: 4 заполняют ширину блока (теперь широкого), на узких — min 300px
   и остальное прокруткой (карусель). */
.js-filter .row.items-push > .col {
    flex: 1 0 25%;
    min-width: 300px;
    scroll-snap-align: start;
}

/* [TBC] Расширяем контейнер ТОЛЬКО на странице наборов — снимаем боксовый
   лимит 1200px, чтобы 4 набора влезали ШИРЕ. Метку .tbc-wide-content вешает
   JS карусели (надёжно во всех браузерах, без зависимости от :has). */
#page-container .content.tbc-wide-content {
    max-width: 2000px !important;
}

/* стрелки карусели — в боковых отступах .js-filter, ВНЕ карточек.
   Появляются, только если есть прокрутка (JS ставит .is-on) */
.tbc-carr {
    position: absolute;
    top: 200px;
    transform: translateY(-50%);
    z-index: 8;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFD700, #F5A623);
    color: #1A1D2E;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.55), 0 0 12px rgba(245, 166, 35, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, background 0.2s;
}
.tbc-carr.is-on { display: inline-flex; }
.tbc-carr:hover { background: linear-gradient(135deg, #FFE45C, #FFB840); }
.tbc-carr-prev { left: 2px; }
.tbc-carr-next { right: 2px; }
.tbc-carr[disabled] { opacity: 0.3; cursor: default; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4); }

.shop_list_items {
	background-color: #0003;
	/* [TBC] Панель предметов обнимает контент (не растягивается) */
	flex-grow: 0;
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.shop-name {
	background-color: #0003!important;
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
	/* [TBC] якорь для бейджа «ХИТ ПРОДАЖ» */
	position: relative;
}

/* [TBC] Продажная плашка «ХИТ ПРОДАЖ» на выделенном наборе (3-й). Плавающая
   пилюля по центру верха карточки, тёплое золото + свечение + лёгкий пульс. */
/* [TBC] «ХИТ ПРОДАЖ» — золотой бейдж-таб над плашкой имени (absolute по центру
   верхнего края .shop-name → в линию с другими, геометрию не двигает). */
.tbc-bestbuy {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 7;
	padding: 3px 14px;
	border-radius: 999px;
	background: linear-gradient(135deg, #FFD700, #F5A623);
	color: #1A1D2E;
	font-family: 'DS 737 Exp', sans-serif;
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 12px rgba(245, 166, 35, 0.5);
	pointer-events: none;
}
@keyframes tbcBestbuyPulse {
	0%, 100% { box-shadow: 0 2px 8px rgba(245, 166, 35, 0.5), 0 0 12px rgba(255, 215, 0, 0.35); }
	50%      { box-shadow: 0 2px 14px rgba(245, 166, 35, 0.9), 0 0 22px rgba(255, 215, 0, 0.6); }
}

/* [TBC] Название набора — единый стиль с заголовками .h2_tbc/.h3_tbc:
   белый + тёплое янтарное свечение (а не чисто-жёлтое). Селектор с .shop-name
   повышает специфичность, чтобы перебить codebase .text-muted (делал имена серыми). */
.shop-name .name_kit_custom {
	text-transform: uppercase;
    font-family: 'DS 737 Exp', sans-serif !important;
    text-shadow: -1px -1px 0 #0000001c, 1px -1px 0 #00000057, -1px 1px 0 #0000008f, 1px 1px 0 #0000001a, 0 0 8px rgb(211 130 9 / 50%), 0 0 10px rgba(255, 204, 0, 0.3);
    color: #fff !important;
    font-weight: 800;
    font-size: 19px !important;
}

.price_shop_new {
	text-transform: uppercase;
    color: #fff !important;
    font-weight: 800!important;
    font-size: 18px !important;
}


.pay_button_shop {
    background: radial-gradient(128% 100% at 50% 0%, #FFD700 2.6%, #FFA500 57.29%, #FF8C00 100%);
	border: none;
    border-radius: 3px;
    color: white;
    padding: 6px 20px;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.3s;
    text-transform: uppercase;
    /* [TBC] 2 строки: метка («Купить за») сверху, цена снизу */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    line-height: 1.1;
    width: 90%;
    font-weight: 600;
    text-align: center;
    position: relative;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	font-family: 'DS 737 Exp', sans-serif!important;
}

/* [TBC] Метка кнопки («Купить за») — крупная, главный акцент */
.pay_button_shop .pbs-label {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.5px;
}
/* [TBC] Цена — мельче, под меткой, не переносится по словам (B-COIN не рвётся) */
.pay_button_shop .pbs-price {
    font-size: 12px;
    font-weight: 700;
    opacity: 0.95;
    white-space: nowrap;
}
/* [TBC] Старая цена (при скидке) — мелкая, зачёркнутая, на отдельной строке */
.pay_button_shop .pbs-price .pbs-old {
    display: block;
    font-size: 10px;
    margin-top: 1px;
}
.pay_button_shop .pbs-price .pbs-old del {
    color: rgba(255, 255, 255, 0.7) !important;
}

.pay_button_shop::before {
    content: "";
    background: radial-gradient(106.8% 45.71% at 50% 30.71%, #FFE135 31.33%, rgba(255, 140, 0, 0.60) 100%);
    position: absolute;
    inset: 0;
    border-radius: 3px;
    padding: 2px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 2;
}

.pay_button_shop:hover {
	background: linear-gradient(45deg, #ffcc33, #fca913);
}

.btn_tbc {
    background: radial-gradient(128% 100% at 50% 0%, #FFD700 2.6%, #FFA500 57.29%, #FF8C00 100%);
	border: none;
    border-radius: 3px;
    color: white;
    padding: 6px 20px;
    cursor: pointer;
    transition: background 0.3s;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.btn_tbc::before {
    content: "";
    background: radial-gradient(106.8% 45.71% at 50% 30.71%, #FFE135 31.33%, rgba(255, 140, 0, 0.60) 100%);
    position: absolute;
    inset: 0;
    border-radius: 3px;
    padding: 2px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 2;
}

.btn_tbc:hover {
	background: linear-gradient(45deg, #ffcc33, #fca913);
}



.h2_tbc {
	text-transform: uppercase;
    font-family: 'DS 737 Exp', sans-serif !important;
    text-shadow: -1px -1px 0 #0000001c, 1px -1px 0 #00000057, -1px 1px 0 #0000008f, 1px 1px 0 #0000001a, 0 0 8px rgb(211 130 9 / 50%), 0 0 10px rgba(255, 204, 0, 0.3);
    color: #fff !important;
    font-weight: 800;
    font-size: 32px !important;
}

.h3_tbc {
	text-transform: uppercase;
    font-family: 'DS 737 Exp', sans-serif !important;
    text-shadow: -1px -1px 0 #0000001c, 1px -1px 0 #00000057, -1px 1px 0 #0000008f, 1px 1px 0 #0000001a, 0 0 8px rgb(211 130 9 / 50%), 0 0 10px rgba(255, 204, 0, 0.3);
    color: #ffa700 !important;
    font-weight: 800;
    font-size: 22px !important;
}


.bg-white {
	background: linear-gradient(132.48deg, #1e3125 0%, #171723bf 99.39%), #00f9cd!important;
}

.block_account {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3)!important;
	border: 1px solid #3b3939;
}

.account_block_name {
	text-transform: uppercase;
	color: #eee!important;
}

.list-group-item {
    background-color: #2e2e2ed6!important;
    border: none!important;
	box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5); 
	    color: #ffffff!important;
	font-size: 11px;
	text-transform: uppercase;
}

.modal-content {
	background-color: #313131!important;
}

.modal_monobank {
	width: 800px;
	border-radius: 5px;
}

.paypal_info_pay {
	position: absolute;
    right: 3px;
    background-color: #646464;
    top: 3px;
    font-size: 10px;
    padding: 0px 8px;
    border-radius: 2px;
	color: #fff;
}

.page-header_custom {
	display: none;
}


@media (max-width: 992px) {
    .page-header_custom {
		display: block;
		background-color: #00000000!important;
	}
	.wh__gamef {
		padding: 40px!important;
	}
	
	.modal_monobank {
		width: 100%;
	}
	.block-payment {
		margin-right: 0!important;
	}
}

.btn-dual-secondary {
    color: #dfdfdf!important;
}

.close_button_menu {
	position: absolute;
	top: 7px;
    right: 13px;
    background-color: #474747 !important;
}

.lw_infoblock {
	width: 100%;
}

.lw_title {
	font-size: 17px;
    padding: 10px;
    border-radius: 6px;
	position: relative;
	margin-bottom: 16px;
	background-color: #476671;
}

.lw_title_balance {
	background-color: #07c1c1;
}

.lw_discount {
    position: absolute;
    font-size: 11px;
    top: -6px;
    background-color: #a72929;
    padding: 0px 6px;
    border-radius: 4px;
    right: 4px;
    color: #fff;
    cursor: pointer;
  }

  /* Всплывающее окно */
  .lw_discount .discount-tooltip {
    display: none;
    position: absolute;
    top: 18px; /* Расположение окна ниже текста */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: 300px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
    color: #333;
  }

  .lw_discount .discount-tooltip table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
  }

  .lw_discount .discount-tooltip th,
  .lw_discount .discount-tooltip td {
    border: 1px solid #ddd;
    padding: 5px;
    text-align: center;
  }

  .lw_discount .discount-tooltip th {
    background-color: #f2f2f2;
  }

  /* Показываем подсказку при наведении */
  .lw_discount:hover .discount-tooltip {
    display: block;
  }

.pay_button_lw {
	font-size: 12px;
}

.lw_server {
	text-transform: uppercase;
    font-family: 'DS 737 Exp', sans-serif !important;
    text-shadow: -1px -1px 0 #0000001c, 1px -1px 0 #00000057, -1px 1px 0 #0000008f, 1px 1px 0 #0000001a, 0 0 8px rgb(211 130 9 / 50%), 0 0 10px rgba(255, 204, 0, 0.3);
    color: #ffa700 !important;
    font-weight: 800;
    font-size: 22px !important;
}

.boxes__list {
    padding-top: 0!important;
}

.case {
    display: flex;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    padding: 25px 15px 20px 15px;
    background: #d3d3d3!important;
    border-radius: 3px;
    text-align: center;
    text-decoration: none;
    animation: case 1s ease forwards;
    border: 1px solid #3b3b3b;
    box-shadow: 4px 4px 8px 0px rgb(22 19 19 / 88%);
}

.bonuscodico {
	color: #fff !important;
    padding: 6px;
    font-size: 13px;
    background: linear-gradient(45deg, #69696900, #d7cebe1f);
    border-radius: 3px;
    width: 28px;
    height: 28px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.btn_bonuscod {
	margin-left: 3px;
    margin-top: -4px;
}
.bg-body-light {
    background-color: #323d4c !important;
}

.table-success, .table-success > th, .table-success > td {
	background-color: #00000000!important;
}

.gbal__num {
    font-size: 18px!important;
    color: #fff!important;
}

.text-warning {
    /* [TBC] Бейдж заточки (+N) — стиль ЛК: navy-пилюля + золотой акцент,
       вместо прежнего «наглого» фиолетового (#7962c5). Совпадает с
       .shop_new-item-days. */
    color: var(--tbc-accent-cta, #F5A623) !important;
    background-color: var(--tbc-bg-card, #252942);
    border: 1px solid var(--tbc-border-default, #2F3454);
    padding: 1px 6px;
    border-radius: 5px;
    font-weight: 700;
}


.popover-header {
    background: #171925;
    padding: 12px 10px;
    font-weight: 900;
}



/* =====================================================================
   [TBC 2026-08-18] Skins Shop — сетка вместо карусели.
   Наборов всего 4, поэтому они живут одним прокручиваемым рядом.
   Скинов 19 и будет больше — им нужна обычная сетка: 3 в строку,
   перенос вниз, карточки одного размера.
   ===================================================================== */
.js-filter.tbc-skins-grid { padding-left: 0; padding-right: 0; }

.js-filter.tbc-skins-grid .row.items-push {
    flex-wrap: wrap;              /* переносим на следующую строку */
    align-items: stretch;         /* карточки тянутся до одной высоты */
    overflow: visible;            /* никакой горизонтальной прокрутки */
    scroll-snap-type: none;
    padding-bottom: 0;
}
.js-filter.tbc-skins-grid .row.items-push > .col {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    min-width: 0;                 /* снимаем каруселные 300px */
    display: flex;                /* растягиваем карточку по высоте ячейки */
    scroll-snap-align: none;
}
.js-filter.tbc-skins-grid .row.items-push > .col > a.shop-item { width: 100%; }

/* картинка одного размера у всех — иначе строки «пляшут» */
.js-filter.tbc-skins-grid .shop-img-wrp {
    flex-grow: 0;
    height: 210px;
}
.js-filter.tbc-skins-grid .shop-img { max-height: 190px; }

@media (max-width: 991.98px) {
    .js-filter.tbc-skins-grid .row.items-push > .col { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 575.98px) {
    .js-filter.tbc-skins-grid .row.items-push > .col { flex: 0 0 100%; max-width: 100%; }
    .js-filter.tbc-skins-grid .shop-img-wrp { height: 180px; }
}

/* [TBC] Имя скина в одну/две строки давало разную высоту карточек
   (49px против 77px) и строки «прыгали». Фиксируем место под две строки
   и обрезаем более длинные — карточки становятся одного размера. */
.js-filter.tbc-skins-grid .shop-name {
    min-height: 77px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.js-filter.tbc-skins-grid .name_kit {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}