/**
 * Disabling autofill background color
 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 9999s;
    transition-delay: 9999s;
}

body {
    background: #000909;
    font-family: 'Saira', sans-serif;
    position: relative;
}

body.popup-open:before {
    content: '';
    backdrop-filter: blur(12px);
    background: #000000b8;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 2;
}

/* Custom column padding for proper spacing on mobile only */
@media (max-width: 767px) {
    .row > .col-6:nth-child(odd) {
        padding-right: 6px;
        padding-left: 12px;
    }

    .row > .col-6:nth-child(even) {
        padding-left: 6px;
        padding-right: 12px;
    }
}

.w-40px {
    width: 40px;
}

.w-50px {
    width: 50px;
}

header {
    border-bottom: 1px solid #dfdbe94a;
    margin-bottom: 42px;
}

.navbar-brand img {
    max-height: 50px;
}

.btn {
    border-radius: 12px;
    padding: 8px 20px;
}

.btn-primary {
    background: linear-gradient(180deg, #6683ff -31.25%, #0030ff 100%);
}

.color-primary-1 {
    color: #00fff4;
}

.btn-outline-primary {
    color: #fff;
    border-color: 1px solid var(--Opacity-White-50, #FFFFFF80);
    font-weight: 600;
}

.view-more-btn {
    border: 1px solid rgba(102, 102, 102, 1);
}

#view-more-heading {
    margin-bottom: 0px !important;
}

.banner-item {
    position: relative;
    height: 450px;
    background-size: cover;
    background-position: center center;
    border-radius: 20px;
    padding: 42px;
    box-shadow: 0px 4px 8px -2px #0000001a;
}

.banner-item::after {
    content: '';
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 37.82%, rgba(0, 0, 0, 0.92) 86.42%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    border-radius: 20px;
}

.banner-item h1,
.banner-item h2 {
    font-size: 40px;
    font-weight: 700;
    color: white;
    position: relative;
    z-index: 1;
}

#banner-section {
    position: relative;
}

#banner-section .item a {
    text-decoration: none;
    text-align: center;
    color: #fff;
}

#banner-section:before {
    content: "";
    position: absolute;
    background: url('../images/banner-shadow.png');
    left: 0;
    right: 0;
    bottom: -5px;
    height: 88px;
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 900px) and (min-width: 768px) {
    #banner-section:before {
        background-size: 90%;
    }
}


.banner-item p {
    font-size: 16px;
    margin-bottom: 0;
    z-index: 1;
}

.owl-carousel {
    position: relative;
}

.owl-dots {
    display: flex;
    gap: 8px;
    margin-top: 25px;
}

.owl-theme .owl-nav {
    margin-top: 0;
}

.owl-nav {
    position: absolute;
    right: -2%;
    top: 35%;
}

@media (max-width: 768px) {
    .owl-nav {
        top: 30% !important;
    }

    #discount-section .owl-nav {
        top: 120px !important;
    }
}

@media (max-width: 400px) {
    .owl-nav {
        top: 25% !important;
    }

    #discount-section .owl-nav {
        top: 100px !important;
    }
}


.owl-prev {
    display: none !important;
}

.owl-nav button {
    width: 40px;
    height: 40px;
    border: 1px solid #FFFFFF26 !important;
    background: #FFFFFF !important;
    border-radius: 50px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.owl-nav button i {
    color: #000000;
}

.owl-theme .owl-dots .owl-dot {
    width: 8px;
    height: 8px;
    margin: 0;
    padding: 0;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.5);
    display: block;
}

.owl-theme .owl-dots .owl-dot span {
    display: none;
}

.owl-theme .owl-dots .owl-dot.active {
    width: 72px !important;
    background: white;
}

section {
    margin-bottom: 42px;
}

section h2 {
    color: white;
    font-size: 32px;
    font-weight: 700;
}

.discount-item,
.voucher-item,
.topup-item {
    padding: 16px;
    border: 1px solid #ffffff3d;
    display: flex;
    border-radius: 20px;
    color: #fff;
    text-decoration: none;
    position: relative;
    flex-direction: column;
    gap: 12px;
}

.owl-item .item .voucher-item, .owl-item .item .topup-item {
    padding: 0px !important;
    border: none !important;
}

#voucher-section .voucher-item,
#topup-section .topup-item {
    border: none;
    padding: 0px;
}

.voucher-items .voucher-item,
.voucher-items .topup-item {
    border: none;
    background: var(--Opacity-White-5, #FFFFFF0D);
}

.discount-item img,
.voucher-item img,
.topup-item img {
    border-radius: 20px;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.discount-item img {
    height: 312px !important;
}

@media (max-width: 1024px) and (min-width: 769px) {
    .discount-item img {
        height: 280px !important;
    }
}

/* Medium screens (400px – 768px) */
@media (max-width: 768px) and (min-width: 401px) {
    .discount-item img {
        height: 240px !important;
    }
}

/* Very small screens (< 400px) */
@media (max-width: 400px) {
    .discount-item img {
        height: 180px !important;
    }
}

a.discount-item .tag,
a.voucher-item .tag,
a.topup-item .tag {
    background: linear-gradient(180deg, #00fff4 0%, #01b6ae 100%);
    backdrop-filter: blur(2.5px);
    font-size: 14px;
    color: #000;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    position: absolute;
    top: 28px;
    right: 28px;
}

a.voucher-item .tag,
a.topup-item .tag {
    top: 16px;
    right: 16px;
}

.discount-item-details span,
.voucher-item-details span,
.topup-item-details span {
    font-weight: 500;
    font-size: 16px;
    color: #00fff4;
}

.discount-item-details h3,
.voucher-item-details h3,
.topup-item-details h3 {
    font-weight: 600;
    font-size: 20px;
    margin: 5px 0 12px 0;
}

.discount-item-details .price-area {
    display: flex;
    justify-content: space-between;
    color: #fff;
    align-items: center;
}

.discount-item-details .price-area span {
    color: #fff;
    font-weight: 300;
    font-size: 14px;
    text-decoration: line-through;
}

.discount-item-details .price-area span.discounted-price,
.discount-item-details .price-area span.discounted-price span {
    text-decoration: none;
}

.discount-item-details .price-area span.discounted-price span {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
}

.voucher-item .image-wrapper,
.topup-item .image-wrapper {
    position: relative;
}

.voucher-item .image-wrapper .shadow,
.topup-item .image-wrapper .shadow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -25px;
    z-index: -1;
    width: 80%;
    margin: auto;
    top: unset;
    aspect-ratio: unset;
}

.voucher-item .image-wrapper img,
.topup-item .image-wrapper img {
    z-index: 0;
}

.container {
    max-width: 1196px !important;
}

#popular-section .popular-container {
    display: grid;
    grid-template-rows: 40% calc(60% - 16px);
    gap: 16px;
    height: 100%;
}

#popular-section .popular-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

#popular-section .popular-container .popular-item {
    display: flex;
    position: relative;
}

#popular-section .owl-stage .owl-item:nth-child(odd) .popular-container {
    grid-template-rows: calc(60% - 16px) 40%;
    position: relative;
}

.cta-tag {
    background: linear-gradient(0deg, #202020, #202020),
    linear-gradient(0.23deg, rgba(255, 0, 145, 0.078) 8%, rgba(153, 153, 153, 0.102) 10%);
    color: #ff0091;
    display: inline-block;
    backdrop-filter: blur(2.5px);
    padding: 6px 12px;
    margin-bottom: 18px;
    border-radius: 10px;
    backdrop-filter: blur(2.5px);
    border: 1px solid #FFFFFF0D;
    font-weight: 600 !important;
}

/* Top-center horizontal line */
.cta-tag::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 75px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 0, 145, 0) 0%, #FF0091 50%, rgba(255, 0, 145, 0) 100%);
}

.cta-wrapper {
    border: 1px solid #ffffff1a;
    display: block;
    cursor: pointer;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(0deg, rgba(137, 137, 137, 0.05), rgba(137, 137, 137, 0.05)),
    radial-gradient(
            31.19% 68.12% at -14.17% -43.06%,
            rgba(0, 255, 244, 0.56) 0%,
            rgba(0, 255, 244, 0) 100%
    ) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
            10.12% 22.4% at -3.6% 46.24%,
            rgba(0, 255, 244, 0.2) 0%,
            rgba(0, 255, 244, 0) 100%
    ) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
            48.66% 33.14% at 50% 109.1%,
            rgba(48, 85, 227, 0.6) 0%,
            rgba(48, 85, 227, 0) 100%
    ) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
            68.81% 68.81% at 45.4% 24.28%,
            rgba(84, 83, 83, 0.5) 0%,
            rgba(84, 83, 83, 0) 100%
    ) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    linear-gradient(217.78deg, rgba(0, 255, 244, 0.2) -14.46%, rgba(0, 255, 244, 0) 39.25%);
    backdrop-filter: blur(150px);
    text-decoration: none;
}

.cta-wrapper img {
    border-radius: 16px;
}

#comapny-logo h2 {
    font-size: 18px;
}

.copyright-menu a {
    color: #ffffff;
}

/* Logo Slider - Animation handled by JavaScript */
.img-ticker {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
}

.tickerlogo {
    width: 135px;
    margin: 0 3rem;
    vertical-align: middle;
}

.footer-navigation {
    row-gap: 10px;
    column-gap: 64px;
    height: 10px;
}

.footer-navigation a {
    text-decoration: none;
    color: #00fff4;
    font-size: 20px;
    font-weight: 600;
}

#popular-section .owl-stage {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

#popular-section .owl-stage .item {
    height: 100%;
}

@media (max-width: 767px) {
    /* compact header + navbar */
    header {
        /* force compact header to match navbar height */
        min-height: 70px;
        height: 70px;
        padding-top: 6px;
        padding-bottom: 6px;
        margin-bottom: 18px; /* slightly reduced spacing */
        position: sticky; /* keep existing behavior */
        top: 0;
    }

    .navbar {
        /* ensure exact fixed navbar height and centered content */
        height: 70px; /* requested fixed height */
        min-height: 70px;
        display: flex;
        align-items: center;
        gap: 0;
        padding: 0;
    }

    /* make brand/logo fit compact header */
    .navbar-brand img {
        max-height: 40px;
        width: auto;
    }

    /* nav buttons slightly smaller to fit */
    .nav-buttons button {
        width: 32px;
        height: 32px;
    }

    /* make mobile logo wrapper fit without pushing layout */
    .mobile-logo-wrapper {
        /* keep visible on mobile but sit inside compact header area */
        top: 8px;
        left: 12px;
        right: 12px;
        padding: 6px 12px;
        height: auto;
        border-radius: 12px;
        box-sizing: border-box;
    }

    /* Banner and sections: slightly reduce vertical paddings to balance compact header */
    .banner-item {
        padding: 20px;
    }

    section {
        margin-bottom: 32px;
    }

    /* Checkout popup should align with compact header */
    div#checkout-popup {
        top: 70px; /* match navbar/header height */
    }

    /* mobile popup wrapper already becomes full height; keep its mobile overrides but ensure no extra top margin */
    div#checkout-popup .popup-wrapper {
        margin: 0; /* already set in mobile, ensure no conflicting top space */
    }

    /* profile area vertical offset for compact header */
    .profile-area {
        margin-top: 54px; /* reduce to match new header */
    }

    .popular-tag {
        padding: 4px 8px;
    }

    .popular-tag span {
        font-size: 12px;
        font-weight: 500;
    }

    /* avoid overflow on very small devices */
    @media (max-width: 374px) {
        header,
        .navbar,
        .mobile-logo-wrapper {
            width: 100%;
            left: 0;
            right: 0;
        }
    }
}

