/* =====================================================
   MOBILE LANDSCAPE — Centralized Override CSS
   Loaded LAST to naturally win cascade order.
   All rules use `html.mobile-landscape` prefix (JS-toggled class).
   ===================================================== */

/* ─── GLOBAL: Layout ─── */
html.mobile-landscape .footer-btngroup.d-xl-none,
html.mobile-landscape .footer-btngroup.d-xl-none .footerDb,
html.mobile-landscape .footer-btngroup.d-xl-none .navbarm.d-xl-none {
    display: none !important;
}
html.mobile-landscape .maincontainer {
    padding-bottom: 0.5rem !important;
}
html.mobile-landscape .boxContainer {
    padding-top: 0.35rem !important;
}

/* ─── GLOBAL: Quick Home Button ─── */
html.mobile-landscape .quick-home-top.d-none {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    height: 24px;
    padding: 0.08rem 0.5rem;
    font-size: 0.66rem;
    line-height: 1;
    text-transform: uppercase;
    border-radius: 999px;
    white-space: nowrap;
}

/* ─── GLOBAL: Userbar ─── */
html.mobile-landscape .userbar {
    margin-bottom: 0.35rem !important;
}
html.mobile-landscape .userbar .webbg-userbar {
    min-height: 32px;
    padding: 0.14rem 0.32rem !important;
}
html.mobile-landscape .userbar .avatar {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    margin-right: 0.28rem !important;
    border-width: 1px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
html.mobile-landscape .userbar .avatar-user {
    width: 22px !important;
    height: 22px !important;
}
html.mobile-landscape .userbar .userprfiledb-name {
    font-size: 0.74rem !important;
    line-height: 1;
    margin-bottom: 0;
    text-transform: uppercase !important;
    letter-spacing: 0.25px;
    max-width: 108px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html.mobile-landscape .userbar .userprfiledb-right,
html.mobile-landscape .userbar .userprfiledb-right * {
    text-transform: uppercase;
}
html.mobile-landscape .userbar .userprfiledb-right {
    margin-left: auto !important;
    font-size: 0.68rem;
    line-height: 1;
    white-space: nowrap;
    display: flex;
    align-items: center;
}
html.mobile-landscape .userbar .userprfiledb-right .dropdown {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}
html.mobile-landscape .userbar .userprfiledb-right .badge {
    font-size: 0.64rem !important;
    padding: 0.12rem 0.28rem;
    line-height: 1;
}

/* ─── GLOBAL: Forms (Bootstrap overrides) ─── */
html.mobile-landscape .form-bg-s1 {
    padding: 0.5rem 0.75rem !important;
}
html.mobile-landscape .form-label {
    font-size: 0.88rem !important;
    margin-bottom: 0.15rem;
}
html.mobile-landscape .form-control {
    font-size: 0.88rem !important;
    padding: 0.35rem 0.55rem !important;
}
html.mobile-landscape .form-select {
    font-size: 0.88rem !important;
    padding: 0.35rem 0.55rem !important;
}
html.mobile-landscape .btn-primary-s1 {
    font-size: 0.92rem !important;
    padding: 0.4rem 0.9rem !important;
}
html.mobile-landscape .btn-primary-s1.fs-4 {
    font-size: 0.92rem !important;
}

/* ─── GLOBAL: Spacing ─── */
html.mobile-landscape .mb-3 {
    margin-bottom: 0.4rem !important;
}
html.mobile-landscape .mb-xl-4 {
    margin-bottom: 0.4rem !important;
}

/* ─── GLOBAL: Alert, Breadcrumb ─── */
html.mobile-landscape .alert {
    font-size: 0.85rem !important;
    padding: 0.45rem 0.65rem !important;
}
html.mobile-landscape .breadcrumbBar {
    margin-bottom: 0.25rem !important;
}
html.mobile-landscape .breadcrumb {
    font-size: 0.85rem !important;
}


/* =====================================================
   HOME PAGE
   ===================================================== */
html.mobile-landscape .home-userbar {
    display: flex;
    align-items: center;
}
html.mobile-landscape .home-userbar .home-lang-quick {
    display: flex;
    align-items: center;
    margin-left: 0.2rem;
    margin-right: 0.25rem;
}
html.mobile-landscape .home-userbar .home-lang-quick .btn {
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.08rem 0.32rem;
    font-size: 0.64rem;
    line-height: 1;
    text-transform: uppercase;
    border-radius: 999px;
}
html.mobile-landscape .home-userbar .home-lang-quick .lang-flag {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 0.16rem;
}
html.mobile-landscape .home-userbar .home-balance-wrap {
    margin-left: auto !important;
}
html.mobile-landscape .home-menu-grid {
    --bs-gutter-x: 0.25rem;
    --bs-gutter-y: 0.35rem;
}
html.mobile-landscape .home-menu-grid .menu-landscape-show {
    display: block !important;
}
html.mobile-landscape .home-menu-grid .menu-item-col {
    flex: unset;
    max-width: unset;
    width: 100%;
    padding-bottom: 0 !important;
}
html.mobile-landscape .home-menu-grid .my-menu-button {
    max-width: 140px;
}
html.mobile-landscape .home-menu-grid .my-menu-button .icon-wrap,
html.mobile-landscape .home-menu-grid .my-menu-button .avatar,
html.mobile-landscape .home-menu-grid .my-menu-button .avatar-80 {
    width: clamp(48px, 9vw, 64px) !important;
    height: clamp(48px, 9vw, 64px) !important;
    background: none !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-radius: 16px !important;
    overflow: visible !important;
}
html.mobile-landscape .home-menu-grid .my-menu-button .avatar img {
    width: 100% !important;
    height: 100% !important;
    min-height: unset !important;
    margin: 0 !important;
}
html.mobile-landscape .home-menu-grid .my-menu-button .text-center a {
    font-size: 0.82rem;
}


/* =====================================================
   GIFTCODE PAGE
   ===================================================== */
html.mobile-landscape .gc-form-row {
    flex-wrap: nowrap;
    gap: 0.35rem;
}
html.mobile-landscape .gc-code-item {
    padding: 0.4rem 0.5rem;
    gap: 0.4rem;
    font-size: 0.88rem;
}
html.mobile-landscape .gc-code-badge {
    padding: 0.15rem 0.4rem;
    font-size: 0.9rem;
}
html.mobile-landscape .gc-code-title {
    font-size: 0.85rem;
}
html.mobile-landscape .gc-code-desc {
    font-size: 0.78rem;
}
html.mobile-landscape .gc-code-end {
    font-size: 0.74rem;
}
html.mobile-landscape .gc-section-title {
    font-size: 0.88rem;
}
html.mobile-landscape .gc-note-toggle {
    font-size: 0.88rem;
}


/* =====================================================
   ACCOUNT / INFOR PAGE
   ===================================================== */
html.mobile-landscape .infor-profile {
    flex-wrap: nowrap;
    padding: 0.4rem 0.5rem;
    gap: 0.4rem;
    margin-bottom: 0.45rem;
}
html.mobile-landscape .infor-avatar img {
    width: 42px;
    height: 42px;
}
html.mobile-landscape .infor-details {
    font-size: 0.82rem;
}
html.mobile-landscape .infor-details .infor-name {
    font-size: 0.92rem;
}
html.mobile-landscape .infor-action-btns {
    flex: 0 0 auto;
    gap: 0.3rem;
}
html.mobile-landscape .infor-action-tile {
    flex: 0 0 auto;
    height: 42px;
    padding: 0 0.5rem;
    border-radius: 0.5rem;
}
html.mobile-landscape .infor-action-tile .tile-icon {
    font-size: 0.92rem;
}
html.mobile-landscape .infor-action-tile .tile-label {
    font-size: 0.78rem;
}
html.mobile-landscape .infor-history-btn {
    padding: 0.4rem 0.6rem;
    margin-bottom: 0;
}
html.mobile-landscape .infor-history-icon {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
    border-radius: 0.45rem;
}
html.mobile-landscape .infor-history-text {
    font-size: 0.88rem;
}
html.mobile-landscape .infor-history-sub {
    font-size: 0.72rem;
}
html.mobile-landscape .infor-log-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
}
html.mobile-landscape .infor-log-item {
    padding: 0.25rem 0.45rem;
    font-size: 0.82rem;
    border-radius: 0.4rem;
}
html.mobile-landscape .infor-log-item .log-time {
    font-size: 0.72rem;
}

/* Account modals */
html.mobile-landscape #modalChangeAcc .modal-dialog,
html.mobile-landscape #modalChangePwd .modal-dialog {
    max-width: 520px !important;
    margin: 0.3rem auto !important;
}
html.mobile-landscape #modalChangeAcc .modal-header,
html.mobile-landscape #modalChangePwd .modal-header {
    padding: 0.4rem 0.7rem;
}
html.mobile-landscape #modalChangeAcc .modal-body,
html.mobile-landscape #modalChangePwd .modal-body {
    padding: 0.5rem 0.7rem;
}
html.mobile-landscape #modalChangeAcc .modal-body .alert,
html.mobile-landscape #modalChangePwd .modal-body .alert {
    font-size: 0.82rem;
    padding: 0.35rem 0.55rem;
    margin-bottom: 0.4rem !important;
}
html.mobile-landscape #modalChangeAcc .modal-body .form-label,
html.mobile-landscape #modalChangePwd .modal-body .form-label {
    font-size: 0.85rem;
    margin-bottom: 0.15rem;
}
html.mobile-landscape #modalChangeAcc .modal-body .form-control,
html.mobile-landscape #modalChangePwd .modal-body .form-control {
    font-size: 0.88rem;
    padding: 0.35rem 0.55rem;
}
html.mobile-landscape #modalChangeAcc .modal-body .btn,
html.mobile-landscape #modalChangePwd .modal-body .btn {
    font-size: 0.88rem;
    padding: 0.38rem 0.75rem;
}
html.mobile-landscape #modalChangeAcc .modal-title,
html.mobile-landscape #modalChangePwd .modal-title {
    font-size: 1.1rem !important;
}
html.mobile-landscape #modalChangePwd .pwd-fields-row .col-pwd-field {
    flex: 0 0 50%;
    max-width: 50%;
}
html.mobile-landscape #modalChangeAcc .acc-fields-row .col-acc-field {
    flex: 0 0 50%;
    max-width: 50%;
}


