.product-table {

    table-layout: fixed;
    width: 100%;

}


/* UID / Code */

.product-id-column {

    width: 180px;
    max-width: 180px;

    text-align: center;

    vertical-align: middle;

    padding-left: 8px;
    padding-right: 8px;

    white-space: nowrap;

}



/* รูป */

.product-images-cell {


    width:auto;


    min-width:600px;

    text-align: center;


    vertical-align:middle;


}


.product-images-grid {

    display: flex;

    flex-wrap: wrap;

    gap: 5px;

    width: 100%;

}



.product-thumb-box {

    width:60px;
    height:60px;

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

    background:#f8f9fa;

    border-radius:8px;

}





/* ราคา */


.product-price-column {


    width:100px;


    text-align:center;


    white-space:nowrap;


}




/* รายละเอียด */



.product-detail-column {


    width:120px;


    text-align:center;


}



/* จัดการ */

.product-action-column {

    width: 110px;

    text-align: center;

}

/* Product Detail Gallery */

.product-gallery {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.product-image-box {

    width: 118px;

    height: 118px;


    display: flex;

    align-items: center;

    justify-content: center;


    background: #f8f9fa;

    border-radius: 1px;

    overflow: hidden;

}



.product-detail-image {

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 5px;

}



/* Customer Store */


.store-images {

    display:flex;

    flex-wrap:wrap;

    gap:5px;

}



.store-image-box {

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f8f9fa;

    border-radius:6px;

}



.store-image {

    width:100%;

    height:100%;

    object-fit:contain;

}


/* Customer Store Table */


.store-code-column {

    text-align: center;

    vertical-align: middle;

    width: 180px;

}



.store-image-column {

    text-align: center;

    vertical-align: middle;

}



.store-price-column {

    text-align: center;

    vertical-align: middle;

    width: 80px;

}



.store-code {

    font-size: 13px;

    font-weight: 600;

    word-break: break-all;

}

.copy-btn {

    font-size: 11px;

    padding: 2px 8px;

    line-height: 1.2;

    border-radius: 4px;

}

.shop-menu-btn {

    min-width: 130px;

    height: 38px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 14px;

}

.product-uid {

    font-size: 12px;
    font-weight: 600;

}


.product-code {

    font-size: 11px;
    color: #6c757d;

    margin-top: 4px;

}


/* =========================
   INVENTORY TABLE COLUMN
========================= */


.product-uid-column {

    width:110px;

    max-width:110px;

    text-align:center;

    white-space:nowrap;

}



.product-code-column {


    width:150px;


    max-width:150px;


    text-align:center;


    white-space:nowrap;


}


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


.product-header {


    display:flex;

    justify-content:space-between;

    align-items:center;


    background:
    linear-gradient(
        135deg,
        #111827,
        #1e293b
    );


    padding:25px;


    border-radius:18px;


    margin-bottom:25px;


    color:white;


}



.product-title h2 {


    margin:0;

    font-weight:800;


}



.product-subtitle {


    color:#94a3b8;

    margin-top:5px;

}




.product-actions {


    display:flex;

    gap:10px;


}



.btn-game-primary {


    background:#2563eb;

    color:white;

    border-radius:12px;

    padding:10px 18px;

    font-weight:700;


}




.btn-game-success {


    background:#16a34a;

    color:white;

    border-radius:12px;

    padding:10px 18px;

    font-weight:700;


}




.btn-game-primary:hover,
.btn-game-success:hover {


    color:white;

    transform:translateY(-2px);


}


/* =========================
 GAME PRODUCT TABLE
========================= */


.game-product-table {


    background:
    var(--card-color);


    color:
    var(--text-color);


    border-color:
    var(--border-color);


}


.game-product-table thead th {


background:
var(--table-header);


color:white !important;


}



.game-product-table td {

    vertical-align:middle;

    border-color:#334155;

}



.game-product-table tbody tr {

    transition:.2s;

}



.game-product-table tbody tr:hover td {


    background:
    var(--hover-color) !important;


}



/* UID */

.uid-badge {

    display:inline-block;

    background:
    linear-gradient(
        135deg,
        #0284c7,
        #0369a1
    );


    color:white;

    padding:6px 12px;

    border-radius:10px;

    font-size:12px;

    font-weight:700;

    font-family:monospace;

}



/* CODE */

.code-badge {

    display:inline-block;

    background:
    linear-gradient(
        135deg,
        #4b48ff,
        #f31f54
    );


    color:white;

    padding:6px 12px;

    border-radius:10px;

    font-size:12px;

    font-weight:700;

}



/* PRICE */


.price-badge {

    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:6px 12px;


    border-radius:8px;


    background:#16a34a;


    color:white;


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


    font-size:16px;


    font-weight:700;


    font-variant-numeric:
    tabular-nums;


    white-space:nowrap;

}

.price-badge:hover {

    filter:brightness(1.1);

}

.detail-badge {


    display:inline-block;


    background:
    linear-gradient(
        135deg,
        #0ea5e9,
        #0369a1
    );


    color:white;


    padding:7px 14px;


    border-radius:10px;


    font-size:13px;


    font-weight:700;


    text-decoration:none;


    transition:.2s;


}


.detail-badge:hover {


    color:white;


    transform:translateY(-2px);


    box-shadow:

    0 5px 15px rgba(14,165,233,.35);


}

.game-product-table {

    table-layout:fixed;

    width:100%;

}

/* =========================
 IMAGE HOVER PREVIEW
========================= */




.product-thumb:hover {


    transform:scale(1.35);


    position:relative;

    z-index:20;


    box-shadow:
    0 10px 25px rgba(0,0,0,.5);


}




.item-preview-box {


    background:#111827;

    color:white;

    border-radius:20px;


}



.item-preview-image {


    max-width:400px;

    max-height:400px;


    object-fit:contain;


    border-radius:15px;


}





.product-thumb:hover {

    transform:scale(1.5);

    position:relative;

    z-index:20;

    box-shadow:
    0 10px 25px rgba(0,0,0,.5);

}


.product-thumb {

    width:60px;

    height:60px;

    object-fit:contain;

    cursor:pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}



.product-thumb:hover {


    transform:scale(1.12);

    box-shadow:

        0 4px 12px rgba(0,0,0,.35);


}


.game-product-table td,
.game-product-table tr {

    overflow:visible !important;

}



/* =========================
   TABLE OUTER BORDER ONLY
========================= */


.game-product-table {

    border-left:
    1px solid var(--border-color);

    border-right:
    1px solid var(--border-color);

}



/* เส้นซ้ายสุดของหัวและข้อมูล */

.game-product-table th:first-child,
.game-product-table td:first-child {

    border-left:
    1px solid var(--border-color);

}



/* เส้นขวาสุดของหัวและข้อมูล */

.game-product-table th:last-child,
.game-product-table td:last-child {

    border-right:
    1px solid var(--border-color);

}


/* =========================
   PRODUCT SEARCH
========================= */


.product-search-box {

    display:flex;

    gap:10px;

    margin-bottom:25px;

}



.product-search-input {


    flex:1;


    background:
    var(--card-color);


    color:
    var(--text-color);


    border:
    1px solid var(--border-color);


    border-radius:12px;


    padding:12px 16px;


    font-size:15px;


}



.product-search-input::placeholder {

    color:#94a3b8;

}



.product-search-btn {


    background:
    linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );


    color:white;


    border:none;


    border-radius:12px;


    padding:0 25px;


    font-weight:700;


}