@media (max-width: 767px) {

    #banner-section:before {
        background-size: 80%;
        bottom: -38px;
    }

    section h2 {
        font-size: 20px;
        margin-bottom: 0;
    }

    .btn-outline-primary {
        font-size: 14px;
        padding: 6px 12px;
    }

    .discount-item-details span,
    .voucher-item-details span,
    .topup-item-details span {
        font-size: 14px;
        font-weight: 400;
    }

    .discount-item-details h3,
    .voucher-item-details h3,
    .topup-item-details h3 {
        font-size: 18px;
        font-weight: 600;
    }

    .voucher-item .image-wrapper .shadow,
    .topup-item .image-wrapper .shadow {
        bottom: -15px;
    }

    .discount-item,
    .voucher-item,
    .topup-item {
        gap: 16px;
    }

    .discount-item-details .price-area span.discounted-price {
        font-size: 20px;
        font-weight: 600;
    }

    .discount-item {
        padding: 8px;
        border-radius: 12px;
    }

    .discount-item img,
    .voucher-item img,
    .topup-item img {
        border-radius: 12px;
    }

    a.discount-item .tag,
    a.voucher-item .tag,
    a.topup-item .tag {
        font-size: 12px;
        font-weight: 600;
        padding: 4px 8px;
        top: 16px;
        right: 16px;
    }

    #popular-section .popular-container img {
        border-radius: 12px;
    }

    #popular-section .popular-container {
        gap: 12px;
    }

    .cta-wrapper {
        padding: 24px;
    }
}

/**
 * Popup Container
 */

.popup-header {
    padding: 32px 24px 0;
    display: flex;
    flex-direction: column;
}

@media (max-width: 767px) {
    .popup-header {
        padding: 24px 10px 16px;
    }

    .popup-footer {
        padding: 12px 10px !important;
    }
}

div#checkout-popup {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 9;
    overflow: hidden;
    display: flex;
    align-items: center;
}

div#checkout-popup .popup-wrapper {
    position: relative;
    width: 100%;
    max-width: 578px;
    margin: 76px auto;
    background: rgb(137 137 137 / 5%);
    border: 1px solid #ffffff17;
    backdrop-filter: blur(70px);
    border-radius: 16px;
    height: 80vh;
    display: flex;
    flex-direction: column;
    z-index: 5;
}

div#checkout-popup .popup-wrapper {
    background: linear-gradient(0deg, rgb(0 0 0 / 27%), rgba(137, 135, 137, -47.95)),
    radial-gradient(122.59% 38.13% at 201.68% -4%, rgba(0, 255, 244, 1.24) 0%, rgba(0, 0, 0, 0) 113%),
    radial-gradient(48.66% 33.14% at 50% 109.1%, rgba(48, 85, 227, 0.3) 0%, rgba(48, 85, 227, 0) 100%),
    radial-gradient(34.81% 39.81% at 50.4% 19.28%, rgba(84, 83, 83, 0.5) -5%, rgba(82, 83, 83, 0) 103%);
    backdrop-filter: blur(150px);
}


.popup-body .loader-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 40px));
}

div#progress-bar {
    background: #ffffff33;
    display: block;
    height: 6px;
    border-radius: 12px;
    width: 100%;
    margin-bottom: 16px;
}

div#progress-bar span {
    background: linear-gradient(95.74deg, #0030ff -13.48%, #00fff4 130.8%);
    width: 12%;
    display: block;
    height: 6px;
    border-radius: 12px;
    transition: 0.5s ease-in-out all;
}

.heading-section {
    display: flex;
    gap: 12px;
    justify-content: start;
    align-items: center;
}

.heading-section button {
    background: #ffffff1a;
    outline: none;
    border: none;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
}

.heading-section h2 {
    font-size: 20px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 0px;
}

#page-title {
    font-size: 20px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 0px;
}

#page-description {
    color: #fff;
    font-size: 16px;
    margin: 0;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 0px;
    margin-left: 50px;
}

.payment-methods {
    display: grid;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    grid-template-columns: repeat(4, 1fr);
}

.payment-methods .method {
    background: #ffffff1a;
    border: 1px solid #ffffff4d;
    width: 100%;
    padding: 8px;
    border-radius: 16px;
    display: flex;
    gap: 4px;
    cursor: pointer;
    align-items: center;
    position: relative;
    user-select: none;
}

.payment-methods .method img {
    width: 32px;
    padding: 4px;
    background: #ffffff1a;
    border-radius: 10px;
}

.payment-methods .method span {
    font-weight: 500;
    font-size: 12px;
    color: #fff;
}

.popup-body h3 {
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    margin-bottom: 20px;
}

.payment-methods .method.active {
    z-index: 1;
    background: linear-gradient(
            95.74deg,
            rgba(0, 48, 255, 0.12) -13.48%,
            rgba(0, 255, 244, 0.12) 130.8%
    );
    border-color: transparent;
}

