@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

html, body {
    background-color: var(--color-primary);
    color: var(--color-text);
    margin: 0;
}

.over-hidden {
    overflow: hidden;
}

.container-retail {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.landing-page {
    width: 100%;
    min-height: 100dvh;
    padding: 20px 24px 32px;
    font-optical-sizing: auto;
    font-style: normal;
    background:
        radial-gradient(circle at 15% 0%, rgba(45, 210, 100, 0.10) 0%, transparent 45%),
        radial-gradient(circle at 85% 100%, rgba(45, 210, 100, 0.05) 0%, transparent 50%),
        #071219;
    font-family: var(--font-family);
}

.landing-page.online-sports-page,
.landing-page.online-jackpot-page,
.landing-page.oc-page {
    padding: 0;
}

/* // common  */
.landing-page .landing-page__button {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
    border: 1px solid #2b4554;
    border-radius: 50px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 0 28px;
    height: var(--height-element);
    font-size: calc(var(--font-size) + 8px);
    background-color: var(--button-bgr-default);
    color: var(--color-text-default);
}

.landing-page .landing-page__button img {
    width: 40px;
    aspect-ratio: 1;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

/* // pre-login header (voucher entry) */
.landing-page .landing-page__header.pre-login {
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 16px 0 20px;
    gap: 22px;
}

.landing-page .landing-page__header.pre-login .landing-page__header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.landing-page .landing-page__header.pre-login .landing-page__header__logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
}

.landing-page .landing-page__header.pre-login .landing-page__header__logo-img {
    max-width: 240px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 6px 18px rgba(45, 210, 100, 0.30));
}

.landing-page .landing-page__header.pre-login .landing-page__header__check-ticket {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.landing-page .landing-page__header.pre-login .landing-page__header__check-ticket #landing-page__check-ticket {
    height: 56px;
    padding: 0 24px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffe44d 0%, #f4cf24 55%, #d9b418 100%);
    color: #1a1a1a;
    font-family: var(--font-family);
    font-weight: 800;
    font-size: calc(var(--font-size) - 4px);
    letter-spacing: 1px;
    text-transform: uppercase;
    column-gap: 8px;
    cursor: pointer;
    box-shadow: 0 8px 18px 0 rgba(244, 207, 36, 0.25);
}

.landing-page .landing-page__header.pre-login .landing-page__header__check-ticket #landing-page__check-ticket .landing-page__button-icon {
    width: 20px;
    height: 20px;
    filter: none;
    opacity: 1;
}

/* // post-login header (after voucher entry) */
.landing-page .landing-page__header.post-login {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0 18px;
    flex-wrap: nowrap;
    width: 100%;
}

.landing-page .landing-page__header.post-login .landing-page__header__logo {
    flex-shrink: 0;
    padding: 0;
}

.landing-page .landing-page__header.post-login .landing-page__header__logo-img {
    max-width: 180px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 14px rgba(45, 210, 100, 0.30));
}

.landing-page .landing-page__header.post-login .landing-page__header__balance {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: var(--color-text);
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
}

.landing-page .landing-page__header.post-login .landing-page__header__balance-label {
    font-weight: 700;
    font-size: calc(var(--font-size) - 4px);
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
}

.landing-page .landing-page__header.post-login .landing-page__header__balance-amount {
    font-weight: 800;
    font-size: calc(var(--font-size) + 2px);
    color: #ffffff;
    letter-spacing: 0.5px;
}

.landing-page .landing-page__header.post-login .landing-page__header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.landing-page .landing-page__header.post-login .landing-page__header__btn {
    height: 56px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    column-gap: 8px;
    border: none;
    border-radius: 999px;
    font-family: var(--font-family);
    font-weight: 800;
    font-size: calc(var(--font-size) - 6px);
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.landing-page .landing-page__header.post-login .landing-page__header__btn--account {
    background: linear-gradient(180deg, #2DD264 0%, #25B856 100%);
    color: #071219;
    box-shadow: 0 8px 18px 0 rgba(45, 210, 100, 0.28);
}

.landing-page .landing-page__header.post-login .landing-page__header__btn--cashout {
    background: linear-gradient(180deg, #ffe44d 0%, #f4cf24 55%, #d9b418 100%);
    color: #1a1a1a;
    box-shadow: 0 8px 18px 0 rgba(244, 207, 36, 0.25);
}

.landing-page .landing-page__header.post-login .landing-page__header__actions #landing-page__check-ticket {
    height: 56px;
    padding: 0 22px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffe44d 0%, #f4cf24 55%, #d9b418 100%);
    color: #1a1a1a;
    font-family: var(--font-family);
    font-weight: 800;
    font-size: calc(var(--font-size) - 6px);
    letter-spacing: 1px;
    text-transform: uppercase;
    column-gap: 8px;
    cursor: pointer;
    box-shadow: 0 8px 18px 0 rgba(244, 207, 36, 0.25);
}

.landing-page .landing-page__header.post-login .landing-page__header__btn-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(0);
    opacity: 0.95;
}

.landing-page .landing-page__header.post-login .landing-page__header__actions #landing-page__check-ticket .landing-page__button-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0);
    opacity: 0.95;
}

