:root{
  --bg:#f6f8fc;
  --surface:#ffffff;
  --text:#0b1b3a;
  --muted:#5f6f92;
  --line:#e6ecff;

  --brand:#4c8dff;
  --brand2:#2f6fe8;
  --brandSoft: rgba(76,141,255,.10);

  --ok:#1a9a4a;
  --danger:#e04545;

  --shadow: 0 12px 32px rgba(14,44,110,.10);
  --shadow2: 0 10px 24px rgba(14,44,110,.08);
  --radius: 18px;
  --radius2: 22px;

  --container: 1200px;

  --tap: 46px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{max-width:var(--container);margin:0 auto;padding:16px}
@media(min-width:960px){ .container{padding:22px} }

.row{display:flex;gap:12px;align-items:center}
.grid{display:grid;gap:12px}
.grid.cols2{grid-template-columns:repeat(2, minmax(0,1fr))}
.grid.cols3{grid-template-columns:repeat(3, minmax(0,1fr))}
.grid.cols4{grid-template-columns:repeat(4, minmax(0,1fr))}
@media(max-width:960px){
  .grid.cols3,.grid.cols4{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media(max-width:520px){
  .grid.cols2,.grid.cols3,.grid.cols4{grid-template-columns:repeat(2, minmax(0,1fr))}
}

.h1{font-size:26px;font-weight:950;letter-spacing:-.3px;margin:0}
.h2{font-size:16px;font-weight:900;margin:0}
.muted{color:var(--muted)}
.center{text-align:center}
.right{text-align:right}
.spacer{flex:1}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius2);
  box-shadow:var(--shadow2);
  padding:14px;
}
@media(min-width:960px){ .card{padding:18px} }

.card.flat{box-shadow:none}
.card.soft{background:linear-gradient(180deg, rgba(76,141,255,.09), rgba(255,255,255,1));}

.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.8);
  font-size:12px; font-weight:800;
}
.badge.blue{border-color:rgba(76,141,255,.25);background:rgba(76,141,255,.10);color:var(--text)}
.badge.ok{border-color:rgba(26,154,74,.28);background:rgba(26,154,74,.08)}

.btn{
  height:var(--tap);
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 14px;border-radius:14px;
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:0 6px 18px rgba(14,44,110,.08);
  font-weight:900; cursor:pointer;
  transition:transform .08s ease, box-shadow .12s ease, border-color .12s ease;
  user-select:none;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(14,44,110,.10)}
.btn:active{transform:translateY(0)}
.btn.primary{
  border-color:rgba(76,141,255,.35);
  background:linear-gradient(180deg, var(--brand), var(--brand2));
  color:#fff;
}
.btn.ghost{
  background:transparent;
  box-shadow:none;
}
.btn.danger{
  border-color:rgba(224,69,69,.35);
  background:rgba(224,69,69,.10);
  color:#7d0f0f;
  box-shadow:none;
}
.btn.full{width:100%}

.input{
  height:var(--tap);
  width:100%;
  border-radius:14px;
  border:1px solid var(--line);
  padding:0 14px;
  background:#fff;
  font-size:15px;
  outline:none;
}
.input:focus{border-color:rgba(76,141,255,.55); box-shadow:0 0 0 5px rgba(76,141,255,.10)}

select{
  height:var(--tap);
  border-radius:14px;
  border:1px solid var(--line);
  padding:0 12px;
  background:#fff;
  font-weight:800;
}

/* Topbar (desktop corporate) */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(246,248,252,.86);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-weight:950;font-size:18px;
}
.brandMark{
  width:30px;height:30px;border-radius:12px;
  background:linear-gradient(180deg, var(--brand), var(--brand2));
  box-shadow:0 10px 20px rgba(76,141,255,.22);
}
.desktopNav{display:flex;gap:10px;align-items:center}
.navLink{
  height:38px; padding:0 12px;border-radius:12px;
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid transparent;
  font-weight:900;color:var(--muted);
}
.navLink.active{color:var(--text);border-color:rgba(76,141,255,.22);background:rgba(76,141,255,.08)}

