@media (max-width: 820px) {
    body.modal-open {
        overflow:hidden;
        position: fixed;
        width: 100%;
        height: 100%
    }
}

@media (max-width: 820px) {
    .wrapper .page {
        padding-left:0;
        padding-right: 0;
        padding-bottom: 0
    }
}

@media screen and (max-width: 600px) {
    .tick-list li {
        height:110px
    }
}

@media screen and (max-width: 820px) {
    .form-field .right-icon {
        width:45px
    }

    .form-field .right-icon svg {
        width: 13px;
        height: 13px
    }
}

@media screen and (max-width: 820px) {
    .form-row.inline.xs-column {
        display:block
    }

    .form-row.inline.xs-column .form-field,.form-row.inline.xs-column .form-label {
        width: 100%
    }

    .form-row.inline.xs-column .form-label {
        padding-right: 0
    }
}

@media screen and (max-width: 820px) {
    .bet-component .two-cols {
        width: 100%;
        flex-direction: column;
    }
    .two-cols .form-row {
        width: 100% !important;
    }
    .grouped-fields.xs-column {
        -webkit-flex-direction:column;
        flex-direction: column
    }

    .grouped-fields.xs-column .input-field {
        border-radius: 6px;
        margin-right: 0;
        margin-bottom: 6px;
        text-align: center
    }

    .grouped-fields.xs-column .input-with-icon {
        margin-right: 0
    }
}

@supports (-ms-overflow-style: none) {
    .ps {
        overflow:auto!important
    }
}

@media (-ms-high-contrast:none),screen and (-ms-high-contrast:active) {
    .ps {
        overflow: auto!important
    }
}

@media screen and (max-width: 820px) {
    .btn {
        padding:7px 0;
    }
}

@media screen and (max-width: 820px) {
    .header .logo {
        display:block
    }

    .header .header-block {
        display: none;
    }

    .open-chat-btn {
        display: none;
    }

    /* Show mobile hamburger */
    .mobile-hamburger {
        display: flex;
    }

    /* Fix header positioning on mobile */
    .header {
        left: 0 !important;
        height: 64px;
        padding-right: 0 !important;
    }

    /* Fix header inner layout on mobile */
    .header .header-inner {
        padding: 0 10px;
        gap: 8px;
        max-width: 100%;
        justify-content: flex-start;
    }

    /* Fix deposit-wrap overflow on mobile */
    .deposit-wrap {
        flex-shrink: 1;
        min-width: 0;
        gap: 8px;
        margin-left: auto;
    }

    .deposit-block {
        min-width: 0;
        padding-left: 10px !important;
    }

    .deposit-block .balance {
        min-width: 0;
        overflow: hidden;
    }

    .deposit-block .balance span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 90px;
    }

    .deposit-link {
        height: 38px !important;
        padding: 6px 8px !important;
        flex-shrink: 0;
    }

    .notification-bell-btn {
        width: 38px !important;
        height: 38px !important;
    }

    .avatar-header {
        width: 38px !important;
        height: 38px !important;
        margin-left: 8px !important;
    }

    .menu-profile-link {
        margin-right: 6px;
    }

    /* Auth buttons on mobile */
    .auth-buttons {
        flex-shrink: 0;
        margin-left: auto;
    }

    .auth-buttons .btn {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 820px) {
    .deposit-wrap .deposit-block .btn {
        width:80px
    }
}

@media (max-width: 380px) {
    .deposit-wrap .deposit-block .select-field {
        width:95px;
        font-size: 14px;
        padding: 0 6px
    }

    .deposit-wrap .dropdown>.btn {
        padding: 0 18px 0 8px
    }

    .deposit-wrap .dropdown>.btn .opener {
        width: 12px;
        height: 12px;
        right: 4px
    }

    .deposit-wrap .dropdown>.btn .selected svg {
        width: 12px;
        height: 12px
    }
}

@media screen and (max-width: 820px) {
    .header {
        padding-left: 5px;
        padding-right: 5px;
        z-index: 1000;
    }

    .header .deposit-block,.header .top-nav li.current a,.header .top-nav li a:hover {
    }
}

@media screen and (prefers-reduced-motion:reduce) {
    .modal.fade .modal-dialog {
        -webkit-transition: none;
        transition: none
    }
}