/* =====================================================
   TRADE LOG — Toolbar
   ===================================================== */
html.mobile-landscape .tl-toolbar {
    gap: 0.25rem;
    margin-bottom: 0.35rem;
}
html.mobile-landscape .tl-asset-picker {
    padding: 0.25rem 0.5rem;
    gap: 0.3rem;
}
html.mobile-landscape .tl-asset-picker img {
    width: 18px;
    height: 18px;
}
html.mobile-landscape .tl-asset-picker-label {
    font-size: 0.72rem;
}
html.mobile-landscape .tl-dir-btn {
    font-size: 0.65rem;
    padding: 0.18rem 0.45rem;
}
html.mobile-landscape .tl-min-group label {
    font-size: 0.68rem;
}
html.mobile-landscape .tl-min-group input {
    width: 46px;
    font-size: 0.7rem;
    padding: 0.2rem 0.3rem;
}
html.mobile-landscape .tl-min-group .tl-go-btn {
    font-size: 0.65rem;
    padding: 0.2rem 0.45rem;
}
html.mobile-landscape #modalAssetType .modal-dialog {
    max-width: 480px;
    max-height: 90vh;
}
html.mobile-landscape #modalAssetType .modal-content {
    max-height: 85vh;
}
html.mobile-landscape #modalAssetType .modal-body {
    padding: 0.4rem 0.6rem 0.7rem;
    max-height: 60vh;
    overflow-y: auto;
}
html.mobile-landscape .tl-popup-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 0.25rem;
}
html.mobile-landscape .tl-popup-item {
    min-height: 42px;
    padding: 0.2rem 0.1rem;
}
html.mobile-landscape .tl-popup-item img {
    width: 20px;
    height: 20px;
}
html.mobile-landscape .tl-popup-item-name {
    font-size: 0.5rem;
}
html.mobile-landscape .tl-popup-item-all {
    font-size: 0.68rem;
}