.landing-page .landing-page__header {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

.landing-page .landing-page__header .landing-page__header__logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
}

.landing-page .landing-page__header .landing-page__header__action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1;
}

.landing-page .landing-page__header .alert {
    box-sizing: border-box;
    align-self: center;
    max-width: 100%;
    margin: 0 0 18px;
    padding: 14px 20px;
    border-radius: var(--input-radius);
    border: 1px solid #5f2b36;
    background: var(--bgr-error);
    box-shadow: 0 8px 20px 0 #00000066, inset 0 0 0 1px #071219;
    color: var(--color-error);
    font-size: calc(var(--font-size) - 4px);
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}

.landing-page .landing-page__header .alert-danger {
    color: var(--color-error);
    background: var(--bgr-error);
    border-color: #5f2b36;
}

.landing-page .landing-page__header .alert-success {
    color: var(--color-text-hl);
    background: var(--bgr-active);
    border-color: #2b4554;
}

.landing-page .landing-page__header .landing-page__header__action .landing-page__header__action-item {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
}

.landing-page.show .landing-page__header__action .landing-page__button {
    height: 48px;
    padding: 0 24px;
    font-size: calc(var(--font-size) - 2px);
    white-space: nowrap;
}

.landing-page.show .landing-page__header__action .landing-page__button-icon {
    width: 20px;
}

.landing-page .landing-page__header .landing-page__header__voucher {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 16px;
    width: 100%;
}

.landing-page .landing-page__header .landing-page__header__voucher__input {
    flex: 1;
    font-weight: 700;
    padding: 0 32px;
    height: var(--height-element);
    font-size: calc(var(--font-size) + 8px);
    background-color: var(--input-bgr);
    border: var(--input-border);
    box-shadow: var(--input-box-shadow);
    border-radius: var(--input-radius);
    color: var(--color-text);

}

.landing-page .landing-page__header .landing-page__header__voucher__input::placeholder {
    color: #8fa3ad;
    opacity: 1;
}

.landing-page .landing-page__header .landing-page__header__voucher-button {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 6px;
    padding: 0 58px;
    border-radius: 100px;
    box-shadow: none;
    border: 1px solid #2b4554;
    height: var(--height-element);
    background-color: var(--button-bgr-color);
}

.landing-page .landing-page__header .landing-page__header__voucher-button input {
    background: transparent;
    border: none;
    box-shadow: none;
    font-weight: 800;
    cursor: pointer;
    font-size: calc(var(--font-size) + 8px);
    color: var(--button-color);
}

.landing-page .landing-page__header .landing-page__header__voucher-button input:disabled {
    opacity: .5;
    cursor: no-drop;
}

/* // new stacked voucher form (pre-login) */
.landing-page .landing-page__voucher-form {
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: stretch;
    gap: 14px;
}

.landing-page .landing-page__voucher-input {
    width: 100%;
    height: var(--height-element);
    padding: 0 28px;
    font-weight: 700;
    font-size: calc(var(--font-size) + 4px);
    color: var(--color-text);
    background-color: var(--input-bgr);
    border: var(--input-border);
    box-shadow: var(--input-box-shadow);
    border-radius: 999px;
}

.landing-page .landing-page__voucher-input::placeholder {
    color: #8fa3ad;
    opacity: 1;
    font-weight: 600;
}

.landing-page .landing-page__voucher-input:focus {
    outline: none;
    border-color: var(--color-text-hl);
    box-shadow: 0 4px 14px 0 rgba(45, 210, 100, 0.18), inset 0 0 0 1px #071219;
}

.landing-page .landing-page__voucher-submit {
    position: relative;
    width: 100%;
}

.landing-page .landing-page__voucher-button {
    display: block;
    width: 100%;
    height: var(--height-element);
    border: none;
    border-radius: 999px;
    background: linear-gradient(180deg, #2DD264 0%, #25B856 100%);
    color: #071219;
    font-family: var(--font-family);
    font-weight: 800;
    font-size: calc(var(--font-size) + 6px);
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 10px 24px 0 rgba(45, 210, 100, 0.30), inset 0 -3px 0 0 rgba(0, 0, 0, 0.18);
    transition: transform .08s ease, box-shadow .15s ease, opacity .15s ease;
}

.landing-page .landing-page__voucher-button:hover {
    box-shadow: 0 12px 28px 0 rgba(45, 210, 100, 0.40), inset 0 -3px 0 0 rgba(0, 0, 0, 0.18);
}

.landing-page .landing-page__voucher-button:active {
    transform: translateY(1px);
}

.landing-page .landing-page__voucher-button:disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}

