/* maritime-red.css — RED-dominant black theme with gold highlights + green results.
   Palette measured from live kapal4d.com (2026-07-07). kapal4d reads RED: the
   menu bar, running-text bar, banners, side promos and market cards are all red;
   GOLD is used only for text/logo/date; results are green; login blue, daftar orange.
   Token roles therefore: RED drives chrome/surfaces/borders/active (--accent),
   GOLD is a secondary highlight (date, footer titles, username, jackpot, pills).
     menu bar red   #cc0000  (bgtopnav.png sampled 255,0,0 -> 202,0,0)
     market card red#880000  (.card-market bg) / navbar base #0e0000
     brand gold     #ffd700  (body/td/th/date computed color)
     link red       #ff6666  (pasaran <a> computed color)
     result green   #5cb85c  · login blue #0275d8 · daftar orange #f0ad4e
     body bg        #000000 (kapal pure black)
   Structure cloned from vampire-red.css (the canonical red theme) so the 108-var
   contract holds; hues swapped to kapal4d's exact measured values. */
:root {
    --primary-bg: #000000;
    --secondary-bg: #1a0505;
    --panel-bg: #000000;
    --card-bg: #1a0505;
    --text-main: #ffd700;
    --text-muted: #c9a86a;
    --text-muted-strong: #ffe9a8;
    --top-strip-text: #ffd700;
    --accent: #cc0000;
    --accent-soft: #ff6666;
    --accent-danger: #cc0000;
    --accent-success: #5cb85c;
    --accent-info: #0275d8;
    --accent-brand: #880000;
    --accent-balance-side: #ffd700;
    --border-soft: #3d0a0a;
    --mega-border-color: #880000;
    --form-border: #3d0a0a;
    --navbar-bg: rgba(14, 0, 0, 0.98);
    --sidebar-bg: #000000;
    --sidebar-header-bg: #0e0000;
    --overlay-bg: rgba(0, 0, 0, 0.85);
    --overlay-strong: #000000;
    --footer-bg: #000000;
    --footer-title: #ffd700;
    --provider-card-bg: #3d0a0a;
    --provider-card-border: rgba(204, 0, 0, 0.3);
    --provider-card-border-hover: var(--accent);
    --provider-pill-bg: #0e0000;
    --provider-pill-border: #880000;
    --provider-pill-text: #ffd700;
    --telegram-grad-from: #cc0000;
    --telegram-grad-to: #880000;
    --sidebar-username: #ffd700;
    --sidebar-item-icon: #cc0000;
    --sidebar-item-active-bg: rgba(204, 0, 0, 0.15);
    --sidebar-item-active-border: var(--accent);
    --sidebar-logout-bg: #880000;
    --sidebar-logout-text: #ffffff;
    --result-card-bg: var(--card-bg);
    --result-header-bg: var(--secondary-bg);
    --result-row-bg: rgba(26, 5, 5, 0.95);
    --result-row-alt-bg: rgba(26, 5, 5, 0.85);
    --result-tabs-bg: var(--primary-bg);
    --result-tab-active-bg: var(--secondary-bg);
    --result-tab-active-border: #ffd700;
    --result-pill-bg: rgba(204, 0, 0, 0.15);
    --result-pill-text: #5cb85c;
    --status-online: var(--accent-success);
    --status-offline: var(--accent-danger);
    --status-maintenance: var(--accent-brand);
    --badge-pill-bg: rgba(26, 5, 5, 0.9);
    --badge-hot-bg: #cc0000;
    --badge-maxwin-bg: #5cb85c;
    --badge-buyspin-bg: #f0ad4e;
    --badge-jackpot-bg: #ffd700;
    --focus-shadow-color: rgba(204, 0, 0, 0.25);
    --theme-glow: 0 0 15px rgba(204, 0, 0, 0.25);
    --theme-primary: #cc0000;
    --theme-secondary: #ffd700;
    --dl-color-theme-accent1: #ffd700;
    --provider-bar-bg: color-mix(in srgb, var(--provider-card-bg) 55%, var(--panel-bg));
    --provider-bar-bg-2: color-mix(in srgb, var(--provider-card-bg) 35%, var(--primary-bg));
    --provider-bar-border: color-mix(in srgb, var(--provider-card-border) 70%, transparent);
    --provider-bar-inner-glow: color-mix(in srgb, var(--accent) 18%, transparent);
    --provider-arrow-bg: rgba(26, 5, 5, 0.8);
    --provider-arrow-border: rgba(204, 0, 0, 0.4);
    --provider-item-bg: color-mix(in srgb, var(--secondary-bg) 70%, var(--primary-bg));
    --provider-item-border: color-mix(in srgb, var(--border-soft) 70%, transparent);
    --provider-item-text: var(--text-muted-strong);
    --provider-active-border: var(--accent);
    --provider-active-glow: var(--focus-shadow-color);
    --provider-logo-plate-bg: rgba(255, 255, 255, 0.9);
    --provider-logo-plate-shadow: rgba(0, 0, 0, 0.3);
    --provider-logo-plate-inset-y: 14px;
    --provider-logo-plate-inset-x: 26px;
    --provider-logo-plate-radius-offset: 6px;
    --provider-mega-plate-bg: rgba(255, 255, 255, 0.9);
    --provider-mega-plate-border: rgba(204, 0, 0, 0.15);
    --provider-mega-plate-shadow: rgba(0, 0, 0, 0.4);
    --provider-mega-plate-radius: 14px;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --scrollbar-thumb: #661111;
    --thumb-overlay-gradient: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
    --hero-card-border-color: rgba(204, 0, 0, 0.3);
    --hero-card-shadow-color: rgba(0, 0, 0, 0.9);
    --hero-badge-bg: rgba(204, 0, 0, 0.2);
    --hero-badge-text: #ffd700;
    --hero-stat-bg: rgba(26, 5, 5, 0.9);
    --hero-stat-border-color: rgba(204, 0, 0, 0.4);
    --hero-chip-border-color: rgba(255, 255, 255, 0.1);
    --hero-chip-bg: rgba(0, 0, 0, 0.9);
    --hero-rtp-inner-border-color: rgba(255, 255, 255, 0.1);
    --providers-strip-bg: rgba(0, 0, 0, 0.9);
    --auth-border-bottom: rgba(204, 0, 0, 0.3);
    --auth-balance-border: rgba(255, 255, 255, 0.1);
    --auth-level-bg: rgba(255, 255, 255, 0.1);
    --auth-icon-btn-bg: rgba(255, 255, 255, 0.15);
    --auth-icon-btn-alt-bg: rgba(255, 255, 255, 0.1);
    --auth-progress-bar-bg: rgba(255, 255, 255, 0.15);
    --auth-desktop-balance-border: rgba(255, 255, 255, 0.1);
    --overlay-shadow-color: rgba(0, 0, 0, 0.8);
    --provider-card-shadow-color: rgba(0, 0, 0, 0.6);
    --provider-card-shadow-hover-color: rgba(204, 0, 0, 0.3);
    --submenu-border-top: rgba(102, 17, 17, 0.7);
    --auth-side-active-bg: rgba(204, 0, 0, 0.2);
    --auth-side-parent-open-bg: rgba(26, 5, 5, 0.95);
}

