@font-face {
    font-family: 'Gotham Book';
    src: url('/fonts/GothamBook.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'RaceCar';
    src: url('/fonts/RaceSport.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html {
    color: #000;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

html, body {
    font-family: "Gotham Book", Arial, sans-serif;
}


@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

@media (min-width: 1900px) {
    .container {
        max-width: 1900px;
    }
}

@media (min-width: 1900px) {
    .container {
        max-width: 1900px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    /* padding-top: 52px;*/
}

#menuToggleIcon {
    font-size: 12px;
}

.navbar-toggler {
    border: none !important;
    background: transparent !important;
    padding: 0;
}

    .navbar-toggler:focus,
    .navbar-toggler:active,
    .navbar-toggler:hover {
        outline: none !important;
        box-shadow: none !important;
    }

    .navbar-toggler:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }

.nav-tabs {
    border-bottom: none;
    display: flex;
    gap: 12px;
    padding-top: 12px;
}

    .nav-tabs .nav-item {
        margin-bottom: 0;
    }

    .nav-tabs .nav-link {
        border-radius: 25px;
        border: 2px solid var(--selected-stroke, #55A2EA);
        background: var(--selected-gradient, linear-gradient(0deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 126, 255, 0.07) 100%));
        box-shadow: 0px 1px 1px 0px rgba(10, 42, 74, 0.11), 0px 4px 8.4px 0px rgba(12, 47, 84, 0.08);
        font-weight: 600;
        font-size: 18px;
        padding: 8px 24px;
        color: #0a2a4a;
        transition: all 0.3s ease;
    }

        .nav-tabs .nav-link.active {
            border-radius: 25px;
            border: 1px solid #63ADF4;
            background: linear-gradient(0deg, #09539A 0%, #00365E 100%);
            box-shadow: 0 0 0 1px rgba(8, 49, 89, 0.78), 0 4px 8.4px 0 rgba(0, 0, 0, 0.37);
            backdrop-filter: blur(2px);
            color: white;
            font-weight: 600;
            font-size: 18px;
        }

.tab-content {
    margin-top: 30px;
}


.home-index-page {
    margin-top: 52px;
    background: #F5F7FB;
}

.custom-navbar {
    height: 52px;
    background: linear-gradient( 90deg, rgba(3, 39, 66, 0.9) -0.17%, rgba(0, 92, 185, 0.9) 99.83% );
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: none;
    position: fixed;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* sit above other content */
}


nav.position-relative {
    position: relative;
}

.logo-pill {
    position: absolute;
    top: 0;
    left: 0;
    height: 74px; /* match your navbar height */
    width: 150px; /* adjust to fit your logo + padding */
    background-color: #AA170F; /* your chosen colour */
    border-bottom-right-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000; /* sit above the bg-white nav */
}

    /* logo inside the pill */
    .logo-pill .logo-img {
        max-height: 32px; /* shrink to taste */
        width: auto;
    }

/* push the rest of your nav content right so it doesn’t sit under the pill */
nav .container.ps-5 {
    padding-left: 0px !important; /* pill width (150px) + desired gap (30px) */
}

.navbar-item-padding {
    margin-left: 8%;
}

.banner-container {
    position: relative;
    width: 100%;
    padding-top: calc(212 / 1511 * 100%);
    overflow: hidden;
}

.banner-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-banner-text {
    position: absolute;
    top: 8%;
    left: 3%;
    font-size: 56px;
    color: white;
    font-style: italic;
    font-family: 'RaceCar', sans-serif;
    font-weight: 900;
}

.header-banner-text-img {
    position: absolute;
    top: 20%;
    left: 5%;
    max-width: 40%;
    height: auto;
}


.mobile-menu-item {
    display: flex;
    align-items: center; /* vertical center */
    justify-content: center; /* horizontal center */
    width: 45px; /* match your background image size */
    height: 45px;
    position: relative; /* keeps it in normal flow */
}

    .mobile-menu-item img {
        position: absolute; /* sit behind the icon */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        z-index: 0;
    }

.mobile-menu-item-font {
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem; /* adjust for desired size */
    color: #fff;
    z-index: 1; /* sit on top of the img */
    pointer-events: none;
}

.cart-with-badge {
    position: relative; /* so badge is positioned relative to the cart container */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
}

    .cart-with-badge img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        z-index: 0;
    }

    .cart-with-badge .mobile-menu-item-font {
        z-index: 1;
        color: #fff;
        font-size: 1.2rem;
        pointer-events: none;
    }

/* Badge styling */
.cart-badge {
    position: absolute;
    top: 4px; /* adjust to sit nicely in top-right corner */
    right: 4px;
    background-color: red;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 50%;
    line-height: 1;
    z-index: 2;
    min-width: 18px;
    text-align: center;
}

#mobile-login-spacer {
    border-bottom: 1px solid rgba(255,255,255, 0.55); /* thin white line at 20% opacity */
    padding-bottom: 1rem; /* gives breathing room below the links */
    margin-bottom: 1rem; /* separates the next section */
    padding-left: 5%;
    padding-right: 5%;
}

.spacer-border {
    border: 1px solid rgba(4, 58, 106, 0.14);
    margin-top: 30px;
    margin-bottom: 10px;
}

.primary-btn {
    width: 105px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 25px;
    border: 1px solid #63ADF4;
    background: linear-gradient(0deg, rgba(42, 119, 192, 0.15) 0%, rgba(3, 39, 66, 0.15) 100%);
    box-shadow: 0px 4px 8.4px 0px rgba(0, 0, 0, 0.17);
    backdrop-filter: blur(2px);
    color: #000;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.btn-info {
    border-radius: 25px;
    border: 1px solid #63ADF4;
    background: linear-gradient(19deg, #09539A 14.58%, #00365E 113.42%);
    box-shadow: 0 0 0 1px rgba(8, 49, 89, 0.78), 0 4px 8.4px 0 rgba(0, 0, 0, 0.37);
    backdrop-filter: blur(2px);
    width: 100%;
    color: white;
}

.menu-icon-btn {
    font-weight: 600;
    font-size: 18px;
    padding: 8px 24px;
    color: #000;
    border-radius: 25px;
    border: 1px solid var(--glass-button-blue-stroke-gradient, #FFF);
    background: var(--glass-button-blue-gradient, linear-gradient(0deg, rgba(255, 255, 255, 0.15) 0%, rgba(12, 66, 121, 0.07) 100%));
    box-shadow: 0 4px 8.4px 0 rgba(0, 0, 0, 0.17);
}

    .menu-icon-btn:hover {
        font-weight: 600;
        font-size: 18px;
        padding: 8px 24px;
        color: #FFF;
        border-radius: 25px;
        border: 1px solid #63ADF4;
        background: linear-gradient(0deg, #09539A 0%, #00365E 100%);
        box-shadow: 0 0 0 1px rgba(8, 49, 89, 0.78), 0 4px 8.4px 0 rgba(0, 0, 0, 0.37);
        backdrop-filter: blur(2px);
    }

.menu-icon-selected-btn {
    font-weight: 600;
    font-size: 18px;
    padding: 8px 24px;
    color: #FFF;
    border-radius: 25px;
    border: 1px solid #63ADF4;
    background: linear-gradient(0deg, #09539A 0%, #00365E 100%);
    box-shadow: 0 0 0 1px rgba(8, 49, 89, 0.78), 0 4px 8.4px 0 rgba(0, 0, 0, 0.37);
    backdrop-filter: blur(2px);
}

.secondary-rounded-btn {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    border-radius: 25px;
    border: 1px solid #FFF;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.15) 0%, rgba(12, 66, 121, 0.07) 100%);
    box-shadow: 0 1px 1px 0 rgba(10, 42, 74, 0.11), 0 4px 8.4px 0 rgba(12, 47, 84, 0.08);
}

.secondary-rounded-btn-active {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    border-radius: 25px;
    border: 2px solid var(--selected-stroke, #55A2EA);
    background: var(--selected-gradient, linear-gradient(0deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 126, 255, 0.07) 100%));
    box-shadow: 0 1px 1px 0 rgba(10, 42, 74, 0.11), 0 4px 8.4px 0 rgba(12, 47, 84, 0.08);
}

.secondary-rounded-btn,
.secondary-rounded-btn-active {
    transition: all 0.2s ease-in-out;
}

.casino-btn {
    font-weight: 600;
    color: white;
    background: linear-gradient(0deg, #09539A 0%, #00365E 100%);
    border-radius: 25px;
    font-size:14px;
}

.casino-demo-btn {
    font-weight: 600;
    color: white;
    font-size:14px;
    background: linear-gradient(0deg, #09539A 0%, #00365E 100%);
    border-radius: 25px;
}

.webcafe-button-bar {
    padding-bottom: 20px;
}

.webcafe-carousel-wrapper {
    max-width: 100%;
    overflow: hidden;
    padding: 5px;
}

#casino-nav-img:hover {
    cursor: pointer;
}

#lotto-nav-img {
    cursor: pointer;
}

#sports-nav-img {
    cursor: pointer;
}

.webcafe-carousel {
    overflow-x: auto;
    display: flex;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

    .webcafe-carousel::-webkit-scrollbar {
        display: none;
    }

.game-card {
    width: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 275px; /* Adjust as needed for visual balance */
    padding: 15px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius:15px;
}

.tournament-game-card {
   /* width: 500px;*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*height: 250px;*/
    padding: 15px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 15px;
}

.thumbnail {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* Uniform image size */
    .thumbnail img {
        max-height: 200px;
        object-fit: contain;
        width: 100%;
    }

.icon {
    width: 29px;
    height: 29px;
    display: inline-block;
    vertical-align: middle;
}

.menu-text-item {
    color: #FFF;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    opacity: 0.7;
}

.selected-menu-text-item {
    color: black;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    opacity: 0.7;
}

.title-label-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border: 1px solid #053A69;
    border-radius: 25px;
    background: #053A69;
    color: white;
    font-size: 20px;
    margin-bottom: 5px;
    margin-right: 10px;
}


.title-label-text-secondary {
    border: 1px #E6BC75 solid;
    border-radius: 25px;
    width: 35px;
    display: inline-block;
    text-align: center;
    background: #E6BC75;
    height: 35px;
    color: black;
    line-height: 31px;
    font-size: 20px;
    margin-bottom: 5px;
    margin-right: 5px;
}

.step-text-primary {
    color: #000;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.padding-spacer {
    padding-top: 10px;
}

.error-message {
    color: red;
    text-align: center;
    font-size: 24px;
}


.processing-message {
    color: black;
    text-align: center;
    font-size: 24px;
}

.success-message {
    color: green;
    text-align: center;
    font-size: 24px;
}

#mobileOverlayMenu {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
}

.mobile-menu-overlay {
    position: fixed;
    top: 50px; /* navbar height */
    left: 0;
    width: 100%;
    height: calc(100% - 50px);
    background: rgba(3, 41, 68, 0.91);
    backdrop-filter: blur(5.15px);
    z-index: 999;
    display: none;
    flex-direction: column; /* stack children vertically */
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
}

    .mobile-menu-overlay.show {
        display: flex;
        opacity: 1;
    }

.mobileOverlayMenu li {
    padding: 10px 0px 0px 0px;
}

.overlay-content-mobile {
    flex: 1; /* take up remaining height */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
    width: 100%;
    padding-bottom: 1rem; /* space for last item */
    margin: 50px 50px 50px 50px;
}

/*.overlay-content-mobile {
    margin: 50px 50px 50px 50px;
    width: calc(100% - 50px);
    box-sizing: border-box;
}*/

.nav-links .menu-item-icon {
    margin-right: 10px;
    width: 24px;
    height: 24px;
}

.mobile-menu-overlay a {
    color: #fff !important;
    text-decoration: none;
}

.mobile-menu-arrow {
    font-size: 20px;
    position: absolute;
    right:5.5rem;
    top: 50%;
    transform: translateY(-50%);
}

.nav-links,
.nav-links-mobile-submenu {
    list-style-type: none;
    padding: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
}

    .nav-links li {
        padding-top: 10px;
        padding-bottom: 10px;
        position: relative;
    }

.overlay-content .nav-links {
    list-style: none;
    padding: 0;
    text-align: center;
}

    .overlay-content .nav-links li {
        margin: 20px 0;
    }

    .overlay-content .nav-links a {
        font-size: 2rem;
        color: white;
        text-decoration: none;
    }

.mobile-sub-menu-link {
    padding-top: 10px;
    padding-top: 10px;
}

.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(3, 41, 68, 0.91);
    backdrop-filter: blur(5.15px);
    display: none;
    z-index: 2000;
    /* flex-center the inner box */
    justify-content: center;
    align-items: flex-start; /* important: allows content to start at top */
    /* allow scrolling inside overlay */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* smooth scroll on mobile */
}

    .login-overlay.show {
        display: flex;
    }

#login-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertical center */
    align-items: center; /* horizontal center */
    height: 100%;
}

#login-details-wrapper,
#forgot-pin-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 300px; /* match your login form width */
    margin: 0 auto;
}

    #login-details-wrapper button,
    #forgot-pin-wrapper button {
        display: block;
        margin-bottom: 1rem; /* space between buttons */
    }

    #forgot-pin-wrapper input.form-control {
        margin-bottom: 1rem; /* same spacing as login inputs */
    }

    #forgot-pin-wrapper span {
        color: white; /* match login text color */
        text-align: center;
        margin-bottom: 1rem;
        display: block;
    }