.mobileOnly{display:none}
.desktopOnly{display:flex}
@media(max-width:900px){
  .desktopOnly{display:none}
  .mobileOnly{display:block}
}

/* Bottom nav (mobile app-like) */
.bottomNav{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(246,248,252,.92);
  backdrop-filter: blur(14px);
  border-top:1px solid var(--line);
}
.bottomNavInner{
  max-width:var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.bottomTab{
  height:54px;border-radius:18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid transparent;
  color:var(--muted);
  background:rgba(255,255,255,.65);
}
.bottomTab.active{
  color:var(--text);
  border-color:rgba(76,141,255,.22);
  background:rgba(76,141,255,.10);
}
.bottomLabel{font-size:11px;font-weight:900;margin-top:4px}
.navIcon{width:22px;height:22px;color:currentColor}

/* Page spacing with bottom nav */
@media(max-width:900px){
  .container{padding-bottom:90px}
}

/* Catalog styles */
.hero{
  border-radius:var(--radius2);
  background:linear-gradient(135deg, rgba(76,141,255,.16), rgba(255,255,255,1));
  border:1px solid rgba(76,141,255,.18);
  box-shadow:var(--shadow);
  padding:16px;
}
@media(min-width:960px){ .hero{padding:22px} }
.heroGrid{display:grid;gap:12px}
@media(min-width:960px){ .heroGrid{grid-template-columns:1.2fr .8fr;align-items:center} }
.heroTitle{font-size:30px;font-weight:980;letter-spacing:-.5px;margin:0}
.heroSub{margin-top:8px;font-size:14px}

.searchBar{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-top:14px;
}
.searchBar .input{flex:1;min-width:240px}
.chips{display:flex;gap:10px;align-items:center;overflow:auto;padding-bottom:2px}
.chip{
  flex:0 0 auto;
  height:38px;padding:0 14px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.85);
  font-weight:900;color:var(--muted);cursor:pointer;
}
.chip.active{border-color:rgba(76,141,255,.26);background:rgba(76,141,255,.10);color:var(--text)}

.catGrid{display:grid;gap:12px;margin-top:12px}
@media(min-width:960px){ .catGrid{grid-template-columns:repeat(4, minmax(0,1fr))} }
@media(max-width:959px){ .catGrid{grid-template-columns:repeat(2, minmax(0,1fr))} }

.catTile{
  border-radius:22px;border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,1), rgba(76,141,255,.06));
  padding:14px; box-shadow:0 8px 22px rgba(14,44,110,.06);
  cursor:pointer;
}
.catTileTitle{font-weight:950}
.catTileHint{margin-top:6px;font-size:12px;color:var(--muted)}

.prodGrid{margin-top:12px}
.prodCard{
  border-radius:22px;border:1px solid var(--line);
  background:#fff;
  box-shadow:0 10px 22px rgba(14,44,110,.07);
  overflow:hidden;
  cursor:pointer;
}
.prodImg{
  height:140px;background:rgba(76,141,255,.08);
  display:flex;align-items:center;justify-content:center;
}
.prodImg img{width:100%;height:100%;object-fit:cover}
.prodBody{padding:12px}
.prodName{font-weight:950;line-height:1.2}
.prodMeta{margin-top:6px;display:flex;justify-content:space-between;gap:10px;align-items:end}
.prodPrice{font-size:18px;font-weight:980}
.prodBarcode{font-size:11px;color:var(--muted);font-weight:800}

/* Bonus styles */
.loyalWrap{display:grid;gap:12px;margin-top:12px}
@media(min-width:960px){ .loyalWrap{grid-template-columns:1fr .9fr} }