.landing-page .landing-page__voucher-submit #loading-voucher {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    border-color: #071219;
    border-bottom-color: transparent;
}

/* // hero banner (Live Football Play To Win) — uses sport_banner.png with baked-in text */
.landing-page .landing-page__hero {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 618 / 258;
    overflow: hidden;
    border-radius: 28px;
    margin: 18px 0 16px;
    cursor: pointer;
    text-decoration: none;
    background:
        url("/sites/BetifyLsRetail/img/banner/sport_banner.png") center/cover no-repeat,
        linear-gradient(135deg, #0d2230 0%, #112a3a 55%, #0a1b27 100%);
    box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.45);
}

/* hide overlay copy — text + CTA are baked into the image */
.landing-page .landing-page__hero__copy {
    display: none;
}

.landing-page .landing-page__content {
    display: flex;
    flex-flow: column;
    width: 100%;
    padding: 4px 0 0;
}

.landing-page .landing-page__games-container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.landing-page .landing-page__game-card {
    overflow: hidden;
    position: relative;
    cursor: pointer;
    box-shadow: 0 10px 22px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    border-radius: 22px;
    aspect-ratio: 512 / 236;
    min-height: 130px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 18px 20px;
}

.landing-page .landing-page__game-card .landing-page__game-card__label {
    align-self: flex-start;
}

.landing-page .landing-page__game-card.disabled {
    opacity: 0.3;
}

/* // game-card art — each card uses a full PNG with baked-in text + art.
   Gradients listed second are fallbacks if image fails to load. */

/* hide label spans (text is in the image) */
.landing-page .landing-page__game-card .landing-page__game-card__label {
    display: none;
}