.product-clear-btn {


    display:flex;

    align-items:center;


    padding:0 18px;


    border-radius:12px;


    background:#ef4444;


    color:white;


    text-decoration:none;


    font-weight:bold;

}

.search-result-info {

    margin-bottom:-10px;

    color:var(--text-color);

}



mark {

    background:#facc15;

    color:#111827;

    padding:2px 5px;

    border-radius:4px;

    font-weight:bold;

}

.empty-product {


    padding:40px;


    color:
    var(--text-color);


    opacity:.8;


}


.empty-product h4 {


    color:#ef4444;


    font-weight:800;


}

.item-suggest {

    display:none;

    position:absolute;

    top:100%;

    left:0;


    margin-top:8px;


    width:500px;


    max-height:350px;

    overflow-y:auto;


    background:
    var(--card-color);


    border:
    1px solid var(--border-color);


    border-radius:12px;


    z-index:9999;


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

}



.item-suggest-row {

    display:flex;

    align-items:center;

    gap:12px;

    padding:8px 12px;

    cursor:pointer;

    color:
    var(--text-color);

}



.item-suggest-row:hover {

    background:
    var(--hover-color);

}



.item-suggest-row img {

    width:40px;

    height:40px;

    object-fit:contain;

}

.product-search-box {

    position:relative;

}


