/* =====================================================================
   ARKBET — Custom CSS  (Red dark theme + Modern polish, MERGED)
   This REPLACES everything currently in Admin > Settings > Custom CSS.
   Built on your real main.css tokens. Re-skins only — no markup change.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Rajdhani:wght@500;600;700&display=swap');

/* ---------- 0. TOKENS ---------------------------------------------- */
:root{
  /* fonts */
  --body-font: "Barlow", system-ui, sans-serif;
  --heading-font: "Rajdhani", sans-serif;
  /* accent -> red #e01931 (forced over color.php) */
  --base-h: 353 !important; --base-s: 79% !important; --base-l: 49% !important;
  /* text was dark (--black) -> light */
  --black-h: 0; --black-s: 0%; --black-l: 96%;
  /* dark navy surfaces -> near-black */
  --dark-h: 240; --dark-s: 6%; --dark-l: 8%;
  /* borders -> subtle on dark */
  --border: 240 5% 16%;

  /* modern polish scale */
  --m-radius-sm: 8px; --m-radius: 12px; --m-radius-lg: 16px;
  --m-shadow-sm: 0 1px 3px #00000059;
  --m-shadow:    0 6px 16px #0000006b;
  --m-shadow-lg: 0 14px 36px #00000087;
  --m-ring: 0 0 0 3px hsl(var(--base) / .30);
  --m-ease: cubic-bezier(.4,0,.2,1);
  --m-fast: .16s var(--m-ease);
  --m-med:  .26s var(--m-ease);
}

/* ---------- 1. GLOBAL ---------------------------------------------- */
* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html { scroll-behavior: smooth; }
a, button, .btn, .oddBtn, .odd-list__outcome,
.sports-category__link, .sub-category-drawer__link {
  transition: color var(--m-fast), background-color var(--m-fast),
              border-color var(--m-fast), box-shadow var(--m-fast), transform var(--m-fast);
}
:where(a,button,input,select,textarea):focus-visible{
  outline:none; box-shadow:var(--m-ring); border-radius:var(--m-radius-sm);
}

