@charset "utf-8";

:root {
    --color: #151A60;
    --lg: linear-gradient(135deg, #4facfe, #00f2fe);
    --hover: linear-gradient(135deg, #aa9cfc, #fc9ce7);
    --active: linear-gradient(135deg, #aa9cfc, #fc9ce7);
    --color-red: #c62828;
    --deep: var(--color);
    --border: #009688;
    --border-1: #151A60;
    --text-1: #fdb56f;
    --text-2: #fafafa;
    --text-3: #000;
    --second: #290D60;
    --third: #FB9203;
    --bg-white: #FFFFFF;
    --bg-third: #01C34F;
    --bg-fifth: #B45101;
    --txt-white: #FFFFFF;
    --txt-black: #000000;
    --txt-gray: #757575;
    --txt-main: #B64B06;
    --txt-second: #8C6239;
    --txt-third: #01C34F;
    --txt-fourth: #834200;
    --txt-fifth: #B45101;
    --bd-gray: #757575;
    --bd-white: #FFFFFF;
    --bd-active: #B45101;
    --bd-fifth: #B45101;
    --bg-1: #fff;
    --bg-2: #151A60;
    --vip-1: #fafafa;
    --vip-2: #FFC557;
    --shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    --tooltip-primary: var(--color);
    --tooltip-color: #333;
}

/* CSS Document */
span {
    color: var(--txt-white);
}
.wrapper {
    width: 100%;
    height: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 0;
    background: url("../../images/theme19/blur.jpg") no-repeat center;
    background-size: 100% 100%;
    overflow: hidden;
    display: block;
}

.btn-invite,
.btn-msg {
    padding: unset !important;
}

.approved-modal {
    display: none;
}

.w-100 {
    width: 100%;
    height: auto;
    text-align: center;
    margin: 0 auto;
    display: block;
}

.h-100 {
    width: 100%;
    height: auto;
    text-align: center;
    margin: 0 auto;
    display: block;
}

.section {
    width: 100%;
    height: auto;
    text-align: center;
    margin: 5px auto;
    padding: .1rem 0;
    display: block;
}

.fullsize {
    width: 100%;
    max-width: 640px;
    height: 100%;
    text-align: center;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    display: block;
}

.fullsize::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../../images/theme19/bg.jpg');
    background-size: 100% 100%;
    /* filter: blur(4px); */
}

.header {
    padding: 5px 0;
}

.profile-thumbnail {
    width: 100%;
    max-width: 60px;
    height: auto;
    max-height: 60px;
    overflow: hidden;
}

.btn-right-header,
.btn-ammount-header {
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-ammount-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 144px;
    height: 32px;
    background: #1A206F;
    border-radius: 30px;
}

.btn-ammount-header img {
    width: 10rem;
}

.btn-right-header img {
    width: 3rem;
}

.profile-thumbnail img {
    /* width: 100%; */
    max-width: 60px;
    height: auto;
}

.profile-fram {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-width: 60px;
    height: auto;
    max-height: 60px;
}

.profile-fram img {
    width: 100%;
    height: auto;
}

.allgames-thumbnail img {
    width: 100%;
    height: auto;
}

.profile-name {
    /* font-size: 1.3rem; */
    color: #ffffff;
    font-weight: bold;
}

.id-profile span {
    font-size: .8rem;
    color: #ffffff;
    font-weight: bold;
    padding: 0 5px;
}

.id-profile img {
    width: .8rem;
}

body .info-pro-header p {
    margin-bottom: unset !important;
}

.info-pro-header {
    /* padding-left: 15px; */
    /* text-align: left; */
    /* margin: 0 .8rem; */
    z-index: 1;
}

.bg-slider-promo img {
    width: 100%;
    height: 8.7rem;
    border-radius: 12px;
}

.announcement {
    margin-top: -1rem;
}

.bg-jackpot {
    display: block;
    position: relative;
    height: 70px;
    margin-top: 12px;
    z-index: 0;
}

.bg-jackpot .items-jackport .col:first-child{
    background-image: url("../../images/theme19/jackpot/bg-king.png");
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
    position: absolute;
    left: 6px;
    top: 0;
    width: 32vw;
}

.bg-jackpot .items-jackport .col:nth-child(2){
    background-image: url("../../images/theme19/jackpot/bg-supreme.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -18px);
    z-index: 10;
    width: 45vw;
}

.bg-jackpot .items-jackport .col:last-child{
    background-image: url("../../images/theme19/jackpot/bg-noble.png");
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    position: absolute;
    right: 6px;
    top: 0;
    width: 32vw;
}

.box-jackpot img {
    /* width: 7.2rem; */
}

.box-jackpot {
    padding: .375rem 0;
}
.col:nth-child(2) .box-jackpot {
    padding: 1.125rem 0;
}

p {
    margin-bottom: unset !important
}

.jackpot-t {
    width: 100%;
    height: auto;
    text-align: center;
    font-weight: 900;
    display: block;
    width: 100%;
    font-size: 1.3rem;
    font-weight: 900;
}

.jackpot-supreme {
    background: linear-gradient(to bottom, #ffb300, #c62828);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
            0 1px 0 #ffffff,
            0 2px 0 #c62828,
            0 3px 0 #c62828,
            0 4px 0 #c62828,
            0 3px 2px rgba(0, 0, 0, 0.4),
            0 5px 5px rgba(0, 0, 0, 0.3);
    font-size: 1.5rem;
}
.jackpot-king,
.jackpot-noble {
    color: var(--txt-white);
}

.items-jackport {
    margin: .1rem 0;
}

.items-jackport .col {
    /* margin: .1rem 0; */
}

.bg-annoumet marquee {
    font-size: 0.9rem;
    color: #ffffff;
    font-weight: bold;
}

.icon-news {
    z-index: 1;
    padding: 0 15px;
}

.fistpromo-s {
    padding: 0 10px;
}

.slick-dotted.slick-slider {
    margin-bottom: 0px !important;
}

.position-absolute img {
    width: 100%;
    max-width: 35px;
    height: auto;
}

.allgames-thumbnail {
    width: 100%;
    height: auto;
    border-radius: 1.5rem;
    overflow: hidden;
    position: relative;
    display: block;
    -webkit-box-shadow: 0 1px 4px rgb(0 0 0 / 64%), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}

.icon-rotate {
    position: absolute;
    top: -18px;
    right: -11px;
    background: linear-gradient(to bottom, #E91E63, #ff0000a6);
    border-radius: 20px;
    padding: 5px;
}

.icon-rotate img {
    max-width: 40px;
}

.hots {
    width: 100%;
    height: auto;
    max-width: 60px;
    position: absolute;
    left: -5px;
    top: -12px;
    z-index: 9;
}

.hots img {
    width: 100%;
}

/* .bg-footer {
	background: #6900e1d6;
	position: fixed;
	transition: transform 0.3s ease;
	z-index: 99;
	left: 0;
	bottom: 0;
	transition: transform 0.3s ease-in-out;
} */
.bg-footer {
    height: 72px;
    background: linear-gradient(180deg, #F7E6B5 0%, #D8B2A5 100%);
    box-shadow: inset 0px 0px 3.2px var(--bg-black);
    position: fixed;
    z-index: 99;
    bottom: 0;
    transition: transform 0.3s ease-in-out;
    max-width: 616px;
    width: calc(100% - 1.5rem) !important;
    margin: .5rem .75rem;
}
.bg-footer .effect-left{
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-12px, -10px);
}
.bg-footer .effect-right{
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(12px, -10px);
}

.item-top-footer {
    position: relative;
}
.bg-footer a video{
    width: 52px;
    height: 52px;
}

.bg-footer.hidden {
    transform: translateY(100%);
}

.bg-footer.hidden .item-top-footer {
    margin: 0px;
}

/*.icon-top-footer {*/
/*    max-width: 90px;*/
/*    max-height: 90px;*/
/*    position: relative;*/
/*    background: url("../../images/theme19/icon/bg-ring.png") no-repeat center;*/
/*    background-size: 100% 100%;*/
/*    display: block;*/
/*}*/

.title-top-footer {
    width: 100%;
    height: auto;
    font-weight: 900;
    text-align: center;
    margin: 0 auto;
    font-size: 0.9rem;
    color: var(--txt-fourth);
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    letter-spacing: 0px;
    z-index: 9;
    line-height: 16px;
    display: block;
    position: static;
    transform: translateY(-.625rem);
}

.top-footer {
    padding: 0 .5rem .5rem .5rem;
}
.top-footer .row{
    max-height: 72px;
}

.title-down-footer {
    width: 100%;
    height: auto;
    text-align: center;
    margin: 0 auto;
    font-size: 1.1rem;
    text-transform: uppercase;
    font-weight: bold;
    background: linear-gradient(45deg, #fdd0ae, #fdb56f);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
}

.item-down-footer {
    padding: 10px 0;
    background: url("../../images/theme19/footer/bg.jpg") no-repeat center;
    background-size: 100% 100%;
    display: block;
}

.active-down-footer,
.item-down-footer:hover {
    padding: 10px 0;
    background: url("../../images/theme19/footer/bgactive.jpg") no-repeat center;
    background-size: 100% 100%;
    display: block;
}

.main-wrapper {
    width: 100%;
}

.lobbys {
    height: calc(100vh - 360px);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 10px;
    position: relative;
}
.bgmenu-drops {
    background: url("../../images/theme19/header/bg-dropdown.png") no-repeat center;
    background-size: 100% 100%;
    /* padding: 5px 0; */
    margin: 0 .5rem;
}

.btn-dropd {
    background: none;
}

.bgmenu-drops ul li {
    width: 100%;
    height: auto;
    text-align: center;
    margin: 0 auto;
    display: block;
}

.bgmenu-drops.fade-in {
    animation: fadeInColorShift 0.3s ease-out forwards;
}

.bgmenu-drops.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

.dropdowns-menu {
    position: relative;
}

.bgmenu-drops {
    animation: none;
    position: absolute;
    top: 0;
    right: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.bgmenu-drops.active {
    display: block;
}

.bgtips {
    background: url("../../images/theme19/modal/tips/bg.png") no-repeat center !important;
    background-size: 100% 100% !important;
}

.bglogin {
    background: var(--second) !important;
}

.btns-close {
    background: none;
}

.modal-title {
    color: #ffffff;
    vertical-align: middle;
}

.icon-tips img {
    margin-right: 15px;
}

.title-tips {
    text-align: left;
    font-size: 1.2rem;
    color: #ffd800;
    line-height: 22px;
}

.cure,
.cure span {
    text-align: left;
    font-size: 0.9rem;
    font-weight: bold;
    color: #ffd800;
    line-height: 16px;
}

.header-bet-v p {
    width: 100%;
    height: auto;
    text-align: center;
    margin: 0 auto;
    font-size: 1.6rem;
    color: #ffd800;
    font-weight: bold;
    display: block;
}

.icon-block p {
    text-align: center;
    margin: 0 auto;
    font-size: 0.9rem;
    font-weight: bold;
    color: #ffd800;
    line-height: 16px;
}

.bg-tips-tota-balance,
.bg-tips-balance {
    flex: 1;
}

.bg-block p {
    width: 100%;
    height: auto;
    text-align: center;
    margin: 0 auto;
    font-size: 1.2rem;
    color: #ffd800;
    font-weight: bold;
    line-height: 20px;
    display: block;
}

.contain-footer-tips p i img {
    max-width: 16px;
    vertical-align: middle;
    margin-right: 5px;
}

.contain-footer-tips p,
.contain-footer-tips p span {
    text-align: left;
    font-size: 1.0rem;
    color: #ffffff;
    line-height: 22px;
}

.contain-footer-tips {
    padding: 0 30px;
    padding-bottom: 50px;
}

.header-tips-modal {
    padding: 0px 30px;
    height: 50px;
    border-bottom: none;
}

.icon-nexts img {
    width: auto;
    height: 20px;
}

.bg-block,
.center-v {
    flex: 1;
}

.icon-block {
    padding: 10px 0;
    text-align: center;
    margin: 0 auto;
    display: block;
}

.items-tips {
    padding: 10px 0;
}

.modal-dialog {
    max-width: 640px !important;
    height: auto;
}

.tips-container {
    padding: 0 14px;
}

.bg-tips-tota-balance {
    padding-left: 20px;
}

.icon-tips img {
    width: auto;
    max-width: 40px;
}

.modal-tips {
    padding: 5px 0 !important;
}

.contain-footer-tips p {
    padding: 5px 0;
}

.modal-content,
.btns-contact {
    background: none;
}

.btn-group button {
    margin: 0 10px;
}

.btn-group button img {
    width: auto;
    max-width: 50px;
    left: 1rem;
    position: relative;
    /* top: -.5rem; */
}

.container-invite {
    width: 100%;
    max-width: 500px;
    height: auto;
    text-align: center;
    margin: 0 auto;
    display: block;
}

.bginvite-01 {
    background-image: linear-gradient(#fffbf3, #fef0c9);
    border: 1px solid #f3a176;
    border-radius: 20px;
    position: relative;
    padding: 20px;
}

.bginvite-02 {
    border: 1px solid #f3a176;
    border-radius: 20px;
    padding: 20px;
}

.text-invite-01 {
    font-size: 1.2rem;
    color: #ff4200;
    text-align: center;
    margin: 0 auto;
    display: block;
}

h1.bonus-invite {
    font-size: 4.0rem;
    color: #ff4200;
    text-align: center;
    font-weight: 900;
    margin: 0 auto;
    display: block;
}

.bonus-invite span {
    font-size: 2.0rem;
    color: #ff4200;
}

.countdown span {
    font-size: 1.2rem;
    color: #ffffff;
    font-weight: 900;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    text-shadow: 2px 2px 0px #0009ff;
    letter-spacing: 0px;
}

.item-invite {
    position: absolute;
    top: -50px;
    right: -50px;
}

.btn-block {
    width: 100%;
    height: auto;
}

.btn-invite-block {
    background: url("../../images/theme19/modal/invite/bginvite.png") no-repeat center;
    background-size: 100% 100%;
    margin: 10px auto;
    font-size: 1.2rem;
    color: #ffffff;
    font-weight: 900;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    text-shadow: 2px 2px 0px #376005;
    letter-spacing: 0px;
}

.bgcontainer-invite {
    background: url("../../images/theme19/modal/invite/bg-01.png") no-repeat center;
    background-size: 100% 100%;
    margin: 10px auto;
}

.btn-collet {
    padding: .3rem 2rem;
    font-size: 1.2rem;
    margin: 0 .2em;
    color: #ffffff;
    font-weight: 900;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    text-shadow: 2px 2px 0px #376005;
    letter-spacing: 0px;
    background: url("../../images/theme19/modal/invite/btncollet.png") no-repeat center;
    background-size: 100% 100%;
}

.bgcollet {
    background: url("../../images/theme19/modal/invite/bg-input-01.png") no-repeat center;
    background-size: 100% 100%;
    margin: 5px auto;
}

.bgcollet p,
.bgcopy p {
    padding: 10px 20px;
}

.bgcollet p span,
.bgcopy p span {
    padding: 10px 5px;
    font-size: 1.2rem;
    color: #fff500
}

.item-qr {
    margin-right: 30px;
}

.bgcopy {
    background: url("../../images/theme19/modal/invite/bg-input-02.png") no-repeat center;
    background-size: 100% 100%;
    margin: 5px auto;
}

.btn-copy {
    padding: .3rem 2.2rem;
    font-size: 1.2rem;
    margin: 0 .2em;
    color: #ffffff;
    font-weight: 900;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    text-shadow: 2px 2px 0px #376005;
    letter-spacing: 0px;
    background: url("../../images/theme19/modal/invite/btncopy.png") no-repeat center;
    background-size: 100% 100%;
}

.bg-colelet {
    background: url("../../images/theme19/modal/invite/bg-02.png") no-repeat center;
    background-size: 100% 90%;
    margin: -.5rem 0 .5rem 0;
    padding: .5rem;
}

.bginvitefriend {
    background: url("../../images/theme19/modal/invite/bg.png") no-repeat center;
    background-size: 100% 100%;
    margin: 5px auto;
}

.bg-footerinvite {
    background: url("../../images/theme19/modal/invite/bgfooter.png") no-repeat center;
    background-size: 100% 100%;
    margin: 5px auto;
    /* padding: 10px 10px */
}

.bg-footerinvite ul {
    width: 100%;
    height: auto;
    text-align: left;
    display: block;
}

.bg-footerinvite ul li {
    display: inline-block;
    padding: 10px 10px;
}

.btn-footer-invite {
    font-size: 1.3rem;
    color: #9b0301;
    padding: 15px 30px;
    background: url("../../images/theme19/modal/invite/btninvite.png") no-repeat center;
    background-size: 100% 100%;
}

.btn-footer-invitelist {
    font-size: 1.3rem;
    color: #9b0301;
    padding: 15px 30px;
    background: url("../../images/theme19/modal/invite/invitationlist.png") no-repeat center;
    background-size: 100% 100%;
}

.btn-profile {
    background: none;
    margin: 0 .5rem;
}

.modal-header {
    border-bottom: none;
    vertical-align: middle;
}

.box-name-profile {
    padding: 0 10px;
    background: #2c2b7dc9;
    border: 1px solid #8190ff;
    border-radius: 20px;
    width: 200px;
    height: auto;
}

.box-name-profile span {
    font-size: 0.9rem;
    color: #ffffff;
    flex: 1;
}

button.copy {
    flex: 1;
    background: none;
    text-align: right;
}

.info-palyer {
    padding-left: 15px;
}

.btn-allgames {
    width: 100%;
    height: auto;
    max-width: 400px;
    margin: 0 auto;
    padding: 10px 10px;
    background: #221f6a;
    border-radius: 20px;
    display: block;
}

.items-games span.games-name {
    font-size: 1.0rem;
    color: #ffffff;
    padding-left: 10px;
    vertical-align: middle;
    font-weight: bold;
}

.bg-pl-information {
    background: #3a37ac;
    border-radius: 20px;
    padding: 15px 0;
    position: relative;
    overflow: hidden;
}

.player-informations {
    padding: 20px;
}

p.title-pl-information {
    font-size: 1.2rem;
    color: #c5c5c5;
}

p.ammount-pl-information {
    font-size: 1.4rem;
    color: #ffffff;
    font-weight: bold;
}

.items-games img {
    width: 100%;
    height: auto;
    max-width: 40px;
}

.icon-pl-information {
    position: absolute;
    bottom: -20px;
    left: -20px;
}

.bg-player-infor {
    background: url("../../images/theme19/modal/profile/bgplayerinformation.png") no-repeat center;
    background-size: 100% 100%;
    border: none;
}

.contain-player-information {
    padding: 12px;
    background: url("../../images/theme19/modal/profile/bg-02.png") no-repeat center;
    background-size: 100% 100%;
}

.bg-games-modal {
    text-align: left;
    background: #373390;
    padding: 7px;
    border: 3px solid #373390;
    border-radius: 20px;
}

.modal-items {
    text-align: left;
    font-size: 1.3rem;
    font-weight: bold;
    color: #ffffff;
}

.games-actions {
    border: 3px solid #ffe300;
}

.modal-items span {
    margin-right: 10px;
}

ul.slider-menu li {
    text-align: center;
    margin: 0 auto;
}

.icon-down-footer img {
    width: 3.5rem;
    height: auto;
    text-align: center;
    margin: 0 auto;
    display: block;
}

.games-thumbnail {
    width: 100%;
    height: auto;
    text-align: center;
    margin: 0 auto;
    display: block;
}

.items-games-lobby img {
    width: 100%;
    height: auto;
    border-radius: 20px;
}

.title-games-lobby {
    width: 100%;
    height: auto;
    text-align: center;
    margin: 0 auto;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 15px 0;
}

.title-games-lobby h1 {
    width: 100%;
    height: auto;
    font-size: 1.4rem;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    line-height: 24px;
    text-transform: uppercase;
    text-shadow: 2px 2px 0px #212529;
    letter-spacing: 0px;
    margin: 0 auto;
    display: block;
}

.header-bet-v {
    border-bottom: 1px solid #5957a4;
}

.btn-dropd {
    padding: 5px 7px;
}

.icon-banks {
    width: 20px;
    height: 20px;
    background: url("../../images/theme19/modal/banks/banks.png") no-repeat center;
    background-size: 100% 100%;
    display: inline-block;
}

.modal-title i {
    vertical-align: middle;
    margin-right: 5px;
}

.bg-banks {
    background: url("../../images/theme19/modal/tips/bg.png") no-repeat center;
    background-size: 100% 100%;
}

.langs {
    width: 100%;
    max-width: 20px;
    height: auto;
    position: absolute;
    right: -2px;
    bottom: 0;
    overflow: hidden;
    z-index: 3;
}

.langs img {
    width: 100%;
    border: 1px solid #ffffff;
    border-radius: 2px;
}

.right-modal ul li {
    display: inline-block;
    padding: 0 10px;
}

.btn-b {
    background: none;
}

.icon-bank {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    display: inline-block;
    margin-right: 5px;
}

.icon-deposits {
    background: url("../../images/theme19/modal/banks/deposit.png") center no-repeat;
    background-size: 100% 100%;
}

.header-deposits p {
    font-size: 1.1rem;
    font-weight: bold;
    color: #5cff4b;
    text-align: left;
    padding: 5px 10px;
    vertical-align: middle;
    display: block;
}

.title-balances,
p.locked {
    font-size: 1.1rem;
    color: #b0acf6;
    text-align: left;
    padding: 0;
    vertical-align: middle;
    display: block;
}

.cash-deposits {
    text-align: left;
    display: block;
    padding-bottom: 10px;
    border-bottom: 1px solid #b0acf6;
}

.cash-deposits span {
    font-size: 1.2rem;
    color: #5cff4b;
    font-weight: bold;
    text-align: left;
    padding: 0;
    display: inline-block;
}

.cash-locked {
    text-align: left;
    display: block;
}

.cash-locked span {
    font-size: 1.2rem;
    color: #b0acf6;
    font-weight: bold;
    text-align: left;
    padding: 0;
    display: inline-block;
}

.box-balances {
    background: #3b38ac;
    border-radius: 20px;
    padding: 10px;
    position: relative;
    display: block;
}

.Question-mark {
    font-size: 1.2rem;
    color: #b0acf6;
    border: 1px solid #b0acf6;
    border-radius: 50%;
    padding: 0 10px;
    position: absolute;
    vertical-align: middle;
    right: 20px;
    bottom: 20px;
}

.label-form {
    width: 100%;
    height: auto;
    font-size: 1.2rem;
    color: #ededf6;
    text-align: left;
    display: block;
}

.pwd-Reset {
    width: 100%;
    height: auto;
    text-align: right;
    padding: 5px 0;
    display: block;
}

.pwd-Reset a {
    text-align: right;
    font-size: 1.1rem;
    color: #b0acf6;
}

.boxbankswithdrwa {
    min-height: 160px;
}

.btn-withdraw {
    background: none;
    border: none;
    font-family: 'Arial', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    -webkit-text-stroke: 1px #1e90ff;
    text-stroke: 1px #1e90ff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    padding: 10px 40px;
    cursor: pointer;
    outline: none;
    background: url("../../images/theme19/modal/banks/btn.png") no-repeat center;
    background-size: 100% 100%;
}

.btn-withdraw:hover {
    color: #f0f0f0;
    -webkit-text-stroke: 1px #00b7eb;
    text-stroke: 1px #00b7eb;
}

.btn-deposit {
    background: none;
    border: none;
    font-family: 'Arial', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    -webkit-text-stroke: 1px #397502;
    text-stroke: 1px #397502;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    padding: 10px 40px;
    cursor: pointer;
    outline: none;
    background: url("../../images/theme19/modal/banks/btn-deposit.png") no-repeat center;
    background-size: 100% 100%;
}

.pr-thumbnail img {
    width: 7rem;
}

.custom-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 2px solid #F1A300;
    background-color: transparent;
    position: relative;
    appearance: none;
    cursor: pointer;
}

.custom-checkbox:checked {
    background-color: #F1A300;
    border-color: #F1A300;
}

.custom-checkbox:checked::before {
    content: "\2713";
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.img-widget {
    position: absolute;
    left: -1.5rem;
    z-index: 3;
    padding: .5rem;
    top: 1rem;
}

.overlay-profile {
    width: 60px;
    height: 31px;
    background: #00000073;
    position: absolute;
    top: 28px;
    border-radius: 0 0 320px 300px;
    overflow: hidden;
    text-align: center;
    align-items: center;
    display: flex;
    z-index: 2;
}

.button-btn {
    margin-top: 6rem;
}

.button-btn button {
    text-align: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.button-btn button span {
    position: absolute;
    color: #fff;
    font-weight: 600;
}

.containerCenter {
    display: inline-flex;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.profile-thumbnail-1 {
    width: 7rem !important;
    height: 7rem;
    background-color: #181546;
}

.frame-option,
.prortrait-option,
#avatar-container {
    overflow: hidden;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
    margin: .8rem 0;
}

.frame-container .profile-thumbnail-1 {
    flex: 0 0 calc(33.333% - 10px) !important;
}

.frame-option .profile-thumbnail-1,
.prortrait-option .profile-thumbnail-1,
#avatar-container img {
    flex: 0 0 calc(25% - 10px);
    box-sizing: border-box;
    width: 1rem;
    border-radius: 100%;
}

.profile-thumbnail-1.avatar-option.selected {
    border: 2px solid #0d6efd !important;
    box-shadow: 0 0 8px rgba(13, 110, 253, 0.4);
}

.profile-thumbnail-1 img {
    width: 100%;
}

.frame-container .profile-thumbnail-1 img {
    padding: .8rem !important;
}

@media (min-width: 640px) {
    .fullsize{
        top: 0px !important;
    }
    .fullsize .lobbys.jp-sd-none {
        height: calc(100vh - 256px) !important;
        padding: 0px;
    }
    .fullsize .lobbys:not(.jp-sd-none) {
        height: calc(100vh - 433px) !important;
    }
}

@media (max-width: 640px) {
    .menu-provider::-webkit-scrollbar {
        display: none;
    }
    .profile-thumbnail-1 {
        width: unset;
        height: unset;
    }

    .fullsize {
        width: 100%;
        height: auto;
        text-align: center;
        margin: 0 auto;
        overflow: hidden;
        position: absolute;
        bottom: 0;
        top: 0;
        display: block;
    }

    body div.sweet-alert {
        margin-left: -10.7rem !important;
        left: 13rem !important;
        width: 80% !important;
    }

    .section {
        width: 100%;
        height: auto;
        text-align: center;
        /* margin: 5px auto;
        padding: 5px 0; */
        display: block;
    }

    .profile-thumbnail {
        width: 100%;
        max-width: 60px;
        height: auto;
        max-height: 60px;
        overflow: hidden;
    }

    .profile-thumbnail img {
        /* width: 100%; */
        max-width: 60px;
        height: auto;
    }

    .profile-fram {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        max-width: 60px;
        height: auto;
        max-height: 60px;
    }

    .info-pro-header {
        /* padding-left: 10px; */
        margin: 0 0 .5rem 0;
    }

    .profile-name {
        font-size: 0.8rem;
        color: #ffffff;
        font-weight: bold;
    }

    .pr-thumbnail img {
        max-width: 90px;
    }

    .id-profile span {
        font-size: 0.6rem;
        color: #ffffff;
        font-weight: bold;
        padding: 0 5px;
    }

    .btn-ammount img {
        max-width: 90px;
        height: 1.8rem;
        /* margin-top: .4rem; */
    }

    .btn-right-header button img,
    .btn-right-header a img {
        max-width: 30px;
    }

    .btn.btn-submit,
    .btn.center-submit {
        width: 100%;
    }

    .id-profile span img {
        max-width: 15px;
    }

    .title-jackpot img {
        width: auto;
        max-height: 20px;
    }

    .jackpot-t {
        width: 100%;
        height: auto;
        text-align: center;
        margin: 0 auto;
        font-size: 1rem;
        font-weight: 900;
        color: #ffffff;
        line-height: 20px;
        display: block;
    }
    p.title-jackpot {
        line-height: 20px;
    }

    .item-slide-promo img {
        width: 100%;
        height: auto;
        min-height: 6rem;
        border-radius: 12px;
    }

    .box-events div img {
        width: 100%;
    }
    .top-footer {
        padding: 0;
    }

    .title-top-footer {
        font-size: 0.75rem;
        line-height: 9px;
    }

    .icon-down-footer img {
        width: auto;
        height: auto;
        max-width: 50px;
        text-align: center;
        margin: 0 auto;
        display: block;
    }

    .title-down-footer {
        width: 100%;
        height: auto;
        text-align: center;
        margin: 0 auto;
        font-size: 0.8rem;
        text-transform: uppercase;
        font-weight: bold;
        background: linear-gradient(45deg, #fdd0ae, #fdb56f);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        display: block;
        padding-top: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .box-name-profile {
        padding: 0 5px;
        background: #2c2b7dc9;
        border: 1px solid #8190ff;
        border-radius: 20px;
        width: 155px;
        height: auto;
    }

    .icon-lobby img {
        max-width: 50px;
        height: auto;
    }

    .btn-allgames {
        width: 100%;
        height: auto;
        max-width: 300px;
        margin: 0 auto;
        padding: 5px 5px;
        background: #221f6a;
        border-radius: 10px;
        display: block;
    }

    .bg-pl-information {
        background: #3a37ac;
        border-radius: 5px;
        padding: 5px 0;
        position: relative;
        overflow: hidden;
    }

    p.title-pl-information {
        font-size: 0.8rem;
        color: #c5c5c5;
        white-space: nowrap;
        padding: 0 5px;
        z-index: 1;
    }

    p.ammount-pl-information {
        font-size: 1.0rem;
        color: #ffffff;
        font-weight: bold;
    }

    .icon-pl-information {
        position: absolute;
        bottom: -37px;
        left: -20px;
        z-index: 0;
    }

    .player-informations {
        padding: 10px;
    }

    .btns-close img {
        max-width: 15px;
    }

    .fs-5 {
        font-size: 0.9rem !important;
    }

    .bg-games-modal {
        text-align: left;
        background: #373390;
        padding: 5px;
        border: 3px solid #373390;
        border-radius: 10px;
    }

    .modal-items span img {
        max-width: 40px;
        height: auto;
    }

    .modal-items {
        text-align: left;
        font-size: 1.0rem;
        font-weight: bold;
        color: #ffffff;
    }

    .title-tips {
        text-align: left;
        font-size: 0.9rem;
        color: #ffd800;
        line-height: 22px;
    }

    .tipsbalance,
    .bg-bet-v {
        width: 100%;
        height: auto;
        text-align: center;
        margin: 5px auto;
        padding: 10px 10px;
        background: #373491;
        border-radius: 1px solid #353198;
        border-radius: 10px;
        display: block;
    }

    .header-bet-v p {
        width: 100%;
        height: auto;
        text-align: center;
        margin: 0 auto;
        font-size: 1.2rem;
        color: #ffd800;
        font-weight: bold;
        display: block;
    }

    .icon-block img {
        max-width: 40px;
        height: auto;
    }

    .icon-nexts img {
        width: auto;
        height: 15px;
    }

    .credit-container h4 {
        font-size: .8rem !important;
        /* margin-top: .2rem !important; */
    }

    .bg-block p {
        width: 100%;
        height: auto;
        text-align: center;
        margin: 0 auto;
        font-size: 0.8rem;
        color: #ffd800;
        font-weight: bold;
        line-height: 20px;
        display: block;
    }

    .contain-footer-tips p,
    .contain-footer-tips p span {
        text-align: left;
        font-size: 0.7rem;
        color: #ffffff;
        line-height: 18px;
    }

    .info-tips p {
        line-height: 18px;
    }

    .contain-footer-tips {
        padding: 0 20px;
        padding-bottom: 10px;
    }

    .header-bet-v {
        border-bottom: 1px solid #5957a4;
    }

    .modal-tips {
        padding: 0px 0 !important;
    }

    .bginvitefriend {
        width: 100%;
        background: url("../../images/theme19/modal/invite/bg.png") no-repeat center;
        background-size: 100% 100%;
        margin: 5px auto;
        padding: 10px 0;
    }

    .header-invite img {
        width: 100%;
        max-width: 200px;
    }

    .container-invite {
        width: 100%;
        max-width: 260px;
        height: auto;
        text-align: center;
        margin: 0 auto;
        display: block;
    }

    .text-invite-01 {
        font-size: 0.7rem !important;
        color: #ff4200;
        text-align: center;
        margin: 0 auto;
        display: block;
    }

    h1.bonus-invite {
        font-size: 2.0rem;
        color: #ff4200;
        text-align: center;
        font-weight: 900;
        margin: 0 auto;
        display: block;
    }

    .bonus-invite span {
        font-size: 1.5rem;
        color: #ff4200;
    }

    .countdown span {
        font-size: 0.8rem;
        color: #ffffff;
        font-weight: 900;
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease;
        text-shadow: 2px 2px 0px #0009ff;
        letter-spacing: 0px;
    }

    .bginvite-01 {
        background-image: linear-gradient(#fffbf3, #fef0c9);
        border: 1px solid #f3a176;
        border-radius: 5px;
        position: relative;
        padding: 5px;
    }

    .bginvite-02 {
        border: 1px solid #f3a176;
        border-radius: 5px;
        padding: 10px;
    }

    .item-invite img {
        max-width: 80px;
    }

    .item-invite {
        position: absolute;
        top: -40px;
        right: -40px;
    }

    .btn-invite-block i img {
        max-width: 25px;
        margin-right: 5px;
    }

    .btn-invite {}

    .btn-invite-block {
        background: url("../../images/theme19/modal/invite/bginvite.png") no-repeat center;
        background-size: 100% 100%;
        margin: 10px auto;
        font-size: 1.0rem;
        color: #ffffff;
        font-weight: 900;
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease;
        text-shadow: 2px 2px 0px #376005;
        letter-spacing: 0px;
    }

    .bgcontainer-invite {
        background: url("../../images/theme19/modal/invite/bg-01.png") no-repeat center;
        background-size: 100% 100%;
        padding: 10px 0;
        margin: 5px auto;
    }

    .item-qr img {
        max-width: 60px;
        height: auto;
    }

    .bgcollet p span,
    .bgcopy p span {
        padding: 10px 5px;
        font-size: 0.7rem;
        color: #fff500;
        white-space: nowrap;
    }

    .item-qr {
        margin-right: 10px;
    }

    .bgcollet p,
    .bgcopy p {
        padding: 10px 10px;
    }

    .btn-collet {
        padding: 8px 15px;
        font-size: 1.2rem;
        color: #ffffff;
        font-weight: 900;
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease;
        text-shadow: 2px 2px 0px #376005;
        letter-spacing: 0px;
        background: url("../../images/theme19/modal/invite/btncollet.png") no-repeat center;
        background-size: 100% 100%;
    }

    .bg-colelet {
        background: url("../../images/theme19/modal/invite/bg-02.png") no-repeat center;
        background-size: 100% 100%;
        margin: 10px auto;
        padding: 10px 10px;
    }

    .item-qr {
        display: none;
    }

    .btn-footer-invite {
        font-size: 0.9rem;
        color: #9b0301;
        padding: 10px 20px;
        background: url("../../images/theme19/modal/invite/btninvite.png") no-repeat center;
        background-size: 100% 100%;
    }

    .btn-footer-invitelist {
        font-size: 0.9rem;
        color: #9b0301;
        padding: 10px 25px;
        background: url("../../images/theme19/modal/invite/invitationlist.png") no-repeat center;
        background-size: 100% 100%;
    }

    .bg-footerinvite {
        background: url("../../images/theme19/modal/invite/bgfooter.png") no-repeat center;
        background-size: 100% 100%;
        margin: 5px auto;
        padding: 3px 10px;
    }

    .icon-profit img {
        width: auto;
        /* height: 50px; */
    }

    .modal-header {
        height: 50px;
        width: 100%;
    }

    /*--------------------*/
    .main-wrapper {
        /* min-height: 620px; */
        position: relative;
    }

    .lobbys {
        /* height: calc(70vh); */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    .jp-sd-none {
        height: calc(100vh - 132px);
        padding: 0;
    }

    .bg-footer {
        /* height: 9.7rem; */
    }

    .bg-jackpot {
        background-size: 100% 100%;
    }

    .items-jackport .col {
        margin: .1rem 0;
    }

    .bgmenu-drops {
        padding: 5px 0;
        margin: 0 .1rem;
    }

    .bgmenu-drops ul li {
        margin: .2rem 0;
    }

    .btn-menu .position-absolute.top-0 {
        top: -.5rem !important;
    }
}

.lobbys .game-item {
    animation: fadeInColorShift 1s ease-out forwards;
}

.modal .modal-body {}

.modal-invitation .modal-content {
    background: unset;
}

.modal .modal-content {
    border: unset;
    /* margin: .5rem; */
}

.modal .modal-header {
    border-bottom: unset;
}

.modal space {
    margin-bottom: 4rem;
}

.btn-goto {
    color: #fff;
    border: 1px solid #fff;
    padding: 0.5rem 1rem;
    border-radius: .5rem;
}

.btn-goto:hover,
.btn-goto:focus {
    border: 1px solid var(--color-red)
}
#login_now .modal-content,
#register_now .modal-content{
    padding: 24px 20px 32px;
    border-radius: 1.25rem;
}
#register_now .modal-header,
#login_now .modal-header{
    padding: 0 0 24px 0;
    border-bottom: 1px solid #666;
}
#register_now .modal-header .modal-title,
#login_now .modal-header .modal-title{
    font-size: 1rem !important;
}
#register_now .modal-body,
#login_now .modal-body {
    padding: 0;
}
#register_now #register label,
#login_now #login_form label{
    display: block;
    text-align: start;
    font-weight: 700;
    margin-bottom: .5rem;
    color: var(--txt-white);
}
#login_now input::placeholder,
#register_now input::placeholder{
    color: var(--txt-white);
}
#login_now i,
#register_now i{
    top: 72% !important;
}
#register_now #register img{
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(25%);
}
#register_now .select-arrow {
    position: absolute;
    right: 15px;
    top: 72%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.2s ease-in-out;
    pointer-events: none;
    z-index: 5;
}
#register_now .select-arrow.active {
    transform: translateY(-50%) rotate(180deg);
}

.err_div {
    color: white;
}

form .fas,
form .fa {
    color: var(--txt-white);
}

.regi-code {
    color: #fff !important;
    margin-left: 1rem;
    background-image: url("../../images/theme19/footer/bg.jpg");
    background-size: 100% 100%;
    font-weight: 600 !important;
}
.btn.btn-submit,
button[type="submit"] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    background: linear-gradient(90deg, #E93CFF 0%, #FDC892 100%);
    border: 4px solid rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    font-weight: 700;
}

.form-control{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 5px 20px 5px 14px;
    height: 45px;
    background: #5D2DB9;
    border-radius: 10px;
    border: none;
    color: var(--txt-white);
}
.form-control:focus{
    background: #8D5DE9;
    color: var(--txt-white);
}

#register_now .footer-login {
    padding: 0 0 2rem 0;
}

#editprofileplayer .modal-body,
#fixbankModal .modal-body,
#withdralModal .modal-body,
#depositModal .modal-body,
#register_now .modal-body {
    max-height: 60vh;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-bottom: 1rem;
}