/* legacy sports/horses (kept as fallback if backend still renders) */
.landing-page .landing-page__game-card--football {
    background:
        var(--bgr-sport) center/cover no-repeat,
        linear-gradient(135deg, #0e2a3a 0%, #0a1d29 100%);
}

.landing-page .landing-page__game-card--horse-intl {
    background:
        var(--bgr-horse-intl) center/cover no-repeat,
        linear-gradient(135deg, #785028 0%, #28190f 100%);
}

.landing-page .landing-page__game-card--horse-mauritius {
    background:
        var(--bgr-horse-mauritius) center/cover no-repeat,
        linear-gradient(135deg, #785028 0%, #28190f 100%);
}

/* // route /casino is actually Roulette 30 — use roulette_30.png */
.landing-page .landing-page__game-card--casino {
    background:
        url("/sites/BetifyLsRetail/img/banner/roulette_30.png") center/cover no-repeat,
        linear-gradient(155deg, #16a3b9 0%, #0e6b78 55%, #084048 100%);
}

/* // LUCKY NUMBERS — lucky_number.png + red fallback */
.landing-page .landing-page__game-card--numbers {
    background:
        url("/sites/BetifyLsRetail/img/banner/lucky_number.png") center/cover no-repeat,
        linear-gradient(155deg, #d63147 0%, #8e1729 55%, #54101a 100%);
}

/* // ROULETTE 20 (a.k.a. casino-rapid) — roulette_20.png + green fallback */
.landing-page .landing-page__game-card--casino-rapid {
    background:
        url("/sites/BetifyLsRetail/img/banner/roulette_20.png") center/cover no-repeat,
        linear-gradient(155deg, #1ea84a 0%, #0f6c2e 55%, #0a3f1b 100%);
}

/* // ROULETTE 30 — roulette_30.png + teal fallback (backend wiring TBD) */
.landing-page .landing-page__game-card--roulette-30 {
    background:
        url("/sites/BetifyLsRetail/img/banner/roulette_30.png") center/cover no-repeat,
        linear-gradient(155deg, #16a3b9 0%, #0e6b78 55%, #084048 100%);
}

/* // VIRTUALS / GLOBAL BET — virtuals_globalbet.png + purple fallback */
.landing-page .landing-page__game-card--virtual {
    background:
        url("/sites/BetifyLsRetail/img/banner/virtuals_globalbet.png") center/cover no-repeat,
        linear-gradient(155deg, #5a3bbf 0%, #2d1f80 55%, #18114a 100%);
}

/* // VIRTUALS / KIRON — virtuals_kiron.png + green fallback (backend wiring TBD) */
.landing-page .landing-page__game-card--kiron {
    background:
        url("/sites/BetifyLsRetail/img/banner/virtuals_kiron.png") center/cover no-repeat,
        linear-gradient(155deg, #1ea84a 0%, #0f6c2e 55%, #0a3f1b 100%);
}

/* // BET GAMES — bet_games.png + red fallback */
.landing-page .landing-page__game-card--betgames {
    background:
        url("/sites/BetifyLsRetail/img/banner/bet_games.png") center/cover no-repeat,
        linear-gradient(155deg, #d63147 0%, #8e1729 55%, #54101a 100%);
}

/* // route /aggregator/game is actually Casino Games — use casino_game.png */
.landing-page .landing-page__game-card--aggregator-game {
    background:
        url("/sites/BetifyLsRetail/img/banner/casino_game.png") center/cover no-repeat,
        linear-gradient(155deg, #8a2bbf 0%, #5e1791 55%, #391157 100%);
}

.landing-page .landing-page__game-card--virtual-games {
    background:
        url("/sites/BetifyLsRetail/img/banner/virtual.png") center/cover no-repeat,
        linear-gradient(155deg, #2f7fbf 0%, #1a4d80 55%, #0f2b4a 100%);
}

.landing-page .landing-page__game-card__content {
    flex-direction: column;
    justify-content: flex-end;
    position: absolute;
    z-index: 2;
    bottom: 8px;
    padding: 16px 22px;
    width: 100%;
}

.landing-page .landing-page__game-card__overlay {
    height: 100%;
    position: absolute;
    left: -100px;
    width: 100%;
    background: linear-gradient(90deg, #071219 0%, rgba(7, 18, 25, 0) 100%);
    top: 0;
    z-index: -1;
}

.landing-page .landing-page__game-card__title {
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 10px;
    color: var(--color-text);
    font-size: calc(var(--font-size) + 12px);
    font-family: var(--card-font-family);
}

.landing-page .landing-page__game-card__title span {
    color: var(--color-text-hl);
}

.landing-page .landing-page__game-card--football .landing-page__game-card__title {
    margin-bottom: 32px;
}


.landing-page .landing-page__game-card__button {
    color: var(--button-color);
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    text-transform: uppercase;
    cursor: pointer;
    align-self: flex-start;
    font-weight: 800;
    background: var(--button-bgr-color);
    font-size: var(--font-size);
}

/* // langing page login */

.landing-page.show .landing-page__header {
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
}

.landing-page.show .landing-page__header .landing-page__header__logo {
    padding-bottom: 0;
}

.landing-page.show .landing-page__header .landing-page__header__logo-img {
    max-width: 145px;
}

.landing-page.show .landing-page__header__action {
    justify-content: flex-end;
    column-gap: 10px;
}

.landing-page.show .landing-page__header__action-btn {
    border: none;
    box-shadow: none;
    height: 48px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    border-radius: 100px;
    font-weight: 800;
    cursor: pointer;
    text-transform: uppercase;
    font-size: calc(var(--font-size) - 2px);
    color: var(--button-color);
}

.landing-page.show .landing-page__header__action-btn .account-img {
    filter: brightness(0) invert(1);
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.landing-page.show .landing-page__header__action-balance #balance-text {
    font-weight: 800;
    color: var(--color-text);
    font-size: calc(var(--font-size) - 2px);
    white-space: nowrap;
}

.landing-page.show .landing-page__header__action-btn.btn-active {
    background-color: var(--button-bgr-active);
}

.landing-page.show .landing-page__header__action-btn.btn-default {
    background-color: var(--button-bgr-default);
}

/* // sport */
.sport__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 51px;
    position: relative;
}

.sport__close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    column-gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background-color: var(--input-bgr);
    color: var(--color-text);
    text-decoration: none;
    font-weight: 700;
    font-size: calc(var(--font-size) - 4px);
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid transparent;
    transition: background-color .15s, border-color .15s, color .15s;
    z-index: 2;
}

.sport__close:hover,
.sport__close:focus {
    background-color: var(--color-primary);
    border-color: var(--color-text-hl);
    color: var(--color-text-hl);
    text-decoration: none;
}

.sport__close-icon {
    font-size: calc(var(--font-size) + 4px);
    line-height: 1;
    font-weight: 700;
}

.sport__tab .sport__tab-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid transparent;
    transition: background-color .15s, border-color .15s;
    height: 100%;
    cursor: pointer;
    background-color: var(--bgr-main);
}

.sport__tab .sport__tab-item.active {
    background-color: var(--input-bgr);
    border-bottom-color: var(--color-text-hl);
}

.sport__tab .sport__tab-item .sport__tab-item-text {
    font-size: var(--font-size);
    color: var(--color-text);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sport__tab .sport__tab-item.active .sport__tab-item-text {
    color: var(--color-text-hl);
}

#sport-iframe {
    width: 100%;
    background-color: var(--sport-iframe-bg-color);
}

#sport-iframe iframe {
    width: 100%;
    border: 0;
    display: block;
}

/* // popup  */
#bv-popup-iframe-close {
    position: relative;
    padding: 8px 16px;
    font-weight: 800;
    height: var(--popup-height-close);
    font-size: calc(var(--font-size) - 4px);
    background: var(--popup-bgr);
}

#bv-popup-iframe-close .bv-popup-iframe-close-text {
    position: absolute;
    right: 16px;
    font-size: calc(var(--font-size) - 4px);
    font-weight: 700;
}

#bv-popup-iframe-close .bv-popup-iframe-close-icon {
    display: none;
}

#games-iframe-popup #games-iframe-loading {
    position: absolute;
    height: 100%;
    top: var(--popup-height-close);
    width: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    background: #071219;
}

#games-iframe-popup #games-iframe-loading .landing-page-loading {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    z-index: -1;
}

#games-iframe-popup #games-iframe-loading.open {
    display: flex;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.games-iframe-popup-box {
    display: flex;
    flex-flow: column;
    height: 100%;
}

#games-iframe-popup .games-iframe-popup-iframe {
    display: flex;
    flex: 1;
}

#games-iframe-popup.pop-center .games-iframe-popup-box {
    position: absolute;
    width: 95%;
    height: 90dvh;
    top: 50%;
    left: 50%;
    background: #fff;
    overflow-y: scroll;
    transform: translate(-50%, -50%);
    border-radius: 24px;
    padding: 24px;
}

#games-iframe-popup.pop-center::after {
    content: '';
    position: absolute;
}

#games-iframe-popup.pop-center #bv-popup-iframe-close {
    background: transparent !important;
    position: absolute;
    right: 20px;
    top: 20px;
    padding: 0;
}

