/* =====================================================
   SMITACS PPOB SELF SERVICE
   CSS KHUSUS DASHBOARD MANDIRI
   ===================================================== */

#smitacs-self-service {
    --ss-blue: #1769e0;
    --ss-ink: #14284d;
    --ss-muted: #718198;
    --ss-line: #dce6f3;

    box-sizing: border-box;
    width: 100%;
    height: calc(100vh - 32px);
    min-height: 620px;
    max-height: 1000px;

    padding: 14px;

    background: #edf3fb;
    color: var(--ss-ink);

    display: flex;
    flex-direction: column;
    gap: 12px;

    overflow: hidden;

    font-family: inherit;
}

#smitacs-self-service * {
    box-sizing: border-box;
}

/* =====================================================
   HEADER
   ===================================================== */

#smitacs-self-service .ss-topbar {
    height: 64px;
    flex: none;

    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    align-items: center;
    gap: 14px;

    padding: 8px 14px;

    background: #fff;
    border: 1px solid var(--ss-line);
    border-radius: 12px;
}

/* BRAND */

#smitacs-self-service .ss-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

#smitacs-self-service .ss-mark {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    background: var(--ss-blue);
    color: #fff;

    border-radius: 9px;

    font-size: 23px;
}

#smitacs-self-service .ss-brand strong,
#smitacs-self-service .ss-brand small {
    display: block;
}

#smitacs-self-service .ss-brand strong {
    font-size: 15px;
}

#smitacs-self-service .ss-brand small {
    font-size: 11px;
    color: var(--ss-muted);
}

/* PROGRESS */

#smitacs-self-service .ss-progress {
    display: flex;
    justify-content: center;
    gap: 10px;
}

#smitacs-self-service .ss-progress span {
    padding: 8px 12px;

    border: 1px solid var(--ss-line);
    border-radius: 8px;

    font-size: 12px;
    color: var(--ss-muted);
    white-space: nowrap;
}

#smitacs-self-service .ss-progress .active {
    color: var(--ss-blue);
    font-weight: 700;
    background: #eff6ff;
}

/* CLOCK */

#smitacs-self-service .ss-now {
    text-align: right;
}

#smitacs-self-service .ss-now span,
#smitacs-self-service .ss-now strong {
    display: block;
}

#smitacs-self-service .ss-now span {
    font-size: 10px;
    color: var(--ss-muted);
}

#smitacs-self-service .ss-now strong {
    font-size: 18px;
    color: var(--ss-blue);
}

/* =====================================================
   WORKSPACE
   ===================================================== */

#smitacs-self-service .ss-workspace {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 12px;

    flex: 1;
    min-height: 0;
}

/* =====================================================
   SIDEBAR
   ===================================================== */

#smitacs-self-service .ss-nav {
    display: flex;
    flex-direction: column;
    gap: 7px;

    min-height: 0;
}

#smitacs-self-service .ss-nav-item {
    width: 100%;
    min-height: 52px;

    padding: 8px 12px;

    text-align: left;

    border: 1px solid var(--ss-line);
    border-radius: 10px;

    background: #fff;
    color: var(--ss-ink);

    font-weight: 600;
    cursor: pointer;
}

#smitacs-self-service .ss-nav-item:before {
    content: '▣';

    display: inline-block;
    width: 28px;

    color: var(--ss-blue);
}

#smitacs-self-service .ss-nav-item:hover {
    border-color: var(--ss-blue);
}

#smitacs-self-service .ss-nav-item.active {
    background: var(--ss-blue);
    color: #fff;
    border-color: var(--ss-blue);
}

#smitacs-self-service .ss-nav-item.active:before {
    color: #fff;
}

/* =====================================================
   AREA FORM PPOB
   ===================================================== */

#smitacs-self-service .ss-legacy-content {
    min-width: 0;
    min-height: 0;

    overflow: auto;

    background: #fff;
    border: 1px solid var(--ss-line);
    border-radius: 12px;

    padding: 14px;
}