#editprofileplayer .modal-body::-webkit-scrollbar,
#fixbankModal .modal-body::-webkit-scrollbar,
#withdralModal .modal-body::-webkit-scrollbar,
#depositModal .modal-body::-webkit-scrollbar,
#register_now .modal-body::-webkit-scrollbar {
    display: none;
}

@media (max-width: 640px) {
    .modal space {
        margin-bottom: 2rem;
    }
}

.icon-head {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: center;
}

.icon-head img {
    width: 100%;
    height: 3rem;
    display: block;
}

.icon-head span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    pointer-events: none;
    font-size: 1rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 90%;
}


@media (max-width: 640px) {
    .right-header .btns-close {
        position: relative;
        left: .5rem;
    }

    .header-cashier {
        margin: .8rem 0;
    }

    .icon-profit span {
        font-size: .9rem;
    }

    .right-header .btns-close img {
        width: auto;
        max-width: 3rem;
        left: 0;
    }
}

/* language  */
.language-dropdown.animation,
.language-dropdown-v2.animation,
.setting-dropdown.animation,
.menu-dropdown.animation {
    animation: fadeInMultiple 0.6s ease-out both;
}

.language-dropdown,
.menu-dropdown {
    position: absolute;
    top: 60px;
    right: 10px;
    background: var(--hover);
    border-radius: 6px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    width: 160px;
}

.menu-dropdown {
    width: 200px;
}

.language-dropdown ul,
.menu-dropdown ul {
    margin: 0;
    padding: 0;
    max-height: calc(430px);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.language-dropdown a,
.menu-dropdown a {
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #fff;
    text-transform: capitalize;
    text-align: start;
}

.language-dropdown a.active,
.language-dropdown a:hover,
.menu-dropdown a.active,
.menu-dropdown a:hover {
    background: url("../../images/theme19/footer/bgactive.jpg");
    background-size: 100% 100%;
    border-radius: 6px;
}

.language-dropdown img {
    width: 20px;
    height: 14px;
    margin-right: 10px;
}

/* language modal (theme19 sheet) */
.language-modal .modal-dialog.language-modal__dialog {
    max-width: 420px;
    width: calc(100% - 2rem);
    margin: 1rem auto;
}

.language-modal .language-modal__content {
    background: #fff5e1;
    border: none;
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.language-modal__handle {
    width: 44px;
    height: 5px;
    margin: 12px auto 8px;
    background: #e8a05a;
    border-radius: 4px;
}

.language-modal__body {
    padding: 0 0 12px;
}

.language-modal__list {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 400px;
    overflow: auto;
}

.language-modal__item {
    margin: 0;
}

.language-modal__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    text-decoration: none;
    color: #3d3d3d;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    transition: background 0.15s ease;
}

.language-modal__item:first-child .language-modal__row {
    border-top: none;
}

.language-modal__row:hover {
    background: rgba(255, 255, 255, 0.45);
}

.language-modal__flag {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.language-modal__flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.language-modal__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.language-modal__primary {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    color: #2c2c2c;
}

.language-modal__secondary {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.3;
    color: #888;
    margin-top: 2px;
}

.language-modal__radio {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #d4c4b0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.language-modal__row.active .language-modal__radio {
    border-color: #8b5a2b;
    border-width: 3px;
}

.language-modal__radio-dot {
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #8b5a2b;
    opacity: 0;
    transition: width 0.15s ease, height 0.15s ease, opacity 0.15s ease;
}

.language-modal__row.active .language-modal__radio-dot {
    width: 10px;
    height: 10px;
    opacity: 1;
}

@media (max-width: 576px) {
    .language-modal.modal.show {
        display: flex !important;
        align-items: flex-end;
    }

    .language-modal .modal-dialog.language-modal__dialog {
        margin: 0 auto;
        max-width: 100%;
        width: 100%;
    }

    .language-modal .language-modal__content {
        border-radius: 18px 18px 0 0;
    }
}

.menu-dropdown img {
    width: 28px;
    height: 28px;
    margin-right: 10px;
}

/* end language  */

.credit-container {
    position: relative;
}

.credit-container img {
    display: block;
    width: 100%;
}

.credit-container h4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    color: white;
    font-size: 28px;
    margin-left: -1rem;
    text-shadow: 1px 1px 2px black;
    overflow: hidden;
    white-space: nowrap;
}

.item-slide-promo-img {
    padding: 0px 10px;
}

/* games container */
.games-container .label-game {
    color: var(--text-2);
    margin: 1rem 0 0 0 !important;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);
}

.games-container .label-game:first-child {
    margin: 0 !important;
}

#messageModal .modal-content {
    background: #fff;
}

#messageModal .modal-content .pop_msg_bgBtn {
    background: #007bff;
}

/* all page table  */
.table,
.center-table {
    width: 100%;
    overflow-x: auto;
    margin-top: 20px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: .5rem;
}

.table table,
.center-table table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
}

.table thead,
.center-table thead {
    background: #007bff;
    color: white;
}

.table th,
.table td,
.center-table th,
.center-table td {
    padding: 12px;
    border-bottom: 1px solid #ddd;
    text-align: center;
    white-space: nowrap;
    color: #000;
}

.table th,
.center-table th {
    font-weight: bold;
}

.table tbody tr:nth-child(odd),
.center-table tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

.table tbody td[colspan="6"],
.center-table tbody td[colspan="6"] {
    text-align: center;
    color: #999;
    font-size: 14px;
    padding: 15px;
}

@media (max-width: 768px) {

    .table table,
    .center-table table {
        font-size: 14px;
    }

    .table th,
    .table td,
    .center-table th,
    .center-table td {
        padding: 8px;
    }
}

@media (max-width: 600px) {

    .table,
    .center-table {
        overflow-x: auto;
    }

    .table table,
    .center-table table {
        /* display: block; */
        width: 100%;
        white-space: nowrap;
    }

    .table th,
    .table td,
    .center-table th,
    .center-table td {
        font-size: 12px;
        padding: 6px;
    }
}

/* end all page table  */
.promotion-container .promotion-container-title {
    text-align: start;
}

.promotion-container .promotion-container-title span,
.promotion-container .promotion-container-date span {
    color: var(--text-2) !important;
}

/* center info  */
.contain-player-information table {
    color: #fff;
    width: 100%;
}

.contain-player-information table tr td:first-child {
    text-align: start;
}

@media (max-width: 640px) {
    .contain-player-information table tr td:last-child #ref_link {
        max-width: 40vw;
    }
}

.contain-player-information table tr td:last-child {
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* end center info  */

/* Contact us*/
#contactUsModal{
    color: var(--txt-white);
}
#contactUsModal .modal-body{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 24px;
    gap: 20px;
    background: var(--second);
    border-radius: 20px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}
#contactUsModal .modal-body .menu-contact{
    width: 100%;
    height: 52px;
    border-bottom: 1px solid #666666;
    position: relative;
}
#contactUsModal .modal-body .menu-contact div:not(.active-animation){
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    cursor: pointer;
}
#contactUsModal .modal-body .menu-contact .active-animation{
    position: absolute;
    bottom: 0;
    width: 50%;
    transform: translateY(50%);
    height: 3px;
    background: var(--third);
    transition: left 0.3s ease;
}
#contactUsModal .modal-header{
    display: flex;
    justify-content: end;
    padding: 0;
}
#contactUsModal .modal-header .close{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12.0052px;
    gap: 17.15px;
    width: 40px;
    height: 40px;
    background: #6144FF;
    box-shadow: inset 0px 4px 4px rgba(255, 255, 255, 0.25);
    border-radius: 171.503px;
    flex: none;
    order: 0;
    flex-grow: 0;

}
#contactUsModal .modal-body .available{
    border-top: 1px solid #666666;
    padding: 1.25rem 0 1.75rem;
    width: 100%;
}
#contactUsModal .modal-body .available div{
    background: #2E3C55;
    border-radius: 24px;
    width: fit-content;
}
#contactUsModal .modal-body .available div span{
    color: var(--txt-third) !important;
}
#contactUsModal .modal-body .available div .dot-live{
    width: 6px;
    height: 6px;
    background: var(--bg-third);
    margin-left: .5rem;
    border-radius: 1rem;
}

/*.modal.modal-slide-up {*/
/*    top: auto;*/
/*    bottom: 0;*/
/*    height: auto;*/
/*    max-height: 95%;*/
/*    overflow-y: hidden;*/
/*}*/

/*.modal.modal-slide-up .modal-dialog {*/
/*    margin: 0 auto;*/
/*    max-width: unset;*/
/*}*/

/*.modal.modal-slide-up .modal-title,*/
/*.modal.modal-slide-up label {*/
/*    color: var(--333);*/
/*}*/

/*.modal.modal-slide-up .modal-dialog-scrollable {*/
/*    max-height: unset;*/
/*}*/

/*.modal.modal-slide-up .modal-dialog-scrollable .modal-content {*/
/*    max-height: unset;*/
/*    border-bottom-left-radius: 0;*/
/*    border-bottom-right-radius: 0;*/
/*    border: none;*/
/*    background-color: var(--bg-1);*/
/*}*/

/*.modal.modal-slide-up .modal-dialog-scrollable .modal-content .modal-body {*/
/*    max-height: calc(90vh - 80px - 65px);*/
/*    overflow-y: scroll;*/
/*}*/

/*.modal.modal-slide-up .modal-header {*/
/*    justify-content: space-between;*/
/*    border-bottom: 1px solid #dee2e6;*/
/*}*/

/*.modal.modal-slide-up .modal-header .modal-title {*/
/*    font-size: 20px;*/
/*    font-weight: bold;*/
/*    color: #333;*/
/*}*/

/*.modal.modal-slide-up .modal-header .close {*/
/*    font-size: 28px;*/
/*    background: none;*/
/*    font-weight: bold;*/
/*}*/

/*.modal.modal-slide-up .modal-header .nav-pills {*/
/*    flex-wrap: nowrap;*/
/*    overflow-x: scroll;*/
/*    overflow-y: hidden;*/
/*    -ms-overflow-style: none;*/
/*    scrollbar-width: none;*/
/*}*/

/*.modal.modal-slide-up .modal-header .nav-pills::-webkit-scrollbar {*/
/*    display: none;*/
/*    !* Safari and Chrome *!*/
/*}*/

/*.modal.modal-slide-up .modal-header .nav-pills .nav-link {*/
/*    line-height: 2;*/
/*    max-width: 55%;*/
/*}*/

/*.modal.modal-slide-up .modal-header .nav-pills .nav-link span {*/
/*    text-overflow: ellipsis;*/
/*    overflow: hidden;*/
/*    white-space: nowrap;*/
/*    display: block;*/
/*    background-color: #333;*/
/*    color: #fff;*/
/*    border-radius: 0.25rem;*/
/*    padding: 0 0.25rem;*/
/*}*/

/*.modal.modal-slide-up .modal-header .nav-pills .nav-link.active span {*/
/*    background-color: var(--color);*/
/*}*/

/*.modal.modal-slide-up .center-table {*/
/*    overflow: auto;*/
/*    height: 100%;*/
/*    margin: 0;*/
/*}*/

/*.modal.modal-slide-up .center-table th {*/
/*    background-color: var(--color);*/
/*    color: #fff;*/
/*}*/

/*.modal.modal-slide-up .center-table th,*/
/*.modal.modal-slide-up .center-table td {*/
/*    padding: 0 0.25rem;*/
/*    white-space: nowrap;*/
/*}*/

/*.modal.modal-slide-up .page.page-game li span {*/
/*    color: #000;*/
/*}*/

/*.modal.modal-slide-up.fade .modal-dialog {*/
/*    transform: translate3d(0, 100%, 0);*/
/*}*/

/*.modal.modal-slide-up.show .modal-dialog {*/
/*    transform: translate3d(0, 0, 0);*/
/*}*/

/*.contact-us-wrapper {*/
/*    color: #fff;*/
/*}*/

.btn-social {
    text-align: center;
    text-transform: capitalize;
    display: block;
    color: #fff !important;
    border-radius: .75rem;
    position: relative;
    padding: 0.75rem;
    font-size: 0.9rem;
    background: #3B1C78 !important;
}

/*.btn-telegram-blue {*/
/*    background-color: #08c !important;*/
/*}*/

/*.btn-wechat-green {*/
/*    background-color: #09b83e !important;*/
/*}*/

/*.btn-line-green {*/
/*    background-color: #00c300 !important;*/
/*}*/

/*.btn-mail-yellow {*/
/*    background-color: #ff4141 !important;*/
/*}*/

/*.btn-whatsapp-green {*/
/*    background-color: #25d366 !important;*/
/*}*/

/*.btn-livechat-black,*/
/*.btn-livechat {*/
/*    background-color: #3a3a3a !important;*/
/*}*/

/*.btn-fb-blue {*/
/*    background-color: #29487d !important;*/
/*}*/

/*.btn-youtube-red {*/
/*    background-color: #cd201f !important;*/
/*}*/

/*.btn-instagram-blue {*/
/*    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);*/
/*}*/

/*.btn-twitter-blue {*/
/*    background: linear-gradient(45deg, #1DA1F2, #0d90e0);*/
/*}*/

/*.btn-zalo-blue {*/
/*    background-color: #00acd4 !important;*/
/*}*/

/*.btn-skype-blue {*/
/*    background: linear-gradient(#88d9f8, #00aff0);*/
/*}*/