#games-iframe-popup.pop-center .bv-popup-iframe-close-text,
#games-iframe-popup.pop-center .bv-popup-iframe-close-balance {
    display: none;
}

#games-iframe-popup.pop-center .bv-popup-iframe-close-icon {
    display: block;
    width: 16px;
    aspect-ratio: 1;
}

/* // loading */
.landing-page-loading {
    width: 30px;
    height: 30px;
    border: 5px solid #f4f8fb;
    border-bottom-color: transparent;
    border-radius: 100%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

/* // popup  */

.landing__action-button-box {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 16px;
}

#voucher_cashout_in_popup {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 6px;
}

#voucher_cashout_in_popup .landing-page-loading {
    width: 20px;
    height: 20px;
    border-width: 3px;
}

.landing__action-button {
    border: none;
    height: 48px;
    border-radius: 100px;
    font-weight: 800;
    text-transform: uppercase;
    width: 100%;
    padding: 0 24px;
    font-size: calc(var(--font-size) - 2px);
}

.landing__action-button:disabled {
    opacity: .3;
    cursor: no-drop;
}

.landing__action-button.active {
    background: var(--button-bgr-active);
    color: var(--color-active);
}

.landing__action-button.primary {
    background: var(--button-bgr-primary);
    color: var(--color-primary);
}

.landing-popup {
    position: fixed;
    width: 100vw;
    height: 100dvh;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    z-index: 999;
    display: none;
    background: rgb(0 0 0 / 80%);
}

.landing-popup.open {
    display: flex;
}

.landing-popup .landing-popup__box {
    position: relative;
    background: #112633;
    color: var(--color-text);
    padding: 32px;
    border-radius: 24px;
    max-width: 80vw;
}

.landing-popup .landing-popup__icon-close {
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
}

.landing-popup .landing-popup__title {
    font-size: calc(var(--font-size) + 12px);
    font-weight: 700;
    margin-bottom: 24px;
}

.landing-popup .landing-popup__description {
    font-size: calc(var(--font-size) - 2px);
    font-weight: 400;
    margin-bottom: 12px;
}

.landing-popup .landing-popup__description.bold {
    font-weight: 700;
}

.landing-popup .landing-popup__description.note {
    margin-bottom: 40px;
}

#account-cashout {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

#bv-site-container {
    background: var(--popup-bgr-bv);
    min-height: 100dvh;
}

#bv-box-loading {
    width: 100%;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--popup-bgr-bv);
}

#bv-box-loading .landing-page-loading {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: transparent;
}

#local-event {
    min-height: 100dvh;
    background: var(--popup-bgr-local-event);
}

/* // search Ticket  */
#voucher-status-popup {
}

#voucher-status-popup .landing-popup__box {
    background-color: var(--bgr-main);
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 80vw;
    max-height: 95dvh;
    overflow-y: auto;
}

#voucher-status-popup .landing-popup__box .landing-popup__title {
    color: var(--color-text);
}

#voucher-status-popup .landing-page__search-ticket {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding-bottom: 38px;
}

#voucher-status-popup
    .landing-page__search-ticket
    .landing-page__search-ticket-form {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 16px;
    width: 100%;
}

#voucher-status-popup .landing-page__button {
    height: var(--height-element);
    padding: 0 48px;
    background: var(--button-bgr-active);
    font-size: calc(var(--font-size) + 8px);
}