/*
 * Penyesuaian wrapper lama hanya berlaku
 * di dalam dashboard Self-Service.
 */

#smitacs-self-service .ppob-scope,
#smitacs-self-service .ppob-frontend,
#smitacs-self-service .ppob-container {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    background: transparent;
    box-shadow: none;
}

/* Sembunyikan judul form lama di dashboard */

#smitacs-self-service .ppob-frontend > h1 {
    display: none;
}

/* Kartu form */

#smitacs-self-service .ppob-form-card {
    margin: 0 0 12px;
    padding: 14px;

    border: 1px solid var(--ss-line);
    border-radius: 10px;

    box-shadow: none;
}

/* Grid kategori dan produk */

#smitacs-self-service .ppob-category-grid,
#smitacs-self-service .ppob-product-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(130px, 1fr)
    );

    gap: 8px;
}

/* Item kategori dan produk */

#smitacs-self-service .ppob-category-item,
#smitacs-self-service .ppob-product-item {
    padding: 10px;

    border: 1px solid var(--ss-line);
    border-radius: 9px;

    background: #fff;
}

/* Input */

#smitacs-self-service input[type="text"],
#smitacs-self-service input[type="number"],
#smitacs-self-service select {
    max-width: 100%;
    min-height: 42px;

    padding: 8px;

    border: 1px solid var(--ss-line);
    border-radius: 8px;
}

/* Tombol */

#smitacs-self-service button,
#smitacs-self-service .button {
    border-radius: 8px;
}

/* =====================================================
   FOOTER
   ===================================================== */

#smitacs-self-service .ss-bottom {
    height: 54px;
    flex: none;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;

    background: #fff;
    border: 1px solid var(--ss-line);
    border-radius: 11px;
}

#smitacs-self-service .ss-bottom > span {
    text-align: center;
    font-size: 12px;
}

#smitacs-self-service .ss-bottom b,
#smitacs-self-service .ss-bottom small {
    display: block;
}

#smitacs-self-service .ss-bottom small {
    font-size: 10px;
    color: var(--ss-muted);
}

/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 900px) {

    #smitacs-self-service {
        height: auto;
        max-height: none;
        min-height: 100vh;
        overflow: visible;
    }

    #smitacs-self-service .ss-topbar {
        height: auto;
        grid-template-columns: 1fr;
    }

    #smitacs-self-service .ss-now {
        text-align: left;
    }

    #smitacs-self-service .ss-workspace {
        grid-template-columns: 1fr;
    }

    #smitacs-self-service .ss-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #smitacs-self-service .ss-bottom {
        height: auto;
        min-height: 54px;

        padding: 10px 0;

        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 560px) {

    #smitacs-self-service .ss-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #smitacs-self-service .ss-progress {
        flex-wrap: wrap;
    }

    #smitacs-self-service .ss-bottom {
        grid-template-columns: 1fr 1fr;
    }
}



/* =========================================
   SELF-SERVICE RESPONSIVE FIT
   ========================================= */

/* Dashboard mengikuti lebar container WordPress */
#smitacs-self-service.ppob-self-service-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;

    height: calc(100vh - 180px);
    min-height: 600px;

    margin: 0 auto !important;
    padding: 12px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    overflow: hidden;
    border-radius: 12px;
}

/* Header tidak ikut menyusut */
#smitacs-self-service .ss-topbar {
    width: 100%;
    max-width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Workspace menyesuaikan sisa ruang */
#smitacs-self-service .ss-workspace {
    display: flex;
    flex: 1;
    min-width: 0;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* Sidebar tidak melebar */
#smitacs-self-service .ss-nav {
    flex: 0 0 210px;
    width: 210px;
    min-width: 0;
    box-sizing: border-box;
}

/* Konten utama mengambil sisa lebar */
#smitacs-self-service .ss-legacy-content {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    max-width: 100%;
    min-height: 0;

    overflow-x: hidden;
    overflow-y: auto;

    box-sizing: border-box;
}

