/* ==========================================
   AMUL-STYLE RED & WHITE THEME OVERRIDE
   Red: #D32F2F  /  White: #FFFFFF
   ========================================== */

/* ---- CSS Variable Overrides ---- */
:root,
html,
html body,
html #app {
  /* Main Brand Color → Amul Red */
  --main-color: #D32F2F !important;
  --main_color: #D32F2F !important;
  --norm_red-color: #D32F2F !important;

  /* Gradient: Red-to-Crimson (like Amul's solid bold red) */
  --main_gradient-color: linear-gradient(135deg, #EF4444 0%, #991B1B 100%) !important;
  --main_gradient-color2: linear-gradient(135deg, #EF4444 0%, #991B1B 100%) !important;
  --light-main_gradient-color: linear-gradient(135deg, #FF6070 0%, #D32F2F 100%) !important;
  --GradiantBlue: linear-gradient(135deg, #EF4444 0%, #991B1B 100%) !important;

  /* Background Colors → White / Off-white */
  --bg_color_L1: #FFFFFF !important;
  --bg_color_L2: #FFF8F8 !important;
  --bg_color_L3: #FFF1F1 !important;
  --bg_color_L4: #FECDD3 !important;

  /* Text Colors */
  --text_color_L1: #180808 !important;
  --text_color_L2: #6B1C24 !important;
  --text_color_L3: #A84050 !important;
  --text_color_L4: #FFFFFF !important;
  --text_white: #FFFFFF !important;
  --textW: #FFFFFF !important;

  /* Action Colors */
  --action_green-color: #D32F2F !important;
  --norm_green-color: #D32F2F !important;
  --norm_secondary-color: #FF6600 !important;
  --norm_bule-color: #D32F2F !important;
  --norm_purple-color: #991B1B !important;
  --wallet_balance_color: #D32F2F !important;

  /* Divider & Shadow */
  --Dividing-line_color: #FECDD3 !important;
  --BoxShadowColor-9: 0 8px 40px rgba(232, 0, 26, 0.12) !important;
  --BoxShadowColor-12: 0 4px 12px rgba(232, 0, 26, 0.2) !important;

  /* Game Tab */
  --game_tab_active_bg: linear-gradient(135deg, #EF4444 0%, #991B1B 100%) !important;
  --game_tab_active_border: #D32F2F !important;
  --game_tab_label_shadow: rgba(232, 0, 26, 0.3) !important;

  /* Dark mode backgrounds */
  --darkBg: #FFF8F8 !important;
  --bgDark-2: #FFF1F1 !important;
  --darkTextW: #180808 !important;
  --darkLight: #D32F2F !important;

  /* Download button background */
  --downBg: linear-gradient(135deg, #EF4444 0%, #991B1B 100%) !important;

  /* linearGradient */
  --linearGradien-17: linear-gradient(135deg, #EF4444 0%, #991B1B 100%) !important;

  /* Win tips */
  --winTips: #D32F2F !important;
}

/* ---- Global Background ---- */
body {
  background-color: #D32F2F !important;
}

#app {
  background-color: #FFFFFF !important;
}

/* ---- Navigation Bar ---- */
.purple-home__nav,
[class*="navbar"],
[class*="nav-bar"],
.van-nav-bar {
  background-color: #D32F2F !important;
  background: #D32F2F !important;
}

.van-nav-bar__title,
.van-nav-bar .van-nav-bar__content,
.purple-home__nav *,
[class*="navbar"] * {
  color: #FFFFFF !important;
}

/* ---- Tab Bar / Bottom Navigation ---- */
.van-tabbar,
.van-tabbar-item,
[class*="tabbar"],
[class*="tab-bar"] {
  background-color: #FFFFFF !important;
  border-top: 2px solid #D32F2F !important;
}

.van-tabbar-item--active,
.van-tabbar-item.active {
  color: #D32F2F !important;
}

/* ---- Buttons ---- */
.van-button--primary,
.van-button.van-button--primary,
[class*="btn-primary"],
[class*="confirm-btn"],
[class*="submit-btn"],
.cg-default.van-button {
  background: linear-gradient(135deg, #EF4444 0%, #991B1B 100%) !important;
  background-color: #D32F2F !important;
  border-color: #D32F2F !important;
  color: #FFFFFF !important;
}

.van-button--plain {
  border-color: #D32F2F !important;
  color: #D32F2F !important;
}

/* ---- Header / Banner ---- */
[class*="header"],
[class*="banner"] {
  background: linear-gradient(135deg, #EF4444 0%, #991B1B 100%) !important;
}

/* ---- Tabs / Active Indicator ---- */
.van-tabs__line,
[class*="tab-line"],
[class*="tab__line"] {
  background-color: #D32F2F !important;
}

.van-tab--active,
[class*="tab--active"],
[class*="tab-active"] {
  color: #D32F2F !important;
}

/* ---- Cards & Panels ---- */
.van-card,
[class*="card"] {
  background-color: #FFF8F8 !important;
  border: 1px solid #FECDD3 !important;
}

/* ---- Input Fields ---- */
.van-field__control,
input[type="text"],
input[type="number"],
input[type="password"] {
  background-color: #FFF8F8 !important;
  color: #180808 !important;
  border-color: #FECDD3 !important;
}

/* ---- Switches / Toggles ---- */
.van-switch--checked {
  background-color: #D32F2F !important;
}

/* ---- Popup / Modal ---- */
.van-popup,
[class*="popup"],
[class*="dialog"],
[class*="modal"] {
  background-color: #FFFFFF !important;
}

/* ---- Badge ---- */
.van-badge {
  background-color: #D32F2F !important;
  border-color: #D32F2F !important;
}

/* ---- List Items ---- */
.van-cell {
  background-color: #FFFFFF !important;
}

.van-cell:after {
  border-color: #FECDD3 !important;
}

/* ---- Loading indicator ---- */
.van-loading__spinner,
.van-loading__spinner--spinner {
  color: #D32F2F !important;
}

/* ---- Toast ---- */
.van-toast {
  background: #D32F2F !important;
  color: #FFFFFF !important;
}

/* ---- Swiper Pagination Dots ---- */
.swiper-pagination-bullet-active {
  background-color: #D32F2F !important;
}

/* ---- Progress Bar ---- */
.van-progress__portion {
  background: linear-gradient(135deg, #EF4444 0%, #991B1B 100%) !important;
}

/* ---- Icon Color ---- */
[class*="icon"] svg,
.van-icon {
  color: #D32F2F !important;
}

/* Preserve white icons on red backgrounds */
.van-button--primary .van-icon,
[class*="header"] .van-icon,
.van-nav-bar .van-icon,
.purple-home__nav .van-icon {
  color: #FFFFFF !important;
}

/* ---- Amount / Balance Text ---- */
[class*="balance"],
[class*="amount"],
[class*="wallet"] {
  color: #D32F2F !important;
}

/* ---- Recharge / Withdraw Buttons ---- */
[class*="recharge"],
[class*="withdraw"] {
  background: linear-gradient(135deg, #EF4444 0%, #991B1B 100%) !important;
  color: #FFFFFF !important;
}

/* ---- Homepage nav auth buttons ---- */
.purple-home__nav-auth__login {
  background: linear-gradient(180deg, #EF4444 0%, #991B1B 100%) !important;
  color: #FFFFFF !important;
}

.purple-home__nav-auth__register {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF0F0 100%) !important;
  color: #D32F2F !important;
  border: 1.5px solid #D32F2F !important;
}

/* ---- Add balance chip button ---- */
.purple-home__nav-chip__add {
  background: #D32F2F !important;
}

/* ---- Section Headers ---- */
.section-header__title {
  color: #D32F2F !important;
}

/* ---- Game tab active ---- */
.game-tabs__scroll-indicator {
  background: linear-gradient(135deg, #EF4444 0%, #991B1B 100%) !important;
  border-color: #D32F2F !important;
}

/* ---- Slot vendor active tab ---- */
.slot-vendor__tab.is-active {
  background: #D32F2F !important;
}

/* ---- Announcement dialog header ---- */
.announcement-dialog__header,
.bet-rule-head {
  background: linear-gradient(135deg, #EF4444 0%, #991B1B 100%) !important;
  color: #FFFFFF !important;
}

/* ---- Pagination ---- */
.van-pagination__item--active {
  background: #D32F2F !important;
  color: #FFFFFF !important;
}

.van-pagination__item {
  color: #D32F2F !important;
}

/* ---- VIP / Rank Badge ---- */
[class*="vip"],
[class*="rank"] {
  color: #D32F2F !important;
}

/* ---- Lucky Winners Card ---- */
.lucky-winners__card-body h1 {
  color: #FFFFFF !important;
}

/* ---- Swiper indicator active dot ---- */
.swiper_box .swiper-button .active {
  background-color: #D32F2F !important;
}
.purple-home .swiper_box .swiper-button span.active {
  background: linear-gradient(135deg, #EF4444 0%, #991B1B 100%) !important;
}

/* ---- Float action buttons ---- */
.btn {
  background: linear-gradient(135deg, #EF4444 0%, #991B1B 100%) !important;
}

/* ---- Profit rank amount ---- */
.profit-rank__item-amount {
  color: #D32F2F !important;
}

/* ---- ntf-c btn primary ---- */
.ntf-c__btn--primary {
  background: linear-gradient(135deg, #EF4444 0%, #991B1B 100%) !important;
}

.ntf-c__btn--ghost {
  border-color: #D32F2F !important;
  color: #D32F2F !important;
}

/* ---- Coupon arrival dialog ---- */
.coupon-arrival-dialog__ratio {
  background: rgba(232, 0, 26, 0.08) !important;
  color: #D32F2F !important;
}

.coupon-arrival-dialog__item {
  border-color: rgba(232, 0, 26, 0.28) !important;
}

/* ---- App background strip ---- */
body > div,
html > body {
  background-color: #D32F2F !important;
}

/* Main app white card area */
#app {
  background: #FFFFFF !important;
  box-shadow: 0 0 30px rgba(232, 0, 26, 0.15) !important;
}