/* =========================================
   DRAGON222 — Dark Gold (modern)
   theme.css  ·  visual layer
   ========================================= */

:root {
  --c-bg: #0e0e0e;
  --c-bg-2: #171717;
  --c-bg-3: #1f1f1f;
  --c-gold: #d4af37;
  --c-gold-2: #f5d76e;
  --c-text: #ffffff;
  --c-muted: #bdbdbd;
  --c-ink: #111111;
  --c-line: rgba(212, 175, 55, 0.38);
  --c-radius: 10px;
  --c-radius-sm: 8px;
  --c-radius-pill: 999px;
  --c-ease: 0.18s ease;
  --c-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --c-glow: 0 6px 18px rgba(212, 175, 55, 0.22);
  --c-bar: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 22%), linear-gradient(180deg, #6b151c 0%, #3a0a0f 72%, #2a070b 100%);
  --c-bar-mid: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 20%), linear-gradient(180deg, #541218 0%, #2e0b0f 70%, #1c0709 100%);
  --c-bar-dim: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 18%), linear-gradient(180deg, #3d1014 0%, #22080b 70%, #140506 100%);
  --c-bar-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 210, 210, 0.16), inset 0 -8px 14px rgba(0, 0, 0, 0.22);
}

html,
body {
  color: var(--c-text);
  background:
    radial-gradient(1200px 480px at 12% -8%, rgba(212, 175, 55, 0.08), transparent 55%),
    var(--c-bg);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4,
.sports-platform-title,
.modal-title {
  color: var(--c-gold);
  letter-spacing: 0.02em;
  text-shadow: none;
}

.site-info h3,
.site-info h4,
.site-info h5,
.footer-section-title,
.provider-container > h5 {
  color: #e6e6e6;
}

p,
.site-info-container p,
.bank-list p,
.site-description p {
  color: var(--c-text);
}

a {
  color: var(--c-gold);
  font-weight: 400;
  transition: color var(--c-ease);
}

a:hover,
a:focus {
  color: var(--c-gold-2);
  text-decoration: none;
}

/* ----- Header ----- */
.topbar-container {
  background: rgba(14, 14, 14, 0.92);
  border-bottom: 1px solid var(--c-line);
}

.site-header {
  position: relative;
  z-index: 1;
  background: var(--c-bar);
  border-bottom: 2px solid #d4af37;
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.55),
    0 3px 0 #1a0406,
    inset 0 1px 0 rgba(255, 210, 210, 0.16),
    inset 0 -10px 18px rgba(0, 0, 0, 0.22);
}

.top-menu > li > a {
  color: var(--c-text);
  font-weight: 600;
  background: transparent;
  border-radius: var(--c-radius-sm);
  transition: color var(--c-ease), background var(--c-ease), box-shadow var(--c-ease);
}

.top-menu > li > a:hover,
.top-menu > li[data-active="true"] > a {
  color: var(--c-gold);
  background: rgba(212, 175, 55, 0.08);
  box-shadow: inset 0 -2px 0 var(--c-gold);
}

.top-menu > li > a > .top-menu-icon,
.top-menu > li > a > img.top-menu-icon {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: none;
}

/* ----- Menus / panels ----- */
.standard-side-menu,
.standard-side-menu .menu-section,
.messaging-side-menu,
.language-selector,
.dropdown-menu {
  background: var(--c-bg-2) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--c-radius);
  box-shadow: var(--c-shadow);
}

.standard-side-menu a,
.standard-side-menu-group-label {
  background: transparent;
  color: var(--c-text);
  border-left: 3px solid transparent;
  border-radius: 6px;
}

.standard-side-menu a[data-active="true"],
.standard-side-menu a:hover,
.standard-side-menu .menu-section a:hover,
.standard-side-menu .menu-section a[data-active="true"],
.messaging-side-menu [data-active="true"] a,
.messaging-side-menu a:hover,
.language-selector li:hover {
  background: rgba(212, 175, 55, 0.12) !important;
  color: var(--c-gold) !important;
  border-color: var(--c-gold);
}

.topbar-left-section .language-selector-container {
  position: relative;
  z-index: 30;
}

.topbar-left-section .language-selector {
  z-index: 30;
  background: var(--c-bg-2) !important;
}

.modal-backdrop {
  z-index: 1040 !important;
}

.modal {
  z-index: 1050 !important;
}

.topbar-left-section i[data-language] {
  background-repeat: no-repeat;
  background-size: 16px auto;
  flex-shrink: 0;
}

.panel,
.panel-default > .panel-heading,
.standard-form-container,
.standard-form-content,
.info-center-content,
.promotions-container,
.promotion-list,
.slots-games-container,
.casino-games-container,
.race-games-container,
.arcade-games-container,
.crash-game-games-container,
.large-game-list-container,
.provider-list-container {
  background: var(--c-bg-2) !important;
  border-color: var(--c-line) !important;
  border-radius: var(--c-radius);
  box-shadow: var(--c-shadow);
}

