/* ========================================
   CSS CUSTOM PROPERTIES — THEME V8
   ======================================== */
:root {
    --tmv8-primary:        #e6710f;
    --tmv8-primary-hover:  #db5f0f;
    --tmv8-accent:         #ee8103;
    --tmv8-bg:             #f1f5f7;
    --tmv8-surface:        #ffffff;
    --tmv8-text:           #373737;
    --tmv8-text-muted:     #ababab;
    --tmv8-border:         #e5e5e5;
    --tmv8-pbox-bg:        #2f4158;
    --tmv8-pbox-text:      #ffffff;
    --tmv8-category-bg:    #ffffff;
    --tmv8-category-border:#e6710f;
    --tmv8-shadow:         0 1px 10px #617d901c;
    --tmv8-shadow-md:      0px 4px 20px rgba(0, 0, 0, 0.15);
    --tmv8-primary-shadow-subtle: color-mix(in srgb, var(--tmv8-primary) 18%, transparent);
    --tmv8-primary-shadow-soft:   color-mix(in srgb, var(--tmv8-primary) 22%, transparent);
    --tmv8-primary-shadow:        color-mix(in srgb, var(--tmv8-primary) 28%, transparent);
    --tmv8-primary-shadow-strong: color-mix(in srgb, var(--tmv8-primary) 36%, transparent);
    --tmv8-primary-glow:          color-mix(in srgb, var(--tmv8-primary) 48%, transparent);
    --tmv8-radius:         8px;
    --tmv8-transition:     0.3s ease;
}

/* Header Container */
.tmv8-header {
    background: var(--tmv8-surface);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;
    flex: 1;
    box-sizing: initial;
    box-shadow: var(--tmv8-shadow);
    position: sticky;
    top: 0;
    z-index: 2400;
}

body:has(.sticky-header) .tmv8-header {
    top: 73px;
}

/* Header Content Wrapper */
.tmv8-content {
    width: 1100px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    padding-top: 15px;
    padding-bottom: 15px;
    flex-grow: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
    position: relative;
}

/* Header Left Section */
.tmv8-header-left {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
}

/* Logo */
.tmv8-header-left .logo {
    width: 148px;
    margin-right: 30px;
    flex-shrink: 0;
}

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

.tmv8-header .tmv8-mobile-search-trigger,
.tmv8-header .tmv8-mobile-search-trigger i {
    color: #000 !important;
    fill: #000 !important;
    stroke: #000 !important;
}

.tmv8-header .tmv8-mobile-search-trigger:hover,
.tmv8-header .tmv8-mobile-search-trigger:hover i,
.tmv8-header .tmv8-mobile-search-trigger:focus,
.tmv8-header .tmv8-mobile-search-trigger:focus i,
.tmv8-header .tmv8-mobile-search-trigger:active,
.tmv8-header .tmv8-mobile-search-trigger:active i {
    color: var(--tmv8-primary, #e6710f) !important;
    fill: var(--tmv8-primary, #e6710f) !important;
    stroke: var(--tmv8-primary, #e6710f) !important;
}

/* Hide close-mobile button on desktop/tablet - only shown on mobile when search is active */
.close-mobile {
    display: none;
}

.tmv8-header-left .logo a {
    display: block;
    width: 100%;
    height: 100%;
}

.tmv8-header-left .logo img {
    width: 100%;
    height: 35px;
    object-fit: contain;
    display: block;
}

/* Logo animations */
/* @keyframes logo-anim-* tersedia dari theme_global.css */

.tmv8-header-left .logo img.logo-anim-fade { animation: logo-anim-fade 2s ease-in-out infinite; }
.tmv8-header-left .logo img.logo-anim-float { animation: logo-anim-float 2s ease-in-out infinite; }
.tmv8-header-left .logo img.logo-anim-pulse { animation: logo-anim-pulse 2s ease-in-out infinite; }
.tmv8-header-left .logo img.logo-anim-glow { animation: logo-anim-glow 2s ease-in-out infinite; }
.tmv8-header-left .logo img.logo-anim-shine { animation: logo-anim-shine 2s ease-in-out infinite; }
.tmv8-header-left .logo img.logo-anim-tilt { animation: logo-anim-tilt 2s ease-in-out infinite; }
.tmv8-header-left .logo img.logo-anim-whiteflash { animation: logo-anim-whiteflash 2s linear infinite; }

/* Menu List */
.tmv8-header-left ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    gap: 25px;
}

.tmv8-header-left ul li {
    position: relative;
}

.tmv8-header-left ul li a {
    text-decoration: none;
    color: var(--tmv8-text);
    font-size: 14px;
    font-weight: 600;
    transition: color var(--tmv8-transition);
    display: flex;
    align-items: center;
    gap: 8px;
}

.tmv8-header-left ul li a:hover {
    color: var(--tmv8-primary);
}

.tmv8-header-left ul li a i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.tmv8-header-left ul li a:hover i {
    transform: translateY(2px);
}

/* Nav Icon Styles — support both SVG and FA icons */
.tmv8-header-left ul li a svg,
.tmv8-header-left ul li a i[class*="svg-nav-"] {
    transition: all var(--tmv8-transition);
    font-size: 15px;
}

/* Globe Icon Animation - Rotate */
.tmv8-header-left ul li a:hover .svg-nav-globe {
    animation: spin 2s linear infinite;
}

/* Search Icon Animation - Bounce */
.tmv8-header-left ul li a:hover .svg-nav-search {
    animation: nav-search-bounce 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Calculator Icon Animation - Wiggle */
.tmv8-header-left ul li a:hover .svg-nav-calc {
    animation: wiggle 0.5s ease-in-out infinite;
}

/* News Icon Animation - Shake */
.tmv8-header-left ul li a:hover .svg-nav-news {
    animation: nav-news-shake 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Calculator Dropdown */
.calculator-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 5px;
    background: var(--tmv8-surface);
    border-radius: var(--tmv8-radius);
    box-shadow: var(--tmv8-shadow-md);
    padding: 8px;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    pointer-events: none;
}

.tmv8-header-left ul li:hover .calculator-dropdown,
.calculator-dropdown:hover,
.dropdown-calculator-menu.active .calculator-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Extend hover area for calculator dropdown to prevent flickering */
.dropdown-calculator-menu::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: transparent;
    pointer-events: auto;
}

.calculator-dropdown-item {
    margin-bottom: 4px;
}

.calculator-dropdown-item:last-child {
    margin-bottom: 0;
}

.calculator-dropdown-item a {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--tmv8-text);
    font-size: 14px;
    font-weight: 600;
    transition: all var(--tmv8-transition);
    position: relative;
    overflow: hidden;
}

.calculator-dropdown-item a:hover {
    background: color-mix(in srgb, var(--tmv8-primary) 10%, #fff);
    color: var(--tmv8-primary) !important;
}

.calculator-dropdown-item a:hover .item-title {
    color: var(--tmv8-primary) !important;
}

.calculator-dropdown-item .item-content {
    display: flex;
    align-items: center;
    z-index: 1;
}

.calculator-dropdown-item .item-title {
    font-size: 14px;
    font-weight: 600;
}

.calculator-dropdown-item .item-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--tmv8-primary) 10%, #fff) 0%,
        color-mix(in srgb, var(--tmv8-primary) 18%, #fff) 100%
    );
}

.calculator-dropdown-item a:hover .item-bg {
    opacity: 0.3;
}

