/*
 * BetKika brand layer for the legacy Bootstrap theme.
 *
 * Only references tokens from brand-tokens.css - never literal colour values,
 * so the brand kit stays the single source of truth (POLICY.md 7).
 * Retired file-by-file as views migrate to Tailwind (POLICY.md 3).
 */

/* Electric Lime is a light accent: white text on it lands at 1.36:1, far under
   the 4.5:1 AA floor. Every rule in main.css that paints light text onto the
   base colour is re-inked in Midnight Navy, which measures 13.96:1. */
.back-to-top,
.btn--base,
.btn--signup,
.btn--signup:hover,
.btn--view,
.btn--view:hover,
.pagination .page-item.active .page-link,
.pagination .page-link:hover,
span.bet-count,
.support-card__file:hover,
.social-list__icon i,
.social-list__icon span,
.contact-card__icon,
.btn-outline--base.active,
.btn-outline--base:hover,
.bet-type__live:hover,
.bet-type__upcoming:hover,
.bet-type__live.active,
.bet-type__upcoming.active {
  color: hsl(var(--on-base)) !important;
}

/* The sports rail now carries an icon, a label, a count and a chevron per row,
   like the reference layout. 120px cannot hold that. This one variable drives
   both the rail's own width and the betting body's width calc in main.css, so
   overriding it here keeps the two in step. */
:root {
  --left-side: 232px;
}

/* ---------------------------------------------------------------------------
 * Dark theme - OPT IN.
 *
 * Light is the default, matching how bookmakers actually ship. These rules
 * apply only when the page carries data-theme="dark", set by the header toggle
 * and remembered per visitor. Token references only, no literal colour.
 * ------------------------------------------------------------------------ */


/* ---------------------------------------------------------------------------
 * Dark surface pass.
 *
 * The brand kit is dark-first - its own asset preview sets the whole palette
 * on Midnight Navy - but the theme shipped light, which left the accents
 * floating on grey. These rules move the page onto Navy with Deep Slate
 * surfaces so Lime, Emerald, Gold and Coral read as accents instead of
 * decoration. Token references only, no literal colour.
 * ------------------------------------------------------------------------ */

[data-theme="dark"] {
  background: hsl(var(--dark)) !important;
  color: hsl(var(--white));
}



[data-theme="dark"] .sports-body,
[data-theme="dark"] .home-page {
  background: hsl(var(--dark)) !important;
}



/* Every surface main.css painted pure white becomes Deep Slate. */
[data-theme="dark"] .custom--card,
[data-theme="dark"] .modal .modal-content,
[data-theme="dark"] .sub-category-drawer,
[data-theme="dark"] .support-card,
[data-theme="dark"] .login-form,
[data-theme="dark"] .contact-card,
[data-theme="dark"] .qr-code-wrapper,
[data-theme="dark"] .bg--light,
[data-theme="dark"] .footer,
[data-theme="dark"] .footer-bottom,
[data-theme="dark"] .dropdown-lang .dropdown-menu,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .list--group .list-group-item,
[data-theme="dark"] .sports-card,
[data-theme="dark"] .sports-card-left,
[data-theme="dark"] .betslip-item,
[data-theme="dark"] .betslip,
[data-theme="dark"] .form-group .input-group-text.mobile-code {
  background: hsl(var(--surface)) !important;
  color: hsl(var(--white));
  border-color: hsl(var(--white) / 0.12);
}