.game-options > div {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.game-options .option {
    position: relative;
    border-radius: 16px;
    padding: 16px 14px 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    cursor: pointer;
    width: calc(25% - 12px);
    position: relative;
    min-height: 163px;
}

.game-options .option .header {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 70%;
    padding-bottom: 6px;
    border-bottom: 1px dashed #ffffff6b;
    margin-bottom: 6px;
    justify-content: start;
}

.game-options .option .header img {
    margin: 0 auto;
    margin-bottom: 8px;
    max-width: 57px;
    max-height: 32px;
    object-fit: contain;
}

.game-options .option .header .main {
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    line-height: 16px;
}

.game-options .option .header .sub {
    font-size: 10px;
    color: #fdf670;
    text-align: center;
    font-weight: 600;
}

.game-options .option .header .divider {
    width: 100%;
    height: 1px;
    border: 0.5px dashed #ffffff6b;
}

@media (max-width: 650px) and (min-width: 500px) {
    .game-options .option .header {
        width: 60%;
    }
}

.game-options .option .pricing {
    flex: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.game-options .option .pricing .price {
    color: #00fff4;
    display: block;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    line-height: 16px;
}

.game-options .option .pricing .alter-price {
    font-size: 8px;
    color: #cccccc;
    display: block;
    text-align: center;
    text-decoration: line-through;
    line-height: 12px;
}

.game-options .option.active {
    cursor: default;
}

.game-options .option.active .bg svg path {
    fill: #00fff40a;
}

.game-options .option .counter {
    display: flex;
    gap: 12px;
    background: #000000;
    padding: 4px;
    border-radius: 24px;
    border: 0.5px solid #ffffff26;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: -5px;
}

.game-options .option .counter button {
    width: 24px;
    height: 24px;
    padding: 0;
    outline: 0;
    background: #ffffff1a;
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
}

@media (max-width: 376px) and (min-width: 361px) {
    .game-options .option .counter {
        bottom: 4px;
        left: 13px;
        right: 13px;
        padding: 3px;
        border-radius: 18px;
    }
}

@media (max-width: 361px) and (min-width: 345px) {
    .game-options .option .counter {
        bottom: 9px;
        left: 13px;
        right: 13px;
        padding: 2px;
        border-radius: 13px;
    }
}

@media (max-width: 345px) {
    .game-options .option .counter {
        bottom: 12px;
        left: 12px;
        right: 12px;
        padding: 2px;
        border-radius: 12px;
    }
}

@media (max-width: 391px) and (min-width: 376px) {
    .game-options .option .counter {
        bottom: 2px;
        left: 14px;
        right: 14px;
        padding: 3px;
        border-radius: 17px;
    }
}

@media (max-width: 413px) and (min-width: 391px) {
    .game-options .option .counter {
        bottom: -2px;
        left: 15px;
        right: 15px;
        padding: 4px;
        border-radius: 19px;
    }
}

@media (max-width: 431px) and (min-width: 413px) {
    .game-options .option .counter {
        bottom: -4px;
        left: 15px;
        right: 15px;
        padding: 4px;
        border-radius: 20px;
    }
}

/* @media (max-width: 767px) and (min-width: 431px) {
    .game-options .option .counter {
        bottom: -4px;
        left: 35px;
        right: 35px;
        padding: 3px;
        border-radius: 14px;
    }
} */

.bonus-tag {
    position: absolute;
    width: 56px;
    height: 17px;
    top: -9px;
    border-radius: 12px;
    padding-right: 6px;
    padding-bottom: 1px;
    padding-left: 6px;
    gap: 4px;
    backdrop-filter: blur(2.5px);
    background: linear-gradient(90deg, #FF6C10 0%, #FF3B4A 45.38%, #FF0091 100%),
    linear-gradient(0.23deg, rgba(255, 108, 16, 0.08) -0.05%, rgba(153, 153, 153, 0.1) 99.67%);
    border: 1px #FFFFFF0D;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.hot-sale-tag {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    bottom: 42px;
    border-radius: 12px;
    padding: 1px 6px;
    gap: 4px;
    backdrop-filter: blur(2.5px);
    background: linear-gradient(0deg, #202020, #202020),
    linear-gradient(0.23deg, rgba(255, 0, 145, 0.08) -0.05%, rgba(153, 153, 153, 0.1) 99.67%);
    border: 1px solid #FFFFFF0D;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767px) {
    .bonus-tag {
        top: -8px;
    }

    .hot-sale-tag {
        bottom: 59px;
    }
}

@media (max-width: 376px) and (min-width: 366px) {
    .bonus-tag {
        top: 0px;
    }
}

@media (max-width: 400px) and (min-width: 378px) {
    .bonus-tag {
        top: -3px;
    }
}

@media (max-width: 365px) and (min-width: 352px) {
    .bonus-tag {
        top: 2px;
    }

    .hot-sale-tag {
        bottom: 59px;
    }
}

@media (max-width: 350px) and (min-width: 321px) {
    .bonus-tag {
        top: 8px;
    }
}

.hot-sale-tag span {
    font-size: 10px !important;
    white-space: nowrap;
    color: #FF0091 !important;
}

.popup-footer {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #ffffff17;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    gap: 16px;
    background: radial-gradient(122.59% 38.13% at 201.68% -4%, rgba(0, 255, 244, 1.24) 0%, rgba(0, 0, 0, 0) 113%), !important;
}

body:not(.gm-logged-in) .popup-wrapper:has(.page.success.active) .popup-footer {
    margin-top: 50px;
}

.popup-footer .sign-in p {
    margin: 0;
}


.popup-footer .actions {
    display: flex;
    gap: 16px;
}

.popup-footer .actions button {
    height: 48px;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .popup-footer .actions button {
        font-size: 13px;
    }
}

.popup-footer {
    padding: 16px 24px;
    background: url('../images/payment_Mode_Card.png');
    background-size: 100% 100%;
}

.popup-footer .actions button {
    width: 100%;
    position: relative;
}

.popup-body {
    flex: 1; /* take up remaining space */
    overflow-y: auto; /*enable vertical scrolling */
    padding: 15px 10px;
    /* Firefox */
    margin: 14px;
}

.popup-header,
.popup-footer {
    flex-shrink: 0; /* dont shrink, height adapts to content */
    border-radius: 0;
}

.popup-body::-webkit-scrollbar {
    width: 4px;
}

.popup-body::-webkit-scrollbar-track {
    background: #ffffff26;
    border-radius: 10px;
}

.lockout-timer {
    color: #00FFF4;
}

/* .popup-body::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 10px;
} */
/* When success page (page7) is active inside the wrapper, prevent popup-body from scrolling */
/* .popup-body:has(.page7.active) {
  overflow: hidden !important;
} */

/* When success page is active, make voucher-items the only scrollable region */
/* .popup-body:has(.page7.active) .voucher-items {
  max-height: 340px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  padding-right: 8px;
} */

/* Keep a default, small scrollbar for voucher-items when it is scrollable */
/* .popup-wrapper .voucher-items::-webkit-scrollbar {
  width: 6px;
}
.popup-wrapper .voucher-items::-webkit-scrollbar-track {
  background: #ffffff26;
  border-radius: 10px;
}
.popup-wrapper .voucher-items::-webkit-scrollbar-thumb {
  background: #cccccc;
  border-radius: 10px;
} */

.popup-body .page {
    display: none;
}

.popup-body .page.active {
    display: block;
}

.page5 {
    position: relative;
}

.page5 .otp-back-btn {
    position: absolute;
    top: 13px;
    left: 40px;
    background: #ffffff1a;
    outline: none;
    border: none;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
}

@media (max-width: 361px) {
    .page5 .otp-back-btn {
        left: 7px;
    }
}

@media (max-width: 376px) and (min-width: 361px) {
    .page5 .otp-back-btn {
        left: 15px;
    }
}

@media (max-width: 401px) and (min-width: 377px) {
    .page5 .otp-back-btn {
        left: 22px;
    }
}

@media (max-width: 416px) and (min-width: 401px) {
    .page5 .otp-back-btn {
        left: 34px;
    }
}


.product-checkout {
    cursor: pointer;
    position: relative;
}

.most-popular-item .item-title, .popular-item .item-title {
    font-size: 20px;
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 32px;
    color: #fff;
    font-weight: 700;
    text-align: center;
}

.game-options .option .counter button:disabled {
    color: #aaaaaa;
}

/* No options state */
.game-options > div.no-options {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    width: 100%;
}

.game-options .no-options-message {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    text-align: center;
    margin: 0;
    padding: 20px;
}

.btn-resend-otp.disabled,
.btn-resend-otp[disabled]
    /* .btn-resend-otp[aria-disabled="true"] */
{
    color: #6c757d !important; /* muted gray */
    opacity: 0.65 !important;
    pointer-events: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.btn-resend-otp-reset.disabled,
.btn-resend-otp-reset[disabled]
.btn-resend-otp[aria-disabled="true"] {
    color: #6c757d !important; /* muted gray */
    opacity: 0.65 !important;
    pointer-events: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.btn-payment-resend-otp.disabled,
.btn-payment-resend-otp-reset[disabled]
.btn-payment-resend-otp[aria-disabled="true"] {
    color: #6c757d !important; /* muted gray */
    opacity: 0.65 !important;
    pointer-events: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.receiving-methods .method.active {
    border-color: transparent;
}

.payment-method-fields .input-group:has(input:focus),
.receiving-method-fields .input-group:has(input:focus) {
    border-color: transparent;
}

.payment-methods .method.active:before,
.receiving-methods .method.active:before,
.payment-method-fields .input-group:has(input:focus):before,
.receiving-method-fields .input-group:has(input:focus):before,
.personal-fields .field .input-addon:has(input:focus):before,
.personal-fields .field .input-addon:has(input:not(:disabled)):before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 15px;
    padding: 0.5px;
    mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
    mask-composite: exclude;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(95.74deg, rgb(0 48 255) -13.48%, rgb(0 255 244) 130.8%);
    z-index: -1;
}

.personal-fields .field .input-addon:has(input:focus):before,
.personal-fields .field .input-addon:has(input:not(:disabled)):before {
    border-radius: 11px;
}

.personal-fields .field .input-addon:has(input:focus),
.personal-fields .field .input-addon:has(input:not(:disabled)) {
    border-color: transparent;
}

svg.top-shadow {
    position: absolute;
    top: -130px;
    z-index: -1;
    left: 0;
    right: 0;
    width: 100%;
}

.h-40px {
    height: 40px;
}

.h-50px {
    height: 50px;
}

svg.mob-bg {
    position: fixed;
    z-index: -1;
    opacity: 0.7;
    display: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    min-height: 100%;
}

/* .social-icons {
    height: 100%;
} */

.selected-method {
    background: linear-gradient(0deg, rgba(38, 38, 38, 0.15), rgba(38, 38, 38, 0.15)),
    radial-gradient(
            54.33% 201.22% at 126.82% -132.05%,
            rgba(0, 255, 244, 0.5) 0%,
            rgba(0, 255, 244, 0) 100%
    ) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
            37.25% 100% at 46.06% 100%,
            rgba(0, 255, 244, 0.144) 0%,
            rgba(94, 92, 92, 0) 100%
    );
    padding: 24px;
    border: 1px solid #00fff429;
    border-radius: 16px;
    justify-content: space-between;
    color: #fff;
    gap: 8px;
}

.selected-method button {
    border: 1px solid #ffffff1a;
    background: #ffffff26;
    color: #fff;
    border-radius: 56px;
    text-decoration: none;
    font-weight: 600;
}

.selected-method img {
    width: 46px;
    height: 46px;
    padding: 4px;
    background: #ffffff26;
    border-radius: 8px;
}

.selected-method .method-name {
    font-weight: 600;
    font-size: 18px;
}

/* .selected-method span:not(.method-name) {
    background: linear-gradient(
            0.23deg,
            rgb(255 0 145 / 18%) -0.05%,
            rgba(153, 153, 153, 0.1) 99.67%
    );
    padding: 5px 10px;
    color: #ff0091;
    font-weight: 500;
    font-size: 14px;
    border-radius: 100px;
} */
.selected-method .method-tag
    /* ,.payment-mode .method-name .method-tag   */
{
    background: linear-gradient(
            0.23deg,
            rgb(255 0 145 / 18%) -0.05%,
            rgba(153, 153, 153, 0.1) 99.67%
    );
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 100px;
}

.payment-mode .method-name .hot-label {
    background: linear-gradient(
            0.23deg,
            rgb(255 0 145 / 18%) -0.05%,
            rgba(153, 153, 153, 0.1) 99.67%
    );
    padding: 4px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 100px;
    margin-left: 8px;
}

.payment-mode .method-name .hot-label span {
    color: #ff0091;
    font-weight: 500;
    font-size: 12px;
    white-space: nowrap;
}

.selected-method .method-tag span
    /* , .payment-mode .method-name .method-tag span */
{
    color: #ff0091;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
}

.payment-method-fields .field, .receiving-method-fields .field, .game-fields .field, .receive-voucher-checkbox .field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.payment-method-fields .field label,
.receiving-method-fields .field label,
.game-fields .field label {
    font-weight: 400;
    font-size: 14px;
    color: #fff;
    margin-bottom: 6px;
}

.game-fields .input-group {
    padding: 0 20px 0 10px;
}

.payment-method-fields .field:has(input[type='checkbox']), .receive-voucher-checkbox .field:has(input[type="checkbox"]) {
    flex-direction: row;
}

.payment-method-fields .field input[type='checkbox'], .receive-voucher-checkbox .field input[type='checkbox'] {
    appearance: none;
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 3.61111C0 1.61675 1.61675 0 3.61111 0H16.3889C18.3833 0 20 1.61675 20 3.61111V16.3889C20 18.3833 18.3833 20 16.3889 20H3.61111C1.61675 20 0 18.3833 0 16.3889V3.61111ZM3.61111 2.22222C2.84405 2.22222 2.22222 2.84405 2.22222 3.61111V16.3889C2.22222 17.156 2.84405 17.7778 3.61111 17.7778H16.3889C17.156 17.7778 17.7778 17.156 17.7778 16.3889V3.61111C17.7778 2.84405 17.156 2.22222 16.3889 2.22222H3.61111Z" fill="white" fill-opacity="0.4"/></svg>');
    background-size: 100% 100%;
    cursor:pointer;
}

.payment-method-fields .field input[type='checkbox']:checked, .payment-method-fields .field input[type='checkbox']:checked, .receive-voucher-checkbox .field input[type='checkbox']:checked {
    background: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.61111 0C1.61675 0 0 1.61675 0 3.61111V16.3889C0 18.3833 1.61675 20 3.61111 20H16.3889C18.3833 20 20 18.3833 20 16.3889V3.61111C20 1.61675 18.3833 0 16.3889 0H3.61111ZM15.8667 6.97849L8.36253 14.474C8.03703 14.7991 7.50964 14.7989 7.18434 14.4736L4.13349 11.4226C3.80806 11.0971 3.80808 10.5695 4.13353 10.2441C4.45898 9.91863 4.98661 9.91865 5.31204 10.2441L7.77397 12.7062L14.6889 5.79929C15.0145 5.47404 15.5421 5.47435 15.8674 5.79997C16.1926 6.1256 16.1923 6.65324 15.8667 6.97849Z" fill="%2300FFF4"/></svg>');
}


.receive-voucher-checkbox .field label {
    color: #eee;
    font-size: 14px;
    cursor: pointer;
}

label[for='receive_same_number'] {
    display: block;
    cursor: pointer;
}

.field[data-field-for] {
    display: none;
}

.order-review .totals:before {
    content: none;
}

.receiving-methods {
    display: flex;
    gap: 16px;
    border-radius: 16px;
    margin-bottom: 24px;
}

.receiving-methods .method {
    width: 100%;
    padding: 12px;
    color: #fff;
    background: #ffffff1a;
    border: 1px solid #ffffff4d;
    border-radius: 16px;
    font-weight: 700;
    font-size: 16px;
    gap: 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.receiving-methods .method svg {
    width: 36px;
    height: 36px;
    padding: 8px;
    background: #ffffff1a;
    border-radius: 8px;
}

.game-options .option .bg {
    position: absolute;
    top: 0;
    bottom: -1px;
    left: 0;
    right: 0;
    z-index: -1;
}

.game-options .option .bg svg {
    width: 100%;
    height: 100%;
    z-index: -1;
}

.game-options .option.active .bg svg path:last-child {
    stroke: #00fff4;
    stroke-opacity: 1;
}

.totals {
    background: #00000033;
    border-radius: 16px;
    backdrop-filter: blur(60px);
    box-shadow: 0px 30px 30px 0px #00000026;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    position: relative;
}

.totals:before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 15px;
    padding: 0.5px;
    mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
    mask-composite: exclude;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
            180deg,
            rgb(255 255 255 / 0.05) -13.48%,
            rgb(255 255 255 / 30%) 130.8%
    );
    z-index: -1;
}

.totals .total-header {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    color: #fff;
    padding-right: 20px;
    cursor: pointer;
    user-select: none;
}

.totals .total-body .total-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px dashed #ccc;
}

.totals .total-body .total-item .price {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.totals .total-body .total-item .price span {
    font-weight: 400;
    font-size: 12px;
    text-decoration: line-through;
}

.totals .total-body .total-item:last-child {
    border: none;
    padding-bottom: 0;
}

.totals .total-body .total-item .counter {
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    height: 42px;
    border-radius: 12px;
}

.totals .total-body .total-item .counter button {
    background: transparent;
    border: none;
    padding: 0;
    width: 42px;
    height: 42px;
}

/* rotate arrow when open */
.totals .total-header svg {
    transition: transform 0.3s ease;
}

.totals.open .total-header svg {
    transform: rotate(180deg);
}

/* rotate arrow when order items open */
.order-items .order-bar svg {
    transition: transform 0.3s ease;
    transform: rotate(180deg);
}

.order-items.open .order-bar svg {
    transform: rotate(0deg);
}

/* Voucher details toggle */
.view-voucher-details svg {
    transition: transform 0.3s ease;
    transform: rotate(0deg);
}

.view-voucher-details svg.rotate-180 {
    transform: rotate(180deg);
}

.voucher-items {
    display: none;
}

.order-review .totals .total-body .total-item .counter button {
    display: none !important;
}

.order-review .totals .total-header {
    padding: 0;
}

.order-review .totals .total-body .total-item .counter span {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.totals .total-header svg {
    position: absolute;
    right: 20px;
    top: 24px;
}

.order-review {
    padding: 24px 16px;
    background: #8989890d;
    border: 1px solid #ffffff17;
    backdrop-filter: blur(150px);
    border-radius: 16px;
}

.order-review h3 {
    color: #00fff4;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}

.order-review .totals {
    background: none;
    border: none;
    backdrop-filter: none;
    padding: 0;
    box-shadow: none;
}

.totals {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    linear-gradient(90deg, rgba(0, 0, 0, 0) 48.77%, rgba(0, 255, 244, 0.2) 100.66%);
}

.order-review .totals .total-header svg {
    top: 9px;
    right: 0;
}

.payment-mode {
    position: relative;
    padding: 18px 0;
    margin-bottom: 18px;
    color: #fff;
}

.payment-mode img {
    width: 40px;
    height: 40px;
    padding: 6px;
    background: #ffffff1a;
    border-radius: 100%;
}

.btn-change-method {
    background: #ffffff26;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    font-size: 16px;
    border-radius: 56px;
}

.payment-mode .number {
    color: #ffffffb2;
    font-size: 14px;
}

.payment-mode .method-name {
    display: flex;
    align-items: center;
}

/* .payment-mode .method-name .hot-label {
    display: flex;
    align-items: center;
    justify-content:center ;
    padding: 4px 12px;
    font-weight: 500;
    font-size: 12px;
    background: linear-gradient(
            0.23deg,
            rgb(255 0 145 / 26%) -0.05%,
            rgba(153, 153, 153, 0.1) 99.67%
    );
    border-radius: 56px;
    backdrop-filter: blur(2.5px);
    color: #ff0091;
    margin-left: 8px;
} */

.receive-voucher,
.game-details {
    color: #fff;
}

.popup-splash {
    background: #282828;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    display: flex;
    justify-content: center;
    align-items: center;
}

div#sign-up-loader {
    position: relative;
}

#sign-up-loader .loader-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.loader-wrapper .loader-text {
    margin-top: 10px;
    font-size: 14px;
    text-align: center;
    color: #fff;
}

div#reset-loader {
    position: relative;
}

#reset-loader .loader-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.loader-wrapper .loader-text {
    margin-top: 10px;
    font-size: 14px;
    text-align: center;
}

/* HTML: <div class="loader"></div> */
.loader {
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(farthest-side, #00fff4 94%, rgba(0, 48, 255, 0)) top/6px 6px no-repeat,
    conic-gradient(rgba(0, 48, 255, 0) 30%, #00fff4);
    -webkit-mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 6px), #000 0);
    mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 6px), #000 0);
    animation: l13 1s infinite linear;
}

.popup-footer .actions button.btn-cancel {
    border: 1px solid #666666;
    background: none;
}

.popup-footer .actions button.btn-next:disabled {
    background: #424242;
    border-color: #424242;
}

.popup-bg {
    position: absolute;
    top: calc(calc(100vh - 80vh) / 2);
    left: calc(calc(100% - 578px) / 2);
    right: calc(calc(100% - 578px) / 2);
    bottom: calc(calc(100vh - 80vh) / 2);
    z-index: 3;
    background-size: 100% 100%;
}

.popup-bg img {
    width: 100%;
    max-width: 578px;
}

.payment-methods .method.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.payment-methods .method.disabled img {
    filter: grayscale(1);
}

.payment-method-fields .input-group,
.receiving-method-fields .input-group,
.game-fields .input-group {
    background: #ffffff0a;
    border: 1px solid #ffffff26;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    padding-left: 18px;
}

.payment-method-fields .input-group input,
.receiving-method-fields .input-group input,
.game-fields .input-group input {
    background: none;
    border: none;
    outline: none;
    color: #fff;
    width: 100%;
    padding: 18px 20px 18px 10px;
}

.payment-method-fields + h3 {
    font-weight: 600;
    margin: 24px 0;
}

.otp-section {
    padding: 75px 10px;
    width: 100%;
    max-width: 330px;
    color: #fff;
    border-radius: 32px;
    text-align: center;
    background: url(../images/otp_bg.png);
    background-position: center center;
    background-size: 100% 100%;
}

.otp-section h3 {
    font-weight: 600;
    font-size: 18px;
}

.otp-inputs {
    display: flex;
    justify-content: center;
    margin: 40px 0;
    align-items: center;
    gap: 12px;
}

.otp-inputs .otp-hyphen {
    min-width: 24px;
    font-weight: 600;
    background: #fff;
    height: 3px;
    display: block;
    border-radius: 3px;
    font-size: 0;
}

.otp-inputs .otp-input {
    width: 52px;
    height: 52px;
    box-shadow: 0px 8px 30px 0px #00000069,
    inset 0px 0px 12px 0px #ffffff08; /* inner shadow */
    background: #ffffff08;
    border: none;
    border-radius: 8px;
    color: #fff;
    text-align: center;
    outline: none;
    padding: 0;
    position: relative;
}

.otp-inputs .otp-input:focus {
    background: #ffffff08;
    background-image: url(../images/otp_input_bg.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
}

.otp-inputs .otp-input::placeholder {
    color: #ffffff40;
    opacity: 1;
}

.otp-section p {
    font-size: 14px;
    margin: 0;
}

.otp-section span {
    font-size: 12px;
}

.otp-section span button {
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    color: #00fff4;
    padding: 0 0 0 6px;
}

.card-custom h5 {
    font-weight: 600;
    color: #fff;
    font-size: 18px;
}

.card-custom p {
    font-size: 12px;
    color: #fff !important;
    margin: 0;
}

.page.success .order-details {
    margin: 24px 0;
    color: #fff;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.page.success .order-details .detail-item {
    display: flex;
    justify-content: space-between;
}

.page.success .order-details .detail-item .label {
    font-weight: 600;
}

.page.success {
    padding: 16px;
}

.voucher-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* .voucher-item {
    background: #ffffff0d;
    padding: 16px 20px;
    border-radius: 16px;
    width: 100%;
    gap: 12px;
} */

.voucher-item .voucher-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.voucher-item .voucher-details span.voucher-price {
    font-weight: 600;
}

.voucher-item span.voucher-code {
    background: #fdf6701f;
    border-radius: 12px;
    color: #fdf670;
    padding: 8px;
    font-size: 20px;
    font-weight: 400;
    word-break: break-all;
}

.voucher-item .voucher-actions {
    gap: 16px;
    display: flex;
}

.voucher-item .voucher-actions button {
    width: 100%;
}

.voucher-item .voucher-actions button.share-code {
    color: #00fff4;
    border: none;
}

.receive-voucher .svg-wrapper {
    width: 40px;
    padding: 6px;
    background: #ffffff1a;
    border-radius: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.receive-voucher-details .text {
    color: #ffffffb2;
    font-size: 14px;
}

.receive-voucher .svg-wrapper,
.game-details .svg-wrapper {
    width: 40px;
    padding: 6px;
    background: #ffffff1a;
    border-radius: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.receive-voucher-details .text {
    color: #ffffffb2;
    font-size: 14px;
}

.order-review + span {
    color: #eee;
    font-size: 12px;
    margin-top: 12px;
    display: block;
}

.popup-body .page.otp.active,
.popup-body .page.loading.active {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.popup-footer .sign-in {
    color: #fff;
    text-align: center;
    font-size: 14px;
    position: absolute;
    bottom: 80px;
    z-index: 9;
    left: 0;
    right: 0;
    padding: 20px 0;
    background: #8989890D;
}

.popup-footer .sign-in a {
    color: #fff;
}

.payment-success {
    background: #36393b;
    box-shadow: 0px 6px 16px 0px #00000029;
    width: 56px;
    border-radius: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
}

body.popup-open:before {
    /* content: ''; */
    backdrop-filter: blur(12px);
    /* background: #000000B8; */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 2;
}

.payment-method-fields .input-group:has(input:focus) svg path,
.receiving-method-fields .input-group:has(input:focus) svg path {
    fill-opacity: 1;
}

.payment-method-fields .input-group .validated,
.receiving-method-fields .input-group .validated {
    position: absolute;
    right: 18px;
}

@keyframes l13 {
    100% {
        transform: rotate(1turn);
    }
}

@media (max-width: 767px) {

    .voucher-item span.voucher-code,
    .order-detail-area .voucher-item {
        font-size: 14px;
    }

    .btn {
        font-size: 14px;
        height: 33px;
        padding: 6px 12px;
        border-radius: 12px;
    }

    .nav-buttons {
        gap: 12px !important;
    }

    .nav-buttons button {
        width: 33px;
        height: 33px;
    }

    .nav-buttons-container {
        gap: 12px !important;
    }

    svg.mob-bg {
        display: block;
    }

    header,
    section {
        margin-bottom: 24px;
    }

    .navbar {
        height: 70px;
    }

    .banner-item {
        aspect-ratio: 3/2;
        height: auto;
        padding: 24px;
    }

    .banner-item h1,
    .banner-item h2 {
        font-size: 24px;
    }

    .banner-item p {
        font-size: 12px;
    }

    .container-fluid {
        padding: 0;
    }

    .discount-item-details .price-area span.discounted-price span {
        font-size: 20px;
        font-weight: 600;
    }

    section:has(.owl-nav) {
        margin-bottom: 110px;
    }

    section:has(.owl-nav.disabled),
    section {
        margin-bottom: 72px;
    }

    .social-icons {
        height: auto;
        margin: 60px 0 20px;
        justify-content: center !important;
    }

    .footer-navigation {
        text-align: center;
        height: auto;
    }

    div#checkout-popup {
        top: 69px;
    }

    div#checkout-popup {
        background: rgba(0, 0, 0, 0.7);
        border: 1px solid #ffffff17;
        backdrop-filter: blur(70px);
    }

    div#checkout-popup .popup-wrapper {
        height: 100%;
        border-radius: 0;
        margin: 0;
        max-width: 100%;
        background: transparent;
        border: none;
        backdrop-filter: unset;
    }

    .payment-methods {
        gap: 12px;
        grid-template-columns: repeat(2, 1fr);
    }

    .payment-methods .method {
        flex-direction: column;
    }

    .game-options .option {
        width: calc(33% - 10px);
        padding: 16px 14px 40px;
    }


    .game-options {
        gap: 12px;
    }

    .owl-dots {
        position: absolute;
        background: #ffffff33;
        border: 0.5px solid #ffffff4d;
        backdrop-filter: blur(20px);
        padding: 1px;
        border-radius: 50px;
        gap: 4px;
    }

    .owl-theme .owl-dots .owl-dot {
        width: 6px;
        height: 6px;
        min-width: 8px;
        min-height: 8px;
    }

    .owl-theme .owl-dots .owl-dot.active {
        width: 30px !important;
    }

    .owl-nav {
        right: -3%;
        /* top: 70px; */
    }

    header {
        padding: 0;
        position: sticky;
        top: 0;
        z-index: 99;
        backdrop-filter: blur(80px);
        background-color: #00000096;
        background-image: url(../images/mobile-bg-top.png);
        background-repeat: no-repeat;
        background-position-y: -65px;
        background-size: 100% auto;
    }

    /* .game-options .option .counter {
        left: 16px;
        right: 16px;
    }*/
    .game-options .option .counter .quantity {
        font-size: 12px;
    }

    .payment-success {
        position: relative;
        top: 20px;
        margin-bottom: 20px;
    }

    body.popup-open:before {
        content: none;
    }

    .order-review{
        backdrop-filter: none;
    }

}

/**
 * Login/Sign Up CSS
 */
.account-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-area {
    background: #ffffff0d;
    border: 1px solid #ffffff26;
    border-radius: 20px;
    padding: 25px;
    width: 100%;
    max-width: 480px;
    color: #fff;
}

.account-area.otp-mode {
    max-width: 372px;
}

.logo-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

.account-area h1 {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
}

.account-area h1 + span {
    text-align: center;
    display: block;
}

.fields-wrapper {
    margin: 21px 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.fields-wrapper .field label {
    margin-bottom: 4px;
}

.fields-wrapper .field .field-group {
    background: #ffffff0a;
    border: 1px solid #ffffff26;
    padding: 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.fields-wrapper .field .field-group input {
    background: transparent !important;
    width: 100% !important;
    border: none;
    color: #fff;
    outline: none !important;
}

.fields-wrapper .field .field-group:has(input:focus) {
    outline: none !important;
    border-color: transparent;
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none !important;
}

.field-group {
    position: relative;
}

/* .field-group  */
.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #ccc;
    cursor: pointer;
    z-index: 9;
}

/* Error state for login form fields */
.fields-wrapper .field .field-group.has-error {
    border-color: #ff4444 !important;
    background: rgba(255, 68, 68, 0.1);
}

.fields-wrapper .field .field-group.has-error:before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 11px;
    padding: 0.5px;
    mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
    -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ff4444;
    z-index: -1;
    pointer-events: none;
}

.fields-wrapper .field .error-message {
    display: block;
    color: #ff4444;
    font-size: 12px;
    margin-top: 6px;
    margin-left: 4px;
}

.fields-wrapper .links {
    display: flex;
    justify-content: end;
    width: 100%;
}

.fields-wrapper .links a {
    color: #b9ebe7;
}

.fields-wrapper .button button {
    height: 53px;
    font-weight: 600;
}

.fields-wrapper .button button.disabled,
.fields-wrapper .button button:disabled {
    background: #424242;
    border-color: #424242;
    color: #ffffff66;
}

.account-area .or {
    position: relative;
    display: flex;
    justify-content: center;
    color: #00fff4;
    align-items: center;
}

.account-area .or:before {
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    top: calc(50% - 1px);
    bottom: 0;
    right: calc(50% + 60px);
    background: #ffffff33;
}

.account-area .or:after {
    content: '';
    height: 1px;
    right: 0;
    position: absolute;
    top: calc(50% - 1px);
    bottom: 0;
    left: calc(50% + 60px);
    background: #ffffff33;
}

.sso-wrapper {
    margin: 24px 0 39px;
    display: flex;
    gap: 12px;
}

.sso-wrapper a {
    background: #ffffff08;
    border-radius: 15px;
    backdrop-filter: blur(200px);
    border: 1px solid #ffffff14;
    box-shadow: a0px 8px 30px 0px #00000069,
    0px 0px 12px 0px #ffffff08 inset;
    height: 72px;
    width: 100%;
    background: url('../images/sso-button-shadow.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fields-wrapper .field .field-group:has(input:focus):before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 11px;
    padding: 0.5px;
    mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
    mask-composite: exclude;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(95.74deg, rgb(0 48 255) -13.48%, rgb(0 255 244) 130.8%);
    z-index: -1;
}

.mobile-logo-wrapper {
    display: none;
}

@media (min-width: 1020px) and (max-width: 1275px) {
    .account-area {
        padding: 25px;
    }

    .logo-wrapper {
        margin-bottom: 8px;
    }

    .account-area h1 {
        font-size: 21px;
        margin-bottom: 0px;
    }

    .account-area h1 + span {
        font-size: 15px;
    }

    .fields-wrapper {
        margin: 7px 0;
        gap: 10px;
    }

    .fields-wrapper .field label {
        font-size: 15px;
    }

    .fields-wrapper .field .field-group {
        background: #ffffff0a;
        border: 1px solid #ffffff26;
        padding: 10px;
        gap: 8px;
    }

    .fields-wrapper .field .field-group input {
        background: transparent !important;
        width: 100% !important;
        border: none;
        color: #fff;
        outline: none !important;
    }

    .fields-wrapper .field .field-group:has(input:focus) {
        outline: none !important;
        border-color: transparent;
    }


    .fields-wrapper .links a {
        font-size: 15px;
    }

    .fields-wrapper .button button {
        height: 50px;
        font-weight: 600;
    }

    .sso-wrapper {
        margin: 12px 0 25px;
        gap: 16px
    }

    .sso-wrapper button {
        height: 64px;

    }
}

form#otp-box h3 {
    font-size: 18px;
    font-weight: 600;
}

form#otp-box p {
    font-size: 14px;
    font-weight: 400;
}

form#otp-box span {
    display: block;
    font-size: 12px;
}

form#otp-box {
    text-align: center;
}