/*.btn-messenger-blue {*/
/*    background: linear-gradient(0deg, rgb(0, 120, 255) 15%, rgb(0, 198, 255) 90%);*/
/*}*/

.social-icon img {
    width: 30px;
    height: 30px;
}

.social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.social-content {
    display: flex;
    align-items: center;
}

.social-content span {
    color: #fff !important;
    word-break: break-word;
}

#contactUsModal.modal.modal-slide-up .modal-content {
    border: none;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* end contact us */

/* msg alert */
.btn-msg {
    position: relative;
}

.btn-msg .msg_alert {
    font-size: 10px;
    font-weight: bold;
    position: absolute;
    top: -4px;
    right: -4px;
    color: white;
    background: red;
    width: 15px;
    height: auto;
    border-radius: 50%;
}

/* end msg alert */


/* before login */
.wrapper .before-login {
    height: 100%;
    width: 100%;
    max-width: 640px;
    height: 100%;
    position: relative;
    margin: 0 auto;
    background-image:
            linear-gradient(to bottom, rgba(41, 13, 96, 0) 45.46%, rgba(41, 13, 96) 100%),
            url("../../images/theme19/bg-before-login.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.wrapper .before-login .logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.wrapper .before-login .logo img {
    width: 100%;
    max-width: 200px;
    height: auto;
    margin: 2rem auto 0px;
}

.wrapper .before-login .list-btn {
    position: absolute;
    bottom: 130px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.wrapper .before-login .list-btn .btn-login,
.wrapper .before-login .list-btn .btn-register{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 14px 20px;
    gap: 10px;
    width: 75vw;
    height: 53px;
    border: 3px solid rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    flex: none;
    flex-grow: 0;
    font-weight: 700;
    color: var(--txt-white);
}
.wrapper .before-login .list-btn .btn-login {
    background: linear-gradient(90deg, #E93CFF 0%, #FDC892 100%);
    order: 0;

}
.wrapper .before-login .list-btn .btn-register{
    background: linear-gradient(0deg, #640AFF, #640AFF), linear-gradient(90deg, #98BEFF 0%, #E93CFF 46.63%, #FDC892 100%);
    order: 1;
}

.wrapper .before-login .menu {
    position: absolute;
    top: 0;
    right: 0;
    margin: 4rem 1rem 0 0;
}

.wrapper .before-login .menu a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .5rem;
}

.wrapper .before-login .menu a:active {
    border: none;
}

.wrapper .before-login .menu a span {
    color: #ccc;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
    line-height: 1;
}

.wrapper .before-login .menu a img {
    width: 36px;
    height: 36px;
}

/* end before login */

/* rewards */
.reward-wrap {
    padding: 0 !important;
}
.vip-win-img {
    left: 0;
}
.reward-wrap{
    height: 100%;
    background-image: url("../../images/theme19/reward/bg-reward.webp");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
}
.reward-content{
    overflow: auto;
    margin: 24px 32px;
    padding: 0 !important;
    height: calc(100% - 64px);
}
.reward-body ul li a{
    background: #FFF2E6 url("../../images/bonus/rewards/theme19/ground.png") no-repeat center;
    background-size: 100% 100%;
    border: 2px solid #E2C2AF;
    border-radius: 10px;
    padding: 15px 20px !important;
    height: 120px;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}
.reward-body ul li a span{
    position: static !important;
    font-family: 'Arial Black', Gadget, sans-serif;
    font-style: italic;
    font-weight: 900 !important;
    font-size: 24px;
    line-height: 28px;
    display: inline-block;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(180deg, #FFF192 0%, #FFBE00 100%);
    background-clip: text;
    -webkit-text-stroke: 1px #9d530b;
    filter: drop-shadow(0px 1px 0px #BF6000)
            drop-shadow(0px 1px 0px #BF6000)
            drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.5));
    text-shadow: none !important;
    transform: translate(0, 0) !important;
    text-align: start;
}
.reward-body ul li a img{
    height: 100%;
    width: 40% !important;
    max-width: 140px;
}
/* end rewards */

/* slots game */
.slot-header a input{
    color: #000;
}
.slot-games{
    height: calc(100vh - 258px) !important;
    position: static !important;
}
.slots-contant .header-slots{
    position: absolute;
    width: 100%;
    top: 0;
}
.slots-contant .loadItemInfo{
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    padding: .5rem 0;
    width: 60%;
}
.slots-contant .slot-loader{
    position: absolute;
    bottom: 50%;
    right: 50%;
}
.main-wrapper section.main{
    overflow: auto;
}
.main-wrapper section.main,
.main-wrapper section.main .slots,
.main-wrapper section.main .slots-tab,
.main-wrapper section.main .slots-tab .container-fluid,
.mySwiperSlotsMenu{
    height: 100% !important;
}
.mySwiperSlotsMenu .swiper-slide{
    display: block !important;
}
.mySwiperSlotsMenu .swiper-slide a {
    background: #eaedef;
}

.slots-tab a.active,
.slots-tab a:hover {
    background: var(--bg-2) !important;
}

.mySwiperSlotsMenu .swiper-slide a img {
    height: 4.5vh !important;
}

.slots-contant a img {
    width: 100% !important;
    height:120px;
}

.slots {
    width: 100%;
}

.slots ul{
    height: calc(100vh - 358px) !important;
    overflow: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 30px;
}

.slots-tab {
    padding: 0.5rem 0;
    overflow: hidden;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.slots-tab a.ccc {
    background: #ccc;
    color: #555;
}

.slots-tab a.active,
.slots-tab a:hover {
    color: #fff;
    background-clip: content-box;
    background-color: #daa300;
}

.slots-contant {
    background: transparent;
    overflow: hidden;
}

.slots-contant li {
    width: 33.33%;
    box-sizing: border-box;
    padding: 5px;
    float: left;
    margin: 0;
}
.slots-contant li:last-child {
    padding-bottom: 30px;
}
.slots-contant a {
    width: 100%;
    height: 150px;
    text-align: center;
    position: relative;
    display: block;
}

.slots-contant a span {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #000;
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    text-transform: capitalize;
}

.slots-contant a span,
.game-box span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .9rem;
}

.slots-contant li::before {
    left: 5px;
}

@media (max-width: 470px) {
    .slots-tab a {
        width: 33.33%;
    }
}
.slots-contant .slot-list .game-free a{
    height: fit-content;
    padding: .25rem .5rem;
    line-height: 1.2;
}
.slots-contant .slot-list .game-free{
    display: none;
}
.slots-wrapper .providers-list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
}

.slots-wrapper .providers-list .menu-mt-cont a {
    width: 100px;
    height: 45px;
    border: none;
    background-color: #2C4382;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
}

.slots-wrapper .providers-list .menu-mt-cont a.active {
    background: linear-gradient(to top, #4E80F8, #7747F2) !important;
    border: none;
    color: #FFF000;
}

.slots-wrapper .providers-list .menu-mt-cont a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* end slots game */
.popup-announcement .popup-announcement-content img {
    width: 100%;
}
.popup-announcement{
    max-width: 640px;
}
#full-wrapper.modal-open {
    overflow: hidden;
}

#messageModal .modal-content .message-logo {
    width: 100%;
}

/* gift */
.float-link {
    bottom: 15% !important;
}

.float-link a img {
    width: 80px;
    height: 80px;
}

.float-link.float-link-2 {
    bottom: 26% !important;
}

.float-link.float-link-3 {
    bottom: 37% !important;
}

/* end gift */
/* turnover */
.center-head {
    width: 100%;
    height: 120px;
    background: url("../../images/main/user/banner-center.jpg") center top no-repeat;
    padding: 10px;
    position: relative;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #fff;
    justify-content: start;
    flex-direction: row;
}

.center-avtar {
    width: 80px;
    height: 80px;
    border-radius: 100%;
    background: url("../../images/avtar-bg.png") center no-repeat;
}

.main.center {
    background: #fff;

}

.main.center h2 {
    height: 30px;
    line-height: 30px;
    display: block;
    padding: 0 15px 0 10px;
    background: var(--bg-2);
    color: #fff;
    font-size: 16px;
    border-radius: 0 15px 15px 0;
    float: left;
    margin: 20px 0;
}

.input input[data-role=none]:not([type=checkbox]),
.input select[data-role=none]:not([type=checkbox]),
.noico:not([type=checkbox]) {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    box-sizing: border-box;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.provider-item {
    width: 100%;
    padding: 0 5px;
}

.turnover-item {
    padding: 0 15px;
    width: 100%;
}

.provider-item,
.turnover-item {
    text-align: start;
}

.turnover-item label span {
    color: #000 !important;
}

.btn.gradient {
    background-color: var(--bg-2);
    display: block;
    box-sizing: border-box;
}

.btn-big {
    margin: 20px 10px;
    font-size: 16px;
    float: inherit;
    cursor: pointer;
    color: #ffffff;
}

#form1>div {
    text-align: start;
    margin: 0 4px;
}

/* end turnover */
.reward-body ul li a span {
    color: var(--text-2) !important;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);
}

.main .input form {
    text-align: start;
}

.transfer label span {
    color: #000;
}

.center-tab a {
    background-color: #eee;
}

.center-tab a.active,
.center-tab a:hover {
    background-color: var(--bg-2) !important;
}

.center-tab a.active span,
.center-tab a:hover span {
    color: #fff;
}

.earning-link {
    text-align: start;
}

.earning-link .referral-link .ref_link_name svg,
.earning-link .referral-link .ref_code_name svg {
    filter: brightness(0) saturate(100%) invert(87%) sepia(1%) saturate(24%) hue-rotate(350deg) brightness(96%) contrast(90%);
}

.earning-link .report-item {
    border-radius: 8px;
    color: #000;
    cursor: pointer;
    font-size: 14px;
    height: 44px;
    line-height: 40px;
    padding-left: 15px;
    position: relative;
    width: 100%;
    border: 1px solid #ccc;
}

.main.earning-link .chevron-icon {
    float: right;
    position: absolute;
    right: 12px;
    scale: 1.5;
    top: 57%;
    transform: translateY(-50%);
}

.overview-container-2 {
    padding-bottom: 10px;
}

#incomeLinkAffiliate svg,
#memberLinkAffiliate svg {
    fill: #000;
}

.main.earning-link .separator:after,
.main.earning-link .separator:before {
    border-bottom: 1px solid #b7beab;
    content: "";
    flex: 1;
}

.main.earning-link .separator {
    align-items: center;
    display: flex;
    font-size: 14px;
    margin-bottom: 15px;
    margin-top: 20px;
    text-align: center;
    color: #333;
}

.main.earning-link .separator:not(:empty):before {
    margin-right: 0.65em;
}

.main.earning-link .separator:not(:empty):after {
    margin-left: 0.65em;
}

.overview-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.overview-row .overview-subcontainer {
    flex: 1 1 calc(50% - 10px);
    min-width: calc(50% - 10px);
    box-sizing: border-box;
    background: var(--bg-2);
    border-radius: 8px;
    padding: 10px 0 10px 10px;
}

.overview-row .overview-subcontainer p {
    color: var(--text-2);
}

.center-avtar::before {
    content: '';
}

/* sport */
.sport-popup h3 {
    text-align: center;
    color: var(--text-3);
    font-size: 12px;
}

.sport-container,
.sport-item a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.reg-content,
.sport-popup {
    position: fixed;
    width: 88%;
    max-width: 620px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-1);
    height: auto;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 2px solid var(--border-1);
    z-index: 999;
}

.sport-content {
    margin: 30px 0;
}

.sport-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sport-item img {
    padding: 5px;
    max-width: 150px;
}

.sport-item a span {
    color: var(--text-3) !important;
    font-size: 12px;
}

.sport-popup {
    display: none;
}

#sport-cancel-btn {
    background: var(--bg-2);
    color: var(--text-2);
    padding: 15px;
    border-radius: 2rem;
    width: 60%;
    text-align: center;
    font-size: 12px;
}

/* end sport */
/* Bank Card */
.bank-card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    border-radius: 4px;
    margin: 0 auto 16px auto;
    overflow: hidden;
}

.btn-add-bank {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #fff;
}

.btn-add-bank:hover {
    text-decoration: none;
    color: #fff;
}

.bank-card:last-child {
    margin-bottom: 0;
}

.bank-card img {
    width: 100%;
}

.tick-check {
    position: absolute;
    bottom: -25px;
    right: 3px;
    color: #fff !important;
    font-size: 12px;
}

.bank-card-tick-check-wrapper {
    display: none;
    position: absolute;
    right: 0;
    bottom: 0;
    border-bottom: 30px solid #00aeef;
    border-left: 30px solid transparent;
}

.bank-card.active .bank-card-tick-check-wrapper {
    display: block;
}

.bank-card-details-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.bank-card-details-wrapper span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
    font-size: 14px;
}

.bank-card-details-wrapper span:not(:first-child) {
    margin-top: 8px;
}

.err-msg-wrapper {
    color: #dc3545;
    width: 100%;
    height: 100%;
    background-color: var(--block);
    text-align: center;
    font-size: 15px;
    border-radius: 6px;
    padding: 8px;
}
.bank-card-wrapper div:first-child{
    text-align: start;

}
.bank-card-wrapper .depo-with-title{
    color: #f90 !important;
    text-align: start !important;
}
.bank-card-wrapper .bank-card-details-wrapper span{
    color: var(--text-2) !important;
}
/* end bank card */
.modal-backdrop{
    z-index: 1025;
}
.modal-transfer .form-group{
    text-align: start;
}
.btn.btn-submit, button[type="submit"]{
    background-size: 100% 100% !important;
}
.depo_img a{
    width: auto !important;
}

#fcModal .modal-content{
    background:var(--bg-1);
}
.lobbys .checkin-bonus{
    background:var(--bg-1);
}

.menu-provider{
    position: relative;
    background: var(--bg-2) !important;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    overflow-x: auto !important;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.menu-provider .items-slots{
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu-provider .items-games{
    width: 5rem;
}
.menu-provider .items-slots p{
    color: #FFF000 !important;
}
.menu-provider img{
    user-select: none;
    -webkit-user-drag: none;
}
.menu-provider .items-slots.active{
    background: linear-gradient(to top, #4E80F8, #7747F2) !important;
}
.hidden{
    display: none !important;
}
.modal-transfer .modal-content{
    padding: 0rem 1rem !important;
    background: transparent !important;
}

/* social media */
.social-media-cont {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.75rem 0;
    gap: 1rem;
}

.social-media-cont .social-media-item {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    width: 100%;
    height: 65px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.spinner_effect {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    animation: spin 1s linear infinite;
    margin: 100px auto;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -30px;
    margin-top: -130px;
    z-index: 99999;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

img.google-social {
    max-width: 39px;
}

img.tele-social {
    max-width: 50px;
}

.external-break-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    gap: 10px;
    height: 50px;
}

.external-break-line .break-line {
    height: 0.01rem;
    background: #cdcdcd;
    margin: 0.15rem 0;
    width: 48%;
}

/* vip bonus */
.vip-wrapper{
    background: var(--vip-1);
}
.vip-wrapper li {
    transition-duration: 0s;
}

.vip-cont {
    padding: 0.2rem 0;
}

.vip-grade em {
    display: block;
    text-align: center;
}

.vip-grade .vip-grade-title {
    text-align: center;
    padding: 0.1rem 0;
    font-size: 1.25rem;
    text-transform: uppercase;
    color: var(--vip-2);
    text-shadow: 0.1rem 0.1rem 0.1rem var(--vip-2);
}

.vip-grade .progress {
    height: 0.5rem;
    margin-bottom: 1rem;
}

.vip-grade .progress-bar {
    background-color: var(--color);
}

.vip-lv {
    position: relative;
}

.vip-lv li {
    background-color: white;
    border-radius: 0.5rem;
    padding: 0.25rem;
    margin: 0.25rem 0;
    border-width: 1px;
    display: flex;
    align-items: center;
}

.vip-lv li span {
    flex: 1;
    font-size: 0.9rem;
}

.vip-lv li h5 {
    text-transform: uppercase;
    color: var(--vip-2);
}

.vip-lv .vip-filled {
    background-color: var(--color);
}

.vip-lv .vip-filled span {
    color: var(--fff);
}

.vip-upgrade {
    padding: 0.2rem 0;
}

.vip-buy li {
    display: flex;
    align-items: center;
    margin: 0.1rem 0;
}

.vip-buy li span {
    text-transform: capitalize;
    max-width: 50%;
}

.vip-buy u {
    flex: 1;
}

.vip-buy b {
    padding: 0.5rem;
    border: 2px solid;
    color: var(--vip-2);
    text-transform: uppercase;
    margin-left: auto;
    text-align: center;
}

.vip-buy a {
    width: 100%;
    margin: 10px 0;
    color: var(--fff);
    padding: 0.25rem;
}

.vip-buy a:hover {
    color: var(--bbb);
}

.vip-list table {
    min-width: 7rem;
    overflow: auto;
}

.vip-list table thead th {
    border-bottom: 0;
}

.vip-list table thead td {
    white-space: nowrap;
}

.vip-list table .ico {
    font-size: 1.15rem;
}

.vip-list .table td, .vip-list .table th {
    padding: 0.5rem;
}

.vip-list .table th {
    min-width: 100px;
}

.vip-list h4 {
    text-align: center;
    padding: 0.2rem 0;
    font-size: 1.25rem;
    text-transform: uppercase;
}

.vip-list td {
    width: 15%;
}

.vip-info {
    padding: 0.5rem 0;
}

.vip-info fold tt {
    display: flex;
    padding: 0.5rem;
    cursor: pointer;
}

.vip-info fold tt h3 {
    flex: 1;
}

.vip-info fold tt .ico {
    font-size: 1.5rem;
    margin-left: auto;
    margin-right: unset;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vip-info fold tt.active i {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

.vip-info aside {
    padding: 0 0.2rem;
}

.vip-info aside h5 {
    color: var(--vip-2);
}

.vip-info h2 {
    font-size: 1.5rem;
}
.vip-info p {
    font-size: 0.9rem;
}

.vip-daily-cashback-wrapper span {
    display: block;
    white-space: nowrap;
}
.vip-wrapper .mission li a {
    display: block;
    background-color: white;
    box-shadow: var(--shadow);
    border-radius: 0.5rem;
}
.vip-wrapper .mission-cont {
    display: flex;
    align-items: center;
    padding: 0.2rem 0;
    border-bottom-width: 1px;
    border-color: #eee;
    border-style: solid;
}
.vip-wrapper .mission-info {
    display: flex;
    align-items: center;
    padding: 0.5rem;
}
.vip-wrapper .mission-cont h5 {
    font-size: 1.15rem;
    flex: 1;
    text-transform: uppercase;
    color: #333 !important;
}
.vip-wrapper .mission-cont h5 span {
    font-size: 0.8rem;
    display: block;
    font-weight: normal;
    text-transform: capitalize;
    margin-top: 0.25rem;
}
.table table thead tr {
    background-color: #2e6efd;
}
.table table thead tr:first-child td span{
    color: var(--text-2);
}
.ico-fluent-coin {
    background-image: url('../../images/theme19/icon/coin_color.svg');
}
/* end vip bonus */

/* menu games */
.down-footer .slick-slider .slick-list{
    border-radius: .325rem;
}
.down-footer .title-down-footer{
    padding: 0;
}
.down-footer .item-down-footer{
    padding: 4px 0;
}
.btn-profile .logo{
    width:30vw;
}
.withdraw-turnover .form-control{
    color: #000;
}
.withdraw-turnover > div:first-child{
    color: #f90;
    font-size: 16px;
    font-weight: 600;
}
.withdraw-turnover > span{
    color: var(--text-2) !important;
}
.modal-title{
    overflow-y: scroll;
    scrollbar-width: none;
}
.modal-title::-webkit-scrollbar {
    display: none;
}
.modal-title i img{
    width:auto;
}
#withFreeEventFormAmount{
    background: transparent;
}
#gameLockModal .modal-content{
    background: var(--bg-1);
}
#gameLockModal .modal-title{
    color: var(--text-3);
}
#gameLockModal .modal-footer button{
    background: var(--bg-2);
}
.modal-body .withdraw-turnover .form-control span{
    color: #f90 !important;
}
/* end menu games */

/* wallet balance */
header .header-right-wrapper .header-bal-info {
    padding: 0 5px;
}
header .header-right-wrapper .header-bal-info i {
    margin: 0;
}
header .header-right-wrapper .header-bal-info .refresh_bal {
    margin: 0;
}
header .header-right-wrapper .header-bal-info .refresh_bal img {
    max-width: unset;
}
#balanceToggle {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Arrow animation */
#balanceToggle .dropdown-arrow {
    color: #fff;
    width: 22px;
    height: 22px;
    font-size: 22px;
    transition: transform 0.3s ease;
}
#balanceToggle.opend .dropdown-arrow {
    transform: rotate(180deg);
}