#voucher-status-popup #voucher__iframe {
    width: 100%;
}

#voucher-status-popup #landing-page__error {
    color: var(--color-error);
    font-size: calc(var(--font-size) + 2px);
    background-color: var(--bgr-error);
    font-weight: 700;
    position: relative;
    padding: 0.75rem 1.25rem;
    border-radius: 4px;
    width: fit-content;
}

.landing-popup__ticket-id {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding-bottom: 4px;
    color: var(--color-text);
    font-size: calc(var(--font-size) - 2px);
    font-weight: bold;
}
/* footer  */
.bet-footer {
    position: relative;
    padding: 32px 24px;
    display: grid;
    grid-template-columns: 5fr 5fr;
    justify-content: center;
    column-gap: 10px;
    background-color: var(--bgr-main);
    font-family: var(--font-family);
}

.bet-footer .bet-footer-item {
    display: flex;
    flex-flow: column;
    flex: 1;
    row-gap: 16px;
}

.bet-footer .bet-footer-item .bet-footer-item__content {
    display: flex;
    flex-flow: column;
    position: relative;
}

.bet-footer .bet-footer-text {
    font-size: calc(var(--font-size) - 6px);
    color: var(--color-text);
}

.bet-footer .bet-footer-text.bold {
    font-weight: 700;
}

.bet-footer .bet-footer-item .bet-footer-item__content.static {
    display: flex;
    align-items: center;
    flex-flow: row;
    column-gap: 32px;
}

.bet-footer .bet-footer-item__content-static-item {
    display: flex;
    flex-flow: column;
    align-items: center;
    row-gap: 8px;
}

.bet-footer .bet-footer-item__content-static-item-img {
    width: 32px;
}

.bet-footer .bet-footer-item__content-static-item-text {
    font-size: calc(var(--font-size) - 8px);
    color: var(--color-text);
}

@media (max-width: 768px) {
    .landing-page {
        padding: 16px 16px 28px;
    }

    .landing-page .landing-page__header {
        padding: 0;
    }

    .landing-page .landing-page__header.pre-login {
        padding: 8px 0 18px;
        gap: 14px;
    }

    .landing-page .landing-page__header.pre-login .landing-page__header__logo-img {
        max-width: min(72%, 320px);
    }

    .landing-page .landing-page__voucher-input,
    .landing-page .landing-page__voucher-button {
        height: calc(var(--height-element) - 6px);
        font-size: calc(var(--font-size));
    }

    .landing-page .landing-page__hero {
        padding: 22px 22px;
        min-height: 180px;
        border-radius: 22px;
    }

    .landing-page .landing-page__hero__title {
        font-size: clamp(26px, 9vw, 42px);
    }

    .landing-page .landing-page__content {
        padding: 0;
    }

    .landing-page .landing-page__games-container {
        gap: 12px;
        grid-template-columns: 1fr 1fr;
    }

    .landing-page .landing-page__game-card {
        min-height: 150px;
        padding: 14px 16px;
        border-radius: 20px;
    }

    .landing-page.show .landing-page__header {
        position: relative;
        padding: 24px 16px;
    }

    .landing-page .landing-page__header.account .landing-page__header__action {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        flex-flow: column;
        row-gap: 12px;
    }

    .landing-page.show .landing-page__header__action {
        column-gap: 6px;
    }

    .landing-page.show .landing-page__header__action .landing-page__button {
        font-size: calc(var(--font-size) - 4px);
        white-space: nowrap;
        padding: 0 16px;
    }

    .landing-page.show .landing-page__header__action-btn {
        font-size: calc(var(--font-size) - 4px);
    }

    .landing-page .landing-page__button {
        font-size: calc(var(--font-size));
        padding: 0 20px;
    }

    #voucher-status-popup .landing-popup__box {
        padding: 20px;
    }

    #voucher-status-popup .landing-page__button {
        padding: 0 24px;
        font-size: calc(var(--font-size));
    }

    .bet-footer {
        padding: 20px 10px;
        grid-template-columns: 4.5fr 5.5fr;
    }

}

/* Casino (Spin & Win) iframe wrapper */
.casino-wrapper {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    background-color: var(--sport-iframe-bg-color, var(--color-primary));
}

.casino-wrapper__iframe {
    width: 100%;
    height: 100dvh;
    border: 0;
    display: block;
}

.casino-wrapper #casino-iframe-close.sport__close {
    position: fixed;
    top: 25px;
    right: 16px;
    z-index: 10;
}

.casino-wrapper__error {
    padding: 48px 16px;
    text-align: center;
    color: var(--color-text);
    font-family: var(--font-family);
}

.casino-wrapper__error p {
    color: var(--color-error);
    font-weight: 700;
    margin-bottom: 8px;
}

