:root{
    --primary:#d81b60;
    --primary-dark:#ad1457;
    --purple:#7b1fa2;
    --bg:#f4f5f7;
    --card:#ffffff;
    --text:#1f2937;
    --muted:#6b7280;
    --border:#e5e7eb;
    --danger:#c62828;
    --success:#2e7d32;
    --shadow:0 10px 25px rgba(0,0,0,.08);
}

*{box-sizing:border-box}

body{
    margin:0;
    font-family:Inter, Poppins, Arial, sans-serif;
    background:var(--bg);
    color:var(--text);
}

button,input,textarea,select{
    font:inherit;
}

a{text-decoration:none}

.login-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--primary),var(--purple));
    padding:22px;
}

.login-card{
    width:100%;
    max-width:430px;
    background:#fff;
    border-radius:30px;
    padding:34px;
    box-shadow:0 24px 65px rgba(0,0,0,.28);
}

.brand-mark,.mini-logo{
    background:linear-gradient(135deg,var(--primary),var(--purple));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
}

.brand-mark{
    width:76px;
    height:76px;
    border-radius:24px;
    font-size:28px;
    margin-bottom:20px;
}
.quick-add-btn{
    width:100%;
    margin-top:8px;
    border:0;
    border-radius:10px;
    padding:7px 8px;
    font-size:12px;
    font-weight:900;
    background:#fce4ec;
    color:#ad1457;
    cursor:pointer;
}

.quick-add-btn:hover{
    background:#f8bbd0;
}
.login-card h1{margin:0;font-size:28px}
.login-card p{color:var(--muted);margin:8px 0 24px}

label{
    display:block;
    font-weight:800;
    margin:12px 0 6px;
}

input,textarea,select{
    width:100%;
    border:1px solid var(--border);
    border-radius:16px;
    padding:13px 15px;
    outline:none;
    background:#fff;
}

textarea{min-height:70px;resize:vertical}

input:focus,textarea:focus,select:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(216,27,96,.1);
}

.btn{
    border:0;
    border-radius:16px;
    padding:12px 16px;
    font-weight:900;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#111;
}

.btn.primary{
    background:linear-gradient(135deg,var(--primary),var(--purple));
    color:#fff;
}