/* Dropdown panel */
.balance-dropdown {
    display: none;
    position: absolute;
    top: 50px;
    right: 10px;
    width: 280px;
    height: auto;
    padding: 10px;
    color: #fff;
    z-index: 1000;

    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.82);
    border-radius: 10px;
    border: 3px solid transparent;
    background:
            linear-gradient(#FFE7AB, #FFE7AB) padding-box,
            linear-gradient(180deg, #E7AF5B 0%, #DC905B 50.97%, #E7AF5B 100%) border-box;
    background-origin: border-box;
}
.dropdown-b {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.wallet-balance {
    background: none;
    padding: 5px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    flex-grow: 1;
    flex-grow: 1;
}
.wallet-balance div {
    color: var(--txt-main);
    font-weight: 600;
    font-size: 14px;
}
.btn-ammount-header{
    gap: .125rem;
    padding: 0 .325rem;
}
.credit-container h4{
    position: relative;
    transform: none;
    margin-left: 0;
    top: 0;
    left: 0;
}
.btn-ammount-header .btn-ammount{
    padding: 0px;
    margin-left: .25rem;
}
.btn-ammount-header .refresh_bal{
    display: flex;
}
.btn-ammount-header .refresh_bal img{
    width: 1.125rem;
    height: 1.125rem;
}
.btn-ammount-header .btn-add{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
    width: 20px;
    height: auto;
    background: linear-gradient(180deg, #F6F5F2 15.38%, #DD9855 49.52%, #E9DCA6 75.48%);
    border-radius: 30px;
}
.btn-ammount-header .btn-add img{
    width: 8px;
    height: 8px;
}
.btn-ammount-header .btn-add{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
    width: 20px;
    height: auto;
    background: linear-gradient(180deg, #F6F5F2 15.38%, #DD9855 49.52%, #E9DCA6 75.48%);
    border-radius: 30px;
}
.btn-ammount-header .btn-add img{
    width: 8px;
    height: 8px;
}
.btn-ammount-header .btn-add{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
    width: 20px;
    height: auto;
    background: linear-gradient(180deg, #F6F5F2 15.38%, #DD9855 49.52%, #E9DCA6 75.48%);
    border-radius: 30px;
}
.btn-ammount-header .btn-add img{
    width: 8px;
    height: 8px;
}
.btn-ammount-header .btn-add{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
    width: 20px;
    height: auto;
    background: linear-gradient(180deg, #F6F5F2 15.38%, #DD9855 49.52%, #E9DCA6 75.48%);
    border-radius: 30px;
}
.btn-ammount-header .btn-add img{
    width: 8px;
    height: 8px;
}
.btn-ammount-header .btn-add{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
    width: 20px;
    height: auto;
    background: linear-gradient(180deg, #F6F5F2 15.38%, #DD9855 49.52%, #E9DCA6 75.48%);
    border-radius: 30px;
}
.btn-ammount-header .btn-add img{
    width: 8px;
    height: 8px;
}
.btn-ammount-header .btn-add{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
    width: 20px;
    height: auto;
    background: linear-gradient(180deg, #F6F5F2 15.38%, #DD9855 49.52%, #E9DCA6 75.48%);
    border-radius: 30px;
}
.btn-ammount-header .btn-add img{
    width: 8px;
    height: 8px;
}
.btn-ammount-header .btn-add{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
    width: 20px;
    height: auto;
    background: linear-gradient(180deg, #F6F5F2 15.38%, #DD9855 49.52%, #E9DCA6 75.48%);
    border-radius: 30px;
}
.btn-ammount-header .btn-add img{
    width: 8px;
    height: 8px;
}
.wallet-balance div{
    text-align: start;
}
.wallet-balance span{
    justify-content: start;
    display: flex;
    color: #652800;
    gap: .25rem;
}
.wallet-balance > span{
    padding: 5px 8px;
    width: 100%;
    height: 30px;
    background: #D4B494;
    border-radius: 5px;
    font-weight: 800;
}
.form-balance{
    display: flex;
    align-items: center;
}
.form-balance .group-icon{
    display: flex;
    width: 52px;
    height: 52px;
    background: #B64B06;
    border-radius: 10px;
}
.form-balance .group-icon img{
    width: 100%;
    height: 100%;
}
.footer-DepWith{
    display: flex;
    gap: 5px;
    margin-top: 12px;
}
.footer-DepWith .form-DepWith{
    display: flex;
    align-items: center;
    padding: 8px 12px;
    gap: 4px;
    background: #FEEEDB;
    border: 2px solid #D4B494;
    border-radius: 15px;
}
.footer-DepWith .form-DepWith img{
    width: 30px;
    height: 30px;
}
.footer-DepWith .form-DepWith span{
    color: var(--txt-main);
    font-weight: 800;
    font-size: 14px;
}
/* end wallet balance */
#register_now .register-option {
    display: none;
}
#register_now .register-option.active {
    display: block;
}
#telegram-click-form .icon,
#google-click-form .icon,
#one-click-form .icon {
    width: 25px;
    height: 16px;
    position: absolute;
    left: 8px;
    z-index: 1;
}
#telegram-click-form #country,
#google-click-form #country,
#one-click-form #country {
    padding-left: 46px;
}
#telegram-click-form .country .country-name,
#google-click-form .country .country-name,
#one-click-form .country .country-name{
    color: var(--text-3) !important;
}
#telegram-click-form .country-select,
#google-click-form .country-select,
#one-click-form .country-select{
    width: 100%;
}
#telegram-click-form .country-select .country-list,
#google-click-form .country-select .country-list,
#one-click-form .country-select .country-list{
    max-height: 120px;
}
#telegram-click-form .form-group,
#google-click-form .form-group,
#one-click-form .form-group{
    padding-bottom: 1rem;
}
#telegram-click-form .btn-register,
#google-click-form .btn-register,
#one-click-form .btn-register{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    background: linear-gradient(90deg, #E93CFF 0%, #FDC892 100%);
    border: 4px solid rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    font-weight: 700;
}
/* end register */
.load{
    z-index: 9999 !important;
}
.social-media-cont .social-media-item:hover,
.social-media-cont .social-media-item.active{
    background: var(--third);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.social-media-cont .social-media-item a{
    padding: .25rem;
}
.box_submit button{
    display: none !important;
}
.modal-footer #depositSubmitBtn{
    margin: 0;
}
.vip-info fold .anime-fade-in{
    display: none;
}
.err-msg-wrapper {
    border-radius: 0.25rem;
    padding: 0.5rem;
    color: white !important;
    background-color: red !important;
    font-size: 0.9rem;
}
.mission-cont {
    display: flex;
    align-items: center;
    padding: 0.2rem 0;
    border-bottom-width: 1px;
}
.mission-cont em {
    margin: 0 0.3rem;
    width: 3rem;
    height: 3rem;
    display: block;
    text-align: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.mission-cont h5 {
    font-size: 1.15rem;
    flex: 1;
    text-transform: uppercase;
    color: #333 !important;
    text-align: start;
}
.mission-cont h5 span {
    font-size: 0.8rem;
    display: block;
    font-weight: normal;
    text-transform: capitalize;
    margin-top: 0.25rem;
}
.mission-info div{
    justify-content: center !important;
}
.depo_img label{
    background: transparent !important;
    border-radius: 6px;
}
.depo_img a{
    border-radius: .325rem !important;
    top: 11px !important;
    left: 10px !important;
    padding: 12px !important;
}
.credit-container span{
    color: #fff;
}
#formAffiliate .form-group,
#form1 .form-group{
    margin-bottom: 1rem;
}
#formAffiliate .form-group,
#formAffiliate label{
    text-align: start;
}
.arrow-menu{
    position: relative;
}
.arrow-menu .left-arrow-menu,
.arrow-menu .right-arrow-menu {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 10;
}
.arrow-menu .left-arrow-menu img,
.arrow-menu .right-arrow-menu img{
    width: .75rem;
}
.arrow-menu .left-arrow-menu{
    left: 0;
}
.arrow-menu .right-arrow-menu{
    right: 0;
}
/* setting dropdown */
.setting-dropdown{
    position: absolute;
    right: 12px;
    top: 60px;
    min-width: 260px;
    background: url('../../images/theme19/header/bg-setting.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 2rem;
    z-index: 1050;
}
.setting-dropdown div > span{
    color: #A05C3C;
    padding: 0;
}
.setting-dropdown div:first-of-type > label{
    width: 82px;
    height: 34px;
    position:relative;
    background: url('../../images/theme19/header/bg-sound.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}
.setting-dropdown div:first-of-type > label.off-animation img{
    width:36px;
    position:absolute;
    bottom: 0;
    left: 0;
    transform: translateX(0);
}
.setting-dropdown div:first-of-type > label.off-animation span{
    position: absolute;
    bottom: 8px;
    font-size: 12px;
    color: #EEC296;
    font-weight: 700;
    transform: translateX(0);
}
.setting-dropdown div:first-of-type > label.on-animation img{
    width:36px;
    position:absolute;
    bottom: 0;
    left: 0;
    transform: translateX(50px);
}
.setting-dropdown div:first-of-type > label.on-animation span{
    position: absolute;
    bottom: 8px;
    font-size: 12px;
    color: #EEC296;
    font-weight: 700;
    transform: translateX(-20px);
}
.setting-dropdown div:last-of-type > label{
    width: 100px;
    height: 34px;
    position:relative;
    background: url('../../images/theme19/header/bg-btn.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 2050;
}
.setting-dropdown div:last-of-type > label button{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-58%);
    font-size: 14px;
    background: transparent;
}
/* end setting dropdown */
/* language dropdown v2 */
.language-dropdown-v2{
    background: url("../../images/theme19/header/bg-language.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 78%;
    font-size: 12px;
    padding-top: 2.125rem;
    margin-top: .125rem;
    max-height: 300px;
    overflow: auto;
    overflow: auto;
    scrollbar-width: none;
}
.language-dropdown-v2::-webkit-scrollbar {
    display: none;
}
.language-dropdown-v2 ul li{
    position: relative;
}
.language-dropdown-v2 ul li img{
    width:1rem;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(8px, -50%);
}
.language-dropdown-v2 ul li span{
    color: #A05C3C;
    padding-left: 1.25rem;
}
/* end language dropdown v2 */

/* Forgot password */
#forgotPasswordModal .modal-dialog {
    max-width: 320px;
    height: 100%;
}
#forgotPasswordModal .modal-content {
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .30);
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.30)), url(../../images/theme19/bg-before-login.webp);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 120% auto;
}
#forgotPasswordModal .modal-header{
    padding: 1rem 0;
    position: relative;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
}
#forgotPasswordModal .fp-back {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, .18);
    border-radius: 25%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(25%, -50%);
}
#forgotPasswordModal .fp-back:hover {
    background: rgba(255, 255, 255, .30);
}
#forgotPasswordModal .fp-topbar-title {
    color: var(--txt-white);
    font-weight: 600;
    letter-spacing: .3px;
}
#forgotPasswordModal .modal-body {
    background: #FFE8AE;
    border-radius: .75rem .75rem 0 0;
    padding: 0;
    height: 100%;
}
/* Step 1 */
#forgotPasswordModal .modal-content {
    display: none;
}
#forgotPasswordModal .modal-content.active {
    display: block;
}
#forgotPasswordModal .detail-wrapper{
    color: var(--txt-white);
}
#forgotPasswordModal .fp-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 10px;
}
#forgotPasswordModal .fp-sub {
    font-size: 18px;
    line-height: 1.6;
    padding: 0 1rem;
    margin-bottom: 20px;
}

#forgotPasswordModal .fp-tabs {
    position: relative;
    border-bottom: 2px solid #e8d5b0;
    margin-bottom: 18px;
}
#forgotPasswordModal .fp-tabs .nav-link {
    padding: 16px 12px;
    font-weight: 600;
    color: #B64B06;
}
#forgotPasswordModal .fp-tabs .active-animation{
    position: absolute;
    bottom: 0;
    width: 50%;
    transform: translateY(50%);
    height: 3px;
    background: var(--third);
    transition: left 0.3s ease;
}
.fp-label {
    font-size: 14px;
    font-weight: 700;
    color: #B64B06;
    margin-bottom: 6px;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.fp-input {
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    background: #F9D8A2;
    font-size: 14px;
    color: #B64B06;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.fp-input::placeholder {
    color: #B64B06;
}
.fp-input:focus {
    border-color: #e8921a;
    box-shadow: 0 0 0 3px rgba(232, 146, 26, .12);
}
.fp-error {
    color: #d0302a;
    font-size: 12px;
    margin-top: 5px;
    display: none;
}
/* Step 2 */
#forgotPasswordModal #fp-page-2{
    background: #FFE8AE;
}
#forgotPasswordModal #fp-page-2 .fp-back{
    background: #8C623933;
}
#forgotPasswordModal #fp-page-2 .fp-back img{
    filter: brightness(0) saturate(100%) invert(40%) sepia(65%) saturate(370%) hue-rotate(349deg) brightness(87%) contrast(89%);
}
#forgotPasswordModal #fp-page-2 .fp-topbar-title {
    color: var(--txt-second);
}
#forgotPasswordModal #fp-page-2 .fp-title{
    color: var(--txt-black);
}
#forgotPasswordModal #fp-page-2 .fp-sub{
    font-weight: 600;
    margin-bottom: 4rem;
    color: var(--txt-gray);
}
#forgotPasswordModal #fp-page-2  .fp-resend {
    margin-top: 13px;
    text-align: center;
    color: var(--txt-gray);
}
#forgotPasswordModal #fp-page-2  .fp-support {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
#forgotPasswordModal #fp-page-2 .fp-resend a{
    text-decoration: underline;
}
#forgotPasswordModal #fp-page-2 .fp-resend a,
#forgotPasswordModal #fp-page-2 .fp-support a{
    color:var(--txt-main);
    font-weight: 700;
}
#forgotPasswordModal #fp-page-2 #fp-contact-display{
    color: var(--txt-main);
}
#forgotPasswordModal #fp-page-2 .btn-fp-verify {
    width: 100%;
    height: 50px;
    padding: 14px 20px;
    border: 4px solid rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    color: var(--txt-white);
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .3px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(90deg, #E93CFF 0%, #FDC892 100%), linear-gradient(90deg, #F59FFF 0%, #FEE3C9 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
#forgotPasswordModal #fp-page-2 .btn-fp-verify:hover {
    opacity: .92;
}
#forgotPasswordModal #fp-page-2 .btn-fp-verify:active {
    transform: scale(.98);
}
#forgotPasswordModal #fp-page-2 .fp-page{
    padding: 0 1rem;
}
#forgotPasswordModal #fp-page-2 .fp-otp-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--txt-gray);
    letter-spacing: 0.2px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 12px;
}
#forgotPasswordModal #fp-page-2 .fp-otp-wrap {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 22px;
}

#forgotPasswordModal #fp-page-2 .fp-otp-box {
    width: 14vw;
    height: 16vw;
    max-width: 62px;
    max-height: 72px;
    border: 1px solid var(--bd-gray);
    border-radius: 1rem;
    background: var(--bg-white);
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--txt-main);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    caret-color: var(--txt-main);
}

#forgotPasswordModal #fp-page-2 .fp-otp-box:focus {
    border-color: var(--bd-active);
}



#forgotPasswordModal .btn-fp-primary {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    border: 4px solid transparent;
    border-radius: 15px;
    background-image: linear-gradient(90deg, #E93CFF 0%, #FDC892 100%),
    linear-gradient(90deg, #F49EFF 0%, #FEE4C9 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    color: var(--txt-white);
}
/* End forgot password */

/* ===== GAME LOBBY MODAL ===== */
#menuModal {
    background: transparent;
    pointer-events: none;
    position: inherit;
}
#menuModal.show {
    pointer-events: auto;
}
#menuModal .bg-wave {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#menuModal .modal-dialog {
    position: fixed;
    margin: 0;
    top: 0;
    z-index: 10;
}
#menuModal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(-100%, 0);
}
#menuModal.show .modal-dialog {
    transform: translate(0, 0);
}
#menuModal .modal-content {
    height: 100%;
    border-radius: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* Header */
#menuModal .menu-lobby-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-image: url("../../images/theme19/footer/bg-title.png");
    background-size: 100% 100%;
    margin: 1.5rem 10px 1rem;
    height: 14vw;
    max-height: 60px;
    position: relative;
}
@font-face {
    font-family: 'Donkin';
    src: url('../../fonts/Donkin.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
#menuModal .menu-lobby-title {
    font-family: 'Donkin', sans-serif;
    font-size: 20px;
    line-height: 20px;
    color: var(--txt-white);
    text-shadow:
        2px  2px 0px var(--txt-main),
        2px -2px 0px var(--txt-main),
        -2px  2px 0px var(--txt-main),
        -2px -2px 0px var(--txt-main);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(12px, -55%);
    text-transform: uppercase;
}
#menuModal .menu-lobby-close {
    box-sizing: border-box;
    margin: 0 auto;
    width: 24px;
    height: 24px;
    background: #B64B06;
    border-radius: 2rem;
    flex-grow: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(-12px, -60%);
    display: flex;
    justify-content: center;
    align-items: center;
}
#menuModal .menu-lobby-close img{
    width: 50%;
    height: 50%;
}
/* Scrollable list */
#menuModal .menu-lobby-body {
    height: calc(100vh - 112px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0px 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: .25rem;
}
#menuModal .menu-lobby-body::-webkit-scrollbar {
    display: none;
}
/* Each menu item */
#menuModal .menu-lobby-item {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
    gap: 10px;
    width: 52vw;
    max-width: 250px;
    height: 50px;
    background: #FCE2C8;
    border: 2px solid #B64B06;
    border-radius: 10px;
}
#menuModal .menu-lobby-item span{
    color: var(--txt-fifth);
}
#menuModal .menu-lobby-item:hover {
    background: rgba(255, 225, 155, 0.98);
    border-color: rgba(240, 150, 30, 0.7);
    transform: translateX(3px);
    text-decoration: none;
    color: #2d1a00;
}
#menuModal .menu-lobby-item.active {
    background: rgba(255, 225, 155, 0.98);
    border-color: rgba(240, 150, 30, 0.7);
}
/* Icon */
#menuModal .menu-lobby-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#menuModal .menu-lobby-icon img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}
/* Backdrop override */
.menu-modal-backdrop {
    background: rgba(0,0,0,0.25) !important;
}

/* End GAME LOBBY MODAL */

/* Promotion */
#promotions {
    height: 100%;
    background: transparent;
    position: relative;
    overflow: hidden;
}
#promotions .promo-type{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 .5rem;
    gap: 5px;
    width: 100%;
    height: 45px;
    margin: 0;
    position: absolute;
    top: 0;
}
#promotions .promo-type .promo-type-items{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 5px 15px;
    gap: 5px;
    width: 32vw;
    max-width: 140px;
    height: 45px;
    background: #D4B494;
    border-radius: 10px 10px 0px 0px;
    font-weight: 700;
    color: #B45101;
}
#promotions .promo-type .promo-type-items.active{
    background: linear-gradient(154.37deg, #FFF3D8 16.21%, #FEE4A6 61.73%);

}
#promotions .promo-main{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 45px;
    background: #FFE5A8;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#promotions .promo-list-wrapper {
    padding: 12px 8px 80px;
}
#promotions .promo-card {
    padding: 4px;
    border-radius: 1rem;
    background-image: linear-gradient(180deg, #FFFFFF -1.73%, #FF38FC -0.19%, #AE04F7 100.28%, #4200A6 101.67%);
    position: relative;
    z-index: 0;
}
#promotions .promo-eligible .promo-card {
    background-image: none;
}
#promotions .promo-card .promo-card-content{
    border-radius: 1rem;
    overflow: hidden;
}
#promotions .promo-badge-free {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 10px;
    gap: 10px;
    position: absolute;
    width: 112px;
    height: 32px;
    right: 0;
    top: 0;
    background: linear-gradient(90deg, #FFF0C7 0%, #EDA949 100%);
    box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.25);
    border-radius: 0px 10px 0px 5px;
    z-index: 4;
    font-style: italic;
    font-weight: 900;
    font-size: 14px;
    color: #B64B06;
    text-transform: uppercase;
}
#promotions .promo-card-ornament{
    position: absolute;
    width: 20vw;
    max-width: 80px;
    height: 10vw;
    max-height: 32px;
    left: 50%;
    top: 0;
    transform: translate(-50%, -40%);
    z-index: 3;
}
#promotions .promo-btn-view {
    padding: 7px 18px;
    width: fit-content;
    background: linear-gradient(90deg, #E93CFF 0%, #FDC892 100%);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--txt-white);
}
#promotions .promo-btn-view-bottom {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 20px;
    gap: 10px;
    margin: 0 auto;
    width: 134px;
    height: 40px;
    background: linear-gradient(90deg, #E93CFF 0%, #FDC892 100%);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    color: var(--txt-white);
}
#promotions .promo-card-bottom {
    background: #A3450A;
    padding: 10px 12px 13px 14px;
}
#promotions .promo-card-top-content {
    position: relative;
    z-index: 2;
    padding: 1.25rem 14px 1rem;
    max-width: 58%;
    min-height: 148px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#promotions .promo-card-title-top {
    font-weight: 900;
    color: var(--txt-white);
    line-height: 100%;
    text-align: start;
}
#promotions .promo-card-bottom-title {
    font-weight: 600;
    text-align: start;
    line-height: 100%;
    margin-bottom: .5rem;
    color: var(--txt-white);
}
#promotions .promo-card-wrap {
    margin-bottom: 22px;
}
#promotions .promo-card-top {
    position: relative;
    min-height: 148px;
    overflow: hidden;
}

#promotions .promo-card-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

#promotions .promo-card-top-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
    rgba(10, 5, 35, 0.5) 0%,
    rgba(10, 5, 35, 0.4) 40%,
    rgba(10, 5, 35, 0.2) 65%,
    transparent 100%)
}
#promotions .promo-eligible  .promo-card-top-overlay {
    background: transparent;
}


#promotions .promo-card-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#promotions .promo-meta-left {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}
#promotions .promo-meta-date,
#promotions .promo-meta-timer {
    display: flex;
    align-items: center;
    font-size: 11.5px;
}
#promotions .promo-meta-date{
    color: #FFE5A8;
    font-weight: 600;
    font-size: 14px;
}
#promotions .promo-meta-date img {
    width: 24px;
    height: 24px;
    margin-right: .5rem;
}

#promotions .promo-meta-timer {
    font-weight: 600;
    background: #2B2036;
    padding: .25rem 1.75rem;
    border-radius: 6px;
    width: fit-content;
    border: 2px solid #FCBA52;
    position: relative;
    margin-left: 1.25rem;
}
#promotions .promo-meta-timer img{
    width: 32px;
    height: 32px;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -12%) rotate(-25deg);
}
#promotions .promo-meta-timer span{
    color: var(--txt-white);
}

/* Detail promotion */
.promo-modal .modal-backdrop,
.modal-backdrop.show {
    display: none !important;
}

.promo-modal .modal-dialog {
    margin: 0;
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100%;
}

.promo-modal .modal-content {
    height: 100%;
    border-radius: 0;
    border: none;
    background-image: url('../../images/theme19/promotion/bg-detail.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 100svh;
}

/* Modal header */
.promo-modal .modal-header {
    background: transparent;
    border-bottom: none;
    padding: 1rem;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 52px;
}

.promo-modal-back-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    padding: 0;
}

.promo-modal-header-title {
    flex: 1;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-right: 34px;
}

/* Modal body */
.promo-modal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 10px 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.promo-modal .modal-body::-webkit-scrollbar {
    display: none;
}

/* White card inside modal */
.promo-detail-card {
    background: #A3450A;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border: 5px solid var(--txt-white);
}

.promo-detail-img {
    width: 100%;
    display: block;
    max-height: 200px;
    object-fit: cover;
}

/* Info below image */
.promo-detail-info {
    padding: 14px 14px 12px;
}

.promo-detail-info-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--txt-white);
    text-align: start;
    margin-bottom: 10px;
    line-height: 1.35;
}

.promo-detail-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.promo-detail-date,
.promo-detail-timer {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--txt-white);
}

.promo-detail-timer {
    background: #FAFAFA33;
    border-radius: 10px;
    padding: 4px 10px;
    font-weight: 700;
    color: var(--txt-white);
    white-space: nowrap;
}

/* Content sections */
.promo-section {
    margin: 0 12px 10px;
    border-radius: 10px;
    overflow: hidden;
    background: #FFFFFF1A;
}

.promo-section:first-of-type {
    margin-top: 12px;
}

.promo-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
}

.promo-section-title {
    font-size: 18px !important;
    font-weight: 600;
    color: var(--txt-white) !important;
}

.promo-section-content {
    padding: 0 14px 14px;
    font-size: 1rem;
    color: var(--txt-white);
    line-height: 1.65;
}

.promo-section-content p,
.promo-section-content li {
    margin-bottom: 4px;
    color: var(--txt-white);
}

.promo-section-chevron {
    flex-shrink: 0;
    transition: transform 0.22s ease;
    color: var(--txt-white);
}

.promo-section-chevron.open {
    transform: rotate(180deg);
}
.promo-section .btn-promo{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 14px 20px;
    gap: 10px;
    border: 4px solid rgba(255, 255, 255, 0.5);
    border-radius: 15px;

}
.promo-section .btn-depositNow{
    background: linear-gradient(90deg, #E93CFF 0%, #FDC892 100%);
}
.promo-modal .modal-body .promo-section .btn-contactUs {
    background: #FEEEDB;
}
/* Must beat .modal:not(.modal-transfer) .modal-body span { color: … !important } (higher specificity) */
.promo-modal .modal-body .promo-section a.btn-depositNow span{
    font-weight: 800;
}
.promo-modal .modal-body .promo-section a.btn-contactUs span {
    color: var(--txt-main) !important;
    font-weight: 800;
}

/* Modal footer */
.promo-modal .modal-footer {
    background: #b86a28;
    border-top: none;
    padding: 10px 14px 22px;
    flex-shrink: 0;
}

.promo-deposit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 20px;
    border-radius: 30px;
    background: linear-gradient(90deg, #d040a8, #b828d8);
    border: none;
    color: #fff !important;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.4px;
    box-shadow: 0 4px 18px rgba(180, 40, 180, 0.5);
    text-decoration: none !important;
    cursor: pointer;
}

/* Utility */
.promo-modal-table-wrapper {
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: 10px;
}

.promo-modal-table-wrapper table td {
    border: 1px solid #ccc;
}
.promo-tab-bar {
    display: flex;
    gap: 6px;
    padding: 12px 14px 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.promo-tab-bar::-webkit-scrollbar {
    display: none;
}
.promo-tab-item {
    flex-shrink: 0;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 700;
    color: #B45101;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    outline: none;
    border-radius: 10px;
    border: 3px solid transparent;
    background:
            linear-gradient(#CAA682, #CAA682) padding-box,
            linear-gradient(180deg, #B2863C 0%, #814018 100%) border-box;
    opacity: 1;
}
.promo-tab-item:focus,
.promo-tab-item.active:focus{
    border: 3px solid transparent !important;
}
.promo-tab-item.active {
    background:
            linear-gradient(#FEEFDA, #FEEFDA) padding-box,
            linear-gradient(180deg, #B2863C 0%, #814018 100%) border-box;
    box-shadow:
            inset 0px -2px 2px #F7B14F,
            inset 0px 2px 2px rgba(255, 255, 255, 0.99);
}
.promo-main > .promo-list-wrapper {
    display: none;
}

.promo-main > .promo-list-wrapper.promo-list-active {
    display: block;
}
/* End Promotion */

/* profile menu */
#profileModal .modal-profile-content {
    border: none;
    border-radius: 0;
    min-height: 100%;
    background: linear-gradient(180deg, rgba(114, 56, 29, 0) 28.01%, #72381D 54.36%), url("../../images/theme19/header/bg-profile.webp");
    background-size: 100% auto;
}
#profileModal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(-100%, 0);
}
#profileModal.show .modal-dialog {
    transform: translate(0, 0);
}
.modal-profile .modal-profile-inner {
    position: relative;
    padding: 12px 16px 28px;
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    overflow-y: auto;
}

.modal-profile-back {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.25);
    color: var(--txt-white);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-profile-user {
    padding: 1.5rem 0 1rem;
}

.modal-profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.45);
    flex-shrink: 0;
}

.modal-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-profile-username {
    text-align: start;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--txt-white);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.modal-profile-idline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 0.9rem;
    color: var(--txt-white);
}

.modal-profile-copy {
    border: none;
    background: transparent;
    color: var(--txt-white);
    padding: 4px;
    line-height: 1;
}

.modal-profile-cards {
    margin-bottom: 12px;
}

.modal-profile-card {
    display: block;
    text-decoration: none;
    background: rgba(255, 248, 235, 0.96);
    border-radius: 14px;
    padding: 10px 12px;
    color: #4a3728;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    height: 100%;
}

.modal-profile-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}

.modal-profile-card-top i {
    font-size: 0.7rem;
    opacity: 0.55;
}

.modal-profile-progress {
    height: 8px;
    border-radius: 6px;
    background: rgba(180, 140, 100, 0.25);
    overflow: hidden;
}

.modal-profile-progress-bar {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #e8a060, #d07040);
}

.modal-profile-card-pct {
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 6px;
    color: #7a5a40;
}

.modal-profile-points-val {
    font-size: 1.1rem;
    font-weight: 800;
    color: #c45c28;
}

.modal-profile-points-val i {
    margin-right: 4px;
    color: #e8a030;
}

.modal-profile-shop {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(90deg, #e07030, #f09840);
    padding: 4px 10px;
    border-radius: 10px;
}

.modal-profile-panel {
    margin-bottom: 12px;
    padding: 8px;
    background: #E5B15B;
    box-shadow: inset 0px 0px 3px #BC7A3C;
    border-radius: 10px;
}
.modal-profile-subpanel{
    padding: 10px;
    background: #FEE8AE;
    box-shadow: 0px 0px 3px 1px #C18140;
    border-radius: 5px;
}
.modal-profile-row,
button.modal-profile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 0;
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.modal-profile-row > img{
    width: 30px;
    height: 30px;
    margin-right: 8px;
}
.modal-profile-row span{
    color: var(--txt-main) !important;
}
.modal-profile-panel .modal-profile-row:last-child {
    border-bottom: none;
}

.modal-profile-row-label {
    flex: 1;
    min-width: 0;
}

.modal-profile-row i.fa-chevron-right {
    font-size: 0.75rem;
    opacity: 0.45;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    gap: 10px;
    width: 30px;
    height: 30px;
    background: #F9D8A2;
    border-radius: 10px;
    color: var(--txt-main);
}

.modal-profile-row-ref {
    gap: 8px;
}

.modal-profile-ref-link {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    color: inherit;
}

.modal-profile-chevron-link {
    color: inherit;
    opacity: 0.45;
    font-size: 0.75rem;
    padding: 4px;
}

.modal-profile-ref-clip {
    font-size: 0.72rem;
    font-weight: 500;
    color: #7a6558;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.modal-profile-row-lang .modal-profile-lang-btn {
    border: none;
    background: rgba(200, 160, 100, 0.35);
    color: #3a2818;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: 10px;
    margin-right: 6px;
}

.modal-profile-row-sound {
    border-bottom: none !important;
}

.modal-profile-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
}

.modal-profile-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.modal-profile-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #ccc;
    border-radius: 26px;
    transition: 0.2s;
}

.modal-profile-switch-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.2s;
}

.modal-profile-switch input:checked + .modal-profile-switch-slider {
    background: #3cb371;
}

.modal-profile-switch input:checked + .modal-profile-switch-slider:before {
    transform: translateX(20px);
}

.modal-profile-logout {
    margin: 8px 0 16px;
    color: #8C6239;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 20px;
    gap: 10px;
    background: #F9D8A2;
    border-radius: 15px;
}