.loyalCard{
  border-radius:26px;
  background:linear-gradient(135deg, rgba(76,141,255,1), rgba(47,111,232,1));
  color:#fff;
  padding:18px;
  box-shadow:0 18px 42px rgba(76,141,255,.28);
  position:relative;
  overflow:hidden;
}
.loyalCard:before{
  content:"";
  position:absolute;inset:-60px;
  background:radial-gradient(circle at 20% 20%, rgba(255,255,255,.25), transparent 40%),
             radial-gradient(circle at 80% 10%, rgba(255,255,255,.16), transparent 45%),
             radial-gradient(circle at 90% 80%, rgba(255,255,255,.18), transparent 50%);
}
.loyalCard > *{position:relative}
.loyalTitle{font-size:20px;font-weight:980}
.loyalNums{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.loyalStat{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  border-radius:16px;
  padding:10px 12px;
  min-width:160px;
}
.loyalStatVal{font-size:22px;font-weight:980;line-height:1.1}
.loyalStatLbl{font-size:12px;opacity:.9;font-weight:800;margin-top:4px}

.qrBox{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;
  padding:16px;
}
.qrActions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.fullscreenQR{
  position:fixed;inset:0;z-index:80;
  background:rgba(11,27,58,.75);
  display:none;align-items:center;justify-content:center;
  padding:18px;
}
.fullscreenQR .panel{
  background:#fff;border-radius:26px;max-width:520px;width:100%;
  padding:16px;border:1px solid var(--line);
}
.fullscreenQR.show{display:flex}

/* Receipt printing section kept from POS */
#printMount{display:none}
@media print{
  body *{visibility:hidden !important}
  #printMount, #printMount *{visibility:visible !important}
  #printMount{display:block;position:absolute;left:0;top:0}
}


/* --- Page loader (catalog/bonus/profile only) --- */
.pageLoader{
  position:fixed; inset:0; z-index:70;
  display:flex; align-items:center; justify-content:center;
  background:rgba(246,248,252,.86);
  backdrop-filter: blur(10px);
}
.loaderCard{
  width:min(520px, calc(100% - 28px));
  border-radius:26px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadow);
  padding:16px;
}
.loaderTop{display:flex;gap:12px;align-items:center}
.spinner{
  width:34px;height:34px;border-radius:999px;
  border:3px solid rgba(76,141,255,.18);
  border-top-color: rgba(76,141,255,.95);
  animation:spin .9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg)} }
.skel{
  height:14px;border-radius:999px;
  background:linear-gradient(90deg, rgba(76,141,255,.10), rgba(76,141,255,.22), rgba(76,141,255,.10));
  background-size: 240% 100%;
  animation:shimmer 1.15s ease-in-out infinite;
}
@keyframes shimmer{ 0%{background-position:0% 0} 100%{background-position:100% 0} }
.skelRow{display:grid;gap:10px;margin-top:14px}
.skelGrid{display:grid;gap:10px;margin-top:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:960px){ .skelGrid{grid-template-columns:repeat(4,1fr)} }
.skelCard{height:88px;border-radius:22px;border:1px solid var(--line);background:rgba(76,141,255,.06)}

/* Small UX fixes */
.bottomTab{touch-action:manipulation}
.btn, .chip, .bottomTab{ -webkit-tap-highlight-color: transparent; }

@media(max-width:520px){
  .heroTitle{font-size:26px}
  .prodImg{height:128px}
  .prodPrice{font-size:16px}
  .navLink{height:36px}
}


/* ===== POS (cashier) ===== */
.posRoot{padding:14px 14px 110px}
@media(min-width:960px){ .posRoot{padding:18px 18px 80px} }

