/*
 * winoz-theme.css — WinozPay brand override layer.
 *
 * Re-maps the Metronic theme PRIMARY from the stock #ed4545 red to the
 * Winoz brand orange #ff4f00 (active/hover #ee3713, light tint
 * rgba(255,79,0,.1)) for BOTH compiled bundles
 * (wwwroot/admin/css/style.bundle.css and wwwroot/client/css/style.bundle.css).
 *
 * WHY an override file instead of recompiling the SASS sources: the compiled
 * bundles consume var(--bs-primary*) almost everywhere, so a small file loaded
 * AFTER the bundle re-brands deterministically without a fragile node build,
 * and survives bundle upgrades. The bundles must never be edited directly.
 *
 * The few places the bundles hard-code the compiled literal (#ed4545 /
 * 237, 69, 69) instead of the variable are overridden individually below;
 * both bundles share identical color rules, so one file covers both.
 */

/* ---------------------------------------------------------------------------
 * 1. Bootstrap + Metronic token remap — light theme.
 *    Same specificity as the bundle's [data-bs-theme=light] block; this file
 *    loads later, so these win. :root covers any markup outside a theme scope.
 * ------------------------------------------------------------------------- */
:root,
[data-bs-theme=light] {
  /* Bootstrap core */
  --bs-primary: #ff4f00;
  --bs-primary-rgb: 255, 79, 0;
  --bs-primary-text-emphasis: #662000;   /* shade-60% of #ff4f00 */
  --bs-primary-bg-subtle: #ffdccc;       /* tint-80% */
  --bs-primary-border-subtle: #ff9566;   /* tint-40% */
  --bs-link-color: #ff4f00;
  --bs-link-color-rgb: 255, 79, 0;
  --bs-link-hover-color: #ee3713;
  --bs-link-hover-color-rgb: 238, 55, 19;
  --bs-focus-ring-color: rgba(255, 79, 0, 0.25);

  /* Metronic component tokens */
  --bs-primary-active: #ee3713;
  --bs-primary-light: rgba(255, 79, 0, 0.1);
  --bs-primary-inverse: #ffffff;
  --bs-primary-clarity: rgba(255, 79, 0, 0.2);
  --bs-text-primary: #ff4f00;
  --bs-component-active-bg: #ff4f00;
  --bs-component-hover-color: #ff4f00;
  --bs-component-checked-bg: #ff4f00;
  --bs-menu-link-color-hover: #ff4f00;
  --bs-menu-link-color-show: #ff4f00;
  --bs-menu-link-color-here: #ff4f00;
  --bs-menu-link-color-active: #ff4f00;
  --bs-ribbon-label-bg: #ff4f00;
  --bs-scrolltop-bg-color: #ff4f00;
  --bs-scrolltop-bg-color-hover: #ee3713;
  --bs-header-btn-icon-color-active: #ff4f00;
}

/* ---------------------------------------------------------------------------
 * 2. Token remap — dark theme. The orange stays the brand anchor; tints are
 *    re-derived against a dark surface (subtle backgrounds darken instead of
 *    lighten, link hover lightens for contrast).
 * ------------------------------------------------------------------------- */