/* Form lama tidak boleh memaksakan lebar */
#smitacs-self-service .ppob-frontend,
#smitacs-self-service .ppob-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

/* Elemen di dalam form menyesuaikan ruang */
#smitacs-self-service .ppob-legacy-content *,
#smitacs-self-service .ss-legacy-content * {
    box-sizing: border-box;
}

/* Footer tetap di bawah */
#smitacs-self-service .ss-bottom {
    width: 100%;
    max-width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Tablet */
@media (max-width: 900px) {
    #smitacs-self-service.ppob-self-service-shell {
        height: calc(100vh - 140px);
        min-height: 550px;
        padding: 8px;
    }

    #smitacs-self-service .ss-nav {
        flex-basis: 160px;
        width: 160px;
    }
}

/* Ponsel */
@media (max-width: 600px) {
    #smitacs-self-service.ppob-self-service-shell {
        height: auto;
        min-height: 100vh;
        padding: 6px;
        overflow: visible;
    }

    #smitacs-self-service .ss-workspace {
        flex-direction: column;
        overflow: visible;
    }

    #smitacs-self-service .ss-nav {
        width: 100%;
        flex: none;
    }

    #smitacs-self-service .ss-legacy-content {
        width: 100%;
        overflow: visible;
    }

}


/* =========================================
   SELF-SERVICE: QRIS ONLY
   ========================================= */

/* Sembunyikan tombol pembelian reguler pada pulsa/data */
#smitacs-self-service button[name="ppob_payment_submit_pulsa"] {
    display: none !important;
}

/* Sembunyikan tombol Bayar Sekarang reguler */
#smitacs-self-service .ppob-pay-now {
    display: none !important;
}

/* Sembunyikan tombol konfirmasi reguler jika menggunakan class ini */
#smitacs-self-service button.ppob-confirm-payment {
    display: none !important;
}

/* Tampilkan tombol QRIS dengan jelas */
#smitacs-self-service button.ppob-pay-qris {
    display: block !important;
    width: 100%;
    min-height: 50px;
    margin-top: 12px;
    background: #1769e0 !important;
    border: 0 !important;
    border-radius: 9px;
    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

/* Efek saat diarahkan ke tombol QRIS */
#smitacs-self-service button.ppob-pay-qris:hover {
    background: #0d55bd !important;
}


/* =========================================
   MODE KIOSK - DETEKSI SHORTCODE OTOMATIS
   ========================================= */

/* Sembunyikan toolbar WordPress */
body.ppob-self-service-page #wpadminbar {
    display: none !important;
}

/* Hilangkan ruang toolbar */
html:has(body.ppob-self-service-page) {
    margin-top: 0 !important;
}

/* Sembunyikan header website */
body.ppob-self-service-page .site-header,
body.ppob-self-service-page header.site-header,
body.ppob-self-service-page .main-header,
body.ppob-self-service-page .elementor-location-header {
    display: none !important;
}

/* Sembunyikan judul halaman */
body.ppob-self-service-page .entry-header,
body.ppob-self-service-page .page-header,
body.ppob-self-service-page .wp-block-post-title,
body.ppob-self-service-page .entry-title {
    display: none !important;
}

/* Hilangkan jarak atas konten */
body.ppob-self-service-page .site-content,
body.ppob-self-service-page .content-area,
body.ppob-self-service-page .site-main,
body.ppob-self-service-page .entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* Hilangkan elemen tema WordPress khusus halaman Self-Service */
body.ppob-self-service-page .entry-header,
body.ppob-self-service-page .page-header,
body.ppob-self-service-page .entry-title,
body.ppob-self-service-page .wp-block-post-title,
body.ppob-self-service-page .elementor-widget-theme-post-title {
    display: none !important;
}

/* Hilangkan header navigasi website */
body.ppob-self-service-page .site-header,
body.ppob-self-service-page .main-header,
body.ppob-self-service-page .elementor-location-header {
    display: none !important;
}