/* ---------- 2. WHITE SURFACES -> DARK PANELS ----------------------- */
body{ background:#0c0c0e !important; color:hsl(var(--black)) !important; }
.sports-card, .sub-category-drawer,
.betslip, .bet-slip-container, .betslip__body, .betslip__head,
.card, .custom--card, .modal-content, .custom--modal .modal-body, .dropdown-menu{
  background-color:#161619 !important; color:hsl(var(--black)) !important;
}
.form--control, input, textarea, select,
.select2-container--default .select2-selection--single{
  background-color:#1d1d21 !important; color:hsl(var(--black)) !important;
  border-color:hsl(var(--border)) !important; border-radius:var(--m-radius-sm) !important;
  transition:border-color var(--m-fast), box-shadow var(--m-fast);
}
.form--control:focus, input:focus, textarea:focus, select:focus{
  border-color:hsl(var(--base)) !important; box-shadow:var(--m-ring) !important;
}
::placeholder{ color:#8b8b93 !important; }

/* ---------- 3. HEADER / FOOTER ------------------------------------- */
.header, header, .header-section, .header-bottom, .navbar, .header-primary, .nav-menu{
  background-color:#000 !important;
}
.header a, .nav-menu a, .navbar a{ color:hsl(var(--black)) !important; }
.header a:hover, .nav-menu a:hover{ color:hsl(var(--base)) !important; }
footer, .footer, .footer-section{ background-color:#000 !important; color:#8b8b93 !important; }
footer a{ color:#8b8b93 !important; }
footer a:hover{ color:hsl(var(--base)) !important; }

/* ---------- 4. ODDS BUTTONS ---------------------------------------- */
.oddBtn, .odd-list__outcome, .option-odd-lists > *{
  border-radius:var(--m-radius-sm) !important;
  font-family:"Rajdhani","Barlow",sans-serif; font-variant-numeric:tabular-nums; font-weight:600;
}
.odd-list__outcome.oddBtn{ background:#26262c !important; color:hsl(var(--black)) !important; }
.oddBtn:hover, .odd-list__outcome:hover{ background:#33333b !important; transform:translateY(-2px); box-shadow:var(--m-shadow); }
.odd-list__outcome.active, .oddBtn.active{ background:hsl(var(--base)) !important; color:#fff !important; box-shadow:0 4px 14px hsl(var(--base)/.40); }
.oddBtn.locked, .odd-list__outcome.locked{ opacity:.45; filter:grayscale(.3); }
.team-select-title, .point{ color:#8b8b93 !important; }

/* ---------- 5. MATCH CARDS (card + all children -> dark) ----------- */
.sports-card, .sports-card-left, .sports-card-wrapper,
.sports-card-inner, .sports-card-top-inner, .sports-card-body{
  background-color:#161619 !important; border-color:hsl(var(--border)) !important;
}
.sports-card{ border-radius:var(--m-radius) !important; box-shadow:var(--m-shadow-sm);
  transition:box-shadow var(--m-med), transform var(--m-med); overflow:hidden; }
.sports-card:hover{ box-shadow:var(--m-shadow); transform:translateY(-2px); }
.sports-card-inner{ border-radius:var(--m-radius-sm); }
.sports-card-heading{ background-color:#1d1d21 !important; }
/* light text inside cards */
.sports-card *{ color:hsl(var(--black)) !important; }
.sports-card a, .sports-card .all-markets, a.all-markets{ color:hsl(var(--base)) !important; }
.sports-card .team-select-title, .sports-card .point{ color:#8b8b93 !important; }
/* empty / disabled odds cells -> dark chips (was .btn-light white) */
.sports-card .btn-light, .option-odd-lists .btn-light,
.option-odd-list__item, .option-odd-lists .btn[disabled]{
  background:#26262c !important; color:#8b8b93 !important; border-color:hsl(var(--border)) !important;
}

/* ---------- 6. SIDEBAR + LEAGUE TABS ------------------------------- */
.sports-category__link{ border-radius:var(--m-radius-sm); position:relative; }
.sports-category__link:hover{ background:#ffffff0d !important; }
.sports-category__link.active{ background:#ffffff14 !important; }
.sports-category__link.active .sports-category__icon,
.sports-category__link.active .sports-category__text{ color:hsl(var(--base)) !important; }
.sports-category__link.active::before{ content:""; position:absolute; left:0; top:18%; bottom:18%;
  width:3px; border-radius:3px; background:hsl(var(--base)); }
.sub-category-drawer__link{ border-radius:999px; padding-inline:14px; }
.sub-category-drawer__link:hover{ background:#ffffff0d !important; }
.sub-category-drawer__link.active, .sub-category-drawer__link.active *{ color:hsl(var(--base)) !important; }

/* ---------- 7. BET SLIP -------------------------------------------- */
.betslip{ border-radius:var(--m-radius-lg) 0 0 var(--m-radius-lg); box-shadow:var(--m-shadow-lg); }
.bet-type__btn span{ border-radius:var(--m-radius-sm); font-weight:600; color:#8b8b93 !important; }
.bet-type__btn.active span, .bet-type__btn span.active{ background:hsl(var(--base)) !important; color:#fff !important; }
.bet-slip-container, .mybet-container{ scroll-behavior:smooth; }

/* ---------- 8. MY CUSTOM BITS (filter bar / market switch) --------- */
.sb-filterbar, .m-market-switch, .sb-status, .sb-search{
  background:#161619 !important; border-color:rgba(255,255,255,.08) !important;
}
.sb-pill{ background:#26262c !important; border-color:rgba(255,255,255,.10) !important; color:hsl(var(--black)) !important; }
.sb-pill.active{ background:#e01931 !important; border-color:#e01931 !important; color:#fff !important; }
.sb-seg{ color:#b9c6d8 !important; }
.sb-seg.active{ background:#e01931 !important; box-shadow:none !important; color:#fff !important; }
.mms-pill.active{ background:#e01931 !important; color:#fff !important; }
.sports-cat-count{ background:#2b2b31 !important; color:#8b8b93 !important; }
.sports-category__link.active .sports-cat-count{ background:#e01931 !important; color:#fff !important; }

/* ---------- 9. BUTTONS --------------------------------------------- */
.btn{ border-radius:var(--m-radius-sm); font-weight:600; letter-spacing:.1px; }
.btn:active{ transform:translateY(1px); }
.btn--base, .btn-primary, .cmn--btn, .place-bet{
  background-color:hsl(var(--base)) !important; border-color:hsl(var(--base)) !important; color:#fff !important;
  box-shadow:0 4px 14px hsl(var(--base)/.30);
}
.btn--base:hover, .btn-primary:hover{ box-shadow:0 6px 20px hsl(var(--base)/.45); transform:translateY(-1px); }

/* ---------- 10. CARDS / PAYMENT / COOKIE --------------------------- */
.card, .custom--card{ border-radius:var(--m-radius) !important; border:1px solid hsl(var(--border)) !important; box-shadow:var(--m-shadow-sm); }
.payment-system-list{ border-radius:var(--m-radius) !important; background:#161619 !important; }
.payment-item{ border-radius:var(--m-radius-sm); }
.payment-item:hover{ background:#ffffff0d !important; }
.payment-item:has(.payment-item__radio:checked){ background:hsl(var(--base)/.12) !important; }
.cookies-card{ border-radius:var(--m-radius-lg); box-shadow:var(--m-shadow-lg);
  background:hsl(240 6% 9% / .97) !important; color:hsl(var(--black)) !important; backdrop-filter:blur(8px); }

/* ---------- 11. SCROLLBARS ----------------------------------------- */
*{ scrollbar-width:thin; scrollbar-color:#2c2c33 transparent; }
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-thumb{ background:#2c2c33; border-radius:999px; }
*::-webkit-scrollbar-thumb:hover{ background:#3a3a44; }
*::-webkit-scrollbar-track{ background:transparent; }

/* ---------- 12. FIXES for invalid rules in your stylesheet --------- */
.select2-container--default .select2-search--dropdown .select2-search__field:focus{
  border-color:hsl(var(--base)) !important; box-shadow:0 0 25px hsl(var(--base)/.12) !important; outline:0 !important;
}
.register-disable-desc{ color:rgb(255 255 255 / 60%); font-size:18px; max-width:565px; width:100%; margin-bottom:32px; }
/* ===== PATCH: league-tab names visible + sidebar spacing (append to Custom CSS) ===== */
.sub-category-drawer__link,
.sub-category-drawer__text,
.sub-category-drawer__link span{ color:#cdd3da !important; }
.sub-category-drawer__link.active,
.sub-category-drawer__link.active *{ color:#e01931 !important; }
.sub-category-drawer__link:hover, .sub-category-drawer__link:hover *{ color:#fff !important; }

/* keep LIVE ONLY clear at the top of the rail */
.sports-category__list{ padding-top:6px; }
.sports-category__link.live-btn{ padding-block:14px; }
.sports-category__link.live-btn .sports-category__text{ color:#cdd3da !important; }
/* ===== PATCH: footer contrast on dark theme (append to Custom CSS) ===== */
.footer, .footer--dark{ background:#0c0c0e !important; }

/* headings: About Us / Useful Link / Company Policy */
.footer__title{ color:#f4f4f5 !important; }

/* about text + general footer text */
.footer__about, .footer__about p, .footer p, .footer span, .footer li{ color:#aeb4bd !important; }

/* link lists */
.footer__link, .footer__list a, .footer a{ color:#8b8b93 !important; }
.footer__link:hover, .footer__list a:hover, .footer a:hover{ color:#e01931 !important; }

/* bottom copyright bar (was light) */
.footer-bottom, .footer-bottom--dark{ background:#080809 !important; border-top:1px solid rgba(255,255,255,.06); }
.footer-bottom, .footer-bottom *{ color:#8b8b93 !important; }
.footer-bottom .t-link--base, .t-link--base{ color:#e01931 !important; }
/* ===== PATCH: logo height + header/menu (append to Custom CSS) ===== */
/* clamp logo to a fixed height so it stops inflating the header */
.logo{ width:auto !important; max-width:190px !important; display:flex !important; align-items:center; }
.logo a{ display:flex !important; align-items:center; }
.logo .logo__is, .logo img, .logo a img{
  height:46px !important; width:auto !important; max-width:100%; object-fit:contain;
}

/* tighten the top header bar */
.header-primary{ padding:10px 0 !important; }

/* menu links readable on the black header */
.primary-menu a, .primary-menu-container a, .right-side-nav, .right-side-nav a{ color:#f4f4f5 !important; }
.primary-menu a:hover{ color:#e01931 !important; }

@media (max-width:575px){
  .logo .logo__is, .logo img{ height:38px !important; }
}
/* ===== PATCH: widen sidebar for the league tree + fix counts (append to Custom CSS) ===== */

/* sidebar was 120px — too narrow for Sport -> League rows */
:root{ --left-side: 220px !important; }

/* count badge must sit INLINE in the tree rows (it was absolute, overlapping the name) */
.sb-tree .sports-cat-count, .sb-cat-row .sports-cat-count{
  position:static !important; top:auto !important; right:auto !important; flex:0 0 auto;
}

/* LIVE ONLY row: horizontal + visible text */
.sb-tree .sports-category__link.live-btn{
  flex-direction:row !important; align-items:center; justify-content:flex-start; gap:9px; padding:10px;
}
.sb-tree .sports-category__link.live-btn .sports-category__icon{ width:20px; text-align:center; font-size:16px; flex:0 0 auto; }
.sb-tree .sports-category__link.live-btn .sports-category__text{
  font-size:13px; color:#cdd3da !important; display:inline !important;
}

/* a touch more room for names */
.sb-cat-name{ max-width:120px; }
.sb-league-name{ max-width:120px; }
/* ===== MASTER PATCH: darken every leftover white panel across ALL pages =====
   Append to the bottom of Admin > Settings > Custom CSS, save, then /clear. */

/* white surfaces -> dark panels (contact, login/register, support, lists, dropdowns, modals) */
.custom--card,
.modal .modal-content,
.support-card,
.login-form,
.contact-card,
.bg--light,
.dropdown-lang .dropdown-menu,
.list--group .list-group-item,
.betslip-item,
.form-group .input-group-text.mobile-code{
  background-color:#161619 !important;
  color:hsl(var(--black)) !important;
  border-color:hsl(var(--border)) !important;
}

/* text + headings + labels light inside those panels */
.custom--card, .custom--card *,
.support-card, .support-card *,
.login-form, .login-form *,
.contact-card, .contact-card *,
.list--group .list-group-item *,
.betslip-item *,
.form-label, .contact-card__title, .contact-card__text, .login-form__title{
  color:hsl(var(--black)) !important;
}

/* keep links / accents red */
.custom--card a, .support-card a, .login-form a, .contact-card a,
.list--group .list-group-item a{ color:hsl(var(--base)) !important; }

/* inputs everywhere */
.form--control, .form-control, input, textarea, select{
  background-color:#1d1d21 !important;
  color:hsl(var(--black)) !important;
  border-color:hsl(var(--border)) !important;
}
.form--control:focus, .form-control:focus, input:focus, textarea:focus, select:focus{
  border-color:hsl(var(--base)) !important;
}
::placeholder{ color:#8b8b93 !important; }

/* QR codes MUST stay white to remain scannable */
.qr-code-wrapper, .qr-code-wrapper *{ background:#fff !important; }

/* white pill badges keep dark text so they stay readable */
.badge-solid--white{ color:#161619 !important; }
/* ===== PATCH: news/blog cards + muted text readable on dark (append to Custom CSS) ===== */

/* news cards dark */
.post-card{ background-color:#161619 !important; border:1px solid hsl(var(--border)) !important; }
.post-card__content{ background-color:#161619 !important; }
.post-card__title, .post-card__title a{ color:hsl(var(--base)) !important; }

/* muted / description text -> readable light grey (used across many pages) */
.text-muted,
.post-card p, .post-card__content p,
.blog-details p, .post-content p{
  color:#9aa1ab !important;
}
/* ===== PATCH: bet-confirm modal + betslip footer text (append to Custom CSS) ===== */

/* ---- "Place Your Bet" confirmation modal (#betModal) ---- */
#betModal .modal-content, #betModal .modal-body{ background:#161619 !important; color:#f4f4f5 !important; }
#betModal .list-group-item{ background:transparent !important; border-color:rgba(255,255,255,.06) !important; }
#betModal h3, #betModal h4, #betModal h5, #betModal h6{ color:#f4f4f5 !important; }
#betModal small, #betModal .text-muted{ color:#9aa1ab !important; }
#betModal #userBalance, #betModal #betStakeAmount{ color:#ffffff !important; }
#betModal #betReturnAmount{ color:hsl(var(--base)) !important; }   /* highlight the payout */

/* ---- betslip footer (Returns / totals) ---- */
.betslip__footer, .betslip__footer *{ color:#f4f4f5 !important; }
.betslip__footer .total-return-amount,
.betslip__footer .total-stake-amount,
.bet-return-amount{ color:hsl(var(--base)) !important; }
.betslip-item-return__text{ color:#9aa1ab !important; }
/* ===== PATCH: betslip bottom summary (Single / STAKE / Singles / Returns) ===== */
/* append to Custom CSS, save, /clear */

/* "Single" dropdown */
.betslip-select .form-select{
  background-color:#1d1d21 !important; color:#f4f4f5 !important;
  border-color:hsl(var(--border)) !important;
}

/* labels: STAKE, Singles (x1), Returns */
.betslip__list-ratio span,
.betslip__list-ratio .mb-1,
.betslip__list-match,
.bet-return span,
.bet-return small{ color:#f4f4f5 !important; }

/* "SSP" currency prefix inside stake field */
.betslip-input-inner{ color:#9aa1ab !important; }

/* stake input + bottom "Enter Amount" input */
.betslip__list-ratio input.amount,
.betslip__footer-bottom .betslip-form,
.betslip__footer-bottom .form--control{
  background-color:#1d1d21 !important; color:#f4f4f5 !important;
  border-color:hsl(var(--border)) !important;
}
.betslip__list-ratio input.amount::placeholder,
.betslip__footer-bottom .betslip-form::placeholder{ color:#8b8b93 !important; }

/* amounts in red */
.bet-return .total-return-amount,
.bet-return .total-stake-amount{ color:hsl(var(--base)) !important; }

/* safety net for anything else in the footer */
.betslip__footer, .betslip__footer *{ color:#f4f4f5 !important; }
.betslip__footer .total-return-amount,
.betslip__footer .total-stake-amount{ color:hsl(var(--base)) !important; }
/* ===== PATCH: markets / game-detail page — match dark theme (append to Custom CSS) ===== */

/* page heading */
.odd-list__title{ color:#f4f4f5 !important; }

/* market accordion cards */
.accordion--odd .accordion-item{
  background-color:#161619 !important;
  border:1px solid hsl(var(--border)) !important;
  margin-bottom:12px; border-radius:10px; overflow:hidden;
}
.accordion--odd .accordion-button,
.accordion--odd .accordion-button:not(.collapsed){
  background-color:#161619 !important;
  color:#f4f4f5 !important;
  box-shadow:none !important;
}
.accordion--odd .accordion-body{ background-color:#161619 !important; }

/* expand/collapse chevron visible on dark */
.accordion--odd .accordion-button::after{ filter:invert(1) brightness(2) !important; }
.accordion--odd .accordion-button i{ color:#f4f4f5 !important; }

/* outcome rows */
.odd-list__outcomes > li,
.odd-list__outcomes .odd-list__outcome-wrapper{ background-color:transparent !important; }
.odd-list__outcome-text{ color:#f4f4f5 !important; }

/* odds chips: dark by default, red when selected */
.odd-list__outcome.oddBtn{
  background-color:#26262c !important;
  border:1px solid hsl(var(--border)) !important;
  color:#f4f4f5 !important;
}
.odd-list__outcome.oddBtn .odd-list__outcome-ratio{ color:#f4f4f5 !important; }
.odd-list__outcome.oddBtn:hover{ background-color:hsl(var(--base)/.25) !important; }
.odd-list__outcome.oddBtn.active{ background-color:hsl(var(--base)) !important; }
.odd-list__outcome.oddBtn.active .odd-list__outcome-ratio{ color:#fff !important; }
.odd-list__outcome.oddBtn.locked{ opacity:.5; }
/* ===== BETSLIP SUMMARY — DEFINITIVE FIX =====
   Replaces any earlier betslip-bottom block. Paste at the very END of Custom CSS, save, /clear.
   Root cause: STAKE / Singles labels use hsl(var(--dark)/.8) which is now near-black -> invisible. */

.betslip__footer-list .betslip__list-ratio,
.betslip__footer-list .betslip__list-ratio span,
.betslip__footer-list .betslip__list-ratio .mb-1,
.betslip__footer-list .betslip__list-match,
.betslip__footer-list .bet-return,
.betslip__footer-list .bet-return span,
.betslip__footer-list .bet-return small{
  color:#f4f4f5 !important;
}

/* "SSP" currency prefix */
.betslip__footer-list .betslip-input-inner{ color:#9aa1ab !important; }

/* "Single" dropdown */
.betslip-select .form-select{
  background-color:#1d1d21 !important; color:#f4f4f5 !important;
  border-color:hsl(var(--border)) !important;
}

/* stake input + bottom "Enter Amount" input */
.betslip__list-ratio input.amount,
.betslip__footer-bottom .betslip-form,
.betslip__footer-bottom .form--control{
  background-color:#1d1d21 !important; color:#f4f4f5 !important;
  border-color:hsl(var(--border)) !important;
}
.betslip__list-ratio input.amount::placeholder,
.betslip__footer-bottom .betslip-form::placeholder{ color:#8b8b93 !important; }

/* amounts in red */
.bet-return .total-return-amount,
.bet-return .total-stake-amount{ color:hsl(var(--base)) !important; }
/* ===== BETSLIP LABELS — GUARANTEED FIX (uses #betSlipBody ID to outrank main.css) =====
   Paste at the END of Custom CSS, save, /clear. Replaces earlier betslip blocks.
   Reason: main.css '.betslip__list-ratio span' (0,1,1) beat '.betslip__footer *' (0,1,0);
   the #betSlipBody ID (1,x,x) outranks all of them. */

#betSlipBody .betslip__list-ratio,
#betSlipBody .betslip__list-ratio span,
#betSlipBody .betslip__list-ratio .mb-1,
#betSlipBody .betslip__list-match,
#betSlipBody .bet-return,
#betSlipBody .bet-return span,
#betSlipBody .bet-return small{
  color:#f4f4f5 !important;
}

/* "SSP" currency prefix slightly muted */
#betSlipBody .betslip-input-inner{ color:#9aa1ab !important; }

/* amounts in red */
#betSlipBody .bet-return .total-return-amount,
#betSlipBody .bet-return .total-stake-amount{ color:hsl(var(--base)) !important; }

/* "Single" dropdown + stake/amount inputs */
#betSlipBody .betslip-select .form-select,
#betSlipBody .betslip__list-ratio input.amount,
#betSlipBody .betslip__footer-bottom .betslip-form,
#betSlipBody .betslip__footer-bottom .form--control{
  background-color:#1d1d21 !important; color:#f4f4f5 !important;
  border-color:hsl(var(--border)) !important;
}
#betSlipBody input::placeholder{ color:#8b8b93 !important; }
/* ===== PATCH: My Bets list — dark theme (append to custom.css, then /clear) ===== */

/* bet card + login-message card were #fff */
.single-bet li,
.login-message li{
  background:#161619 !important;
  border:1px solid hsl(var(--border)) !important;
}

/* the white "selected team" pill */
.bet-single__selected-team{
  background:#1d1d21 !important;
  border:1px solid hsl(var(--border)) !important;
}

/* light text (selection, league, teams, amounts) */
.bet-single__selected-team .name,
.betslip-item-league__name,
.bet-single__team,
.bet-single__vs,
.bet-single-info__item .value,
.single-bet .bet-return-amount{ color:#f4f4f5 !important; }

/* muted labels / market type (kept readable, not white) */
.bet-single-info__item .label,
.bet-market_type{ color:#9aa1ab !important; }

/* login-message text on that card */
.login-message .login-message-text{ color:#f4f4f5 !important; }
.table-responsive {
	border: 1px solid #e9e9e9;
	border-radius: 8px;
}

/*---------------------------------------
    2.12 Table
-----------------------------------------*/
/* table css start */
.custom--table {
	margin-bottom: 0;
	border-radius: 5px;
	background: hsl(var(--black) / 0.04);
}

.custom--table> :not(:first-child) {
	border-top: none;
}

.custom--table> :not(caption)>*>* {
	border-bottom-width: 0;
}

.custom--table thead {
	border-bottom: 1px solid #ebebeb;
	background-color: #f9f9f9;
}

.custom--table thead th {
	padding: 0.8rem 0.5rem;
	font-family: var(--heading-font);
	font-size: 0.875rem;
	text-align: center;
	font-weight: 500;
	vertical-align: middle;
	white-space: nowrap;
}

.custom--table thead th:first-child {
	padding-left: 1rem !important;
	border-radius: 5px 0 0 0;
	text-align: left;
}

.custom--table thead th:last-child {
	padding-right: 1rem !important;
	border-radius: 0 5px 0 0;
	text-align: right;
}

.custom--table tbody td {
	border-top: none;
	border-bottom: 1px solid #e9e9e9;
	padding: 0.8rem 0.5rem;
	font-family: var(--heading-font);
	font-size: 0.875rem;
	color: hsl(var(--heading));
	text-align: center;
	vertical-align: middle;
	background-color: #ffff;
	white-space: nowrap;
}

.custom--table tbody td:first-child {
	padding-left: 1rem !important;
	text-align: left;
}

.custom--table tbody td:last-child {
	text-align: right;
	padding-right: 1rem !important;
}

.custom--table tbody tr:last-child td {
	border-bottom: none;
}

.custom--table [data-label] {
	position: relative;
}

.custom--table [data-label]::before {
	position: absolute;
	content: attr(data-label);
	font-weight: 500;
	left: 0;
	padding: 0.8125rem 0.9375rem;
	display: none;
	color: hsl(var(--heading));
	top: 50%;
	transform: translateY(-50%);
}

.custom--table-separate {
	border-collapse: separate;
	border-spacing: 0;
	box-shadow: none;
	background: transparent;
}

.custom--table-separate thead th:first-child {
	border-radius: 5px 0 0 0;
}

.custom--table-separate thead th:last-child {
	border-radius: 0 5px 0 0;
}

.custom--table-separate tbody tr {
	background: hsl(var(--base) / 0.1);
}

.custom--table-separate tbody td {
	border-bottom: none;
}

.custom--table-separate tbody tr:last-child td:first-child {
	border-radius: 0 0 0 5px;
}

.custom--table-separate tbody tr:last-child td:last-child {
	border-radius: 0 0 5px 0;
}

@media (max-width: 991px) {
	.table-responsive--md thead {
		display: none;
	}

	.table-responsive--md tbody tr td {
		padding-right: 15px;
		background: transparent;

	}

	.table-responsive--md tbody tr:nth-child(odd) td {
		background-color: hsl(var(--white)) !important;
	}

	.table-responsive--md tbody tr td:last-child {
		padding-right: 15px;
	}

	.table-responsive--md tr th,
	.table-responsive--md tr td {
		display: block;
		padding-left: 45% !important;
		text-align: right !important;
		border-bottom: 1px solid #e9e9e9;
	}

	.table-responsive--md tr th:first-child,
	.table-responsive--md tr td:first-child {
		border-top: none !important;
	}

	.table-responsive--md [data-label]::before {
		display: block;
	}

	.table-responsive--md.custom--table tbody td {
		white-space: unset;
	}

	.table-responsive--md.custom--table thead th {
		white-space: unset;
	}
}

@media (max-width: 767px) {
	.table-responsive--sm thead {
		display: none;
	}

	.table-responsive--sm.custom--table thead th {
		white-space: unset;
	}

	.table-responsive--sm.custom--table tbody td {
		white-space: unset;
	}

	.table-responsive--sm tbody tr td {
		padding-right: 15px;
		background: transparent;

	}

	.table-responsive--sm tbody tr:nth-child(odd) td {
		background-color: hsl(var(--white)) !important;
	}

	.table-responsive--sm tbody tr td:last-child {
		padding-right: 15px;
	}

	.table-responsive--sm tr th,
	.table-responsive--sm tr td {
		display: block;
		padding-left: 45% !important;
		text-align: right !important;
		border-bottom: 1px solid #e9e9e9;
	}

	.table-responsive--sm tr th:first-child,
	.table-responsive--sm tr td:first-child {
		border-top: none !important;
	}

	.table-responsive--sm [data-label]::before {
		display: block;
	}
}

/*---------------------------------------
    2.37 Widget Card
-----------------------------------------*/
.widget-card {
	border-radius: 5px;
	border: 1px solid hsl(var(--base) / 0.1);
	background: hsl(var(--base-dark) / 0.15);
}

@media screen and (min-width: 992px) {
	.widget-card {
		background: hsl(var(--base) / 0.2);
	}
}

@media (max-width: 991px) {
	.widget-card.widget-card--primary {
		border-radius: 0 !important;
	}
}

.widget-card--primary {
	position: relative;
	background: hsl(var(--dark));
	isolation: isolate;
	overflow: hidden;
}

.widget-card--primary::before {
	content: "";
	position: absolute;
	inset: -15px;
	background-image: url(../images/wave.svg);
	background-size: contain;
	background-position: right bottom;
	background-repeat: no-repeat;
	z-index: -1;
}

.widget-card--primary::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url(../images/wave.svg);
	background-size: contain;
	background-position: right bottom;
	background-repeat: no-repeat;
	z-index: -1;
}

.widget-card--primary .widget-card__id {
	color: hsl(var(--light) / 0.8);
}

.widget-card--primary .widget-card__reload {
	color: hsl(var(--light) / 0.8);
}

.widget-card--primary .widget-card__balance {
	color: hsl(var(--light));
}

.widget-card--primary .widget-card__balance-text {
	color: hsl(var(--light));
}

.widget-card--secondary {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 15px;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border: 0;
}

.widget-card--secondary .widget-card__body {
	padding: 0;
	flex-grow: 1;
}

@media (max-width: 575px) {
	.widget-card--secondary .widget-card__body {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

.widget-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 15px;
	padding-right: 15px;
	background: hsl(var(--dark-600));
	border-radius: 5px 5px 0 0;
}

.widget-card__id {
	font-size: 13px;
}

.widget-card__reload {
	padding-right: 0;
	padding-left: 0;
}

.widget-card__icon-container {
	display: inline-block;
}

.widget-card__icon {
	position: relative;
	display: grid;
	place-content: center;
	width: 45px;
	height: 45px;
	border-radius: 5px;
	background: hsl(var(--base));
	border-radius: 50%/10%;
	isolation: isolate;
	font-size: 26px;
	color: hsl(var(--light));
}

.widget-card__icon::before {
	content: "";
	position: absolute;
	top: 10%;
	bottom: 10%;
	right: -5%;
	left: -5%;
	background: hsl(var(--base));
	border-radius: 5%/50%;
	z-index: -1;
}

.widget-card__body {
	padding: 15px;
}

.widget-card__balance {
	margin-top: 0;
	margin-bottom: 5px;
	font-size: 1.5rem;
}

@media (max-width: 1199px) {
	.widget-card__balance {
		font-size: 1.25rem;
	}
}

.widget-card__balance-text {
	display: block;
	font-size: 0.75rem;
	line-height: 1;
}


/*---------------------------------------
    2.38 User Dashboard
-----------------------------------------*/
.user-dashboard {
	padding-top: 40px;
	padding-bottom: 40px;
	min-height: calc(100vh - 120px);
}

@media all and (orientation: landscape) {
	.user-dashboard {
		min-height: 568px;
	}
}

@media screen and (min-width: 992px) {
	.user-dashboard {
		padding-top: 60px;
		padding-bottom: 60px;
		min-height: calc(100vh - 430px);
	}
}

@media screen and (min-width: 1400px) {
	.user-dashboard {
		min-height: calc(100vh - 330px);
	}
}

/*---------------------------------------
    2.39 Dashboard Sidebar
-----------------------------------------*/

.dashboard-sidebar__nav-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	margin-bottom: 15px;
	border-radius: 5px;
	background: hsl(var(--base) / 0.2);
}

@media screen and (min-width: 992px) {
	.dashboard-sidebar__nav-toggle {
		display: none;
	}
}

.dashboard-sidebar__nav-toggle-text {
	display: block;
	font-size: 14px;
	line-height: 1.2;
	color: hsl(var(--dark));
	font-weight: 500;
}

.dashboard-sidebar__nav-toggle-btn {
	padding: 0;
	line-height: 1;
	font-size: 24px;
	background: transparent;
	color: hsl(var(--base-dark));
	display: flex;
	flex-wrap: wrap;
}

.dashboard-sidebar__nav-toggle-btn i {
	font-size: 2rem;
}

.dashboard-sidebar__nav-toggle-btn:hover {
	color: hsl(var(--base-dark));
}

.dashboard-sidebar__nav-toggle-btn:focus {
	color: hsl(var(--base-dark));
}

.trans-number {
	width: calc(100% - 126px);
}

.trans-btn {
	width: 102px;
}

@media (max-width: 575px) {
	.trans-number {
		width: 100%;
	}

	.trans-btn {
		width: 100%;
	}

	.trans-btn .btn {
		width: 100%;
	}
}

.cate-ta {
	position: relative;
}

.submenu {
	position: absolute;
	width: 160px;
	padding: 15px;
	background-color: #fff;
}

/*---------------------------------------
    2.40 Dashboard Menu
-----------------------------------------*/
@media screen and (min-width: 992px) {
	.dashboard-menu {
		margin-top: 1rem;
		border: 1px solid #e9e9e9;
		border-radius: 5px;
	}
}

.dashboard-menu__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: hsl(var(--dark-600));
}

@media screen and (min-width: 992px) {
	.dashboard-menu__head {
		display: none;
	}
}

.dashboard-menu__head-text {
	display: block;
	padding-left: 15px;
	font-size: 14px;
	line-height: 1.2;
	color: hsl(var(--light));
}

.dashboard-menu__head-close {
	padding: 0;
	width: 40px;
	height: 40px;
	display: grid;
	place-content: center;
	color: hsl(var(--light));
	font-size: 32px;
	border: 0;
	border-radius: 0;
}

.dashboard-menu__head-close i {
	font-size: 24px;
}

.dashboard-menu__head-close:hover {
	color: hsl(var(--light));
}

.dashboard-menu__head-close:focus {
	color: hsl(var(--light));
}

.dashboard-menu__body .accordion-header {
	margin-top: 0;
}

.dashboard-menu__body .accordion-item:first-of-type .accordion-button {
	border-radius: 0;
}

.dashboard-menu__body .accordion-button:not(.collapsed) {
	background: transparent;
	color: hsl(var(--dark));
}

@media screen and (min-width: 992px) {
	.dashboard-menu__body .accordion-button:not(.collapsed) {
		background: transparent;
		box-shadow: none;
		color: hsl(var(--dark));
	}
}

.dashboard-menu__body .accordion-button:not(.collapsed)::after {
	content: "\f106";
	transform: rotate(0);
}

.dashboard-menu__body .accordion-button:not(.collapsed)[aria-expanded="false"]::after {
	content: "\f107";
}

.dashboard-menu__body .accordion-item:last-of-type {
	border-radius: 0;
}

.dashboard-menu__body .accordion-item {
	border: none;
	background: hsl(var(--dark-300));
}

@media screen and (min-width: 992px) {
	.dashboard-menu__body .accordion-item {
		background: transparent;
	}
}

.dashboard-menu__body .accordion-button {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 15px;
	color: hsl(var(--dark));
	font-size: 14px;
	line-height: 1.2;
}

@media screen and (min-width: 992px) {
	.dashboard-menu__body .accordion-button {
		background: hsl(var(--base) / 0.1);
		color: hsl(var(--dark));
	}
}

.dashboard-menu__body .accordion-button:focus {
	box-shadow: none;
}

.dashboard-menu__body .accordion-button:hover {
	color: hsl(var(--base));
}

@media screen and (min-width: 992px) {
	.dashboard-menu__body .accordion-button:hover {
		color: hsl(var(--base));
	}
}

.dashboard-menu__body .accordion-button::after {
	content: "\f107";
	font-family: "Line Awesome Free";
	font-weight: 900;
	background-image: unset;
}

.dashboard-menu__body .accordion-button__icon {
	display: inline-block;
	flex-shrink: 0;
	font-size: 24px;
	line-height: 1;
	color: hsl(var(--base));
}

.dashboard-menu__body .accordion-body {
	padding: 0;
}

.dashboard-menu__body .accordion.has-sub .accordion-button {
	padding-left: 48px;
	padding-right: 15px;
	background: hsl(var(--dark-300));
}

@media screen and (min-width: 992px) {
	.dashboard-menu__body .accordion.has-sub .accordion-button {
		background: transparent;
	}
}

.dashboard-menu__body .accordion.has-sub .accordion-button:hover {
	box-shadow: none;
	color: hsl(var(--light));
}

@media screen and (min-width: 992px) {
	.dashboard-menu__body .accordion.has-sub .accordion-button:hover {
		color: hsl(var(--base));
	}
}

.dashboard-menu__body .accordion.has-sub .accordion-button:focus {
	box-shadow: none;
	color: hsl(var(--light));
}

@media screen and (min-width: 992px) {
	.dashboard-menu__body .accordion.has-sub .accordion-button:focus {
		color: hsl(var(--base));
	}
}

.dashboard-menu__list {
	gap: 0;
}

@media screen and (min-width: 992px) {
	.dashboard-menu__list {
		background: transparent;
		gap: 0;
	}
}

@media screen and (min-width: 992px) {
	.dashboard-menu__list li {
		background: transparent;
	}

	.dashboard-menu__list li:last-child {
		border-bottom: none;
	}
}

.dashboard-menu__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 15px;
	background: transparent;
	font-size: 14px;
	line-height: 1.2;
	color: hsl(var(--black));
}

.dashboard-menu__link:hover {
	color: hsl(var(--base));
}

.dashboard-menu__icon {
	display: inline-block;
	flex-shrink: 0;
	line-height: 1;
}

.dashboard-menu__icon img {
	height: 14px;
	width: 14px;
}

.dashboard-menu__text {
	display: block;
	flex-grow: 1;
}

.dashboard-menu__inner {
	--gap: 0;
}

.dashboard-menu__inner>li {
	background: #f9f9f9;
	border-bottom: 1px solid hsl(var(--base) / 0.1);
}

.dashboard-menu__inner>li:last-child {
	border-bottom: none;
}

.menu-blance {
	margin: 15px;
}

.dashboard-menu__inner-link {
	display: block;
	padding: 10px 10px 10px 48px;
	font-size: 14px;
	line-height: 1.2;
	color: hsl(var(--dark));
}

.dashboard-menu__inner-link:hover {
	color: hsl(var(--base));
}

/*---------------------------------------
    2.41 Dashboard Sub Menu
-----------------------------------------*/
.dashboard-submenu {
	--gap: 0;
}

.dashboard-submenu>li {
	border-bottom: 1px solid hsl(var(--light) / 0.1);
}

.dashboard-submenu>li:last-child {
	border-bottom: none;
}

.dashboard-submenu__link {
	display: flex;
	padding: 8px 10px 8px 48px;
	font-size: 13px;
	color: hsl(var(--light));
	transition: all 0.3s ease;
}

@media screen and (min-width: 992px) {
	.dashboard-submenu__link {
		background: hsl(var(--dark) / 0.05);
		color: hsl(var(--dark));
	}
}

.dashboard-submenu__link:hover {
	color: hsl(var(--base));
}

/*---------------------------------------
    2.42 Dashboard Menu Toggler
-----------------------------------------*/

.dashboard-menu-open .dashboard-menu {
	visibility: visible;
	opacity: 1;
	transform: translateX(0);
}

.dashboard-menu__link.active .dashboard-menu__icon,
.dashboard-menu__link.active,
.dashboard-menu__inner-link.active {
	color: hsl(var(--base));
	font-weight: 500;
}

.dashboard-menu__inner {
	display: none;
}

.dashboard-menu__list li.active .dashboard-menu__inner {
	display: block;
}

@media (min-width: 992px) {
	.dashboard-sidebar::-webkit-scrollbar {
		width: 5px;
	}

	.dashboard-sidebar::-webkit-scrollbar-track {
		background-color: #cccccc;
	}

	.dashboard-sidebar::-webkit-scrollbar-thumb {
		background: hsl(var(--base));
		background: #aaaaaa;
	}
}

.dashboard-menu__list li .accordion-button.rotate::after {
	content: "\f106";
	color: hsl(var(--base));
}

@media (max-width: 991px) {
	.dashboard-menu__inner-link.active {
		background-color: hsl(var(--base) / 0.3);
	}
}

.dashboard-sidebar {
	position: sticky;
	top: 120px;
	z-index: 99;
}

@media (max-width: 991px) {
	.dashboard-sidebar {
		z-index: 9999;
	}
}



.dashboard-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	--sidebar-width: 270px;
}

.dashboard-right {
	width: calc(100% - (var(--sidebar-width) + 32px));
}

.dashboard-sidebar {
	width: var(--sidebar-width);
	flex-shrink: 0;
}

@media (max-width: 991px) {
	.dashboard-sidebar {
		position: fixed;
		background: hsl(var(--white));
		z-index: 9999;
		transform: translateX(-100%);
		transition: all 0.3s ease;
		height: calc(100vh - var(--nav-h));
		width: 320px;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
	}

	.dashboard-sidebar.active-sidebar {
		transform: translate(0);
	}

	.dashboard-menu {
		flex: 1;
		overflow-y: auto;
	}

	.dashboard-right {
		width: 100%;
	}
}

::placeholder,
.form-control,
.form--control {
	font-size: 0.875rem;
}

@media (max-width: 1199px) {
	.action-area .btn {
		padding: 0.5rem;
	}
}

/* =======================================================================
   ARKBET — dark-theme dashboard text overrides
   The theme's dashboard styles assume white cards, so card values, table
   cells, dates and dividers render dark-on-dark. Force them light.
   Badges and .text--success/.text--danger keep their own colours.
   ======================================================================= */
.dashboard-right .card { color: #d4d7df; }

.dashboard-right .card .card-body h1,
.dashboard-right .card .card-body h2,
.dashboard-right .card .card-body h3,
.dashboard-right .card .card-body h4,
.dashboard-right .card .card-body h5,
.dashboard-right .card .card-body h6,
.dashboard-right .card .card-body .h4,
.dashboard-right .card .card-body strong,
.dashboard-right .card .card-body b,
.dashboard-right .card h4,
.dashboard-right h4.mb-0 { color: #ffffff !important; }

.dashboard-right > .d-flex > h5,
.dashboard-right .dashboard-title,
.dashboard-right h5.m-0 { color: #ffffff !important; }

.dashboard-right .card .text-muted,
.dashboard-right .text-muted,
.dashboard-right small.text-muted { color: rgba(255, 255, 255, 0.62) !important; }

/* tables — any table on the dashboard, not just custom--table */
.dashboard-right .custom--table thead th,
.dashboard-right table thead th { color: #ffffff !important; }

.dashboard-right .custom--table tbody td,
.dashboard-right table tbody td {
    color: #e6e8ee !important;
    background-color: transparent !important;
}
.dashboard-right .custom--table tbody tr,
.dashboard-right table tbody tr { background-color: transparent !important; }

.dashboard-right .custom--table tbody td small,
.dashboard-right .custom--table tbody td em {
    color: rgba(255, 255, 255, 0.65) !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap;
}

/* widget stat cards */
.dashboard-right .widget-card--secondary .widget-card__balance { color: #ffffff !important; }
.dashboard-right .widget-card--secondary .widget-card__balance-text { color: rgba(255, 255, 255, 0.82) !important; }

/* dividers */
.dashboard-right hr {
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.15) !important;
    opacity: 1 !important;
}