.btn.light{background:#fff}
.btn.outline{background:transparent;border:1px solid rgba(255,255,255,.7);color:#fff}
.btn.full{width:100%;margin-top:18px}
.btn.small{padding:7px 11px;border-radius:12px;font-size:13px}
.btn.danger{background:#ffebee;color:var(--danger)}

.alert{
    padding:12px 14px;
    border-radius:14px;
    margin-bottom:14px;
    font-weight:700;
}
.alert.danger{background:#ffebee;color:var(--danger)}
.alert.warning{background:#fff8e1;color:#795200}
.alert.success{background:#e8f5e9;color:var(--success)}

.pos-app{
    height:100vh;
    display:flex;
    flex-direction:column;
}

.topbar{
    height:78px;
    background:linear-gradient(135deg,var(--primary),var(--purple));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
    box-shadow:var(--shadow);
    flex-shrink:0;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.brand strong{display:block;font-size:21px}
.brand span{font-size:13px;opacity:.88}

.mini-logo{
    width:48px;
    height:48px;
    border-radius:16px;
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.3);
}

.top-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.user-pill{
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.35);
    padding:10px 12px;
    border-radius:999px;
    font-weight:800;
}

.workspace{
    flex:1;
    min-height:0;
    display:grid;
    grid-template-columns:35% 38% 27%;
    gap:15px;
    padding:15px;
}

.panel{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:24px;
    box-shadow:var(--shadow);
    overflow:auto;
    padding:16px;
    min-height:0;
}

.search-wrap{
    position:sticky;
    top:0;
    background:#fff;
    z-index:4;
    padding-bottom:12px;
}

.search-wrap input{
    font-size:21px;
    font-weight:800;
    padding:16px 18px;
}

.chips{
    display:flex;
    gap:8px;
    overflow:auto;
    padding-bottom:12px;
    margin-bottom:10px;
}

.chip{
    border:1px solid var(--border);
    background:#fff;
    padding:10px 14px;
    border-radius:999px;
    font-weight:900;
    white-space:nowrap;
    cursor:pointer;
}

.chip.active{
    background:#fce4ec;
    color:var(--primary-dark);
    border-color:#f8bbd0;
}

.product-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.product-card{
    border:1px solid var(--border);
    border-radius:20px;
    overflow:hidden;
    background:#fff;
    cursor:pointer;
    transition:.15s;
}

.product-card:hover,.product-card.active{
    transform:translateY(-2px);
    box-shadow:var(--shadow);
    border-color:#f8bbd0;
}

.product-card img{
    width:100%;
    height:150px;
    object-fit:contain;
   
}

.product-card-body{padding:12px}
.product-card h3{font-size:16px;margin:0 0 6px;line-height:1.25}
.sku-line{font-weight:900;color:var(--muted);font-size:13px}
.price-line{font-weight:950;color:var(--primary-dark);font-size:20px;margin-top:6px}

.empty-state,.product-empty{
    height:100%;
    min-height:300px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:normal;
    text-align:center;
    color:var(--muted);
}

.cake-icon{font-size:74px;margin-bottom:10px}

.detail-card img.main-img{
    width:100%;
    max-height:340px;
    object-fit:contain;
    border-radius:22px;
    
    border:1px solid var(--border);
}

.detail-title{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
    margin:14px 0;
}

.detail-title h1{
    margin:0;
    font-size:28px;
    line-height:1.15;
}

.big-price{
    color:var(--primary-dark);
    font-size:34px;
    font-weight:1000;
    white-space:nowrap;
}

.meta-row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin:10px 0;
}

.meta-pill{
    background:#f3f4f6;
    border:1px solid var(--border);
    padding:8px 10px;
    border-radius:999px;
    font-weight:800;
}

.variation-box{
    margin-top:16px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:20px;
    background:#fafafa;
}

.qty-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:14px;
}

.qty-row button{
    width:46px;
    height:46px;
    border:0;
    border-radius:14px;
    font-size:24px;
    font-weight:900;
    background:#fce4ec;
    color:var(--primary-dark);
}

.qty-row input{
    width:80px;
    text-align:center;
    font-weight:900;
    font-size:20px;
}

.add-btn{
    margin-top:18px;
}

.basket-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.basket-head h2,.customer-box h3{margin:0 0 10px}

.basket-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    min-height:120px;
}

.basket-item{
    display:grid;
    grid-template-columns:64px 1fr auto;
    gap:10px;
    border:1px solid var(--border);
    border-radius:18px;
    padding:10px;
    background:#fff;
}

.basket-item img{
    width:64px;
    height:64px;
    object-fit:cover;
    border-radius:14px;
    background:#fafafa;
}

.basket-item strong{display:block;line-height:1.2}
.basket-item small{display:block;color:var(--muted);font-weight:700;margin-top:3px}
.remove-btn{background:#ffebee;color:var(--danger);border:0;border-radius:12px;padding:6px 9px;font-weight:900;cursor:pointer;height:34px}

.total-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:2px solid var(--border);
    margin:14px 0;
    padding-top:14px;
    font-size:22px;
    font-weight:900;
}

.total-row strong{
    color:var(--primary-dark);
    font-size:28px;
}

.customer-box{
    border-top:1px solid var(--border);
    padding-top:12px;
}

.two-cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.payment-qr-card{
    margin-top:16px;
    padding:16px;
    border:2px solid #111827;
    border-radius:20px;
    background:#fff;
    text-align:center;
    box-shadow:0 8px 22px rgba(0,0,0,.08);
}

.payment-qr-card h3{
    margin:0 0 10px;
    font-size:20px;
}

.payment-qr-image-wrap{
    width:min(100%,320px);
    aspect-ratio:1 / 1;
    margin:0 auto;
    padding:10px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}

.payment-qr-image-wrap img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    image-rendering:auto;
}

.payment-qr-card p{
    margin:10px 0 0;
    color:var(--muted);
    font-size:13px;
    font-weight:800;
}

.qr-enable-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin:8px 0 14px;
    cursor:pointer;
}

.qr-enable-row input{
    width:20px;
    height:20px;
    margin:0;
    flex:0 0 auto;
}

.field-help{
    margin:7px 0 0;
    color:var(--muted);
    font-size:13px;
}