/* Hilangkan toolbar admin WordPress */
body.ppob-self-service-page #wpadminbar {
    display: none !important;
}

/* Hilangkan ruang kosong bekas toolbar */
html:has(body.ppob-self-service-page) {
    margin-top: 0 !important;
}

/* Hilangkan jarak atas konten tema */
body.ppob-self-service-page .site-content,
body.ppob-self-service-page .site-main,
body.ppob-self-service-page .entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =====================================================
   SELF-SERVICE - LAYOUT TIGA KOLOM
   ===================================================== */

/* Form utama */
#smitacs-self-service .ss-form-layout {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Pembagian tiga kolom */
#smitacs-self-service .ss-form-grid {
    display: grid;
    grid-template-columns:
        minmax(150px, 0.95fr)
        minmax(220px, 1.35fr)
        minmax(190px, 1fr);
    gap: 12px;
    align-items: start;
    width: 100%;
    min-width: 0;
}

/* Kartu setiap kolom */
#smitacs-self-service .ss-form-column {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--ss-line);
    border-radius: 10px;
    background: #fff;
}

/* Judul kolom */
#smitacs-self-service .ss-form-column > h3 {
    margin: 0 0 12px;
    padding: 0;
    color: var(--ss-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

/* Konten kolom */
#smitacs-self-service .ss-column-content {
    min-width: 0;
}

/* Kategori disusun vertikal */
#smitacs-self-service .ss-category-column .ppob-category-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Item kategori */
#smitacs-self-service .ss-category-column .ppob-category-item {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
}

/* Jarak antar elemen data */
#smitacs-self-service .ss-data-column p {
    margin: 0 0 10px;
}

/* Input menyesuaikan kolom */
#smitacs-self-service .ss-data-column input[type="text"],
#smitacs-self-service .ss-data-column input[type="number"],
#smitacs-self-service .ss-data-column input[type="email"],
#smitacs-self-service .ss-data-column select {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Kartu pembayaran */
#smitacs-self-service .ss-payment-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-height: 180px;
    padding: 18px 12px;
    border: 1px solid var(--ss-line);
    border-radius: 9px;
    background: #f7f9fc;
    text-align: center;
}

/* Ikon QRIS */
#smitacs-self-service .ss-payment-icon {
    color: #16a34a;
    font-size: 32px;
    line-height: 1;
}

/* Keterangan pembayaran */
#smitacs-self-service .ss-payment-caption {
    color: var(--ss-muted);
    font-size: 12px;
    line-height: 1.5;
}

/* Tombol QRIS asli */
#smitacs-self-service .ss-payment-column button.ppob-pay-qris {
    display: block !important;
    width: 100%;
    min-height: 46px;
    margin: 12px 0 0;
    padding: 10px;
    background: var(--ss-blue) !important;
    border: 0 !important;
    border-radius: 9px;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

/* Hover tombol QRIS */
#smitacs-self-service .ss-payment-column button.ppob-pay-qris:hover {
    background: #0d55bd !important;
}

/* Pastikan elemen tidak melebar keluar kolom */
#smitacs-self-service .ss-form-grid *,
#smitacs-self-service .ss-form-column * {
    max-width: 100%;
    box-sizing: border-box;
}

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

/* Laptop kecil dan tablet */
@media (max-width: 1100px) {

    #smitacs-self-service .ss-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

}

/* Ponsel */
@media (max-width: 600px) {

    #smitacs-self-service .ss-form-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    #smitacs-self-service .ss-form-column {
        padding: 10px;
    }

}


/* =====================================================
   FIX SCROLL KATEGORI - TINGGI GRID PASTI
   ===================================================== */

/* Area utama dashboard */
#smitacs-self-service .ss-workspace {
    min-height: 0;
    overflow: hidden;
}

/* Area form tidak ikut bergulir */
#smitacs-self-service .ss-legacy-content {
    min-height: 0;
    overflow: hidden !important;
}

