/* PP User Page — professional dark theme (#7737f9 accent) */
:root {
    --pp-bg: #000000;
    --pp-bg-elevated: #0d0d0d;
    --pp-bg-card: #111111;
    --pp-bg-input: #141414;
    --pp-accent: #7737f9;
    --pp-accent-light: #a47dff;
    --pp-accent-hover: #5c22e0;
    --pp-header-btn-height: 32px;
    --pp-accent-muted: rgba(119, 55, 249, 0.35);
    --pp-accent-soft: rgba(119, 55, 249, 0.12);
    --pp-text: #f0f0f5;
    --pp-text-muted: #a8a8b8;
    --pp-border: rgba(119, 55, 249, 0.45);
    --pp-radius: 6px;
}

body,
body.index2 {
    background: var(--pp-bg) !important;
    color: var(--pp-text);
}

.index2 .header .mainmenu-area {
    background: var(--pp-bg) !important;
    border-bottom: 1px solid var(--pp-border);
}

.header .top-header {
    background: var(--pp-bg) !important;
}

/* Mobile navbar toggler — purple SVG */
.navbar-light .navbar-toggler-icon.pp-toggler-icon {
    background-image: none !important;
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.navbar-toggler .pp-toggler-icon svg {
    display: block;
}

/* Sign In / Sign Out — same style */
.head-userinfo-box > div > a.login_btn,
.head-userinfo-box > div > a.rollchange_btn,
.head-userinfo-box > div > a.logout_btn,
.htl_btn.login_btn,
.htl_btn.logout_btn {
    background: #7c4aef !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--pp-radius);
    height: var(--pp-header-btn-height) !important;
    min-height: var(--pp-header-btn-height) !important;
    line-height: var(--pp-header-btn-height) !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.head-userinfo-box > div > a.login_btn:hover,
.head-userinfo-box > div > a.rollchange_btn:hover,
.head-userinfo-box > div > a.logout_btn:hover,
.htl_btn.login_btn:hover,
.htl_btn.logout_btn:hover {
    background: var(--pp-accent-hover) !important;
    color: #fff !important;
    box-shadow: 0 0 12px var(--pp-accent-muted);
}

.head-userinfo-box > div > a.register_btn {
    background: #7c4aef !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--pp-radius);
    height: var(--pp-header-btn-height) !important;
    min-height: var(--pp-header-btn-height) !important;
    line-height: var(--pp-header-btn-height) !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.head-userinfo-box > div > a.register_btn:hover {
    background: var(--pp-accent-hover) !important;
    color: #fff !important;
    box-shadow: 0 0 12px var(--pp-accent-muted);
}

.loggedin-user .text-orange,
.text-orange {
    color: var(--pp-accent) !important;
}

/* Inputs */
.head-userinfo-box input,
input::placeholder,
.user-info-content input,
.user-info-content input::placeholder {
    color: var(--pp-text) !important;
}

.head-userinfo-box input,
.container.input-form-container input.dic_ipt,
.jic_ipt,
input.new-question-title,
.form-control.new-question-item,
.laypage_main input.laypage_skip {
    background: var(--pp-bg-input) !important;
    border: 1px solid var(--pp-border) !important;
    color: var(--pp-text) !important;
}

#search-gamename,
.search-container .input-group-text {
    border-color: var(--pp-border) !important;
    background-color: var(--pp-bg-input) !important;
    color: var(--pp-text) !important;
}

#search-gamename:focus {
    border-color: var(--pp-accent) !important;
    box-shadow: 0 0 0 2px var(--pp-accent-soft);
}

/* Section borders & backgrounds */
.sub_h2,
.sub_ttl_box,
.bestgame-container,
.search-container {
    background: var(--pp-bg) !important;
    border-color: var(--pp-border) !important;
}

.bg-dark-alpha-4.company-games {
    background-color: var(--pp-bg-card) !important;
}

/* Game list section — full width, no side margins */
.bestgame-container .container {
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.bestgame-container .container > .row {
    margin-left: 0;
    margin-right: 0;
}

.bestgame-container .container > .row > .col,
.bestgame-container .company-games {
    padding-left: 0;
    padding-right: 0;
}

.bestgame-container #company-games {
    margin-left: 0;
    margin-right: 0;
}

/* Tables */
.table-notice,
.cart-table-area tbody tr,
.deposit-box-back,
.detail-question {
    background: var(--pp-bg-card) !important;
    border-color: var(--pp-border) !important;
}

.table-notice thead th,
.table-notice tbody td,
.table td,
.table th,
.detail-text,
.detail-text p,
h4.customer-center.text-gold,
.text-gold {
    color: var(--pp-text) !important;
}

/* Action buttons */
.btn_back,
.laypage_main button.laypage_btn,
.btm_btn,
.bd_btm_btn01,
.btn_type03 {
    background: transparent !important;
    color: var(--pp-accent) !important;
    border: 1.5px solid var(--pp-accent) !important;
    border-radius: var(--pp-radius);
}

.btn_back:hover,
.laypage_main button.laypage_btn:hover,
.btm_btn:hover,
.bd_btm_btn01:hover {
    background: var(--pp-accent) !important;
    color: #fff !important;
}

.btn_type01,
.btn_type04,
.bd_btm_btn02,
.btn_type02 {
    background: var(--pp-bg-input) !important;
    border: 1px solid var(--pp-border) !important;
    color: var(--pp-text) !important;
}

.btn_type02:hover,
.btn_type04:hover {
    border-color: var(--pp-accent) !important;
    color: var(--pp-accent) !important;
}

/* Game type tabs */
#gametype-casino,
#gametype-slot {
    background-color: var(--pp-bg-card) !important;
    color: var(--pp-text-muted) !important;
    border: 1px solid var(--pp-border);
}

#gametype-casino.selected,
#gametype-slot.selected {
    background: transparent !important;
    color: var(--pp-accent) !important;
    border: 1.5px solid var(--pp-accent) !important;
}