.modal-profile-contact-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 14px;
    font-size: 0.9rem;
    font-weight: 600;
}

.modal-profile-contact-title::before,
.modal-profile-contact-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
}
.modal-profile-contact-title span{
    color: #FEE8AE !important;
}

.modal-profile-social {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.modal-profile-social-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
}

.modal-profile-meta {
    font-size: 0.72rem;
    text-align: center;
    line-height: 1.5;
}

.modal-profile-meta p {
    margin: 0 0 4px;
    color: #FEE8AE;
}

/* End profile modal */

#successModal .modal-content{
    background: url('../../images/theme19/modal/log-regi/bg.png') no-repeat center;
    background-size: 100% 100%;
    border: none;
}
#successModal .btn-enter,
#successModal .copy-btn{
    background: url('../../images/theme19/footer/bgactive.jpg') no-repeat !important;
    background-size: 100% 100% !important;
}
#successModal p{
    color:#bcbcbc;
}
@media (min-width: 640px) {
    .setting-dropdown{
        top: 80px;
    }
    .btn-ammount-header{
        padding: .5rem .75rem;
        max-width: 194px;
        height: 45px;
    }
    .credit-container h4{
        font-size: 1.25rem;
    }
    .btn-ammount-header .refresh_bal img{
        width: 1.625rem !important;
        height: 1.625rem !important;
    }
    .ico-drop-down:before{
        font-size: 30px;
    }
}

/* Bank Details (theme19) */
.bank-details-page{
    background: #fde6ad;
    height: 100%;
    padding: 18px 16px 28px;
}

.bank-details-header{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 6px 0 18px;
}

.bank-details-back{
    position: absolute;
    left: 0;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #8C623933;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.bank-details-back img{
    width: 18px;
    height: 18px;
    filter: brightness(0) saturate(100%) invert(39%) sepia(37%) saturate(593%) hue-rotate(349deg) brightness(95%) contrast(93%);
}

.bank-details-title{
    font-weight: 700;
    color: #8C6239;
}
button.bank-details-add-btn:focus,
.bank-details-add-btn{
    width: 100%;
    border: 2px dashed #905517 !important;
    background: transparent;
    border-radius: 16px;
    padding: 14px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #905517;
    font-weight: 700;
}
.bank-details-add-icon{
    width: 20px;
    height: 20px;
}
.bank-details-add-text{
    color: #905517 !important;
}
.bank-details-list{
    margin-top: 14px;
    display: grid;
    gap: 14px;
}

.bank-details-card{
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),
    linear-gradient(0deg, #FFEFCC, #FFEFCC);
    border: 2px solid #E9BEA8;
    border-radius: 16px;
    padding: 14px;
}

.bank-details-card-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.bank-details-card-bank{
    font-weight: 800;
    color: #B45101;
}

.bank-details-card-badges{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.bank-details-badge{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.bank-details-badge--verified{
    background: #D5FFCE;
}
.bank-details-badge--verified img{
    width: 12px;
    height: 12px;
}
.bank-details-badge--verified span{
    color: #00CF5A;
}
.bank-details-badge--unverified{
    background: #EFC37A;
    color: #72381D;
}
.bank-details-badge--default{
    background: #FFFFFF;
    color: #DD8844;
}

.bank-details-card-holder,
.bank-details-card-number{
    color: #DD8844;
    font-weight: 600;
    font-size: 0.92rem;
}

.bank-details-card-actions{
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.bank-details-action{
    border-radius: 14px;
    padding: 12px 12px;
    font-weight: 800;
    border: 2px solid #85451D;
    background: #FEEFDA;
    color: #323232;
;
}

.bank-details-action--delete{
    border: none;
    background: #FF3B30B2;
    color: var(--txt-white);
}

/* Add Bank Details modal */
.add-bank-details-modal__content{
    background: #FFE7AB;
    height: 100%;
    padding: 18px 16px 28px;
}
.add-bank-details-modal__header{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 6px 0 18px;
}
.add-bank-details-modal__back{
    position: absolute;
    left: 0;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #8C623933;
    display: flex;
    align-items: center;
    justify-content: center;
}
.add-bank-details-modal__back img{
    width: 18px;
    height: 18px;
    filter: brightness(0) saturate(100%) invert(39%) sepia(37%) saturate(593%) hue-rotate(349deg) brightness(95%) contrast(93%);
}
.add-bank-details-modal__title{
    font-weight: 700;
    color: #8C6239;
}

.add-bank-details-modal__body{
    padding: 0;
}
.add-bank-details-field{
    margin-bottom: 14px;
}
.add-bank-details-label{
    font-weight: 700;
    color: #905517;
    margin-bottom: 8px;
    font-size: 0.8rem;
}
.add-bank-details-input-wrap{
    display: flex;
    justify-content: center;
    align-content: center;
    position: relative;
    height: 45px;
    background: #F9D8A2;
    border-radius: 10px;
    padding: 5px 10px 5px 10px;
}
.add-bank-details-control::placeholder{
    color: #90551780;
}
.add-bank-details-control{
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: #905517;
}
.add-bank-details-input-icon{
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(122, 75, 42, 0.85);
}
.add-bank-details-hint{
    margin: 6px 0 0;
    font-size: 0.72rem;
    color: #FF7E00;
}
.add-bank-details-upload{
    border: 2px dashed rgba(122, 75, 42, 0.55);
    background: rgba(255,255,255,0.15);
    border-radius: 16px;
    padding: 14px 12px;
    text-align: center;
}
.add-bank-details-upload-label{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    color: #7a4b2a;
    cursor: pointer;
}
.add-bank-details-qr-empty{ padding: 8px 0; }
.add-bank-details-qr-preview{ margin-top: 0; position: relative; }
.add-bank-details-qr-box{
    margin: 6px auto 0;
    width: min(320px, 92vw);
    background: rgba(255,255,255,0.55);
    border: 2px dashed rgba(122, 75, 42, 0.55);
    border-radius: 16px;
    padding: 12px;
    position: relative;
}
.add-bank-details-qr-img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}
.add-bank-details-qr-change{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 8px 28px;
    border-radius: 999px;
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(122, 75, 42, 0.28);
    color: #2c2c2c;
    font-weight: 900;
    cursor: pointer;
}
.add-bank-details-qr-close{
    position: absolute;
    right: 6px;
    top: 6px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    color: #222;
    font-size: 22px;
    line-height: 34px;
    font-weight: 700;
    z-index: 2;
}
.add-bank-details-footer{
    margin-top: 18px;
    padding-bottom: 8px;
}
.add-bank-details-save{
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 14px 12px;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(90deg, #f05bff 0%, #ff8a65 100%);
}

.add-bank-details-footer--stack{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.add-bank-details-btn-secondary{
    width: 100%;
    border-radius: 12px;
    padding: 14px 12px;
    font-weight: 900;
    color: #8c6239;
    background: rgba(255, 255, 255, 0.55);
    border: 2px solid rgba(140, 98, 57, 0.55);
}

.add-bank-details-label--qr{
    display: flex;
    align-items: center;
    gap: 8px;
}

.add-bank-details-label-corner{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 10px 10px;
    border-color: transparent transparent #f2c14e transparent;
    flex-shrink: 0;
}
/* End bank detail */

/* Point exchange */
.pe-page {
    --pe-cream: #fff5e1;
    --pe-tan: #d2b48c;
    --pe-brown: #5d4037;
    --pe-brown-soft: #8d6e63;
    --pe-footer: #8b4513;
    --pe-orange: #e67e22;
    --pe-panel-bg: #fff9e5;
    --pe-pink: #ff7eb3;
    --pe-star: #ffd54f;
    --pe-coral: #ff6b6b;
    --pe-gradient: linear-gradient(180deg, #7b4fa8 0%, #e85d8c 45%, #f4a45a 100%);
    height: 100%;
    background: url("../../images/theme19/promotion/bg-detail.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.pe-page * {
    box-sizing: border-box;
}

.pe-header {
    position: relative;
}

.pe-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.75rem 1.25rem;
}

.pe-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
}

.pe-icon-btn--help {
    background: #FFE5CC;
}
.pe-icon-btn--help img{
    width: 26px;
    height: 27px;
}

.pe-title {
    flex: 1;
    text-align: center;
    color: var(--txt-white);
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0.5rem;
}

.pe-sign-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url("../../images/theme19/modal/point-exchange/bg-header.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.pe-sign {
    padding: 1rem 2.5rem 6rem;
    position: relative;
    text-align: center;
}

.pe-my-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    margin-bottom: 0.35rem;
}

.pe-points-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: #fff;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.pe-star {
    color: var(--pe-star);
    font-size: 1.35rem;
    line-height: 1;
}

.pe-tabs {
    display: flex;
    margin: 0 0.25rem;
    margin-top: -1px;
    position: relative;
    z-index: 1;
}

.pe-tab {
    flex: 1;
    text-align: center;
    padding: 0.65rem 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    border: none;
    border-radius: 12px 12px 0 0;
    background: #b8956a;
    color: #4a3228;
    cursor: pointer;
    line-height: 1.2;
}

.pe-tab.is-active {
    background: var(--pe-cream);
    color: var(--pe-orange);
}

.pe-tab:focus-visible {
    outline: 2px solid var(--pe-orange);
    outline-offset: 2px;
}

.pe-shell {
    background: #2d2520;
    padding: 0 0.5rem 1rem;
    min-height: 50vh;
}

.pe-panel-wrap {
    background: var(--pe-panel-bg);
    border-radius: 0 0 18px 18px;
    border: 2px solid #c4a574;
    border-top: none;
    padding: 0.75rem;
    min-height: 280px;
}

.pe-panel {
    display: none;
}

.pe-panel.is-active {
    display: block;
}

.pe-pills {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.35rem;
    margin-bottom: 0.75rem;
    -webkit-overflow-scrolling: touch;
}

.pe-pills::-webkit-scrollbar {
    height: 4px;
}

.pe-pill {
    flex: 0 0 auto;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: none;
    font-size: 0.75rem;
    font-weight: 700;
    background: #e8d4b0;
    color: var(--pe-brown);
    cursor: pointer;
    white-space: nowrap;
}

.pe-pill.is-active {
    background: var(--pe-cream);
    color: var(--pe-orange);
}

.pe-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.pe-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.pe-card-img {
    position: relative;
    background: #f0e0c8;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #a08060;
    font-size: 1.1rem;
}

.pe-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.2rem 0.45rem;
    border-radius: 8px;
    background: #4caf50;
    color: #fff;
}

.pe-badge--out {
    background: #f8bbd0;
    color: #6d4c41;
}

.pe-card-foot {
    background: var(--pe-footer);
    color: #fff;
    padding: 0.5rem 0.45rem;
    font-size: 0.72rem;
}

.pe-card-name {
    font-weight: 700;
    margin-bottom: 0.25rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pe-card-cost {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-weight: 700;
}

.pe-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff3d6;
    border-radius: 12px;
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.5rem;
    border: 1px solid #e8d5a8;
    text-decoration: none;
    color: inherit;
}

.pe-list-row--exchange {
    background: #ffe8c8;
    border-color: #e0c49a;
}

.pe-hist-type--earn {
    color: var(--pe-orange);
    font-weight: 700;
    font-size: 0.8rem;
}

.pe-hist-type--spent {
    color: var(--pe-footer);
    font-weight: 700;
    font-size: 0.8rem;
}

.pe-hist-time {
    font-size: 0.7rem;
    color: var(--pe-brown-soft);
    margin-top: 0.15rem;
}

.pe-hist-amt {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-weight: 800;
    font-size: 0.95rem;
}

.pe-ex-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.pe-ex-thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff5252, #c62828);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    flex-shrink: 0;
    position: relative;
}

.pe-ex-qty {
    position: absolute;
    top: -6px;
    left: -6px;
    background: var(--pe-pink);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 0.1rem 0.35rem;
    border-radius: 8px;
}

.pe-ex-meta {
    min-width: 0;
}

.pe-ex-name {
    font-weight: 800;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pe-ex-time {
    font-size: 0.68rem;
    color: var(--pe-brown-soft);
}

.pe-ex-right {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 800;
    flex-shrink: 0;
}

.pe-filter .pe-pill.is-active {
    background: #fff;
    border: 2px solid var(--pe-brown);
    color: var(--pe-brown);
}

.pe-filter .pe-pill:not(.is-active) {
    background: #e8d4b0;
}

.pe-addr-card {
    background: #fffdf6;
    border: 2px solid #d7c4a3;
    border-radius: 14px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    position: relative;
}

.pe-addr-default {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.62rem;
    background: #fff;
    border: 1px solid #c4a574;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    font-weight: 700;
    color: var(--pe-brown);
}

.pe-addr-name {
    font-weight: 800;
    margin-bottom: 0.25rem;
    padding-right: 4rem;
}

.pe-addr-line {
    font-size: 0.78rem;
    color: var(--pe-brown-soft);
    line-height: 1.35;
}

.pe-addr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.65rem;
}

.pe-btn {
    flex: 1;
    min-width: calc(33% - 0.4rem);
    padding: 0.5rem 0.35rem;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    text-align: center;
}

.pe-btn-outline {
    background: #fff;
    border: 2px solid var(--pe-brown);
    color: var(--pe-brown);
}

.pe-btn-danger {
    background: var(--pe-coral);
    color: #fff;
}

.pe-btn-gradient {
    background: linear-gradient(90deg, #9c27b0, #ff69b4);
    color: #fff;
}

.pe-add-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.pe-btn-add {
    padding: 0.55rem 1rem;
    border-radius: 12px;
    border: none;
    font-weight: 700;
    font-size: 0.78rem;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(90deg, #7b1fa2, #ff69b4);
}

.pe-card[hidden] {
    display: none !important;
}
/* Point Guide Modal */
.pe-card-prize-img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    display: block;
}

/* ── Points Guide Modal (peg-) ── */
.peg-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
}

.peg-overlay.is-open {
    pointer-events: auto;
}

.peg-sheet {
    position: absolute;
    inset: 0;
    background: #FFE8AE;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform 0.30s cubic-bezier(0.32, 0.72, 0, 1);
}

.peg-overlay.is-open .peg-sheet {
    transform: translateX(0);
}

/* Top bar */
.peg-topbar {
    padding: 0.8rem 1rem 0;
}

.peg-back-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #8C623933;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.peg-back-btn img{
    filter: brightness(0) saturate(100%) invert(38%) sepia(36%) saturate(648%) hue-rotate(348deg) brightness(97%) contrast(88%);
}

/* Body scroll area */
.peg-body {
    padding: 0.5rem 1rem 2.5rem;
}

/* Hero */
.peg-hero {
    padding: 0.9rem 0 1.4rem;
    text-align: center;
}

.peg-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: linear-gradient(90deg, #E93CFF 0%, #FDC892 100%);
    color: var(--txt-white);
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 0.28rem 0.85rem;
    border-radius: 1rem;
    margin-bottom: 0.75rem;
    border: 2px solid #FFFFFF80;
}

.peg-hero-title {
    font-size: 32px;
    font-weight: 800;
    color: #512400;
    line-height: 1.15;
    text-align: center;
}
.peg-hero-title2{
    color: #DA9100;
    font-weight: 800;
    font-size: 48px;
    text-align: center;
    margin: 0 0 0.65rem;
}

.peg-hero-sub {
    color: var(--txt-fifth);
    line-height: 1.55;
    margin: 0;
    text-align: center;
}

/* Section wrapper */
.peg-section {
    margin-bottom: 1.4rem;
}

/* Section header row */
.peg-section-head {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 0.7rem;
}

.peg-num {
    width: 52px;
    height: 52px;
    border-radius: 7px;
    background: #F7A604;
    color: var(--txt-white);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.05rem;
}

.peg-section-title {
    font-weight: 900;
    font-size: 24px;
    color: var(--txt-fifth);
    line-height: 1.2;
}

.peg-section-sub {
    font-size: 14px;
    color: var(--txt-fifth);
    margin-top: 0.15rem;
    line-height: 1.35;
}

/* Card – vertical (illustration on top, text below) */
.peg-card {
    background: #FFEFCC;
    border: 4px solid var(--bd-fifth);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.peg-card-ill {
    display: flex;
    align-items: center;
    justify-content: start;
    font-size: 4.5rem;
}
.peg-card-ill img{
    height: 110px;
}
.peg-card-body {
    padding: 0.75rem 0.9rem 0.9rem;
}

.peg-card-title {
    font-weight: 800;
    font-size: 20px;
    color: var(--txt-fifth);
    margin-bottom: 0.35rem;
    line-height: 1.2;
}

.peg-card-desc {
    font-size: 14px;
    color: var(--txt-fifth);
    line-height: 1.55;
    margin: 0;
}

/* Card – horizontal (text left, illustration right) */
.peg-card--h {
    display: flex;
    align-items: stretch;
    min-height: 120px;
}

.peg-card--h .peg-card-body {
    flex: 1;
    padding: 0.85rem 0.9rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.peg-card--h .peg-card-ill {
    width: 120px;
    height: auto;
    flex-shrink: 0;
    border-radius: 0;
    font-size: 3.8rem;
}

/* Policy box */
.peg-policy {
    background: #FFEFCD;
    border: 4px solid var(--bd-fifth);
    border-radius: 14px;
    padding: 0.9rem 1rem;
}

.peg-policy-title {
    font-weight: 800;
    font-size: 20px;
    color: var(--txt-fifth);
    margin-bottom: 0.45rem;
}

.peg-policy-desc {
    font-size: 14px;
    color: var(--txt-fifth);
    line-height: 1.55;
    margin: 0 0 0.6rem;
}

.peg-policy-list {
    margin: 0;
    padding-left: 1.5rem;
    list-style-type: disc;
}

.peg-policy-list li {
    font-size: 14px;
    color: var(--txt-fifth);
    line-height: 1.7;
    margin-bottom: 4px;
}

/* FAQ */
.peg-faq {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.peg-faq-item {
    background: #FFEFCD;
    border: 2px solid var(--bd-fifth);
    border-radius: 14px;
    overflow: hidden;
}

.peg-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1rem;
    border: none;
    background: transparent;
    font-weight: 700;
    font-size: 20px;
    color: var(--txt-fifth);
    cursor: pointer;
    text-align: left;
    gap: 0.5rem;
}

.peg-faq-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-fifth);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 3px solid var(--bd-white);
    transition: transform 0.25s ease;
    margin-top: 7px;
}

.peg-faq-item.is-open .peg-faq-icon {
    transform: rotate(180deg);
}

.peg-faq-a {
    padding: 0.65rem 1rem 0.9rem;
}

.peg-faq-a p {
    margin: 0;
    font-size: 14px;
    color: var(--txt-fifth);
    line-height: 1.6;
}
/* End point exchange */

/* referral page */
.rf-page {
    min-height: 100%;
    background: linear-gradient(0deg, #00000066, #00000066), url("../../images/theme19/modal/referral/bg-page.webp"), #874048;
    background-size: 210% 115%;
    background-repeat: no-repeat;
    background-position: 38% 170%;
    position: relative;
}
.rf-page * { box-sizing: border-box; }

/* ── topbar ─────────────────────────────────────── */
.rf-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem 0.6rem;
}
.rf-back-btn {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(255,255,255,0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}
.rf-topbar-title {
    color: var(--txt-white);
    font-weight: 700;
}
.rf-help-btn {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: #FFE5CC;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}
.rf-help-btn img{
    width: 24px;
    height: 24px;
}
/* ── hero banner ─────────────────────────────────── */
.rf-banner {
    background: url("../../images/theme19/modal/referral/bg-banner.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 3rem 1rem 2rem;
    padding: 1.25rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.rf-divider-left {
    width: 3px;
    height: 100%;
    background: #E99C67;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-125px, -100%);
}
.rf-divider-right {
    width: 3px;
    height: 100%;
    background: #E99C67;
    position: absolute;
    top: 0;
    right: 50%;
    transform: translate(125px, -100%);
}
.rf-logo {
    width: 250px;
    height: 80px;
    background: url("../../images/theme19/modal/referral/logo.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0, -60%);
    z-index: 10;
}

/* ── stats row ───────────────────────────────────── */
.rf-stat {
    flex: 1;
    border-radius: 5px;
    padding: 0px 10px;
    position: relative;
    overflow: hidden;
    min-height: 87px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 10px;
}
.rf-stat-earned {
    background-color: #D4B494;
    background-image: url("../../images/theme19/modal/referral/icon-earn.png");
    background-size: 60% auto;
    background-position: 140% 15%;
    background-repeat: no-repeat;
    background-blend-mode: soft-light;
}
.rf-stat-referred {
    background-color: #D4B494;
    background-image: url("../../images/theme19/modal/referral/icon-refer.png");
    background-size: 38% auto;
    background-position: 105% 160%;
    background-repeat: no-repeat;
    background-blend-mode: soft-light;
}
.rf-stat-label {
    font-size: 14px;
    color: var(--txt-fourth);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.2rem;
    padding-right: 2rem;
}
.rf-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--txt-fourth);
    line-height: 1;
}

/* ── tabs ────────────────────────────────────────── */
.rf-tabs {
    display: flex;
    margin: 0 1.75rem;
    overflow: hidden;
    gap: 5px
}
.rf-tab {
    flex: 1;
    text-align: center;
    padding: 0.65rem 0.35rem;
    border-radius: 10px 10px 0 0;
    font-size: 14px;
    font-weight: 600;
    background: #D4B494;
    color: #B27849;
    cursor: pointer;
    line-height: 1.2;
    transition: background 0.2s, color 0.2s;
}
.rf-tab.is-active {
    background: linear-gradient(154.37deg, #FFF3D8 16.21%, #FEE4A6 61.73%);
    color: var(--txt-fifth);
    font-weight: 800;
    border-radius: 12px 12px 0 0;
}

/* ── panel wrapper ───────────────────────────────── */
.rf-panel-wrap {
    margin: 0 1rem;
    overflow: hidden;
    padding: 26px 24px;
    background-image: url("../../images/theme19/modal/referral/bg-body.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    height: calc(100vh - 320px);
}
.rf-panel { display: none; }
.rf-panel.is-active { display: block; }

/* ── Invitation panel ────────────────────────────── */
.rf-field-group { margin-bottom: 2.5rem; }

.rf-field-label {
    display: block;
    color: var(--txt-fifth);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 0.35rem;
}
.rf-field-row {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}
.rf-input {
    flex: 1;
    min-width: 0;
    height: 45px;
    background: #D4B494;
    border-radius: 10px;
    padding: 10px;
    font-size: 14px;
    color: #7C3818;
    outline: none;
}
.rf-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 45px;
    padding: 14px 20px;
    background: linear-gradient(90deg, #E93CFF 0%, #FDC892 100%);
    color: var(--txt-white);
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
}
.rf-copy-btn:active { opacity: 0.82; }
.rf-copy-btn svg { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; }

.rf-submit-btn {
    display: block;
    width: 100%;
    padding: 0.85rem;
    background: linear-gradient(90deg, #E93CFF 0%, #FDC892 100%);
    color: var(--txt-white);
    border-radius: 10px;
    font-weight: 800;
    cursor: pointer;
    margin-bottom: 1.1rem;
    letter-spacing: 0.03em;
}

.rf-share-label {
    text-align: center;
    font-weight: 500;
    color: var(--txt-fifth);
    margin: 1.5rem !important;
}
.rf-socials {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.5rem;
}
.rf-social-row {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
}
.rf-social-icon {
    width: 46px; height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s;
}
.rf-social-icon:active { transform: scale(0.90); }

/* ── Records panel ───────────────────────────────── */
.rf-records-list {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: calc(100vh - 370px);
}
.rf-record-row {
    height: 50px;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0 1rem 0 0;
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
    margin-bottom: 16px;
}
.rf-record-row:last-child { border-bottom: none; }
.rf-record-row:active,
.rf-record-row:focus { background: #fdefc0; outline: none; }

.rf-avatar {
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rf-avatar img { 
    width: 50px; 
    height: 50px; 
    object-fit: cover; 
}

.rf-record-meta { flex: 1; min-width: 0; }
.rf-record-name {
    font-weight: 700;
    color: var(--txt-fifth);
    line-height: 1.25;
}
.rf-record-time {
    font-size: 14px;
    color: var(--txt-fifth);
    margin-top: 0.1rem;
}
.rf-record-amount {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0F9700;
    flex-shrink: 0;
}

/* ── Details modal (bottom-sheet) ────────────────── */
.rf-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0);
    z-index: 8888;
    pointer-events: none;
    transition: background 0.25s ease;
}
.rf-detail-overlay.is-open {
    background: rgba(0,0,0,0.48);
    pointer-events: auto;
}
.rf-detail-sheet {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: #FFF4D8;
    border-radius: 1rem 1rem 0 0;
    padding: 22px 24px;
    transform: translateY(100%);
    transition: transform 0.30s cubic-bezier(0.32, 0.72, 0, 1);
}
.rf-detail-overlay.is-open .rf-detail-sheet {
    transform: translateY(0);
}
.rf-detail-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 1rem;
}
.rf-detail-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--txt-black);
}
.rf-detail-close {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-60%);
    width: 32px; 
    height: 32px;
    border-radius: 50%;
    background: var(--bg-white);
    color: var(--txt-black);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.rf-detail-content{
    background: #FFFFFF99;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rf-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.rf-detail-key {
    color: var(--txt-fourth);
}
.rf-detail-val {
    font-weight: 700;
    color: var(--txt-fourth);
}
/* end referral page */

/* edit profile page */
.ep-page {
    --ep-page-bg:   #72381D;
    --ep-card-bg:   #FEE8AE;
    --ep-input-bg:  #F9D8A2;
    --ep-title:     #B64B06;
    --ep-warn:      #FF7E00;
    --ep-muted:     #DA9C74;
    --ep-grad-save: linear-gradient(90deg, #E93CFF 0%, #FDC892 100%);
    --ep-grad-blue: #2AAAEE;
    background: var(--ep-page-bg);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}
.ep-page * { box-sizing: border-box; }

/* ── main scroll area ──────────────────────── */
.ep-main {
    display: flex;
    flex-direction: column;
}

/* ── topbar ────────────────────────────────── */
.ep-topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--ep-page-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem 0.6rem;
}
.ep-back-btn {
    width: 38px; height: 38px;
    border-radius: 10px;
    padding: 5px;
    background: rgba(255,255,255,0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.ep-topbar-title {
    color: var(--txt-white);
    font-weight: 700;
    flex: 1;
    text-align: center;
}
.ep-topbar-spacer { width: 36px; flex-shrink: 0; }

/* ── avatar header ─────────────────────────── */
.ep-avatar-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0 1.5rem;
}
.ep-avatar-wrap {
    position: relative;
}
.ep-avatar-wrap img {
    width: 100px; height: 100px;
    border-radius: 50%;
    object-fit: cover;
}
.ep-avatar-edit {
    position: absolute;
    bottom: 2px; right: 2px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--bg-white);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.ep-avatar-edit img {
    width: 100%; height: 100%;
    object-fit: none;
}
/* ── body padding ──────────────────────────── */
.ep-body {
    flex: 1;
    padding: 0 0.85rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── section cards ─────────────────────────── */
.ep-card {
    background: var(--ep-card-bg);
    border-radius: 15px;
    padding: 20px 15px;
}
.ep-card-title {
    font-weight: 700;
    color: var(--ep-title);
    margin-bottom: 0.75rem;
}

/* ── field group ───────────────────────────── */
.ep-field { margin-bottom: 0.7rem; }
.ep-field:last-child { margin-bottom: 0; }
.ep-field-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--ep-title);
    margin-bottom: 0.3rem;
}
.ep-input {
    width: 100%;
    height: 45px;
    background: var(--ep-input-bg);
    border-radius: 10px;
    padding: 5px 20px 5px 14px;
    color: var(--ep-title);
}
.ep-input::placeholder { color: var(--ep-muted); }
.ep-input-icon-wrap {
    position: relative;
}
.ep-input-icon-wrap .ep-input {
    padding-right: 2.4rem;
}
.ep-input-icon {
    position: absolute;
    right: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.ep-warn-text {
    font-size: 0.75rem;
    color: var(--ep-warn);
    margin-top: 0.25rem;
    line-height: 1.35;
}

/* ── label-row (label + badge) ─────────────── */
.ep-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.3rem;
}
.ep-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
}
.ep-badge--unverified {
    background: #EFC37A;
    color: #72381D;
}
.ep-badge--verified {
    background: #d4edda;
    color: #155724;
}

/* ── input + button row ─────────────────────── */
.ep-input-btn-row {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    position: relative;
}
.ep-input-btn-row .ep-input { flex: 1; min-width: 0; }

/* ── small action buttons ────────────────────── */
.ep-btn {
    width: 82px;
    height: 35px;
    background: linear-gradient(90deg, #E93CFF 0%, #FDC892 100%);
    border: 1px solid var(--bd-white);
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--txt-white);
    position: absolute;
    right: 5px;
}
.ep-btn-tele   { background: var(--ep-grad-blue); }

/* ── phone field row ─────────────────────────── */
.ep-phone-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    position: relative;
}
.ep-country-sel {
    width: 90px;
    background: var(--bg-white);
    border-radius: 8px;
    padding: 0.6rem 0.4rem;
    font-size: 0.78rem;
    color: var(--ep-title);
    cursor: pointer;
    text-align: center;
    position: absolute;
    left: 5px;
}
.ep-country-sel:focus {
    outline: none;
}
.ep-phone-input {
     flex: 1; 
     min-width: 0;
}

/* ── security row ────────────────────────────── */
.ep-security-row {
    height: 45px;
    background: var(--ep-input-bg);
    color: var(--ep-title);
    border-radius: 10px;
    padding: 5px 20px 5px 14px;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
}
.ep-security-icon {
    display: flex; align-items: center; justify-content: center;
}
.ep-security-label {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ep-text);
}
.ep-security-arrow {
    color: var(--ep-muted);
    font-size: 1rem;
}