/* Form hasil penataan tiga kolom */
#smitacs-self-service .ss-form-layout {
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
}

/* KUNCI: tinggi grid ditentukan langsung */
#smitacs-self-service .ss-form-grid {
    display: grid !important;

    grid-template-columns:
        minmax(150px, 0.95fr)
        minmax(220px, 1.35fr)
        minmax(190px, 1fr);

    height: calc(100vh - 370px) !important;
    min-height: 300px;
    max-height: calc(100vh - 250px);

    align-items: stretch;
    overflow: hidden;
}

/* Semua kartu kolom mengikuti tinggi grid */
#smitacs-self-service .ss-form-column {
    display: flex;
    flex-direction: column;

    height: 100%;
    min-height: 0;
    min-width: 0;

    overflow: hidden;
}

/* Judul kolom tetap terlihat */
#smitacs-self-service .ss-form-column > h3 {
    flex: 0 0 auto;
}

/* SCROLL HANYA PADA DAFTAR KATEGORI */
#smitacs-self-service .ss-category-column .ss-column-content {
    display: block;

    flex: 1 1 0;
    height: 0;
    min-height: 0;

    overflow-x: hidden !important;
    overflow-y: scroll !important;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Daftar kategori mengikuti panjang isinya */
#smitacs-self-service .ss-category-column .ppob-category-grid {
    display: flex !important;
    flex-direction: column;

    height: auto !important;
    min-height: min-content;
    max-height: none !important;

    overflow: visible !important;
}

/* Kolom produk dan pembayaran tetap pada tempatnya */
#smitacs-self-service .ss-data-column,
#smitacs-self-service .ss-payment-column {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Scrollbar kategori */
#smitacs-self-service .ss-category-column
.ss-column-content::-webkit-scrollbar {
    width: 7px;
}

#smitacs-self-service .ss-category-column
.ss-column-content::-webkit-scrollbar-thumb {
    background: #b8c9df;
    border-radius: 10px;
}

/* Tablet dan ponsel */
@media (max-width: 1100px) {

    #smitacs-self-service .ss-legacy-content {
        overflow-y: auto !important;
    }

    #smitacs-self-service .ss-form-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);

        height: auto !important;
        max-height: none;
        overflow: visible;
    }

    #smitacs-self-service .ss-form-column {
        height: auto;
        overflow: visible;
    }

    #smitacs-self-service .ss-category-column
    .ss-column-content {
        height: auto;
        overflow: visible !important;
    }
}


/* =====================================================
   FINAL FIX: KUNCI SCROLL HALAMAN SELF SERVICE
   PC, LAPTOP, DAN TABLET
   ===================================================== */

@media (min-width: 768px) {

    /* 1. Kunci scroll browser */
    html:has(body.ppob-self-service-page) {
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    body.ppob-self-service-page {
        position: fixed !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    /* 2. Kunci seluruh pembungkus tema */
    body.ppob-self-service-page #page,
    body.ppob-self-service-page .site,
    body.ppob-self-service-page #content,
    body.ppob-self-service-page .site-content,
    body.ppob-self-service-page .content-area,
    body.ppob-self-service-page .site-main,
    body.ppob-self-service-page main,
    body.ppob-self-service-page article,
    body.ppob-self-service-page .entry-content {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;

        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;

        overflow: hidden !important;
    }

    /* 3. Dashboard menempel pada layar */
    #smitacs-self-service.ppob-self-service-shell {
        position: fixed !important;
        inset: 0 !important;

        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;

        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        overflow: hidden !important;

        overscroll-behavior: none !important;
        z-index: 99999;
    }

    /* 4. Area kerja tidak boleh menggeser halaman */
    #smitacs-self-service .ss-workspace,
    #smitacs-self-service .ss-legacy-content {
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* 5. Scroll kategori tetap aktif */
    #smitacs-self-service .ss-category-column .ss-column-content {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch;
    }

}