/* Game card Play button — color only (Sign In palette) */
.game-btn .mybtn2 {
    background: var(--pp-accent-light) !important;
    color: #fff !important;
}

.game-btn:hover .mybtn2,
.game-btn .mybtn2:hover {
    background: var(--pp-accent-hover) !important;
    color: #fff !important;
}

/* Modals */
.gamelistmodal .gamelistmodal-container .modal-content {
    background: var(--pp-bg-elevated) !important;
    border: 1px solid var(--pp-border);
}

.login-modal .modal-content.login-modal-content,
.login-modal .modal-content.popup-modal-content {
    border: 1px solid var(--pp-border) !important;
    background-color: var(--pp-bg-elevated) !important;
    border-radius: 12px !important;
    overflow: hidden;
}

.login-modal .modal-body {
    padding: 0 0.65rem 0.5rem !important;
}

.pp-login-form {
    padding: 0 0.15rem 0.25rem;
}

.pp-login-form .user-info-content {
    padding-top: 0.5rem;
}

.pp-login-title.reject_txt {
    color: var(--pp-accent) !important;
    font-size: 1.25rem !important;
    font-weight: 600;
    margin: 2.5rem 0 1.25rem !important;
    border: none !important;
    letter-spacing: 0.02em;
}

.pp-login-field {
    margin-bottom: 1rem;
}

.pp-login-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 44px;
    padding: 0 0.55rem;
    background: var(--pp-bg-input);
    border: 1px solid var(--pp-border);
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pp-login-input-wrap:focus-within {
    border-color: var(--pp-accent);
    box-shadow: 0 0 0 3px var(--pp-accent-soft);
}

.pp-login-icon {
    flex-shrink: 0;
    color: var(--pp-accent);
    opacity: 0.85;
}

.pp-login-input {
    flex: 1;
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: var(--pp-text) !important;
    font-size: 0.9375rem;
    font-weight: 400;
    text-align: left !important;
    box-shadow: none !important;
}

.pp-login-input::placeholder {
    color: var(--pp-text-muted);
    opacity: 0.75;
}

.login-modal .user-info-content input.pp-login-input {
    color: var(--pp-text) !important;
}

/* Browser autofill — keep dark theme (no white flash) */
.pp-login-input:-webkit-autofill,
.pp-login-input:-webkit-autofill:hover,
.pp-login-input:-webkit-autofill:focus,
.pp-login-input:-webkit-autofill:active,
.pp-login-input:autofill,
.pp-login-input:autofill:hover,
.pp-login-input:autofill:focus,
.pp-login-input:autofill:active {
    -webkit-text-fill-color: var(--pp-text) !important;
    caret-color: var(--pp-text);
    -webkit-box-shadow: 0 0 0 1000px var(--pp-bg-input) inset !important;
    box-shadow: 0 0 0 1000px var(--pp-bg-input) inset !important;
    background-color: transparent !important;
    transition: background-color 99999s ease-out, color 99999s ease-out;
}

/* Login modal buttons — Sign In style, pill (round), horizontal */
.pp-login-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.75rem 0.35rem 2.25rem;
}

.pp-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    max-width: 160px;
    height: 40px;
    padding: 0 16px;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    border: none;
    box-sizing: border-box;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pp-login-btn-primary,
.pp-login-btn-secondary {
    background: #7c4aef !important;
    color: #fff !important;
}

.pp-login-btn-primary:hover,
.pp-login-btn-secondary:hover {
    background: var(--pp-accent-hover) !important;
    color: #fff !important;
    box-shadow: 0 0 12px var(--pp-accent-muted);
}

.reject_txt {
    color: var(--pp-accent) !important;
}

.bg-white-alpha-1 {
    background-color: var(--pp-bg-input) !important;
    border: 1px solid var(--pp-border) !important;
}

/* SweetAlert */
.swal2-popup {
    background: var(--pp-bg-elevated) !important;
    border: 1px solid var(--pp-border) !important;
}