/* =========================
   PRODUCT TABLE OUTER BORDER
========================= */


.game-product-table {

    border-left:1px solid var(--border-color);

    border-right:1px solid var(--border-color);

    border-bottom:1px solid var(--border-color);

    border-collapse:separate;

    border-spacing:0;

    border-radius:12px;

    overflow:hidden;

}


/* เส้นบนสุด */

.game-product-table thead th {

    border-top:1px solid var(--border-color);

}


/* เส้นซ้ายสุด */

.game-product-table th:first-child,
.game-product-table td:first-child {

    border-left:1px solid var(--border-color);

}


/* เส้นขวาสุด */

.game-product-table th:last-child,
.game-product-table td:last-child {

    border-right:1px solid var(--border-color);

}


/* ล่างสุดของรายการ */

.game-product-table tbody tr:last-child td {

    border-bottom:1px solid var(--border-color);

}



/* Product Image Border - Light Mode */

body:not(.dark-mode) .product-thumb-box {

    border:1px solid #e5e7eb;

    background:#ffffff;

    border-radius:10px;

    padding:4px;

}

.danger-zone {

    margin-top:20px;

    padding:20px;

    border:1px solid #ef4444;

    border-radius:12px;

    background:rgba(239,68,68,.05);

}

.copy-box-vertical {

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:5px;

}


.copy-btn {

    border:1px solid var(--border-color);

    background:var(--card-color);

    color:var(--text-color);

    border-radius:6px;

    padding:3px 10px;

    font-size:12px;

    cursor:pointer;

    transition:.2s;

}


.copy-btn:hover {

    background:var(--border-color);

}

.product-pagination{

    display:flex;

    justify-content:center;

    margin-top:25px;

}

.per-page-box {

    display:flex;

    align-items:center;

}


.per-page-select {
    appearance:none;

    -webkit-appearance:none;

    height:46px;

    width:140px;

    padding:0 30px 0 25px;

    border-radius:10px;

    border:1px solid var(--border-color);

    background:var(--card-color);

    color:var(--text-color);

    font-size:14px;

    font-weight:600;

    cursor:pointer;

}

.per-page-box {

    position:relative;

    display:flex;

    align-items:center;

}



.per-page-select:hover {

    border-color:#16a34a;

}

.product-search-btn,
.per-page-select {

    height:50px;

}

.per-page-box::after {

    content:"▾";

    position:absolute;

    right:20px;

    pointer-events:none;

    color:var(--text-color);

    font-size:20px;

}


.copy-toast {


    position:fixed;


    right:25px;


    bottom:25px;


    background:#16a34a;


    color:white;


    padding:12px 20px;


    border-radius:12px;


    font-size:14px;


    font-weight:700;


    box-shadow:0 5px 20px rgba(0,0,0,.25);


    opacity:0;


    transform:
    translateY(20px);


    pointer-events:none;


    transition:.25s;


    z-index:9999;


}



.copy-toast.show {


    opacity:1;


    transform:
    translateY(0);


}





.sort-dropdown{

    position:relative;

}


.sort-btn{

    height:50px;

    width:140px;

    padding:0 15px;

    border-radius:10px;

    border:1px solid var(--border-color);

    background:var(--card-color);

    color:var(--text-color);

    font-size:12px;

    font-weight:600;

    cursor:pointer;

    display:flex;

    align-items:center;

}


.sort-text{

    white-space:nowrap;

}


.sort-arrow{

    margin-left:auto;

    font-size:18px;

}

.sort-menu{

    position:absolute;

    top:48px;

    right:0;

    width:180px;

    background:white;

    border-radius:12px;

    box-shadow:0 8px 25px rgba(0,0,0,.15);

    overflow:hidden;

    display:none;

    z-index:1000;

}


.sort-menu a{

    display:block;

    padding:12px 15px;

    cursor:pointer;

    color:#333;

}


.sort-menu a:hover{

    background:#f3f4f6;

}

body.dark-mode .sort-btn{
    background:var(--card-color);
    color:var(--text-color);
    border-color:var(--border-color);
}


body.dark-mode .sort-menu{

    background:#fff;

}


body.dark-mode .sort-menu a{

    color:#111;

}


body.dark-mode .sort-menu a:hover{

    background:#eee;

}