form#otp-box span button {
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    color: #00fff4;
    padding: 0 0 0 6px;
}

.bottom-link {
    display: block;
}

span.value.view-voucher-details {
    cursor: pointer;
}

.dashboard-bar {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.back-to-home {
    display: flex;
    align-items: center;
    justify-content: start;
    color: #fff;
    gap: 24px;
    width: 100%;
}

.back-to-home span {
    font-size: 24px;
    font-weight: 700;
}

.back-to-home span.tiny {
    font-size: 18px;
    font-weight: 400;
}

.back-to-home span.tiny a {
    color: #00fff4;
}

.back-to-home > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: #FFFFFF0F;
    backdrop-filter: blur(20px);
    overflow: hidden;
    z-index: 1;
    color: #fff;
}


.profile-area {
    width: 100%;
    max-width: 407px;
    margin: auto;
    background: #ffffff0d;
    padding: 42px 32px;
    border-radius: 16px;
}

.profile-bar {
    padding: 24px;
    background: linear-gradient(0deg, rgba(38, 38, 38, 0.15), rgba(38, 38, 38, 0.15)),
    radial-gradient(
            54.33% 308.22% at 125.82% -25.05%,
            rgba(0, 255, 244, 0.5) 0%,
            rgba(0, 255, 244, 0) 100%
    )
    /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    border: 1px solid #ffffff17;
    backdrop-filter: blur(150px);
    border-radius: 16px;
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    align-items: center;
}

