/* ============================================================
   MODERN CLEAN THEME (override) — Helpoin PPOB
   Dimuat SETELAH style.css. Font: Inter. Gaya: clean minimalis
   ala Tailwind / Next.js. Warna primer tetap pakai
   --yellow-primary / --light-yellow dari config administrator.
   ============================================================ */

:root {
    --radius-sm: 8px;
    --radius: 10px;
    --radius-md: 12px;
    --radius-lg: 14px;
    --border-color: #e4e7ec;
    --ring: 0 0 0 3px color-mix(in srgb, var(--yellow-primary) 22%, transparent);
    --shadow-soft: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-card: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
}

/* ---------- FONT & BASE ---------- */

html {
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

body,
h1, h2, h3, h4, h5, h6,
input, select, textarea, button,
.login-card .head, .login-card .option,
.virtualaccount .head, .virtualaccount ol li,
.notfound .head, .notfound .title,
.containerTitle .title, .containerTitle .subtitle,
.title-head, .title-card, .footer .logo .names {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body {
    background: #fafafa;
    letter-spacing: -0.011em;
    color: #101828;
    padding-top: 72px;
}

body.login {
    padding-top: 0;
}

[data-theme="dark"] body,
[data-theme="dark"] body.login {
    background: #0b0f1a;
}

a {
    color: var(--yellow-primary);
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}

::selection {
    background: var(--yellow-primary);
    color: #fff;
}

/* Scrollbar halus */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-thumb {
    background: #d0d5dd;
    border-radius: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------- NAVBAR ---------- */

.navbar {
    padding: 10px 32px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: none;
    border-bottom: 1px solid rgba(228, 231, 236, .9);
}

[data-theme="dark"] .navbar {
    background: rgba(11, 15, 26, .82);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.navbar.active {
    background: rgba(255, 255, 255, .95);
    box-shadow: none !important;
    padding: 10px 32px;
}

.navbar .navLeft .logoName {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #101828;
}

.navbar .navLeft .logoName,
.navigation {
    font-family: "Inter", sans-serif !important;
}

.navbar .navRight .navSearch input,
.navbar .navSearch input {
    height: 40px;
    border-radius: var(--radius-md);
    background: #f4f5f7;
    border: 1px solid transparent;
    color: #344054;
    font-size: 14px;
    font-weight: 400;
    padding: 0 40px 0 14px;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.navbar .navRight .navSearch input::placeholder {
    color: #98a2b3;
}

.navbar .navRight .navSearch input:focus {
    background: #fff;
    border-color: var(--yellow-primary);
    box-shadow: var(--ring);
    outline: none;
}

[data-theme="dark"] .navbar .navRight .navSearch input {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .1);
    color: #fff;
}

.navbar .navRight .navSearch i {
    color: #98a2b3;
}

/* Dropdown menu grid */
.dropdown .dropdownMenu {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
    transition: background .15s, border-color .15s;
}
.dropdown .dropdownMenu:hover {
    background: #f9fafb;
}

.dropdown-content {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: 0 12px 32px -8px rgba(16, 24, 40, .14);
    padding: 8px;
    min-width: 240px;
    transform: translateY(0);
}

.dropdown .dropdown-content::before {
    display: none;
}

.dropdown .dropdown-content a {
    border-radius: var(--radius);
    padding: 10px 12px;
}

.dropdown .dropdown-content a .containers .name {
    font-size: 14px;
    color: #344054;
}

.dropdown .dropdown-content a .containers i {
    color: var(--yellow-primary);
}

.dropdown .dropdown-content a:hover {
    background: #f9fafb;
}

/* Offcanvas sidebar */
.offcanvas {
    background-color: #fff;
}

[data-theme="dark"] .offcanvas {
    background-color: #0b0f1a;
}

.nav-item-link {
    border-radius: var(--radius);
    color: #344054;
    font-size: 15px;
}

.nav-item-link.active {
    border-left: 3px solid var(--yellow-primary);
    border-radius: 0 var(--radius) var(--radius) 0 !important;
    background: linear-gradient(90deg, color-mix(in srgb, var(--yellow-primary) 10%, transparent), transparent);
}

.nav-item-link:hover {
    background: #f4f5f7;
    color: #101828;
}
.nav-item-link:hover .title {
    color: #101828;
}

/* ---------- BUTTONS ---------- */

.btnYellowPrimary,
.btnYellowPrimary:hover {
    border-radius: var(--radius-md);
    height: 40px;
    font-weight: 600;
    font-size: 14px;
    padding: 0 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
    transition: filter .15s, transform .05s;
    letter-spacing: -0.01em;
}

.btnYellowPrimary:hover {
    filter: brightness(.96);
}
.btnYellowPrimary:active {
    transform: translateY(1px);
}

.btnYellowPrimary.md {
    height: 48px;
    font-size: 15px;
}

.btnYellowSecond {
    border-radius: var(--radius-md);
    height: 40px;
    font-weight: 600;
    font-size: 14px;
    padding: 0 20px;
    border: 1px solid var(--yellow-primary);
    background: transparent;
    color: var(--yellow-primary);
    transition: background .15s, color .15s;
}

.btnYellowSecond:hover {
    background: var(--yellow-primary);
    color: #fff;
    border: 1px solid var(--yellow-primary);
}

.btnGrey,
.btnGrey:hover {
    border-radius: var(--radius-md);
    background: #f4f5f7;
    border: 1px solid var(--border-color);
    color: #344054;
    box-shadow: none;
    backdrop-filter: none;
    font-weight: 600;
    font-size: 14px;
}

.btn-primary {
    border-radius: var(--radius-md) !important;
    font-weight: 600;
    box-shadow: none;
}

.btn-back {
    border-radius: var(--radius);
    width: 38px;
    height: 38px;
    font-size: 20px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- CARDS & SECTION ---------- */

.cards {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
    padding: 20px;
}

.cards-saldo {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
}

.containerTitle .title {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.25;
}

.containerTitle {
    margin-top: 2rem;
    margin-bottom: 2.5rem;
}

.containerTitle .subtitle {
    font-size: 15px;
    font-weight: 400;
    color: #667085;
}

.title-head {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.title-card {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.receipt-left,
.receipt-right {
    border-radius: var(--radius-lg);
}

@media (max-width: 920px) {
    .receipt-left { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
    .receipt-right { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
}

/* ---------- FORM / INPUT ---------- */

.floating-label-content .floating-input,
.floating-label-content .floating-input-id,
.floating-label-content .floating-select {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.floating-label-content .floating-input:focus,
.floating-label-content .floating-input-id:focus,
.floating-label-content .floating-select:focus {
    border-color: var(--yellow-primary);
    box-shadow: var(--ring);
}

.floating-label-content .floating-input:focus ~ .floating-label,
.floating-input:not(:placeholder-shown) ~ .floating-label {
    color: var(--yellow-primary);
}

.form-control,
.form-select {
    border-radius: var(--radius-md) !important;
    border-color: var(--border-color) !important;
    font-size: 14px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--yellow-primary) !important;
    box-shadow: var(--ring) !important;
}

/* ---------- TABS ---------- */

.navTabs .btnNavTabs {
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: #fff;
    padding: 8px 14px;
    transition: border-color .15s, background .15s;
}

.navTabs .btnNavTabs.active {
    border: 1px solid var(--yellow-primary);
    background: color-mix(in srgb, var(--yellow-primary) 10%, #fff);
}

.navTabs .btnNavTabs.active .text {
    color: var(--yellow-primary);
    font-weight: 600;
}

.navTabs .btnNavTabs.active .icon {
    color: #fff;
    background: var(--yellow-primary);
}

.hisTabs .btnHisTabs {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-soft);
}

/* ---------- PILIHAN NOMINAL / PAYMENT ---------- */

.containerChoice {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: #fff;
    box-shadow: var(--shadow-soft);
    transition: border-color .15s, box-shadow .15s;
}

.containerChoice:hover {
    border-color: #c7cdd6;
}

.nom-radio:checked:checked ~ .containerChoice {
    background: color-mix(in srgb, var(--yellow-primary) 8%, #fff);
    border: 1px solid var(--yellow-primary);
    box-shadow: var(--ring);
}

.choicePay {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: #fff;
    height: 56px;
    box-shadow: var(--shadow-soft);
    transition: border-color .15s, box-shadow .15s;
}

.pay-radio:checked:checked ~ .choicePay {
    background: color-mix(in srgb, var(--yellow-primary) 8%, #fff);
    border: 1px solid var(--yellow-primary);
    box-shadow: var(--ring);
}

/* ---------- ACCORDION ---------- */

.accordionHead {
    border-radius: var(--radius-md);
}

.accordionHead.is-open {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.accordionBody {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    border: 1px solid var(--border-color);
    border-top: none;
    box-shadow: var(--shadow-card);
}

.accordionHeadPay {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--yellow-primary) 8%, #fff);
}

.accordionHeadPay.is-open {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border-bottom-color: transparent;
}

.accordionBodyPay {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    border: 1px solid var(--border-color);
    border-top: none;
}

/* ---------- MODAL ---------- */

.modal-content {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 50px -12px rgba(16, 24, 40, .25);
    padding: 1.4rem 1.6rem;
}

.modal-header .modal-title {
    font-size: 17px;
    font-weight: 600;
    color: #101828;
    letter-spacing: -0.01em;
}

.btn-close {
    top: 1.1rem;
    right: 1.1rem;
}

/* ---------- FOOTER (minimalis) ---------- */

.footer {
    background-color: #0e1221;
    padding-top: 28px;
    padding-bottom: 8px;
}

[data-theme="dark"] .footer {
    background-color: #0b0f1a;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.footer .logo img {
    height: 30px;
}

.footer .logo .names {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.footer .desc {
    font-size: 13px;
    max-width: 520px;
    color: rgba(255, 255, 255, .55);
    margin: 6px 0 0;
}

.footer .bottomFoot {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 14px 0;
    margin-top: 20px;
}

.footer .bottomFoot .copyright .text,
.footer .bottomFoot .linkFoot a {
    font-size: 13px;
    color: rgba(255, 255, 255, .5);
}

.footer .bottomFoot .linkFoot a:hover {
    color: #fff;
}

/* ---------- MOBILE NAV ---------- */

.mobileNav {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px);
    box-shadow: 0 -1px 0 rgba(228, 231, 236, 1);
    height: 64px;
    padding: .6rem;
}

[data-theme="dark"] .mobileNav {
    background: rgba(11, 15, 26, .92);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, .08);
}

.mobileNav .containers i {
    font-size: 20px;
}

.mobileNav .containers .text {
    font-size: 11px;
    font-weight: 500;
}

.mobile-bottom-nav {
    height: 60px;
    box-shadow: none !important;
    border-top: 1px solid #e9ecef;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px);
}

.mobile-bottom-nav .nav-item span {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0;
}

/* ---------- FLOATING ---------- */

.floating-contact {
    border-radius: 999px;
    padding: 12px;
    box-shadow: 0 4px 16px rgba(16, 24, 40, .18);
}

.floating-btu {
    border-radius: 999px;
    box-shadow: var(--shadow-card);
}

/* ---------- TABLE / MISC ---------- */

.table > :not(caption) > * > * {
    padding: .75rem .75rem;
}

.badge {
    border-radius: 999px;
    font-weight: 500;
}

.containerTestimoni,
.containerNews {
    border-radius: 0;
}

.swiper-slide.flashSale,
.containerProduct .containers,
.containerPopuler .containers {
    border-radius: var(--radius-md);
}

.containerProduct .containers,
.containerPopuler .containers {
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-soft);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.containerProduct .containers:hover,
.containerPopuler .containers:hover {
    border-color: var(--yellow-primary);
    box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--yellow-primary) 35%, transparent);
}

.banner-img {
    border-radius: var(--radius-lg);
}

/* ---------- DARK MODE PENYESUAIAN ---------- */

[data-theme="dark"] .cards,
[data-theme="dark"] .containerChoice,
[data-theme="dark"] .choicePay,
[data-theme="dark"] .accordionBody,
[data-theme="dark"] .accordionBodyPay {
    background: #111726;
    border-color: rgba(255, 255, 255, .08);
}

[data-theme="dark"] .navTabs .btnNavTabs {
    background: #111726;
    border-color: rgba(255, 255, 255, .08);
}

[data-theme="dark"] .navbar .navRight .navSearch input:focus {
    background: #111726;
}

[data-theme="dark"] .btnGrey,
[data-theme="dark"] .btnGrey:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .1);
    color: #fff;
}

[data-theme="dark"] .floating-label-content .floating-input,
[data-theme="dark"] .floating-label-content .floating-input-id {
    background: #111726;
    color: #fff;
}

/* ---------- LOGIN CARD ---------- */

.login-card {
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(14px);
    background: rgba(255, 255, 255, .07);
}

/* ============================================================
   UPDATE 2 — Mobile nav polish + optimasi halaman utama
   ============================================================ */

/* ---------- MOBILE BOTTOM NAV (login-aware) ---------- */

.mobile-bottom-nav {
    height: 62px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
}

.mobile-bottom-nav .nav-item {
    position: relative;
    border-radius: 12px;
    transition: color .15s;
    -webkit-tap-highlight-color: transparent;
}

.mobile-bottom-nav .nav-item i {
    font-size: 1.25rem;
    margin-bottom: 2px;
    transition: transform .15s;
}

.mobile-bottom-nav .nav-item.active i {
    transform: translateY(-1px) scale(1.08);
}

.mobile-bottom-nav .nav-item.active::after {
    content: "";
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
}

/* Tap target nyaman di mobile */
.mobileNav .containers,
.nav-item-link {
    -webkit-tap-highlight-color: transparent;
}

/* ---------- STICKY TABS & SEARCH ---------- */

.sticky-tabs {
    top: 64px;
    box-shadow: none;
    border-bottom: 1px solid rgba(228, 231, 236, .8);
}

/* ---------- OPTIMASI RENDER HALAMAN UTAMA ---------- */

/* Section di bawah lipatan tidak dirender sampai mendekati viewport */
.containerTestimoni,
.containerNews,
.containerTracking,
.footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 420px;
}

/* Gambar produk jelas blur-nya lebih cepat */
.lazy-image {
    filter: blur(8px);
    transition: filter .4s ease;
}

/* Countdown flash sale: angka tabular biar tidak goyang */
.containerFlashSale .headerFS .containers .time .day,
.containerFlashSale .headerFS .containers .time .hours,
.containerFlashSale .headerFS .containers .time .minute,
.containerFlashSale .headerFS .containers .time .second,
.containerHis .contents .transaksi .containers .text .price,
.history .containerSaldo .price {
    font-variant-numeric: tabular-nums;
}

/* Flash sale timer jadi chip ringkas */
.containerFlashSale .headerFS .containers .time {
    gap: .4rem;
}

.containerFlashSale .headerFS .containers .time .day,
.containerFlashSale .headerFS .containers .time .hours,
.containerFlashSale .headerFS .containers .time .minute,
.containerFlashSale .headerFS .containers .time .second {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 2px 6px;
    margin: 0 10px 0 0;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    background: color-mix(in srgb, var(--yellow-primary) 12%, transparent);
}

.containerFlashSale .headerFS .containers .time .day::after,
.containerFlashSale .headerFS .containers .time .hours::after,
.containerFlashSale .headerFS .containers .time .minute::after,
.containerFlashSale .headerFS .containers .time .second::after {
    position: static;
    margin-left: 4px;
    font-size: 10px;
    font-weight: 500;
}

/* ---------- TOUCH / SCROLL DI SWIPER MOBILE ---------- */

.swiperFlashSale .swiper-wrapper {
    touch-action: pan-x pan-y;
}

/* Cegah pull-to-refresh mengganggu geser carousel di mobile */
@media (max-width: 800px) {
    .containerFlashSale,
    .swiper {
        overscroll-behavior-x: contain;
    }
}

/* ============================================================
   AUTH PAGES — konsisten dengan page utama (clean & modern)
   ============================================================ */

.logins-wrapper {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--yellow-primary) 7%, #fafafa),
        #f4f5f7) !important;
    background-image: none !important;
    min-height: 100vh;
    padding: 24px 16px;
}

.login-card {
    background: #fff !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px -12px rgba(16, 24, 40, .12);
    backdrop-filter: none;
    padding: 32px 28px !important;
}

.login-card .head {
    color: #101828 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    line-height: 1.35;
}

.login-card .option {
    color: #667085 !important;
    font-weight: 400 !important;
}

.login-card .floating-label-content .floating-input {
    background: #fff;
    border-color: var(--border-color);
}

.login-card .floating-label {
    color: #98a2b3;
}

.auth-logo {
    height: 44px;
    display: block;
    margin: 0 auto 6px;
}

.auth-subtitle {
    display: block;
    text-align: center;
    color: #98a2b3;
    font-size: 13px;
    margin-bottom: 18px;
}

.login-card .btnYellowPrimary.md {
    height: 48px;
    font-size: 15px;
    border-radius: var(--radius-md);
}

/* Back/close button tetap brand */
.logins-wrapper .btn-back {
    background: #fff !important;
    color: var(--yellow-primary) !important;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-soft);
}