.sort-select{

    appearance:none;

    height:50px;

    width:140px;

    padding:0 25px;

    border-radius:10px;

    border:1px solid var(--border-color);

    background:var(--card-color);

    color:var(--text-color);

    font-size:12px;

    font-weight:600;

    cursor:pointer;

}

.select-wrapper{

    position:relative;

    width:140px;

}




.select-arrow{

    position:absolute;

    right:15px;

    top:50%;

    transform:translateY(-50%);

    pointer-events:none;

    font-size:16px;

}


.back-to-top{

    position:fixed;

    right:25px;

    bottom:25px;

    width:45px;

    height:45px;

    border-radius:50%;

    border:none;

    background:var(--card-color);

    color:var(--text-color);

    border:1px solid var(--border-color);

    font-size:22px;

    font-weight:bold;

    cursor:pointer;

    display:none;

    align-items:center;

    justify-content:center;

    box-shadow:0 4px 15px rgba(0,0,0,.15);

    z-index:9999;

}


.back-to-top:hover{

    transform:translateY(-3px);

}


/* ==========================
   PRODUCT PAGINATION
========================== */

.product-pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    margin:30px 0;

}


.product-pagination a,
.product-pagination span{

    min-width:40px;

    height:40px;

    padding:0 12px;

    border-radius:10px;

    border:1px solid var(--border-color);

    background:var(--card-color);

    color:var(--text-color);

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-weight:600;

    transition:.2s;

}



.product-pagination a:hover{

    transform:translateY(-2px);

}



.product-pagination .active{

    background:var(--text-color);

    color:var(--card-color);

    border-color:var(--text-color);

}



.product-pagination .disabled{

    opacity:.4;

    cursor:not-allowed;

}

.product-thumb-box{

    position:relative;

}


.img-count{

    position:absolute;

    right:4px;

    bottom:4px;

    background:#111;

    color:white;

    font-size:12px;

    font-weight:700;

    padding:2px 6px;

    border-radius:8px;

}


/* ==========================
   FORCE DESKTOP TABLE ON MOBILE
========================== */

@media(max-width:768px){

    body{
        min-width:1200px;
    }


    .container{

        max-width:1200px !important;

    }


    .game-product-table{

        width:1200px;

        table-layout:fixed;

    }


    .product-header{

        width:1200px;

    }


}


/* ==========================
   STORE CONTACT ADMIN BUTTON
========================== */

.contact-admin-btn {

   

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 9px;

    font-size:12px;

    font-weight:500;

    border-radius:8px;

    text-decoration:none;

    color:#fff;

    background:#0ea5e9;

    border:1px solid transparent;

    cursor:pointer;

    white-space:nowrap;

    transition:.2s;

}


.contact-admin-btn:hover {

    opacity:.85;

    transform:translateY(-1px);

}


.contact-modal{

    display:none;

    position:fixed;

    inset:0;

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

    align-items:center;

    justify-content:center;

    z-index:9999;

}



.contact-box{

    background:#111827;

    color:#f8fafc;

    padding:25px;

    border-radius:15px;

    width:320px;

    text-align:center;

    border:1px solid #334155;

}

.contact-modal{

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

}

.contact-modal {
    display: none;
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

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

    z-index: 99999 !important;

    background: rgba(0, 0, 0, 0.55);

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

    box-sizing: border-box;
    padding: 20px;
}

.contact-modal .contact-box {
    position: relative !important;

    width: min(500px, 100%) !important;
    max-width: 500px !important;

    margin: 0 auto !important;

    background: rgba(0, 0, 0, 0.55);

    border-radius: 16px;

    padding: 24px;

    box-sizing: border-box;

    max-height: 90vh;
    overflow-y: auto;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}


.facebook-btn{

    display:block;

    margin-top:15px;

    padding:10px;

    background:#1877f2;

    color:white;

    border-radius:8px;

    text-decoration:none;

}



.close-btn{

    margin-top:10px;

    padding:8px 20px;

    border-radius:8px;

}

.copy-contact-btn{

    width:100%;

    padding:8px;

    margin-top:10px;

    border-radius:8px;

    border:1px solid #475569;

    background:#334155;

    color:white;

    cursor:pointer;

}


.copy-contact-btn:hover{

    opacity:.85;

}

.contact-message-box{

    background:#0f172a;

    border:1px solid #334155;

    border-radius:10px;

    padding:15px;

    margin:15px auto;

    color:#f8fafc;

    font-size:14px;

    line-height:1.7;

    text-align:center;

    white-space:pre-line;

    width:90%;

}