/* ── currency row ────────────────────────────── */
.ep-currency-row {
    display: flex;
    align-items: center;
    background: var(--ep-input-bg);
    border: 1.5px solid var(--ep-input-bdr);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    gap: 0.5rem;
}
.ep-currency-icon { font-size: 1rem; }
.ep-currency-text {
    flex: 1;
    font-weight: 500;
    color: var(--ep-title);
}
.ep-currency-fixed {
    font-size: 0.75rem;
    color: var(--ep-title);
}
.ep-lock-icon { color: #c07830; font-size: 0.85rem; }

/* ── save button ─────────────────────────────── */
.ep-save-btn {
    display: block;
    width: 100%;
    padding: 0.9rem;
    background: var(--ep-grad-save);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    margin-top: 0.25rem;
    letter-spacing: 0.03em;
}
.ep-footer-text {
    text-align: center;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.55);
    padding: 0.6rem 0 1rem;
}

/* ════════════════════════════════════════════
   CHANGE PASSWORD OVERLAY  (ep-cpwd-)
════════════════════════════════════════════ */
.ep-cpwd-overlay {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
.ep-cpwd-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
.ep-cpwd-box {
    background: var(--ep-card-bg);
    border-radius: 20px;
    padding: 1.25rem 1.25rem 1.5rem;
    width: 100%;
    max-width: 380px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
.ep-cpwd-overlay.is-open .ep-cpwd-box {
    opacity: 1;
    pointer-events: auto;
}
.ep-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1rem;
}
.ep-modal-title {
    font-size:19px;
    font-weight: 800;
    color: var(--ep-title);
}
.ep-modal-close {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--bg-white);
    color: var(--txt-black);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.ep-pwd-field { margin-bottom: 0.85rem; }
.ep-pwd-field:last-of-type { margin-bottom: 1.1rem; }
.ep-pwd-input-wrap {
    position: relative;
}
.ep-pwd-input-wrap .ep-input {
    padding-right: 2.5rem;
    letter-spacing: 0.12em;
}
.ep-eye-btn {
    position: absolute;
    right: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ep-muted);
    font-size: 0.95rem;
    padding: 0;
    display: flex; align-items: center;
}
.ep-cpwd-submit {
    display: block;
    width: 100%;
    padding: 0.85rem;
    background: var(--ep-grad-save);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
}

/* ════════════════════════════════════════════
   SELECT AVATAR OVERLAY  (ep-av-)
════════════════════════════════════════════ */
/* ── avatar overlay — centered modal ── */
.ep-av-overlay {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
.ep-av-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
/* centered card */
.ep-av-card {
    background: var(--ep-page-bg);
    border-radius: 20px;
    width: 100%;
    max-width: 380px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
.ep-av-overlay.is-open .ep-av-card {
    opacity: 1;
    pointer-events: auto;
}
.ep-av-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem 0.75rem;
}
.ep-av-title {
    color: var(--txt-white);
    font-size: 18px;
    font-weight: 500;
}
.ep-av-grid {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 0.75rem 1rem 1rem;
}
.ep-av-item {
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s;
    padding: 0;
    background: none;
}
.ep-av-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.ep-av-item.is-selected {
    border-color: #2196f3;
    box-shadow: 0 0 0 2px rgba(33,150,243,0.35);
}
.ep-av-footer {
    padding: 0.75rem 1rem 1rem;
}
.ep-av-save {
    display: block;
    width: 100%;
    padding: 0.85rem;
    background: var(--ep-grad-save);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
}

/* ════════════════════════════════════════════
   VERIFY OTP SCREEN  (ep-vfy-)
════════════════════════════════════════════ */
.ep-vfy-screen {
    position: fixed;
    inset: 0;
    z-index: 1070;
    background: var(--ep-card-bg);
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
.ep-vfy-screen.is-open {
    opacity: 1;
    pointer-events: auto;
}
.ep-vfy-topbar {
    padding: 0.85rem 1rem 0.5rem;
    flex-shrink: 0;
}
.ep-vfy-back {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: #FFFFFF33;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.ep-vfy-back img {
    width: 100%; height: 100%;
    object-fit: none;
    filter: brightness(0) saturate(100%) invert(38%) sepia(36%) saturate(648%) hue-rotate(348deg) brightness(97%) contrast(88%);
}
.ep-vfy-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 1.5rem 2rem;
    overflow-y: auto;
}
.ep-vfy-icon-wrap {
    width: 138px; height: 138px;
    border-radius: 50%;
    background: #B4510130;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.2rem;
}
.ep-vfy-icon-inner {
    width: 92px; height: 92px;
    border-radius: 50%;
    background: #FD862C;
    display: flex; align-items: center; justify-content: center;
    color: var(--txt-white);
}
.ep-vfy-icon-inner img{
    width: 58px; height: 58px;
    object-fit: none;
}
.ep-vfy-title {
    font-size: 1.4rem;
    font-weight: 900;
    color: #424242;
    text-align: center;
    margin-bottom: 0.4rem;
}
.ep-vfy-sub {
    font-size: 0.8rem;
    color: #757575;
    text-align: center;
    margin-bottom: 0.2rem;
}
.ep-vfy-target {
    font-size: 0.88rem;
    font-weight: 700;
    color: #e05800;
    text-align: center;
    margin-bottom: 1.4rem;
}
.ep-vfy-code-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: #8d6e63;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    text-align: center;
}
.ep-otp-row {
    display: flex;
    gap: 9px;
    justify-content: center;
    margin-bottom: 2rem;
    width: 100%;
}
.ep-otp-box {
    width: calc((100% - 45px) / 6);
    max-width: 48px;
    aspect-ratio: 0.88;
    background: #f5e9c4;
    border: 1.5px solid #dfc690;
    border-radius: 10px;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: #3d2000;
    outline: none;
    transition: border-color 0.15s;
}
.ep-otp-box:focus {
    border-color: #e87720;
    box-shadow: 0 0 0 2px rgba(232,119,32,0.18);
}
.ep-vfy-submit {
    display: block;
    width: 100%;
    padding: 0.9rem;
    background: var(--ep-grad-save);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    margin-bottom: 1.1rem;
}
.ep-vfy-resend {
    font-size: 0.78rem;
    color: #8d6e63;
    text-align: center;
    margin-bottom: 0.55rem;
}
.ep-vfy-resend a {
    color: #e05800;
    font-weight: 700;
    text-decoration: none;
}
.ep-vfy-support {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: #e05800;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
/* end edit profile page */

/* Withdrawal page */
#withdralModal{
    --wth-bg-first: #D4B494;
    --wth-btn-active: linear-gradient(154.37deg, #FFF3D8 16.21%, #FEE4A6 61.73%);
    --wth-txt-label: #905517;
    --wth-txt-balance: #8C6239;
    background: #00000066;
}
.wth-modal-content {
    background: transparent;
    border: none;
    box-shadow: none;
}
.wth-panel {
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 92vh;
}

/* ── Banner ───────────────────────────────────────── */
.wth-banner {
    position: relative;
    min-height: 88px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    flex-shrink: 0;
}
.wth-banner-logo {
    position: absolute;
    height: 90px;
    bottom: 0;
    left: 0;
    transform: translate(0, 12%);
}
.wth-contact-btn {
    position: absolute;
    top: 10px;
    right: 52px;
    background: transparent;
    width: 36px; height: 36px;
}
.wth-close-btn {
    background: transparent;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.wth-banner-contact img,
.wth-close-btn img {
    width: 100%; height: 100%;
    object-fit: none;
}

/* ── Tabs ─────────────────────────────────────────── */
.wth-tabs {
    display: flex;
    padding: 0 10px 0;
    gap: 5px;
}
.wth-tab-btn {
    flex: 1;
    padding: 8px 15px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    color: rgba(255,255,255,0.5);
    background: var(--wth-bg-first);
    transition: all 0.18s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wth-tab-btn.is-active {
    background: var(--wth-btn-active);
    color: var(--txt-fifth);
}

/* ── Bank selector ────────────────────────────────── */
.wth-banks-wrap {
    background-image: url("../../images/theme19/modal/withdraw/bg-menu.webp");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 1rem;
}
.wth-banks {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.wth-banks::-webkit-scrollbar { display: none; }
.wth-bank-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 56px;
    height: 45px;
    padding: 6px 12px 6px 6px;
    border-radius: 10px;
    background: var(--wth-bg-first);
    color: var(--txt-white);
    cursor: pointer;
    transition: border-color 0.15s;
}
.wth-bank-btn.is-active   { background: var(--third); }
.wth-bank-logo {
    width: 36px; height: 36px;
    object-fit: contain;
    display: block;
    border-radius: 10px;
}
.wth-bank-name {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    line-height: 1.1;
    color: var(--txt-white);
}

/* ── Scrollable body ──────────────────────────────── */
.wth-body-wrap {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Tab panes ────────────────────────────────────── */
.wth-pane { display: none; }
.wth-pane.is-active { display: block; }

/* ── Form card ────────────────────────────────────── */
.wth-card {
    background-image: url("../../images/theme19/modal/withdraw/bg-body.webp");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 58px 30px 45px;
    height: 50vh;
}

.wth-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 1rem;
}
.wth-field-row:last-child { border-bottom: none; }

.wth-field-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--wth-txt-label);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}
.wth-info-icon {
    width: 24px; 
    height: 24px;
}
.wth-field-value {
    font-size: 0.8rem;
    font-weight: 700;
    color: #3d2000;
    text-align: right;
}
.wth-turnover-val {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    background: var(--wth-bg-first);
    border-radius: 10px;
    padding: 5px 10px;
    flex: 1;
    color: var(--txt-white);
}
.wth-turnover-val span {
    font-size: 14px;
    font-weight: 700;
    color: var(--txt-white);
}
.wth-turnover-val span:last-child {
    font-weight: 400;
}
.wth-amount-wrap {
    height: 45px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--wth-bg-first);
    border-radius: 10px;
    padding: 5px 10px;
    flex: 1;
    justify-content: space-between;
}
.wth-amount-input {
    background: none;
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: 700;
    color: var(--txt-white);
    width: 80px;
    min-width: 0;
}
.wth-amount-input::placeholder {
    color: #FFFFFF4D;
}
.wth-currency-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--txt-white);
    flex-shrink: 0;
}
.wth-balance-note {
    font-size: 14px;
    color: var(--wth-txt-balance);
    text-align: right;
    padding: 2px 14px 8px;
}
.wth-locked-val {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    background: var(--wth-bg-first);
    border-radius: 10px;
    padding: 5px 10px;
    flex: 1;
}
.wth-locked-val span {
    font-size: 14px;
    color: var(--txt-white);
}
.wth-locked-val img {
    width: 24px; height: 24px;
    object-fit: contain;
}

/* ── Submit button ────────────────────────────────── */
.wth-submit-btn {
    display: block;
    width: calc(100% - 20px);
    margin: 12px 10px;
    padding: 14px;
    background: linear-gradient(90deg, #e91e8c, #ff6b35);
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 14px rgba(233,30,140,0.35);
}
.wth-submit-btn:active {
    filter: brightness(0.92);
}

/* ── Bank Account (fix-bank) pane ─────────────────── */
.wth-fixbank-wrap {
    padding: 0 10px;
}
.wth-fixbank-wrap .center-contant { padding: 0 !important; }

/* ── hidden tab-main shim (backward-compat) ───────── */
.wth-tab-shim { display: none; }


.wth-fb-input-wrap{
    background: var(--wth-bg-first);
    border-radius: 10px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    height: 45px;
    flex: 1;
}
.wth-fb-input-wrap input {
    background: none;
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: 700;
    color: var(--txt-white);
}

/* end Withdrawal page */

/* Deposit page */
#depositModal{
    --depo-bg-first: #D4B494;
    --depo-btn-active: linear-gradient(154.37deg, #FFF3D8 16.21%, #FEE4A6 61.73%);
    --depo-txt-label: #905517;
    --depo-txt-balance: #8C6239;
    --depo-bd-first: #905517;
    background: #00000088;
}
.dpo-modal-content { background:transparent; border:none; box-shadow:none; }
.dpo-panel {
    border-radius:18px; overflow:hidden;
    display:flex; flex-direction:column; max-height:92vh;
}

/* ── Banner ── */
.dpo-banner {
    position:relative; min-height:88px;
    background:transparent;
    overflow:hidden; display:flex; align-items:center; padding:10px 14px;
}
.dpo-banner-logo  { 
    position:absolute; 
    bottom: 0;
    left: 0;
    transform: translate(0, 20%); 
    height:90px; 
    object-fit:contain; 
    z-index:1; 
}
.dpo-banner-actions { 
    position: absolute;
    top: 10px;
    right: 52px;
    z-index: 2;
    display: flex;
    gap: 12px;
    align-items: center;
}
.dpo-banner-icon {
    width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.18);
    border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:.85rem;
}
.dpo-close-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 5;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.dpo-close-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ── Tabs ── */
.dpo-tabs { display:flex; gap:5px; padding:0 12px 0;}
.dpo-tab-btn {
    flex:1; padding:12px 6px; 
    border-radius:12px 12px 0 0;
    font-size:.75rem; 
    font-weight:600; cursor:pointer;
    background:var(--depo-bg-first); 
    transition:all .18s; white-space:nowrap; 
    overflow:hidden; text-overflow:ellipsis;
    color:var(--depo-txt-label);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
.dpo-tab-btn.is-active { 
    background:var(--depo-btn-active); 
    color:var(--txt-fifth); 
    font-weight:700; 
}
.dpo-tab-btn.is-active img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(94%) saturate(1700%) hue-rotate(20deg) brightness(96%) contrast(99%);
}

/* ── Bank row ── */
.dpo-banks-wrap { 
    background-image: url("../../images/theme19/modal/deposit/bg-menu.webp"); 
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 14px 16px;
}
.dpo-banks { 
    display:flex; 
    gap:7px; 
    overflow-x:auto; 
    -webkit-overflow-scrolling:touch; 
    scrollbar-width:none; 
}
.dpo-banks::-webkit-scrollbar { display:none; }
.dpo-bank-btn {
    display:flex; 
    align-items:center; 
    justify-content:center; 
    gap:3px;
    padding:6px 12px 6px 6px; 
    border-radius:10px; 
    height: 45px;
    background:var(--depo-bg-first); 
    color:var(--txt-white); 
    font-weight:700; cursor:pointer;
}
.dpo-bank-btn.is-active {
    background: var(--third);
}
.dpo-bank-logo { width:36px; height:36px; object-fit:contain; display:block; border-radius: 10px;}
.dpo-bank-name { font-size: 14px; font-weight:600; text-align:center; line-height:1.1; color:var(--txt-white); }

