/* =====================================================
   PPOB FRONTEND FINAL
===================================================== */

.ppob-container{

width:100%;
max-width:100%;

margin:0 auto;

padding:20px;

box-sizing:border-box;

font-family:
"Segoe UI",
sans-serif;

}

/* =====================================================
   FULL LAYOUT
===================================================== */

.ppob-full-layout{

position:relative;

left:50%;

transform:translateX(-50%);

width:100vw;

max-width:100vw;

padding:20px 60px;

box-sizing:border-box;

}

/* =====================================================
   MAIN CARD
===================================================== */

.ppob-full-layout .ppob-form-card{

width:100%;

background:#fff;

border-radius:24px;

padding:35px;

border:1px solid #ececec;

box-shadow:
0 8px 24px rgba(0,0,0,.05);

box-sizing:border-box;

}


/* =====================================================
   TAB WRAPPER
===================================================== */

.ppob-full-layout .ppob-tabs{

display:flex;

gap:12px;

margin-bottom:25px;

flex-wrap:wrap;

}

/* =====================================================
   TAB BUTTON
===================================================== */

.ppob-full-layout .ppob-tab{

display:flex;

align-items:center;
justify-content:center;

flex:1;

min-height:54px;

padding:14px 24px;

border-radius:14px;

background:#f1f5f9;

font-size:15px;

font-weight:700;

text-decoration:none;

color:#1d2327;

transition:.25s ease;

}

.ppob-full-layout .ppob-tab:hover{

background:#dbeafe;

}

.ppob-full-layout .ppob-tab.active{

background:#2271b1;

color:#fff;

box-shadow:
0 6px 16px rgba(34,113,177,.25);

}

/* =====================================================
   TAB CONTENT
===================================================== */

.ppob-full-layout .tab-content{

display:none;

width:100%;

}

.ppob-full-layout .tab-content.active{

display:block;

}

/* =====================================================
   TITLE
===================================================== */

.ppob-full-layout h2{

font-size:42px;

font-weight:700;

margin-bottom:30px;

line-height:1.3;

color:#111827;

}

/* =====================================================
   FORM
===================================================== */

.ppob-full-layout .ppob-form{

display:flex;

flex-direction:column;

gap:14px;

width:100%;

}

/* =====================================================
   LABEL
===================================================== */

.ppob-full-layout label{

font-size:15px;

font-weight:600;

color:#334155;

}

/* =====================================================
   INPUT
===================================================== */

.ppob-full-layout input,
.ppob-full-layout select{

width:100%;

height:56px;

padding:12px 18px;

border-radius:14px;

border:1px solid #dcdfe4;

font-size:15px;

background:#fff;

box-sizing:border-box;

transition:.2s ease;

}

.ppob-full-layout input:focus,
.ppob-full-layout select:focus{

border-color:#2271b1;

box-shadow:
0 0 0 3px rgba(34,113,177,.12);

outline:none;

}

/* =====================================================
   CATEGORY GRID
===================================================== */

.ppob-full-layout .ppob-category-grid,
.ppob-full-layout .ppob-product-grid{

display:grid;

grid-template-columns:
repeat(auto-fill,minmax(320px,1fr));

gap:24px;

width:100%;

margin-top:20px;

}

/* =====================================================
   CATEGORY CARD
===================================================== */

.ppob-full-layout .ppob-category-item,
.ppob-full-layout .ppob-product-item{

display:flex;

align-items:center;
justify-content:center;

min-height:95px;

padding:20px;

border-radius:18px;

border:1px solid #ddd;

background:#fff;

font-size:16px;

font-weight:600;

text-align:center;

cursor:pointer;

transition:.25s ease;

box-sizing:border-box;

}

.ppob-full-layout .ppob-category-item:hover,
.ppob-full-layout .ppob-product-item:hover{

border-color:#2271b1;

transform:translateY(-2px);

box-shadow:
0 10px 18px rgba(0,0,0,.05);

}

.ppob-full-layout .ppob-category-item input,
.ppob-full-layout .ppob-product-item input{

display:none;

}