.contact-box{

    text-align:center;

}


.buy-product-btn {

   

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 20px;

    font-size:12px;

    font-weight:500;

    border-radius:8px;

    text-decoration:none;

    color:#fff;

    background:#ff6b01;

    border:1px solid transparent;

    cursor:pointer;

    white-space:nowrap;

    transition:.2s;

}


.buy-product-btn:hover {

    opacity:.85;

    transform:translateY(-1px);

}

.reserved-box {

    display: inline-block;
    padding: 8px 14px;

    border-radius: 10px;

    background: rgba(255,193,7,0.15);

    border: 1px solid #ffc107;

    text-align: center;

    min-width: 100px;

}


.reserved-title {

    font-weight: 600;

    font-size: 12px;

}


.reserved-time {

    margin-top: 4px;

    font-size: 10px;

}


.buy-confirm-card {

    max-width:500px;

    margin:auto;

    background:white;

    border-radius:18px;

    padding:25px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

}



.buy-product-image {

    text-align:center;

}


.buy-product-image img {

    width:180px;

    height:180px;

    object-fit:contain;

    border-radius:15px;

}



.buy-product-info {

    text-align:center;

}



.product-code {

    color:#777;

    font-size:14px;

}



.buy-price {

    margin-top:15px;

    font-size:18px;

}



.buy-price strong {

    display:block;

    font-size:28px;

    color:#198754;

}



.buy-warning {

    background:#fff3cd;

    border-radius:12px;

    padding:15px;

    font-size:14px;

    margin-bottom:20px;

}



.confirm-buy-btn {

    width:100%;

    padding:12px;

    border:0;

    border-radius:12px;

    background:#198754;

    color:white;

    font-size:17px;

}



.back-shop-btn {

    width:100%;

    margin-top:10px;

    padding:10px;

    border-radius:12px;

    border:1px solid #ddd;

    background:white;

}

.buy-title {

    text-align:center;

    margin-bottom:25px;

    font-weight:700;

}

