/* ============================================================
   Template-14 — Tema Desain Merah · Hitam · Orange
   Hanya design (warna, shadow, border, background).
   Tidak mengubah konten / teks / struktur HTML.
   Palette: #C41E1E (red) | #0A0A0A (black) | #FF6A00 (orange)
   ============================================================ */

:root {
  --hw-red: #c41e1e;
  --hw-red-deep: #8b1010;
  --hw-red-bright: #e02424;
  --hw-orange: #ff6a00;
  --hw-orange-soft: #ff8a00;
  --hw-orange-deep: #cc5500;
  --hw-black: #0a0a0a;
  --hw-coal: #120808;
  --hw-panel: #141010;
  --hw-panel-2: #1a0c0c;
  --hw-border: rgba(255, 106, 0, 0.28);
  --hw-border-red: rgba(196, 30, 30, 0.45);
  --hw-text: #f5f0eb;
  --hw-muted: #a89890;
  --hw-grad-btn: linear-gradient(180deg, #ff6a00 0%, #c41e1e 100%);
  --hw-grad-btn-hover: linear-gradient(180deg, #ff8a00 0%, #e02424 100%);
  --hw-grad-header: linear-gradient(180deg, #2a0a0a 0%, #120808 100%);
  --hw-grad-fire: linear-gradient(90deg, #c41e1e 0%, #ff6a00 50%, #c41e1e 100%);

  /* --- Override theme variables (desktop-red-white.css) --- */
  --body-theme-bg: #0a0a0a;
  --body-color: #e8e0d8;
  --a-color: #ff6a00;
  --a-focus-hover-color: #ff8a00;

  --topbar-cntr-bg: #0a0a0a;
  --topbar-left-section-item-color: #e8e0d8;
  --topbar-left-section-item-a-hover-color: #ff6a00;
  --topbar-left-section-language-selector-bg: #141010;
  --topbar-left-section-language-selector-li-border: 1px solid rgba(255, 106, 0, 0.35);

  --site-header-bg: #1a0808;
  --site-header-border: 3px solid #ff6a00;
  --top-menu-li-a-color: #fff;
  --top-menu-li-true-hover-a-color: #ff8a00;
  --top-menu-game-list-btop: 3px solid #ff6a00;
  --top-menu-game-list-bg: rgba(10, 5, 5, 0.96);
  --top-menu-game-list-bbot: 8px solid #c41e1e;
  --top-menu-game-list-li-a-background-bg: linear-gradient(89.19deg, rgba(196, 30, 30, 0) 0.7%, #c41e1e 99.42%);
  --top-menu-game-list-li-a-background-border: 1px solid #ff6a00;

  --login-panel-login-btn-bg: linear-gradient(to bottom, #2a1010 0%, #140808 100%);
  --login-panel-login-btn-color: #fff;
  --login-panel-login-btn-border: 1px solid rgba(255, 106, 0, 0.45);
  --login-panel-login-btn-hover-bg: linear-gradient(to bottom, #3d1212 0%, #1a0808 100%);
  --login-panel-register-btn-bg: linear-gradient(to bottom, #ff6a00 0%, #c41e1e 100%);
  --login-panel-register-btn-color: #fff;
  --login-panel-register-btn-hover-bg: linear-gradient(to bottom, #ff8a00 0%, #e02424 100%);

  --announcement-cntr-bg: #141010;
  --announcement-cntr-color: #e8e0d8;
  --announcement-cntr-section-announcement-bg: #c41e1e;
  --announcement-cntr-section-announcement-color: #fff;
  --announcement-cntr-list-li-color: #ffd4b0;

  --banner-bg: #0a0a0a;
  --banner-carousel-indicators-active-bg: #ff6a00;
  --banner-carousel-indicators-active-border: #c41e1e;

  --home-progressive-jackpot-bg: linear-gradient(#2a0808, #c41e1e, #2a0808);
  --home-progressive-jackpot-color: #fff;
  --home-progressive-jackpot-outer-cntr-bg: #0a0a0a;
  --home-progressive-jackpot-inner-cntr-bg: linear-gradient(#5a1010, #2a0800);
  --home-progressive-jackpot-border-cntr-border: 3px solid #ff6a00;
  --home-progressive-jackpot-jackpot-cntr-bg: linear-gradient(#e02424, #2a0800);
  --home-progressive-jackpot-jackpot-currency-color: #ff6a00;
  --home-progressive-jackpot-jackpot-play-text-color: #ff8a00;
  --home-progressive-jackpot-jackpot-play-text-label-color: #ff6a00;

  --lottery-result-cntr-bg: #1a1010;
  --lottery-result-cntr-title-bg: #c41e1e;
  --lottery-result-cntr-numbers-bg: #241010;

  --popular-games-bg: #120808;
  --popular-games-left-section-title-bg: #1a0c0c;
  --popular-games-left-section-title-color: #ff8a00;
  --popular-games-scrtabs-tab-cntr-bg: #1a1010;
  --popular-games-nav-tabs-li-a-bg: #2a1212;
  --popular-games-nav-tabs-li-a-active-bg: #c41e1e;
  --popular-games-scroll-arrow-bg: #1a1010;
  --popular-games-scroll-arrow-color: #ff6a00;
  --popular-games-tab-pane-bg: #141010;
  --popular-games-tab-content-border: 1px solid rgba(255, 106, 0, 0.25);

  --jackpot-winners-bg: #1a1010;
  --jackpot-winners-jackpot-winner-title-color: #ffd4b0;
  --jackpot-winners-winners-ticker-cntr-bg: #8b1010;
  --winners-ticker-ul-li-winner-info-color: #fff;
  --winners-ticker-ul-li-winner-amount-color: #ff8a00;

  --popular-game-title-cntr-title-span-color: #fff;
  --popular-game-title-cntr-title-span-bg: #c41e1e;
  --popular-game-title-cntr-title-span-after-bg: #c41e1e;
  --popular-game-title-cntr-content-border: 1px solid #ff6a00;
  --popular-game-title-cntr-content-game-list-game-item-game-name-color: #ff6a00;
  --popular-game-title-cntr-content-game-list-game-item-provider-name-color: #a89890;

  --home-game-list-cntr-title-span-color: #fff;
  --home-game-list-cntr-title-span-bg: #c41e1e;
  --home-game-list-cntr-title-span-after-bg: #c41e1e;
  --home-game-list-cntr-content-border: 1px solid #ff6a00;
  --home-game-list-cntr-content-game-list-game-item-game-name-color: #ff6a00;
  --home-game-list-cntr-content-game-list-game-item-provider-name-color: #a89890;

  --home-info-cntr-bg: #141010;
  --home-info-cntr-border: 2px solid #c41e1e;
  --home-info-cntr-tickercntr-bg: #1a1010;

  --game-list-title-bg: #1a1010;
  --game-list-bg: #141010;
  --game-list-game-item-bg: #1a0c0c;
  --game-list-game-name-bg: #c41e1e;
  --game-list-game-name-color: #fff;
  --game-list-game-player-color: #a89890;

  --play-now-bg: linear-gradient(to bottom, #ff6a00 0%, #c41e1e 50%, #8b1010 100%);
  --play-now-color: #fff;
  --play-now-hover-bg: #e02424;
  --free-play-bg: linear-gradient(to bottom, #2a2a2a 0%, #141414 100%);
  --free-play-color: #fff;

  --download-apk-content-bg: #1a0a0a;
  --download-apk-details-title-color: #fff;
  --download-apk-details-desc-color: #d0c0b0;
  --download-apk-details-btn-bg: linear-gradient(180deg, #ff6a00 0%, #c41e1e 100%);
  --download-apk-color: #fff;
  --download-apk-section-i-color: #ff6a00;
  --download-apk-btn-bg: linear-gradient(to bottom, #ff6a00 0%, #c41e1e 100%);
  --download-apk-btn-color: #fff;
  --download-apk-btn-hover-color: #fff;

  --site-footer-border: 2px solid #c41e1e;
  --site-footer-bg: no-repeat center #0a0a0a;
  --footer-separator-border: 1px dotted rgba(255, 106, 0, 0.25);
  --footer-links-li-a-color: #a89890;
  --footer-links-li-a-hover-color: #ff6a00;
  --copyright-color: #887870;
  --footer-section-title-color: #ff8a00;
  --footer-description-header-color: #ff8a00;
  --footer-description-note-color: #a89890;
  --footer-sitemap-header-color: #ff8a00;
  --footer-sitemap-link-color: #a89890;
  --footer-featured-product-card-header-color: #ff8a00;
  --footer-featured-product-card-note-color: #a89890;
  --footer-bank-list-note-color: #a89890;
  --footer-transaction-service-header-color: #ff8a00;
  --footer-transaction-service-note-color: #a89890;
  --footer-sitemap-icon-bg: #c41e1e;
  --footer-featured-product-bg: #141010;
  --footer-card-container-border: rgba(255, 106, 0, 0.22);
  --footer-hero-icon-bg: #c41e1e;
  --footer-banking-card-bg: #1a1010;

  --provider-slide-bg: #1a1010;
  --provider-slide-main-slide-item-a-not-game-info-bg: #2a1212;
  --provider-slide-main-slide-item-a-not-game-info-hover-bg: #c41e1e;
  --provider-slide-main-slide-item-h5-color: #fff;

  --modal-content-bg: #141010;
  --modal-content-border: #c41e1e;
  --modal-header-close-color: #ffd4b0;
  --modal-body-p-color: #c0b0a0;
  --modal-footer-border: rgba(255, 106, 0, 0.2);
  --modal-footer-btn-primary-bg: #c41e1e;
  --modal-footer-btn-primary-hover-bg: #ff6a00;
  --modal-footer-btn-primary-color: #fff;

  --floating-action-btn-bg: linear-gradient(0deg, #8b1010 0%, #ff6a00 100%);
  --floating-action-btn-border: 1px solid #c41e1e;
  --floating-action-btn-bs: 0 4px 24px 0 rgba(196, 30, 30, 0.5);

  --popover-bg: #1a0808;
  --popover-border: #ff6a00;
  --popover-color: #fff;

  --std-btn-group-btn-primary-bg: #c41e1e;
  --std-btn-group-btn-primary-hover-bg: #ff6a00;
  --std-form-title-bg: #c41e1e;
  --std-side-menu-bg: #1a0808;
  --std-side-menu-player-acc-section-bg: #c41e1e;
  --std-side-menu-a-active-hover-bg: #ff6a00;
  --std-profile-bar-bg: #c41e1e;

  --form-control-border: rgba(255, 106, 0, 0.3);
  --form-control-bg: #1a1010;
  --form-control-color: #e8e0d8;
}

/* ---------- Global canvas ---------- */
body {
  background-color: var(--hw-black) !important;
  background-image:
    radial-gradient(ellipse 90% 45% at 50% -8%, rgba(196, 30, 30, 0.16), transparent 55%),
    radial-gradient(ellipse 55% 35% at 95% 100%, rgba(255, 106, 0, 0.1), transparent 50%),
    radial-gradient(ellipse 45% 30% at 5% 85%, rgba(139, 16, 16, 0.12), transparent 45%) !important;
  background-attachment: fixed;
  color: var(--hw-text);
}

/* ---------- Topbar & Header ---------- */
.topbar-container {
  background: linear-gradient(90deg, #0a0a0a 0%, #1a0a05 50%, #0a0a0a 100%) !important;
  border-bottom: 1px solid var(--hw-border);
  box-shadow: 0 2px 16px rgba(196, 30, 30, 0.18);
}

.site-header {
  background: var(--hw-grad-header) !important;
  border-bottom: 3px solid var(--hw-orange) !important;
  box-shadow: 0 4px 22px rgba(196, 30, 30, 0.22);
}

.top-menu > li > a:hover,
.top-menu > li[data-active="true"] > a,
.top-menu > li.active > a {
  color: #fff !important;
  background: linear-gradient(180deg, rgba(255, 106, 0, 0.22), rgba(196, 30, 30, 0.18)) !important;
  text-shadow: 0 0 10px rgba(255, 106, 0, 0.55);
}

.top-menu .game-list-container {
  border-color: var(--hw-orange) !important;
  background: rgba(10, 5, 5, 0.97) !important;
}

/* ---------- Auth buttons ---------- */
.login-panel .login-button,
.login-panel [class*="login-btn"],
.login-button {
  background: linear-gradient(180deg, #1a0a0a, #0f0505) !important;
  border: 1px solid var(--hw-border) !important;
  color: #fff !important;
}

.login-panel .login-button:hover,
.login-button:hover {
  border-color: var(--hw-orange) !important;
  box-shadow: 0 0 14px rgba(255, 106, 0, 0.35);
}

.login-panel .register-button,
.login-panel [class*="register-btn"],
.register-button {
  background: var(--hw-grad-btn) !important;
  border: 1px solid var(--hw-orange-soft) !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(255, 106, 0, 0.3);
}

.login-panel .register-button:hover,
.register-button:hover {
  background: var(--hw-grad-btn-hover) !important;
  box-shadow: 0 0 18px rgba(196, 30, 30, 0.45);
}

/* ---------- Announcement ---------- */
.announcement-outer-container,
.announcement-container {
  background: linear-gradient(90deg, #1a0800, #0a0a0a, #1a0800) !important;
  border-top: 1px solid rgba(255, 106, 0, 0.3);
  border-bottom: 1px solid rgba(255, 106, 0, 0.3);
}

.announcement-list li,
.announcement-outer-container li {
  color: #ffd4b0 !important;
}

/* ---------- Jackpot / lottery ---------- */
.home-progressive-jackpot {
  border-radius: 6px;
  box-shadow: 0 0 24px rgba(196, 30, 30, 0.25);
}

/* ---------- Popular games / game grids ---------- */
.popular-games {
  background-color: #120808 !important;
  border: 1px solid var(--hw-border);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 106, 0, 0.06);
}

.popular-games [data-section="left"] .section-title,
.popular-games .section-title {
  color: #ff8a00 !important;
  background: linear-gradient(90deg, #1a0c0c, #120808) !important;
  border-bottom: 1px solid var(--hw-border);
}

.popular-games .nav-tabs > li > a,
.popular-games .nav-tabs > li.active > a,
.popular-games .nav-tabs > li > a:hover {
  border-color: transparent !important;
}

.popular-games .nav-tabs > li.active > a {
  background: linear-gradient(180deg, #c41e1e, #8b1010) !important;
  box-shadow: 0 0 12px rgba(196, 30, 30, 0.35);
}

.popular-games .tab-content,
.popular-games .tab-pane {
  background: #141010 !important;
}

.popular-game-title-container .container-title a,
.home-game-list-container .container-title a,
.container-title a {
  background: var(--hw-grad-btn) !important;
  color: #fff !important;
}

.popular-game-title-container .container-content,
.home-game-list-container .container-content {
  border-color: rgba(255, 106, 0, 0.4) !important;
  background: rgba(10, 5, 5, 0.5);
  box-shadow: 0 0 18px rgba(196, 30, 30, 0.1);
}

.game-list .game-name {
  background: linear-gradient(90deg, #c41e1e, #ff6a00) !important;
  color: #fff !important;
}

.play-now {
  background: var(--hw-grad-btn) !important;
  color: #fff !important;
  border: none !important;
}

.play-now:hover {
  background: var(--hw-grad-btn-hover) !important;
  box-shadow: 0 0 14px rgba(196, 30, 30, 0.45);
}

.free-play {
  background: linear-gradient(180deg, #2a2a2a, #141414) !important;
  color: #fff !important;
}

/* ---------- Download APK ---------- */
.download-apk-container {
  background-color: #0a0a0a !important;
  border-top: 1px solid var(--hw-border);
}

.download-apk .h2,
.download-apk .h2 strong,
.download-apk .h3 {
  color: #fff !important;
}

.download-apk .h2 strong {
  color: #ff6a00 !important;
  text-shadow: 0 0 12px rgba(255, 106, 0, 0.4);
}

.download-apk .btn,
.download-apk-btn {
  background: var(--hw-grad-btn) !important;
  border-color: var(--hw-orange) !important;
  color: #fff !important;
}

/* ---------- Footer ---------- */
.site-footer {
  background: linear-gradient(180deg, #120808 0%, #0a0a0a 100%) !important;
  border-top: 2px solid #c41e1e !important;
  color: var(--hw-muted);
}

.footer-description-section h1,
.footer-description-section h2,
.footer-description-section h3,
.site-description h1,
.site-description h2,
.footer-section-title,
.footer-sitemap-section h4,
.footer-featured-product-section h4 {
  color: #ff8a00 !important;
}

.footer-description-section p,
.site-description p,
.footer-featured-product-section p,
.footer-banking-section p,
.copyright,
.footer-links a {
  color: #a89890 !important;
}

.site-description a,
.footer-description-section a,
.footer-links a:hover {
  color: #ff6a00 !important;
}

.footer-featured-product-section .site-info-description,
.footer-card-container,
.footer-banking-card {
  background: linear-gradient(180deg, #1a0a08, #0f0505) !important;
  border: 1px solid rgba(255, 106, 0, 0.22) !important;
  border-radius: 6px;
}

.footer-sitemap-icon,
.footer-hero-icon {
  background: #c41e1e !important;
}

/* ---------- Provider strip / slider ---------- */
.provider-slide,
.provider-section {
  background: #120808 !important;
}

/* ---------- Modals ---------- */
.modal-content {
  background: #141010 !important;
  border: 1px solid var(--hw-border-red) !important;
  color: var(--hw-text);
}

.modal-header {
  background: linear-gradient(90deg, #2a0a0a, #1a0808) !important;
  border-bottom: 1px solid #ff6a00 !important;
  color: #fff;
}

.modal-title,
.modal-header .modal-title {
  color: #ff8a00 !important;
}

.modal-footer {
  border-top: 1px solid rgba(255, 106, 0, 0.2) !important;
  background: #100808;
}

.modal-footer .btn-primary,
.modal .btn-primary {
  background: var(--hw-grad-btn) !important;
  border: none !important;
  color: #fff !important;
}

/* ---------- Forms / inputs (design only) ---------- */
.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
select.form-control {
  background-color: #1a1010 !important;
  border-color: rgba(255, 106, 0, 0.3) !important;
  color: #e8e0d8 !important;
}

.form-control:focus {
  border-color: #ff6a00 !important;
  box-shadow: 0 0 0 2px rgba(255, 106, 0, 0.2) !important;
}

.form-control::placeholder {
  color: #887870 !important;
}

/* ---------- Icons tilt to flame (assets tetap, filter design) ---------- */
.topbar-item i[data-icon],
.announcement-outer-container i[data-icon],
.popular-games i[data-icon],
.download-apk-btn i[data-icon] {
  filter: saturate(1.7) hue-rotate(-22deg) brightness(1.05);
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c41e1e, #ff6a00);
  border-radius: 4px;
}

/* ---------- Carousel indicators ---------- */
.carousel-indicators .active,
.banner-carousel .slick-dots li.slick-active button {
  background: #ff6a00 !important;
  border-color: #c41e1e !important;
}

/* ---------- Soft ember pulse on game panels ---------- */
@keyframes hw-ember-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 106, 0, 0.08); }
  50% { box-shadow: 0 0 22px rgba(196, 30, 30, 0.2); }
}

.popular-game-title-container .container-content,
.home-game-list-container .container-content {
  animation: hw-ember-pulse 4.5s ease-in-out infinite;
}

/* ---------- Floating action ---------- */
.floating-action-btn,
[class*="floating-action"] {
  background: var(--hw-grad-btn) !important;
  border-color: #c41e1e !important;
  box-shadow: 0 4px 20px rgba(196, 30, 30, 0.45) !important;
}

/* ---------- Home info / SEO blocks in body ---------- */
.home-info-container,
[class*="home-info"] {
  background: #141010 !important;
  border-color: #c41e1e !important;
  color: #c0b0a0;
}

/* ---------- Tables (reporting if present) ---------- */
.table {
  background: #141010;
  color: #e8e0d8;
}
.table > thead > tr > th {
  background: #1a0c0c;
  border-color: rgba(255, 106, 0, 0.25) !important;
  color: #ff8a00;
}
.table > tbody > tr > td {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

@media (prefers-reduced-motion: reduce) {
  .popular-game-title-container .container-content,
  .home-game-list-container .container-content {
    animation: none !important;
  }
}