/* ─── TRADE LOG — List (loaded via AJAX) ─── */
html.mobile-landscape .tl-list {
    gap: 0.2rem;
}
html.mobile-landscape .tl-item {
    padding: 0.3rem 0.45rem;
    gap: 0.3rem;
    font-size: 0.72rem;
}
html.mobile-landscape .tl-item-icon img {
    width: 18px;
    height: 18px;
}
html.mobile-landscape .tl-item-purpose {
    font-size: 0.7rem;
}
html.mobile-landscape .tl-item-time {
    font-size: 0.6rem;
}
html.mobile-landscape .tl-item-qty {
    font-size: 0.72rem;
}
html.mobile-landscape .tl-item-bal {
    font-size: 0.58rem;
}
html.mobile-landscape .tl-pager-btn {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
}
html.mobile-landscape .tl-pager-current {
    font-size: 0.72rem;
}


/* ── Tooltip line base (always active) ── */
.t-tt-ln { display: block; }
.t-tt-br { display: none; }
.t-tt-sep { height: 0.5em; }

/* =====================================================
   ITEM TOOLTIP — Card Layout (for items with >10 lines)
   ===================================================== */

/* ── Header: image + name side-by-side ── */
.t-tt-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.20);
}
.t-tt-img {
    flex-shrink: 0;
    max-height: 80px !important;
    margin: 0 !important;
    filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.15));
}
.t-tt-title {
    text-align: left;
    line-height: 1.4;
    min-width: 0;
}