.qr-admin-preview{
    margin-top:14px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:16px;
    background:#fff;
    text-align:center;
}

.qr-admin-preview span{
    display:block;
    margin-bottom:8px;
    font-weight:900;
}

.qr-admin-preview img{
    display:block;
    width:min(100%,280px);
    aspect-ratio:1 / 1;
    object-fit:contain;
    margin:0 auto;
    padding:8px;
    border:1px solid var(--border);
    background:#fff;
}

.print-main{
    position:sticky;
    bottom:0;
    margin-top:14px;
}

.toast{
    position:fixed;
    left:50%;
    bottom:24px;
    transform:translateX(-50%);
    background:#111827;
    color:#fff;
    padding:12px 18px;
    border-radius:999px;
    font-weight:900;
    opacity:0;
    pointer-events:none;
    transition:.2s;
    z-index:1000;
}

.toast.show{opacity:1}

.print-area{display:none}

@media(max-width:1100px){
    .workspace{grid-template-columns:43% 57%;grid-template-rows:1fr 46%;} 
    .right-panel{grid-column:1 / span 2}
}

@media(max-width:760px){
    .topbar{height:auto;gap:12px;padding:12px;align-items:flex-start;flex-direction:column}
    .top-actions{flex-wrap:wrap}
    .workspace{display:block;height:auto;overflow:auto}
    .panel{margin:12px}
    .product-grid{grid-template-columns:1fr}
}

