.pos-root,
html,
body{
    margin:0;
    padding:0;
}

html,
body{
    height:100%;
    overflow:auto;
}

body{
    background:var(--bg);
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

.pos-screen{
    position:relative;
    inset:auto;
    width:100%;
    min-height:100vh;
    height:100vh;
    overflow:hidden;
}

.pos-left,
.receipt-panel{
    min-height:0;
}

.receipt-paper{
    height:100%;
}

.receipt-actions{display:grid;gap:10px}
.mobile-sticky-controls{display:block}
.desktop-category-wrap{display:none}
.category-sections.pos-items{display:block;overflow-y:auto;overflow-x:hidden;padding-right:4px;padding-bottom:110px}
.pos-category-section{display:block;margin-bottom:28px;scroll-margin-top:0}
.pos-category-title{margin:0 0 12px;font-size:20px;font-weight:1000;line-height:1.1}
.category-product-grid{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(180px,1fr))}
.pos-product{min-height:210px;display:flex;flex-direction:column}
.product-image,.product-icon{align-self:flex-start;flex-shrink:0}
.product-desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.product-price{margin-top:auto;align-self:flex-end}

@media (min-width: 1200px){
    .category-product-grid{grid-template-columns:repeat(4,minmax(220px,1fr))}
}

@media (max-width: 1199px){
    .category-product-grid{grid-template-columns:repeat(3,minmax(180px,1fr))}
}

