/* Custom CSS to rearrange homepage sections */
/* Place this in a custom CSS file and link it in your index.html */

/* Main container should use flexbox */
.home-main-container, 
.okwin2Home, 
.home-page-container {
    display: flex !important;
    flex-direction: column !important;
}

/* VIP Banner - HIDDEN (removed from layout) */
.vip-privileges,
.vip-banner {
    display: none !important;
}

/* Wallet section - Move to position 2 (where VIP banner was) */
.wallet-section,
.Wallet__C {
    order: 2 !important;
}

/* Promotional banners - Position 3 */
.promo-banner,
.swiper-container,
.banner-section {
    order: 3 !important;
}

/* Notice bar - Position 4 */
.notice-bar,
.notification-bar,
.noticeBar__container {
    order: 4 !important;
}

/* Game categories grid - Position 5 (bottom) */
.game-grid,
.game-categories,
.gamesList__container {
    order: 5 !important;
}

/* Alternative: Hide specific sections */
.section-to-hide {
    display: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .home-main-container {
        padding: 10px;
    }
}

/* deposit_icon.png on totalSavings quick-action items */
.totalSavings__container-content-item div svg {
    display: none !important;
}

.totalSavings__container-content-item div::before {
    content: '';
    display: block;
    width: .93333rem;
    height: .93333rem;
    min-width: .93333rem;
    min-height: .93333rem;
    background-image: url(/assets/svg/deposit_icon.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 2px 6px rgba(102, 126, 234, 0.25));
}

.totalSavings__container-content-item:hover div::before {
    transform: scale(1.15) translateY(-3px) rotate(5deg);
    filter: drop-shadow(0 4px 12px rgba(102, 126, 234, 0.4));
}

/* Right arrow icon — big size (only custom .right-icon, not all van-cell icons) */
.van-badge__wrapper.van-icon.van-icon-arrow.right-icon,
i.van-icon.van-icon-arrow.right-icon {
    font-size: 28px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    line-height: 28px !important;
    color: #fff !important;
    font-style: normal !important;
    display: inline-block !important;
}
.van-badge__wrapper.van-icon.van-icon-arrow.right-icon::before,
i.van-icon.van-icon-arrow.right-icon::before {
    font-family: "vant-icon", var(--van-icon-font-family, "vant-icon") !important;
    content: "\E660" !important;
    font-size: 28px !important;
    font-style: normal !important;
    display: inline-block !important;
    -webkit-font-smoothing: antialiased;
}
/* Override van-icon-arrow-down to show right arrow > instead — big and bold */
.van-badge__wrapper.van-icon.van-icon-arrow-down,
i.van-icon.van-icon-arrow-down,
.van-icon.van-icon-arrow-down {
    font-size: 28px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    line-height: 28px !important;
    color: #fff !important;
    font-style: normal !important;
    font-weight: 700 !important;
    display: inline-block !important;
}
.van-badge__wrapper.van-icon.van-icon-arrow-down::before,
i.van-icon.van-icon-arrow-down::before,
.van-icon.van-icon-arrow-down::before {
    font-family: "vant-icon", var(--van-icon-font-family, "vant-icon") !important;
    content: "\E660" !important;
    font-size: 28px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    display: inline-block !important;
    -webkit-font-smoothing: antialiased;
}
/* Close icon X — big size */
.van-badge__wrapper.van-icon.van-icon-cross,
i.van-icon.van-icon-cross,
.van-icon.van-icon-cross,
.van-popup__close-icon {
    font-size: 32px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    line-height: 32px !important;
    color: #fff !important;
    font-style: normal !important;
    font-weight: 700 !important;
    display: inline-block !important;
}
.van-badge__wrapper.van-icon.van-icon-cross::before,
i.van-icon.van-icon-cross::before,
.van-icon.van-icon-cross::before,
.van-popup__close-icon::before {
    font-family: "vant-icon", var(--van-icon-font-family, "vant-icon") !important;
    content: "\E6A7" !important;
    font-size: 32px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    display: inline-block !important;
    -webkit-font-smoothing: antialiased;
}
/* Left arrow icon < — big size */
.van-badge__wrapper.van-icon.van-icon-arrow-left,
i.van-icon.van-icon-arrow-left,
.van-icon.van-icon-arrow-left {
    font-size: 28px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    line-height: 28px !important;
    color: #fff !important;
    font-style: normal !important;
    font-weight: 700 !important;
    display: inline-block !important;
}
.van-badge__wrapper.van-icon.van-icon-arrow-left::before,
i.van-icon.van-icon-arrow-left::before,
.van-icon.van-icon-arrow-left::before {
    font-family: "vant-icon", var(--van-icon-font-family, "vant-icon") !important;
    content: "\E668" !important;
    font-size: 28px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    display: inline-block !important;
    -webkit-font-smoothing: antialiased;
}
/* Restore normal size for all other directional icons */
.van-icon-arrow:not(.right-icon),
.van-icon-arrow-up:not(.right-icon) {
    font-size: inherit !important;
    width: auto !important;
    height: auto !important;
    min-width: unset !important;
    line-height: inherit !important;
    display: inline-block !important;
    font-weight: normal !important;
}
/* Hot icon badge - ensure it shows on the right */
.hotIcon,
.hot_bage {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    right: -.08rem !important;
    top: -.10667rem !important;
    z-index: 10 !important;
}
/* Notice bar speaker icon - use announcement SVG */
.svg-icon.icon-noticeBarSpeaker,
.icon-noticeBarSpeaker {
    background-image: url(/assets/svg/announcement-icon.svg) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    display: inline-block !important;
    width: 1.4em !important;
    height: 1.4em !important;
    filter: brightness(1.2) sepia(1) saturate(3) hue-rotate(5deg) !important;
}
.svg-icon.icon-noticeBarSpeaker svg,
.icon-noticeBarSpeaker svg {
    display: none !important;
}
/* Swiper navigation buttons - position inside swiper box */
.swiper_box {
    position: relative !important;
}
.swiper_box .swiper-button {
    position: absolute !important;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding-top: 0 !important;
    z-index: 10 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
/* Notice bar - styled as marquee announcement */
.noticeBar__container {
    display: flex !important;
    padding: 6px 8px !important;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 193, 7, 0.05)) !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3) !important;
    overflow: hidden !important;
    /* Kill slideInRight from page-home-modern-enhancements.css — fires on every Vue re-render */
    animation: none !important;
    -webkit-animation: none !important;
    /* Kill backdrop-filter blur — forces GPU compositing repaint every frame */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.noticeBar__container .svg-icon,