@media print{
    body > .pos-app, body > .toast{display:none!important}
    .print-area{display:block!important}
    @page{size:A4 portrait;margin:5mm}
    html,body{margin:0!important;padding:0!important;background:#fff!important;color:#000!important}
    .slip-page{
        width:100%;
        font-family:Arial,sans-serif;
        color:#000;
    }
    .slip-copy{
        border:1px solid #000;
        padding:2.5mm;
        font-size:8.5px;
        line-height:1.18;
        break-inside:avoid;
        page-break-inside:avoid;
    }
    .slip-header{
        position:relative;
        text-align:center;
        border-bottom:1px solid #000;
        padding:0 24mm 1.5mm;
        margin-bottom:1.5mm;
        min-height:11mm;
    }
    .slip-header h1{margin:0;font-size:13px;line-height:1.1}
    .slip-subtitle{font-size:8px;margin-top:.5mm}
    .slip-order{font-size:10px;font-weight:900;margin-top:.7mm}
    .slip-copy-label{
        position:absolute;
        left:0;
        top:0;
        border:1px solid #000;
        padding:1.2mm 2mm;
        font-size:9px;
        font-weight:900;
        letter-spacing:.2px;
    }
    .slip-meta{
        display:grid;
        grid-template-columns:1.2fr 1fr 1.4fr;
        gap:1mm 3mm;
        margin-bottom:1.5mm;
        font-size:8px;
    }
    .slip-items{
        border-top:1px solid #000;
    }
    .slip-item{
        display:grid;
        grid-template-columns:13mm minmax(0,1fr) 38mm;
        gap:2mm;
        align-items:center;
        border-bottom:1px solid #777;
        padding:1.2mm 0;
        break-inside:avoid;
        page-break-inside:avoid;
    }
    .slip-item img{
        width:13mm;
        height:13mm;
        object-fit:contain;
        border:1px solid #999;
    }
    .slip-item h2{
        margin:0 0 .6mm;
        font-size:9.5px;
        line-height:1.12;
    }
    .slip-sku{
        display:inline-block;
        font-size:8px;
        font-weight:900;
        border:1px solid #000;
        padding:.3mm 1mm;
        margin:0 0 .5mm;
    }
    .slip-attrs{
        display:flex;
        flex-wrap:wrap;
        gap:.5mm 2mm;
        font-size:7.5px;
    }
    .slip-item-numbers{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:1mm;
        text-align:right;
        font-size:7.5px;
    }
    .slip-item-numbers div{display:flex;flex-direction:column;gap:.4mm}
    .slip-item-numbers span{font-weight:900;font-size:8px}
    .slip-notes-grid{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:1.5mm;
        margin-top:1.5mm;
    }
    .slip-message{
        padding:1.2mm;
        border:1px solid #000;
        font-size:8px;
        min-height:7mm;
        overflow-wrap:anywhere;
    }
    .slip-total{
        border-top:1.5px solid #000;
        margin-top:1.5mm;
        padding-top:1.2mm;
        text-align:right;
        font-size:13px;
        font-weight:900;
    }
    .slip-cut-line{
        position:relative;
        height:5mm;
        border-top:1px dashed #555;
        margin-top:2.5mm;
        text-align:center;
    }
    .slip-cut-line span{
        position:relative;
        top:-2.2mm;
        display:inline-block;
        padding:0 3mm;
        background:#fff;
        font:700 7px Arial,sans-serif;
        letter-spacing:.5px;
    }
}

/* Thermal printer mode is activated only by the admin setting. */
@media print{
    body.print-thermal .slip-page{display:none!important}
    body.print-thermal .thermal-slip-page{
        display:block!important;
        width:76mm;
        max-width:76mm;
        margin:0 auto;
        padding:0;
        font-family:Arial,sans-serif;
        color:#000;
        background:#fff;
        font-size:10px;
        line-height:1.28;
    }
    body:not(.print-thermal) .thermal-slip-page{display:none!important}
    .thermal-copy{
        width:100%;
        box-sizing:border-box;
        padding:1mm 0;
        break-inside:avoid;
        page-break-inside:avoid;
    }
    .thermal-header{text-align:center;margin:0 0 1.5mm}
    .thermal-header h1{
        margin:0;
        font-size:16px;
        line-height:1.1;
        font-weight:900;
        text-transform:uppercase;
    }
    .thermal-copy-label{
        margin-top:1mm;
        font-size:12px;
        font-weight:900;
        letter-spacing:.6px;
    }
    .thermal-rule{border-top:1px dashed #000;margin:1.5mm 0}
    .thermal-info{display:grid;gap:.6mm;overflow-wrap:anywhere}
    .thermal-section-title{
        margin:2mm 0 1mm;
        padding:.8mm 0;
        border-top:1px dashed #000;
        border-bottom:1px dashed #000;
        text-align:center;
        font-size:11px;
        font-weight:900;
        letter-spacing:.5px;
    }
    .thermal-item{
        padding:1.5mm 0;
        border-bottom:1px dotted #555;
        break-inside:avoid;
        page-break-inside:avoid;
    }
    .thermal-item-title{font-size:11px;font-weight:900;overflow-wrap:anywhere}
    .thermal-item-detail,.thermal-attribute{font-size:9px;margin-top:.4mm;overflow-wrap:anywhere}
    .thermal-price-row{
        display:flex;
        justify-content:space-between;
        gap:3mm;
        margin-top:.8mm;
        font-size:10px;
    }
    .thermal-note{
        margin-top:1.5mm;
        padding:1.2mm;
        border:1px solid #000;
        overflow-wrap:anywhere;
    }
    .thermal-total-row{
        display:flex;
        justify-content:space-between;
        gap:3mm;
        margin-top:2mm;
        padding:1.5mm 0;
        border-top:2px solid #000;
        border-bottom:2px solid #000;
        font-size:15px;
        font-weight:900;
    }
    .thermal-payment-lines{
        display:grid;
        gap:2.5mm;
        min-height:13mm;
        padding:2mm 0;
        font-size:11px;
    }
    .thermal-qr-section{text-align:center;margin-top:1mm}
    .thermal-qr-section img{
        display:block;
        width:48mm;
        height:48mm;
        object-fit:contain;
        margin:1.5mm auto 0;
        padding:1mm;
        box-sizing:border-box;
        background:#fff;
    }
    .thermal-thank-you{
        margin-top:2mm;
        padding:2mm 0;
        border-top:1px dashed #000;
        text-align:center;
        font-size:12px;
        font-weight:900;
        letter-spacing:.8px;
    }
    .thermal-shop-use{display:grid;gap:3mm;margin-top:2mm;font-size:10px}
    .thermal-cut-line{
        position:relative;
        height:8mm;
        margin:3mm 0 1mm;
        border-top:1px dashed #000;
        text-align:center;
    }
    .thermal-cut-line span{
        position:relative;
        top:-2.2mm;
        display:inline-block;
        padding:0 2mm;
        background:#fff;
        font-size:8px;
        font-weight:700;
    }
}