.casino-wrapper__error small {
    color: var(--color-text-muted, #a0adb8);
    display: block;
    margin-bottom: 24px;
}

.casino-wrapper__back {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 999px;
    background-color: var(--color-text-hl);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 700;
}


/* Numbers iframe wrapper */
.numbers-wrapper {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    background-color: var(--sport-iframe-bg-color, var(--color-primary));
}

.numbers-wrapper__iframe {
    width: 100%;
    height: 100dvh;
    border: 0;
    display: block;
}

.numbers-wrapper #numbers-iframe-close.sport__close {
    position: fixed;
    top: 25px;
    right: 16px;
    z-index: 10;
}

.numbers-wrapper__error {
    padding: 48px 16px;
    text-align: center;
    color: var(--color-text);
    font-family: var(--font-family);
}

.numbers-wrapper__error p {
    color: var(--color-error);
    font-weight: 700;
    margin-bottom: 8px;
}

.numbers-wrapper__error small {
    color: var(--color-text-muted, #a0adb8);
    display: block;
    margin-bottom: 24px;
}

.numbers-wrapper__back {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 999px;
    background-color: var(--color-text-hl);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 700;
}

/* Betgames iframe wrapper */
.betgames-wrapper {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    background-color: var(--sport-iframe-bg-color, var(--color-primary));
}

.betgames-wrapper__iframe {
    width: 100%;
    height: 100dvh;
    border: 0;
    display: block;
}

.betgames-wrapper #betgames-iframe-close.sport__close {
    position: fixed;
    top: 25px;
    right: 16px;
    z-index: 10;
}

.betgames-wrapper__error {
    padding: 48px 16px;
    text-align: center;
    color: var(--color-text);
    font-family: var(--font-family);
}

.betgames-wrapper__error p {
    color: var(--color-error);
    font-weight: 700;
    margin-bottom: 8px;
}

.betgames-wrapper__error small {
    color: var(--color-text-muted, #a0adb8);
    display: block;
    margin-bottom: 24px;
}

.betgames-wrapper__back {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 999px;
    background-color: var(--color-text-hl);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 700;
}

/* ============================================================
   Kiosk pre-login shared chrome (welcome / login / voucher).
   Contained card panel, brand lockup, dividers, headings.
   Page-specific bits live in welcome.css / online-login.css /
   voucher-preview.css.
   ============================================================ */

.landing-page.kiosk-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
}

.landing-page .kiosk-panel {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-flow: column;
    gap: 24px;
    padding: 40px 48px 30px;
    background:
        radial-gradient(circle at 50% -10%, rgba(61, 220, 132, 0.06) 0%, transparent 55%),
        #0c1613;
    border: 1px solid #1f3a30;
    border-radius: 28px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
}

.landing-page .kiosk-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.landing-page .kiosk-brand--row {
    justify-content: space-between;
}

.landing-page .kiosk-brand__logo {
    height: 46px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 14px rgba(61, 220, 132, 0.22));
}

.landing-page .kiosk-status-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #3ddc84;
    box-shadow: 0 0 10px rgba(61, 220, 132, 0.9);
    flex-shrink: 0;
}

.landing-page .kiosk-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid #4a3d1f;
    color: #e8c14a;
    font-weight: 700;
    font-size: calc(var(--font-size) - 8px);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

.landing-page .kiosk-status-pill::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8a7a3a;
}

.landing-page .kiosk-title {
    margin: 0;
    text-align: center;
    color: #ffffff;
    font-weight: 800;
    text-transform: uppercase;
    font-size: calc(var(--font-size) + 26px);
    letter-spacing: 6px;
    line-height: 1.05;
}

.landing-page .kiosk-title--left {
    text-align: left;
    letter-spacing: 3px;
    font-size: calc(var(--font-size) + 16px);
}

.landing-page .kiosk-subtitle {
    margin: 0;
    text-align: center;
    color: rgba(244, 248, 251, 0.55);
    font-weight: 500;
    font-size: calc(var(--font-size) - 2px);
}

.landing-page .kiosk-subtitle--left {
    text-align: left;
}

.landing-page .kiosk-heading {
    display: flex;
    flex-flow: column;
    gap: 8px;
}

.landing-page .kiosk-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #24463a, transparent);
}

.landing-page .kiosk-help {
    text-align: center;
    color: rgba(244, 248, 251, 0.35);
    font-size: calc(var(--font-size) - 8px);
    font-weight: 500;
}

@media (max-width: 768px) {
    .landing-page .kiosk-panel {
        padding: 28px 20px 24px;
        border-radius: 22px;
        gap: 20px;
    }

    .landing-page .kiosk-brand__logo {
        height: 38px;
    }

    .landing-page .kiosk-title {
        font-size: calc(var(--font-size) + 12px);
        letter-spacing: 3px;
    }

    .landing-page .kiosk-title--left {
        font-size: calc(var(--font-size) + 8px);
    }
}