@media (min-width: 576px) {
    .modal-dialog {
        margin: 1.75rem auto
    }

    .modal-dialog-centered {
        min-height: calc(100% - 3.5rem)
    }

    .modal-dialog-centered:before {
        height: calc(100vh - 3.5rem)
    }

    .modal-sm {
        max-width: 300px
    }
}

@media (min-width: 992px) {
    .modal-lg {
        max-width:800px
    }
}

@media (min-width: 1200px) {
    .modal-xl {
        max-width:1140px
    }
}

@media screen and (prefers-reduced-motion:reduce) {
    .fade {
        -webkit-transition: none;
        transition: none
    }
}

@media (max-width: 820px) {
    .wrapper .main-content .bets-section {
        z-index:30;
        position: relative;
        margin-bottom: 60px;
        overflow-y: visible;
    }
}

@media (max-width: 820px) {
    .section-page {
        margin-bottom:30px
    }
}

@media (max-width: 480px) {
    .section-page {
        padding:15px
    }
}

@media (max-width: 440px) {
    .logo::after {
        content: none;
    }

    .deposit-link span {
        display: none;
    }

    .deposit-link img {
        display: block !important;
    }

    .deposit-block .balance {
        font-size: 14px;
    }

    .deposit-block .balance span {
        max-width: 70px;
    }

    .header .logo a {
        height: 20px;
    }

    /* Hide notification bell on very small screens */
    .header-notifications {
        display: none;
    }

    .avatar-header {
        margin-left: 6px !important;
    }
}

@media (max-width: 345px) {
    .header .logo a {
        height: 17px;
    }
}