.forgot-password-link {
    margin-bottom: 1rem;
}

    .forgot-password-link:hover {
        margin-bottom: 1rem;
        cursor: pointer;
    }

.info-box {
    font-size: 24px;
    color: white;
}

.error-control {
    border: 2px solid red;
}

label.error {
    color: #d9534f;
    font-size: 0.875rem;
    margin-top: 4px;
    display: block;
}

input.error, select.error {
    border-color: #d9534f;
    background-color: #fdf2f2;
}

.close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
}

.close-pgmodal-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    border-radius: 25px;
    border: 1px solid #FFF;
    background: linear-gradient(156deg, #D1E3F9 23.68%, #FFF 85.38%);
    box-shadow: 0px 4px 5.8px 1px rgba(0, 0, 0, 0.25), 0px 0px 4px 0px rgba(0, 0, 0, 0.73);
    color: black;
}

.pggames-btn-default {
    display: inline-flex; /* make the button a flex container */
    align-items: center; /* vertically center its contents */
    justify-content: center; /* horizontally center its contents */
    text-decoration: none; /* remove default link underline */
    width: 105px;
    height: 36px;
    border: none;
    border-radius: 25px;
    /* background: linear-gradient(90deg, #032A44 -0.17%, #005CB9 99.83% );*/
    background-color: transparent;
    /* box-shadow: 0px 4px 8.4px rgba(0, 0, 0, 0.17);*/
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

    .pggames-btn-default .menu-text-item {
        margin: 0;
    }

    .pggames-btn-default .menu-item-icon {
        position: relative;
        right: 10%;
        width: 24px;
        height: 24px;
    }

.pggames-btn-active .menu-item-icon {
    position: relative;
    right: 10%;
    width: 24px;
    height: 24px;
}

.pggames-btn-lrg-default {
    display: inline-flex; /* make the button a flex container */
    align-items: center; /* vertically center its contents */
    justify-content: center; /* horizontally center its contents */
    text-decoration: none; /* remove default link underline */
    width: 135px;
    height: 45px;
    border-radius: 25px;
    /*background: linear-gradient(90deg, #032A44 -0.17%, #005CB9 99.83% );*/
    background-color: transparent;
    /* box-shadow: 0px 4px 8.4px rgba(0, 0, 0, 0.17);*/
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.pggames-btn-default:hover {
    width: 105px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 25px;
    border: 1px solid #63ADF4;
    background: linear-gradient(90deg, #032A44 -0.17%, #005CB9 99.83% );
    box-shadow: 0px 4px 8.4px rgba(0, 0, 0, 0.17);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.pggames-btn-lrg-default:hover {
    width: 135px;
    height: 45px;
    flex-shrink: 0;
    border-radius: 25px;
    border: 1px solid #63ADF4;
    background: linear-gradient(90deg, #032A44 -0.17%, #005CB9 99.83% );
    box-shadow: 0px 4px 8.4px rgba(0, 0, 0, 0.17);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.pggames-btn-active {
    width: 105px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 25px;
    border: 1px solid #FFF;
    background: linear-gradient(156deg, #D1E3F9 23.68%, #FFF 85.38%);
    box-shadow: 0px 4px 5.8px 1px rgba(0, 0, 0, 0.25), 0px 0px 4px 0px rgba(0, 0, 0, 0.73);
}

.pggames-btn-large-active {
    width: 135px;
    height: 45px;
    flex-shrink: 0;
    border-radius: 25px;
    border: 1px solid #FFF;
    background: linear-gradient(156deg, #D1E3F9 23.68%, #FFF 85.38%);
    box-shadow: 0px 4px 5.8px 1px rgba(0, 0, 0, 0.25), 0px 0px 4px 0px rgba(0, 0, 0, 0.73);
}


.pggames-btn-disabled {
    width: 135px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 25px;
    border: 1px solid var(--glass-button-blue-stroke-gradient, #FFF);
    opacity: 0.36;
    background: var(--glass-button-blue-gradient, linear-gradient(0deg, rgba(255, 255, 255, 0.15) 0%, rgba(12, 66, 121, 0.07) 100%));
    box-shadow: 0px 4px 8.4px 0px rgba(0, 0, 0, 0.17);
}

.pggames-btn-large-disabled {
    width: 135px;
    height: 45px;
    flex-shrink: 0;
    border-radius: 25px;
    border: 1px solid var(--glass-button-blue-stroke-gradient, #FFF);
    opacity: 0.36;
    background: var(--glass-button-blue-gradient, linear-gradient(0deg, rgba(255, 255, 255, 0.15) 0%, rgba(12, 66, 121, 0.07) 100%));
    box-shadow: 0px 4px 8.4px 0px rgba(0, 0, 0, 0.17);
}

.pggames-secondary-btn-default {
    /*width: 240px;*/
    /*  height: 36px;*/
    border-radius: 25px;
    color: white;
    border: 1px solid #63ADF4;
    background: linear-gradient(19deg, #09539A 14.58%, #00365E 113.42%);
    box-shadow: 0px 0px 0px 1px rgba(8, 49, 89, 0.78), 0px 4px 8.4px 0px rgba(0, 0, 0, 0.37);
    backdrop-filter: blur(2px);
}

    .pggames-secondary-btn-default:hover {
        /*width: 240px;*/
        /* height: 36px;*/
        border-radius: 25px;
        color: white;
        border: 1px solid white;
        background: linear-gradient(90deg, #032A44 -0.17%, #005CB9 99.83% );
        box-shadow: 0px 4px 8.4px rgba(0, 0, 0, 0.17);
        backdrop-filter: blur(2px);
    }

/*.featured-image-col {
    width: 20%;
    padding: 10px;
}

@media (max-width: 768px) {
    .featured-image-col {
        width: 100%;
    }
}*/

.text-loading {
    color: white;
    font-size: 24px;
    text-align: center;
}

.fa-spin {
    animation: fa-spin 1s infinite linear !important;
}

.webcafe-page {
    background: rgba(3, 41, 68, 0.91);
    backdrop-filter: blur(5.150000095367432px);
    padding: 100px;
    color: white;
    margin-bottom: -16px;
}

.webcafe-container {
    border-radius: 25px;
    border: 1px solid rgba(4, 58, 106, 0.14);
    background: linear-gradient(0deg, rgba(240, 242, 248, 0.00) 0%, rgba(12, 66, 121, 0.08) 100%);
    margin: 15px;
    /*margin-top: 30px;*/
    padding: 20px;
}

.webcafe-top-container{
    margin-top:125px;
}

.webcafe-container-secondary {
    border-radius: 25px;
    border: 1px solid rgba(4, 58, 106, 0.14);
    background: rgba(12, 66, 121, 0.03);
    margin: 10px;
    padding: 20px;
}

.webcage-container-alert {
    border-radius: 25px;
    border: 1px solid rgba(106, 4, 4, 0.14);
    background: rgba(121, 12, 12, 0.03);
    margin: 15px;
    padding: 20px;
}


.webcafe-quick-bets-container {
    border-radius: 25px;
    border: 1px solid #E6BC75;
    background: linear-gradient(0deg, rgba(240, 242, 248, 0.00) 0%, rgba(235, 198, 77, 0.06) 100%);
    margin: 15px;
    padding: 40px;
}

.login-message-webcafe-container {
    margin-top: 85px;
}

.grid-scroll-container {
    overflow-x: auto;
    min-width: 800px
}

.form-group.row {
    margin-bottom: 10px;
}

/* Remove all borders from the grid */
/*telerik grid*/
.k-grid-table,
.k-grid-table .k-table-th,
.k-grid-table .k-table-td,
.k-grid-table .k-table-row {
    border: none !important;
    box-shadow: none !important;
}

    /* Uniform header styling */
    .k-grid-table .k-table-th {
        background-color: #e2eaf2; /* Light blue-gray */
        font-weight: bold;
        color: #333;
    }

    /* Uniform row styling */
    .k-grid-table .k-table-row,
    .k-grid-table .k-table-alt-row {
        background-color: #fff !important; /* Force white background */
        color: #000;
    }

        /* Optional: remove hover effect */
        .k-grid-table .k-table-row:hover {
            background-color: #fff !important;
        }


    .k-grid-table .btn {
        border-radius: 25px;
        border: 1px solid #63ADF4;
        background: linear-gradient(19deg, #09539A 14.58%, #00365E 113.42%);
        box-shadow: 0 0 0 1px rgba(8, 49, 89, 0.78), 0 4px 8.4px 0 rgba(0, 0, 0, 0.37);
        backdrop-filter: blur(2px);
        color: #fff;
        padding: 6px 12px;
        font-weight: 500;
        transition: all 0.3s ease;
    }

        .k-grid-table .btn:hover {
            background: linear-gradient(19deg, #0a5fb0 14.58%, #004074 113.42%);
            transform: scale(1.03);
        }

/*Telerik checkbox*/
.k-checkbox:checked {
    background: linear-gradient(19deg, #09539A 14.58%, #00365E 113.42%);
    box-shadow: 0 0 0 1px rgba(8, 49, 89, 0.78), 0 4px 8.4px 0 rgba(0, 0, 0, 0.37);
    border-color: #63ADF4 !important;
}

/*Telerik dropdown*/
/* Override selected item styles */
.k-list-item.k-selected,
.k-selected.k-list-optionlabel,
.k-selected.k-list-custom-value {
    background: linear-gradient(19deg, #09539A 14.58%, #00365E 113.42%);
    border-radius: 25px;
    border: 1px solid #63ADF4;
    box-shadow: 0 0 0 1px rgba(8, 49, 89, 0.78), 0 4px 8.4px 0 rgba(0, 0, 0, 0.37);
    backdrop-filter: blur(2px);
    color: white; /* optional for contrast */
}

/*dropdown*/
.custom-multiselect {
    position: relative;
    width: 100%;
    max-width: 300px;
    font-family: Arial, sans-serif;
}

.dropdown-wrapper {
    position: relative;
    z-index: 899;
}

.dropdown-display {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 10px 40px 10px 15px;
    border-radius: 25px;
    border: 2px solid var(--selected-stroke, #55A2EA);
    background: #FFF;
    box-shadow: 0 1px 1px rgba(5, 58, 105, 0.12), 0 4px 4px rgba(0, 0, 0, 0.03);
    font-size: 16px;
}

.dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #ccc;
    background-color: white;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    z-index: 10;
}

    .dropdown-list label {
        display: block;
        padding: 6px 10px;
        cursor: pointer;
    }

    .dropdown-list input[type="checkbox"] {
        margin-right: 8px;
    }

.custom-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.dropdown-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #05466e;
    font-size: 14px;
}

.multi-select-button {
    /* sizing and remove any plugin defaults */
    width: 100% !important;
    padding: 10px 15px !important;
    margin: 0 !important;
    background: #fff !important;
    border: 2px solid var(--selected-stroke, #55A2EA) !important;
    border-radius: 25px !important;
    box-shadow: 0 1px 1px rgba(5, 58, 105, 0.12), 0 4px 4px rgba(0, 0, 0, 0.03) !important;
    /* hide any default scrollbars / list styling if needed */
    overflow: hidden;
    position: relative;
}

/* optional: re-add your own chevron arrow on the right */
/*.multi-select-button::after {
        content: "\f078";*/ /* unicode for FontAwesome chevron-down */
/*font-family: "Font Awesome 5 Free";
        font-weight: 900;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        color: var(--selected-stroke, #55A2EA);
    }*/

/* now target the inner list items so they don’t bleed out */
/* .multi-select-button .ms-list {
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }*/

/* if plugin wraps your options in two panes, match their heights */
/*.multi-select-button .ms-selectable,
    .multi-select-button .ms-selection {
        max-height: none !important;
        height: auto !important;
        border: none !important;
        box-shadow: none !important;
    }*/

.webcafe-modal-btn {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Push icon to the right */
    background: white;
    border-radius: 25px;
    padding: 10px 20px;
    width: 100%; /* Optional: make button fill its column */
    border: none; /* Optional: remove default button border */
    box-shadow: 0 1px 1px rgba(5, 58, 105, 0.12), 0 4px 4px rgba(0, 0, 0, 0.03);
    font-family: inherit;
    font-size: 16px;
    cursor: pointer;
}

#lblTotBal{
    margin-left:5px;
}

.button-icon-header {
    border-radius: 25px;
    border: 1px solid #FFF;
    background: linear-gradient(156deg, rgba(173, 209, 240, 0.94) 23.68%, rgba(255, 255, 255, 0.94) 85.38%);
    box-shadow: 0 4px 5.8px 1px rgba(0, 0, 0, 0.25), 0 0 4px 0 rgba(0, 0, 0, 0.73);
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    margin-left: -27px;
}

.button-icon {
    border: 1px solid rgba(5, 70, 126, 0.16);
    border-radius: 25px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    float: right;
}

    .button-icon i {
        color: #05466e;
        font-size: 14px;
    }

.numeric-input {
    border-radius: 25px;
    border: 2px solid var(--selected-stroke, #55A2EA);
    background: #FFF;
    box-shadow: 0 1px 1px 0 rgba(5, 58, 105, 0.12), 0 4px 4px 0 rgba(0, 0, 0, 0.03);
    width: 45px;
    height: 45px;
    text-align: center;
    font-size: 13px;
}

/*hide numeric input up and down arrows*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

/*accordian*/
.accordion {
    border-radius: 25px !important;
    border: 1px solid rgba(4, 58, 106, 0.14) !important;
    background: #FFF !important;
    margin: 15px !important;
    padding: 20px !important;
}

/* Accordion item: remove default borders and shadows */
.accordion-item {
    border: none !important;
    background: transparent !important;
}

/* Accordion button: mimic .webcafe-container layout */
.accordion-button {
   /* padding: 0 !important;*/
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.grid-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

    .grid-scroll-wrapper .k-grid {
        min-width: 800px;
    }

@media (max-width: 576px) {
    /*.custom-logo-container {
        padding-top: 0;
        margin-top: -7px;
    }*/

    .menu-icon-btn,
    .menu-icon-selected-btn {
        font-size: 14px;
        padding: 6px 16px;
        border-radius: 20px;
    }

    .carousel-controls .menu-icon-btn i {
        font-size: 12px;
    }

    #searchInput {
        width: 100% !important;
        margin-bottom: 10px;
    }

    .webcafe-button-bar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .nav-tabs .nav-link {
        font-size: 14px !important;
        padding: 6px 10px !important;
    }

    .nav-tabs {
        flex-wrap: wrap;
        gap: 6px;
    }

    .nav-item {
        flex: 1 1 auto;
        text-align: center;
    }


    .webcafe-container, .webcafe-quick-bets-container {
        padding: 20px;
        margin: 10px;
    }

    .webcafe-top-container {
        margin-top: 125px;
    }

    .webcafe-modal-btn {
        font-size: 14px;
    }

    .menu-icon-btn {
        margin-bottom: 10px;
        font-size: 14px;
        padding: 4px 16px;
    }

    .carousel-controls {
        flex-direction: column;
        align-items: flex-end;
    }

    .header-banner-text {
        position: absolute;
        top: 31%;
        left: 5%;
        font-size: 22px;
    }

    .header-banner-text-img {
        position: absolute;
        top: 50%;
        left: 5%;
        max-width: 25%;
        height: auto;
    }

    #prevBtn {
        display: none;
    }

    #nextBtn {
        display: none;
    }

    .lotto-step-number {
        border: 1px #053A69 solid;
        border-radius: 25px;
        width: 35px;
        display: inline-block;
        text-align: center;
        background: #053A69;
        height: 35px;
        color: white;
        line-height: 31px;
        font-size: 20px;
        margin-bottom: 5px;
    }

    .title-label-text-secondary {
        border: 1px #E6BC75 solid;
        border-radius: 25px;
        width: 35px;
        display: inline-block;
        text-align: center;
        background: #E6BC75;
        height: 35px;
        color: black;
        line-height: 31px;
        font-size: 20px;
        margin-bottom: 5px;
    }

    .step-text-primary {
        color: #000;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .footer-container{
        min-width:800px;
    }
}