.noticeBar__container .icon-noticeBarSpeaker {
    flex-shrink: 0 !important;
    margin-right: 3px !important;
}
.noticeBar__container-body,
#app .noticeBar__container-body {
    /* Override fixed width: 9.33333rem from index-806b22ff.css / index-4258b365.css (#app selector) */
    width: auto !important;
    flex: 1 !important;
    overflow: hidden !important;
    position: relative !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    contain: layout style !important;
}
.notice-track {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    display: flex !important;
    white-space: nowrap !important;
    width: max-content !important;
}
.noticeBar__container-body-text,
#app .noticeBar__container-body-text {
    font-size: 12px !important;
    line-height: 1.6 !important;
    color: #fff !important;
    white-space: nowrap !important;
    display: inline-block !important;
    padding-right: 80px !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    width: auto !important;
    animation: none !important;
    -webkit-animation: none !important;
}
.noticeBar__container-body-text * {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}
.noticeBar__container-body-text p {
    margin: 0 16px !important;
    padding: 0 !important;
    display: inline !important;
}
.noticeBar__container-body-text p:not(:first-child)::before {
    content: " • " !important;
    display: inline !important;
    margin: 0 8px !important;
}
.noticeBar__container-body-text strong,
.noticeBar__container-body-text span {
    font-weight: 600 !important;
    display: inline !important;
}
.noticeBar__container-body-text br {
    display: none !important;
}
.noticeBar__container-body-text br::after {
    content: " | " !important;
    display: inline !important;
    margin: 0 4px !important;
}
.noticeBar__container .hotIcon {
    flex-shrink: 0 !important;
    margin-left: 12px !important;
    padding: 6px 16px !important;
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    color: #000 !important;
    border: none !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.noticeBar__container .hotIcon:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.6) !important;
}