.info-center-title,
.standard-form-title,
.home-game-list-container .container-title span {
  color: var(--c-gold) !important;
  background: var(--c-bg-3) !important;
  text-shadow: none;
  letter-spacing: 0.04em;
  box-shadow: inset 0 -2px 0 var(--c-gold);
}

.popular-game-title-container .container-title span {
  color: #fff !important;
  background: var(--c-bar-mid) !important;
  text-shadow: none;
  letter-spacing: 0.04em;
  box-shadow: inset 0 1px 0 rgba(255, 210, 210, 0.14), inset 0 -2px 0 #d4af37;
}

.popular-games [data-section="left"] .section-title {
  color: #ffd400 !important;
  background: var(--c-bar-dim) !important;
  text-shadow: none;
  letter-spacing: 0.04em;
  box-shadow: inset 0 1px 0 rgba(255, 210, 210, 0.14), inset 0 -2px 0 #d4af37;
}

/* ----- Buttons ----- */
.standard-button-group .btn-primary,
.messaging-side-menu .support-ticket > a,
.deposit-container .reveal-bank-account-button,
.play-now,
.login-panel .register-button,
.modal-footer .btn-primary,
.download-apk .btn,
.promotion-item .click-for-get-promo-button,
[data-payment-gateway] .download-qr-button,
.register-button,
.btn-primary,
.telegram-btn,
.download-apk-btn,
.live-chat {
  color: var(--c-ink) !important;
  border: 1px solid var(--c-gold) !important;
  background: var(--c-gold) !important;
  background-image: none !important;
  border-radius: var(--c-radius-pill);
  box-shadow: var(--c-glow);
  font-weight: 700;
  animation: none !important;
  transition: background var(--c-ease), border-color var(--c-ease), transform var(--c-ease), box-shadow var(--c-ease);
}

.standard-button-group .btn-primary:hover,
.play-now:hover,
.login-panel .register-button:hover,
.register-button:hover,
.btn-primary:hover,
.telegram-btn:hover,
.download-apk-btn:hover,
.live-chat:hover {
  background: var(--c-gold-2) !important;
  background-image: none !important;
  border-color: var(--c-gold-2) !important;
  color: var(--c-ink) !important;
  transform: translateY(-1px);
  filter: none;
}

.free-play,
.login-panel .login-button,
.login-button,
.modal-btn.blank,
.confirmation-message-modal .confirm-btn,
.btn-secondary {
  color: var(--c-gold) !important;
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--c-gold) !important;
  border-radius: var(--c-radius-pill);
  box-shadow: none !important;
  transition: background var(--c-ease), color var(--c-ease);
}

.free-play:hover,
.login-panel .login-button:hover,
.login-button:hover {
  background: var(--c-gold) !important;
  color: var(--c-ink) !important;
  border-color: var(--c-gold) !important;
}

/* ----- Forms ----- */
.form-control,
.login-panel input[type="text"],
.login-panel input[type="password"],
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
  background: var(--c-bg) !important;
  color: var(--c-text) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--c-radius-sm) !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--c-gold) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18) !important;
  outline: none;
}

/* ----- Game cards ----- */
.game-list .game-item,
.large-game-list li,
.provider-slide .slide-item {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
  transition: transform var(--c-ease), border-color var(--c-ease), box-shadow var(--c-ease);
}

.game-list .game-item:hover,
.large-game-list li:hover {
  border-color: var(--c-gold);
  transform: translateY(-3px);
  box-shadow: var(--c-glow);
}

.game-list .game-name,
.slots-games-container .game-name,
.casino-games-container .game-name,
.race-games-container .game-name {
  color: var(--c-gold);
  background: var(--c-bg-2);
  border-top: 1px solid var(--c-line);
}

.slots-games-container .category-filter-link.active,
.slots-games-container .category-filter-link:hover,
.casino-games-container .category-filter-link.active,
.casino-games-container .category-filter-link:hover,
.race-games-container .category-filter-link.active,
.race-games-container .category-filter-link:hover,
.arcade-games-container .category-filter-link.active,
.arcade-games-container .category-filter-link:hover,
.crash-game-games-container .category-filter-link.active,
.crash-game-games-container .category-filter-link:hover {
  color: var(--c-ink) !important;
  background: var(--c-gold) !important;
  border-radius: var(--c-radius-pill);
  box-shadow: none;
}

.bank-info,
.deposit-container .bank-info,
.withdrawal-container .bank-info,
.bank-info-block {
  background: var(--c-bg-3);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
  color: var(--c-text);
}

.deposit-container .formatted-balance,
.deposit-amount-container .real-deposit-amount,
.withdrawal-container .total-balance,
.winner-amount,
.user-info .wallet-container .balance,
.user-info .wallet-container .locked-balance {
  color: var(--c-gold);
  text-shadow: none;
}