@media (max-width: 599px) and (pointer: coarse){
    .category-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.pos-btn{border:0;border-radius:14px;padding:13px 10px;font-weight:1000;cursor:pointer}
.pos-btn.primary{background:var(--primary);color:#fff}
.pos-btn.dark{background:#111827;color:#fff}
.pos-result{margin-top:10px;border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:10px;background:#fff}
.pos-result textarea{width:100%;min-height:88px}
.modal-close-btn{font-size:26px}
.mobile-hero{display:none}
.receipt-row{cursor:pointer}
.receipt-row:hover{transform:translateY(-1px)}
.edit-line-btn{min-width:72px;padding:10px 14px;border-radius:12px}

/* Final receipt/cart parity fix: kiosk only */
:root{
    --pos-receipt-width: 360px;
}

.receipt-panel{
    width: min(360px, calc(100vw - 24px));
    max-width: 360px;
    box-sizing: border-box;
}

.receipt-paper{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.receipt-items{
    width: 100%;
    max-width: 100%;
    padding-right: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
    min-width: 0;
    overflow-x: hidden;
}

.receipt-item.receipt-row,
.receipt-item{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 14px 0;
    overflow: hidden;
}

.receipt-item-main{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px 64px !important;
    column-gap: 8px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.receipt-item-name{
    min-width: 0;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
}

.receipt-item-qty{
    width: auto !important;
    min-width: 0 !important;
    text-align: center;
    white-space: nowrap;
    font-weight: 900;
    font-size: 14px;
    line-height: 1.15;
}

.receipt-item-total{
    width: auto !important;
    min-width: 0 !important;
    text-align: right;
    white-space: nowrap;
    font-weight: 900;
    font-size: 14px;
    line-height: 1.15;
}

.receipt-line-title{
    width: auto;
    max-width: 100%;
    min-width: 0;
    line-height: 1.1;
    font-size: 14px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.receipt-unit-price{
    display: none !important;
}

.receipt-child-lines,
.receipt-options{
    width: auto;
    max-width: 100%;
    display: block;
    margin-top: 6px;
    line-height: 1.15;
}

.receipt-option-add,
.receipt-option-remove,
.receipt-option-child,
.receipt-option-note,
.receipt-line-note{
    width: auto;
    max-width: 100%;
    line-height: 1.15;
    font-size: 12px;
    margin: 1px 0;
}

.receipt-line-actions.qty-actions{
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    width: auto;
    max-width: 100%;
}

.receipt-total{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    gap: 12px;
    align-items: baseline;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

.receipt-total span{
    min-width: 0;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    font-size: 24px;
    line-height: 1;
    letter-spacing: -1px;
}

.receipt-total strong,
#cartTotal{
    justify-self: end;
    white-space: nowrap;
    text-align: right;
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.5px;
}

.receipt-line,
.receipt-separator,
.receipt-divider{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.mobile-history-btn{display:none}
.mobile-cart-bar{display:none}
.mobile-sheet-close{display:none}
.item-modal-backdrop{position:fixed;inset:0;z-index:9800}
.desktop-history-btn{
    border:0;
    border-radius:12px;
    padding:10px 14px;
    background:#111827;
    color:#fff;
    font-weight:800;
    cursor:pointer;
    min-height:42px;
    line-height:1;
}
.history-modal{
    width:min(720px,96vw);
    max-height:min(90vh,920px);
    overflow:hidden;
    padding-top:18px;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
}
.history-list-wrap{
    display:grid;
    gap:10px;
    text-align:left;
    overflow:auto;
    max-height:100%;
    padding-right:2px;
    padding-bottom:6px;
}
.history-empty{
    border:1px dashed rgba(0,0,0,.2);
    border-radius:12px;
    padding:14px;
    font-weight:700;
    color:#4b5563;
}
.history-card{
    border:1px solid rgba(0,0,0,.12);
    border-radius:14px;
    padding:12px;
    display:grid;
    gap:8px;
    background:#fff;
    cursor:pointer;
    transition:box-shadow .18s ease,border-color .18s ease;
}
.history-card-expanded{
    border-color:rgba(214,170,121,.45);
    box-shadow:0 14px 28px rgba(15,23,42,.10);
}
.history-meta{font-size:12px;color:#4b5563;font-weight:700}
.history-code{font-size:13px;font-weight:900}
.history-summary{
    font-size:13px;
    color:#111827;
    line-height:1.35;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.history-total{font-size:14px;font-weight:900}
.history-details{
    margin-top:2px;
    padding-top:10px;
    border-top:1px dashed rgba(15,23,42,.18);
    display:none;
}
.history-card-expanded .history-details{display:block}
.history-details-title{
    font-size:12px;
    font-weight:900;
    color:#334155;
    margin:0 0 6px;
}
.history-detail-line{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    padding:7px 0;
    border-bottom:1px solid rgba(15,23,42,.06);
}
.history-detail-line:last-child{border-bottom:0}
.history-detail-main{min-width:0}
.history-detail-name{
    font-size:13px;
    font-weight:800;
    color:#111827;
    line-height:1.3;
    word-break:break-word;
}
.history-detail-options,
.history-detail-note{
    margin-top:3px;
    font-size:11px;
    font-weight:600;
    color:#64748b;
    line-height:1.35;
    word-break:break-word;
}
.history-detail-price{
    font-size:13px;
    font-weight:900;
    white-space:nowrap;
    color:#111827;
}
.history-details-empty{
    font-size:12px;
    font-weight:700;
    color:#64748b;
}
.history-card-actions{display:flex;flex-wrap:wrap;gap:8px}
.history-card-actions button{
    border:0;border-radius:10px;padding:10px 12px;cursor:pointer;font-weight:800;min-height:44px;line-height:1;
    flex:1 1 0;
}
.history-btn-show{background:#111827;color:#fff}
.history-btn-repeat{background:#d6aa79;color:#fff}
.history-actions-row{display:flex;justify-content:flex-end;gap:8px;margin-top:8px;padding-top:4px}
.history-actions-row .clear-btn{min-height:40px;padding:8px 12px;border-radius:10px}
.option-missing-required{
    outline:2px solid #dc2626;
    outline-offset:3px;
    border-radius:14px;
    background:rgba(220,38,38,.055);
}
.required-gentle-shake-all{
    animation:requiredGentleShakeAll .65s cubic-bezier(.22,.61,.36,1) both;
}
.modal-required-message{
    margin:0 0 10px;
    padding:9px 10px;
    border-radius:10px;
    background:#fff1f2;
    color:#991b1b;
    font-size:12px;
    line-height:1.25;
    font-weight:900;
    border:1px solid rgba(220,38,38,.20);
}
@keyframes requiredGentleShakeAll{
    0%{transform:translateX(0)}
    20%{transform:translateX(-3px)}
    40%{transform:translateX(3px)}
    60%{transform:translateX(-2px)}
    80%{transform:translateX(2px)}
    100%{transform:translateX(0)}
}
.pos-result-modal-backdrop{position:fixed;inset:0;background:radial-gradient(circle at 20% 10%, rgba(255,255,255,.25), transparent 42%),rgba(8,12,22,.68);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:9900;padding:20px}
.pos-result-modal-backdrop[hidden]{display:none !important}
.pos-result-modal{position:relative;width:min(540px,95vw);background:linear-gradient(180deg,#ffffff,#f7f9fc);border-radius:26px;padding:24px;box-shadow:0 28px 70px rgba(0,0,0,.35);display:grid;gap:12px;text-align:center;border:1px solid rgba(255,255,255,.7)}
.pos-result-close{
    position:absolute;
    top:10px;
    right:10px;
    width:44px;
    height:44px;
    border:0;
    border-radius:12px;
    background:#eef0f3;
    color:#111827;
    font-weight:1000;
    font-size:24px;
    line-height:1;
    cursor:pointer;
    display:grid;
    place-items:center;
}
.pos-result-close:hover{background:#e5e7eb}
.pos-result-close:active{transform:translateY(1px)}
.pos-result-pill{margin:0 auto;background:#111827;color:#fff;padding:9px 16px;border-radius:999px;font-weight:1000;letter-spacing:.04em;box-shadow:0 8px 20px rgba(17,24,39,.22)}
.pos-result-modal h3{margin:4px 0 0;font-size:30px;line-height:1.05;letter-spacing:-.02em}
.pos-result-modal p{margin:0}
.pos-qr-card{border:1px solid rgba(0,0,0,.12);background:linear-gradient(180deg,#fbfdff,#f2f5fb);border-radius:18px;padding:14px;display:grid;gap:7px}
.pos-qr-label{font-size:12px;opacity:.7;font-weight:800}
.pos-qr-image{width:min(280px,72vw);aspect-ratio:1/1;object-fit:contain;margin:0 auto;background:#fff;border-radius:12px;padding:8px;border:1px solid rgba(0,0,0,.1)}
.pos-qr-value{font-size:22px;font-weight:1000;word-break:break-all}
.pos-result-help{font-size:13px;opacity:.78}

@media (min-width: 901px) and (pointer: fine){
    .mobile-sticky-controls,
    .mobile-topbar,
    .mobile-brand-mini,
    .mobile-home-btn,
    .mobile-history-btn,
    .mobile-hero,
    .mobile-hero-badge,
    .kiosk-hero,
    .hero-banner,
    .hero-section,
    .brand-hero,
    .top-hero,
    .menu-hero,
    #mobileCartBar,
    .mobile-cart-bar{
        display:none !important;
    }

    .pos-top{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:16px;
        background:transparent;
        border:0;
        border-radius:0;
        box-shadow:none;
        padding:0;
        margin:0 0 14px;
    }

    .pos-title-block{
        flex:0 0 auto;
        display:flex;
        align-items:center;
    }

    .desktop-brand-logo{
        display:block;
        width:auto;
        height:44px;
        max-width:200px;
        max-height:52px;
        object-fit:contain;
    }

    .desktop-search-wrap{
        flex:1 1 auto;
        min-width:260px;
        max-width:560px;
    }

    .desktop-search-wrap input{
        width:100%;
        height:46px;
        min-height:46px;
        border-radius:14px;
        box-sizing:border-box;
        padding:0 16px;
        background:var(--card);
        color:var(--text);
        border:1px solid rgba(0,0,0,.08);
        font-size:15px;
        font-weight:800;
        outline:none;
    }

    .desktop-search-wrap input:focus{
        border-color:var(--primary);
        box-shadow:0 0 0 4px rgba(200,155,109,.18);
    }

    .desktop-history-btn{
        flex:0 0 auto;
    }

    .desktop-category-wrap{
        display:flex !important;
        flex-wrap:wrap;
        align-items:flex-start;
        align-content:flex-start;
        justify-content:flex-start;
        gap:10px 12px;
        background:transparent;
        border:0;
        border-radius:0;
        box-shadow:none;
        padding:0;
        margin:0 0 18px;
        min-height:0;
        height:auto;
    }

    .desktop-category-wrap .pos-cat{
        flex:0 0 auto;
        width:auto;
        max-width:none;
        min-height:44px;
        height:44px;
        padding:0 18px;
        border-radius:16px;
        white-space:nowrap;
    }

    .pos-cat{
        background:var(--card);
        border:1px solid rgba(0,0,0,.08);
        color:var(--text);
    }

    .pos-cat.active{
        background:var(--primary);
        border-color:var(--primary-dark);
        color:#fff;
    }

    #tabletOrderDrawerToggle,
    #tabletOrderDrawerOverlay{
        display:none !important;
    }

    .receipt-panel{
        position:static !important;
        transform:none !important;
        width:var(--pos-receipt-width, 420px) !important;
        height:auto !important;
        max-height:none !important;
    }

    .pos-screen{
        display:grid !important;
        grid-template-columns:minmax(0, 1fr) var(--pos-receipt-width, 420px) !important;
    }
}

@media (min-width: 901px) and (pointer: fine){
    #historyModalBackdrop{
        display:flex;
        align-items:center;
        justify-content:center;
        padding:44px;
    }
    #historyModalBackdrop .history-modal{
        width:min(1180px, calc(100vw - 88px));
        max-width:1180px;
        height:min(760px, calc(100vh - 88px));
        max-height:none;
        padding:0;
        border-radius:24px;
        background:#f8fafc;
        box-shadow:0 34px 110px rgba(15,23,42,.34), 0 14px 36px rgba(15,23,42,.18);
        overflow:hidden;
        display:grid;
        grid-template-rows:auto 1fr auto;
    }
    #historyModalBackdrop .history-modal > h3{
        margin:0;
        padding:26px 72px 22px 32px;
        background:#fff;
        border-bottom:1px solid rgba(15,23,42,.08);
        font-size:28px;
        line-height:1.1;
        font-weight:950;
        letter-spacing:-.035em;
        color:#0f172a;
        text-align:left;
    }
    #historyModalBackdrop #historyListWrap{
        min-height:0;
        overflow-y:auto;
        overflow-x:hidden;
        padding:24px 28px;
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:18px;
        align-content:start;
    }
    #historyModalBackdrop .history-card{
        margin:0;
        padding:20px 22px;
        border-radius:20px;
        border:1px solid rgba(15,23,42,.10);
        background:#fff;
        box-shadow:0 10px 28px rgba(15,23,42,.07), 0 2px 8px rgba(15,23,42,.04);
        min-height:190px;
        display:flex;
        flex-direction:column;
        cursor:pointer;
        transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    }
    #historyModalBackdrop .history-card:hover{
        transform:translateY(-2px);
        box-shadow:0 18px 44px rgba(15,23,42,.12), 0 4px 12px rgba(15,23,42,.06);
        border-color:rgba(214,170,121,.55);
    }
    #historyModalBackdrop .history-card .history-details,
    #historyModalBackdrop .history-card-expanded .history-details{
        display:none;
    }
    #historyModalBackdrop .history-card-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:12px;
        margin-top:auto;
        padding-top:16px;
    }
    #historyModalBackdrop .history-card button{
        min-height:44px;
        border-radius:14px;
        font-size:13px;
        font-weight:950;
        padding:0 18px;
        cursor:pointer;
    }
    #historyModalBackdrop .history-btn-show{
        background:#0f172a;
        color:#fff;
        border:1px solid #0f172a;
    }
#historyModalBackdrop .history-btn-repeat{
    background:#d6aa79;
    color:#fff;
    border:1px solid #d6aa79;
    grid-column:1 / -1;
}
    #historyModalBackdrop .history-actions-row{
        padding:14px 28px 22px;
        background:#fff;
        border-top:1px solid rgba(15,23,42,.08);
        margin:0;
        justify-content:flex-end;
    }
    .history-detail-popup-backdrop{
        position:fixed;
        inset:0;
        z-index:102000;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:40px;
        background:rgba(15,23,42,.54);
        backdrop-filter:blur(8px);
    }
    .history-detail-popup{
        width:min(720px, calc(100vw - 96px));
        max-height:min(760px, calc(100vh - 96px));
        background:#fff;
        border-radius:24px;
        box-shadow:0 34px 110px rgba(15,23,42,.34), 0 14px 36px rgba(15,23,42,.18);
        overflow:hidden;
        display:flex;
        flex-direction:column;
    }
    .history-detail-popup-head{
        padding:24px 28px 18px;
        border-bottom:1px solid rgba(15,23,42,.08);
        display:flex;
        justify-content:space-between;
        gap:18px;
        background:#fff;
    }
    .history-detail-popup-title{
        margin:0;
        font-size:24px;
        line-height:1.15;
        font-weight:950;
        letter-spacing:-.03em;
        color:#0f172a;
    }
    .history-detail-popup-subtitle{
        margin-top:6px;
        font-size:13px;
        font-weight:750;
        color:#64748b;
    }
    .history-detail-popup-close{
        width:40px;
        height:40px;
        border-radius:14px;
        border:1px solid rgba(15,23,42,.10);
        background:#f1f5f9;
        color:#0f172a;
        font-size:20px;
        font-weight:900;
        cursor:pointer;
        flex:0 0 auto;
    }
    .history-detail-popup-body{
        padding:20px 28px 24px;
        overflow-y:auto;
        min-height:0;
    }
    .history-detail-popup-actions{
        padding:16px 28px 24px;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:14px;
        border-top:1px solid rgba(15,23,42,.08);
        background:#fff;
    }
    .history-detail-popup-actions button{
        min-height:46px;
        border-radius:14px;
        font-size:13px;
        font-weight:950;
        cursor:pointer;
    }
    .history-detail-popup-actions .history-popup-show{
        background:#0f172a;
        color:#fff;
        border:1px solid #0f172a;
    }
    .history-detail-popup-actions .history-popup-restore{
        background:#d6aa79;
        color:#fff;
        border:1px solid #d6aa79;
    }
    .pos-product{
        position:relative;
        overflow:hidden;
        height:auto;
        min-height:max(190px, var(--pos-product-min-height, 166px));
        padding-bottom:56px;
    }
    .product-desc{
        max-height:3.5em;
        overflow:hidden;
    }
    .product-price{
        display:inline-flex !important;
        visibility:visible !important;
        opacity:1 !important;
        position:absolute;
        right:12px;
        bottom:10px;
        z-index:2;
    }
}
@media (min-width: 1280px){
    #historyModalBackdrop #historyListWrap{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}