.posTopBar{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:14px 14px;box-shadow:var(--shadow2);
}
.posBrand{font-weight:950;letter-spacing:.3px}
.posMeta{color:var(--muted);font-size:13px;margin-top:4px}
.posRightMeta{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.posBadge{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;border:1px solid var(--line);background:var(--bg);font-weight:800;font-size:12px}
.posBadge.ok{border-color:rgba(26,154,74,.25);background:rgba(26,154,74,.08);color:var(--ok)}
.posBadge.warn{border-color:rgba(224,69,69,.25);background:rgba(224,69,69,.08);color:var(--danger)}
.posClock{font-size:12px;color:var(--muted)}

.posLayout{display:grid;gap:14px;margin-top:14px}
@media(min-width:960px){
  .posLayout{grid-template-columns: 1.2fr .8fr;align-items:start}
}
.posPanel{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:14px;box-shadow:var(--shadow2);
}
.posPanelTitle{font-weight:950;margin-bottom:10px}
.posHint{color:var(--muted);font-size:13px;line-height:1.35}
.posInputLine{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--bg);border:1px solid var(--line);border-radius:14px;
  padding:10px 12px;margin-top:10px
}
.posBuffer{font-weight:900;letter-spacing:.6px}
.posPreview{margin-top:10px;border-radius:14px;border:1px dashed var(--line);padding:10px 12px}
.posPreview.good{border-color:rgba(26,154,74,.28);background:rgba(26,154,74,.06)}
.posPreview.bad{border-color:rgba(224,69,69,.28);background:rgba(224,69,69,.06)}
.posPreview b{display:block;margin-bottom:2px}

.posCartTable{width:100%;border-collapse:separate;border-spacing:0 10px}
.posCartRow{
  background:var(--bg);border:1px solid var(--line);border-radius:14px;
  padding:10px 12px;display:flex;justify-content:space-between;gap:10px;align-items:center
}
.posCartLeft{min-width:0}
.posCartName{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px}
.posCartSub{color:var(--muted);font-size:12px;margin-top:2px}
.posCartRight{display:flex;align-items:center;gap:10px}
.posQty{display:flex;align-items:center;gap:8px}
.posQtyBtn{
  width:38px;height:38px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);font-weight:950;cursor:pointer
}
.posQtyNum{min-width:32px;text-align:center;font-weight:950}
.posDelBtn{
  height:38px;border-radius:12px;border:1px solid rgba(224,69,69,.25);
  background:rgba(224,69,69,.08);color:var(--danger);font-weight:900;cursor:pointer;padding:0 10px
}
.posSum{font-weight:950;min-width:98px;text-align:right}

.posTotalBox{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:12px;padding:12px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,#ffffff, #f3f7ff)
}
.posTotalLabel{color:var(--muted);font-weight:900}
.posTotalValue{font-size:28px;font-weight:950;letter-spacing:-.5px}

.posActions{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(246,248,252,.88);backdrop-filter: blur(10px);
  border-top:1px solid var(--line);
  padding:12px 14px
}
.posActionsInner{max-width:var(--container);margin:0 auto;display:flex;gap:10px;flex-wrap:wrap}
.posBigBtn{
  height:var(--tap);padding:0 14px;border-radius:14px;border:1px solid var(--line);
  background:var(--surface);font-weight:950;cursor:pointer;display:inline-flex;align-items:center;gap:10px
}
.posBigBtn.primary{background:linear-gradient(180deg,var(--brand),var(--brand2));border-color:rgba(47,111,232,.3);color:#fff}
.posBigBtn.danger{background:rgba(224,69,69,.08);border-color:rgba(224,69,69,.28);color:var(--danger)}
.posKeyHint{
  font-size:12px;font-weight:950;padding:4px 8px;border-radius:999px;
  background:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.35)
}
.posBigBtn:not(.primary) .posKeyHint{background:var(--bg);border-color:var(--line);color:var(--muted)}

.posOverlay{
  position:fixed;inset:0;z-index:90;background:rgba(11,27,58,.55);
  display:flex;align-items:center;justify-content:center;padding:14px
}
.posModal{
  width:min(520px, 100%);background:var(--surface);border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--shadow);padding:14px
}
.posModalTitle{font-weight:950;font-size:18px}
.posModalText{color:var(--muted);margin-top:8px;line-height:1.35}
.posModalActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.posModal .posBigBtn{flex:1;justify-content:center}