.ppob-full-layout .ppob-category-item:has(input:checked),
.ppob-full-layout .ppob-product-item:has(input:checked){

border-color:#2271b1;

background:#eef6ff;

box-shadow:
0 0 0 2px rgba(34,113,177,.15);

}

/* =====================================================
   BUTTON
===================================================== */

.ppob-full-layout .ppob-pay-now,
.ppob-full-layout button{

width:100%;

height:58px;

border:none;

border-radius:16px;

background:
linear-gradient(
135deg,
#ff9800,
#ff5722
);

color:#fff;

font-size:16px;

font-weight:700;

cursor:pointer;

transition:.25s ease;

}

.ppob-full-layout .ppob-pay-now:hover,
.ppob-full-layout button:hover{

transform:translateY(-2px);

box-shadow:
0 10px 20px rgba(255,87,34,.25);

}

/* =====================================================
   EMPTY PRODUCT
===================================================== */

.ppob-empty-product,
.ppob-loading{

padding:20px;

border:1px dashed #ccc;

border-radius:14px;

background:#fafafa;

text-align:center;

font-size:14px;

color:#555;

}

/* =====================================================
   HISTORY TABLE
===================================================== */

.ppob-history-wrapper{

position:relative;

left:50%;

transform:translateX(-50%);

width:100vw;

max-width:100vw;

margin-top:35px;

padding:35px 60px;

background:#fff;

border-radius:24px;

border:1px solid #ececec;

box-shadow:0 8px 24px rgba(0,0,0,.05);

box-sizing:border-box;

overflow-x:auto;

-webkit-overflow-scrolling:touch;

}

.ppob-history-table{

width:100%;

min-width:1100px;

border-collapse:separate;

border-spacing:0;

background:#fff;

table-layout:auto;

}

.ppob-history-table thead th{

background:#2271b1;

color:#fff;

padding:16px;

font-size:14px;

font-weight:700;

text-align:left;

white-space:nowrap;

border-bottom:1px solid #135e96;

}

.ppob-history-table thead th:first-child{

border-top-left-radius:18px;

}

.ppob-history-table thead th:last-child{

border-top-right-radius:18px;

}

.ppob-history-table tbody td{

padding:28px 16px;

font-size:14px;

vertical-align:middle;

line-height:1.6;

border-bottom:1px solid #eef2f7;

white-space:nowrap;

background:transparent;

}

.ppob-history-table tbody tr:hover{

background:#f6f7f7;

}

.ppob-history-table tbody tr{

transition:.2s ease;

}

.ppob-history-table tbody tr:nth-child(even){

background:#f6f7f7;

}

.ppob-history-table tbody tr{

height:88px;
}

.ppob-history-table button:hover,
.ppob-history-table .button:hover{

background:#1d4ed8;

transform:translateY(-1px);

}

.ppob-history-table button,
.ppob-history-table .button{

background:#2563eb;

color:#fff;

border:none;

padding:10px 16px;

border-radius:6px;

border:1px solid #135e96;

font-size:13px;

font-weight:600;

min-height:auto;

height:auto;

width:auto;

cursor:pointer;

}

@media(max-width:768px){

.ppob-history-wrapper{

padding:15px 20px;

}

.ppob-history-table{

min-width:950px;

}

.ppob-history-table th,
.ppob-history-table td{

padding:10px;

font-size:12px;

}


.ppob-history-table{

overflow:hidden;

border-radius:18px;
}

}

@media(max-width:768px){

.ppob-full-layout{

padding:12px;

}

.ppob-full-layout .ppob-form-card{

padding:14px;

}

.ppob-full-layout h2{

font-size:28px;
line-height:1.2;

}

/* GRID MOBILE */

.ppob-full-layout .ppob-category-grid,
.ppob-full-layout .ppob-product-grid{

grid-template-columns:
repeat(2,minmax(0,1fr));

gap:10px;

}

/* CARD MOBILE */

.ppob-full-layout .ppob-category-item,
.ppob-full-layout .ppob-product-item{

min-height:58px;

padding:10px;

font-size:13px;

border-radius:12px;

}



}

#ppobResultModal{

    position:fixed !important;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.55);

    z-index:999999;

}