/* ── Body: CSS grid of section cards ── */
.t-tt-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.t-tt-sec {
    padding: 7px 9px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.04);
    border-left: 2px solid rgba(127, 178, 255, 0.35);
    line-height: 1.45;
    text-align: left;
}
/* Socket / special sections with bold header span full width */
.t-tt-sec:has(b) {
    border-left-color: rgba(255, 25, 255, 0.45);
}
/* Last section if odd count → span full width */
.t-tt-sec:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* ── Portrait / non-landscape: single column, compact section gaps ── */
html:not(.mobile-landscape) .t-tt-body {
    grid-template-columns: 1fr;
    gap: 3px;
}
html:not(.mobile-landscape) .t-tt-sec {
    padding: 4px 7px;
    line-height: 1.35;
}
html:not(.mobile-landscape) .t-tt-sec:last-child:nth-child(odd) {
    grid-column: auto;
}

/* ── Legacy two-column (kept for compat) ── */
.t-tt-head { text-align: center; margin-bottom: 6px; }
.t-tt-cols { display: flex; gap: 0; }
.t-tt-col { flex: 1 1 0; min-width: 0; text-align: center; }
.t-tt-divider { width: 1px; background: #FFD700; margin: 0 8px; flex-shrink: 0; }

/* =====================================================
   ITEM TOOLTIP (popover) — landscape
   ===================================================== */
html.mobile-landscape .popover {
    --ml-menu-safe-left: 170px;
    --ml-popover-side-gap: 12px;
    width: auto !important;
    max-width: calc((100vw - var(--ml-menu-safe-left) - var(--ml-popover-side-gap) * 2) * 0.8) !important;
    max-height: calc(100vh - 24px) !important;
    inset: auto !important;
    position: fixed !important;
    top: 50% !important;
    left: calc(var(--ml-menu-safe-left) + ((100vw - var(--ml-menu-safe-left)) / 2)) !important;
    transform: translate(-50%, -50%) !important;
    overflow: auto !important;
}
html.mobile-landscape .popover .popover-arrow {
    display: none !important;
}
html.mobile-landscape .t-item-tooltip > img {
    max-height: 70px !important;
    margin: 8px !important;
}
html.mobile-landscape .popover-body {
    font-size: 0.76rem !important;
    padding: 10px 12px !important;
}
/* Landscape: allow wider grid */
html.mobile-landscape .t-tt-body {
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}
html.mobile-landscape .t-tt-sec {
    font-size: 0.73rem;
    padding: 5px 7px;
}
html.mobile-landscape .t-tt-img {
    max-height: 68px !important;
}
html.mobile-landscape .t-tt-ln {
    display: inline;
}
html.mobile-landscape .t-tt-ln-r::before {
    content: " \2022 ";
    color: #FFD700;
}
html.mobile-landscape .t-tt-br {
    display: block;
}

/* =====================================================
   MALL / SHOP PAGE
   ===================================================== */

/* ─── Filter row: 2x2 grid instead of 4 cols ─── */
html.mobile-landscape .form-bg-s1 > .container .row.row-cols-2 {
    --bs-gutter-x: 0.35rem !important;
    --bs-gutter-y: 0.25rem !important;
}
html.mobile-landscape .form-bg-s1 > .container .row.row-cols-2 select.form-control {
    font-size: 0.78rem !important;
    padding: 0.2rem 0.4rem !important;
}
html.mobile-landscape .form-bg-s1 > .container .row.row-cols-2 .input-group .form-control {
    font-size: 0.78rem !important;
    padding: 0.2rem 0.4rem !important;
}
html.mobile-landscape .form-bg-s1 > .container .row.row-cols-2 .input-group .btn {
    font-size: 0.75rem !important;
    padding: 0.2rem 0.45rem !important;
}
html.mobile-landscape .form-bg-s1 > .container.mb-3 {
    margin-bottom: 0.35rem !important;
}

/* ─── Shop Cards: smaller, tighter ─── */
html.mobile-landscape .t-shop-card {
    width: 120px !important;
    margin: 0 4px 6px 4px !important;
}
html.mobile-landscape .t-shop-card .card-body {
    padding: 0.35rem !important;
}
html.mobile-landscape .t-item-view_group {
    width: 95px !important;
    height: 95px !important;
    padding: 3px !important;
}
html.mobile-landscape .t-item-view_group .t-item > img {
    max-width: calc(100% - 5px) !important;
    max-height: calc(100% - 5px) !important;
}
html.mobile-landscape .t-item-view_group .t-item > span {
    font-size: 0.7rem !important;
}
html.mobile-landscape .t-shop-card .btn-sm {
    font-size: 0.65rem !important;
    padding: 0.15rem 0.3rem !important;
}
html.mobile-landscape .t-shop-card .text-info {
    font-size: 0.65rem !important;
}
html.mobile-landscape .t-shop-card .btn-ghost-info {
    font-size: 0.6rem !important;
    padding: 0 2px !important;
}
html.mobile-landscape .t-content-grid {
    min-height: unset !important;
}

/* ─── Rules button + inline content ─── */
.shop-rules-inline.show {
    display: block !important;
}

/* ─── Sell form: hide duplicate labels in landscape ─── */
html.mobile-landscape .t-sell-label {
    display: none !important;
}

/* ─── Shop Pagination ─── */
html.mobile-landscape .t-content-grid + .col-12 .page-link {
    font-size: 0.72rem !important;
    padding: 0.25rem 0.5rem !important;
}

/* ─── Shop Buy Popup Modal ─── */
html.mobile-landscape .modal .t-item-view_group {
    width: 100px !important;
    height: 100px !important;
}


/* =====================================================
   BUY PACKAGE PAGE
   ===================================================== */

/* ─── Package Grid: keep 2 cols, tighter spacing ─── */
html.mobile-landscape #myshopContent {
    max-width: 100% !important;
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
}
html.mobile-landscape #myshopContent .row.row-cols-2 {
    --bs-gutter-x: 0.5rem !important;
    --bs-gutter-y: 0rem !important;
}
html.mobile-landscape #myshopContent .row.row-cols-2 > .col {
    padding-bottom: 0.25rem !important;
}