[data-bs-theme=dark] {
  --bs-primary: #ff4f00;
  --bs-primary-rgb: 255, 79, 0;
  --bs-primary-text-emphasis: #ff9566;   /* tint-40% reads on dark */
  --bs-primary-bg-subtle: #331000;       /* shade-80% */
  --bs-primary-border-subtle: #992f00;   /* shade-40% */
  --bs-link-color: #ff4f00;
  --bs-link-color-rgb: 255, 79, 0;
  --bs-link-hover-color: #ff7038;
  --bs-link-hover-color-rgb: 255, 112, 56;
  --bs-focus-ring-color: rgba(255, 79, 0, 0.25);

  --bs-primary-active: #ee3713;
  --bs-primary-light: rgba(255, 79, 0, 0.15); /* tinted bg must stay dark */
  --bs-primary-inverse: #ffffff;
  --bs-primary-clarity: rgba(255, 79, 0, 0.2);
  --bs-text-primary: #ff4f00;
  --bs-component-active-bg: #ff4f00;
  --bs-component-hover-color: #ff4f00;
  --bs-component-checked-bg: #ff4f00;
  --bs-menu-link-color-hover: #ff4f00;
  --bs-menu-link-color-show: #ff4f00;
  --bs-menu-link-color-here: #ff4f00;
  --bs-menu-link-color-active: #ff4f00;
  --bs-ribbon-label-bg: #ff4f00;
  --bs-scrolltop-bg-color: #ff4f00;
  --bs-scrolltop-bg-color-hover: #ee3713;
  --bs-header-btn-icon-color-active: #ff4f00;
}

/* ---------------------------------------------------------------------------
 * 3. Bootstrap core button maps — compiled with literal colors, not vars.
 *    Metronic's .btn.btn-primary re-skins bg/border/color via the tokens
 *    above, but the focus-shadow rgb and any bare .btn-primary usage still
 *    come from these per-button variables.
 * ------------------------------------------------------------------------- */
.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #ff4f00;
  --bs-btn-border-color: #ff4f00;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #ee3713;
  --bs-btn-hover-border-color: #ee3713;
  --bs-btn-focus-shadow-rgb: 255, 79, 0;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #ee3713;
  --bs-btn-active-border-color: #ee3713;
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: #ff4f00;
  --bs-btn-disabled-border-color: #ff4f00;
}

.btn-outline-primary {
  --bs-btn-color: #ff4f00;
  --bs-btn-border-color: #ff4f00;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #ff4f00;
  --bs-btn-hover-border-color: #ff4f00;
  --bs-btn-focus-shadow-rgb: 255, 79, 0;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #ff4f00;
  --bs-btn-active-border-color: #ff4f00;
  --bs-btn-disabled-color: #ff4f00;
  --bs-btn-disabled-border-color: #ff4f00;
}

/* ---------------------------------------------------------------------------
 * 4. Checks, switches, radios, range — compiled literals in the bundles.
 * ------------------------------------------------------------------------- */
.form-check-input:checked {
  background-color: #ff4f00;
  border-color: #ff4f00;
}
.form-check-input[type=checkbox]:indeterminate {
  background-color: #ff4f00;
  border-color: #ff4f00;
}
/* solid variant re-declares the indeterminate literal at higher specificity */
.form-check.form-check-solid .form-check-input[type=checkbox]:indeterminate {
  background-color: #ff4f00;
}
.form-range::-webkit-slider-thumb {
  background-color: #ff4f00;
}
.form-range::-moz-range-thumb {
  background-color: #ff4f00;
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #ffffff, 0 0 0 0.25rem rgba(255, 79, 0, 0.25);
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #ffffff, 0 0 0 0.25rem rgba(255, 79, 0, 0.25);
}

/* ---------------------------------------------------------------------------
 * 5. Nav pills, focus rings, progress bars — compiled literals.
 * ------------------------------------------------------------------------- */
.nav-pills {
  --bs-nav-pills-link-active-bg: #ff4f00;
}
.nav-link:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(255, 79, 0, 0.25);
}
.progress,
.progress-stacked {
  --bs-progress-bar-bg: #ff4f00;
}

/* ---------------------------------------------------------------------------
 * 6. Odd literals: separator label variant and landing sticky header.
 * ------------------------------------------------------------------------- */
.separator.separator-content.border-primary::before,
.separator.separator-content.border-primary::after {
  border-color: #ff4f00 !important;
}
[data-kt-sticky-landing-header=on] .landing-header .menu .menu-link.active {
  color: #ff4f00;
}
@media (max-width: 991.98px) {
  .landing-header .menu .menu-link.active {
    color: #ff4f00;
  }
}