@media screen and (max-width: 820px) {
    .bets-section {
        position:fixed;
        overflow-y: scroll;
        top: 64px;
        left: 0;
        width: 100vw;
        z-index: 10;
        height: calc(100vh - 134px);
        -webkit-transition: all .3s;
        transition: all .3s;
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

@media screen and (min-width: 1100px) {
    .row .col-lg-1 {
        width:8.33333%
    }

    .row .col-lg-1,.row .col-lg-2 {
        -webkit-flex-grow: 0;
        flex-grow: 0
    }

    .row .col-lg-2 {
        width: 16.66667%
    }

    .row .col-lg-3 {
        width: 25%
    }

    .row .col-lg-3,.row .col-lg-4 {
        -webkit-flex-grow: 0;
        flex-grow: 0
    }

    .row .col-lg-4 {
        width: 33.33333%
    }

    .row .col-lg-5 {
        width: 41.66667%
    }

    .row .col-lg-5,.row .col-lg-6 {
        -webkit-flex-grow: 0;
        flex-grow: 0
    }

    .row .col-lg-6 {
        width: 50%
    }

    .row .col-lg-7 {
        width: 58.33333%
    }

    .row .col-lg-7,.row .col-lg-8 {
        -webkit-flex-grow: 0;
        flex-grow: 0
    }

    .row .col-lg-8 {
        width: 66.66667%
    }

    .row .col-lg-9 {
        width: 75%
    }

    .row .col-lg-9,.row .col-lg-10 {
        -webkit-flex-grow: 0;
        flex-grow: 0
    }

    .row .col-lg-10 {
        width: 83.33333%
    }

    .row .col-lg-11 {
        width: 91.66667%;
        -webkit-flex-grow: 0;
        flex-grow: 0
    }

    .row .col-lg-12 {
        width: 100%;
        -webkit-flex-grow: 0;
        flex-grow: 0
    }
}

@media screen and (max-width: 820px) {
    .row .col-xs-1 {
        width:8.33333%
    }

    .row .col-xs-1,.row .col-xs-2 {
        -webkit-flex-grow: 0;
        flex-grow: 0
    }

    .row .col-xs-2 {
        width: 16.66667%
    }

    .row .col-xs-3 {
        width: 25%
    }

    .row .col-xs-3,.row .col-xs-4 {
        -webkit-flex-grow: 0;
        flex-grow: 0
    }

    .row .col-xs-4 {
        width: 33.33333%
    }

    .row .col-xs-5 {
        width: 41.66667%
    }

    .row .col-xs-5,.row .col-xs-6 {
        -webkit-flex-grow: 0;
        flex-grow: 0
    }

    .row .col-xs-6 {
        width: 50%
    }

    .row .col-xs-7 {
        width: 58.33333%
    }

    .row .col-xs-7,.row .col-xs-8 {
        -webkit-flex-grow: 0;
        flex-grow: 0
    }

    .row .col-xs-8 {
        width: 66.66667%
    }

    .row .col-xs-9 {
        width: 75%
    }

    .row .col-xs-9,.row .col-xs-10 {
        -webkit-flex-grow: 0;
        flex-grow: 0
    }

    .row .col-xs-10 {
        width: 83.33333%
    }

    .row .col-xs-11 {
        width: 91.66667%;
        -webkit-flex-grow: 0;
        flex-grow: 0
    }

    .row .col-xs-12 {
        width: 100%;
        -webkit-flex-grow: 0;
        flex-grow: 0
    }
}

@media screen and (max-width: 768px) {
    .circle {
        transform: scale(1);
    }

    .logo::after {
        top: -103%;
    }
}

@media screen and (max-width: 420px) {
    .circle {
        transform: scale(0.8);
    }
}

@media screen and (max-width: 380px) {
    .circle {
        transform: scale(0.7);
    }
}

@media screen and (max-width: 320px) {
    .circle {
        transform: scale(0.6);
    }
}
@media screen and (max-height: 549px) {
    .side-nav li {
        margin-bottom:10px
    }
}

@media screen and (max-height: 479px) {
    .side-nav li {
        margin-bottom:5px
    }
}

@media (max-width: 820px) {
    .chat .chat-editable {
        max-width:100%;
        height: 100%;
        min-height: auto
    }
}

@media screen and (max-width: 820px) {
    .chat .chat-message-input {
        height:64px;
        margin: 10px 0 0
    }
}

@media screen and (max-width: 820px) {
    .chat {
        height:auto!important
    }
}

@media (max-height: 580px),(max-width:820px) {
    .user-profile .avatar {
        width:60px;
        height: 60px;
        margin: 0 10px 0 0;
        padding: 3px
    }

    .user-profile .user-block {
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        -webkit-flex-direction: row;
        flex-direction: row
    }

    .user-profile .user-name .nickname {
        max-width: 140px
    }
}

@media (max-width: 820px) {
    .user-profile .user-name .nickname {
        max-width:200px
    }
}

@media (max-width: 820px) {
    .right-sidebar {
        -webkit-transform:translateX(100%);
        transform: translateX(100%);
        top: 64px;
        left: 0;
        right: 0 !important;
        width: 100%;
        bottom: 0;
        height: calc(100% - 64px);
        position: fixed;
        z-index: 999;
        padding-bottom: 0;
        opacity: 1 !important;
    }

    .left-sidebar {
        display: none;
    }

    .header {
        width: 100% !important;
    }

    .right-sidebar .sidebar-container {
        width: 100%;
        -webkit-flex-direction: row;
        flex-direction: row
    }

    .right-sidebar.opened {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        box-shadow: 0 0 1px hsla(0,0%,100%,.1)
    }

    .right-sidebar .tabs-nav {
        display: none
    }

    .right-sidebar .chat {
        height: calc(100% - 30px)!important;
    }

    .right-sidebar .chat .chat-params {
        padding: 10px 0 10px 5px
    }

    .right-sidebar .user-profile {
        margin-top: 30px;
        height: 100%
    }
}

@media (max-width: 820px) {
    .close-btn {
        display:-webkit-flex;
        display: flex
    }
}

@media screen and (max-width: 820px) {
    .bets-tabs-row {
        padding-right:30px
    }
}

@media (max-width: 820px) {
    .table-heading.tournaments .xs-hide {
        display:none
    }
}

@media screen and (max-width: 820px) {
    .game-stats .thead .th:nth-child(3) {
        display:table-cell
    }

    .game-stats .game-icon {
        display: block
    }
}

@media screen and (max-width: 820px) {
    .footer-counters {
        display:none
    }
}

@media screen and (max-width: 820px) {
    .footer .top-nav{
        flex-wrap: wrap;
    }

    .footer {
        margin-bottom: 0;
    }
}

@media screen and (max-width: 820px) {
    .mobile-nav-component {
        display:block
    }

    /* === NEW MOBILE BOTTOM NAV === */
    .mobile-bottom-nav {
        display: flex !important;
    }

    /* Hide history section and footer on mobile */
    .bets-history-section {
        display: none !important;
    }
    .footer {
        display: none !important;
    }
    .footer-counters {
        display: none !important;
    }

    /* Add padding-bottom for bottom nav */
    .main-content {
        padding-bottom: 70px !important;
    }
    .wrapper .page {
        padding-bottom: 0 !important;
    }

    /* Fix right sidebar positioning for new bottom nav */
    .right-sidebar {
        height: calc(100% - 64px - 64px) !important;
        bottom: 64px !important;
        z-index: 1200 !important;
    }

    .right-sidebar .chat {
        height: calc(100% - 30px) !important;
    }
}

@media screen and (max-width: 499px) {
    .modal-dialog.deposit-modal {
        width:calc(100% - 14px)
    }
}

@media (max-width: 499px) {
    .modal-dialog.faucet-demo-modal {
        width:calc(100% - 14px)
    }
}

@media screen and (max-width: 820px) {
    .modal-dialog.user-modal {
        width:calc(100% - 14px)
    }
}

@media screen and (max-width: 820px) {
    .game {
        -webkit-flex-direction:column-reverse;
        flex-direction: column-reverse
    }

    .game .game-component {
        width: 100%
    }
}

@media (max-width: 820px) {
    .game-sign .game-sign-block {
        padding:15px;
        font-size: 15px
    }

    .game-sign .game-sign-block .btn {
        margin-top: 10px;
        width: 100%;
        -webkit-justify-content: center;
        justify-content: center
    }
}

@media screen and (prefers-reduced-motion:reduce) {
    .collapsing {
        -webkit-transition: none;
        transition: none
    }
}

@media screen and (max-width: 499px) {
    .modal-dialog.fair-modal {
        width:calc(100% - 14px)
    }
}

@media screen and (max-width: 820px) {
    .game-sidebar {
        margin-right:0;
        margin-top: 10px;
        width: 100%;
        min-height: auto;
        padding-bottom: 30px
    }
}

@media screen and (max-width: 820px) {
    .bet-component .bet-footer {
        /* display:none */
    }
}

@media screen and (max-width: 820px) {
    .pick-wrapper .pick {
        font-size:13px
    }

    .pick-wrapper .pick-numbers {
        font-size: 12px
    }
}

@media (prefers-reduced-motion:reduce) {
    .carousel-item {
        -webkit-transition: none;
        transition: none
    }
}

@media (prefers-reduced-motion:reduce) {
    .carousel-fade .active.carousel-item-left,.carousel-fade .active.carousel-item-right {
        -webkit-transition: none;
        transition: none
    }
}

@media (prefers-reduced-motion:reduce) {
    .carousel-control-next,.carousel-control-prev {
        -webkit-transition: none;
        transition: none
    }
}

@media (max-width: 499px) {
    .modal-dialog.confirm-age-modal {
        width:calc(100% - 14px)
    }
}

@media (max-width: 499px) {
    .confirm-age-modal-container .body .buttons .btn {
        padding:12px 0;
        font-size: 13px
    }
}

@media (max-width: 499px) {
    .modal-dialog.tos-modal {
        width:calc(100% - 14px)
    }
}

/* ===== ENHANCED MOBILE RESPONSIVE ===== */

/* Tablets (portrait) */

/* Small phones */
@media screen and (max-width: 380px) {
    .mobile-bottom-nav-item {
        font-size: 10px;
        padding: 6px 8px;
        min-width: 50px;
    }
    .mobile-bottom-nav-icon {
        width: 22px;
        height: 22px;
    }
    .mobile-bottom-nav-icon svg {
        width: 20px;
        height: 20px;
    }
    .mobile-nav-raccoon {
        width: 22px;
        height: 22px;
    }
    .mobile-bottom-nav {
        height: 58px;
    }
}

/* Very small phones */
@media screen and (max-width: 320px) {
    .mobile-bottom-nav-item span {
        font-size: 9px;
    }
    .mobile-menu-panel {
        width: 260px;
    }
}

/* Landscape phones */
@media screen and (max-width: 820px) and (max-height: 450px) {
    .mobile-bottom-nav {
        height: 52px;
    }
    .mobile-bottom-nav-item {
        gap: 2px;
        padding: 4px 10px;
    }
    .mobile-bottom-nav-icon {
        width: 20px;
        height: 20px;
    }
    .mobile-menu-link {
        padding: 10px 20px;
    }
}

/* Fix game area for mobile bottom nav spacing */
@media screen and (max-width: 820px) {
    .game-sidebar {
        padding-bottom: 80px;
    }
    .section-page {
        margin-bottom: 16px;
    }
    /* Ensure modals show above bottom nav */
    .modal {
        z-index: 1300;
    }
    .modal-backdrop {
        z-index: 1250;
    }
}