/* ----- Modals / ticker ----- */
.modal-content,
.bonus-slider-modal .modal-content {
  background: var(--c-bg-2) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--c-shadow);
}

.modal-header {
  border-bottom: 1px solid var(--c-line) !important;
  background: var(--c-bg-2);
}

.modal-content h4,
.claim-info-modal h4,
.download-popup-modal .modal-header .modal-title,
.close {
  color: var(--c-gold) !important;
}

.announcement-container {
  background: var(--c-bg-2) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--c-radius);
}

.announcement-container > [data-section="announcements"] {
  background: var(--c-bg) !important;
  border-radius: 6px;
}

.announcement-container .announcement-list li,
.notice ul li {
  color: var(--c-text) !important;
}

.jackpot-winners {
  background: var(--c-bg-2) !important;
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
}

.jackpot-winners .winners-ticker-container {
  background: var(--c-bg) !important;
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius-sm);
}

.tickercontainer {
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius-sm);
}

.banner,
.banner .slick-slide img {
  background: var(--c-bg-2) !important;
}

.banner .slick-slide img,
.banner-carousel img,
.banner picture img {
  filter: none;
  border-radius: var(--c-radius);
}

.banner .carousel-indicators .active,
.banner .carousel-indicators li.active {
  background: var(--c-gold) !important;
  border-color: var(--c-gold) !important;
}

.site-footer {
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
}

.footer-links > li > a,
.site-footer a {
  color: var(--c-muted);
}

.footer-links > li > a:hover,
.site-footer a:hover {
  color: var(--c-gold);
}

.claim-item,
.pending-transactions-container .pending-transactions-item,
.remarks-container,
.promotion-item {
  background: var(--c-bg-3);
  border-color: var(--c-line);
  border-radius: var(--c-radius);
}

.claim-item .claim-button,
.claim-item .activation-button {
  background: var(--c-gold);
  color: var(--c-ink);
  border-radius: var(--c-radius-pill);
}

.provider-container {
  border-radius: 12px;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb {
  background: var(--c-gold);
  border-radius: var(--c-radius-pill);
}

.play-now,
.login-panel .register-button,
.standard-button-group .btn-primary,
.register-button {
  animation: none;
}

.logo img { filter: none; }

::selection {
  background: var(--c-gold);
  color: var(--c-ink);
}

@media (max-width: 768px) {
  .top-menu > li > a { font-size: 12px; }
  .standard-side-menu a,
  .game-list .game-name { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Login notice: drop the missing alert image and the empty header band. */
#popup_modal .modal-dialog {
  width: 420px;
  max-width: calc(100vw - 32px);
  left: 0;
  right: 0;
}

#popup_modal .modal-title::before {
  content: none !important;
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  background: none !important;
}

#popup_modal .modal-header {
  position: relative;
  z-index: 2;
  min-height: 40px;
  padding: 8px 16px 0;
  border-bottom: 0 !important;
}

#popup_modal[data-title=""] .modal-title {
  display: none;
}

#popup_modal .close {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  float: none;
  margin: 0;
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
  color: var(--c-gold) !important;
  text-shadow: none;
  line-height: 1;
}

#popup_modal .close span {
  font-size: 0;
}

#popup_modal .close span::before {
  content: "\00d7";
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
}

#popup_modal .modal-body {
  padding: 28px 28px 4px;
  text-align: center;
}

#popup_modal[data-title=""] .modal-body::before {
  content: "!";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 4px auto 14px;
  border: 2px solid var(--c-gold);
  border-radius: 50%;
  color: var(--c-gold);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

#popup_modal.concise-transaction-popup .modal-body::before {
  content: none;
  display: none;
}

#popup_modal .modal-body p {
  margin: 0;
  color: var(--c-text);
  font-size: 16px;
  line-height: 1.5;
}

#popup_modal .modal-footer {
  border-top: 0;
  margin-top: 0;
  padding: 18px 20px 22px;
  justify-content: center;
}

#login_modal .modal-header {
  position: relative;
  padding: 20px 48px 12px;
}

#login_modal .modal-header .close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  float: none;
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
}

#login_modal .modal-header .close span {
  font-size: 0;
  line-height: 0;
}

#login_modal .modal-header .close span::before {
  content: "\00d7";
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  color: var(--c-gold);
}

#login_modal .password_input_trigger {
  top: 50%;
  right: 12px;
  width: 22px;
  height: 22px;
  margin: 0;
  transform: translateY(-50%);
  font-size: 0;
  color: transparent;
  background: center / 18px 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94'/%3E%3Cpath d='M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19'/%3E%3Cpath d='M1 1l22 22'/%3E%3Cpath d='M14.12 14.12a3 3 0 1 1-4.24-4.24'/%3E%3C/svg%3E");
}

#login_modal .password_input_trigger::before,
#login_modal .standard-password-field input[type="text"] ~ i::before {
  content: none !important;
}

#login_modal .standard-password-field input[type="text"] ~ .password_input_trigger {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}