.buy-confirm-card {

    background: var(--card-bg, #ffffff);

    color: var(--text-color, #222);

}

.product-code {

    color:#777;

}


.buy-warning {

    color:#664d03;

}

.buy-product-gallery {

    display:flex;

    gap:10px;

    justify-content:center;

    flex-wrap:wrap;


}


.buy-product-img {

    width:80px;

    height:80px;

    object-fit:contain;

    border-radius:12px;

    border:1px solid #ddd;

}

.buy-image-item {

    position:relative;

}


.image-count-badge {

    position:absolute;

    right:8px;

    bottom:8px;

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

    color:white;

    padding:3px 8px;

    border-radius:12px;

    font-size:13px;

}



.buy-product-gallery {

    display:flex;

    justify-content:center;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:25px;

}


.buy-product-thumb-box {

    position:relative;

}


.buy-product-img {

    width:80px;

    height:80px;

    object-fit:contain;

    border-radius:12px;

}


.img-count {

    position:absolute;

    right:5px;

    bottom:5px;

    background:#000;

    color:white;

    padding:2px 8px;

    border-radius:10px;

    font-size:12px;

}


.buy-confirm-card {

    max-width:520px;

    margin:40px auto;

    padding:30px;

    border-radius:20px;


    background:
    var(--bs-body-bg);


    color:
    var(--bs-body-color);


    border:1px solid var(--border-color, rgba(128,128,128,.25));


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

}

/* Light Mode */

[data-theme="light"] .buy-confirm-card {

    background:#ffffff;

    border-color:#e5e7eb;

}


/* Dark Mode */

[data-theme="dark"] .buy-confirm-card {

    background:#1e1e1e;

    border-color:#333;

}



.buy-product-info {

    margin-top:25px;

    text-align:center;

}



.buy-product-name {

    font-size:26px;

    font-weight:700;

    margin-bottom:20px;

}



.product-code-box {

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin-bottom:25px;

}



.product-code-box .label {

    opacity:.7;

}



.product-code-box .code {

    padding:8px 16px;

    border-radius:10px;


    background:
    rgba(128,128,128,.15);


    border:
    1px solid rgba(128,128,128,.25);


    font-weight:700;

}



.buy-price-box {

    margin-top:20px;

    padding:20px;

    border-radius:15px;


    background:
    rgba(34,197,94,.12);


    border:
    1px solid rgba(34,197,94,.3);

}


.price-label {

    font-size:20px;

    opacity:.8;

}



.price-value {

    margin-top:5px;

    font-size:32px;

    font-weight:800;

    color:#22c55e;

}


.price-value span {

    font-size:18px;

}



.order-header {

    text-align:center;

    margin-bottom:25px;

}


.order-number {

    opacity:.7;

}



.order-status-card,
.payment-timer-box,
.order-product-card {


    padding:20px;

    border-radius:16px;


    background:
    var(--card-bg,#fff);


    color:
    var(--text-color,#222);


    border:
    1px solid rgba(128,128,128,.25);


    margin-bottom:15px;

}



.order-status-card {

    display:flex;

    justify-content:space-between;

}



.payment-timer-box {

    text-align:center;

    font-size:18px;

}



#timer {

    display:block;

    margin-top:8px;

    font-size:32px;

    font-weight:800;

    color:#f59e0b;

}



.product-name {

    font-size:20px;

    font-weight:700;

}



.product-price {

    margin-top:10px;

    font-size:18px;

    color:#22c55e;

}


.dark .order-status-card,
.dark .payment-timer-box,
.dark .order-product-card {

    background:#1e1e1e;

    color:#eee;

}

.order-product-card {

    max-width:520px;

    margin:15px auto;

    padding:20px;

    border-radius:18px;


    background:var(--card-bg);

    color:var(--text-color);


    border:
    1px solid rgba(128,128,128,.25);

}


.order-product-images {

    display:flex;

    justify-content:center;

    gap:10px;

    flex-wrap:wrap;

}



.order-product-img {

    width:100px;

    height:100px;

    object-fit:contain;

    border-radius:12px;

}



.order-image-box {

    position:relative;

}



.order-price {

    text-align:center;

    margin-top:15px;

    font-size:22px;

    font-weight:700;

    color:#22c55e;

}


.order-confirm-card {

    max-width:520px;

    margin:40px auto;

}


.order-confirm-card .buy-product-gallery {

    margin-bottom:25px;

}


.order-confirm-card .product-code-box {

    margin-bottom:25px;

}


.order-action-card {

    max-width:520px;

    margin:20px auto 40px;

}



.order-status-row {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px;

    border-radius:12px;

    background:rgba(128,128,128,.08);

}



.order-status-row strong {

    font-weight:700;

}



.payment-timer-box {

    margin-top:15px;

    text-align:center;

    padding:20px;

    border-radius:15px;


    background:#fff7ed;


    border:1px solid #fdba74;


    color:#9a3412;

}

#timer {

    margin-top:8px;

    font-size:32px;

    font-weight:800;

    color:#ea580c;

}


.dark #timer {

    color:#fb923c;

}


#timer {

    margin-top:8px;

    font-size:32px;

    font-weight:800;

    color:#f59e0b;

}



.order-buttons {

    display:flex;

    gap:15px;

    margin-top:20px;

}



.order-buttons .btn {

    height:45px;

    border-radius:12px;

    font-weight:700;

}

.product-title {

    font-size:18px;

    font-weight:700;

    margin-bottom:20px;

    text-align:center;

}


.payment-qr-box {

    text-align:center;

    margin-bottom:20px;

    padding:25px;

    border-radius:18px;

    background:rgba(128,128,128,.08);

}


.payment-qr-image {

    width:300px;

    height:300px;

    max-width: 90%;

    object-fit:contain;

    margin: 20px auto;

    display:block;

    border-radius:20px;

    background:white;

    padding:15px;

    box-shadow: 0 8px 25px rgba(0,0,0,.15);

}


.payment-total {

    font-size:18px;

}


.payment-total strong {

    display:block;

    font-size:28px;

    color:#16a34a;

}


.payment-uploaded-box {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 20px;

}


.payment-uploaded-box h5 {

    width: 100%;

    text-align: center;

    margin-bottom: 15px;

}


.slip-preview {

    width: 280px;

    max-width: 90%;

    display: block;

    margin: 0 auto 15px;

    border-radius: 16px;

}


.payment-waiting {

    width: 100%;

    text-align: center;

    margin-top: 10px;

}



/* ช่องเลือกไฟล์เต็มบรรทัด */

.slip-upload-form {

    width:100%;

}


.slip-upload-form input[type="file"] {

    width:100%;

    margin-bottom:15px;

}

.order-buttons {

    display:block;
}










.payment-action-area {
    width:100%;
}