.profile-bar .profile-info {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.profile-bar .profile-info h2 {
    color: #00fff4;
    font-size: 18px;
    font-weight: 600;
}

.profile-bar .profile-info span {
    background: linear-gradient(0deg, rgba(32, 32, 32, 0.24), rgba(32, 32, 32, 0.24)),
    linear-gradient(0.23deg, rgba(0, 255, 244, 0.12) -0.05%, rgba(153, 153, 153, 0.1) 99.67%);
    border-radius: 999px;
    color: #fff;
    padding: 8px 16px;
    backdrop-filter: blur(2.5px);
    display: inline-block;
    font-size: 10px;
}

.profile-bar .profile-picture img {
    width: 76px;
    height: 76px;
    object-fit: cover;
}

.profile-picture {
    position: relative;
}

.profile-picture .pencil-icon {
    position: absolute;
    bottom: 52px;
    left: 52px;
}

.profile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.profile-menu ul li {
    padding: 18px 0;
    border-bottom: 1px solid #ffffff1a;
    position: relative;
}

.profile-menu ul li:first-child {
    padding-top: 12px;
}

.profile-menu ul li:last-child {
    padding-bottom: 12px;
}

.profile-menu ul li a {
    display: flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
    gap: 22px;
}

.profile-menu ul li a .counter {
    position: absolute;
    right: 0;
    background: #00fff4;
    padding: 2px 12px;
    color: #000;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
}

.dashboard-wrapper {
    padding-bottom: 100px;
}

.dashboard-bar .search-bar {
    /* allows it to grow, but also shrink properly */
    width: 100%;
    max-width: 420px;
}

.dashboard-bar .date-range {
    flex: 1;
}

.dashboard-bar .search-bar .group-addon {
    background: #ffffff0a;
    border: 1px solid #ffffff33;
    border-radius: 12px;
    padding-left: 20px;
    display: flex;
    align-items: center;
}

.dashboard-bar .search-bar .group-addon input {
    background: none;
    border: none;
    outline: none;
    padding: 0;
    color: #fff;
    margin-left: 4px;
    padding: 12px;
    width: 100%;
}

.order-history-items {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.order-history-bar {
    padding: 24px;
    display: flex;
    gap: 24px;
    color: #fff;
    background: linear-gradient(0deg, rgba(38, 38, 38, 0.15), rgba(38, 38, 38, 0.15)),
    radial-gradient(
            54.33% 201.22% at 126.82% -132.05%,
            rgba(0, 255, 244, 0.5) 0%,
            rgba(0, 255, 244, 0) 100%
    )
    /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    border: 1px solid #ffffff3b;
    border-radius: 20px;
}

.order-history-bar img {
    height: 65px;
    width: 65px;
    object-fit: cover;
    border-radius: 12px;
    border: 1.05px solid #FFFFFF80;
}

.order-history-bar .bar-details {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-direction: row;
}

.order-history-bar .bar-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    gap: 12px;
}

.order-history-bar .bar-action a {
    background: linear-gradient(180deg, #6683ff -31.25%, #0030ff 100%);
    color: #fff;
    text-decoration: none;
    padding: 8px;
    border-radius: 12px;
    display: block;
}

.order-history-bar .bar-details .item-name {
    font-size: 20px;
    font-weight: 700;
}

.order-history-bar .bar-details .item-description {
    flex: 1;
    color: #AAAAAA;
    gap: 18px;
    font-weight: 500;
    font-size: 18px;
}

.order-history-bar .bar-details .amount {
    font-size: 28px;
    font-weight: 700;
    display: block;
}

.order-history-bar .bar-details .bar-info {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.order-detail-area {
    padding: 24px 32px;
    background: #ffffff0d;
    border-radius: 20px;
    color: #fff;
}

.order-detail-area ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.order-detail-area ul li {
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 500;
}

.order-detail-area ul li:first-child {
    padding-top: 10px;
}

.order-detail-area ul li span {
    color: #fffffff2;
    font-weight: 400;
}

.order-detail-area .voucher-item {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    word-break: break-all;
}

.order-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.order-items .order-bar {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 500;
    padding: 10px 0px 6px 0px;
}

.items-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.order-bar span {
    cursor: pointer;
}

.order-detail-area ul li span.status {
    background: #00fff4;
    font-size: 12px;
    color: #000;
    padding: 2px 12px;
    border-radius: 999px;
    font-weight: 700;
    display: flex;
    align-items: center;
}

form.personal-info-area {
    width: 100%;
    max-width: 600px;
    margin: auto;
    padding: 32px 24px;
    background: #ffffff0d;
    border-radius: 16px;
}

.personal-fields .field {
    margin-bottom: 16px;
}

.personal-fields .field label {
    font-size: 14px;
    color: #fff;
    font-weight: 400;
    margin-bottom: 4px;
}

.personal-fields .field .input-addon {
    padding: 12px;
    background: #ffffff0a;
    border: 1px solid #ffffff26;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.personal-fields .field .input-addon input {
    border: 0;
    outline: none;
    background: none;
    padding: 0;
    width: 100%;
    color: #fff;
    z-index: 9;
}

.personal-fields .field .input-addon input:disabled {
    cursor: not-allowed;
    /*opacity: 0.6;*/
}

.personal-fields button {
    margin-top: 16px;
    width: 100%;
    height: 56px;
}

.profile-image-holder {
    width: 100px;
    height: 100px;
    position: relative;
    margin: auto;
    background: #ffffff0d;
    border: 1.36px solid #ffffff26;
    border-radius: 999px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.profile-image-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: unset !important;
}

.profile-image-holder svg:not(.lock) {
    position: absolute;
    top: 0;
    right: 0;
}

.personal-image {
    margin-bottom: 20px;
}

.profile-uploader-wrapper,
.logout-popup-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000b8;
    z-index: 9;
    backdrop-filter: blur(6px);
}

.profile-uploader,
.logout-popup-wrapper .logout-inner {
    color: #fff;
    width: 100%;
    max-width: 410px;
    background: linear-gradient(0deg, rgba(137, 137, 137, 0.05), rgba(137, 137, 137, 0.05)),
    radial-gradient(79.59% 108.13% at 102.68% 0%, rgba(0, 255, 244, 0.24) 0%, rgba(0, 0, 0, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
            48.66% 33.14% at 50% 109.1%,
            rgba(48, 85, 227, 0.3) 0%,
            rgba(48, 85, 227, 0) 100%
    ) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
            68.81% 68.81% at 45.4% 24.28%,
            rgba(84, 83, 83, 0.5) 0%,
            rgba(84, 83, 83, 0) 100%
    )
    /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    padding: 42px;
    border-radius: 20px;
    backdrop-filter: blur(60px);
    box-shadow: 0px 30px 30px 0px #00000026,
    -1px -1px 1px 0px #ffffff1a inset;
}

.profile-uploader .image-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-uploader .image-actions .image-action {
    padding: 20px 16px;
    background: linear-gradient(0deg, rgba(38, 38, 38, 0.15), rgba(38, 38, 38, 0.15)),
    radial-gradient(
            54.33% 201.22% at 126.82% -132.05%,
            rgba(0, 255, 244, 0.5) 0%,
            rgba(0, 255, 244, 0) 100%
    )
    /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    border: 1px solid #ffffff66;
    border-radius: 16px;
    color: #fff;
}

.profile-uploader .image-actions .image-action .actions-inner {
    display: none;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 500;
    padding-left: 42px;
    padding-right: 42px;
}

.profile-uploader .image-actions .image-action .image-header {
    font-weight: 600;
    display: flex;
    gap: 12px;
    position: relative;
    align-items: center;
    cursor: pointer;
}

.profile-uploader .image-actions .image-action .image-header > svg:first-child {
    width: 30px;
    height: 30px;
    background: #ffffff1a;
    padding: 4px;
    border-radius: 8px;
}

.profile-uploader .image-actions .image-action .image-header span {
    flex: 1;
}

.profile-uploader .image-holder {
    width: 76px;
    height: 76px;
    border-radius: 999px;
    margin: 0 auto 32px;
    background: #ffffff0d;
    border: 1.36px solid #ffffff26;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
}

.profile-uploader .image-actions .image-action .actions-inner button {
    background: none;
    outline: none;
    border: none;
    color: #fff;
    padding: 12px 0;
    border-bottom: 0.5px solid #ffffff33;
    width: 100%;
    text-align: left;
}

.profile-uploader .image-actions .image-action .actions-inner button:last-child {
    border: none;
}

.profile-uploader .image-holder img {
    width: 100%;
    border-radius: 100%;
    height: 100%;
}

.personal-fields .field .input-addon:has(input:focus) svg path {
    fill-opacity: 1;
    stroke-opacity: 1;
}

.logout-actions {
    margin-top: 32px;
}

.logout-popup-wrapper .logout-inner {
    padding: 42px 72px;
}

.logout-actions button {
    width: 100%;
    height: 56px;
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}

.logout-actions button.cancel-logout {
    border: 1px solid #666666;
    background: none;
}

.personal-fields .field .input-addon:has(input[readonly]) {
    cursor: pointer;
    user-select: none;
}

.personal-fields .field .input-addon:has(input[readonly]) input {
    user-select: none;
}

.gamebird_contact_form .nf-field-label label {
    color: #fff;
    font-weight: 400;
    font-size: 14px;
}

.gamebird_contact_form .nf-field-label {
    margin-bottom: 4px;
}

.gamebird_contact_form .nf-field-element input,
.gamebird_contact_form .nf-field-element textarea {
    background: #ffffff0a;
    border: 1px solid #ffffff26;
    padding: 12px;
    border-radius: 12px;
    color: #fff;
}

.gamebird_contact_form .nf-error input,
.gamebird_contact_form .nf-error textarea {
    border-color: red;
}

.nf-form-fields-required {
    display: none;
}

.nf-field-container {
    margin-bottom: 16px;
}

.gamebird_contact_form .nf-field-element input[type='submit'] {
    background: linear-gradient(180deg, #6683ff -31.25%, #0030ff 100%);
    width: 100%;
    height: 56px;
    margin-top: 32px;
    padding-left: 0px !important;
}

@media (max-width: 767px) {
    .gamebird_contact_form {
        padding: 24px 20px !important;
        background: var(--Opacity-White-5, #FFFFFF0D) !important;
        border-radius: 20px !important;
    }
}

/**
Elementor Support
 */
.support-content details {
    position: relative;
    background: linear-gradient(0deg, rgba(137, 137, 137, 0.05), rgba(137, 137, 137, 0.05)),
    radial-gradient(79.59% 108.13% at 102.68% 0%, rgba(0, 255, 244, 0.24) 0%, rgba(0, 0, 0, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
            48.66% 33.14% at 50% 109.1%,
            rgba(48, 85, 227, 0.3) 0%,
            rgba(48, 85, 227, 0) 100%
    ) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
            68.81% 68.81% at 45.4% 24.28%,
            rgba(84, 83, 83, 0.5) 0%,
            rgba(84, 83, 83, 0) 100%
    )
    /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.otp-section.error .otp-inputs .otp-input {
    border: 1px solid #F65658;
    color: #F65658;
}

.otp-section.error .otp-inputs .otp-input:focus {
    background: #ffffff08;
    background-image: none;
    border: 1px solid #F65658;
    outline: none;
}

.otp-inputs .otp-input:disabled,
.otp-inputs .otp-input.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    border: none !important;
    color: #fff !important;
}

.order-history-bar .payment-method {
    background: #FFFFFF26;
    padding: 4px 8px;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 8px;
    border: 1px solid #FFFFFF33;
    font-size: 12px;
    font-weight: 600;
    border-radius: 99px;
}

.order-history-bar .payment-method img {
    border: none;
    width: 16px;
    height: 16px;
    min-width: 16px;
    padding: 0;
}

.date-range {
    min-width: 160px;
}

/* Base wrapper */
.dashboard-bar .search-bar .group-addon,
.date-range .input-group {
    position: relative;
    border-radius: 12px;
    background: #ffffff0a; /* keep your existing background */
    border: 1px solid #ffffff33; /* default border */
    z-index: 1;
    overflow: visible;
}

/* TRUE gradient border only */
.dashboard-bar .search-bar .group-addon::before,
.date-range .input-group::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px; /* border thickness */
    background: linear-gradient(95.74deg, #0030FF -13.48%, #00FFF4 130.8%);

    /* Mask out the center so only the border shows */
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: -1;
}

/* Focus activate */
.dashboard-bar .search-bar .group-addon:focus-within::before,
.date-range .input-group:focus-within::before {
    opacity: 1;
}

/* On focus / active input */
.dashboard-bar .search-bar .group-addon input:focus::placeholder,
.date-range .input-group input:focus::placeholder {
    color: white; /* new color when focused */
    opacity: 1; /* ensures full opacity */
}

.date-range .input-group {
    display: flex;
    align-items: center;
    background: #ffffff0a;
    border: 1px solid #ffffff26;
    border-radius: 12px;
    padding: 0;
}

.date-range .input-group-text {
    background: transparent;
    border: none;
    padding: 12px;
    display: flex;
    align-items: center;
}

.date-range .form-control {
    padding: 15px 0 14px;
    font-size: 14px;
}

.date-range .form-control::placeholder {
    color: #FFFFFF4D;
}

.date-range .form-control:focus {
    outline: none;
    box-shadow: none;
}


.dashboard-bar .date-range {
    flex: 0 0 auto; /* required so width changes actually apply */
    width: 170px !important;
    transition: width 240ms ease;
}

.dashboard-bar .date-range.expanded {
    width: 259px !important;
}

@media (max-width: 768px) {
    .dashboard-bar .date-range,
    .dashboard-bar .date-range.expanded {
        width: auto !important;
        flex: 0 0 calc(100% - 58px);
    }

}

/* Mobile: use full width instead */
@media (max-width: 768px) {
    .date-range,
    .date-range.expanded {
        width: 100% !important;
    }
}

.type_filters {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.type_filters button {
    border: 1px solid #ffffff26;
    border-radius: 12px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff0a;
    cursor: pointer;
    transition: all 0.3s ease;
}

.type_filters button:hover {
    background: #ffffff14;
    border-color: #00fff4;
}

.type_filters .filters-area {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #1a1a1a;
    border: 1px solid #ffffff26;
    border-radius: 12px;
    position: absolute;
    top: 70px;
    right: 0;
    min-width: 180px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.type_filters .filters-area.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.type_filters .filters-area li {
    padding: 12px 16px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid #ffffff12;
}

.type_filters .filters-area li:last-child {
    border-bottom: none;
}

.type_filters .filters-area li:hover {
    background: #ffffff0a;
    color: #00fff4;
}

.type_filters .filters-area li.active {
    background: #ffffff14;
    color: #00fff4;
    font-weight: 600;
}

.type_filters #selected_order_type {
    display: none;
}

/* Legacy select styling - keeping for compatibility */
.type_filters select {
    background: #ffffff0a;
    border: 1px solid #ffffff26;
    border-radius: 12px;
    padding: 10px 16px;
    color: #fff;
    font-size: 14px;
    min-width: 150px;
    cursor: pointer;
}

.type_filters select:focus {
    outline: none;
    border-color: #00fff4;
}

.flatpickr-calendar {
    background: #1a1a1a !important;
    border: 1px solid #ffffff26 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

.flatpickr-months {
    padding-bottom: 10px;
    border-bottom: 1px solid #ffffff26 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: #fff !important;
    background: #1a1a1a !important;
}

.flatpickr-day {
    color: #fff !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #0030FF !important;
    border-color: #0030FF !important;
    color: #000 !important;
}

.flatpickr-day.inRange {
    background: #222222 !important;
    border-color: transparent !important;
    color: #fff !important;
}

.flatpickr-day:hover {
    background: #ffffff1a !important;
    border-color: #ffffff26 !important;
}

.flatpickr-weekday {
    color: #aaa !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    fill: #fff !important;
}

.dashboard-bar {
    display: flex;
    gap: 16px;
    align-items: center;
}

.flatpickr-day.inRange {
    -webkit-box-shadow: -5px 0 0 #222222, 5px 0 0 #222222 !important;
    box-shadow: -5px 0 0 #222222, 5px 0 0 #222222 !important;
    background: #222222 !important;
}

.flatpickr-current-month .numInputWrapper {
    margin-left: 10px;
}

div#checkout-popup .popup-wrapper:has(.page.error.active) {
    height: auto;
}

.page.error {
    padding: 36px 0px;
}

div#checkout-popup .popup-wrapper:has(.page.error.active) .popup-footer .actions {
    flex-direction: row-reverse;
}

div#checkout-popup .popup-wrapper:has(.page.error.active) .popup-footer .actions .btn-next {
    background: transparent;
}

div#checkout-popup .popup-wrapper:has(.page.error.active) .popup-footer .actions .btn-cancel {
    background: linear-gradient(180deg, #FF6466 -31.25%, #E83F42 100%);
    border: 1px solid #E83F42;
}

/* game id page size */
.popup-wrapper:has(.page2.active) {
    height: auto !important;
}

.footer-gradient-right {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
}

.footer-gradient-left {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;

}

.gallery-images .gallery-image {
    min-width: 80px;
    width: 80px;
    height: 80px;
}

.gallery-images .gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.otp-form-reset h3 {
    font-weight: 600;
    font-size: 18px;
}

.otp-form-reset {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.otp-form-reset p {
    font-size: 14px;
}

.otp-form-reset span {
    font-size: 12px;
    align-items: center;
}

.otp-form-reset span button {
    font-size: 12px;
    padding: 0;
    text-decoration: none;
    color: #00fff4;
    font-weight: 600;
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    color: var(--bs-btn-disabled-color);
}

a.gradient-border {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: #FFFFFF0F; /* semi-transparent fill */
    backdrop-filter: blur(20px); /* glass blur */
    overflow: hidden;
    z-index: 1;
}

a.gradient-border::before,
.back-to-home > a:before {
    content: "";
    position: absolute;
    inset: 0; /* fill entire button */
    padding: 1px; /* border thickness */
    border-radius: 12px;
    background: linear-gradient(
            332.49deg,
            #DFDBE9 3.87%,
            rgba(223, 219, 233, 0.29) 96.44%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

.gradient-border svg {
    position: relative;
    z-index: 2;
}

.account-wrapper {
    position: relative;
}

.account-wrapper a.gradient-border {
    position: absolute;
}

.popular-tag {
    position: absolute;
    top: 0px;
    right: 0px;
    border-top-right-radius: 16px;
    border-bottom-left-radius: 16px;
    padding-top: 8px;
    padding-right: 16px;
    padding-bottom: 8px;
    padding-left: 16px;
    gap: 4px;
    opacity: 1;
    background: linear-gradient(180deg, #FFF86A 0%, #F5961B 129.55%);
    backdrop-filter: blur(2.5px);
}

.popular-tag span {
    opacity: 1;
    font-weight: 600;
    font-size: small;
    line-height: 150%;
    vertical-align: middle;
    color: #000000;
}

.popular-tag svg {
    width: 11;
    height: 13.499897956848145;
    opacity: 1;
    top: 1px;
    left: 2.5px;
}

.cky-revisit-bottom-left {
    display: none !important;
}

.cky-box-bottom-left {
    display: none !important;
}

.popup-footer .actions .total-counter {
    position: absolute;
    left: 32px;
    font-size: 10px;
    border: 1px solid #fff;
    width: 16px;
    height: 16px;
    border-radius: 99px;
    top: 50%;
    transform: translateY(-50%);
}

.logout-action-btn {
    cursor: pointer;
}

.search-input {
    height: 50px;
    padding: 12px 15px;
    border: 1px solid var(--Opacity-White-50, #FFFFFF80);
    background: #FFFFFF0A;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: start;
    font-size: 18px;
    line-height: 150%;
    cursor: pointer;
}

.nav-ham {
    border: 1px solid var(--Opacity-White-50, #FFFFFF80) !important;
    background: #FFFFFF0A !important;
}

.search-input #clear-search {
    display: none;
    cursor: pointer;
    position: absolute;
    right: 15px;
}

.search-input.has-text #clear-search {
    display: block;
}

.search-input input {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    outline: 0;
    border: 0;
    color: #fff;
    width: 0;
}

.search-input.active input {
    margin-left: 8px;
    width: 400px;
}

.search-wrapper {
    position: relative;
}

.search-results-container {
    position: absolute;
    width: 100%;
    color: #fff;
    backdrop-filter: blur(150px);
    background: linear-gradient(0deg, rgba(137, 137, 137, 0.05), rgba(137, 137, 137, 0.05)),
    radial-gradient(79.59% 108.13% at 102.68% 0%, rgba(0, 255, 244, 0.24) 0%, rgba(0, 0, 0, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(48.66% 33.14% at 50% 109.1%, rgba(48, 85, 227, 0.3) 0%, rgba(48, 85, 227, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(68.81% 68.81% at 45.4% 24.28%, rgba(84, 83, 83, 0.5) 0%, rgba(84, 83, 83, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    top: 65px;
    padding: 0;
    border-radius: 20px;
    z-index: 9;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease, max-height 0.4s ease;
}

.search-results-container.active {
    padding: 20px;
    max-height: 400px;
    opacity: 1;
    overflow-y: auto;
}

.search-results-container ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.search-results-container ul li {
    font-size: 16px;
    border-bottom: 1px solid #fff;
    padding-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-results-container ul li a {
    color: #fff;
    text-decoration: none;
    display: block;
}

.search-results-container ul li.loading,
.search-results-container ul li.no-results,
.search-results-container ul li.error {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    cursor: default;
}

.search-results-container ul li.loading:hover,
.search-results-container ul li.no-results:hover,
.search-results-container ul li.error:hover {
    padding-left: 0;
    background: transparent;
}

.no-search {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.no-search img {
    width: 100%;
    max-width: 250px;
    margin: auto;
}

.no-search h1 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.no-search p {
    font-size: 18px;
}

.nf-response-msg {
    color: #fff;
}

/* -------------------------contact-us icons ------------------------------*/

/* Shared input style for icon fields */
.nf-field-container input,
.nf-field-container textarea {
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: 12px center;
    padding-left: 41px !important;
}

/* Full Name field icon (field 1) */
#nf-field-1-container {
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.57757 15.4816C5.1628 16.324 1.45336 18.0441 3.71266 20.1966C4.81631 21.248 6.04549 22 7.59087 22H16.4091C17.9545 22 19.1837 21.248 20.2873 20.1966C22.5466 18.0441 18.8372 16.324 17.4224 15.4816C14.1048 13.5061 9.89519 13.5061 6.57757 15.4816Z' stroke='%23EEEEEE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.5 6.5C16.5 8.98528 14.4853 11 12 11C9.51472 11 7.5 8.98528 7.5 6.5C7.5 4.01472 9.51472 2 12 2C14.4853 2 16.5 4.01472 16.5 6.5Z' stroke='%23EEEEEE' stroke-width='1.5'/%3E%3C/svg%3E%0A");
}

/* Email field icon (field 2) */
#nf-field-2-container {
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6L8.91302 9.91697C11.4616 11.361 12.5384 11.361 15.087 9.91697L22 6' stroke='%23EEEEEE' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M2.01577 13.4756C2.08114 16.5412 2.11383 18.0739 3.24496 19.2094C4.37608 20.3448 5.95033 20.3843 9.09883 20.4634C11.0393 20.5122 12.9607 20.5122 14.9012 20.4634C18.0497 20.3843 19.6239 20.3448 20.7551 19.2094C21.8862 18.0739 21.9189 16.5412 21.9842 13.4756C22.0053 12.4899 22.0053 11.5101 21.9842 10.5244C21.9189 7.45886 21.8862 5.92609 20.7551 4.79066C19.6239 3.65523 18.0497 3.61568 14.9012 3.53657C12.9607 3.48781 11.0393 3.48781 9.09882 3.53656C5.95033 3.61566 4.37608 3.65521 3.24495 4.79065C2.11382 5.92608 2.08114 7.45885 2.01576 10.5244C1.99474 11.5101 1.99475 12.4899 2.01577 13.4756Z' stroke='%23EEEEEE' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

/* Message field icon (textarea 3) */
#nf-field-3-container textarea {
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.1794 4.92689C18.0271 3.71505 16.1027 3.69077 14.9203 4.87317L5.54545 14.2475C5.21763 14.5754 4.99008 14.9899 4.88953 15.4424L4.01191 19.3923C3.97483 19.5592 4.02559 19.7335 4.14649 19.8544C4.26739 19.9753 4.44166 20.026 4.60855 19.9889L8.53494 19.1157C9.00237 19.0118 9.43048 18.7767 9.76907 18.4381L19.1271 9.08003C20.2681 7.939 20.2913 6.09631 19.1794 4.92689ZM15.6274 5.58029C16.4123 4.79538 17.6898 4.8115 18.4547 5.61596C19.1928 6.39225 19.1774 7.61548 18.42 8.37293L17.7487 9.04418L14.9561 6.25155L15.6274 5.58029ZM14.2489 6.95864L17.0416 9.7513L9.06196 17.731C8.85781 17.9352 8.59969 18.0769 8.31786 18.1396L5.15855 18.8421L5.86572 15.6593C5.92502 15.3924 6.05921 15.148 6.25254 14.9547L14.2489 6.95864Z' fill='%23EEEEEE'/%3E%3C/svg%3E%0A");
    /* background-position: right 12px;         */
    background-position: calc(100% - 12px) 15px;
    padding-right: 40px !important;
    padding-left: 12px !important;
    background-repeat: no-repeat;
    background-size: 18px;

}

/* Ensure container doesn’t distort */
.nf-field-container {
    position: relative;
    background-repeat: no-repeat;
    background-position: 12px 45px; /* adjust vertically for label above */
}

.nf-input-limit {
    display: none;
}


.profile-picture:has(span) {
    background: linear-gradient(180deg, #4AD8FF -31.25%, #0030FF 100%);
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 140%;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
}

.profile-picture {
    width: 76px;
    height: 76px;
}

.payment-mode {
    margin-top: 20px;
}

.dashed-separator,
.payment-mode::before,
.payment-mode::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px; /* thickness of the line */
    background-image: repeating-linear-gradient(
            to right,
            #444444 0px,
            #444444 5px, transparent 5px,
            transparent 10px
    );
    opacity: 1;
    border: none !important;
}

.dashed-separator {
    position: relative;
}

.payment-mode::before {
    top: 0; /* top line */
}

.payment-mode::after {
    bottom: 0; /* bottom line */
}

.btn-change-method:hover, .btn-change-method:hover {
    background: linear-gradient(180deg, #6683ff -31.25%, #0030ff 100%);
    color: #fff;
}

.detail-item .success-status {
    font-size: 12px;
    font-weight: 600;
    background: #00FFF4;
    color: #000000;
    padding: 2px 12px;
    border-radius: 999px;
}

.redeem-section {
    color: #CCCCCC;
    font-size: 14px;
    display: none;
}

.redeem-section h4 {
    font-size: 18px;
    font-weight: 600;
}

.redeem-section p {
    margin-bottom: 8px;
}

.redeem-section ul {
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.redeem-section ul li {
    font-size: 14px;
}

.redeem-section ul li svg {
}

.redeem-section .hyperlink {
    color: #fff;
    font-weight: 600;
    font-size: 12px;
}

.redeem-section .hyperlink a {
    color: #00FFF4;
    font-weight: 400;
}

.popup-footer .actions button.btn-redeem {
    border: none;
    color: #00FFF4;
    padding: 0;
    background: none !important;
}

.redeem-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* close redeem section button */
.redeem-section {
    position: relative;
}

.redeem-close-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 23px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    z-index: 10;
    margin-bottom: 0.5rem;
}

.redeem-close-btn:hover {
    opacity: 0.7;
}


.order-review:has(.receive-voucher-checkbox .field input:checked) .payment-mode:after {
    display: none;
}

.order-review:has(.receive-voucher-checkbox .field input:checked) .payment-mode {
    margin-bottom: 10px;
}

.popup-footer:has(.redeem-section.open) .sign-in-message {
    display: none;
}

.popup-footer:has(.redeem-section.open) {
    margin-top: 0 !important;
}

.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {
    cursor: not-allowed;
    color: rgb(116 116 116 / 92%) !important;
    border: none !important;
    background: none !important;
}

span.flatpickr-day.selected {
    color: #fff !important;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
    display: none !important;
}

.flatpickr-calendar {
    box-shadow: 0px 0px 12px 2px #00FFF426 !important;
}

form#otp-box-reset .otp-section,
form#otp-box .otp-section {
    padding: 0;
    max-width: unset;
    background: none;
}

.popup-wrapper[data-type="topup"] .sign-in-message {
    display: none !important;
}

.popup-wrapper[data-type="topup"] .popup-footer {
    margin-top: 0 !important;
}

@media (max-width: 767px) {
    .date-range {
        width: 100%;
        min-width: auto;
    }

    .type_filters {
        flex: 0 0 50px;
    }

    .type_filters select {
        flex: 1;
    }

    .type_filters .filters-area {
        right: 0;
        min-width: 100px;
        width: 100%;
    }

    .type_filters button {
        width: 50px;
        height: 50px;
    }

    .search-open .navbar-brand {
        display: none;
    }

    .search-open .nav-buttons-container {
        width: 100%;
    }

    .search-open a.btn {
        display: none !important;
    }

    .search-open .search-input {
        width: 100%;
        margin: 0 !important;
    }

    .search-open .search-input.active input {
        font-size: 14px;
        line-height: 14px;
    }

    .search-open .search-input.active input {
        width: 100%;
        z-index: 8;
    }

    .search-input #clear-search
    {
        z-index: 9;
    }

    .search-open .search-wrapper {
        width: 100%;
    }

    .search-open .search-results-container {
        top: 60px;
        background: linear-gradient(0deg, rgb(0 0 0 / 85%), rgba(0, 0, 0, 0.8)), radial-gradient(79.59% 108.13% at 102.68% 0%, rgb(0 255 244) 0%, rgb(255 255 255 / 75%) 100%), radial-gradient(48.66% 33.14% at 50% 109.1%, rgb(255 255 255 / 25%) 0%, #00000000 100%), radial-gradient(68.81% 68.81% at 45.4% 24.28%, rgba(84, 83, 83, 0.4) 0%, rgb(112 18 18 / 0%) 100%);
        backdrop-filter: blur(150px);
        padding: 15px !important;
    }


    .search-open .search-results-container ul li a {
        font-size: 12px;
    }

    .search-open .nav-buttons {
        width: 100%;
    }
}

@media (max-width: 365px) {
    .mobile-logo-wrapper {
        top: 10px;
        padding-left: 6px;
        padding-right: 6px;
        border-radius: 12px;
        width: auto;
        left: 3px;
        right: 3px;
    }

    .mobile-logo-wrapper img {
        max-width: 50px; /* shrink logo */
        height: auto;
    }

    account-area {
        font-size: 12px; /* smaller font size */
        margin-top: 15%;
    }

}

/* Extra small screens (iPhone SE, ≤ 400px) */
@media (max-width: 480px) {
    .mobile-logo-wrapper {
        top: 10px;
        padding: 6px;
        border-radius: 12px;
    }

    .mobile-logo-wrapper img {
        max-width: 80px; /* shrink logo */
        height: auto;
    }

    .account-area {
        font-size: 12px; /* smaller font size */
        /* margin-top: 15%; */
    }

    .fields-wrapper {
        margin-top: 20px;
    }

    .bottom-link {
        bottom: 12px;
    }
}

@media (max-height: 600px) {
    .account-area h1 {
        font-size: 23px;
    }

    .fields-wrapper {
        margin: 12px 0px;
    }

    .sso-wrapper {
        margin: 5px 0 30px;
    }

    .fields-wrapper .button button {
        height: 49px;
    }

    .sso-wrapper a {
        height: 60px;
    }

    .account-area {
        font-size: 12px;
    }
}

@media (max-width: 767px) {

    .purchases-data {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .popup-footer .sign-in {
        bottom: 72px;
    }

    .voucher-item, .topup-item {
        gap: 12px;
        padding: 12px;
    }

    .popup-wrapper:has(.page2.active) {
        height: 100% !important;
    }

    a.gradient-border {
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 99px;
        background: var(--Opacity-White-10, #FFFFFF1A);
    }

    a.gradient-border:before {
        content: none;
    }

    .most-popular-item .item-title, .popular-item .item-title {
        font-size: 16px;
        bottom: 21px;

    }

    body:not(.gm-logged-in) .popup-wrapper:has(.page.success.active) .popup-footer {
        margin-top: 60px;
    }

    #banner-section .owl-dots {
        left: 50%;
        transform: translateX(-50%);
    }

    .search-input {
        padding: 6px;
        width: 33px;
        height: 33px;
        border-radius: 8px;
    }

    .nav-buttons a.btn {
        width: 33px;
        border-radius: 8px;
    }

    .account-area {
        max-width: 100%;
        background: none;
        border: none;
        padding: 20px;
    }

    .mobile-logo-wrapper {
        display: flex;
        background: #ffffff14;
        backdrop-filter: blur(20px);
        padding: 10px;
        border-radius: 16px;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 20px;
        left: 20px;
        right: 20px;
    }

    .bottom-link {
        position: absolute;
        bottom: 20px;
        left: 20px;
        right: 20px;
    }

    .fields-wrapper .button {
        margin-top: 8px;
    }

    .payment-methods .method span {
        font-size: 10px;
    }

    .popup-body {
        margin: 0;
        padding-top: 0;
    }

    .game-options > div {
        gap: 12px;
    }

    .selected-method {
        padding: 12px;
    }

    .selected-method .method-name {
        font-size: 16px;
    }

    .back-to-home span {
        font-size: 20px;
    }

    .back-to-home a {
        width: 32px;
        height: 32px;
        border: 0;
        border-radius: 100px;
    }

    .back-to-home a:before {
        display: none;
    }

    .back-to-home {
        gap: 12px;
    }

    .profile-area {
        background: none;
        padding: 0;
        margin-top: 65px;
    }

    .profile-bar {
        background: linear-gradient(0deg, rgba(137, 137, 137, 0.05), rgba(137, 137, 137, 0.05)),
        radial-gradient(
                31.19% 68.12% at -14.17% -43.06%,
                rgba(0, 255, 244, 0.56) 0%,
                rgba(0, 255, 244, 0) 100%
        ) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
        radial-gradient(
                10.12% 22.4% at -3.6% 46.24%,
                rgba(0, 255, 244, 0.2) 0%,
                rgba(0, 255, 244, 0) 100%
        ) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
        radial-gradient(
                48.66% 33.14% at 50% 109.1%,
                rgba(48, 85, 227, 0.3) 0%,
                rgba(48, 85, 227, 0) 100%
        ) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
        radial-gradient(
                68.81% 68.81% at 45.4% 24.28%,
                rgba(84, 83, 83, 0.5) 0%,
                rgba(84, 83, 83, 0) 100%
        )
        /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        padding: 30px 24px 24px;
    }

    .profile-bar .profile-picture {
        position: absolute;
        top: -48px;
        z-index: 9;
    }

    .dashboard-bar {
        flex-direction: column;
        align-items: start;
        gap: 24px;
    }

    .dashboard-bar .search-bar .group-addon {
        padding-left: 12px;
    }

    .dashboard-bar .search-bar {
        width: 100%;
    }

    .order-history-bar {
        flex-direction: column;
        padding: 0;
        gap: 0;
    }

    .order-history-bar img {
        width: 100%;
        height: 130px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .order-history-bar .bar-details {
        padding: 16px;
        gap: 24px;
    }

    .back-to-home span.tiny {
        font-size: 12px;
    }

    .order-detail-area {
        padding: 0;
        background: none;
        border-radius: 0;
    }

    .profile-uploader-wrapper {
        align-items: end;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom: 0;
        width: 100%;
    }

    .profile-uploader {
        width: 100%;
        max-width: 100%;
    }

    form.personal-info-area {
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
    }

    .profile-bar .profile-info {
        align-items: center;
    }

    .personal-image {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .personal-image button {
        background: linear-gradient(0deg, rgba(32, 32, 32, 0.24), rgba(32, 32, 32, 0.24)),
        linear-gradient(0.23deg, rgba(0, 255, 244, 0.12) -0.05%, rgba(153, 153, 153, 0.1) 99.67%);
        color: #fff;
        border-radius: 999px;
        padding: 6px 16px;
        backdrop-filter: blur(2.5px);
        font-size: 10px;
        border: 0;
        outline: 0;
    }
}

/* Search Page Styles */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.product-grid .item {
    width: 100%;
}

@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* Fallback grid layout for carousels that are not initialized */
.owl-carousel:not(.owl-loaded):not(.banner-carousel) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.dashboard-bar.orders .back-to-home {
    width: 50%;
}

.personal-fields button.disabled {
    background: #424242;
    border-color: #424242;
    color: #ffffff66;
}

/* Mobile: 2 columns */
@media (max-width: 599px) {
    .owl-carousel:not(.owl-loaded):not(.banner-carousel) {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* Tablet: 3 columns */
@media (min-width: 600px) and (max-width: 1199px) {
    .owl-carousel:not(.owl-loaded):not(.banner-carousel) {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

/* Desktop: 4 columns */
@media (min-width: 1200px) {
    .owl-carousel:not(.owl-loaded):not(.banner-carousel) {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}

@media (max-width: 767px) {
    .order-history-bar .bar-details .amount {
        font-size: 18px;
        text-align: right;
    }

    .order-history-bar .bar-action a {
        font-size: 12px;
    }

    .order-history-bar .bar-action {
        align-items: end;
        gap: 6px;
        justify-content: center;
    }

    .order-history-bar .bar-details .item-name {
        font-size: 18px;
    }

    .order-history-bar .bar-details .item-description {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .dashboard-bar.orders .back-to-home {
        width: 100%;
    }

    .order-detail-area ul li {
        font-size: 16px;
    }

    .order-items .order-bar {
        font-size: 16px;
    }

    .order-bar span {
        font-weight: 400;
    }

    .back-to-home:has(span.tiny) {
        align-items: start;
    }

    .order-items .order-bar svg {
        margin-left: 3px;
    }

    .gallery-images .gallery-image {
        min-width: unset;
        width: unset;
        aspect-ratio: 1;
        height: unset;
    }

    .logout-popup-wrapper {
        padding: 20px;
    }

    .logout-popup-wrapper .logout-inner {
        padding: 32px 24px;
    }

    .logout-actions button {
        height: 48px;
    }

    #page-title {
        margin-bottom: 0px !important;
    }

    #page-description {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .dashboard-bar {
        flex-wrap: wrap;
    }

    .purchases-data {
        flex-wrap: wrap;
    }

    .dashboard-bar .date-range, .dashboard-bar .date-range.expanded {
        flex: auto;
    }

    body.popup-open
    {
        position:fixed !important;
        width:100%;
        background:#000909 !important; 
    }

}

.profile-menu svg {
    width: 25px;
}

@media (max-width: 450px) {
    .profile-menu {
        max-width: unset !important;
    }
}