/* ============================================================================
   Reference color match — kapal4d.com.
   These are NON-:root selector rules, intentionally kept INSIDE this theme
   file: maritime-red.css is only <link>ed for downlines whose theme is
   "maritime-red", so every rule below is automatically scoped to those sites
   and CANNOT affect any other template/theme (base CSS is untouched). Colors
   reuse existing theme tokens where the reference value already exists as one.
   ========================================================================== */

/* Body: reference uses a black -> dark-grey vertical gradient (not flat black). */
body {
  background: linear-gradient(#000000 0%, #242424 31%, #666666 100%);
}

/* Desktop menu links = white on the red bar (reference). The .navbar-large
   prefix lifts specificity above Bootstrap's default navbar link color. */
.navbar-large .navbar-nav .nav-item .nav-link,
.navbar-large .navbar-nav .nav-item .nav-link:hover,
.navbar-large .navbar-nav .nav-item .nav-link:focus {
  color: #ffffff;
}
/* Active item: white text on a blue box (reference highlights the active tab
   in blue, not the bar's red). Blue already exists as --accent-info (#0275d8). */
.navbar-large .navbar-nav .nav-item .nav-link.active {
  background-color: var(--accent-info);
  color: #ffffff;
}

/* Header sign-in controls — match reference exactly. Scoped to the header
   sign-in form so other danger/warning buttons keep their semantic colors. */
#btn-login-header,
#btn-login-header:hover,
#btn-login-header:focus,
#btn-login-header:active {
  /* reference LOGIN is blue (#0275d8 = --accent-info), not the Bootstrap red */
  background-color: var(--accent-info);
  border-color: var(--accent-info);
  color: #ffffff;
}
#form-header-signin .btn-warning,
#form-header-signin .btn-warning:hover,
#form-header-signin .btn-warning:focus,
#form-header-signin .btn-warning:active {
  /* reference DAFTAR is orange (#f0ad4e = --badge-buyspin-bg) with white text */
  background-color: var(--badge-buyspin-bg);
  border-color: var(--badge-buyspin-bg);
  color: #ffffff;
}
#form-header-signin .form-control {
  /* reference username/password are white fields with dark text */
  background-color: #ffffff;
  color: #55595c;
}