.upload-form {

    width:100%;

}

.upload-form input[type="file"] {

    width:100%;

    margin-bottom:15px;

}





.upload-form input[type="file"] {

    width:100%;

    height:45px;

    margin-bottom:15px;

    padding:8px 12px;

    border-radius:12px;

    box-sizing:border-box;

}






.payment-action-area {
    width:100%;
}


.slip-input {

    width:100%;

    height:45px;

    margin-bottom:15px;

    border-radius:12px;

    padding:8px;

}


.payment-button-row {

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

}


.payment-button-row button {

    width:180px;

    height:45px;

    border-radius:12px;

    font-weight:700;

}


.slip-input {

    width:100%;

    height:45px;

    padding:8px 12px;

    border-radius:12px;

    border:1px solid rgba(128,128,128,.35);

    background:transparent;

    color:inherit;

    margin-bottom:15px;

    box-sizing:border-box;

}


.slip-input::file-selector-button {

    height:30px;

    padding:0 15px;

    margin-right:10px;

    border-radius:8px;

    border:0;

    cursor:pointer;

    font-weight:600;

}

.back-order-btn {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:12px 28px;

    border-radius:16px;

    background:var(--bs-tertiary-bg);

    color:var(--bs-body-color);

    border:1px solid var(--bs-border-color);

    text-decoration:none;

    font-weight:700;

    font-size:16px;

    transition:.2s;

}


.back-order-btn:hover {

    background:var(--bs-primary);

    color:white;

    transform:translateY(-2px);

}


.price-box{

    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;

}


.member-price{

    display:flex;

    flex-direction:column;

    align-items:center;

    margin:0;

    line-height:1;

}


.member-level-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:15px;

    padding:0 7px;

    border-radius:10px;

    color:white;

    background-color:var(--level-color);

    font-size:9px;

    font-weight:bold;

}


.member-price-number{

    margin-top:3px;

    font-size:14px;

    font-weight:bold;

}


.sale-price{

    font-size:14px;

    font-weight:bold;

    color:#e53935;

}


.normal-price{

    font-size:14px;

    font-weight:bold;

}


.product-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

}



.customer-shop-level{

    display:flex;

    align-items:center;

    justify-content:center;


    padding:6px 14px;


    border-radius:20px;


    background-color:var(--level-color);

    color:white;


    font-size:20px;

    font-weight:bold;


    white-space:nowrap;

}

.shop-discount-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-top: 8px;
    padding: 6px 12px;

    border-radius: 999px;

    background: linear-gradient(
        135deg,
        #fff1f2,
        #ffe4e6
    );

    border: 1px solid #fecdd3;

    color: #be123c;

    font-size: 13px;
    font-weight: 600;

    box-shadow:
        0 2px 8px rgba(244, 63, 94, 0.10);
}

.shop-discount-icon {
    font-size: 15px;
    line-height: 1;
}

.shop-discount-badge strong {
    font-size: 14px;
    font-weight: 800;
    color: #e11d48;
}


.shop-price-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;

    margin-top: 12px;
}


/* =========================
   CUSTOMER LEVEL
========================= */

.customer-shop-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 9px 16px;

    border-radius: 999px;

    background: color-mix(
        in srgb,
        var(--level-color) 12%,
        white
    );

    border: 1px solid color-mix(
        in srgb,
        var(--level-color) 35%,
        transparent
    );

    color: var(--level-color);

    font-size: 16px;
    font-weight: 800;

    white-space: nowrap;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.08);
}


/* ส่วนลดระดับ */

.level-discount {
    display: inline-flex;
    align-items: center;

    padding: 4px 9px;

    border-radius: 999px;

    background: var(--level-color);

    color: #fff;

    font-size: 13px;
    font-weight: 800;

    white-space: nowrap;
}


/* =========================
   SHOP DISCOUNT
========================= */

.shop-discount-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 9px 16px;

    border-radius: 999px;

    background: linear-gradient(
        135deg,
        #fff1f2,
        #ffe4e6
    );

    border: 1px solid #fecdd3;

    color: #be123c;

    font-size: 16px;
    font-weight: 700;

    white-space: nowrap;

    box-shadow:
        0 3px 10px rgba(244, 63, 94, 0.12);
}


.shop-discount-icon {
    font-size: 20px;
    line-height: 1;
}


.shop-discount-badge strong {
    font-size: 18px;
    font-weight: 900;

    color: #e11d48;
}