.swal2-styled.swal2-confirm {
    background: transparent !important;
    color: var(--pp-accent) !important;
    border: 1.5px solid var(--pp-accent) !important;
    border-radius: var(--pp-radius) !important;
}

.swal2-styled.swal2-confirm:hover {
    background: var(--pp-accent) !important;
    color: #fff !important;
}

/* Carousel indicators */
.carousel li.active .banner-icon-mask {
    box-shadow: 0 0 0 2px var(--pp-accent);
    border-radius: 5px;
}

/* Language selector */
.top-header .content,
.mainmenu-area .navbar,
.mainmenu-area .navbar .w-100.d-lg-none {
    overflow: visible;
}

.langs-box-container {
    background: var(--pp-bg-elevated) !important;
    border: 1px solid var(--pp-border);
}

.btn-lang-select {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--pp-text) !important;
    height: var(--pp-header-btn-height) !important;
    min-height: var(--pp-header-btn-height) !important;
    margin-top: 0 !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: var(--pp-radius);
    background-color: transparent !important;
}

.btn-lang-select:hover {
    background-color: var(--pp-accent-soft) !important;
}

/* Top header — lang + Sign In same height */
.top-header .content > .float-left {
    margin-top: 0 !important;
    display: inline-flex !important;
    align-items: center;
}

.top-header .float-left .lang-select {
    margin-top: 0 !important;
    display: inline-flex;
    align-items: center;
}

.top-header .head-userinfo-box {
    align-items: center;
}

.top-header .head-userinfo-box .btn-container {
    display: inline-flex;
    align-items: center;
}

/* Desktop — space between balance and Sign Out */
@media (min-width: 992px) {
    .top-header #after-login.head-userinfo-box,
    .top-header .head-userinfo-box.after-login {
        gap: 1rem;
    }

    .top-header #after-login .loggedin-user {
        margin-right: 0.5rem;
        padding-right: 0.75rem;
    }

    .top-header #after-login .btn-container {
        margin-left: 0.25rem;
    }
}

/* Mobile — center language, Sign In / Sign Out */
@media (max-width: 991.98px) {
    .top-header .content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .top-header .content > .float-left {
        float: none !important;
        width: 100%;
        display: flex !important;
        justify-content: center;
    }

    .top-header .head-userinfo-box,
    .top-header #before-login,
    .top-header #after-login {
        width: 100%;
        justify-content: center !important;
    }

    .top-header .loggedin-user {
        text-align: center;
        width: auto;
    }

    /* Balance + Sign Out — horizontal row */
    .head-userinfo-box.after-login,
    #after-login,
    #mb-after-login {
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.5rem;
    }

    .head-userinfo-box.after-login .loggedin-user,
    #after-login .loggedin-user,
    #mb-after-login .loggedin-user {
        width: auto !important;
        max-width: none;
        padding-right: 0 !important;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0.2rem 0.45rem;
        text-align: center;
    }

    .head-userinfo-box.after-login .loggedin-user br,
    #mb-after-login .loggedin-user br {
        display: none !important;
    }

    .head-userinfo-box.after-login .btn-container,
    #after-login .btn-container,
    #mb-after-login .btn-container {
        display: inline-flex !important;
        flex-shrink: 0;
        margin: 0;
    }

    .mainmenu-area .navbar .w-100.d-lg-none {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 100%;
        width: 100%;
        gap: 8px;
        padding: 0.35rem 0;
    }

    .mainmenu-area .lang-select {
        position: relative !important;
    }

    .mainmenu-area .float-left.d-lg-none {
        float: none !important;
        display: flex;
        justify-content: center;
    }

    .mainmenu-area #mb-before-login,
    .mainmenu-area #mb-after-login {
        width: auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        justify-content: center !important;
    }

    .mainmenu-area .head-userinfo-box {
        justify-content: center !important;
        gap: 0.5rem;
    }

    .mainmenu-area #mb-after-login {
        flex-wrap: nowrap !important;
    }
}

.menu-link-item:hover,
a.menu-link-item:hover {
    color: var(--pp-accent) !important;
}

.border-bottom {
    border-bottom-color: var(--pp-border) !important;
}

/* Game play modal */
.gameplaymodal-content,
.gameplay-iframe-form {
    background-color: var(--pp-bg) !important;
}

.game-title.text-orange {
    color: var(--pp-accent) !important;
}

/* Laypage pagination */
.laypage_main a {
    color: var(--pp-text-muted) !important;
}

.laypage_main a.laypage_curr {
    color: var(--pp-accent) !important;
    border: 1px solid var(--pp-accent) !important;
    background: transparent !important;
}

/* M sidebar */
#sidebar {
    background-color: var(--pp-bg-elevated) !important;
    border-right: 1px solid var(--pp-border);
}

/* Content area */
section.content {
    background: var(--pp-bg);
}

.hm_txt02 {
    color: var(--pp-text-muted) !important;
}