/* ─── Package Card: compact, keep images ─── */
html.mobile-landscape .my-lgct_package > a > div {
    min-width: 160px !important;
    max-width: 260px;
    margin: 0 auto;
}
html.mobile-landscape .my-lgct_package .my-reward {
    font-size: 0.68rem !important;
}
html.mobile-landscape .my-lgct_package .my-price {
    font-size: 0.88rem !important;
}
html.mobile-landscape .my-lgct_package .my-price.text-decoration-line-through {
    font-size: 0.62rem !important;
}
html.mobile-landscape .my-lgct_package .giftPack {
    font-size: 0.55rem !important;
    padding: 15px 4px 0 0 !important;
}
html.mobile-landscape .my-lgct_package .limitPack,
html.mobile-landscape .my-lgct_package .limitPack2 {
    font-size: 0.6rem !important;
    padding: 6px 3px 0 0 !important;
}
html.mobile-landscape .my-lgct_package .item-info {
    font-size: 0.68rem !important;
}
html.mobile-landscape .textitem {
    font-size: 0.65rem !important;
    margin-top: -10px !important;
}

/* ─── Nav Tabs (shop categories) ─── */
html.mobile-landscape #myshop.nav-pills {
    margin-bottom: 0.35rem !important;
    gap: 1px;
}
html.mobile-landscape #myshop .nav-item {
    margin: 1px !important;
}
html.mobile-landscape #myshop .nav-link {
    padding: 3px 6px !important;
}
html.mobile-landscape #myshop .nav-item .icon {
    font-size: 15px !important;
}
html.mobile-landscape #myshop .nav-item .title {
    font-size: 0.72rem !important;
    font-weight: 500 !important;
}

/* ─── Package Modals ─── */
html.mobile-landscape [id^="pack"].modal .modal-dialog {
    max-width: 480px !important;
    margin: 0.3rem auto !important;
}
html.mobile-landscape [id^="pack"].modal .modal-content {
    border-radius: 1rem !important;
}
html.mobile-landscape [id^="pack"].modal .modal-body {
    padding: 0.4rem 0.5rem !important;
}
html.mobile-landscape [id^="pack"].modal .modal-body .my-lgct_package > a > div {
    min-width: unset !important;
    max-width: 180px;
    margin: 0 auto;
}
html.mobile-landscape [id^="pack"].modal .modal-body .alert {
    font-size: 0.75rem !important;
    padding: 0.3rem 0.45rem !important;
    margin-bottom: 0.3rem !important;
}
html.mobile-landscape [id^="pack"].modal .modal-body .alert .alert-danger {
    font-size: 0.72rem !important;
    padding: 0.25rem 0.4rem !important;
    margin-top: 0.25rem !important;
}
html.mobile-landscape [id^="pack"].modal .modal-footer {
    padding: 0.3rem 0.5rem !important;
    border-top: 0 !important;
}
html.mobile-landscape [id^="pack"].modal .modal-footer .btn {
    min-width: 240px !important;
    font-size: 0.85rem !important;
    padding: 0.35rem 0.7rem !important;
}