[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .modal .modal-content h1,
[data-theme="dark"] .modal .modal-content h2,
[data-theme="dark"] .modal .modal-content h3,
[data-theme="dark"] .modal .modal-content h4,
[data-theme="dark"] .modal .modal-content h5,
[data-theme="dark"] .modal .modal-content h6 {
  color: hsl(var(--white));
}



[data-theme="dark"] .dropdown-menu .dropdown-item {
  color: hsl(var(--white));
}



[data-theme="dark"] .dropdown-menu .dropdown-item:hover,
[data-theme="dark"] .dropdown-menu .dropdown-item:focus {
  background: hsl(var(--white) / 0.08);
  color: hsl(var(--base));
}



/* Inputs were tinted with the accent, which read as a green wash. */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form--control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .betslip__footer-bottom .form--control,
[data-theme="dark"] .betslip__footer-bottom .form--control:focus {
  background: hsl(var(--dark)) !important;
  border-color: hsl(var(--white) / 0.15) !important;
  color: hsl(var(--white)) !important;
}



[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form--control::placeholder {
  color: hsl(var(--secondary));
}



[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form--control:focus,
[data-theme="dark"] .form-select:focus {
  border-color: hsl(var(--base)) !important;
  box-shadow: none !important;
}



[data-theme="dark"] label,
[data-theme="dark"] .form-label {
  color: hsl(var(--white));
}



/* Muted copy uses Cool Gray rather than a washed-out black. */
[data-theme="dark"] .text--small,
[data-theme="dark"] .empty-message p,
[data-theme="dark"] small {
  color: hsl(var(--secondary));
}



/* Bet slip. main.css hardcodes #fff, #f3f3f5, #334155 and #94a3b8 here, so the
   token pass above could not reach it - it stayed a white slab on a dark page,
   and the inactive tab was dark-on-dark. */
[data-theme="dark"] .betslip,
[data-theme="dark"] .betslip__body,
[data-theme="dark"] .betslip__footer,
[data-theme="dark"] .betslip-item,
[data-theme="dark"] .betslip__head {
  background: hsl(var(--surface)) !important;
}



[data-theme="dark"] .betslip__footer-text,
[data-theme="dark"] .betslip__list-odd,
[data-theme="dark"] .betslip__list-ratio,
[data-theme="dark"] .betslip__list-ratio span,
[data-theme="dark"] .betslip__list-match,
[data-theme="dark"] .betslip__list-question,
[data-theme="dark"] .betslip__list-team,
[data-theme="dark"] .betslip__list-team .name,
[data-theme="dark"] .betslip__list-teams .vs,
[data-theme="dark"] .betslip__list-rates label,
[data-theme="dark"] .betslip__list-rates .input-group-text,
[data-theme="dark"] .betslip__list-rates .form--control,
[data-theme="dark"] .betslip__list-rates .form--control::placeholder,
[data-theme="dark"] .betslip-item-league p,
[data-theme="dark"] .betslip-item-league i,
[data-theme="dark"] .betslip-item-league__name,
[data-theme="dark"] .betslip-item-team__name,
[data-theme="dark"] .betslip-item-stake__label,
[data-theme="dark"] .betslip-item-stake .input-group .input-group-text,
[data-theme="dark"] .betslip-item-return__text span,
[data-theme="dark"] .betslip__head-content {
  color: hsl(var(--white)) !important;
}



[data-theme="dark"] .betslip-item-market__type,
[data-theme="dark"] .betslip-item-market__label,
[data-theme="dark"] .betslip-item-return__text,
[data-theme="dark"] .betslip-input-inner,
[data-theme="dark"] .single-bet .betslip-return,
[data-theme="dark"] .betslip-item-stake .input-group .form-control::placeholder {
  color: hsl(var(--secondary)) !important;
}



/* Returns are money: Emerald, the palette's positive colour. */
[data-theme="dark"] .betslip-item-return__text span,
[data-theme="dark"] .single-bet .betslip-return span {
  color: hsl(var(--success)) !important;
}



[data-theme="dark"] .betslip-item-close {
  background: hsl(var(--white) / 0.1) !important;
  color: hsl(var(--white)) !important;
}



[data-theme="dark"] .bet-type__btn {
  color: hsl(var(--white));
  border-color: hsl(var(--white) / 0.2);
}



/* A selected outcome sits on Lime, so it is inked Navy like every other
   on-base surface. */
[data-theme="dark"] .betslip__list-selected-team .name {
  color: hsl(var(--on-base)) !important;
}

/* Cookie notice is a bottom bar now; neutralise the old floating-card geometry
   from the template's custom.css while keeping its .hide toggle working. */
.cookies-card {
  max-width: none !important;
  width: auto !important;
  right: auto !important;
  left: 0 !important;
  border-radius: 0 !important;
  padding: 0.75rem 1rem !important;
}

/* Minimal preflight, scoped to our own markup.
 *
 * Tailwind's preflight is deliberately not loaded (it would flatten the legacy
 * Bootstrap theme), which means a bare <button> keeps the user agent's 2px
 * outset border and grey face. That produced the white boxes in the header and
 * the heavy dark outlines on the odds buttons.
 *
 * :where() gives this zero specificity, so any bk: utility still wins - it only
 * clears chrome nothing else has claimed. Applies only to elements carrying a
 * bk: class, so legacy .btn markup is untouched. */
:where(button[class*="bk:"],
       input[class*="bk:"],
       select[class*="bk:"],
       textarea[class*="bk:"]) {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background-color: transparent;
  background-image: none;
  font: inherit;
  color: inherit;
}

:where(button[class*="bk:"]) {
  cursor: pointer;
}

/* One dark surface for the whole chrome.

   main.css paints the header --dark-600, a shade darker than the Midnight Navy
   the drawer and the phone tab bar use, so the three did not line up - and the
   fade at the end of the header's swipe rail, which has to match the surface it
   fades into, read as a lighter rectangle over the last item. */
/* The header is TWO rows and TWO tones: row 1 (sections) paints itself
   chrome-deep with its own utility, row 2 sits on this. One element, two
   bands, so the sticky offsets and --header-h still measure one box. */
.header-primary {
  background: var(--brand-chrome);
}

/* The header is brand green at every width - the rule above is the whole
   story, and there is no phone override under it any more.

   It was white below lg for a while, on the argument that a dark slab across
   the top of a white sheet is a frame the eye reads before the football. What
   that missed is that a phone header has no rail beside it and no page chrome
   around it: white on white, the bar stopped being chrome at all and read as
   the first card in the list, with the balance and the logo floating in it.
   The brand field is what tells a thumb where the page stops and the app
   begins, and it is what every book on the device does.

   The TAB BAR keeps the phone treatment. It sits under the content rather than
   over it, a thumb is already there, and two dark slabs clamped top and bottom
   of a white sheet is the frame the original note was right about. The casino
   and the watch player still opt out with .chrome-on-dark, because they paint
   their own dark body and a white bar at the foot of a dark page is the same
   mismatch in the other direction. */
@media (max-width: 991px) {
  .bk-tabbar:not(.chrome-on-dark) {
    background: var(--brand-card-surface);
    border-top: 1px solid var(--brand-border-subtle);
  }

  [data-theme="dark"] .bk-tabbar:not(.chrome-on-dark) {
    background: var(--brand-surface-raised);
    border-color: rgba(255, 255, 255, 0.08);
  }
}

/* The header is TWO rows below lg - a section strip over an identity bar - so
   the sticky offsets that key off --header-h take the taller value. app.js
   measures the real element into this variable on load; this is what the first
   paint uses, and being a few pixels out for one frame is the whole cost of
   being wrong here.

   --nav-h has to clear the phone's home indicator as well as the tab bar, or
   the bet slip's bottom edge sits under it. */
@media (max-width: 991px) {
  :root {
    --header-h: 80px;
    --nav-h: calc(65px + env(safe-area-inset-bottom));
  }

  /* The page's own bottom padding was a hardcoded 60px, so it went stale the
     moment the bar's height changed. One source of truth instead. */
  .sports-body {
    padding-bottom: calc(var(--nav-h) + 1.5rem);
  }
}

/* Typography: Poppins for display, Inter for headings and UI, Roboto for body.
   The theme already keys off --heading-font and --body-font, so setting these
   re-skins every existing view too. */
:root {
  --display-font: "Poppins", "Inter", ui-sans-serif, system-ui, sans-serif;
  --heading-font: "Inter", ui-sans-serif, system-ui, sans-serif;
  --body-font: "Roboto", ui-sans-serif, system-ui, sans-serif;
}

h1, h2, .display-font {
  font-family: var(--display-font);
}

/* The login form partial is shared by the auth page and the home-page login
   modal. It is styled for a dark ground, so the modal takes one too - otherwise
   white-on-white in light mode. */
.login-modal .modal-content {
  background: hsl(var(--surface)) !important;
  color: hsl(var(--white));
  border: 0;
}

.login-modal .modal-content h4,
.login-modal .modal-content .close {
  color: hsl(var(--white));
}

/* The sports rail is a white sheet now, not a navy column (see
   partials/category). main.css still paints it --dark-600 and hangs a
   light-on-dark divider off it, so the divider follows it across. The Tailwind
   classes on the element already win the background and the scrollbar
   (bk:scrollbar-rail); this is the part that lives only in the legacy sheet. */
.sports-category {
  border-right: 1px solid var(--brand-border-subtle);
}

[data-theme="dark"] .sports-category {
  border-right-color: rgba(255, 255, 255, 0.08);
}

/* The bet slip, desktop: the rail's mirror image.

   It had no surface of its own, so it sat on the green band that belongs to
   the board between the two columns - the band ran down behind the slip, and
   the inactive My Bets tab, dark ink on a transparent pill, vanished into it.
   A white column the full height of the screen with a hairline on its inner
   edge is what the sports rail opposite already is, and it leaves the band
   showing only where the content is. */
@media (min-width: 992px) {
  .betslip {
    background: var(--brand-card-surface);
    border-left: 1px solid var(--brand-border-subtle);
  }

  /* The stake box was a white card on a transparent column. On a white
     column it needs its own edge, or it has no outline at all. */
  .betslip__footer {
    border: 1px solid var(--brand-border-subtle);
  }
}

[data-theme="dark"] .betslip,
[data-theme="dark"] .betslip__footer {
  border-color: rgba(255, 255, 255, 0.08);
}

/* Bet Slip / My Bets: one segmented control, not two outlined pills.

   The inactive tab was dark ink inside a 30%-dark outline on nothing, and the
   active one filled with the legacy base colour. The track is the page tint,
   the chosen tab is the brand green by token rather than through --base, and
   the other one is muted ink that stays readable on every surface. */
.betslip-header .bet-type {
  gap: 4px;
  padding: 4px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: var(--brand-page-surface);
}

.betslip-header .bet-type__btn {
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  font-weight: 600;
  color: var(--brand-ink-muted);
}

.betslip-header .bet-type__btn:hover {
  background: var(--brand-card-surface);
  color: var(--brand-deep);
}

.betslip-header .bet-type__btn:has(input:checked) {
  background: var(--brand-primary);
  color: var(--brand-white);
  box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--brand-primary) 60%, transparent);
}

.betslip-header .bet-type__btn:has(input:focus-visible) {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

[data-theme="dark"] .betslip-header .bet-type {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .betslip-header .bet-type__btn {
  color: rgba(255, 255, 255, 0.72);
}

[data-theme="dark"] .betslip-header .bet-type__btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--brand-white);
}

[data-theme="dark"] .betslip-header .bet-type__btn:has(input:checked) {
  background: var(--brand-primary);
  color: var(--brand-white);
}