#ppobResultModal .ppob-modal-box{

    background:#fff;

    width:95%;

    max-width:520px;

    border-radius:12px;

    padding:25px;

}

/* =========================================
   TOMBOL DAN PILIHAN PEMBAYARAN PPOB
========================================= */

.ppob-scope .ppob-payment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 22px;
}

.ppob-scope .ppob-payment-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 18px;
    margin: 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    white-space: normal;
}

/* Bayar menggunakan saldo / Bayar Sekarang */
.ppob-scope .ppob-payment-actions .ppob-pay-now {
    background: #2271b1;
    border: 1px solid #2271b1;
    color: #fff;
}

/* Bayar QRIS */
.ppob-scope .ppob-payment-actions .ppob-pay-qris {
    background: #fff;
    border: 1px solid #198754;
    color: #198754;
}

/* Virtual Account */
.ppob-scope .ppob-payment-actions .ppob-pay-va {
    background: #fff;
    border: 1px solid #0d6efd;
    color: #0d6efd;
}

/* Retail */
.ppob-scope .ppob-payment-actions .ppob-pay-retail {
    background: #fff;
    border: 1px solid #d97706;
    color: #b45309;
}

/* Panel pilihan bank dan gerai */
.ppob-scope .ppob-payment-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 18px 0;
}

.ppob-scope .ppob-payment-channels p {
    flex: 1 1 220px;
    margin: 0;
}

.ppob-scope .ppob-payment-channels label {
    display: block;
    margin-bottom: 7px;
    font-weight: 600;
}

.ppob-scope .ppob-payment-channels select {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #ccd0d4;
    border-radius: 8px;
    background: #fff;
}

/* Jangan tampilkan panel yang tersembunyi */
.ppob-scope .ppob-payment-channels[hidden] {
    display: none !important;
}

/* Tampilan HP */
@media (max-width: 600px) {
    .ppob-scope .ppob-payment-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .ppob-scope .ppob-payment-actions button {
        width: 100%;
        min-height: 46px;
    }

    .ppob-scope .ppob-payment-channels {
        flex-direction: column;
        gap: 12px;
    }
}



/* Memisahkan tombol Beli Sekarang dan QRIS pada form Pulsa */
.ppob-full-layout #ppob-pulsa-tab
.ppob-form button[name="ppob_payment_submit_pulsa"],
.ppob-full-layout #ppob-pulsa-tab
.ppob-form button[name="ppob_qris_payment_pulsa"] {
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
}

/* Pastikan jarak tetap terlihat meskipun tombol berada dalam elemen p */
.ppob-full-layout #ppob-pulsa-tab
.ppob-form p:has(button[name="ppob_payment_submit_pulsa"]) {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/* ==========================================
   FIX TOMBOL PEMBAYARAN PPOB
   Kompatibel dengan berbagai tema WordPress
========================================== */

/* Tombol bayar biasa */
.ppob-scope .ppob-frontend button.ppob-pay-now {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #2271b1 !important;
    background-color: #2271b1 !important;
    color: #ffffff !important;
    border: 1px solid #2271b1 !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-height: 48px !important;
    padding: 12px 22px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

/* Tombol QRIS */
.ppob-scope .ppob-frontend button.ppob-pay-qris {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #198754 !important;
    background-color: #198754 !important;
    color: #ffffff !important;
    border: 1px solid #198754 !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-height: 48px !important;
    padding: 12px 22px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

/* Hover tombol bayar */
.ppob-scope .ppob-frontend button.ppob-pay-now:hover {
    background: #155a91 !important;
    color: #ffffff !important;
}

/* Hover QRIS */
.ppob-scope .ppob-frontend button.ppob-pay-qris:hover {
    background: #146c43 !important;
    color: #ffffff !important;
}

/* Pastikan tombol tidak tertutup styling tema */
.ppob-scope .ppob-frontend button.ppob-pay-now,
.ppob-scope .ppob-frontend button.ppob-pay-qris {
    text-indent: 0 !important;
    box-shadow: none;
    text-decoration: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    text-transform: none !important;
}