/* ============================================================
   SHREEWIN -> RAXI.WIN (RED MAROON THEME) COLOR OVERRIDE
   ============================================================ */

:root,
body,
html,
#app,
[data-theme] {
  /* Main Background Colors (Dark Maroon / Burgundy - RAXI.WIN style) */
  --bg_color_L1: #280606 !important;
  --bg_color_L2: #3d0a0a !important;
  --bg_color_L3: #1c0404 !important;
  --darkBg: #280606 !important;
  --tab_active-bg-color: #591313 !important;

  /* Primary Brand & Accent Colors (Red) */
  --main-color: #e52e2e !important;
  --light-main-color: #ff4d4d !important;
  --main_gradient-color: linear-gradient(90deg, #ff4c4c 0%, #d61e1e 100%) !important;
  --main_gradient-color2: linear-gradient(180deg, #ff4d4d 0%, #c41c1c 100%) !important;
  --light-main_gradient-color: linear-gradient(90deg, #ff4d4d 0%, #c41c1c 100%) !important;
  --pop_bg-color: linear-gradient(180deg, #ff4d4d 0%, #c41c1c 100%) !important;
  --tab1: #c41c1c !important;
  --tab2: #ff4d4d !important;
  --gold_gradient-color: linear-gradient(180deg, #ffcc25 0%, #ff8f0e 100%) !important;

  /* Text Colors */
  --text_color_L1: #ffe5e5 !important;
  --text_color_L2: #dcaaa7 !important;
  --text_color_L3: #ff5252 !important;
  --text_color_L4: #ffffff !important;
  --text_muted-color: #a87878 !important;
  --text_white: #ffffff !important;

  /* Status & Secondary Colors */
  --norm_red-color: #e52e2e !important;
  --norm_secondary-color: #f5a036 !important;
  --norm_Purple-color: #e52e2e !important;
  --norm_purple1_color: #ff6666 !important;
  --norm_purple2_color: #ff3333 !important;
  --norm_bule-color: #ff4cc4 !important;
  --Secondary_red_color: #ff4d4d !important;

  /* Lines & Dividers */
  --Dividing-line_color: #541616 !important;
  --sheet_nva_color: #240404 !important;
  --sheet_detail_bg_color: #481010 !important;

  /* Icons */
  --icon1: rgba(255, 120, 120, 0.6) !important;
  --icon2: rgba(255, 120, 120, 0.3) !important;
  --iconSecondary: rgba(255, 120, 120, 0.3) !important;

  /* Vant UI Theme Variables Overrides */
  --van-sidebar-text-color: var(--main-color) !important;
  --van-picker-background: var(--bg_color_L2) !important;
  --van-picker-option-text-color: var(--text_color_L2) !important;
  --van-picker-confirm-action-color: var(--main-color) !important;
  --van-picker-cancel-action-color: var(--text_color_L2) !important;
  --van-picker-loading-mask-color: rgba(60, 10, 10, 0.6) !important;
  --van-checkbox-checked-icon-color: var(--main-color) !important;
  --van-checkbox-label-color: var(--text_color_L2) !important;
  --van-field-input-text-color: var(--text_color_L1) !important;
  --van-radio-checked-icon-color: var(--main-color) !important;
  --van-grid-item-content-background: var(--bg_color_L1) !important;
  --van-text-color: var(--text_color_L1) !important;
  --van-dialog-background: var(--bg_color_L2) !important;
  --van-circle-color: var(--main-color) !important;
  --van-circle-layer-color: var(--bg_color_L3) !important;
  --van-calendar-range-edge-background: var(--main-color) !important;
  --van-button-primary-background: var(--main-color) !important;
  --van-button-primary-border-color: var(--main-color) !important;
  --van-popup-background: var(--bg_color_L1) !important;
  --van-picker-mask-color: linear-gradient(180deg, rgba(60, 10, 10, 0.9), rgba(60, 10, 10, 0.4)), linear-gradient(0deg, rgba(60, 10, 10, 0.9), rgba(60, 10, 10, 0.4)) !important;
  --van-calendar-background: var(--bg_color_L1) !important;
  --van-radio-label-color: var(--text_color_L2) !important;
  --van-cell-background: var(--bg_color_L2) !important;
  --van-button-default-background: var(--main_gradient-color) !important;
  --van-popover-light-background: var(--bg_color_L2) !important;
  --van-slider-active-background: var(--main-color) !important;
  --van-slider-inactive-background: var(--bg_color_L1) !important;
  --van-collapse-item-content-background: var(--bg_color_L1) !important;
  --van-action-sheet-item-background: var(--bg_color_L2) !important;
  --van-action-sheet-item-text-color: var(--text_color_L1) !important;
  --van-action-sheet-cancel-text-color: var(--text_color_L2) !important;
  --van-action-sheet-cancel-padding-color: var(--bg_color_L1) !important;
  --van-button-primary-color: var(--text_color_L4) !important;
  --van-dialog-has-title-message-text-color: var(--text_color_L2) !important;
  --van-calendar-selected-day-color: var(--main-color) !important;
  --van-calendar-selected-day-background: var(--bg_color_L2) !important;
}

/* Base Body & App Overrides */
body, html, #app, .ar-layout, .index-view, .page-container, .home-view {
    background-color: #280606 !important;
    color: #ffe5e5 !important;
}

/* Header & Top Bar */
.navbar, .navbar__content, .head-bar, .header-container, .navbar-fixed {
    background-color: #280606 !important;
}

/* Notice Bar (Marquee) */
.noticeBar__container, .van-notice-bar, div[class*="noticeBar"] {
    background-color: #4a0f0f !important;
    color: #ffe5e5 !important;
    border-radius: 0.5rem !important;
}
.noticeBar__container .detail-btn, .noticeBar__container .van-button, div[class*="noticeBar"] .detail-btn {
    background: linear-gradient(90deg, #ff3838, #d61e1e) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0.4rem !important;
}

/* ============================================================
   CATEGORY MENU CARDS (PHOTOS 3 & 4 - EXACT RAXI.WIN MATCH)
   ============================================================ */

/* Main Category Navigation Bar Row */
.game__nav {
    display: flex !important;
    gap: 0.22rem !important;
    padding: 0.2rem 0.32rem !important;
    overflow-x: auto !important;
    background: transparent !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}
.game__nav::-webkit-scrollbar {
    display: none !important;
}

/* Individual Category Item Card Container (Squircle / Vertical Rounded Rectangle) */
.game__nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 1.85rem !important;
    min-width: 1.85rem !important;
    height: 2.25rem !important;
    padding: 0.16rem 0.1rem 0.14rem !important;
    border-radius: 0.38rem !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Icon Image Inside Card */
.game__nav-icon,
.game__nav-item img,
.game__nav-item .game__nav-icon {
    width: 1.35rem !important;
    height: 1.35rem !important;
    object-fit: contain !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important;
}

/* Label Text Inside Card at Bottom */
.game__nav-label {
    font-size: 0.3rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
    text-align: center !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
.game__nav-item.is-active .game__nav-label {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Category Card Background Colors (Exact Match to Photos 3 & 4): */

/* 1. Item 1 (Lobby / Lottery) -> Cyan Teal Card */
.game__nav-item:nth-child(1) {
    background: linear-gradient(180deg, #52d9d8 0%, #36c5c4 100%) !important;
}

/* 2. Item 2 (Lottery) -> Cyan Teal Card */
.game__nav-item:nth-child(2) {
    background: linear-gradient(180deg, #52d9d8 0%, #36c5c4 100%) !important;
}

/* 3. Item 3 (Popular) -> Light Sky Blue Card */
.game__nav-item:nth-child(3) {
    background: linear-gradient(180deg, #84b6f6 0%, #639ce8 100%) !important;
}

/* 4. Item 4 (Mini games / Flash) -> Peach Orange Card */
.game__nav-item:nth-child(4) {
    background: linear-gradient(180deg, #ffa985 0%, #f78d63 100%) !important;
}

/* 5. Item 5 (Slots / Slot) -> Coral Pink / Red Card */
.game__nav-item:nth-child(5) {
    background: linear-gradient(180deg, #ff6b81 0%, #ee4b63 100%) !important;
}

/* 6. Item 6 (Sports / Sport) -> Orange Coral Card */
.game__nav-item:nth-child(6) {
    background: linear-gradient(180deg, #ff8566 0%, #f06443 100%) !important;
}

/* 7. Item 7 (Casino / Video) -> Magenta Pink Card */
.game__nav-item:nth-child(7) {
    background: linear-gradient(180deg, #ff66ad 0%, #e64590 100%) !important;
}

/* 8. Item 8 (PVC / Chess) -> Soft Purple Card */
.game__nav-item:nth-child(8) {
    background: linear-gradient(180deg, #9e79f5 0%, #8057e0 100%) !important;
}

/* 9. Item 9 (Fishing / Fish) -> Bright Blue Card */
.game__nav-item:nth-child(9) {
    background: linear-gradient(180deg, #3ba3f7 0%, #1f85d9 100%) !important;
}

/* Active State Card Highlight */
.game__nav-item.is-active,
.game__nav-item--active {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 10px rgba(82, 217, 216, 0.6) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
}

/* Additional Search Tabs Circle Override */
.seach-game__tab-pic,
.van-tab .seach-game__tab-pic {
    border-radius: 50% !important;
    padding: 0.12rem !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

/* Section Titles & Arrow Headers */
.section-header, .title-bar, div[class*="title-bar"] {
    background-color: #280606 !important;
    color: #ffffff !important;
}

/* Game Cards (Lottery, Wingo, Motorace, 5D, K3) */
#app .lotterySlotItem, .game-card, .lottery-card, div[class*="lottery-item"] {
    background: linear-gradient(180deg, #ffdede 0%, #f9c6c6 100%) !important;
    color: #280606 !important;
    border-radius: 0.25rem !important;
}
#app .lotterySlotItem span, #app .lotterySlotItem h4, .game-card .title, .lottery-card .name {
    color: #280606 !important;
}

/* Tab Bar Navigation at Bottom */
.tabbar__container, .tabbar, div[class*="tabbar"] {
    background-color: #1f0404 !important;
    border-top: 1px solid #3d0a0a !important;
}
.tabbar__container-item, .tabbar-item {
    color: #cbbaba !important;
}
.tabbar__container-item.active, .tabbar-item.active,
.tabbar__container-item.router-link-active, .tabbar-item.router-link-active {
    color: #ff9e9e !important;
}

/* Wheel Action Button */
#app .tabbar__container-item .turntable-text {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    bottom: 0 !important;
    transform: translateX(-50%);
    width: 2.04rem !important;
    height: 0.72rem !important;
    padding: 0.16rem 0.04rem 0.04rem;
    box-sizing: border-box;
    overflow: visible !important;
    z-index: 4 !important;
    background: linear-gradient(90deg, #ff8577 0%, #ff6859 100%) !important;
    color: #ffffff !important;
    font-size: 0.4rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center;
    white-space: nowrap;
    border-radius: 0.36rem !important;
    box-shadow: 0 2px 6px rgba(255, 60, 60, 0.4) !important;
}