.posReceiptWrap{max-height:70vh;overflow:auto;margin-top:10px;border:1px solid var(--line);border-radius:14px;padding:10px;background:var(--bg)}
/* receipt block already styled in POS builder */
.receipt{width: 280px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color:#000}
.receipt .title{font-weight:900; font-size:20px; text-align:center}
.receipt .small{font-size:12px}
.receipt .line{border-top:1px dashed #000; margin:8px 0}
.receipt .rrow{display:flex;justify-content:space-between;gap:10px}
.receipt .center{text-align:center}
.receipt table{width:100%;border-collapse:collapse}
.receipt td{font-size:12px;padding:2px 0;vertical-align:top}
.receipt .right{text-align:right}

/* ===== Customer display ===== */
.displayRoot{
  min-height:100vh;display:flex;flex-direction:column;gap:14px;
  padding:18px;background: radial-gradient(900px 400px at 50% -120px, rgba(76,141,255,.22), transparent 60%), var(--bg);
}
.displayTop{
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:22px;
  padding:18px;box-shadow:var(--shadow2)
}
.displayBrand{font-weight:950;font-size:26px;letter-spacing:.4px}
.displayAddr{color:var(--muted);font-size:16px;margin-top:6px}
.displayReg{font-weight:950}
.displayMain{flex:1;display:grid;gap:14px}
@media(min-width:960px){ .displayMain{grid-template-columns: 1fr .55fr} }

.displayPanel{
  background:var(--surface);border:1px solid var(--line);border-radius:22px;
  padding:18px;box-shadow:var(--shadow2)
}
.displayItems{display:flex;flex-direction:column;gap:10px}
.displayItemRow{
  display:flex;justify-content:space-between;gap:10px;align-items:center;
  background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:14px
}
.displayItemName{font-weight:950;font-size:22px}
.displayItemMeta{color:var(--muted);font-size:16px;margin-top:6px}
.displayItemSum{font-weight:950;font-size:22px;min-width:140px;text-align:right}

.displayTotalBox{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  min-height:240px;border-radius:22px;
  background: linear-gradient(180deg, rgba(76,141,255,.14), rgba(76,141,255,.06));
  border:1px solid rgba(76,141,255,.20)
}
.displayTotalLabel{color:var(--muted);font-weight:950;letter-spacing:.3px}
.displayTotalValue{font-size:86px;font-weight:950;letter-spacing:-2px;margin-top:10px}
.displayCenterMessage{
  flex:1;display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:64px;font-weight:950;letter-spacing:-1px;padding:40px
}
.displayBanner{
  margin-top:14px;display:inline-flex;align-items:center;justify-content:center;
  padding:14px 18px;border-radius:999px;border:1px solid rgba(76,141,255,.22);
  background:rgba(76,141,255,.10);font-weight:950;font-size:28px
}
@media(max-width:960px){
  .displayTotalValue{font-size:66px}
  .displayCenterMessage{font-size:42px}
  .displayItemName{font-size:18px}
}

/* hide top nav on POS and display pages */
body.posPage .topbar, body.displayPage .topbar, body.posPage .bottomNav, body.displayPage .bottomNav{display:none !important}


/* --- Admin modal overlay --- */
.overlay{
  position:fixed; inset:0; z-index:95;
  background:rgba(11,27,58,.44);
  backdrop-filter: blur(10px);
  display:flex; align-items:center; justify-content:center;
  padding:14px;
}
.modal{
  width:min(820px, 100%);
  max-height: calc(100vh - 28px);
  overflow:auto;
  border-radius:26px;
}
.modal .input{ font-size:16px; }

/* --- Admin modal overlay --- */
.adminOverlay{
  position:fixed; inset:0; z-index:80;
  background:rgba(11,27,58,.45);
  backdrop-filter: blur(10px);
  display:flex; align-items:center; justify-content:center;
  padding:14px;
}
.adminModal{
  width:min(720px, 100%);
  max-height:calc(100vh - 28px);
  overflow:auto;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.92);
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
  padding:14px;
}