/* Online-user Sports hero tile — standalone copy of the retail hero style so
   the two can diverge independently. */
.landing-page .landing-page__online-hero {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 618 / 258;
    overflow: hidden;
    border-radius: 28px;
    margin: 18px 0 16px;
    cursor: pointer;
    text-decoration: none;
    background:
        url("/sites/BetifyLsRetail/img/banner/sport_banner.png") center/cover no-repeat,
        linear-gradient(135deg, #0d2230 0%, #112a3a 55%, #0a1b27 100%);
    box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.45);
}
.landing-page .landing-page__online-hero.disabled {
    opacity: .5;
    cursor: default;
}

/* button-based game cards (coming soon) reset native button chrome */
.landing-page button.landing-page__game-card {
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
    font: inherit;
    color: inherit;
}

/* Soccer Jackpot card — full banner art (soccer-jackpot.jpg) + gradient fallback. */
.landing-page .landing-page__game-card--online-jackpot {
    background:
        url("/sites/BetifyLsRetail/img/soccer-jackpot.jpg") center/cover no-repeat,
        linear-gradient(135deg, #10394a 0%, #12604f 55%, #0a2c22 100%);
}

/* Casino Games card — full banner art (casino_game.png) + Coming Soon badge. */
.landing-page .landing-page__game-card--online-casino {
    background:
        url("/sites/BetifyLsRetail/img/banner/casino_game.png") center/cover no-repeat,
        linear-gradient(155deg, #5a3bbf 0%, #2d1f80 55%, #18114a 100%);
}
.landing-page .landing-page__game-card.js-online-coming-soon::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(8, 12, 20, .34);
}
.landing-page .landing-page__coming-soon-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #08251d;
    background: linear-gradient(180deg, #ffe44d 0%, #f4cf24 55%, #d9b418 100%);
    padding: 5px 12px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}

/* ── Online-user Casino lobby (oc-*) ─────────────────────────────────── */
.oc-page .oc-lobby { padding: 12px 16px 40px; }
.oc-searchbar { margin: 8px 0 12px; }
.oc-search {
    width: 100%; box-sizing: border-box; padding: 12px 16px;
    border: 1px solid rgba(255,255,255,.18); border-radius: 12px;
    background: rgba(255,255,255,.06); color: #fff; font-size: 16px;
}
.oc-search::placeholder { color: rgba(255,255,255,.5); }
.oc-filters { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0; -webkit-overflow-scrolling: touch; }
.oc-filters[hidden] { display: none; }
.oc-filters::-webkit-scrollbar { height: 0; }
.oc-chip {
    flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
    color: #fff; font-size: 14px; white-space: nowrap;
}
.oc-chip em { opacity: .6; font-style: normal; }
.oc-chip--active { background: #1e6f5c; border-color: #1e6f5c; }
.oc-heading { margin: 16px 0 10px; font-size: 18px; font-weight: 700; color: #fff; }
.oc-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.oc-tile {
    display: flex; flex-direction: column; padding: 0; cursor: pointer;
    border: 0; background: transparent; text-align: left;
}
.oc-tile__media {
    position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
    border-radius: 12px; background: linear-gradient(135deg,#16324a,#0c3b2e);
    display: flex; align-items: center; justify-content: center;
}
.oc-tile__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oc-tile__fallback { font-size: 40px; font-weight: 800; color: rgba(255,255,255,.85); }
.oc-tile__meta { padding: 6px 2px 0; overflow: hidden; }
.oc-tile__name {
    display: block; font-size: 13px; font-weight: 600; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oc-tile__provider { display: block; font-size: 11px; color: rgba(255,255,255,.55); }
.oc-sentinel { height: 1px; }
.oc-status { text-align: center; color: rgba(255,255,255,.6); padding: 16px 0; min-height: 20px; }

.oc-overlay {
    position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column;
    background: #000;
}
.oc-overlay[hidden] { display: none; }
.oc-overlay__bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; background: #0c1c14; color: #fff; flex: 0 0 auto;
}
.oc-overlay__close {
    padding: 8px 14px; border: 0; border-radius: 10px; cursor: pointer;
    background: #1e6f5c; color: #fff; font-size: 15px; font-weight: 700;
}
.oc-overlay__frame { flex: 1 1 auto; width: 100%; border: 0; }

.oc-modal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); }
.oc-modal[hidden] { display: none; }
.oc-modal__box { max-width: 90%; width: 360px; padding: 24px; border-radius: 16px; background: #12251c; color: #fff; text-align: center; }
.oc-modal__msg { margin: 0 0 18px; font-size: 15px; line-height: 1.4; }
.oc-modal__btn { padding: 10px 22px; border: 0; border-radius: 10px; cursor: pointer; background: #1e6f5c; color: #fff; font-weight: 700; }