.calculator-dropdown-item:nth-child(1) .item-bg {
    opacity: 1;
    background: linear-gradient(90deg, #1D1E20 38.1%, rgba(29, 30, 32, 0) 67.27%), url('https://digivospaces.b-cdn.net/UniPlay/Statics/calc-winrate-bg.png') lightgray 77.555px -102.052px / 81.902% 499.306% no-repeat !important;
}

.calculator-dropdown-item:nth-child(2) .item-bg {
    opacity: 1;
    background: linear-gradient(90deg, #1D1E20 38.1%, rgba(29, 30, 32, 0) 67.27%), url('https://digivospaces.b-cdn.net/UniPlay/Statics/calc-magic-wheel.png') lightgray 60.142px -56.844px / 100% 327.375% no-repeat !important;
}

.calculator-dropdown-item:nth-child(3) .item-bg {
    opacity: 1;
    background: linear-gradient(90deg, #1D1E20 38.1%, rgba(29, 30, 32, 0) 67.27%), url('https://digivospaces.b-cdn.net/UniPlay/Statics/calc-zodiak-bg.png') lightgray 77.555px -44.052px / 75.902% 448.306% no-repeat !important;
}

.calculator-dropdown-item .item-title {
    position: relative;
    z-index: 2;
    color: #fff !important;
}

.calculator-dropdown-item a:hover,
.calculator-dropdown-item a:hover .item-title {
    color: #fff !important;
}

.calculator-dropdown-item:nth-child(1) a:hover .item-bg {
    opacity: 1;
    background: linear-gradient(90deg, var(--tmv8-primary, #e6710f) 38.1%, rgba(230, 113, 15, 0) 67.27%), url('https://digivospaces.b-cdn.net/UniPlay/Statics/calc-winrate-bg.png') lightgray 77.555px -102.052px / 81.902% 499.306% no-repeat !important;
    background-blend-mode: normal;
}

.calculator-dropdown-item:nth-child(2) a:hover .item-bg {
    opacity: 1;
    background: linear-gradient(90deg, var(--tmv8-primary, #e6710f) 38.1%, rgba(230, 113, 15, 0) 67.27%), url('https://digivospaces.b-cdn.net/UniPlay/Statics/calc-magic-wheel.png') lightgray 60.142px -56.844px / 100% 327.375% no-repeat !important;
    background-blend-mode: normal;
}

.calculator-dropdown-item:nth-child(3) a:hover .item-bg {
    opacity: 1;
    background: linear-gradient(90deg, var(--tmv8-primary, #e6710f) 38.1%, rgba(230, 113, 15, 0) 67.27%), url('https://digivospaces.b-cdn.net/UniPlay/Statics/calc-zodiak-bg.png') lightgray 77.555px -44.052px / 75.902% 448.306% no-repeat !important;
    background-blend-mode: normal;
}

.dropdown-calculator-menu .calculator-dropdown {
    min-width: 303px;
    padding: 0;
    border: none;
    border-radius: 6px;
    overflow: hidden;
    background: #1d1e20;
    box-shadow: 0 16px 32px -12px rgba(14, 18, 27, 0.18);
}

.dropdown-calculator-menu .calculator-dropdown-item {
    margin: 0;
}

.dropdown-calculator-menu .calculator-dropdown-item a {
    width: 303px;
    height: 50px;
    padding: 0;
    border-radius: 0;
    color: #fff !important;
}

.dropdown-calculator-menu .calculator-dropdown-item .item-content {
    width: 120px;
    height: 100%;
    padding-left: 20px;
    background: transparent;
}

.dropdown-calculator-menu .calculator-dropdown-item:nth-child(1) .item-content {
    background: transparent;
}

.dropdown-calculator-menu .calculator-dropdown-item:nth-child(1) .item-title {
    color: #fff !important;
}

.dropdown-calculator-menu .calculator-dropdown-item:hover .item-content {
    background: transparent;
}

.dropdown-calculator-menu .calculator-dropdown-item:hover .item-title {
    color: #fff !important;
}

.dropdown-calculator-menu .calculator-dropdown-item .item-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

/* SVG Icon Animations */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes nav-search-bounce {
    0%   { transform: translateY(0) scale(1); }
    30%  { transform: translateY(-4px) scale(1.1); }
    60%  { transform: translateY(1px) scale(0.95); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes wiggle {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}

@keyframes nav-news-shake {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25%      { transform: rotate(-8deg) scale(1.05); }
    75%      { transform: rotate(8deg) scale(1.05); }
}

/* Header Right Section */
.tmv8-header-right {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

/* Search Area */
.tmv8-header-right .search-area {
    width: 280px;
    border: 1px solid var(--tmv8-border);
    border-radius: 5em;
    padding: 6px 15px 6px 20px;
    color: var(--tmv8-text-muted);
    transition: border-color var(--tmv8-transition);
    position: relative;
}

.tmv8-header-right .search-area:hover {
    border-color: var(--tmv8-accent);
}

.tmv8-header-right .search-area:focus {
    border-color: var(--tmv8-accent);
}

.tmv8-header-right .search-area:active {
    border-color: var(--tmv8-accent);
}

.tmv8-header-right .search-area.active {
    border-color: var(--tmv8-accent);
}

.tmv8-header-right .search-area .input-icon-group {
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tmv8-header-right .search-area .input-icon-group i {
    margin-right: 5px;
}

.tmv8-header-right .search-area .input-icon-group input {
    border: none;
    outline: none;
    font-size: 14px;
    width: 89%;
}

/* Search Results Dropdown */
.result-quick-search {
    background: white;
    position: absolute;
    z-index: 1000;
    padding-top: 12px;
    padding-bottom: 12px;
    border-radius: 0.5em;
    box-shadow: 0px 9px 41px -16px #6e6e6e;
    margin-top: 25px;
}

.result-quick-search ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.result-quick-search ul li .notfound {
    font-size: 13px;
    font-weight: 400;
    min-width: 220px;
    display: block;
    text-align: center;
}

.result-quick-search ul li a {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    text-decoration: none;
    padding: 10px 20px;
    min-width: 340px;
}

.result-quick-search ul li a:hover {
    background: #f3f3f3;
}

.result-quick-search ul li .left img {
    width: 40px;
    height: 40px;
    border-radius: 0.5em;
}

.result-quick-search ul li .right {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: center;
    align-items: flex-start;
    margin-left: 10px;
}

.result-quick-search ul li .right b {
    font-size: 14px;
    color: #1c1c1c;
    display: block;
    margin-bottom: 2px;
}

.result-quick-search ul li .right small {
    color: #939393;
    font-style: italic;
    font-size: 10px;
}

/* Profile Menu */
.open-profile-after-login {
    float: right;
    font-weight: 600;
    margin-right: 20px;
    font-size: 14px;
    background: white;
    padding: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    text-decoration: none;
    padding: 6px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 0.5em;
    max-width: 250px;
}

.open-profile-after-login:hover {
    background: #f7f7f7;
}

.open-profile-after-login.active {
    background: #f7f7f7;
}

.open-profile-after-login img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 15px;
}

.open-profile-after-login .no-photo {
    width: 22px;
    height: 26px;
    border-radius: 50%;
    margin-right: 6px;
    background: var(--tmv8-primary);
    text-align: center;
    line-height: 26px;
    font-weight: 600;
    font-size: 14px;
    color: white;
    flex: 1;
    display: block;
    flex: 0 0 27px;
}

.open-profile-after-login span {
    font-size: 16px;
    color: #373737;
}

/* Hamburger Menu Container */
.frame-menu-burgerbar {
    position: relative;
    cursor: pointer;
}

.frame-menu-burgerbar .burgerbar-menu-frame-outer {
    position: absolute;
    right: -40px;
    top: calc(100% + 5px);
    z-index: 3000 !important;
    box-sizing: border-box;
    padding-top: 5px;
    background: transparent !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Show dropdown when .show class is added by JavaScript */
.frame-menu-burgerbar:hover .burgerbar-menu-frame-outer,
.frame-menu-burgerbar .burgerbar-menu-frame-outer.show {
    display: block !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Create invisible bridge between icon and dropdown */
.frame-menu-burgerbar .burgerbar-menu-frame-outer::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 15px;
    background: transparent;
    pointer-events: auto;
}

.frame-menu-burgerbar .burgerbar-menu-frame {
    background: white;
    border-radius: 0.3em;
    box-sizing: border-box;
    border: 1px solid #eaeaea;
    box-shadow: 0px 0px 14px 0px #223b502b;
    pointer-events: auto;
    min-width: 220px;
    width: max-content;
}

.frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner {
    list-style: none;
    padding: 0;
    margin: 0;
}

.frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner li a {
    padding: 12px 20px;
    display: block;
    text-decoration: none;
    color: black;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid #e7e7e7;
    transition: all .3s ease-out;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    white-space: nowrap;
}

.frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner li:last-child a {
    border-bottom: none;
}

.frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner li a i {
    margin-right: 12px;
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner li a:hover {
    background: #f7f7f7;
    border-bottom-color: #e7e7e7;
}

/* Hamburger Icon */
#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
    width: 23px;
    height: 19px;
    position: relative;
    margin: 0px auto;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#nav-icon4.after-login {
    margin-top: 0;
}

#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: var(--tmv8-accent);
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

#nav-icon4 span:nth-child(1) {
    top: 1px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

#nav-icon4 span:nth-child(2) {
    top: 8px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

#nav-icon4 span:nth-child(3) {
    top: 15px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

#nav-icon4.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 0px;
    left: 4px;
    width: 100%;
}

#nav-icon4.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
}

#nav-icon4.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 16px;
    left: 4px;
    width: 100%;
}

/* ========================================
   DRAWER MENU V8 STYLES
   ======================================== */

/* Drawer Overlay */
.drawer-menu-v8-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000; /* Below sticky header (2500) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: none;
}

.drawer-menu-v8-overlay.active {
    opacity: 1;
    visibility: visible;
    display: block;
}

/* Drawer Menu Container */
.drawer-menu-v8 {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100vh;
    background: white;
    z-index: 2001; /* Below sticky header (2500) and CTA button (999999) */
    border-radius: 8px 0 0 0;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    display: none; /* Hidden by default, shown on mobile */
}

.drawer-menu-v8.open {
    transform: translateX(0);
}

/* Drawer Header */
.drawer-menu-v8-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e7e7e7;
    background: white;
    position: sticky;
    top: 0;
    z-index: 10;
    margin-top: 50px; /* Push down from top to appear below headers */
}

.drawer-menu-v8-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #373737;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
    width: 40px;
    height: 40px;
}

.drawer-menu-v8-close:hover {
    color: var(--tmv8-primary);
}

.drawer-menu-v8-close i {
    pointer-events: none;
}

/* Drawer Menu List */
.drawer-menu-v8-list {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-bottom: 80px; /* Add padding at bottom to avoid CTA button overlap */
}

.drawer-menu-v8-item {
    border-bottom: 1px solid #e7e7e7;
}

.drawer-menu-v8-item:last-child {
    border-bottom: none;
}

/* Drawer Menu Links */
.drawer-menu-v8-link {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    text-decoration: none;
    color: #373737;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.3s ease, color 0.3s ease;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.drawer-menu-v8-link:hover {
    background: #f7f7f7;
    color: var(--tmv8-primary);
}

.drawer-menu-v8-link svg {
    transition: all 0.3s ease;
}

.drawer-menu-v8-link:hover svg {
    color: #e6710f;
}

/* Drawer Menu Icons — handles both legacy .drawer-menu-v8-icon and nav_icons FA output */
.drawer-menu-v8-icon,
.drawer-menu-v8-link i[class*="svg-nav-"] {
    margin-right: 12px;
    flex-shrink: 0;
    width: 20px;
    font-size: 16px;
    text-align: center;
}

/* Drawer Menu Arrow for Expandable Items */
.drawer-menu-v8-arrow {
    margin-left: auto;
    font-size: 12px;
    transition: transform 0.3s ease;
    pointer-events: none;
}

.drawer-menu-v8-arrow.rotated {
    transform: rotate(180deg);
}

/* Drawer Submenu */
.drawer-menu-v8-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #f9f9f9;
    display: none;
}

.drawer-menu-v8-submenu-item {
    border-top: 1px solid #e7e7e7;
}

.drawer-menu-v8-submenu-link {
    display: flex;
    align-items: center;
    padding: 14px 20px 14px 52px;
    text-decoration: none;
    color: #373737;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.3s ease, color 0.3s ease;
}

.drawer-menu-v8-submenu-link:hover {
    background: #eeeeee;
    color: #e6710f;
}

/* ========================================
   SUB-FOOTER & FOOTER BASE STYLES
   ======================================== */

.sub-footer {
    background: var(--tmv8-primary, #e6710f);
    color: white;
    cursor: default;
}

.sub-footer .content {
    width: 1100px;
    padding: 20px 20px 30px 20px;
    margin: 0 auto;
}

.sub-footer .content .title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
    display: block;
    margin-top: 10px;
}

.sub-footer .content .subtitle {
    font-size: 16px;
    display: block;
    line-height: 26px;
    margin-bottom: 30px;
}

.sub-footer .content .uniplay-featured {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    align-items: start;
    align-content: baseline;
}

.sub-footer .content .uniplay-featured .child-featured {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sub-footer .content .uniplay-featured .child-featured .icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.sub-footer .content .uniplay-featured .child-featured .icon img {
    width: 32px;
    flex-shrink: 0;
    filter: brightness(50%) invert(1) sepia(1);
}

.sub-footer .content .uniplay-featured .child-featured .icon i {
    font-size: 24px;
    flex-shrink: 0;
}

.sub-footer .content .uniplay-featured .child-featured .icon b {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.sub-footer .content .uniplay-featured .child-featured > p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

.footer {
    cursor: default;
}

.footer-for-cd {
    background: #fff;
    box-shadow: 0 1px 10px #617d901c;
}

.footer .content {
    width: 1100px;
    padding: 40px 15px 30px 15px;
    margin: 0 auto;
}

.footer .content b {
    color: #343434;
    font-size: 16px;
    margin-bottom: 20px;
    display: block;
}

.footer .content .partner-uniplay {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 30px;
}

.footer .content .partner-uniplay img {
    margin-right: 15px;
}

.footer .content .copyright-area b {
    font-size: 16px;
    color: #343434;
}

.footer .content .sitemap-link {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    margin-top: -10px;
    margin-bottom: 30px;
}

.footer .content .sitemap-link li {
    margin-right: 35px;
}

.footer .content .sitemap-link li a {
    color: #565656;
    font-size: 15px;
    text-decoration: none;
}

.footer .content .sitemap-link li a:hover {
    color: #000;
}

.partner-uniplay a img {
    padding: 5px;
    transition: 0.3s;
}

img.dot-tiga:hover {
    background: #e4e4e4;
    border-radius: 50px;
}

.sosmed-list-customdomain {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.sosmed-list-customdomain a img {
    width: 32px;
}

/* ========================================
   CEK TRANSAKSI
   ======================================== */

.cek-transaksi-frame{
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.cek-transaksi-header{
    display: flex;
    width: 1100px;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    border-radius: 4px;
    background: url('../../img/cektransaksi-bg.webp');
    margin: 0 auto;
    border-radius: 4px;
    background-size: cover;
    background-position: right;
}
.cek-transaksi-header h1{
    color: #000;
    font-family: "Source Sans Pro";
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0;
}
.cek-transaksi-header .frame-frame-search-trx{
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.cek-transaksi-header .frame-frame-search-trx .ffst-search{
    position: relative;
}
.cek-transaksi-header .frame-frame-search-trx .on-error-text{
    color: red;
    font-size: 14px;
    font-style: italic;
    display: none;
}
.cek-transaksi-header .frame-frame-search-trx .ffst-search span{
    position: absolute;
    color: #1B1B1B;
    font-family: "Source Sans Pro";
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    top: 12px;
    left: 16px;
}
.cek-transaksi-header .frame-frame-search-trx .ffst-search span::after {
    content: ":";
    margin-left: 4px;
    font-weight: 600;
}
.cek-transaksi-header .frame-frame-search-trx .ffst-search input{
    display: flex;
    width: 414px;
    height: 44px;
    padding: 12px 8px;
    align-items: center;
    gap: 10px;
    border-radius: 32px;
    border: 1px solid #CED4DA;
    background: #FFF;
    padding-left: 115px;
    font-family: "Source Sans Pro";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cek-transaksi-header .frame-frame-search-trx .ffst-search input::placeholder{
    color: #B7B7B7 !important;
}
.cek-transaksi-header .frame-frame-search-trx .hit-q-trx{
    border-radius: 45px;
    background: var(--tmv8-primary);
    display: flex;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #FFF !important;
    border: none !important;
}
.cek-transaksi-header .frame-frame-search-trx .hit-q-trx i{
    font-size: 16px;
    color: #FFF !important;
}
.cek-transaksi-header .frame-frame-search-trx .hit-q-trx span{
    color: #FFF !important;
    text-align: center !important;
    font-family: "Source Sans Pro" !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
}
.cek-transaksi-header .frame-footer-search-trx p{
    margin: 0;
    color: #5E5E5E !important;
    font-family: "Source Sans Pro" !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 22px !important;
}
.cek-transaksi-header .frame-footer-search-trx p a{
    color: #475EB8 !important;
    font-family: "Source Sans Pro" !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 22px !important;
    text-decoration-line: underline !important;
}

.cek-transaksi-content{
    display: flex;
    width: 1100px;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    margin: 0 auto;
    border-radius: 4px;
}
.cek-transaksi-content .simulate-info-header{
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.cek-transaksi-content .simulate-info-header h5{
    color: #000;
    font-family: "Source Sans Pro";
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.cek-transaksi-content .stepper-wrapper{
    width: 650px;
    margin: 0 auto;
}
.cek-transaksi-content .stepper-wrapper .stepper-item .step-name{
    font-size: 15px;
}
.cek-transaksi-content .frame-transaksi-game-preview{
    width: 594px;
    margin: 0 auto;
}
.cek-transaksi-content .frame-transaksi-game-preview .transaksi-game-preview{
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}
.cek-transaksi-content .frame-transaksi-game-preview .transaksi-game-preview img{
    width: 75px;
    height: 75px;
    border-radius: 8px;
}
.cek-transaksi-content .frame-transaksi-game-preview .transaksi-game-preview .tgp-detail{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.cek-transaksi-content .frame-transaksi-game-preview .transaksi-game-preview .tgp-detail small{
    color: #4A4A4A;
    font-family: "Source Sans Pro";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.5px;
}
.cek-transaksi-content .frame-transaksi-game-preview .transaksi-game-preview .tgp-detail b{
    overflow: hidden;
    color: #1B1B1B;
    text-overflow: ellipsis;
    font-family: "Source Sans Pro";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 22.5px;
}
.cek-transaksi-content .frame-transaksi-game-preview .transaksi-game-preview .tgp-detail span{
    color: #1B1B1B;
    font-family: "Source Sans Pro";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.5px;
}
.cek-transaksi-content h6{
    color: #000;
    font-family: "Source Sans Pro";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0px;
}
.cek-transaksi-content-table-wrapper{
    border: 1px solid #D9DFE2;
    border-radius: 4px;
    width: 100%;
}
.cek-transaksi-content table{
    width: 100%;
}
.cek-transaksi-content table thead{
    background: var(--tmv8-primary);
}
.cek-transaksi-content table thead tr th:first-child{
    border-top-left-radius: 4px;
}
.cek-transaksi-content table thead tr th:last-child{
    border-top-right-radius: 4px;
}
.cek-transaksi-content table thead tr th{
    padding: 12px 8px;
    color: #FFF;
    font-family: "Source Sans Pro";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.cek-transaksi-content table tbody tr td{
    padding: 10px 8px;
    color: #6D6C6F;
    font-family: "Source Sans Pro";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.cek-transaksi-content table tbody tr:nth-child(odd) td {
    background-color: #fff;
}
.cek-transaksi-content table tbody tr:nth-child(even) td {
    background-color: #f9f9f9;
}
.cek-transaksi-content table tbody tr td .badge-self{
    display: flex;
    padding: 2px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-family: "Source Sans Pro";
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
    border-radius: 6px;
    width: max-content;
}
/* .badge-self variant colors (as-canceled, as-completed, as-pending)
   sudah tersedia dari theme_global.css — tidak perlu duplikasi di sini */
.cek-transaksi-content .frame-transaksi-game-preview .transaksi-game-detail{
    margin-top: 20px;
}
.cek-transaksi-content .frame-transaksi-game-preview .transaksi-game-detail table tr{
    border: 0px;
    border-bottom: 1px solid #ebf1f5;
}
.cek-transaksi-content .frame-transaksi-game-preview .transaksi-game-detail table tr td{
    background: white;
    color: #4A4A4A;
    font-family: "Source Sans Pro";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.5px;
}
.cek-transaksi-content .frame-transaksi-game-preview .transaksi-game-detail table tr td b{
    color: #1B1B1B;
    text-align: right;
    font-family: "Source Sans Pro";
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 22.5px;
}
.cek-transaksi-content .frame-transaksi-game-preview .transaksi-game-detail table tr td:first-child{
    text-align: left;
    padding-left: 0px;
}
.cek-transaksi-content .frame-transaksi-game-preview .transaksi-game-detail table tr td:last-child{
    text-align: right;
    padding-right: 0px;
}
.cek-transaksi-content .frame-transaksi-game-preview .transaksi-game-detail table tr td .trx-number-info{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
    gap: 6px;
    flex-wrap: wrap;
}
.cek-transaksi-content .frame-transaksi-game-preview .transaksi-game-detail table tr td .frame-flex-end{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-end;
}
.cek-transaksi-content .frame-transaksi-game-preview .transaksi-game-detail table tr td .badge-self{
    justify-content: flex-end;
}
.cek-transaksi-content .frame-transaksi-game-preview .transaksi-game-detail table tr td .trx-number-info a{
    display: flex;
    padding: 5px;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    border: 1px solid #C5CACE;
    background: #FFF;
    font-size: 12px;
    color: #C5CACE;
    transition: all ease .2s;
    text-decoration: none !important;
    width: 24px;
    height: 24px;
}
.cek-transaksi-content .frame-transaksi-game-preview .transaksi-game-detail table tr td .trx-number-info a:hover{
    background: #C5CACE;
    color: black;
}
.cek-transaksi-content .frame-action-button-transaksi-game{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    align-self: stretch;
    margin-top: 20px;
}
.cek-transaksi-content .frame-action-button-transaksi-game a{
    display: flex;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 45px;
    background: var(--tmv8-primary);
    color: #FFF;
    text-align: center;
    font-family: "Source Sans Pro";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-decoration: none;
}
.cek-transaksi-content .transaksi-game-help .help-content{
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    margin-top: 20px;
}
.cek-transaksi-content .transaksi-game-help .help-content img{
    width: 20px;
    height: 22px;
    margin-right: 15px;
}
.cek-transaksi-content .transaksi-game-help .help-content b{
    color: #1c1c1c;
    font-size: 18px;
}
.cek-transaksi-content .transaksi-game-help .help-content p{
    color: #1c1c1c;
    font-size: 14px;
}
.cek-transaksi-content .transaksi-game-help .help-content a{
    color: #0d4e78;
    text-decoration: none;
    font-weight: 600;
}

/* ========================================
   STATIC PAGE CONTENT
   ======================================== */

.content-with-sidebar-static {
    width: 900px;
    background: var(--tmv8-surface);
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 50px;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: flex-start;
    box-shadow: var(--tmv8-shadow);
    border-radius: var(--tmv8-radius);
}

.content-with-sidebar-static .simple-content-static {
    padding: 30px;
    width: 100%;
}

.content-with-sidebar-static .simple-content-static .page-header {
    margin-bottom: 20px;
    border-bottom: 1px solid var(--tmv8-border);
    padding-bottom: 15px;
}

.content-with-sidebar-static .simple-content-static .page-header h1 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--tmv8-text);
    margin: 0;
}

.content-with-sidebar-static .simple-content-static .content {
    width: 100%;
}

.content-with-sidebar-static .simple-content-static .content img {
    max-width: 100%;
}

.content-with-sidebar-static .simple-content-static .content p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--tmv8-text);
    margin-bottom: 15px;
    word-break: break-word;
}

.content-with-sidebar-static .simple-content-static .content p:last-child {
    margin-bottom: 0;
}

.content-with-sidebar-static .simple-content-static .content a {
    color: var(--tmv8-primary);
    text-decoration: none;
}

.content-with-sidebar-static .simple-content-static .content a:hover {
    color: var(--tmv8-primary-hover);
    text-decoration: underline;
}

.content-with-sidebar-static .simple-content-static .content h1 {
    font-size: 2.1rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.content-with-sidebar-static .simple-content-static .content h2 {
    font-size: 1.9rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.content-with-sidebar-static .simple-content-static .content h3 {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.content-with-sidebar-static .simple-content-static .content h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.content-with-sidebar-static .simple-content-static .ql-font-monospace {
    font-family: Monaco, "Courier New", monospace;
}

.content-with-sidebar-static .simple-content-static .ql-font-serif {
    font-family: Georgia, "Times New Roman", serif;
}

.content-with-sidebar-static .simple-content-static p img {
    max-width: 100%;
}

.content-with-sidebar-static .simple-content-static br {
    display: none;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Tablet Styles */
@media (max-width: 1100px) {
    .tmv8-content {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .tmv8-header-left ul {
        gap: 15px;
    }
    
    .tmv8-header-left ul li a {
        font-size: 13px;
    }
    
    .tmv8-header-right .search-area {
        width: 100%;
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
    .tmv8-content {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .tmv8-header-left .logo {
        width: 100px;
        margin-right: auto;
    }
    
    .tmv8-header-left .logo img {
        height: 24px;
    }
    
    .tmv8-header-left ul {
        display: none;
    }
    
    .tmv8-header-right {
        gap: 15px;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }
    
    /* Hide desktop search */
    .tmv8-header-right .parent-frame-search-area {
        display: none;
    }
    
    body:has(.sticky-header) .menu-pop-theme-v8.drawer-open {
        top: 58px !important;
        height: calc(100dvh - 58px) !important;
    }


    /* Show mobile search button - Order 1 (first) */
    .open-search-mobile {
        display: flex !important;
        order: 1;
        font-size: 24px;
        color: #ee8103;
        font-weight: bold;
        cursor: pointer;
        text-decoration: none;
        align-items: center;
        justify-content: center;
    }
    
    .open-search-mobile i {
        display: block;
    }
    
    /* Show drawer menu on mobile - start from top */
    .drawer-menu-v8 {
        display: block;
        top: 0; /* Start from top of viewport */
        height: 100vh; /* Full viewport height */
        max-height: 100vh; /* Ensure it doesn't exceed viewport */
        z-index: 900; /* Below sticky header (2500) and CTA button (999999) */
        box-sizing: border-box;
    }
    
    /* Drawer overlay should also start below headers */
    .drawer-menu-v8-overlay {
        top: 118px;
        height: calc(100vh - 118px);
        z-index: 899; /* Just below drawer menu */
    }
    
    /* Desktop dropdown menu — disembunyikan di mobile, drawer digunakan sebagai gantinya */
    .frame-menu-burgerbar {
        display: none !important;
    }
    
    /* IMPORTANT: Completely hide desktop dropdown on mobile */
    .frame-menu-burgerbar .burgerbar-menu-frame-outer {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    .frame-menu-burgerbar .burgerbar-menu-frame {
        display: none !important;
    }
    
    .frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner {
        display: none !important;
    }
    
    /* Hide overlay for old dropdown menu on mobile */
    .overlay-frame-info-profile {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Ensure profile drawer doesn't interfere */
    .frame-info-profile {
        display: none !important;
    }
    
    #nav-icon4 {
        margin-top: 0;
    }
    
    #nav-icon4.after-login {
        margin-top: 0;
    }
    
    /* Profile area - Order 3 (last) */
    .area-profile-drawwer {
        order: 3;
        display: flex;
    }
    
    /* Mobile Search Close Button - hidden by default, shown when search is active */
    .close-mobile {
        display: none;
    }

    .close-mobile a {
        display: block;
        color: #ee8103;
        font-size: 24px;
        text-decoration: none;
        cursor: pointer;
    }

    .close-mobile a:hover {
        color: #c55f00;
    }
    
    .tmv8-header-right .search-area.mobile-active {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 3001;
        background: white;
        padding: 15px 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        border: none;
        border-radius: 0;
    }
    
    .tmv8-header-right .search-area.mobile-active .input-icon-group {
        display: flex;
        align-items: center;
        width: 100%;
    }
    
    .tmv8-header-right .search-area.mobile-active .input-icon-group input {
        width: 100%;
        font-size: 16px;
        padding: 10px;
    }
    
    .tmv8-header-right .parent-frame-search-area.mobile-active {
        display: flex !important;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 3001;
        background: white;
        align-items: center;
    }
    
    .tmv8-header-right .parent-frame-search-area.mobile-active .frame-search-area {
        display: flex;
        align-items: center;
        padding: 0 20px;
        gap: 15px;
        width: 100%;
        height: 100%;
    }
    
    .tmv8-header-right .parent-frame-search-area.mobile-active .search-area {
        flex: 1;
        width: auto;
        border: 1px solid #e5e5e5;
        margin: 0;
        padding: 10px 20px;
        display: flex;
        align-items: center;
        border-radius: 5em;
    }
    
    /* Target the specific form ID that causes gap */
    .tmv8-header-right .parent-frame-search-area.mobile-active .search-area #search-form {
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        display: flex;
        align-items: center;
    }
    
    .tmv8-header-right .parent-frame-search-area.mobile-active .search-area .input-icon-group {
        display: flex;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .tmv8-header-right .parent-frame-search-area.mobile-active .search-area .input-icon-group i {
        font-size: 18px;
        margin-right: 10px;
        color: #ababab;
    }
    
    .tmv8-header-right .parent-frame-search-area.mobile-active .search-area .input-icon-group input {
        width: 100%;
        font-size: 16px;
        padding: 0;
        margin: 0;
        border: none;
        outline: none;
        line-height: 24px;
        background: transparent;
        vertical-align: middle;
    }
    
    .tmv8-header-right .parent-frame-search-area.mobile-active .search-area .input-icon-group input::placeholder {
        line-height: 24px;
        vertical-align: middle;
    }
    
    .tmv8-header-right .parent-frame-search-area.mobile-active .close-mobile {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    .tmv8-header-right .parent-frame-search-area.mobile-active .close-mobile a {
        color: #ee8103;
        font-size: 28px;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
    }
    
    .result-quick-search {
        left: 10px;
        right: 10px;
    }
    
    .open-profile-after-login {
        width: fit-content;
        margin: 0;
        padding: 6px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }
    
    .open-profile-after-login .no-photo {
        width: 27px;
        height: 27px;
    }
    
    #nav-icon4.after-login {
        margin-top: 0;
    }
}

/* Small Mobile Styles */
@media (max-width: 480px) {
    .tmv8-header {
        position: sticky !important;
        top: 0 !important;
        left: 0;
        right: 0;
        z-index: 2400 !important;
    }

    body:has(.sticky-header) .tmv8-header {
        top: 58px !important;
    }

    .tmv8-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .detil-game {
        flex-direction: column !important;
    }

    .detil-game .input-params {
        width: 100% !important;
    }
    
    .tmv8-header-left .logo {
        width: 90px;
        margin-right: auto;
    }
    
    .tmv8-header-left .logo img {
        height: 22px;
    }
    
    .mobile-drawer {
        width: 90%;
    }
    
    .open-search-mobile {
        font-size: 22px;
        margin-right: 0;
    }
    
    .tmv8-header-right {
        gap: 12px;
    }
}

/* Disable hover effect on mobile - but not click */
@media (hover: none) and (pointer: coarse) {
    .frame-menu-burgerbar:hover .burgerbar-menu-frame-outer:not(.show) {
        display: none !important;
    }
}

/* ========================================
   MOBILE SPECIFIC STYLES FROM front-mobile.css
   ======================================== */

@media (max-width: 480px){
    html {
        max-width: 100%;
        overflow-x: clip; /* clip tidak membuat scroll container baru, jadi position:sticky tetap bekerja */
    }
    body {
        max-width: 100%;
        /* overflow-x: hidden dihapus dari body — menyebabkan position:sticky header tidak bekerja di mobile */
    }

    .parent-frame-search-area{
        display: none;
        position: fixed;
        z-index: 2000;
        background: white;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
    }
    
    .frame-search-area{
        position: relative;
        z-index: 2001;
        background: white;
        height: 60px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .header-uniplay .header-content .search-area{
        border: 1px solid #a3a3a3;
        width: calc(100% - 60px);
        flex: 1;
    }
    
    .frame-search-area .close-mobile{
        display: block;
        margin-left: 10px;
        flex-shrink: 0;
    }
    
    .frame-search-area .close-mobile a{
        color: #ec7f00;
        font-size: 24px;
    }
    
    .result-quick-search{
        left: 10px;
        right: 10px;
    }

    .content-inner{
        width: 100% !important;
        padding: 15px !important;
    }

    .content-inner.nopadding {
        padding: 0 !important;
    }

    .list-grid-games .grid-list{
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        align-items: stretch !important;
        align-content: baseline !important;
        gap: 15px !important;
        padding-top: 0 !important;
    }
    
    .list-grid-games .header strong{
        color: #313131;
        font-size: 21px;
        margin-bottom: 5px !important;
        display: block;
    }
    
    .list-grid-games .grid-list a{
        display: grid !important;
        grid-template-rows: 1fr auto !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 0 15px 0 !important;
    }
    
    .list-grid-games .grid-list a img{
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 8px;
    }
    
    .list-grid-games .grid-list a p{
        margin-top: 10px !important;
        margin-bottom: 0 !important;
        display: block !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        font-size: 13px !important;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    @media only screen and (min-width: 300px) and (max-width: 400px) {
        .list-grid-games .grid-list a {
            width: 100% !important;
        }

        .list-grid-games .grid-list a p {
            font-size: 11px !important;
            margin-top: 6px !important;
            padding-left: 2px !important;
            padding-right: 2px !important;
        }
    }

    .sub-footer .content{
        width: 100% !important;
    }
    
    .sub-footer .content .title{
        font-size: 18px;
        text-align: center;
    }
    
    .sub-footer .content .subtitle{
        font-size: 14px;
        text-align: center;
    }
    
    .sub-footer .content .uniplay-featured {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .sub-footer .content .uniplay-featured .child-featured {
        align-items: center;
        width: 100%;
        margin-bottom: 0;
    }

    .sub-footer .content .uniplay-featured .child-featured .icon {
        justify-content: center;
    }

    .sub-footer .content .uniplay-featured .child-featured > p {
        text-align: center;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.85);
    }

    .footer .content{
        width: 100% !important;
    }
    
    .footer .content .partner-uniplay{
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        align-items: center !important;
        align-content: baseline !important;
    }
    
    .footer .content .partner-uniplay img{
        margin-right: 15px !important;
        height: 23px !important;
        margin-bottom: 15px !important;
    }

    .detil-game{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: stretch;
        justify-content: flex-start;
        align-items: stretch;
        cursor: default;
    }
    
    .detil-game .info-game{
        width: 100%;
        padding-right: 0px;
        margin-bottom: 17px;
        margin-top: 5px;
    }
    
    .detil-game .info-game .info-header .right h1 {
        font-size: 19px !important;
    }
    
    .detil-game .input-params{
        width: 100%;
        padding-top: 0px;
    }
    
    .detil-game .input-params .card {
        padding: 10px 15px !important;
        margin-bottom: 30px !important;
    }
    
    .detil-game .input-params .card.last{
        margin-bottom: 0px;
    }
    
    .detil-game .input-params .card .heading h2.title-ic{
        font-size: 16px;
    }
    
    .detil-game .input-params .card .input-area .first-input{
        width: 100%;
    }
    
    /* Denom list — 1 column, horizontal row layout on mobile */
    .detil-game .input-params .card .list-denom,
    .list-denom {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .detil-game .input-params .card .list-denom li,
    .list-denom li {
        max-height: 120px;
        flex-direction: column;
        justify-content: space-between;
        padding: 10px 14px;
        font-size: 14px;
    }
    .list-denom li b {
        flex: 1;
        font-size: 14px;
        margin-right: 12px;
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }
    .list-denom li .pricing-icon {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        flex-shrink: 0;
    }
    .list-denom li .pricing-icon i { font-size: 16px; }
    .list-denom li .pricing-icon .pricing-detil { align-items: flex-end; }

    /* Subtitle + question-mark icon — single inline row */
    .subtitle-help-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-top: 20px;
    }
    .subtitle-help-row .subtitle { margin: 0; flex: 1; }
    .subtitle-help-row .area-help {
        flex-shrink: 0;
        position: relative;
        width: auto;
        margin: 0;
    }
    /* Strip all button styles — show only the icon */
    .subtitle-help-row .howto-get-useridbutton {
        display: flex !important;
        align-items: center;
        background: none !important;
        color: var(--tmv8-primary, #e6710f) !important;
        font-size: 22px;
        text-decoration: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        width: auto !important;
        font-weight: normal !important;
    }
    .subtitle-help-row .howto-get-useridbutton:hover {
        background: none !important;
        color: var(--tmv8-primary-hover, #db5f0f) !important;
    }
    /* Popover anchors to the icon — appears below it */
    .subtitle-help-row .popover-custom {
        top: 30px;
        left: auto;
        right: 0;
        width: 220px;
    }

    .detil-game .input-params .card .area-list-payment-method .child-box .header .left img{
        height: 20px;
        margin-right: 12px;
    }
    
    .detil-game .input-params .card .area-list-payment-method .child-box .header .left b{
        font-size: 13px;
        flex: none;
        max-width: initial;
    }
    
    .detil-game .input-params .card .area-list-payment-method .child-box .header .right.price-range b{
        font-size: 14px;
    }
    
    .detil-game .input-params .card .area-list-payment-method .child-box .short-payment-support-info img{
        height: 13px;
        margin-right: 7px;
    }
    
    .detil-game .input-params .card .area-list-payment-method .child-box .short-payment-support-info .open-button-action-payment{
        font-size: 10px;
    }
    
    .detil-game .input-params .card .area-list-payment-method .child-box .button-action-payment {
        padding: 10px !important;
    }
    
    .detil-game .input-params .card .area-list-payment-method .child-box .button-action-payment ul {
        grid-template-columns: repeat(1, 1fr);
    }
    
    .detil-game .input-params .card .area-list-payment-method .child-box .button-action-payment ul li:nth-child(odd) {
        margin-right: 0 !important;
    }
    
    .detil-game .input-params .card .area-list-payment-method .child-box .button-action-payment ul li:nth-child(even) {
        margin-left: 0 !important;
    }

    .entitas-description{
        border-top: 1px solid #d7e3eb;
        color: #1c1c1c;
        border-bottom: 1px solid #d7e3eb;
        margin-bottom: 15px;
        cursor: default;
        margin-top: 15px;
        padding: 15px 5px;
        width: 100%;
    }

    .mlseparator{
        position: relative;
    }
    
    .mlseparator input{
        width: 100%;
    }
    
    .mlseparator:before,
    .mlseparator:after {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 700;
        font-size: 20px;
        color: #ffa200;
        z-index: 99;
    }

    .mlseparator:before {
        content: "(";
        left: 10px;
    }

    .mlseparator:after {
        content: ")";
        right: 15px;
    }
    
    .frame-input-inner:first-child{
        -webkit-box-flex: 1;
        flex-grow: 1;
        width: 60%;
    }
    
    .second-area{
        width: 40%;
        margin-left: 10px;
        position: relative;
    }

    .area-help{
        display: block;
        width: fit-content;
        margin: 0 auto;
    }
    
    .howto-get-useridbutton{
        color: white;
        text-decoration: none;
        padding: 5px;
        display: block;
        margin: 0 auto;
        text-align: center;
        margin-top: 15px;
        margin-bottom: 5px;
        border-radius: 0.3em;
        padding-left: 15px;
        padding-right: 15px;
        font-weight: 600;
        font-size: 13px;
    }
    
    .howto-get-useridbutton:hover{
        background: #ca6c00;
        color: white;
        text-decoration: none;
    }
    
    .popover-custom{
        width: fit-content;
        top: 68px;
        left: -77px;
    }
    
    .popover-custom:before{
        border-color: rgba(194, 225, 245, 0);
        border-bottom-color: #ccc;
        border-width: 13px;
        margin-left: -13px;
    }
    
    .popover-custom:after{
        border-color: rgba(136, 183, 213, 0);
        border-bottom-color: #ffffff;
        border-width: 11px;
        margin-left: -11px;
    }

    .other-entitas .title-other-entitas img {
        filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
    }

    /* Flash Sale Mobile Styles */
    .frame-flashsale {
        padding: 15px 10px !important;
    }
    
    .group-title-fs {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }
    
    .group-title-fs .header {
    }

    .group-title-fs .style-4 {
        flex: 0 1;
        width: 100%;

    }
    
    .flashsale-slider-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .flash-sale-wrapper {
        display: flex;
        gap: 15px;
        padding: 10px 0;
    }
    
    .card-flash-sale {
        min-width: 150px;
        flex-shrink: 0;
    }

    /* Slider Mobile Styles */
    .frame-slider-mobile-area {
        width: 100%;
        padding: 0 10px;
    }
    
    .home-splide-dummy {
        margin-bottom: 20px;
    }
    
    .splide__slide {
        border-radius: 12px !important;
    }

    /* Waiting Payment Mobile */
    .waiting-payment {
        width: 90%;
        margin: 0 auto;
        background: white;
        border-radius: 0.3em;
        padding: 15px;
        margin-top: 35px;
        margin-bottom: 35px;
    }
    
    .waiting-payment .detil-info{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: space-between;
        align-items: center;
        margin-top: 25px;
    }
    
    .waiting-payment .detil-info .left{
        width: 100%;
        border: 1px solid #ebf1f5;
        border-radius: 0.5em;
    }
    
    .waiting-payment .detil-info .left .provider-image-list {
        padding: 15px;
        background: white;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .waiting-payment .detil-info .left .provider-image-list img {
        height: 24px;
        margin-right: 20px;
        display: block;
        float: left;
    }
    
    .waiting-payment .detil-info .right{
        width: 100%;
        margin-top: 20px;
    }
    
    .waiting-payment .detil-info .right table tr td{
        width: 50%;
    }
    
    .waiting-payment .detil-info .right table tr .left{
        font-size: 13px;
    }
    
    .waiting-payment .detil-info .right table tr .right{
        font-size: 13px;
    }
    
    .waiting-payment .hurry-up-area p{
        text-align: center;
    }
    
    .waiting-payment .hurry-up-area .price-large{
        font-size: 35px;
    }
    
    .waiting-payment .hurry-up-area .price-large span.floating-bottom {
        position: absolute;
        font-size: 11px;
        background: #ef8912;
        color: white;
        font-weight: 400;
        padding: 5px 0;
        border-radius: 0.5em;
        padding-left: 15px;
        padding-right: 15px;
        left: -53px;
        text-align: center;
        margin-top: 57px;
        width: 270px;
    }
    
    .waiting-payment .hurry-up-area .price-large span.floating-bottom:before {
        right: 74px;
    }
    
    .waiting-payment .hurry-up-area .finishstep{
        font-size: 20px;
        text-align: center;
    }

    /* Stepper Mobile */
    .stepper-wrapper{
        margin-top: auto;
        display: flex;
        margin-bottom: 20px;
        width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        margin-left: 0;
        width: 100%;
        margin-bottom: 50px;
        margin-top: 20px;
    }

    /* Content with Sidebar Mobile */
    .content-with-sidebar{
        width: 90%;
        background: white;
        margin: 0 auto;
        margin-top: 40px;
        margin-bottom: 20px;
        padding: 0px;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        box-shadow: 0px 3px 15px #63809e1f;
        border-radius: 0.5rem;
    }
    
    .content-with-sidebar .sidebar{
        width: 100%;
        margin-right: 0;
    }
    
    .content-with-sidebar .content{
        padding-top: 0px;
        flex: auto;
        padding-right: 0;
        padding-bottom: 30px;
        padding-left: 3px;
        width: 100%;
    }
    
    .content-with-sidebar .content .channel-grid{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        align-content: baseline;
    }

    .content-with-sidebar-static{
        width: 95%;
        margin-top: 20px;
        margin-bottom: 30px;
    }

    /* Error Page Mobile */
    #errorpage {
        position: relative;
        height: 360px;
    }
    
    .errorpage .errorpage-code{
        position: relative;
        width: 130px;
        height: 130px;
        margin: 0 auto 50px;
    }
    
    .errorpage .errorpage-code h1{
        color: #000;
        font-weight: 700;
        margin: 0;
        font-size: 60px;
        position: absolute;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        left: 50%;
        text-align: center;
        height: 40px;
        line-height: 40px;
    }
    
    .errorpage h2{
        font-size: 22px;
        font-weight: 700;
        text-transform: uppercase;
    }
    
    .footer-no-content{
        width: 90%;
        margin: 0 auto;
        display: block;
        margin-bottom: 50px;
        margin-top: 20px;
    }
    
    .footer-no-content ul{
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    
    .footer-no-content ul li a{
        text-decoration: none;
        color: #565656;
        font-size: 13px;
    }

    /* Finish Content Info Mobile */
    .finish-content-info{
        width: 100%;
        margin: 0 auto;
    }
    
    .finish-content-info .heading{
        margin-bottom: 20px;
    }
    
    .finish-content-info table tr td.left {
        text-align: left;
        color: #4a4a4a;
        font-size: 13px;
        font-weight: 600;
    }
    
    .finish-content-info table tr td.right {
        text-align: right;
        color: #1b1b1b;
        font-size: 13px;
        font-weight: bold;
    }

    i.tidak-tersedia {
        color: #676262;
        font-weight: 600;
        font-size: 9px;
        vertical-align: text-top;
    }

    /* Cek Transaksi Mobile */
    .cek-transaksi-frame{
        margin-top: 10px;
        margin-bottom: 10px;
        gap: 10px;
    }
    
    .cek-transaksi-header{
        width: 96%;
        background: white;
        padding: 24px;
    }
    
    .cek-transaksi-header h1{
        color: #000;
        font-family: "Source Sans Pro";
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }
    
    .cek-transaksi-header form{
        width: 100%;
    }
    
    .cek-transaksi-header .frame-frame-search-trx{
        display: flex;
        align-items: stretch;
        gap: 10px;
        flex-direction: column;
    }
    
    .cek-transaksi-header .frame-frame-search-trx .ffst-search input{
        width: 100%;
    }
    
    .cek-transaksi-header .frame-footer-search-trx p{
        font-size: 14px;
    }
    
    .cek-transaksi-content{
        width: 96%;
        background: white;
        padding: 24px;
    }
    
    .cek-transaksi-content .stepper-wrapper{
        width: 90%;
    }
    
    .cek-transaksi-content .frame-transaksi-game-preview{
        width: 100%;
    }
    
    .cek-transaksi-content .frame-transaksi-game-preview .transaksi-game-preview .tgp-detail b{
        overflow: hidden;
        color: #1B1B1B;
        text-overflow: ellipsis;
        font-family: "Source Sans Pro";
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 22.5px;
    }
    
    .cek-transaksi-content .frame-transaksi-game-preview .transaksi-game-preview .tgp-detail span{
        color: #1B1B1B;
        font-family: "Source Sans Pro";
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: 22.5px;
    }
    
    .cek-transaksi-content .simulate-info-header h5{
        color: #000;
        font-family: "Source Sans Pro";
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }
    
    .cek-transaksi-content-table-wrapper{
        overflow: auto;
    }
    
    .cek-transaksi-content table{
        width: 800px;
    }

    /* Header Content Mobile */
    .header-content{
        width: 100% !important;
    }
    
    .header-uniplay .header-content{
        width: 100% !important;
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .header-uniplay .header-content .logo img{
        width: 120px;
        margin-right: 0px;
    }
    
    .header-uniplay .header-content .menu-right .menu-burgerbar{
        font-size: 20px;
        position: relative;
        z-index: 1001;
        cursor: pointer;
        pointer-events: auto;
    }
    
    .header-uniplay .header-content .menu-right .menu-burgerbar span{
        pointer-events: none;
    }
    
    .header-uniplay .header-content .menu-right .open-search-mobile{
        font-size: 20px;
        display: block;
    }

    /* Overlay Mobile Menu */
    .overlay-mobile-menu{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1999;
    }
    
    .overlay-mobile-menu.active{
        display: block;
    }
}

.slider-card {
      position: relative;
      color: #000;
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
      line-height: 1.5;
      box-shadow: 0 3px 5px rgb(39 112 175 / 13%);
      -webkit-transition: border-color 0.15s cubic-bezier(0.54, 0.01, 0.1, 1), background-color 0.15s cubic-bezier(0.54, 0.01, 0.1, 1);
      transition: border-color 0.15s cubic-bezier(0.54, 0.01, 0.1, 1), background-color 0.15s cubic-bezier(0.54, 0.01, 0.1, 1);
      margin-bottom: 25px;
  }
  .slider-card a {
      display: block;
  }
  .slider-card .slider-image-ratio-container {
    width: 100%;
    padding-top: 130px;
    position: relative;
  }
  .slider-card .slider-image-ratio-container img {
      width: 100%;
      height: auto;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
  }
  .slider-card .slider-text {
      padding: 10px 15px;
  }
  .slider-card .slider-text .slider-sub {
      color: #f29831;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
  }
  .slider-card .slider-text .slider-sub .dot {
      margin: 0 4px;
      display: inline-block;
  }
  .slider-card .slider-text .slider-bottom {
      display: -webkit-box;
      display: flex;
      -webkit-box-align: start;
      align-items: flex-start;
      min-height: 55px;
  }
  .slider-card .slider-text .slider-bottom .slider-title {
      font-size: 16px;
      font-weight: 600;
      -webkit-box-flex: 1;
      flex-grow: 1;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  .slider-card .slider-text .slider-bottom .slider-share {
      color: #ff962d;
      margin-left: 5px;
      align-self: flex-end;
  }
  @media (min-width: 768px) {
      .slider-card .slider-text .slider-bottom .slider-share {
          font-size: 22px;
      }
  }

/* Content Inner */
.content-inner {
    margin: 0 auto;
    width: 1100px;
    padding: 15px;
    box-sizing: border-box;
}

.content-inner.nopadding {
    padding: 0px;
}

/* Slider Desktop */
#slide_show {
    position: relative;
}

#slide_show .show {
    position: relative;
    margin: 0 auto;
    list-style: none;
    width: 860px;
    height: 310px;
    max-width: calc(100vw - 4em);
    max-height: calc((100vw - 4em)/2.777777);
}

#slide_show .show li {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    transition: .3s;
    transform: scale(.5);
    opacity: .7;
}

#slide_show .show li:first-of-type {
    z-index: 3;
}

#slide_show .show li.on {
    z-index: 3;
    transform: none;
    opacity: 1;
}

#slide_show .show li.on_m {
    z-index: 2;
    transform: translateX(-7.5%) scale(.75);
    transform-origin: left center;
}

#slide_show .show li.on_p {
    z-index: 2;
    transform: translateX(7.5%) scale(.75);
    transform-origin: right center;
}

#slide_show .show a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 1em;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(black, #000);
}

#slide_show .show img {
    vertical-align: top;
    width: 100%;
    height: 100%;
}

#slide_show .show li.on img {
    transform: scale(1.05);
    transition: linear 5s;
}

#slide_show .control {
    display: flex;
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 3;
    margin: 0 -3em -1em;
    border-radius: 1.5em;
    overflow: hidden;
    background: var(--SiteTHM, var(--tmv8-primary));
    color: #fff;
}

#slide_show .control .btw {
    flex: none;
    background: 0 0;
    color: #ccc;
    border-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

#slide_show_wrp {
    margin: 2em 0 4em;
    margin-bottom: 30px;
}

/* Slider — fixed height 150px on mobile */
@media (max-width: 768px) {
    #slide_show .show {
        height: 150px;
        max-height: 150px;
    }
}

.btw {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    border: transparent 1px solid;
    border-radius: 1.5em;
    transition: all ease 0.2s;
}

.btw > span {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 2em;
    padding: .5em 1em;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    color: white;
}

.btw:focus, .btw:focus-within, .btw:hover {
    text-decoration: none;
    outline: 0;
    background: var(--tmv8-primary-hover) !important;
}

.btw:active {
    transform: scale(.95);
    opacity: .75;
}

/* List Grid Games Desktop */
.list-grid-games .header strong {
    color: #313131;
    font-size: 24px;
    margin-bottom: 25px;
    display: block;
}

.list-grid-games .grid-list {
    gap: 32px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    align-content: baseline;
}

.list-grid-games .grid-list a {
    display: block;
    width: auto;
    text-align: center;
    padding-bottom: 12px;
    margin-bottom: 15px;
    font-size: 14px;
    color: var(--tmv8-pbox-text);
    text-decoration: none;
    background: var(--tmv8-pbox-bg);
    transition: background var(--tmv8-transition);
    border-radius: 15px;
}

.list-grid-games .grid-list a:hover {
    background: var(--tmv8-accent);
}

.list-grid-games .grid-list a img {
    width: 100%;
    border-radius: 1em;
}

.list-grid-games .grid-list a p {
    margin-top: 10px;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 1;
}

/* Flash Sale Desktop */
.flash-sale-wrapper {
    display: flex;
    width: 100%;
    max-width: 1100px;
    align-items: flex-start;
    gap: 20px;
    margin: 0 auto;
    margin-bottom: 5px;
    position: relative;
    padding: 6px 8px 8px 8px;
    overflow-x: hidden;
}

.card-flash-sale {
    display: flex;
    width: 270px;
    padding: 12px;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    border: 2px solid #575757;
    text-decoration: none;
    transition: all .1s;
    position: relative;
    cursor: pointer;
}

.card-flash-sale:hover {
    border-color: var(--tmv8-primary);
    box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.20);
    transform: scale(1.02);
}

.card-flash-sale img {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    border: 1px solid #575757;
}

.card-flash-sale:hover img {
    border: 1px solid #cfcfcf;
}

.card-flash-sale .label-group-fs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1 0 0;
    overflow: hidden;
}

.card-flash-sale .label-group-fs h6 {
    color: #fff !important;
    text-align: left;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    margin: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-self: stretch;
}

.card-flash-sale .label-group-fs b {
    overflow: hidden;
    color: #FFF !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-right: 10px;
    width: 125px;
}

.bestseller:after {
    content: var(--diskon-label, "Diskon");
    z-index: 1;
    overflow: hidden;
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    transform: rotate(45deg);
    width: 120px;
    display: block;
    background: linear-gradient(#d90000 0%, #ff5f33 100%);
    box-shadow: 0 0px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 19px;
    right: -30px;
    clip-path: polygon(120px 26px, 90px -4px, 40px -12px, 8px 20px, 10px 30px, 120px 30px);
    z-index: 2;
}

.group-title-fs {
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
}

.slider-arrow {
    z-index: 10;
    background: transparent;
    color: var(--tmv8-primary);
    font-size: 22px;
    padding: 10px;
    cursor: pointer;
    border-radius: 999px;
    user-select: none;
    width: 52px;
    text-align: center;
    display: block;
}

.slider-arrow:hover {
    background: rgba(0, 0, 0, 0.1);
}

.slider-wrapper-fs {
    display: flex;
    justify-content: space-between;
    width: 1150px;
    position: absolute;
    margin-left: -40px;
    margin-top: 25px;
}

.flashsale-slider-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.flashsale-slider-wrapper:hover .slider-wrapper-fs {
    display: block;
}

.flashsale-slider-wrapper::after {
    background: linear-gradient(90deg, #F2F5F700 0%, #F2F5F7 100%);
    content: "";
    position: absolute;
    z-index: 7;
    width: 30px;
    height: 120px;
    right: 0;
    top: 0;
}

.flashsale-slider-wrapper::before {
    bottom: 0;
    left: 0;
    background: linear-gradient(270deg, #F2F5F700 0%, #F2F5F7 100%);
    content: "";
    position: absolute;
    z-index: 7;
    width: 30px;
    height: 120px;
}

/* Box Image Header (single slider) */
.box-image-header {
    width: 100%;
    padding: 20px 0px;
    max-width: 1100px;
    display: block;
    margin: 0 auto;
}

@media (max-width: 440px) {
    .box-image-header {
        padding: 4%;
    }
}

/* ========================================
   TABLET STYLES FROM front_tablet.css
   (for box_index_uniplay_theme_v8.php classes)
   ======================================== */

/* Tablet Small (481px - 600px) */
@media screen and (max-width: 600px) and (min-width: 481px) {
    .content-inner {
        width: 100% !important;
        padding: 15px !important;
    }

    .content-inner.nopadding {
        padding: 0px !important;
    }

    .list-grid-games .grid-list {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        align-items: center !important;
        align-content: baseline !important;
    }

    .list-grid-games .grid-list a p {
        margin-top: 10px !important;
        margin-bottom: 0 !important;
        display: block !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        font-size: 13px !important;
        min-height: 40px !important;
    }

    .list-grid-games .header strong {
        color: #313131;
        font-size: 21px;
        margin-bottom: 5px !important;
        display: block;
    }

    .list-grid-games .grid-list a {
        width: 90%;
        margin: 0 auto;
        margin-bottom: 15px !important;
    }

    .frame-slider-mobile-area {
        height: 335px;
        padding-top: 15px;
        position: relative;
    }

    .home-splide-dummy {
        top: 59px;
        left: 0;
        right: 0;
        z-index: 500;
    }

    .home-splide-dummy .content-home-splide-dummy {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
        overflow: hidden;
        position: absolute;
        width: 100%;
    }

    .home-splide-dummy .pagination-dummy-center {
        position: absolute;
        z-index: 1;
        bottom: 13px;
        left: 50%;
        transform: translateX(-50%);
        padding: 0;
        display: inline-flex;
        align-items: center;
        width: 95%;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0;
    }

    .home-splide-dummy .pagination-dummy-center li {
        list-style-type: none;
        display: inline-block;
        line-height: 1;
        margin: 0 6px;
        height: 10px;
        width: 10px;
        background: #d1d7dc;
        border-radius: 50%;
    }

    .home-splide-dummy .home-splide-before-show {
        box-shadow: 0 3px 8px rgb(0 0 0 / 25%);
        margin-left: 20px !important;
        margin-top: 0px;
        border-radius: 0.5em !important;
        padding: 0px !important;
        width: 86%;
        border: none !important;
        flex: none;
        height: 230px;
    }

    .home-splide-dummy .home-splide-before-show .ph-col-12 {
        padding: 0px;
    }

    .slider-card .slider-image-ratio-container {
        padding-top: 188px;
    }

    #slide_show_wrp {
        margin: 0em 0 0em;
        margin-bottom: 30px;
    }

    #slide_show {
        padding: 20px;
    }

    #slide_show .show a {
        border-radius: 0;
    }
}

/* Tablet Medium (601px - 800px) */
@media screen and (max-width: 800px) and (min-width: 601px) {
    .content-inner {
        width: 100% !important;
        padding: 15px !important;
    }

    .content-inner.nopadding {
        padding: 0px !important;
    }

    .list-grid-games .grid-list {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        align-items: center !important;
        align-content: baseline !important;
        gap: 16px !important;
    }

    .list-grid-games .grid-list a p {
        margin-top: 10px !important;
        margin-bottom: 0 !important;
        display: block !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        font-size: 13px !important;
        min-height: 40px !important;
    }

    .list-grid-games .header strong {
        color: #313131;
        font-size: 21px;
        margin-bottom: 12px;
        display: block;
        margin-left: 9px;
    }

    .list-grid-games .grid-list a {
        width: 90%;
        margin: 0 auto;
        margin-bottom: 15px !important;
    }

    .frame-slider-mobile-area {
        height: 335px;
        padding-top: 15px;
        position: relative;
    }

    .home-splide-dummy {
        top: 59px;
        left: 0;
        right: 0;
        z-index: 500;
    }

    .home-splide-dummy .content-home-splide-dummy {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
        overflow: hidden;
        position: absolute;
        width: 100%;
    }

    .home-splide-dummy .pagination-dummy-center {
        position: absolute;
        z-index: 1;
        bottom: 13px;
        left: 50%;
        transform: translateX(-50%);
        padding: 0;
        display: inline-flex;
        align-items: center;
        width: 95%;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0;
    }

    .home-splide-dummy .pagination-dummy-center li {
        list-style-type: none;
        display: inline-block;
        line-height: 1;
        margin: 0 6px;
        height: 10px;
        width: 10px;
        background: #d1d7dc;
        border-radius: 50%;
    }

    .home-splide-dummy .home-splide-before-show {
        box-shadow: 0 3px 8px rgb(0 0 0 / 25%);
        margin-left: 20px !important;
        margin-top: 0px;
        border-radius: 0.5em !important;
        padding: 0px !important;
        width: 86%;
        border: none !important;
        flex: none;
        height: 274px;
    }

    .home-splide-dummy .home-splide-before-show .ph-col-12 {
        padding: 0px;
    }

    .slider-card .slider-image-ratio-container {
        padding-top: 213px;
    }

    .slider-wrapper-fs {
        display: none;
    }

    #slide_show_wrp {
        margin: 0em 0 0em;
        margin-bottom: 30px;
    }

    #slide_show {
        padding: 20px;
    }

    #slide_show .show a {
        border-radius: 0;
    }
}

/* Tablet Large (801px - 1000px) */
@media screen and (max-width: 1000px) and (min-width: 801px) {
    .content-inner {
        width: 100% !important;
        padding: 15px !important;
    }

    .content-inner.nopadding {
        padding: 0px !important;
    }

    .list-grid-games .grid-list {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        align-items: center !important;
        align-content: baseline !important;
    }

    .list-grid-games .grid-list a p {
        margin-top: 10px !important;
        margin-bottom: 0 !important;
        display: block !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        font-size: 13px !important;
        min-height: 40px !important;
    }

    .list-grid-games .header strong {
        color: #313131;
        font-size: 21px;
        margin-bottom: 12px;
        display: block;
        margin-left: 9px;
    }

    .list-grid-games .grid-list a {
        width: 90%;
        margin: 0 auto;
        margin-bottom: 15px !important;
    }

    .frame-slider-mobile-area {
        height: 420px;
        padding-top: 15px;
        position: relative;
    }

    .home-splide-dummy {
        top: 59px;
        left: 0;
        right: 0;
        z-index: 500;
    }

    .home-splide-dummy .content-home-splide-dummy {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
        overflow: hidden;
        position: absolute;
        width: 100%;
    }

    .home-splide-dummy .pagination-dummy-center {
        position: absolute;
        z-index: 1;
        bottom: 13px;
        left: 50%;
        transform: translateX(-50%);
        padding: 0;
        display: inline-flex;
        align-items: center;
        width: 95%;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0;
    }

    .home-splide-dummy .pagination-dummy-center li {
        list-style-type: none;
        display: inline-block;
        line-height: 1;
        margin: 0 6px;
        height: 10px;
        width: 10px;
        background: #d1d7dc;
        border-radius: 50%;
    }

    .home-splide-dummy .home-splide-before-show {
        box-shadow: 0 3px 8px rgb(0 0 0 / 25%);
        margin-left: 20px !important;
        margin-top: 0px;
        border-radius: 0.5em !important;
        padding: 0px !important;
        width: 86%;
        border: none !important;
        flex: none;
        height: 348px;
    }

    .home-splide-dummy .home-splide-before-show .ph-col-12 {
        padding: 0px;
    }

    .slider-card .slider-image-ratio-container {
        padding-top: 267px;
    }

    .slider-wrapper-fs {
        display: none;
    }

    #slide_show_wrp {
        margin: 0em 0 0em;
        margin-bottom: 30px;
    }

    #slide_show {
        padding: 20px;
    }

    #slide_show .show a {
        border-radius: 0;
    }
}

/* ============================================================
   DETIL PAGE — TABLET & IPAD RESPONSIVE (481px - 1200px)
   Source: front_tablet.css + front_ipad.css
   ============================================================ */
@media screen and (max-width: 1200px) and (min-width: 481px) {
    .detil-game {
        display: flex;
        flex-direction: column;
        align-content: stretch;
        justify-content: flex-start;
        align-items: stretch;
        cursor: default;
    }
    .detil-game .info-game {
        width: 100% !important;
        padding-right: 0;
        margin-bottom: 17px;
        margin-top: 5px;
    }
    .detil-game .info-game .info-header { margin-bottom: 10px; }
    .detil-game .info-game .info-header .right h1 { font-size: 19px !important; }
    .detil-game .input-params { width: 100%; padding-top: 0; }
    .detil-game .input-params .card { padding: 10px !important; margin-bottom: 30px !important; }
    .detil-game .input-params .card.last { margin-bottom: 0 !important; }
    .detil-game .input-params .card .heading h2.title-ic { font-size: 18px; }
    .detil-game .input-params .card .subtitle { text-align: center; }
    .detil-game .input-params .card .input-area {
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
        width: 60%;
        margin: 0 auto;
    }
    .detil-game .input-params .card .input-area .first-input { width: 100%; }
    .detil-game .input-params .card .list-denom {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        align-items: center;
        align-content: baseline;
    }
    .detil-game .input-params .card .list-denom li { font-size: 14px; }
    .detil-game .input-params .card .area-list-payment-method .child-box .header .left img { height: 20px; margin-right: 12px; }
    .detil-game .input-params .card .area-list-payment-method .child-box .header .left b { font-size: 13px; }
    .detil-game .input-params .card .area-list-payment-method .child-box .header .right.price-range b { font-size: 14px; }
    .detil-game .input-params .card .area-list-payment-method .child-box .short-payment-support-info img { height: 13px; margin-right: 7px; }
    .detil-game .input-params .card .area-list-payment-method .child-box .short-payment-support-info .open-button-action-payment { font-size: 10px; }
    .detil-game .input-params .card .area-list-payment-method .child-box .button-action-payment { padding: 10px !important; }
    .detil-game .input-params .card .area-list-payment-method .child-box .button-action-payment ul { grid-template-columns: repeat(1, 1fr); }
    .detil-game .input-params .card .area-list-payment-method .child-box .button-action-payment ul li:nth-child(odd) { margin-right: 0 !important; }
    .detil-game .input-params .card .area-list-payment-method .child-box .button-action-payment ul li:nth-child(even) { margin-left: 0 !important; }
    .entitas-description {
        border-top: 1px solid var(--tmv8-border, #e5e5e5);
        color: var(--tmv8-text, #373737);
        border-bottom: 1px solid var(--tmv8-border, #e5e5e5);
        margin-bottom: 15px;
        cursor: default;
        margin-top: 15px;
        padding: 15px 5px;
    }
    .button-action-store { display: none; }
    .howto-get-useridbutton {
        color: white;
        text-decoration: none;
        padding: 5px 15px;
        display: block;
        margin: 15px auto 5px;
        text-align: center;
        border-radius: 0.3em;
        font-weight: 600;
        font-size: 13px;
    }
    .howto-get-useridbutton:hover { background: var(--tmv8-primary-hover, #db5f0f); color: white; text-decoration: none; }
    .area-help { display: block; width: fit-content; margin: 0 auto; }
    .popover-custom { width: fit-content; top: 68px; left: -77px; }
    .popover-custom:before { border-color: rgba(194, 225, 245, 0); border-bottom-color: #ccc; border-width: 13px; margin-left: -13px; }
    .popover-custom:after  { border-color: rgba(136, 183, 213, 0); border-bottom-color: #ffffff; border-width: 11px; margin-left: -11px; }
    .frame-input-inner:first-child { flex-grow: 1; width: 60%; }
    .mlseparator { width: 35%; margin-left: 10px; position: relative; }
    .mlseparator input { width: 100%; }
    .mlseparator:before {
        content: "(";
        display: inline-block;
        padding-right: 3px;
        vertical-align: middle;
        font-weight: 700;
        position: absolute;
        margin-top: 6px;
        font-size: 20px;
        margin-left: 8px;
        color: gray;
    }
    .mlseparator:after {
        content: ")";
        display: inline-block;
        padding-right: 3px;
        vertical-align: middle;
        font-weight: 700;
        position: absolute;
        margin-top: 6px;
        font-size: 20px;
        right: 3px;
        top: 0;
        color: gray;
    }
    .second-area { width: 40%; margin-left: 10px; position: relative; }
}

/* ========================================
   ADDITIONAL MOBILE STYLES FROM front-mobile.css
   (classes used in box_index but missing from theme_v8)
   ======================================== */

@media (max-width: 480px) {
    /* Anchor nav pills — horizontal scroll, no wrapping */
    .anchor-nav {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .anchor-nav::-webkit-scrollbar { display: none; }
    .anchor-nav .btn { white-space: nowrap; flex-shrink: 0; }

    .flash-sale-wrapper {
        display: flex;
        gap: 20px;
        flex-direction: row;
        max-width: 100%;
        overflow-x: auto;
        padding: 20px 10px 10px 10px;
    }

    .slider-wrapper-fs {
        display: none;
    }

    .group-title-fs {
        display: flex;
        flex-direction: row;
        gap: 0;
        align-items: flex-start;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .countdown-style1-container {
        margin-left: 5px;
    }

    #slide_show_wrp {
        margin: 0em 0 0em;
        margin-bottom: 30px;
    }

    #slide_show {
        padding: 20px;
    }

    #slide_show .show a {
        border-radius: 6px;
    }
}

/* ============================================================
   DETIL PAGE STYLES
   (box_entitas_detil_uniplay_theme_v8.php — desktop base)
   ============================================================ */

/* Layout */
.detil-game {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
    cursor: default;
}
.detil-game .info-game {
    width: 385px;
    padding-right: 20px;
}
.detil-game .info-game .info-header {
    display: flex;
}
.detil-game .info-game .info-header .left img {
    width: 90px;
    height: 90px;
    margin-right: 20px;
    border-radius: 1em;
}
.detil-game .info-game .info-header .right b.publisher-name {
    color: #791b1b;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
    margin-top: 11px;
    display: block;
}
.detil-game .info-game .info-header .right h1 {
    font-size: 20px;
    color: var(--tmv8-text, #373737);
    font-weight: bold;
    margin-bottom: 5px;
}
.detil-game .info-game .info-header .right b.type-entitas {
    color: var(--tmv8-text-muted, #ababab);
    font-size: 12px;
    font-weight: 400;
    font-style: italic;
    display: block;
}
.detil-game .info-game .button-action-store {
    margin-top: 20px;
    margin-bottom: 15px;
}
.detil-game .info-game .button-action-store a {
    text-decoration: none;
    margin-right: 15px;
}

/* Category / anchor nav */
.anchor-nav {
    width: 100%;
    display: flex;
    gap: 1rem;
    overflow-x: auto;
}
.category-block {
    width: 100%;
}
.btn-category-primary {
    color: var(--tmv8-category-border, var(--tmv8-primary, #e6710f)) !important;
    border-color: var(--tmv8-category-border, var(--tmv8-primary, #e6710f)) !important;
    background: var(--tmv8-category-bg, var(--tmv8-surface, #fff)) !important;
}
.btn-category-primary:hover {
    color: #fff !important;
    background: var(--tmv8-category-border, var(--tmv8-primary, #e6710f)) !important;
    border-color: var(--tmv8-category-border, var(--tmv8-primary, #e6710f)) !important;
}
.btn-category-primary.active:hover,
.btn-category-primary:active:hover {
    color: #fff !important;
    background: var(--tmv8-category-border, var(--tmv8-primary, #e6710f)) !important;
    border-color: var(--tmv8-category-border, var(--tmv8-primary, #e6710f)) !important;
}
.btn-category-primary.active,
.btn-category-primary:active,
.btn-category-primary:focus-visible {
    color: #fff !important;
    background: var(--tmv8-category-border, var(--tmv8-primary, #e6710f)) !important;
    border-color: var(--tmv8-category-border, var(--tmv8-primary, #e6710f)) !important;
}
.btn-category-primary i,
.btn-category-primary span {
    color: var(--tmv8-category-border, var(--tmv8-primary, #e6710f)) !important;
}
.btn-category-primary:hover i,
.btn-category-primary:hover span,
.btn-category-primary.active i,
.btn-category-primary.active span,
.btn-category-primary:active i,
.btn-category-primary:active span,
.btn-category-primary:focus-visible i,
.btn-category-primary:focus-visible span {
    color: #fff !important;
}
.divider-top {
    border-top: 1px solid var(--tmv8-border, #e5e5e5);
    padding-top: 1rem;
    scroll-margin-top: 80px;
}

/* Calculator pages */
.tmv8-calc-page {
    width: 100%;
    min-height: calc(100vh - 250px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 48px 16px;
}

.tmv8-calc-card {
    width: min(100%, 560px);
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    border: 1px solid var(--tmv8-border, #e5e5e5);
    border-radius: 8px;
    background: var(--tmv8-surface, #fff);
    box-shadow: var(--tmv8-shadow, 0 1px 10px #617d901c);
}

.tmv8-calc-head,
.tmv8-calc-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tmv8-calc-head {
    gap: 10px;
    text-align: center;
}

.tmv8-calc-head img {
    width: 132px;
    max-width: 45%;
    height: auto;
}

.tmv8-calc-head h1 {
    margin: 0;
    color: var(--tmv8-text, #373737);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.tmv8-calc-head p {
    margin: 0;
    color: var(--tmv8-text, #373737);
    font-size: 15px;
    line-height: 1.45;
}

.tmv8-calc-form {
    width: 100%;
    gap: 18px;
}

.tmv8-calc-field {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tmv8-calc-field label {
    color: var(--tmv8-text, #373737);
    font-size: 15px;
    font-weight: 600;
}

.tmv8-calc-input {
    width: 100%;
    padding: 14px;
    border: 1px solid var(--tmv8-border, #e5e5e5);
    border-radius: 8px;
    background: #fff;
    color: var(--tmv8-text, #373737) !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.tmv8-calc-input:hover,
.tmv8-calc-input:focus {
    border-color: var(--tmv8-primary, #e6710f);
    background: color-mix(in srgb, var(--tmv8-primary) 5%, #fff);
}

.tmv8-calc-button {
    width: 100%;
    min-height: 50px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border: 1px solid var(--tmv8-primary, #e6710f);
    border-radius: 8px;
    background: var(--tmv8-primary, #e6710f);
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 4px 14px var(--tmv8-primary-shadow, rgba(47, 65, 88, 0.18));
}

.tmv8-calc-button:hover {
    background: var(--tmv8-primary-hover, #db5f0f);
    border-color: var(--tmv8-primary-hover, #db5f0f);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px var(--tmv8-primary-shadow-strong, rgba(47, 65, 88, 0.24));
}

.tmv8-calc-button i {
    color: #fff !important;
}

.tmv8-calc-button-outline {
    background: var(--tmv8-surface, #fff);
    color: var(--tmv8-primary, #e6710f) !important;
}

.tmv8-calc-button-outline:hover {
    color: #fff !important;
}

.tmv8-calc-result {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--tmv8-primary) 32%, var(--tmv8-border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--tmv8-primary) 8%, #fff);
    text-align: center;
}

.tmv8-calc-result[hidden] {
    display: none;
}

.tmv8-calc-result-row {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
}

.tmv8-calc-result span,
.tmv8-calc-result b {
    color: var(--tmv8-text, #373737);
    font-size: 15px;
}

.tmv8-calc-result h3,
.tmv8-calc-result b.tmv8-current-value,
.tmv8-calc-result b.tmv8-diamonds-needed,
.tmv8-calc-result b.tmv8-diamonds-needed i {
    color: var(--tmv8-primary, #e6710f) !important;
}

.tmv8-calc-result h3 {
    margin: 0;
    font-size: 32px;
    font-weight: 800;
}

.tmv8-calc-slider {
    width: 100%;
    padding: 14px 0;
}

.tmv8-calc-slider input[type="range"] {
    width: 100%;
    height: 6px;
    padding: 0;
    border: none;
    border-radius: 999px;
    appearance: none;
    outline: none;
}

.tmv8-calc-slider input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 22px;
    height: 22px;
    border: 3px solid var(--tmv8-primary, #e6710f);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.tmv8-calc-slider input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 3px solid var(--tmv8-primary, #e6710f);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

@media (max-width: 600px) {
    .tmv8-calc-page {
        padding: 28px 12px;
    }

    .tmv8-calc-card {
        padding: 22px 16px;
    }

    .tmv8-calc-head h1 {
        font-size: 23px;
    }

    .tmv8-calc-result-row {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

/* Description */
.entitas-description {
    border-top: 1px solid var(--tmv8-border, #e5e5e5);
    padding-top: 25px;
    color: var(--tmv8-text, #373737);
    border-bottom: 1px solid var(--tmv8-border, #e5e5e5);
    padding-bottom: 25px;
    margin-bottom: 25px;
    cursor: default;
}
.entitas-description p {
    color: #444444 !important;
}

/* Show/read more toggle — base styles intentionally minimal */
.show-first { display: block; }
.read-more { display: none; }

/* Sidebar info (v1 variant used in v8) */
.sidebar-info-product-v1 {
    display: flex;
    padding: 20px 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    align-self: stretch;
    border-radius: var(--tmv8-radius, 8px);
}
.frame-title-sidebar { display: block; }
.frame-title-sidebar h4 {
    color: var(--tmv8-text, #373737);
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    align-self: stretch;
    margin: 0;
}

/* Other entitas */
.other-entitas {
}

.other-entitas .title-other-entitas {
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}
.other-entitas .title-other-entitas img {
    width: 20px;
    height: 22px;
    margin-right: 15px;
}
.other-entitas .title-other-entitas b {
    color: var(--tmv8-text, #373737);
    font-size: 18px;
}
.other-entitas .list-other-entitas {
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--tmv8-border, #e5e5e5);
    padding-bottom: 25px;
    margin-bottom: 25px;
}
.other-entitas .list-other-entitas li {
}
.other-entitas .list-other-entitas li a {
    text-decoration: none;
    color: var(--tmv8-text, #373737);
    font-weight: 600;
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    border: 1px solid #b2c7d5;
    border-radius: 0.5em;
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
}
.other-entitas .list-other-entitas li a:hover {
    background: var(--tmv8-bg, #f1f5f7);
}
.other-entitas .list-other-entitas li a img {
    width: 44px;
    height: 44px;
    border-radius: 5px;
    margin-right: 20px;
}
.other-entitas .list-other-entitas li a div {
    flex: 1;
    max-width: 230px;
}
.other-entitas .list-other-entitas li a b {
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    width: 100%;
}

/* Help footer */
.help-footer .help-footer-entitas {
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}
.help-footer .help-footer-entitas img {
    width: 20px;
    height: 22px;
    margin-right: 15px;
}
.help-footer .help-footer-entitas b {
    color: var(--tmv8-text, #373737);
    font-size: 18px;
}
.help-footer p {
    color: var(--tmv8-text, #373737);
    font-size: 14px;
}
.help-footer p a {
    color: #0d4e78;
    text-decoration: none;
    font-weight: 600;
}
.help-footer p a:hover {
    color: #0088df;
}

/* Ajakan reseller */
.container-ajakan {
    border-bottom: 1px solid var(--tmv8-border, #e5e5e5);
    padding-bottom: 25px;
    margin-bottom: 25px;
}
.ajakan-reseller {
    border: 1px solid #41c3cf;
    background: #f6fbfc;
    padding: 15px 20px;
    border-radius: 0.3em;
    margin-top: 12px;
}
.ajakan-reseller .heading {
    font-size: 16px;
    margin-bottom: 10px !important;
    display: block;
}
.ajakan-reseller .subheading {
    font-size: 14px;
}
.ajakan-reseller .subsubheading {
    font-size: 13px;
    margin: 0;
}
.ajakan-reseller .subheading b { font-weight: 600; }
.ajakan-reseller .subsubheading a {
    font-weight: 600;
    color: var(--tmv8-primary, #e6710f);
    text-decoration: none;
}
.ajakan-reseller .subsubheading a:hover {
    color: var(--tmv8-primary, #e6710f);
    border-bottom: 1px dotted var(--tmv8-primary, #e6710f);
}
.ajakan-reseller .subsubheading a i { margin-left: 5px; }
.ajakan-affiliate { border-radius: 0.3em; margin-top: 12px; }
.ajakan-affiliate p { font-size: 15px; }
.ajakan-affiliate .heading { font-size: 16px; margin-bottom: 10px !important; display: block; }
.ajakan-affiliate .subheading { font-size: 15px; }

/* Widget sidebar */
.widget-sidebar {
    border-bottom: 1px solid var(--tmv8-border, #e5e5e5);
    padding-bottom: 25px;
    margin-bottom: 25px;
}
.widget-sidebar .widget-sidebar-entitas {
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}
.widget-sidebar .widget-sidebar-entitas img { width: 20px; height: 22px; margin-right: 15px; }
.widget-sidebar .widget-sidebar-entitas i { font-size: 20px; margin-left: 3px; margin-right: 15px; }
.widget-sidebar .widget-sidebar-entitas b { color: var(--tmv8-text, #373737); font-size: 18px; }
.widget-sidebar p { color: var(--tmv8-text, #373737); font-size: 14px; margin: auto; }
.widget-sidebar h1, .widget-sidebar h2, .widget-sidebar h3, .widget-sidebar h4 { margin-bottom: 0; }
.widget-sidebar p img { max-width: 100%; margin-bottom: 8px; }
.widget-sidebar p a { color: #0d4e78; text-decoration: none; font-weight: 600; }
.widget-sidebar p a:hover { color: #0088df; }
.widget-sidebar p:last-child { margin-bottom: 0; }
.widget-sidebar br { display: none; }
.widget-sidebar .page-header { margin-bottom: 20px; }
.widget-sidebar .page-header h1 { font-weight: 600; }
.widget-sidebar h1 { font-size: 2.1rem; }
.widget-sidebar h2 { font-size: 1.9rem; }
.widget-sidebar h3 { font-size: 1.6rem; }
.widget-sidebar h4 { font-size: 1.3rem; }
.widget-sidebar .ql-font-monospace { font-family: Monaco, "Courier New", monospace; }
.widget-sidebar .ql-font-serif { font-family: Georgia, "Times New Roman", serif; }

/* Input params card */
.detil-game .input-params {
    width: 60%;
    padding-top: 20px;
}
.detil-game .input-params.sticky {
    position: sticky;
    top: 10px;
}
.detil-game .input-params .card {
    padding: 20px;
    border-radius: 0.5em;
    margin-bottom: 40px;
    padding-top: 15px;
    border: 1px solid var(--tmv8-border, #e5e5e5);
    box-shadow: var(--tmv8-shadow, 0 1px 10px #617d901c);
}
.detil-game .input-params .card .heading { margin-bottom: 10px; }
.detil-game .input-params .card .heading h2.number-ic {
    font-size: 20px;
    background: var(--tmv8-primary, #e6710f);
    position: absolute;
    color: white;
    width: 37px;
    height: 37px;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
    border-radius: 50%;
    border: 5px solid #fff;
    margin-top: -32px;
    margin-left: -5px;
}
.detil-game .input-params .card .heading h2.title-ic {
    color: var(--tmv8-text, #373737);
    font-size: 18px;
    padding-left: 31px;
    font-weight: 600;
}
.detil-game .input-params .card .input-area {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}
.detil-game .input-params .card .input-area input { outline: 0 !important; }
.detil-game .input-params .card .input-area input:hover {
    border: 1px solid var(--tmv8-primary, #e6710f);
}
.input-area i {
    font-size: 17px;
    position: absolute;
    margin-top: -9px;
    margin-left: -10px;
    color: #7f7f7f;
}
.input-area i:hover { color: var(--tmv8-primary, #e6710f); }
#btn-check-ml-region i {
    color: currentColor !important;
    position: relative;
    margin-top: 0;
    margin-left: 0;
}
.detil-game .input-params .card .input-area .first-input {
    width: 210px;
    margin-right: 10px;
    border-radius: 7px;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}
.detil-game .input-params .card .input-area .second-input {
    margin-right: 10px;
    border-radius: 7px;
    text-align: center;
    padding: 10px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}
.detil-game .input-params .card .input-area a {
    color: #b5ccdc;
    text-decoration: none;
    font-size: 21px;
    margin-left: 15px;
}
.detil-game .input-params .card .input-area a.active i { color: var(--tmv8-primary, #e6710f); }
.detil-game .input-params .card .input-area .frame-input-inner.additional-field-area { margin-left: 10px; }
.detil-game .input-params .card .subtitle {
    margin-bottom: 0;
    font-size: 12px;
    color: #3a464f;
}

/* Area help / popover */
.area-help {
    position: relative;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
}
.area-help a { cursor: help; }
.detil-game .input-params .card .input-area .area-help .howto-get-userid {
    display: inline-flex;
    width: 28px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    line-height: 1;
}
.detil-game .input-params .card .input-area .area-help .howto-get-userid i {
    position: static;
    margin: 0;
}
.popover-custom {
    position: absolute;
    background: white;
    z-index: 1000;
    padding: 10px;
    border-radius: 0.5em;
    border: 1px solid #ccc;
    top: 22px;
    left: -99px;
    box-shadow: 0 0 13px 3px #ccc;
    display: none;
    width: 235px;
}
@media (min-width: 769px) {
    .detil-game .input-params .card .input-area .area-help .popover-custom {
        top: 50%;
        left: calc(100% + 14px);
        transform: translateY(-50%);
    }

    .detil-game .input-params .card .input-area .area-help .popover-custom:after,
    .detil-game .input-params .card .input-area .area-help .popover-custom:before {
        top: 50%;
        right: 100%;
        bottom: auto;
        left: auto;
        transform: translateY(-50%);
        border: solid transparent;
    }

    .detil-game .input-params .card .input-area .area-help .popover-custom:after {
        border-right-color: #ffffff;
        border-width: 11px;
        margin-left: 0;
        margin-right: 0;
    }

    .detil-game .input-params .card .input-area .area-help .popover-custom:before {
        border-right-color: #ccc;
        border-width: 13px;
        margin-left: 0;
        margin-right: 0;
    }
}
.popover-custom:after, .popover-custom:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.popover-custom:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #ffffff;
    border-width: 11px;
    margin-left: -30px;
}
.popover-custom:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #ccc;
    border-width: 13px;
    margin-left: -32px;
}
.popover-image { cursor: pointer; width: 100% !important; }
.popover-title { margin-bottom: 0; margin-top: 5px; text-align: center; font-size: 14px; }
.frame-input-inner label {
    color: #c90000;
    font-size: 14px;
    font-weight: 500;
    font-style: italic;
    display: none !important;
}

/* Shadows */
.sadows { box-shadow: 0 0 14px var(--tmv8-primary-glow, rgba(47, 65, 88, 0.28)) !important; }
.sadowslite { box-shadow: 0 0 8px rgba(255, 0, 0, 0.36) !important; border: 1px solid rgba(255, 119, 119, 0.67) !important; }

/* Form focus/hover */
.form-control:focus { box-shadow: none !important; border: 1px solid var(--tmv8-primary, #e6710f); }
.form-control:hover { box-shadow: none !important; border: 1px solid var(--tmv8-primary, #e6710f); }
.form-select:focus { box-shadow: none !important; border: 1px solid var(--tmv8-primary, #e6710f); }
.form-select:hover { box-shadow: none !important; border: 1px solid var(--tmv8-primary, #e6710f); }

/* Denom list */
.list-denom {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    align-content: baseline;
    gap: 15px;
}
.list-denom li {
    display: flex;
    height: 112px;
    padding: 12px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    border-radius: 8px;
    border: 1px solid #D9DFE2;
    background: #fff;
    cursor: pointer;
    transition: all ease .2s;
}
.list-denom li b {
    color: #1D1C23;
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.list-denom li i { font-size: 12px; margin-right: 5px; }
.list-denom li .pricing-icon {
    display: flex;
    padding-top: 2px;
    justify-content: space-between;
    align-items: flex-end;
    align-self: stretch;
    backdrop-filter: blur(2px);
}
.list-denom li .pricing-icon i { color: #E9E9E9; font-size: 18px; padding-bottom: 4px; }
.list-denom li .pricing-icon .pricing-detil {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}


.list-denom li .pricing-icon .pricing-detil small {
    color: #ff1f1f !important;
    font-size: 10px;
    font-weight: 400;
    text-decoration: line-through;
}
.list-denom li .pricing-icon .pricing-detil span {
    color: var(--tmv8-primary, #e6710f);
    font-size: 15px;
    font-weight: 600;
}
.area-topup-members .list-denom li {
    display: flex;
    height: 94px;
    padding: 12px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    border-radius: 8px;
    border: 1px solid #D9DFE2;
    background: #fff;
    cursor: pointer;
    transition: all ease .2s;
}
.list-denom li:hover { 
    border: 1px solid var(--tmv8-primary-hover, #db5f0f);    
}

.list-denom li:hover .pricing-icon i {
    animation: nav-calc-wiggle 0.5s ease forwards;
}
.list-denom li:active,
.list-denom li:focus,
.list-denom li.active {
    border: 1px solid var(--tmv8-primary-hover, #db5f0f);
    background: #fff;
    background-image: url("../../img/gradient-fill-uniplay-box.svg");
}
.list-denom li:active i,
.list-denom li:focus i,
.list-denom li.active i { color: var(--tmv8-primary-hover, #db5f0f); }

/* Payment method area */
.area-list-payment-method .child-box {
    background: #F8F8F8;
    border: 1px solid #e6ebef;
    margin-bottom: 18px;
    border-radius: 7px !important;
}
.area-list-payment-method .child-box.disabled { pointer-events: none; }
.area-list-payment-method .child-box.disabled .header { background: #f6f6f6 !important; }
.area-list-payment-method .child-box:hover { border: 1px solid var(--tmv8-primary, #e6710f); }
.area-list-payment-method .child-box.active { border: 1px solid var(--tmv8-primary, #e6710f); }
.area-list-payment-method .child-box .header {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    padding: 11px 15px;
    background: white;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    cursor: pointer;
    position: relative;
}
.area-list-payment-method .child-box .header .left { display: block; }
.area-list-payment-method .child-box .header .left img { height: 23px; margin-right: 12px; }
.area-list-payment-method .child-box .header .left b { font-size: 14px; }
.area-list-payment-method .child-box .header .right.price-range b { font-size: 14px; color: #073a65; }
.area-list-payment-method .child-box .short-payment-support-info {
    background: #f6f6f6;
    padding: 11px 15px;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-end;
    align-items: center;
    cursor: pointer;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}
.area-list-payment-method .child-box .short-payment-support-info img { height: 15px; margin-right: 15px; }
.area-list-payment-method .child-box .short-payment-support-info .open-button-action-payment {
    color: #414141;
    font-size: 13px;
    margin-left: 10px;
}
.area-list-payment-method .child-box .button-action-payment { padding: 15px; display: none; }
.area-list-payment-method .child-box .button-action-payment ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    align-content: baseline;
}
.area-list-payment-method .child-box .button-action-payment ul li {
    border: 1px solid #c7d0d7;
    padding: 10px;
    border-radius: 0.3em;
    margin-bottom: 10px;
    background: white;
    cursor: pointer;
    position: relative;
}
.area-list-payment-method .child-box .button-action-payment ul li.disabled {
    cursor: no-drop;
    background: #f0f0f0;
    pointer-events: none;
}
.area-list-payment-method .child-box .button-action-payment ul li.disabled .info-top img { opacity: 0.5; }
.area-list-payment-method .child-box .button-action-payment ul li.disabled .info-bottom b { color: gray; }
.area-list-payment-method .child-box .button-action-payment ul li:hover { border: 1px solid var(--tmv8-primary, #e6710f); }
.area-list-payment-method .child-box .button-action-payment ul li.active,
.area-list-payment-method .child-box .button-action-payment ul li:active,
.area-list-payment-method .child-box .button-action-payment ul li:focus {
    border: 1px solid var(--tmv8-primary, #e6710f);
    background: #fff9f3;
}
.area-list-payment-method .child-box .button-action-payment ul li:nth-child(odd) { margin-right: 5px; }
.area-list-payment-method .child-box .button-action-payment ul li:nth-child(even) { margin-left: 5px; }
.area-list-payment-method .child-box .button-action-payment ul li .info-top {
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 10px;
}
.area-list-payment-method .child-box .button-action-payment ul li .info-top img { height: 20px; object-fit: contain; }
.area-list-payment-method .child-box .button-action-payment ul li .info-top b { color: #073a65; font-size: 14px; font-weight: 600; }
.area-list-payment-method .child-box .button-action-payment ul li .info-bottom {
    font-size: 11px;
    color: #333232;
    font-weight: 300;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.area-list-payment-method .accordion-item.active .accordion-header,
.area-list-payment-method .payment-drawwer.active .accordion-header { border-bottom: 0 !important; }

/* Payment drawer active state */
.short-payment-support-info-head {
    transition: all .2s ease;
    padding-right: 9px;
    cursor: pointer;
}
.short-payment-support-info-head:hover .left b { color: var(--tmv8-primary, #e6710f); }
.short-payment-support-info-head .left img { width: 18px !important; height: 18px !important; }
.short-payment-support-info-head:hover i { color: var(--tmv8-primary, #e6710f); }
.payment-drawwer.active .header i.fas,
.payment-drawwer.active .header .desc,
.payment-drawwer.active .header b { color: var(--tmv8-primary, #e6710f); }
.channel-not-available { font-size: 11px; color: gray; }

/* Buttons */
.btn-orange {
    background-color: var(--tmv8-primary, #e6710f);
    color: #fff;
    border-radius: 5px;
}
.btn-orange:disabled {
    pointer-events: none;
    background-color: gray;
    border-color: gray;
    color: #dddddd;
}
.btn-orange:hover {
    background-color: var(--tmv8-primary-hover, #db5f0f);
    color: #fff;
}

/* Loading overlay */
.loading-submit-data {
    top: 0; left: 0; right: 0; bottom: 0;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.7);
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    z-index: 4000;
    display: none;
}
.loading-submit-data .content {
    width: 200px;
    height: 200px;
    background: white;
    border-radius: 50%;
    position: relative;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.loading-submit-data .content img {
    position: absolute;
    top: 66px;
    width: 82px;
    animation: bounce 0.3s infinite alternate;
    -webkit-animation: bounce 0.3s infinite alternate;
}
@keyframes bounce {
    from { transform: translateY(0px); }
    to   { transform: translateY(-15px); }
}
@-webkit-keyframes bounce {
    from { transform: translateY(0px); }
    to   { transform: translateY(-15px); }
}
.lds-dual-ring {
    display: inline-block;
    width: 180px;
    height: 180px;
}
.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 164px;
    height: 164px;
    margin: 8px;
    border-radius: 50%;
    border: 6px solid #fff;
    border-color: var(--tmv8-primary, #e6710f) transparent #3a3a3a transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* UPL Point modal */
.custom-modal-uplpoint-overlay {
    background: rgba(0, 0, 0, 0.20);
    position: fixed;
    left: 0; right: 0; top: 0; bottom: 0;
    z-index: 888;
    opacity: 0;
    transition: opacity ease 0.3s;
    pointer-events: none;
}
.custom-modal-uplpoint-overlay.show { opacity: 1; pointer-events: all; }
.custom-modal-uplpoint-overlay.hide { opacity: 0; pointer-events: none; }
.custom-modal-uplpoint-popup {
    width: 646px;
    height: 432px;
    flex-shrink: 0;
    border-radius: 15px;
    background: url('../../img/popup-uniplaypoint.png') lightgray 50% / cover no-repeat;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    transition: all ease .3s;
}
.custom-modal-uplpoint-popup.hide { display: none; }
.custom-modal-uplpoint-popup .custom-modal-uplpoint-content {
    display: flex;
    width: 442px;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    position: relative;
}
.custom-modal-uplpoint-popup .custom-modal-uplpoint-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    align-self: stretch;
}
.custom-modal-uplpoint-popup img { width: 100px; height: 100px; }
.custom-modal-uplpoint-popup h3 {
    color: var(--tmv8-accent, #ee8103);
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    line-height: 23px;
    align-self: stretch;
    margin: 0;
}
.custom-modal-uplpoint-popup p {
    align-self: stretch;
    color: #393939;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    margin: 0;
}
.custom-modal-uplpoint-popup .actions-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.custom-modal-uplpoint-popup .actions-button a.primary-act {
    display: flex;
    padding: 12px 18px;
    justify-content: center;
    align-items: center;
    border-radius: 42px;
    background: var(--tmv8-accent, #ee8103);
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 21px;
    text-decoration: none !important;
    transition: all ease .3s;
}
.custom-modal-uplpoint-popup .actions-button a.primary-act:hover { background: var(--tmv8-primary-hover, #db5f0f); }
.custom-modal-uplpoint-popup .actions-button a.secondary-act {
    display: flex;
    width: 140px;
    padding: 12px 18px;
    justify-content: center;
    align-items: center;
    color: #717070;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 21px;
    text-decoration: none !important;
}
.custom-modal-uplpoint-popup .outside-right-close {
    display: flex;
    width: 32px;
    height: 32px;
    padding: 8px;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 20px;
    right: 20px;
    border-radius: 4px;
    opacity: 0.5;
    background: #fff;
    text-decoration: none;
    color: #212529;
    font-size: 16px;
    transition: all ease .3s;
    z-index: 999;
}
.custom-modal-uplpoint-popup .outside-right-close:hover { opacity: 1; }

/* ── Flash Sale Category ──────────────────────────────────────── */
@keyframes nav-calc-wiggle {
    0%   { transform: rotate(0deg); }
    20%  { transform: rotate(-12deg); }
    50%  { transform: rotate(12deg); }
    75%  { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

/* Flash Sale category heading */
.category-block-flash-sale > .category-heading {
    border-top: 3px solid var(--tmv8-primary, #e6710f);
}
.category-block-flash-sale > .category-heading .flash-sale-badge {
    color: var(--tmv8-primary, #e6710f);
    animation: nav-calc-wiggle 1.2s ease infinite;
}
.category-block-flash-sale > .category-heading span {
    color: var(--tmv8-primary, #e6710f);
}

/* Flash Sale denom box — orange accent */
.list-denom li.flash-sale-denom {
    border: 1px solid #ffd0a0;
    background: #fff8f2;
}
.list-denom li.flash-sale-denom:hover,
.list-denom li.flash-sale-denom.active {
    border-color: var(--tmv8-primary, #e6710f);
    background: #fff3e6;
    background-image: url("../../img/gradient-fill-uniplay-box.svg");
}
.list-denom li.flash-sale-denom .pricing-detil small {
    color: #b0b0b0;
    text-decoration: line-through;
    font-size: 11px;
    margin-top: 2px;
    display: block;
}
.list-denom li.flash-sale-denom .pricing-icon i {
    color: var(--tmv8-primary, #e6710f);
}

/* Theme v8 homepage product reveal */
.list-grid-games .grid-list a.tmv8-product-card {
    position: relative;
    isolation: isolate;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) 64px !important;
    overflow: hidden;
    box-sizing: border-box;
    aspect-ratio: 4 / 5;
    height: auto !important;
    padding-bottom: 0 !important;
    margin-bottom: 15px !important;
    color: #fff;
    background: var(--tmv8-pbox-bg) !important;
    border: 1px solid transparent;
    border-radius: 15px;
    box-shadow: 0 12px 24px rgba(47, 65, 88, 0.12);
    transform: translateY(0) scale(1);
    opacity: 1;
    animation: tmv8-product-enter 0.72s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    /* GPU-only properties: transform + border-color + box-shadow */
    transition: border-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
    margin-top: 5px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.list-grid-games .grid-list a.tmv8-product-card:nth-child(2n) {
    animation-delay: 0.05s;
}

.list-grid-games .grid-list a.tmv8-product-card:nth-child(3n) {
    animation-delay: 0.1s;
}

.list-grid-games .grid-list a.tmv8-product-card:nth-child(4n) {
    animation-delay: 0.15s;
}

.list-grid-games .grid-list a.tmv8-product-card:nth-child(5n) {
    animation-delay: 0.2s;
}

.list-grid-games .grid-list a.tmv8-product-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(8, 13, 20, 0) 18%, rgba(8, 13, 20, 0.24) 48%, rgba(8, 13, 20, 0.92) 100%);
    opacity: 1;
    pointer-events: none;
    /* GPU: opacity only — inset/border-radius tidak GPU-accelerated */
    transition: opacity 0.28s ease;
    will-change: opacity;
}

.list-grid-games .grid-list a.tmv8-product-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(5, 9, 15, 0.08) 0%, rgba(5, 9, 15, 0.32) 34%, rgba(5, 9, 15, 0.76) 70%, rgba(5, 9, 15, 0.98) 100%);
    opacity: 0;
    pointer-events: none;
    /* GPU: opacity only — transform: scaleY tidak diperlukan */
    transition: opacity 0.28s ease;
    will-change: opacity;
}

.list-grid-games .grid-list a.tmv8-product-card img {
    grid-column: 1;
    grid-row: 1 / 3;
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100% !important;
    height: 100% !important; /* selalu full — clip-path yang membatasi area tampil */
    min-height: 0;
    object-fit: cover;
    border-radius: 14px;
    /* clip-path GPU-accelerated: sembunyikan bagian bawah 58px (area label) */
    clip-path: none;
    transform: scale(1);
    /* GPU-only: clip-path + transform — hapus height, filter, border-radius */
    transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.list-grid-games .grid-list a.tmv8-product-card p {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    position: relative;
    z-index: 3;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 12px !important;
    color: #fff;
    font-size: 19px !important;
    font-weight: 500;
    line-height: 1.15;
    text-shadow: none;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    transform: translateY(0);
    /* GPU: transform only — hapus text-shadow (tidak GPU-accelerated) */
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.list-grid-games .grid-list a.tmv8-product-card:hover {
    border-color: var(--tmv8-primary);
    box-shadow: 0 20px 40px var(--tmv8-primary-shadow-subtle, rgba(47, 65, 88, 0.14));
    transform: translateY(-3px) scale(1.008);
}

.list-grid-games .grid-list a.tmv8-product-card:hover::before {
    opacity: 0; /* fade out gradient — GPU (opacity only) */
}

.list-grid-games .grid-list a.tmv8-product-card:hover::after {
    opacity: 1; /* fade in full overlay — GPU (opacity only) */
}

.list-grid-games .grid-list a.tmv8-product-card:hover img {
    /* clip-path expand ke full card — GPU-accelerated */
    transform: scale(1.035);
}

.list-grid-games .grid-list a.tmv8-product-card:hover p {
    transform: translateY(-2px); /* GPU: transform only */
}

.list-grid-games .grid-list a.tmv8-product-card:active {
    border-color: var(--tmv8-primary);
    box-shadow: 0 6px 14px var(--tmv8-primary-shadow-soft, rgba(47, 65, 88, 0.18));
    transform: scale(0.97);
    /* Transisi lebih cepat saat ditekan — respons langsung di mobile */
    transition-duration: 0.08s;
}

.list-grid-games .grid-list a.tmv8-product-card:active::before {
    opacity: 0.7;
    transition-duration: 0.08s;
}

.list-grid-games .grid-list a.tmv8-product-card:active::after {
    opacity: 0.5;
    transition-duration: 0.08s;
}

@keyframes tmv8-product-enter {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .list-grid-games .grid-list a.tmv8-product-card,
    .list-grid-games .grid-list a.tmv8-product-card img,
    .list-grid-games .grid-list a.tmv8-product-card p,
    .list-grid-games .grid-list a.tmv8-product-card::before,
    .list-grid-games .grid-list a.tmv8-product-card::after {
        animation: none !important;
        transition: none !important;
    }

    .list-grid-games .grid-list a.tmv8-product-card {
        opacity: 1;
        transform: none;
    }
}

@media screen and (max-width: 600px) {
    .list-grid-games .grid-list a.tmv8-product-card {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        grid-template-rows: minmax(0, 1fr) 64px !important;
        padding-bottom: 0 !important;
        /* Mobile: transisi lebih pendek untuk respons lebih cepat */
        transition-duration: 0.2s;
    }

    .list-grid-games .grid-list a.tmv8-product-card::before {
        inset: 0 0 52px; /* tetap fixed — tidak dianimasikan */
    }

    .list-grid-games .grid-list a.tmv8-product-card img {
        height: 100% !important;
        /* clip-path sesuai label height mobile: 52px */
        clip-path: none;
    }

    .list-grid-games .grid-list a.tmv8-product-card p {
        padding: 0 10px !important;
        font-size: 19px !important;
        font-weight: 500;
    }

    /* Mobile hover → clip-path expand */
    .list-grid-games .grid-list a.tmv8-product-card:hover img {
    }

    .list-grid-games .grid-list a.tmv8-product-card:hover p {
        transform: translateY(-1px);
    }

    /* Mobile active: tekan cepat → scale langsung, respons instan */
    .list-grid-games .grid-list a.tmv8-product-card:active {
        transform: scale(0.95) !important;
        transition-duration: 0.06s;
    }

    .list-grid-games .grid-list a.tmv8-product-card:active::before {
        opacity: 0.5;
        transition-duration: 0.06s;
    }

    .list-grid-games .grid-list a.tmv8-product-card:active::after {
        opacity: 0.6;
        transition-duration: 0.06s;
    }
}

/* Shared homepage popup banner */
#popupModal {
    z-index: 1000001 !important;
}

#popupModal .modal-dialog,
#popupModal .modal-content {
    z-index: 1000002 !important;
}

#popupModal .btn-close-custom {
    z-index: 1000003 !important;
}

@media (min-width: 769px) {
    #popupModal .btn-close-custom {
        top: -20px !important;
        right: -20px !important;
        bottom: unset !important;
        left: unset !important;
    }
}

/* ========================================
   TAMPILKAN LAINNYA — BUTTON & REVEAL
   ======================================== */

/* Tombol Tampilkan Lainnya */
.overlay-more-games,
.overlay-more-voucher {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
}

.more-game-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    background: var(--tmv8-primary);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
    box-shadow: 0 4px 14px var(--tmv8-primary-shadow, rgba(47, 65, 88, 0.18));
}

.more-game-btn:hover {
    background: var(--tmv8-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px var(--tmv8-primary-shadow-strong, rgba(47, 65, 88, 0.24));
}

.more-game-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px var(--tmv8-primary-shadow-soft, rgba(47, 65, 88, 0.16));
}

.more-game-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.more-game-btn i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

/* CSS limit untuk voucher / PPOB */
.grid-list.tmv8-limited-grid .tmv8-product-card:nth-child(n+11) {
    display: none !important;
}

@media (max-width: 767px) {
    .grid-list.tmv8-limited-grid .tmv8-product-card:nth-child(n+10) {
        display: none !important;
    }
}

/* Reveal animation */
.reveal-hidden {
    opacity: 0 !important;
    transform: translateY(24px) scale(0.94);
    pointer-events: none;
}

.list-grid-games .grid-list a.tmv8-product-card.reveal-hidden {
    opacity: 0 !important;
    transform: translateY(24px) scale(0.94);
    animation: none !important;
}

.reveal-animate {
    animation: tmv8-reveal-in 0.82s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.list-grid-games .grid-list a.tmv8-product-card.reveal-animate {
    animation: tmv8-reveal-in 0.82s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

.list-grid-games .grid-list a.tmv8-product-card.reveal-done {
    animation: none !important;
}

@keyframes tmv8-reveal-in {
    from { opacity: 0; transform: translateY(24px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Frame wrapper untuk games AJAX */
.list-grid-games .frame-grid-product-v2 {
    width: 100%;
}

/* ========================================
   SWEETALERT2 OVERRIDES — THEME V8
   ======================================== */

.swal2-styled.swal2-cancel {
    border: 1px solid #7B7B7B !important;
    background-color: transparent !important;
    color: #7B7B7B !important;
    text-align: center;
    font-family: "Source Sans Pro" !important;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 700 !important;
    line-height: 24px !important;
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel:focus {
    background-color: #cccccc30 !important;
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel:hover {
    background-color: #cccccc30 !important;
}

/* ========================================
   MOBILE DRAWER V8 — PANEL & TRIGGER
   Global styles (.burger-flip-*, .drawer-header,
   body.drawer-body-lock, .menu-drawer-overlay) ada di theme_global.css.
   Di sini hanya override v8-specific dan panel drawer.
   ======================================== */

/* Override global: drawer overlay butuh background di v8 */
.menu-drawer-overlay {
    background: rgba(0, 0, 0, 0.5);
}

/* Header/drawer trigger default is black; hover/active follows theme color. */
.burger-flip-front i,
.burger-flip-back i {
    color: #000;
}

.tmv1-menu-trigger:hover .burger-flip-front i,
.tmv1-menu-trigger:hover .burger-flip-back i,
.tmv1-menu-trigger.is-active .burger-flip-front i,
.tmv1-menu-trigger.is-active .burger-flip-back i {
    color: var(--tmv8-primary, #e6710f);
}

/* Hamburger trigger button (dipakai oleh box_mobile_drawer.php) */
.tmv1-menu-trigger {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    width: 32px !important;
    height: 32px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    perspective: 600px;
}

.tmv1-menu-trigger:hover .burger-flip-inner,
.tmv1-menu-trigger.is-active .burger-flip-inner {
    transform: rotateY(180deg);
}

/* Desktop hamburger burger-flip behavior + icon color */
.frame-menu-burgerbar:hover .burger-flip-inner,
.frame-menu-burgerbar.active .burger-flip-inner {
    transform: rotateY(180deg);
}

.frame-menu-burgerbar .burger-flip-front i,
.frame-menu-burgerbar .burger-flip-back i {
    color: #000;
}

.frame-menu-burgerbar:hover .burger-flip-front i,
.frame-menu-burgerbar:hover .burger-flip-back i,
.frame-menu-burgerbar.active .burger-flip-front i,
.frame-menu-burgerbar.active .burger-flip-back i {
    color: var(--tmv8-primary, #e6710f);
}

/* Drawer wrapper — sembunyikan di desktop, tampilkan di mobile */
@media (min-width: 769px) {
    .frame-tmv8-drawer-wrapper {
        display: none;
    }
}

@media (max-width: 768px) {
    body:has(.sticky-header) .tmv8-header {
        top: 58px;
    }

    .frame-tmv8-drawer-wrapper {
        display: flex;
        align-items: center;
    }

    /* Panel drawer v8 */
    .menu-pop-theme-v8 {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        border-radius: 0 !important;
        overflow-y: auto !important;
        transform: translateX(110%);
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 9999 !important;
        padding-top: 0 !important;
        background: #fff !important;
    }

    .menu-pop-theme-v8.drawer-open {
        transform: translateX(0) !important;
    }

    /* ── Drawer: pertahankan header saat body terkunci ──────────────────────
       Saat drawer buka, JS meng-set body { position:fixed; top:-scrollY }.
       position:sticky pada header tidak bekerja di dalam parent yang fixed.
       Fix: paksa header ke position:fixed (tetap terlihat di atas viewport).
       Kompensasi: padding-top setara tinggi header (~54px) agar konten
       di belakang drawer TIDAK bergeser (menghindari "bodynya naik"). */
    body.drawer-body-lock .tmv8-header {
        position: fixed !important;
        top: 0 !important;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 2400 !important;
    }

    body.drawer-body-lock {
        padding-top: 54px !important;
    }

    .menu-pop-theme-v8 .arrow-up {
        display: none !important;
    }

    .menu-pop-theme-v8 > ul {
        list-style: none;
        padding: 8px 0;
        margin: 0;
    }

    .menu-pop-theme-v8 > ul > li > a {
        display: flex;
        align-items: center;
        padding: 14px 20px;
        color: #000 !important;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: background 0.2s ease;
    }

    .menu-pop-theme-v8 > ul > li > a:hover,
    .menu-pop-theme-v8 > ul > li.menu-active > a {
        background: transparent !important;
        color: var(--tmv8-primary, #e6710f) !important;
    }

    .menu-pop-theme-v8 > ul > li > a .right {
        flex: 1;
    }

    .menu-pop-theme-v8 > ul > li > a .right b {
        color: #000 !important;
        font-weight: 500;
    }

    .menu-pop-theme-v8 > ul > li > a > i[class*="svg-nav-"],
    .menu-pop-theme-v8 > ul > li > a > i.fas {
        order: 1;
        width: 20px;
        font-size: 16px;
        text-align: center;
        flex-shrink: 0;
        margin-left: 12px;
        color: #000 !important;
    }

    .menu-pop-theme-v8 > ul > li.menu-active > a i,
    .menu-pop-theme-v8 > ul > li.menu-active > a .right b {
        color: var(--tmv8-primary, #e6710f) !important;
    }

    .menu-pop-theme-v8 .drawer-close-btn,
    .menu-pop-theme-v8 .drawer-close-btn i,
    .menu-pop-theme-v8 .drawer-close-btn svg,
    .menu-pop-theme-v8 .drawer-close-btn svg * {
        color: #000 !important;
        fill: #000 !important;
        stroke: #000 !important;
    }

    /* Drawer submenu (kalkulator) */
    .dropdown-submenu > a {
        overflow: visible;
        touch-action: manipulation;
        cursor: pointer;
    }

    .dropdown-submenu > a i.fa-chevron-down {
        transition: transform 0.3s ease;
        display: inline-block;
    }

    .dropdown-submenu.active > a i.fa-chevron-down {
        transform: rotate(180deg);
    }

    .dropdown-submenu .submenu {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        list-style: none;
        padding: 0;
        margin: 0;
        background: transparent;
        transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    }

    .dropdown-submenu.active .submenu {
        max-height: 200px;
        opacity: 1;
    }

    .dropdown-submenu .submenu li {
        margin: 0;
        opacity: 0;
        transform: translateX(-8px);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .dropdown-submenu.active .submenu li {
        opacity: 1;
        transform: translateX(0);
    }

    .dropdown-submenu.active .submenu li:nth-child(1) { transition-delay: 0.08s; }
    .dropdown-submenu.active .submenu li:nth-child(2) { transition-delay: 0.14s; }
    .dropdown-submenu.active .submenu li:nth-child(3) { transition-delay: 0.20s; }

    .dropdown-submenu .submenu li a {
        display: block;
        color: #000 !important;
        padding: 10px 20px 10px 40px;
        font-size: 14px;
        font-weight: 400;
        text-decoration: none;
    }

    .menu-pop-theme-v8 .dropdown-submenu .submenu {
        padding: 0 12px;
        background: transparent !important;
    }

    .menu-pop-theme-v8 .dropdown-submenu .submenu li {
        margin: 0;
    }

    .menu-pop-theme-v8 .dropdown-submenu .submenu li a {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 10px 18px !important;
        border-radius: 0;
        overflow: hidden;
        color: #fff !important;
        box-shadow: none;
    }

    .menu-pop-theme-v8 .dropdown-submenu .submenu li:first-child a {
        border-radius: 6px 6px 0 0;
    }

    .menu-pop-theme-v8 .dropdown-submenu .submenu li:last-child a {
        border-radius: 0 0 6px 6px;
    }

    .menu-pop-theme-v8 .dropdown-submenu .submenu li a span {
        color: #fff !important;
        font-weight: 600;
        position: relative;
        z-index: 1;
    }

    .menu-pop-theme-v8 .dropdown-submenu .submenu li:nth-child(1) a {
        background: linear-gradient(90deg, #1D1E20 38.1%, rgba(29, 30, 32, 0) 67.27%), url('https://digivospaces.b-cdn.net/UniPlay/Statics/calc-winrate-bg.png') lightgray 77.555px -102.052px / 81.902% 499.306% no-repeat !important;
    }

    .menu-pop-theme-v8 .dropdown-submenu .submenu li:nth-child(1) a span {
        color: #fff !important;
    }

    .menu-pop-theme-v8 .dropdown-submenu .submenu li:nth-child(2) a {
        background: linear-gradient(90deg, #1D1E20 38.1%, rgba(29, 30, 32, 0) 67.27%), url('https://digivospaces.b-cdn.net/UniPlay/Statics/calc-magic-wheel.png') lightgray 60.142px -56.844px / 100% 327.375% no-repeat !important;
    }

    .menu-pop-theme-v8 .dropdown-submenu .submenu li:nth-child(3) a {
        background: linear-gradient(90deg, #1D1E20 38.1%, rgba(29, 30, 32, 0) 67.27%), url('https://digivospaces.b-cdn.net/UniPlay/Statics/calc-zodiak-bg.png') lightgray 77.555px -44.052px / 75.902% 448.306% no-repeat !important;
    }

    .menu-pop-theme-v8 .dropdown-submenu .submenu li a:hover {
        color: #fff !important;
        filter: brightness(1.08);
    }

    .menu-pop-theme-v8 .dropdown-submenu .submenu li a:hover span {
        color: #fff !important;
    }

    .menu-pop-theme-v8 .dropdown-submenu .submenu li:nth-child(1) a:hover {
        background: linear-gradient(90deg, var(--tmv8-primary, #e6710f) 38.1%, rgba(230, 113, 15, 0) 67.27%), url('https://digivospaces.b-cdn.net/UniPlay/Statics/calc-winrate-bg.png') lightgray 77.555px -102.052px / 81.902% 499.306% no-repeat !important;
    }

    .menu-pop-theme-v8 .dropdown-submenu .submenu li:nth-child(2) a:hover {
        background: linear-gradient(90deg, var(--tmv8-primary, #e6710f) 38.1%, rgba(230, 113, 15, 0) 67.27%), url('https://digivospaces.b-cdn.net/UniPlay/Statics/calc-magic-wheel.png') lightgray 60.142px -56.844px / 100% 327.375% no-repeat !important;
    }

    .menu-pop-theme-v8 .dropdown-submenu .submenu li:nth-child(3) a:hover {
        background: linear-gradient(90deg, var(--tmv8-primary, #e6710f) 38.1%, rgba(230, 113, 15, 0) 67.27%), url('https://digivospaces.b-cdn.net/UniPlay/Statics/calc-zodiak-bg.png') lightgray 77.555px -44.052px / 75.902% 448.306% no-repeat !important;
    }

    .menu-pop-theme-v8 .dropdown-submenu.dropdown-calculator-mobile .submenu {
        padding: 0;
    }

    .menu-pop-theme-v8 .dropdown-submenu.dropdown-calculator-mobile .submenu li a,
    .menu-pop-theme-v8 .dropdown-submenu.dropdown-calculator-mobile .submenu li:nth-child(1) a,
    .menu-pop-theme-v8 .dropdown-submenu.dropdown-calculator-mobile .submenu li:nth-child(2) a,
    .menu-pop-theme-v8 .dropdown-submenu.dropdown-calculator-mobile .submenu li:nth-child(3) a,
    .menu-pop-theme-v8 .dropdown-submenu.dropdown-calculator-mobile .submenu li a:hover,
    .menu-pop-theme-v8 .dropdown-submenu.dropdown-calculator-mobile .submenu li:nth-child(1) a:hover,
    .menu-pop-theme-v8 .dropdown-submenu.dropdown-calculator-mobile .submenu li:nth-child(2) a:hover,
    .menu-pop-theme-v8 .dropdown-submenu.dropdown-calculator-mobile .submenu li:nth-child(3) a:hover {
        min-height: auto;
        padding: 9px 20px 9px 40px !important;
        background: transparent !important;
        border-radius: 0;
        box-shadow: none;
        filter: none;
    }

    .menu-pop-theme-v8 .dropdown-submenu.dropdown-calculator-mobile .submenu li a span {
        color: #000 !important;
        font-weight: 500;
    }

    .menu-pop-theme-v8 .dropdown-submenu.dropdown-calculator-mobile .submenu li a:hover span,
    .menu-pop-theme-v8 .dropdown-submenu.dropdown-calculator-mobile .submenu li a:focus span,
    .menu-pop-theme-v8 .dropdown-submenu.dropdown-calculator-mobile .submenu li a:active span {
        color: var(--tmv8-primary, #e6710f) !important;
    }

    body.drawer-body-lock:has(.sticky-header) .sticky-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000030 !important;
    }

    body.drawer-body-lock .menu-pop-theme-v8,
    body.drawer-body-lock .menu-pop-theme-v8.drawer-open {
        top: 0 !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        z-index: 1000020 !important;
    }

    body.drawer-body-lock:has(.sticky-header) .menu-pop-theme-v8,
    body.drawer-body-lock:has(.sticky-header) .menu-pop-theme-v8.drawer-open {
        top: 58px !important;
        height: calc(100dvh - 58px) !important;
        max-height: calc(100dvh - 58px) !important;
    }

    body.drawer-body-lock .menu-drawer-overlay {
        top: 0 !important;
        height: 100dvh !important;
        z-index: 1000010 !important;
    }

    body.drawer-body-lock:has(.sticky-header) .menu-drawer-overlay {
        top: 58px !important;
        height: calc(100dvh - 58px) !important;
    }
}

/* ========================================
   FLOATING WHATSAPP BUTTON
   ======================================== */

.btn-need-support {
    display: inline-flex;
    padding: 12px;
    width: 56px;
    height: 56px;
    justify-content: center;
    align-items: center;
    border-radius: 41px;
    background: #0DC152;
    box-shadow: 0px 4px 10px 0px rgba(99, 99, 99, 0.30), 0px 4px 4.9px 0px rgba(158, 158, 158, 0.30) !important;
    font-size: 32px;
    color: #fff !important;
    position: fixed;
    z-index: 99;
    bottom: 40px;
    right: 20px;
    text-decoration: none;
}

.floating-actions-buttons.hidepilihpaket .btn-need-support {
    bottom: 30px;
}

@media (max-width: 600px) {
    .btn-need-support {
        bottom: 20px;
        right: 20px;
    }
}


/* ========================================
   PRODUCT GRID — GAME / VOUCHER / PPOB
   (dipindahkan dari inline <style> di box_index)
   ======================================== */

.list-grid-games .grid-list {
    overflow: visible;
    padding-top: 10px;
}

.list-grid-games .grid-list a img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: unset;
    object-fit: cover;
}

/* clip-path digunakan sebagai pengganti height animation (GPU-accelerated).
   Nilai 58px = tinggi label desktop, 52px = tinggi label mobile. */
.list-grid-games .grid-list a.tmv8-product-card img {
    height: 100% !important;
    clip-path: inset(0 0 58px round 14px 14px 0 0);
}

.list-grid-games .grid-list a.tmv8-product-card:hover img {
    height: 100% !important;
    clip-path: inset(0 0 0 round 14px);
}

@media screen and (max-width: 600px) {
    .list-grid-games .grid-list a.tmv8-product-card img {
        height: 100% !important;
        clip-path: inset(0 0 52px round 14px 14px 0 0);
    }
}

/* Desktop: non-product-card items (legacy games list) */
@media (min-width: 769px) {
    .list-grid-games .grid-list a:not(.tmv8-product-card) {
        display: grid !important;
        width: 100% !important;
        grid-template-columns: initial !important;
        height: 100% !important;
        margin: 0 0 15px 0 !important;
    }
}


/* ========================================
   POPUP MODAL — CUSTOM POPUP V8
   (dipindahkan dari inline <style> di box_index)
   ======================================== */

.btn-close-custom {
    background: var(--tmv8-primary, #cf5f00);
    color: #fff !important;
    width: 48px;
    height: 48px;
}

.btn-close-custom:hover {
    background: var(--tmv8-primary-hover, #b24e00);
    cursor: pointer;
}

.btn-close-custom i,
.btn-close-custom svg,
.btn-close-custom svg * {
    color: #fff !important;
    fill: #fff !important;
    stroke: #fff !important;
}

.modal-dialog {
    max-width: 800px;
    max-height: 640px;
}

.popup-img {
    border-radius: 20px;
    aspect-ratio: 5/4;
    object-fit: cover;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.popup-img.desktop-only { display: block !important; }
.popup-img.mobile-only  { display: none !important; }

@media (max-width: 768px) {
    .popup-img.desktop-only { display: none !important; }
    .popup-img.mobile-only  { display: block !important; }

    .popup-img {
        aspect-ratio: 4/5;
    }

    .btn-close-custom {
        bottom: -80px;
        left: 50%;
        transform: translateX(-50%);
        top: unset;
        right: unset;
    }

    #popupModal {
        padding-bottom: 100px;
    }
}

@media (min-width: 769px) {
    .btn-close-custom {
        top: -20px;
        right: -20px;
        bottom: unset;
        left: unset;
    }
}

/* Animasi Modal */
.modal.zoom-in .modal-dialog {
    transform: scale(0.6);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
        opacity 0.5s ease-in-out;
}

.modal.zoom-in.show .modal-dialog {
    transform: scale(1);
    opacity: 1;
}

.modal.zoom-out .modal-dialog {
    transform: scale(0);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
        opacity 0.5s ease-in-out;
}

.modal {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background-color 0.5s ease, backdrop-filter 0.5s ease;
}

.modal.show {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

@keyframes shake {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-10px); }
    40%  { transform: translateX(10px); }
    60%  { transform: translateX(-10px); }
    80%  { transform: translateX(10px); }
    100% { transform: translateX(0); }
}

.modal.shake .modal-dialog {
    animation: shake 0.5s;
}

/* Detail page: keep rating stars consistently yellow and legacy links readable. */
.sidebar-info-product-v1 .fa-star,
.sidebar-info-product-v1 .fa-star.text-orange {
    color: #ffc107 !important;
}

.entitas-description a,
.help-footer p a,
.widget-sidebar p a,
.ajakan-reseller .subsubheading a,
.ajakan-affiliate .subsubheading a {
    color: #0b64c0 !important;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.entitas-description a:hover,
.help-footer p a:hover,
.widget-sidebar p a:hover,
.ajakan-reseller .subsubheading a:hover,
.ajakan-affiliate .subsubheading a:hover {
    color: #084f99 !important;
}

/* Theme v8 product-card polish: stable mobile height, no hover gap, smoother animation. */
.list-grid-games .grid-list a.tmv8-product-card::before {
    inset: 0;
}

.list-grid-games .grid-list a.tmv8-product-card img,
.list-grid-games .grid-list a.tmv8-product-card:hover img {
    clip-path: none !important;
}

@media screen and (max-width: 600px) {
    .list-grid-games .grid-list a.tmv8-product-card {
        height: 230px !important;
        aspect-ratio: auto;
        grid-template-rows: minmax(0, 1fr) 64px !important;
    }
}

/* Theme v8 product-card text plate and hover glass state. */
.list-grid-games .grid-list a.tmv8-product-card {
    background: var(--tmv8-pbox-bg) !important;
}

.list-grid-games .grid-list a.tmv8-product-card::after {
    background: rgba(8, 12, 18, 0.26);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.list-grid-games .grid-list a.tmv8-product-card p {
    isolation: isolate;
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 64px !important;
    width: 100%;
    padding: 8px 12px !important;
    background: rgb(47, 65, 88);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0 0 14px 14px;
    transition:
        background 0.28s ease,
        backdrop-filter 0.28s ease,
        -webkit-backdrop-filter 0.28s ease,
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.list-grid-games .grid-list a.tmv8-product-card p span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-height: 2.3em;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
}

.list-grid-games .grid-list a.tmv8-product-card p::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--tmv8-primary);
    transform: translateY(105%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.list-grid-games .grid-list a.tmv8-product-card:hover img {
    transform: scale(1.08);
}

.list-grid-games .grid-list a.tmv8-product-card:hover p {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: translateY(0);
}

.list-grid-games .grid-list a.tmv8-product-card:hover p::before {
    transform: translateY(0);
}

@media screen and (max-width: 600px) {
    .list-grid-games .grid-list a.tmv8-product-card {
        height: 230px !important;
        aspect-ratio: auto;
    }

    .list-grid-games .grid-list a.tmv8-product-card p {
        font-size: 17px !important;
        height: 64px;
        min-height: 64px !important;
        padding: 0 10px !important;
        overflow: hidden;
        text-align: center;
    }
}