/* =====================================================
   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;

}

}