/* ── Scrollable body ── */
.dpo-body-wrap { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.dpo-pane { display:none; }
.dpo-pane.is-active { display:block; }

/* ── Gateway dropdown ── */
.dpo-gateway-wrap { 
    position:relative; 
    margin:10px 10px 0; 
    background-image: url("../../images/theme19/modal/deposit/bg-menu.webp");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.dpo-gateway-btn {
    width:100%; padding:10px 14px; background:#f5e8b0; border:1.5px solid #c8a030;
    border-radius:10px; font-size:.82rem; font-weight:600; color:#5c3a00;
    display:flex; align-items:center; justify-content:space-between; cursor:pointer;
    text-align:left;
}
.dpo-gateway-btn .dpo-chevron { font-size:.7rem; color:#8a6800; transition:transform .2s; }
.dpo-gateway-btn.is-open .dpo-chevron { transform:rotate(180deg); }
.dpo-gateway-list {
    position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:50;
    background:#fff8d4; border:1.5px solid #c8a030; border-radius:10px;
    overflow:hidden; display:none; box-shadow:0 4px 16px rgba(0,0,0,.2);
}
.dpo-gateway-list.is-open { display:block; }
.dpo-gateway-item {
    padding:10px 14px; font-size:.82rem; color:#5c3a00; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between;
    border-bottom:1px solid rgba(180,130,30,.15);
    transition:background .15s;
}
.dpo-gateway-item:last-child { border-bottom:none; }
.dpo-gateway-item:hover, .dpo-gateway-item.is-selected { background:#f0da90; }
.dpo-gateway-item .dpo-check { color:#c8a030; font-size:.85rem; }

/* ── Form card ── */
.dpo-card {
    background-image: url("../../images/theme19/modal/deposit/bg-body.webp");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 42px solid transparent;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid transparent;
    background-clip: border-box;
    background-origin: border-box;
    overflow: auto;
    background-attachment: scroll;
    height: 50vh;
}
.dpo-card-deco { position:absolute; top:50%; transform:translateY(-50%); width:28px; height:28px; object-fit:contain; pointer-events:none; }
.dpo-card-deco--left  { left:-14px; }
.dpo-card-deco--right { right:-14px; }

/* ── Promotions toggle row ── */
.dpo-promo-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:11px 0px;
}
.dpo-promo-label { font-size:.82rem; font-weight:700; color:var(--depo-txt-label); }
.dpo-toggle-wrap { position:relative; width:44px; height:24px; }
.dpo-toggle-input { opacity:0; width:0; height:0; position:absolute; }
.dpo-toggle-slider {
    position:absolute; inset:0; background:var(--depo-bg-first); border-radius:24px; cursor:pointer;
    transition:background .2s;
}
.dpo-toggle-slider::before {
    content:''; position:absolute; width:18px; height:18px; left:3px; top:3px;
    background:#fff; border-radius:50%; transition:transform .2s;
}
.dpo-toggle-input:checked + .dpo-toggle-slider { background:#27ae60; }
.dpo-toggle-input:checked + .dpo-toggle-slider::before { transform:translateX(20px); }

/* ── Promo cards ── */
.dpo-promo-cards { padding:8px 14px 10px; display:none; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.dpo-promo-cards.is-visible { display:flex; gap:8px; }
.dpo-promo-cards::-webkit-scrollbar { display:none; }
.dpo-promo-card {
    flex-shrink:0; width:calc(50% - 4px); min-width:140px; border-radius:10px; overflow:hidden;
    position:relative; cursor:pointer; border:2px solid transparent; transition:border-color .15s;
    background:linear-gradient(135deg,#5c0d8b 0%,#3a006a 100%);
}
.dpo-promo-card.is-selected { border-color:#27ae60; }
.dpo-promo-card .dpo-promo-dot {
    position:absolute; top:6px; right:6px; width:12px; height:12px;
    border-radius:50%; background:#27ae60; display:none; z-index:2;
}
.dpo-promo-card.is-selected .dpo-promo-dot { display:block; }
.dpo-promo-card-img { width:100%; height:72px; object-fit:cover; display:block; }
.dpo-promo-card-body { padding:5px 8px 6px; }
.dpo-promo-card-title { font-size:.64rem; font-weight:700; color:#fff; line-height:1.25; margin-bottom:4px; }
.dpo-promo-view-btn {
    display:inline-block; background:linear-gradient(90deg,#e91e8c,#ff6b35);
    color:#fff; font-size:.6rem; font-weight:700; padding:2px 8px; border-radius:20px;
    border:none; cursor:pointer; text-decoration:none;
}
.dpo-promo-none { padding:8px 14px; font-size:.76rem; color:#8a6800; }

/* ── Amount display ── */
.dpo-amount-section {text-align:center;}
.dpo-amount-label { font-size:14px; font-weight:700; color:var(--depo-txt-label); margin-bottom:6px; }
.dpo-amount-box {
    display:flex; align-items:center; justify-content:center; gap:6px;height: 60px;
    background: var(--depo-bg-first); border-radius:10px; padding:10px 14px; margin-bottom:6px;
}
.dpo-amount-currency { font-size:1rem; font-weight:800; color:var(--depo-txt-label); flex-shrink:0; }
.dpo-amount-input {
    background:none; border:none; outline:none; font-size:1.2rem; font-weight:700;
    color:#3d2000; text-align:center; width:100px; min-width:0;
}
.dpo-amount-input::placeholder { color:rgba(92,58,0,.4); }
.dpo-amount-bonus {
    background:linear-gradient(90deg,#e91e8c,#ff6b35); color:var(--txt-white);
    font-size:.85rem; font-weight:800; padding:4px 10px; border-radius:8px;
    display:none; flex-shrink:0;
}
.dpo-amount-note { font-size:.75rem; color:var(--depo-txt-label); margin-bottom:4px; text-align:start;}
.dpo-amount-note span { color: var(--depo-txt-label);}
/* ── Quick select buttons ── */
.dpo-quick-btns { display:flex; gap:6px; padding:8px 0px 10px; flex-wrap:wrap; }
.dpo-quick-btn {
    flex:1; min-width:0; position:relative; padding:8px 0px; background:var(--depo-bg-first);
    border-radius:8px; font-size:.8rem; font-weight:700;
    color:var(--txt-white); cursor:pointer; text-align:center; transition:background .15s;
}
.dpo-quick-btn.is-active { background: var(--third); }
.dpo-quick-btn .dpo-bonus-tag {
    position:absolute; top:-8px; right:-4px; background:linear-gradient(90deg,#e91e8c,#ff6b35);
    color:#fff; font-size:.55rem; font-weight:800; padding:1px 5px; border-radius:10px;
    display:none;
}

/* ── Field rows ── */
.dpo-field-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 0px; gap:8px;
}
.dpo-field-row:last-child { border-bottom:none; }
.dpo-field-row--col { flex-direction:column; align-items:flex-start; gap:8px; }
.dpo-field-label { font-size:.78rem; font-weight:600; color:var(--depo-txt-label); white-space:nowrap; }
.dpo-locked-val {
    display:flex; align-items:center; gap:6px; background: var(--depo-bg-first);height: 45px;
    border-radius:10px; padding:5px 10px; flex:1; min-width:0; justify-content:space-between;
}
.dpo-locked-val span { font-size:.78rem; color:var(--txt-white); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dpo-copy-btn { background:none; padding:0; cursor:pointer;}
.dpo-copy-btn img { width:24px; height:24px; object-fit:contain; }

/* ── QR thumbnail ── */
.dpo-qr-thumb-wrap {
    display:flex; align-items:center; gap:6px; background:var(--depo-bg-first);
    border-radius:8px; padding:8px;
}
.dpo-qr-thumb { width:44px; height:44px; object-fit:contain; border-radius:6px; cursor:pointer; }
.dpo-qr-dl-btn {
    width:32px; height:32px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
}

/* ── Receipt upload ── */
.dpo-upload-area {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    width:100%; min-height:70px; border:2px dashed var(--depo-bd-first); border-radius:10px;
    background:var(--depo-bg-first); cursor:pointer; gap:4px; transition:background .15s;
}
.dpo-upload-area:hover { background:var(--third); }
.dpo-upload-icon { font-size:1.4rem; color:#8a6800; line-height:1; }
.dpo-upload-text { font-size:.75rem; font-weight:600; color:var(--depo-txt-label); }
.dpo-receipt-previews { display:flex; gap:8px; flex-wrap:wrap; width:100%; }
.dpo-receipt-preview-item { position:relative; width:60px; height:60px; }
.dpo-receipt-preview-item img { width:100%; height:100%; object-fit:cover; border-radius:8px; border:1.5px solid #c8a030; }
.dpo-receipt-remove {
    position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%;
    background:#e74c3c; color:#fff; font-size:.65rem; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
}

/* ── Submit / Next button ── */
.dpo-submit-btn {
    display:block; width:calc(100% - 20px); margin:12px 10px;
    padding:14px; background:linear-gradient(90deg,#e91e8c,#ff6b35);
    color:#fff; border:none; border-radius:30px; font-size:1rem; font-weight:800;
    cursor:pointer; letter-spacing:.04em; box-shadow:0 4px 14px rgba(233,30,140,.35);
}
.dpo-submit-btn:disabled { background:#aaa; box-shadow:none; }

/* ── QR enlarged overlay ── */
.dpo-qr-overlay {
    position:absolute; inset:0; z-index:1099; background:rgba(0,0,0,.6);
    display:none; flex-direction:column; align-items:center; justify-content:center;
    padding:1rem;
}
.dpo-qr-overlay.is-open { display:flex; }
.dpo-qr-card {
    background-image: url("../../images/theme19/modal/deposit/bg-qr.webp");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 32px 16px; width:100%; max-width:360px; 
    position:relative; text-align:center;
}
.dpo-qr-close {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translate(0, -140%);
    background: transparent;
}
.dpo-qr-full-img { width:100%; max-width:280px; border-radius:8px; display:block; margin:0 auto; }
.dpo-save-img-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    height: 55px;
    width:calc(100% - 20px); margin:12px 10px;
    padding:14px; background: #FEEEDB;border: 4px solid #FFFFFF80;
    color:#A2440B; border-radius:15px;font-weight:600;
    cursor:pointer; text-decoration:none;
}

/* ── Hidden shim ── */
.dpo-tab-shim { display:none; }
/* end Deposit page */

/* Register Success page */
#successModal .modal-dialog { margin:0; max-width:100%; width:100%; }
#successModal .modal-content { border:none; border-radius:0; background:transparent; }

.rgs-wrap {
    min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    position:relative; overflow:hidden; padding:0 0 24px;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../../images/theme19/modal/register_success/bg-main.webp');
    background-size: 125% 135%;
    background-position: -50px -115px;
    background-repeat: no-repeat;
}
.rgs-close {
    position:absolute; top:-50px; right:24px; z-index:20;
    background: transparent;
    width:36px; height:36px;
    justify-content:center; cursor:pointer;
}

/* ── sign board ── */
.rgs-sign-wrap {
    position:relative; z-index:5; 
    width:100%;height: 90px;
    display:flex; justify-content:center; 
    margin-top:100px;
}
.rgs-sign-deco{
    position:absolute;top: 5px;
    transform: translateY(-100%);
    width:3px; height:110px; background:#E99C67; pointer-events:none;
}
.rgs-sign-deco-left {
    left:75px;
}
.rgs-sign-deco-right {
    right: 75px;
}
.rgs-sign {
    background-image: url('../../images/theme19/modal/register_success/bg-title.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding:10px 28px; 
    margin: 0 24px;
    width: 100%;
    position:relative;
}
.rgs-sign-text {
    position:absolute; top:50%; transform:translateY(-65%);
    font-size:32px; font-weight:900; color:#712716;
    letter-spacing:.02em; white-space:nowrap;
}

/* ── main card ── */
.rgs-card-outer {
    position:relative; z-index:5; 
    width:calc(100% - 32px);
    margin:0 16px;
}
.rgs-card {
    background-image:url('../../images/theme19/modal/register_success/bg-body.webp');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    overflow:hidden;
    position: relative;
    top: -8px;
    padding: 38px 24px 24px;
}
.rgs-card-id { width:100%; padding:0 16px; }

/* ── field rows ── */
.rgs-field {
    display:flex; 
    align-items:center; 
    justify-content:space-between;
    gap:8px;
    height: 45px;
    margin-bottom: 10px;
}
.rgs-field:last-of-type { border-bottom:none; }
.rgs-field-label { font-size:14px; font-weight:700; color:#905517; width:100px; flex-shrink:0; }
.rgs-field-box {
    display:flex; align-items:center; flex:1; 
    background: #99617E;
    border-radius:8px; padding:10px; 
    min-width:0; gap:6px;
}
.rgs-field-val { flex:1; font-size:14px;color:var(--txt-white); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rgs-field-icon {
    flex-shrink:0; width:24px; height:24px;
    background: transparent;
    display:flex; align-items:center; justify-content:center;
    padding:0;
}
.rgs-field-icon svg { width:14px; height:14px; color:#8a6800; }
.rgs-currency-sym {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-white);
    color: #99617E;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 700;
}
.rgs-currency-val{
    text-align: right;
}

/* ── save as image button ── */
.rgs-save-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:calc(100% - 32px); margin:12px 16px 4px; padding:11px 16px;
    background:var(--bg-white); border:1.5px solid #99617E; border-radius:12px;
    font-size:.88rem; font-weight:700; color:#99617E; cursor:pointer;
}
.rgs-save-btn img { width:24px; height:24px; object-fit:contain; }
#successModal .rgs-save-note { text-align:center; font-size:.75rem; color:#712716; padding:4px 16px 12px; }

/* ── enter website button ── */
.rgs-enter-btn {
    position:relative; z-index:5; display:block; 
    width:calc(100% - 32px);height: 50px;
    margin:12px 16px 0;
    background: linear-gradient(90deg, #E93CFF 0%, #FDC892 100%);
    border: 4px solid #FFFFFF80;
    color:var(--txt-white); border-radius:15px;font-weight:600;
    cursor:pointer; text-align:center; letter-spacing:.03em;
}

/* ── complete profile link ── */
.rgs-profile-link {
    position:relative; z-index:5; display:flex; align-items:center; justify-content:center; gap:6px;
    margin-top:14px; color:var(--txt-white); font-weight:700; cursor:pointer;
}

/* ── app download section ── */
.rgs-app-section {
    position:relative; z-index:5; width:calc(100% - 32px);
    margin:16px; padding:20px;
    background:#00000099; border-radius:10px;
    display:flex; align-items:center; gap:12px; backdrop-filter:blur(6px);
}
.rgs-app-text { flex:1; }
.rgs-app-title { font-weight:500; color:var(--txt-white); line-height:1.3; margin-bottom:8px; }
.rgs-app-icons { display:flex; gap:10px; align-items:center; }
.rgs-app-icon { width:24px; height:24px; object-fit:contain; }
.rgs-app-qr { width:80px; height:80px; object-fit:contain; border-radius:8px; background:#fff; padding:2px; }

/* End Register Success page */
/* VIP Bonus page */
@font-face {
    font-family: 'Fredoka One';
    src: url('../../fonts/FredokaOne.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Luckiest Guy';
    src: url('../../fonts/LuckiestGuy.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
.vipt19-wrap {
    --vip-bg-first: #D5A986;
    position: relative;
    min-height: 100vh;
    padding: 0 0 32px;
    font-family: inherit;
    color: var(--txt-white);
    background: var(--vip-bg-first);
}

.vipt19-hero {
    position: relative;
    padding: 18px 16px 56px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, 0) 35%), url(../../images/theme19/modal/vip-bonus/bg-hero.webp) no-repeat 52% 38%;
    background-size: 156% 412%;
    overflow: hidden;
}

.vipt19-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 80% at 50% 0%, rgba(255, 200, 130, .55) 0%, rgba(255, 170, 110, 0) 60%);
    pointer-events: none;
}

.vipt19-hero-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.vipt19-hero-back {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #FFFFFF33;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.vipt19-hero-back svg {
    width: 16px;
    height: 16px;
}

.vipt19-hero-title {
    color: var(--txt-white);
    font-weight: 600;
    letter-spacing: .4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.vipt19-tabs {
    position: relative;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 6px;
    margin-bottom: 18px;
    scrollbar-width: none;
}

.vipt19-tabs::-webkit-scrollbar { display: none; }

.vipt19-tab {
    flex: 0 0 auto;
    min-width: 84px;
    height: 50px;
    padding: 10px 14px;
    border-radius: 10px;
    background: 
        linear-gradient(#C9A581, #C9A581) padding-box, 
        linear-gradient(180deg, #B2863C 0%, #85451D 100%) border-box;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    border: 4px solid transparent !important;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-shadow: 0px 2px 2px 0px #FFFFFFFC inset, 0px -2px 2px 0px #F7B14F inset;
}

.vipt19-tab span {
    color: #905517;
}
.vipt19-tab .vipt19-tab-ico {
    width: 52px;
    height: 52px;
    object-fit: contain;
    position: absolute;
    right: -4px;
}
.vipt19-tab.is-locked {
    padding-right: 40px;
}
.vipt19-tab.is-active {
    background: 
        linear-gradient(#FEEFDA, #FEEFDA) padding-box, 
        linear-gradient(180deg, #B2863C 0%, #85451D 100%) border-box;
}
.vipt19-tab.is-active:focus{
    border: 4px solid transparent !important;
}

.vipt19-stage {
    position: relative;
    display: flex;
    gap: 14px;
    align-items: stretch;
}

.vipt19-progress-col {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vipt19-progress {
    color: var(--txt-white);
}

.vipt19-progress-label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.vipt19-progress-bar {
    position: relative;
    height: 15px;
    border-radius: 999px;
    background: linear-gradient(180deg, #982C16 0%, #692619 100%);
    border: 2px solid #FFE3AC;
    overflow: hidden;
}

.vipt19-progress-fill {
    position: absolute;
    inset: 1px 1px 1px 1px;
    width: calc(var(--vipt19-pct, 0%) - 2px);
    max-width: calc(100% - 2px);
    border-radius: 999px;
    background: #53D7E5;
    min-width: 14px;
}

.vipt19-progress-vals {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
}

.vipt19-shield-col {
    flex: 0 0 auto;
    width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vipt19-shield {
    width: 140px;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.vipt19-shield-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .25));
}

.vipt19-shield-img.is-active {
    display: block;
}

.vipt19-shield.is-locked .vipt19-shield-img.is-active {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .25)) grayscale(.35) brightness(.85);
}

/* ── Banner Ribbon ── */
.vipt19-ribbon-wrap {
    margin-top: -28px;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
}

.vipt19-ribbon {
    position: relative;
    width: 100%;
    height: 78px;
    background-image: url("../../images/theme19/modal/vip-bonus/bg-ribbon.webp");
    background-repeat: no-repeat;
    background-position: center 90%;
    background-size: cover;
    color: var(--txt-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vipt19-ribbon.is-locked {
    background-position: center 11%;
}

.vipt19-ribbon.is-locked::before,
.vipt19-ribbon.is-locked::after {
    background: #1c5396;
}
.vipt19-ribbon-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: absolute;
    top: 16px;
}
#vipt19RibbonText {
    font-family: 'Fredoka One';
    font-weight: 400;
    font-size: 22px;
    line-height: 29px;
    text-transform: capitalize;
    text-shadow: 0px 3px 0px #00000066;
}
.vipt19-ribbon-lock {
    font-size: 14px;
}

/* ── Sections ── */
.vipt19-content {
    padding: 18px 14px 0;
}

.vipt19-section {
    background: #F6E6CD;
    border-radius: 16px;
    padding: 16px 14px 18px;
    margin-bottom: 14px;
    border: 1px solid #B48455;
}

.vipt19-section-title {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--txt-fifth);
    margin-bottom: 12px;
    letter-spacing: .2px;
}

.vipt19-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.vipt19-card {
    background: #E3C9AE;
    border-radius: 12px;
    padding: 14px 6px 12px;
    text-align: center;
    position: relative;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    border: 2px solid #DDBFA1;
}

.vipt19-card-num {
    font-family: 'Luckiest Guy';
    font-size: 32px;
    color: var(--txt-fifth);
    line-height: 1.1;
}

.vipt19-card-num.is-off {
    font-size: 20px;
    color: var(--txt-fifth);
}

.vipt19-card-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--txt-fifth);
    text-transform: uppercase;
    letter-spacing: .6px;
    line-height: 1.25;
    padding: 0 4px;
}

.vipt19-card-pill {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 102px;
    height: 35px;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: default;
    border: 0;
    letter-spacing: .4px;
}

.vipt19-card-pill.is-claimed {
    background: #E7CBAD;
    color: #8C6239;
    border: 2px solid #FFFFFF80;
}

.vipt19-card-pill.is-claim {
    background: 
        linear-gradient(90deg, #E93CFF 0%, #FDC892 100%) padding-box, 
        linear-gradient(#FFFFFF80 0%, #FFFFFF80 100%) border-box;
    color: var(--txt-white);
    cursor: pointer;
    border: 2px solid transparent;
}

.vipt19-card-pill.is-locked {
    background: #E7CBAD;
    color: #8C6239;
    border: 2px solid #FFFFFF80;
}

@media (min-width: 480px) {
    .vipt19-hero { padding-left: 20px; padding-right: 20px; }
    .vipt19-content { padding-left: 20px; padding-right: 20px; }
    .vipt19-shield { width: 138px; height: 151px; }
    .vipt19-shield-col { width: 138px; }
}

@media (min-width: 768px) {
    .vipt19-grid { grid-template-columns: repeat(4, 1fr); }
    .vipt19-content { max-width: 720px; margin: 0 auto; }
    .vipt19-hero-top, .vipt19-tabs, .vipt19-stage { max-width: 720px; margin-left: auto; margin-right: auto; }
    .vipt19-ribbon-wrap { max-width: 720px; margin-left: auto; margin-right: auto; }
}
/* End VIP Bonus page */

/* ── Member Turnover (theme19) ── */
.mt19-wrap {
    background: #FFE7AB;
    min-height: 100vh;
    padding: 8px 14px 80px;
    font-family: inherit;
}

.mt19-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0 14px;
    margin-bottom: 1rem;
}

.mt19-back {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: #8C623933;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mt19-back img {
     width: 16px; 
     height: 16px; 
     filter: brightness(0) saturate(100%) invert(38%) sepia(36%) saturate(648%) hue-rotate(348deg) brightness(97%) contrast(88%);
}

.mt19-title {
    font-size: 16px;
    font-weight: 700;
    color: #8C6239;
    letter-spacing: .3px;
}

/* ── Date row ── */
.mt19-date-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.mt19-date-quick {
    position: relative;
    flex: 1;
    height: 52px;
    border: 0;
    border-radius: 12px;
    background: #A14921;
    color: var(--txt-white);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    border: 4px solid #E9A069;
}

.mt19-date-quick .mt19-caret {
    width: 16px;
    height: 16px;
    color: var(--txt-white);
}

.mt19-date-quick-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--bg-white);
    color: #8C6239;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    border-radius: 10px;
    z-index: 20;
    text-align: left;
}

.mt19-date-quick-menu[hidden] { display: none; }

.mt19-date-quick-menu li {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.mt19-date-quick-menu li:hover { background: #fbeeda; }

.mt19-date-cal {
    width: 72px;
    height: 52px;
    border: 0;
    border-radius: 12px;
    background: #A14921;
    border: 4px solid #E9A069;
    color: var(--txt-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mt19-date-cal svg { width: 20px; height: 20px; }

/* ── Category tabs ── */
.mt19-cat-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

.mt19-cat-tabs::-webkit-scrollbar { display: none; }

.mt19-cat {
    flex: 0 0 auto;
    min-width: 70px;
    height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: 
        linear-gradient(0deg, #CDAB84, #CDAB84) padding-box,
        linear-gradient(180deg, #B2863C 0%, #85451D 100%) border-box;
    border: 4px solid transparent;
    box-shadow: 0px 2px 2px 0px #FFFFFFFC inset, 0px -2px 2px 0px #F7B14F inset;
    color: var(--txt-fifth);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
}

.mt19-cat.is-active {
    background: 
        linear-gradient(0deg, #FEEFDA, #FEEFDA) padding-box,
        linear-gradient(180deg, #B2863C 0%, #85451D 100%) border-box;
    color: var(--txt-fifth);
    border: 4px solid transparent !important;
    box-shadow: 0px 2px 2px 0px #FFFFFFFC inset, 0px -2px 2px 0px #F7B14F inset;
}

/* ── Providers bar ── */
.mt19-providers-bar {
    width: 100%;
    height: 62px;
    border: 0;
    border-radius: 12px;
    background: #A14921;
    border: 4px solid #E9A069;
    color: var(--txt-white);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    padding: 0 18px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.mt19-providers-bar[hidden] { display: none; }

.mt19-providers-bar svg { width: 18px; height: 18px; }

/* ── Chips wrap ── */
.mt19-chips-wrap {
    margin-bottom: 12px;
    cursor: pointer;
}

.mt19-chips-wrap[hidden] { display: none; }

.mt19-chips-head {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #5a3415;
}

.mt19-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.mt19-chips::-webkit-scrollbar { display: none; }

.mt19-chip {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 14px;
    border-radius: 10px;
    color: var(--txt-white);
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: .3px;
    border: 2px solid var(--bd-white);
    background: linear-gradient(90deg, #E93CFF 0%, #FDC892 100%);
}

.mt19-chip-casino ,
.mt19-chip-sports ,
.mt19-chip-slots  ,
.mt19-chip-other  { 
    background: linear-gradient(90deg, #E93CFF 0%, #FDC892 100%);
}
.mt19-chips-title,
.mt19-chips-title span{
    font-size: 16px;
    color: var(--txt-fourth)
}

/* ── Results list ── */
.mt19-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mt19-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: 
        linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),
        linear-gradient(0deg, #EBC497, #EBC497);
    border-radius: 10px;
    padding: 12px 14px;
    text-decoration: none;
    color: inherit;
}

.mt19-item-l {
    flex: 1;
    min-width: 0;
}

.mt19-item-name {
    font-size: 14px;
    font-weight: 800;
    color: #5a3415;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.mt19-item-id {
    font-weight: 700;
    color: #85451D;
    margin-bottom: 4px;
    letter-spacing: .3px;
}

.mt19-item-meta {
    font-size: 14px;
    color: #DD8844;
    font-weight: 600;
}

.mt19-item-r {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.mt19-item-amount {
    color: var(--txt-fifth);
    font-size: 20px;
    font-weight: 800;
}

.mt19-item-chev {
    width: 14px;
    height: 14px;
    color: #a85628;
}

.mt19-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), linear-gradient(0deg, #EBC497, #EBC497);
    border-radius: 10px;
    padding: 12px 14px;
    font-weight: 800;
    color: var(--txt-fifth);
    margin-top: 4px;
}
.mt19-total span {
    font-size: 16px;
    font-weight: 700;
    color: #85451D;
}
.mt19-total .mt19-total-amount {
    color: var(--txt-fifth);
    font-weight: 800;
    font-size: 20px;
}

.mt19-empty {
    text-align: center;
    padding: 32px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.mt19-empty span {
    font-weight: 700;
    color: var(--txt-fifth);
}

/* ── Modals ── */
.mt19-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.mt19-modal[hidden] { display: none; }

.mt19-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}

.mt19-sheet {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: #A3450A;
    border-radius: 18px 18px 0 0;
    padding: 18px 16px 22px;
    animation: mt19-slide-up .25s ease;
    z-index: 1;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.mt19-sheet-date{
    border-radius: 16px 16px 0 0;
}
.mt19-sheet-details {
    background: #FFF4D8;
    border-radius: 16px 16px 0 0;
}

@keyframes mt19-slide-up {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.mt19-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.mt19-sheet-date-head{
    border-bottom: 1px solid #FFFFFF33;
    padding: 1rem 0;
}

.mt19-sheet-head h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--txt-white);
    margin: 0;
}
.mt19-sheet-details-head {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    padding: .5rem 0;
}

.mt19-sheet-details-head h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--txt-black);
    margin: 0;
}
.mt19-sheet-close {
    width: 52px;
    height: 4px;
    border: 0;
    border-radius: 10px;
    background: var(--bg-white);
    color: var(--txt-white);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 10px);
}

.mt19-sheet-details-close-round {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--bg-white);
    color: var(--txt-black);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 24px;
}
.mt19-sheet-details-close-round svg { width: 16px; height: 16px; }
.mt19-sheet-close-round {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: #e9c89a;
    color: #5a3415;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mt19-sheet-close-round svg { width: 14px; height: 14px; }

.mt19-select-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--txt-white);
    cursor: pointer;
}

.mt19-select-all input { accent-color: var(--txt-white); }

/* ── Provider grid ── */
.mt19-prov-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    overflow-y: auto;
    padding: 4px 2px 12px;
    flex: 1 1 auto;
    min-height: 0;
}

.mt19-prov-chip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: 12px;
    padding: 0 10px;
    cursor: pointer;
    background: #512714;
    color: var(--txt-white);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-align: center;
}

.mt19-prov-chip input { position: absolute; opacity: 0; pointer-events: none; }

.mt19-prov-chip-name {
    line-height: 1.1;
    word-break: break-word;
}

.mt19-prov-chip.is-checked {
    color: var(--txt-white);
    background: linear-gradient(90deg, #E93CFF 0%, #FDC892 100%);
}

/* ── Sheet actions ── */
.mt19-sheet-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.mt19-btn-primary {
    flex: 1;
    min-height: 52px;
    border: 0;
    border-radius: 12px;
    color: var(--txt-white);
    cursor: pointer;
    background: 
        linear-gradient(90deg,#E93CFF80 0%, #FDC89280 100%) border-box,
        linear-gradient(90deg, #E93CFF 0%, #FDC892 100%) padding-box;
    border: 4px solid transparent;
}

.mt19-btn-primary:hover { background-position: 100% 0; }

.mt19-btn-ghost {
    flex: 1;
    min-height: 52px;
    border: 0;
    border-radius: 12px;
    background: #d8d4cd;
    color: #6b6b6b;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    cursor: pointer;
}

/* ── Date Range modal fields ── */
.mt19-date-fields {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.mt19-date-field {
    position: relative;
    flex: 1;
    height: 46px;
    border-radius: 10px;
    background: #FFFFFF1A;
    color: var(--txt-white);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    cursor: pointer;
}

.mt19-date-field svg { width: 16px; height: 16px; flex: 0 0 auto; }

.mt19-date-field input[type="date"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: 0;
    background: transparent;
}

.mt19-date-field-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Details modal ── */
.mt19-details {
    margin: 0;
    background: #FFFFFF99;
    border-radius: 12px;
    padding: 6px 14px;
}

.mt19-details > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.mt19-details > div:last-child { border-bottom: 0; }

.mt19-details dt {
    margin: 0;
    color: #B38B72;
    font-weight: 600;
}

.mt19-details dd {
    margin: 0;
    font-weight: 700;
    color: var(--txt-fifth);
    text-align: right;
}

@media (min-width: 768px) {
    .mt19-wrap { max-width: 720px; margin: 0 auto; }
    .mt19-prov-grid { grid-template-columns: repeat(4, 1fr); }
}
/* End Member Turnover (theme19) */

/* ── Center Transfer ── */
.ct19-wrap {
    background: #FFE7AB;
    min-height: 100vh;
    padding: 0px 14px 0px;
    font-family: inherit;
    position: relative;
}

.ct19-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0 20px;
}
.ct19-back {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: #8C623933;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.ct19-back img {
    width: 16px; height: 16px;
    filter: brightness(0) saturate(100%) invert(38%) sepia(36%) saturate(648%) hue-rotate(348deg) brightness(97%) contrast(88%);
}
.ct19-title {
    font-size: 16px;
    font-weight: 700;
    color: #8C6239;
    letter-spacing: .3px;
}

/* ── Tab toggle ── */
.ct19-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 14px;
}
.ct19-tab {
    flex: 1;
    height: 52px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(0deg, #CDAB84, #CDAB84) padding-box,
        linear-gradient(180deg, #B2863C 0%, #85451D 100%) border-box;
    border: 4px solid transparent;
    box-shadow: 0px 2px 2px 0px #D9C19B inset, 0px -2px 2px 0px #AB6C37 inset;
}
.ct19-tab span{
    color: #8C6239;
}
.ct19-tab.is-active {
    background:
        linear-gradient(0deg, #FEEFDA, #FEEFDA) padding-box,
        linear-gradient(180deg, #B2863C 0%, #85451D 100%) border-box;
    box-shadow: 0px 2px 2px 0px #FFFFFFFC inset, 0px -2px 2px 0px #F7B14F inset;
}

/* ── Account cards ── */
.ct19-accounts {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 14px;
    background-image: url("../../images/theme19/modal/transfer/bg-accounts.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-clip: border-box;
    background-origin: border-box;
    background-attachment: scroll;
    border: 16px solid transparent;
}
.ct19-accounts::-webkit-scrollbar { display: none; }
.ct19-account-card {
    flex: 0 0 48%;
    min-width: 150px;
    height: 87px;
    background: 
        linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), 
        linear-gradient(0deg, #D4B494, #D4B494);
    border-radius: 5px;
    padding: 12px;
    position: relative;
    overflow: hidden;
}
.ct19-account-name {
    font-size: 14px;
    font-weight: 700;
    color: #905517;
    letter-spacing: .3px;
    line-height: 1.1;
}
.ct19-account-amount {
    font-size: 20px;
    font-weight: 800;
    word-break: break-all;
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}
.ct19-account-amount span{
    color: #7C3818;
}
.ct19-account-curr {
    font-size: 20px;
    color: #7C3818;
    font-weight: 800;
}
.ct19-account-loading {
    width: 18px; height: 18px;
}
.ct19-account-icon {
    position: absolute;
    right: 8px;
    bottom: 8px;
    opacity: .9;
    font-size: 22px;
    line-height: 1;
}

/* ── Form section ── */
.ct19-form {
    background:
        linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)),
        linear-gradient(0deg, #EBC497, #EBC497);
    border-radius: 16px;
    padding: 14px 12px;
    margin-bottom: 16px;
}

.ct19-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 12px;
}
.ct19-field {
    flex: 1;
    min-width: 0;
}
.ct19-field-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #8C6239;
    margin-bottom: 6px;
}
.ct19-select {
    position: relative;
    width: 100%;
    height: 46px;
    border-radius: 10px;
    background: #FFFFFF99;
    border: 2px solid #E9A06966;
    padding: 0 32px 0 12px;
    font-size: 13px;
    font-weight: 700;
    color: #5a3415;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C6239' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
    cursor: pointer;
}
.ct19-swap {
    flex: 0 0 auto;
    width: 40px;
    height: 46px;
    margin-bottom: 0;
    border: 0;
    border-radius: 10px;
    background: #A14921;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 3px solid #E9A069;
}
.ct19-swap svg { width: 18px; height: 18px; }

/* ── Amount field ── */
.ct19-amount-wrap {
    text-align: center;
    margin-bottom: 10px;
}
.ct19-amount-cap {
    font-size: 13px;
    font-weight: 700;
    color: #8C6239;
    margin-bottom: 6px;
    text-align: center;
}
.ct19-amount-display {
    width: 100%;
    height: 56px;
    border-radius: 12px;
    background: #FFFFFFCC;
    border: 2px solid #E9A06966;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    color: #5a3415;
    letter-spacing: .5px;
    padding: 0 14px;
}
.ct19-amount-display::placeholder { color: #C49065; font-weight: 700; }

.ct19-total-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #8C6239;
    font-weight: 700;
    margin: 10px 2px 8px;
}
.ct19-total-line .ct19-total-val {
    color: #5a3415;
    font-weight: 800;
}

/* ── Quick amount chips ── */
.ct19-quick {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.ct19-quick-btn {
    height: 44px;
    border: 0;
    border-radius: 10px;
    background:
        linear-gradient(0deg, #CDAB84, #CDAB84) padding-box,
        linear-gradient(180deg, #B2863C 0%, #85451D 100%) border-box;
    border: 3px solid transparent;
    box-shadow: 0px 2px 2px 0px #FFFFFFFC inset, 0px -2px 2px 0px #F7B14F inset;
    color: #5a3415;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}
.ct19-quick-btn.is-active {
    background:
        linear-gradient(90deg, #E93CFF 0%, #FDC892 100%) padding-box,
        linear-gradient(90deg, #E93CFF 0%, #FDC892 100%) border-box;
    color: #fff;
    box-shadow: none;
}

/* ── Submit button (fixed bottom) ── */
.ct19-submit-bar {
    margin-top: 16px;
}
.ct19-submit {
    width: 100%;
    min-height: 54px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    cursor: pointer;
    background:
        linear-gradient(90deg,#E93CFF80 0%, #FDC89280 100%) border-box,
        linear-gradient(90deg, #E93CFF 0%, #FDC892 100%) padding-box;
    border: 4px solid transparent;
}
.ct19-submit:disabled { opacity: .6; cursor: not-allowed; }

/* ── Modals ── */
.ct19-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
}
.ct19-modal[hidden] { display: none; }
.ct19-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}
.ct19-confirm-card {
    position: relative;
    width: 100%;
    max-width: 360px;
    background: #FFF4D8;
    border-radius: 16px;
    padding: 22px 20px 18px;
    text-align: center;
    z-index: 1;
    animation: ct19-pop .2s ease;
}
@keyframes ct19-pop {
    from { transform: scale(.96); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.ct19-confirm-title {
    font-size: 16px;
    font-weight: 800;
    color: #5a3415;
    margin-bottom: 8px;
}
.ct19-confirm-text {
    font-size: 12px;
    color: #8C6239;
    line-height: 1.5;
    margin-bottom: 18px;
}
.ct19-confirm-btn {
    width: 100%;
    min-height: 44px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .3px;
    cursor: pointer;
    background: linear-gradient(90deg, #E93CFF 0%, #FDC892 100%);
    margin-bottom: 6px;
}
.ct19-confirm-cancel {
    width: 100%;
    min-height: 36px;
    border: 0;
    background: transparent;
    color: #8C6239;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

/* ── Loading overlay ── */
.ct19-loading {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1090;
    display: none;
    align-items: center;
    justify-content: center;
}
.ct19-loading.is-show { display: flex; }
.ct19-loading img { width: 48px; height: 48px; }

/* ── Inline alert message ── */
.ct19-msg {
    display: block;
    text-align: center;
    color: #c8341a;
    font-size: 12px;
    font-weight: 700;
    min-height: 16px;
    margin-bottom: 6px;
}

/* ── Responsive ── */
@media (min-width: 768px) {
    .ct19-wrap { max-width: 720px; margin: 0 auto; }
    .ct19-account-card { flex: 0 0 30%; }
}
/* ── End Center Transfer ── */
/* ── Transfer List ── */
/* ── End Transfer List ── */
/* ── History ── */
.hx19-wrap .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.hx19-wrap {
    --hx-bg: #FFE7AB;
    --hx-card: #F7E5B5;
    --hx-card-border: #C58B5C66;
    --hx-text: #8C6239;
    --hx-text-soft: #DD8844;
    --hx-btn: #A14921;
    --hx-btn-ring: #E9A069;
    --hx-amount: #D2691E;
    --hx-tab-inactive-bg: #F5DEB3;
    --hx-menu-selected: #A1492180;
    background: var(--hx-bg);
    min-height: 100vh;
    padding: 10px 14px 88px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--hx-text);
}
.hx19-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0 14px;
    margin-bottom: 8px;
}
.hx19-back {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #8C623933;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.hx19-back img {
    width: 16px;
    height: 16px;
    filter: brightness(0) saturate(100%) invert(24%) sepia(58%) saturate(854%) hue-rotate(346deg) brightness(92%) contrast(91%);
}
.hx19-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--hx-text);
}
.hx19-tabs-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.hx19-tabs-scroll::-webkit-scrollbar { display: none; }
.hx19-tab {
    flex: 0 0 auto;
    min-width: 72px;
    padding: 0 12px;
    height: 52px;
    border-radius: 10px;
    background: 
        linear-gradient(0deg, #CDAB84, #CDAB84) padding-box,
        linear-gradient(180deg, #B2863C 0%, #85451D 100%) border-box;
    border: 4px solid transparent;
    box-shadow: 0px 2px 2px 0px #FFFFFFFC inset, 0px -2px 2px 0px #F7B14F inset;
    color: var(--txt-fifth);
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}
.hx19-tab.is-active {
    background: 
        linear-gradient(0deg, #FEEFDA, #FEEFDA) padding-box,
        linear-gradient(180deg, #B2863C 0%, #85451D 100%) border-box;
    color: var(--txt-fifth);
    border: 4px solid transparent !important;
    box-shadow: 0px 2px 2px 0px #FFFFFFFC inset, 0px -2px 2px 0px #F7B14F inset;
}
.hx19-date-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}
.hx19-date-quick {
    position: relative;
    flex: 1;
    height: 50px;
    border: 0;
    border-radius: 14px;
    background: var(--hx-btn);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    border: 3px solid var(--hx-btn-ring);
}
.hx19-date-quick .hx19-caret {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.hx19-date-quick-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #FFE7AB;
    color: var(--hx-text);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(93, 46, 23, 0.12);
    z-index: 30;
    text-align: left;
    border-bottom: 1px solid #8C62391A;
}
.hx19-date-quick-menu span{
    color: #8C6239;
}
.hx19-date-quick-menu[hidden] { display: none; }
.hx19-date-quick-menu li {
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.hx19-date-quick-menu li:hover { background: var(--hx-menu-selected); }
.hx19-date-quick-menu li.is-selected { background: var(--hx-menu-selected); font-weight: 800;}
.hx19-date-quick-menu li.is-selected svg,
.hx19-date-quick-menu li.is-selected span{
    color: var(--txt-white);
}
.hx19-date-quick-menu .hx19-check {
    width: 16px;
    height: 16px;
    color: var(--hx-btn);
    opacity: 0;
}
.hx19-date-quick-menu li.is-selected .hx19-check { opacity: 1; }
.hx19-date-cal {
    width: 56px;
    height: 50px;
    border: 0;
    border-radius: 14px;
    background: var(--hx-btn);
    border: 3px solid var(--hx-btn-ring);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.hx19-date-cal svg { width: 22px; height: 22px; }
.hx19-subfilter {
    margin: -6px 0 14px;
}
.hx19-subfilter select {
    width: 100%;
    height: 44px;
    border-radius: 12px;
    border: 2px solid var(--hx-btn);
    background: var(--hx-tab-inactive-bg);
    color: var(--hx-text);
    font-weight: 700;
    padding: 0 12px;
}
.hx19-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hx19-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 75;
    background: 
        linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),
        linear-gradient(0deg, #EBC497, #EBC497);
    border: 2px solid var(--hx-card-border);
    border-radius: 8px;
    padding: 12px 14px;
    text-align: left;
    width: 100%;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.hx19-item[hidden] { display: none !important; }
.hx19-item-l { flex: 1; min-width: 0; }
.hx19-item-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.hx19-item-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--txt-fifth);
}
.hx19-item-meta {
    font-size: 12px;
    color: var(--hx-text-soft);
    font-weight: 600;
}
.hx19-item-r {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.hx19-item-amount {
    font-size: 17px;
    font-weight: 800;
    color: var(--hx-amount);
}
.hx19-item-chev {
    width: 14px;
    height: 14px;
    color: var(--hx-text-soft);
}
.hx19-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    text-transform: capitalize;
}
.hx19-badge-success { background: #D4FFC7; color: #008D0C; }
.hx19-badge-pending { background: #FFFACD; color: #8B4513; }
.hx19-badge-failed { background: #FFD1D1; color: #8B0000; }
.hx19-badge-info { background: #D1E8FF; color: #003D82; }
.hx19-badge-muted { background: #E8E4DD; color: #4A4A4A; }
.hx19-empty {
    margin: 28px 0 40px;
    padding: 48px 20px 44px;
    border-radius: 18px;
    background: #FEE8B0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.hx19-empty-text {
    font-weight: 800;
    font-size: 15px;
    line-height: 1.35;
    color: var(--txt-fifth);
    max-width: 260px;
}
.hx19-empty-hint {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.4;
    color: #8B5A3C;
    max-width: 280px;
}
.hx19-empty-hint[hidden] { display: none !important; }
.hx19-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.hx19-modal[hidden] { display: none; }
.hx19-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.hx19-sheet {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: #A3450A;
    border-radius: 20px 20px 0 0;
    padding: 16px 18px 26px;
    z-index: 1;
    animation: hx19-up .28s ease;
    max-height: 78vh;
    overflow: auto;
}
.hx19-sheet-detail {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: #FFF4D8;
    border-radius: 20px 20px 0 0;
    padding: 16px 18px 18px;
    z-index: 1;
    animation: hx19-up .28s ease;
    max-height: 78vh;
    overflow: auto;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.22);
}
@keyframes hx19-up {
    from { transform: translateY(32px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.hx19-sheet-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 6px 0 14px;
    border-bottom: 1px solid var(--hx-card-border);
    margin-bottom: 12px;
}
.hx19-sheet-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--txt-white);
}
.hx19-sheet-close {
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: var(--bg-white);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hx19-details{
    padding: 14px;
    border-radius: 12px;
    background: #FFFFFF99;
}
.hx19-sheet-detail-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0 10px;
    margin-bottom: 8px;
}
.hx19-sheet-detail-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #000;
    letter-spacing: 0.2px;
}
.hx19-sheet-detail-close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(197, 139, 92, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.hx19-sheet-detail-close svg {
    width: 18px;
    height: 18px;
    stroke: #000;
    opacity: 0.85;
}
.hx19-date-fields{
    display: flex;
    align-items: center;
    gap: 8px;
}
.hx19-date-fields label{
    flex: 1;
}
.hx19-date-field input{
    width: 100%;
    height: 45px;
    position: relative;
    border-radius: 10px;
    padding: 0 10px 0 48px;
    background: #FFFFFF1A;
    color: var(--txt-white);
    background-image: url(../../images/theme19/icon/calendar.png);
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 24px;
}
.hx19-date-field input::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}
#hx19ApplyRange{
    width: 100%;
    height: 50px;
    border-radius: 12px;
    padding: 5px 20px;
    background: linear-gradient(90deg, #E93CFF 0%, #FDC892 100%);
    border: 4px solid #FFFFFF80;
    margin-top: 1.5rem;
}
.hx19-details > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 11px 2px;
    border-bottom: 1px dashed var(--hx-card-border);
}
.hx19-details > div:last-child { border-bottom: 0; }
.hx19-details dt {
    margin: 0;
    color: #B38B72;
    font-weight: 600;
    flex-shrink: 0;
}
.hx19-details dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
    color: #85451D;
    word-break: break-word;
}
.hx19-details dd .hx19-badge{
    font-size: 14px;
}
@media (min-width: 768px) {
    .hx19-wrap { max-width: 720px; margin: 0 auto; }
}
/* ── End History ── */

/* ── Slots ── */
.s19-main{
    background-image: url("../../images/theme19/modal/slots/bg-slots.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 100%;
    overflow: auto;
    padding: 0;
}
.s19-slots .s19-inner {
    position: relative;
    z-index: 1;
    padding: 12px 12px 16px;
}
.s19-topbar {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.s19-home {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #FFFFFF33;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.s19-home img {
    width: 16px;
    height: 16px;
}
.s19-topbar-center {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.s19-category-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 38px;
    border-radius: 10px;
    background: #FFFFFF33;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.s19-category-chip .s19-cat-ico {
    font-size: 20px;
    line-height: 1;
}
.s19-category-chip .s19-cat-label {
    text-align: center;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.s19-category-chip .s19-cat-chev {
    font-size: 12px;
    opacity: 0.95;
    transition: transform 0.2s;
}
.s19-category-chip[aria-expanded="true"] .s19-cat-chev {
    transform: rotate(90deg);
}
.s19-category-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    max-width: 92vw;
    padding: 8px 0;
    border-radius: 16px;
    background: rgba(250, 238, 220, 0.98);
    border: 1px solid rgba(180, 120, 90, 0.35);
    box-shadow: 0 14px 40px rgba(40, 20, 10, 0.28);
    z-index: 60;
    display: none;
}
.s19-category-menu.is-open {
    display: block;
}
.s19-category-menu button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    color: #5b3518;
    cursor: pointer;
    text-align: left;
}
.s19-category-menu button:hover {
    background: rgba(230, 180, 120, 0.35);
}
.s19-category-menu button .s19-cat-check {
    color: #c05621;
        font-weight: 900;
        margin-left: 8px;
}
.s19-providers-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.s19-providers-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 17px;
    font-weight: 700;
}
.s19-providers-toggle {
    border: 0;
    background: transparent;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    padding: 0;
    flex: 1;
    min-width: 0;
}
.s19-prov-plus-circle {
    background: transparent;
}
.s19-providers-card.is-expanded .s19-prov-plus-circle {
    transform: rotate(45deg);
    background: rgba(255, 200, 120, 0.35);
}
.s19-arrows {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.s19-arrow {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #FFFFFF33;
    cursor: pointer;
}
.s19-arrow img {
    width: 21px;
    height: 21px;
}
.s19-providers-scroll {
    overflow: hidden;
    height: 52px;
    margin-bottom: 12px;
}
.s19-providers-scroll .s19-prov-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 8px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.s19-providers-scroll .s19-prov-strip::-webkit-scrollbar {
    display: none;
}
.s19-providers-card.is-expanded .s19-prov-strip {
    flex-wrap: wrap;
    overflow-x: visible;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.s19-providers-card.is-expanded .s19-prov-strip > li {
    flex: unset !important;
    width: auto !important;
    max-width: none !important;
}
.s19-providers-card .providers-list,
.s19-prov-strip {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 52px !important;
}
.s19-prov-strip > li {
    flex: 0 0 auto;
}
.s19-prov-strip > li > a.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    min-height: 52px;
    padding: 8px 12px;
    border-radius: 14px;
    background: rgba(245, 225, 195, 0.9) !important;
    border: 2px solid rgba(160, 100, 70, 0.35) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.s19-prov-strip > li > a.btn.active {
    background: rgba(120, 65, 55, 0.75) !important;
    border-color: rgba(255, 200, 160, 0.5) !important;
}
.s19-providers-card.is-expanded .s19-prov-strip > li:nth-child(5n + 2) > a.btn {
    background: rgba(255, 180, 200, 0.85) !important;
}
.s19-providers-card.is-expanded .s19-prov-strip > li:nth-child(5n + 4) > a.btn {
    background: rgba(200, 195, 210, 0.88) !important;
}
.s19-prov-strip > li > a.btn img {
    max-height: 36px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
.s19-prov-strip > li > a.btn.active img {
    filter: brightness(1.15);
}
.s19-slot-area .header-slots {
    margin-bottom: 10px;
}
.s19-slot-area .slots-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.s19-slot-area .slots-nav .slot-sort-nav {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff !important;
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.s19-slot-area .slots-nav .slot-sort-nav.active {
    background: rgba(255, 180, 80, 0.55);
    border-color: rgba(255, 220, 160, 0.7);
}
.s19-search-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 12px;
}
.s19-search-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    min-height: 52px;
    border-radius: 18px;
    background: rgba(110, 48, 38, 0.92);
    border: 2px solid rgba(200, 120, 80, 0.55);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.18), 0 2px 10px rgba(40, 15, 10, 0.2);
}
.s19-search-field i {
    color: #fff;
    font-size: 18px;
    opacity: 0.95;
}
.s19-search-field input {
    flex: 1;
    border: 0;
    background: transparent !important;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    outline: none;
    min-width: 0;
}
.s19-search-field input::placeholder {
    color: rgba(255, 255, 255, 0.75);
}
.s19-sort-wrap {
    position: relative;
    flex-shrink: 0;
}
.s19-sort-btn {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    border: 2px solid rgba(200, 120, 80, 0.55);
    background: rgba(110, 48, 38, 0.95);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 2px 10px rgba(40, 15, 10, 0.22);
}
.s19-sort-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 212px;
    background: rgba(252, 236, 215, 0.98);
    border-radius: 16px;
    padding: 8px 0;
    box-shadow: 0 14px 40px rgba(40, 20, 10, 0.28);
    z-index: 50;
    display: none;
    border: 1px solid rgba(180, 120, 70, 0.4);
}
.s19-sort-menu.is-open {
    display: block;
}
.s19-sort-menu button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    color: #5d3a1a;
    cursor: pointer;
    text-align: left;
}
.s19-sort-menu button:hover {
    background: rgba(255, 200, 120, 0.35);
}
.s19-sort-menu button .s19-check {
    color: #c05621;
    font-weight: 900;
}
.s19-slot-area ul.slot-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    height: calc(100vh - 310px) !important;
}
.s19-slot-area ul.slot-list li {
    border-radius: 16px;
    overflow: hidden;
    background: transparent;
    width: 100%;
    height: max-content;
}
.s19-slot-area ul.slot-list li:before{
    border-radius: 20px 0px 3.4em;
}
.s19-slot-area ul.slot-list li a {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: none;
}
.free-event-label{
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.s19-slot-area ul.slot-list li a::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 26px 26px 0;
    border-color: transparent rgba(200, 60, 55, 0.55) transparent transparent;
    pointer-events: none;
    z-index: 2;
    border-radius: 0 14px 0 0;
}
.s19-slot-area ul.slot-list li img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}
.s19-slot-area ul.slot-list li span:not(.rtp) {
    display: block;
    padding: 6px 6px 8px;
    font-size: 10px;
    font-weight: 800;
    color: var(--txt-white);
    text-align: center;
    line-height: 1.25;
    background: #FFFFFF33;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}
.s19-slot-area ul.slot-list li .rtp {
    top: 6px;
    left: 6px;
    right: auto;
    border-radius: 8px;
    padding: 3px 6px !important;
    font-size: 9px !important;
    background: rgba(0, 0, 0, 0.55) !important;
}
.s19-slot-area .slot-loader {
    border-radius: 12px;
}
/* ── End Slots ── */

/* ── Point Wheel ── */
.g-wrap:has(.pw19-wrap) .g-d-flex,
.g-wrap:has(.pw19-wrap) > hr:first-of-type {
    display: none !important;
}

.pw19-wrap {
    --pw19-wood: #6B4423;
    --pw19-orange: #E86B1F;
    --pw19-cream: #FFF8E7;
    position: relative;
    min-height: calc(100vh - 80px);
    margin: 0 -12px;
    padding: 12px 12px 32px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #fff;
}
.pw19-g-wrap{
    background: transparent !important;
}
.pw19-wrap.pw19-bg {
    background-image: url("<?= htmlspecialchars($pw19_asset('bg-beach.webp')) ?>");
}
.pw19-headings {
    background: url("../../images/theme19/modal/point_wheel/bg-title.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    margin-bottom: 8px;
    height: 152px;
    position: relative;
}
.pw19-title {
    display: block;
    width: 100%;
    font-size: 32px;
    font-weight: 900;
    position: absolute;
    left: 50%;
    bottom: 42px;
    transform: translateX(-50%);
    color: #B64B06;
}
.pw19-ribbon {
    display: block;
    width: 100%;
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    font-weight: 600;
}
.pw19-ribbon-fallback {
    display: inline-block;
    background: linear-gradient(180deg, #FF7EB3 0%, #E8489A 100%);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    padding: 8px 20px;
    border-radius: 8px;
    margin: 0 auto 12px;
    box-shadow: 0 4px 0 #9C2158;
}
.pw19-wheel-row {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0 24px;
    z-index: 0;
}
.pw19-frame {
    position: relative;
    width: min(90vw, 400px);
    aspect-ratio: 1;
    background: url("../../images/theme19/modal/point_wheel/bg-wheel.png") center / contain no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pw19-frame-inner {
    position: relative;
    width: 74%;
    height: 74%;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 3px;
}
.pw19-canvas {
    width: 112%;
    height: 112%;
    max-width: 320px;
    max-height: 320px;
    border-radius: 50%;
}
.pw19-center-spin {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -60%);
    width: 35%;
    max-width: 100px;
    z-index: 3;
    cursor: pointer;
    border: 0;
    background: transparent;
    padding: 0;
}
.pw19-center-spin img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
}
.pw19-float {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 5;
}
.pw19-float a {
    display: block;
    width: 65px;
    height: 65px;
}
.pw19-float img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pw19-controls {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    max-width: 400px;
    margin: 0 auto;
    padding: 0 4px;
    position: relative;
}
.pw19-spins-box {
    background: 
        linear-gradient(#FFF7D6, #FEEB9E) padding-box,
        linear-gradient(180deg, #BD7C3E 0%, #A2440A 100%) border-box;
    border: 5px solid transparent;
    box-shadow: 0px 5px 0px 0px #5E2400;
    border-radius: 10px;
    min-width: 60px;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 800;
}
.pw19-spins-box span {
    color: var(--txt-fifth);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.pw19-spins-box .pw19-spin-val {
    font-size: 18px;
    font-weight: 900;
}
.pw19-spin-main {
    width: 50vw;
    height: 22vw;
    border: 0;
    background: url("../../images/theme19/modal/point_wheel/spin.png") center / contain no-repeat;
    padding: 0;
    position: absolute;
    bottom: -20%;
    left: 50%;
    transform: translateX(-50%);
}
.pw19-spin-main span{
    font-size: 32px;
    font-weight: 600;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
}
.pw19-auto {
    background: 
        linear-gradient(#FFF7D6, #FEEB9E) padding-box,
        linear-gradient(180deg, #BD7C3E 0%, #A2440A 100%) border-box;
    border: 5px solid transparent;
    box-shadow: 0px 5px 0px 0px #5E2400;
    border-radius: 10px;
    width: 60px;
    min-height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 5px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}
.pw19-auto:has(.is-on) {
    background: 
        radial-gradient(50% 50% at 50% 50%, #DAFF74 35.61%, #5BC900 100%) padding-box,
        linear-gradient(180deg, #08A800 0%, #00670F 100%) border-box;
    border: 5px solid transparent;
    box-shadow: 0px 5px 0px 0px #003711;
    border-radius: 10px;
}
.pw19-auto:has(.is-on) span {
    color: #016A0F;
}
.pw19-auto span {
    color: var(--txt-fifth);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.pw19-switch {
    position: relative;
    width: 30px;
    height: 16px;
    border-radius: 999px;
    background: #c44;
    cursor: pointer;
    transition: background 0.2s;
}
.pw19-switch.is-on {
    background: #3daf50;
}
.pw19-switch::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bg-white);
    transition: transform 0.2s;
}
.pw19-switch.is-on {
    background: #3daf50;
}
.pw19-switch.is-on::after {
    transform: translateX(13px);
}
.pw19-deco {
    position: relative;
    max-width: 400px;
    margin: 8px auto 0;
    min-height: 70px;
    pointer-events: none;
}
.pw19-deco .pw19-crab {
    position: absolute;
    right: 30%;
    bottom: 90%;
    width: min(65px, 15vw);
    height: auto;
}
.pw19-deco .pw19-chest {
    position: absolute;
    left: 4%;
    bottom: 10%;
    width: min(52px, 12vw);
    height: auto;
}
.pw19-deco .pw19-box {
    position: absolute;
    left: 85%;
    top: 0;
    transform: translate(-50%, -50%);
    width: min(32vw, 150px);
    height: auto;
}
.pw19-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.72);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}
.pw19-modal.is-open {
    opacity: 1;
    visibility: visible;
}
.pw19-modal-box {
    width: 100%;
    max-width: 340px;
    background: linear-gradient(180deg, #8B5A3C 0%, #5D3A1F 100%);
    border-radius: 20px;
    padding: 0 18px 22px;
    text-align: center;
    transform: scale(0.92);
    transition: transform 0.28s ease;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}
.pw19-modal.is-open .pw19-modal-box {
    transform: scale(1);
}
.pw19-modal-plaque {
    width: calc(100% + 36px);
    margin: -12px -18px 14px;
    max-height: 72px;
    object-fit: contain;
}
.pw19-modal-box h3 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
.pw19-modal-sub {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 12px;
}
.pw19-modal-prize-img {
    width: min(200px, 55vw);
    height: auto;
    margin: 0 auto 12px;
    filter: drop-shadow(0 0 20px rgba(255, 220, 120, 0.55));
}
.pw19-modal-amount {
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 18px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.pw19-modal-claim {
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 900;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(90deg, #E93CFF 0%, #FF8C42 100%);
    box-shadow: 0 4px 0 #8B2D4A;
}
.pw19-block {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1999;
    background: rgba(0, 0, 0, 0.25);
}
/* ── End Point Wheel ── */