/* ============================================================
   Mika Sugar POS — visual system
   Same selectors as before (pos.js + extension scripts read
   these class/ID names directly) — only the look changed.
   ============================================================ */

:root{
  --bg:#0b0912;
  --card:#1c1523;
  --card2:#241a2c;
  --card3:#2c2036;
  --line:#372a44;
  --line-soft:#2a2033;
  --text:#fdf8f5;
  --muted:#ab9dbb;
  --pink:#ff5c8a;
  --pink2:#ff8a63;
  --purple:#9a76ff;
  --mint:#6fe3bd;
  --yellow:#ffd166;
  --danger:#ff6b81;

  --r-lg:22px;
  --r-md:15px;
  --r-sm:10px;
  --shadow:0 26px 60px -12px #04020a80;
  --shadow-sm:0 10px 26px -10px #04020a70;
  --head-font:"Baloo 2","Cairo",sans-serif;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:
    radial-gradient(680px 420px at 10% -6%,#3a1e46 0,transparent 60%),
    radial-gradient(620px 420px at 96% 6%,#241a44 0,transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:Cairo,sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

.shell{max-width:1500px;margin:auto;padding:0 24px 34px}

button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--pink);outline-offset:2px;border-radius:8px
}
::selection{background:#ff5c8a55}
::placeholder{color:#7d6f8f}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:20;
  min-height:78px;display:flex;align-items:center;gap:22px;
  border-bottom:1px solid var(--line-soft);
  background:#0b0912ee;
  backdrop-filter:blur(10px);
}
.brand{display:flex;align-items:center;gap:11px;font-size:25px;margin-inline-end:auto}
.brand b{font:700 19px/1.05 var(--head-font)}
.brand small{display:block;color:var(--muted);font-size:10px;font-weight:400;letter-spacing:.03em;margin-top:2px}
nav{display:flex;gap:4px;background:var(--card2);padding:4px;border-radius:13px;border:1px solid var(--line-soft)}
nav button,#lang{
  border:0;background:transparent;color:var(--muted);
  padding:9px 14px;border-radius:10px;font-weight:600;font-size:14px;
  transition:color .15s, background .15s;
}
nav button:hover{color:var(--text)}
nav button.active{background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff;box-shadow:0 6px 16px -4px #ff5c8a55}
#lang{background:var(--card2);color:var(--text);border:1px solid var(--line)}
#lang:hover{border-color:var(--purple)}

/* ---------- pages ---------- */
.page{display:none;padding-top:22px}
.page.active{display:block;animation:page-in .22s ease-out}
@keyframes page-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.pos{display:grid;grid-template-columns:minmax(0,1fr) 410px;gap:18px;align-items:start}

.card{
  background:linear-gradient(160deg,#211829,#170f1e);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.menu,.checkout{padding:24px}

.head,.pageHead{display:flex;justify-content:space-between;align-items:center;gap:12px}
.head small,.pageHead small,.cameraModal>small{
  color:var(--pink);font-weight:800;font-size:11px;letter-spacing:.06em;
  display:block;margin-bottom:2px;
}
.head h1,.head h2,.pageHead h1,.cameraModal h2{
  margin:0;font:700 26px/1.15 var(--head-font);
}
.head input,.pageHead input{
  border:1px solid var(--line);background:var(--card2);color:var(--text);
  padding:11px 14px;border-radius:12px;min-width:210px;
  transition:border-color .15s, box-shadow .15s;
}
.head input:focus,.pageHead input:focus{border-color:var(--purple);box-shadow:0 0 0 3px #9a76ff26;outline:none}

/* ---------- category chips ---------- */
.chips{display:flex;gap:7px;margin:20px 0;overflow:auto;padding-bottom:2px}
.chips::-webkit-scrollbar{height:0}
.chips button,.payments button,.ages button{
  border:1px solid var(--line);background:transparent;color:var(--muted);
  border-radius:20px;padding:8px 14px;white-space:nowrap;font-weight:600;font-size:13px;
  transition:.15s;
}
.chips button:hover{border-color:var(--purple);color:var(--text)}
.chips button.active,.payments button.active,.ages button.active{
  background:linear-gradient(135deg,var(--purple),#7a5cf0);border-color:transparent;color:#fff;
  box-shadow:0 6px 16px -6px #9a76ff66;
}

/* ---------- product grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.product{
  position:relative;min-height:150px;border:1px solid var(--line);
  background:linear-gradient(150deg,#32243c,#221a2a);color:var(--text);
  border-radius:18px;padding:15px;text-align:start;overflow:hidden;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.product::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(120px 90px at 85% -10%,#ffffff14,transparent 70%);
  pointer-events:none;
}
.product:hover{transform:translateY(-3px);border-color:#7d6a92;box-shadow:var(--shadow-sm)}
.product:active{transform:translateY(-1px) scale(.99)}
.product em{font-style:normal;font-size:36px;display:block;margin-bottom:14px;line-height:1}
.product small{display:block;color:var(--muted);font-size:12.5px}
.product strong{
  position:absolute;inset-inline-end:11px;bottom:11px;color:#1c1420;
  background:var(--yellow);padding:4px 9px;border-radius:9px;font-size:13px;font-weight:800;
}
.product:nth-child(3n+2){background:linear-gradient(150deg,#243a34,#1c2a26)}
.product:nth-child(3n+3){background:linear-gradient(150deg,#3a3122,#2a2419)}

/* ---------- checkout column ---------- */
.checkout{display:flex;flex-direction:column;min-height:680px}
.text{border:0;background:none;color:var(--muted);font-weight:600}
.text:hover{color:var(--text)}
.danger{color:var(--danger)}

.field{display:block;margin:12px 0}
.field span{display:block;color:var(--muted);font-size:12px;margin-bottom:4px;font-weight:600}
.field input,.field select,.field textarea,.discount input,.discount select{
  width:100%;border:1px solid var(--line);background:var(--card2);color:var(--text);
  padding:10px 11px;border-radius:10px;transition:border-color .15s, box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus,.discount input:focus,.discount select:focus{
  border-color:var(--purple);box-shadow:0 0 0 3px #9a76ff26;outline:none;
}
.field textarea{min-height:72px;resize:vertical}

.cart{flex:1;min-height:150px;margin:8px 0}
.empty{color:var(--muted);text-align:center;padding:44px 20px;font-size:14px;line-height:1.6}

.cartItem{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;
  padding:11px 4px;border-bottom:1px solid var(--line-soft);border-radius:10px;
  transition:background .15s;
}
.cartItem:hover{background:#ffffff06}
.cartItem small{display:block;color:var(--muted);margin-top:2px}
.qty{display:flex;align-items:center;gap:7px;background:var(--card2);border-radius:10px;padding:4px;border:1px solid var(--line-soft)}
.qty button{border:0;background:var(--card3);color:#fff;border-radius:7px;width:26px;height:26px;font-weight:700;line-height:1}
.qty button:hover{background:var(--purple)}

.photo{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:linear-gradient(120deg,#33203a,#1f2c28);
  border:1px dashed #6d5878;border-radius:14px;padding:12px;
}
.photo small{display:block;color:var(--muted);font-size:10.5px;margin-top:2px}
.photo button,.upload button,.upload label{
  border:0;background:linear-gradient(120deg,var(--pink),var(--pink2));color:#fff;
  border-radius:10px;padding:9px 12px;font-weight:700;font-size:13px;box-shadow:0 8px 18px -8px #ff5c8a70;
}

.discount{display:grid;grid-template-columns:1fr 92px 92px;gap:7px;align-items:center;margin-top:12px}

.totals{margin-top:6px}
.totals p{display:flex;justify-content:space-between;color:var(--muted);margin:7px 0;font-size:14px}
.totals b{color:var(--text)}
.totals .total{border-top:1px solid var(--line);padding-top:11px;font-size:20px}
.total b{color:var(--yellow);font:800 22px var(--head-font)}

.payments{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}

.primary{
  border:0;background:linear-gradient(105deg,var(--pink),var(--pink2));color:#fff;
  padding:14px;border-radius:13px;font-weight:800;font-size:15px;
  box-shadow:0 14px 30px -10px #ff5c8a66;
  transition:transform .12s, box-shadow .12s, opacity .12s;
}
.primary:hover{transform:translateY(-1px);box-shadow:0 18px 34px -10px #ff5c8a80}
.primary:active{transform:translateY(0)}
.primary:disabled{opacity:.4;box-shadow:none;transform:none;cursor:default}

/* ---------- pages: products / customers / reports ---------- */
.pageHead{margin-bottom:16px}
.table{padding:6px 18px 14px;overflow:auto}
table{border-collapse:collapse;width:100%}
th,td{text-align:start;padding:13px 12px;border-bottom:1px solid var(--line-soft)}
thead th{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
tbody tr:hover{background:#ffffff05}
td button{border:1px solid var(--line);background:var(--card2);color:var(--text);border-radius:8px;padding:6px 10px;margin:2px;font-weight:600;font-size:12.5px}
td button:hover{border-color:var(--purple)}

.stats{display:grid;grid-template-columns:repeat(2,200px);gap:11px;margin-bottom:16px}
.stats.four{grid-template-columns:repeat(4,1fr)}
.stats>div{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:17px 17px 17px 20px;overflow:hidden;
}
.stats>div::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--pink),var(--purple))}
.stats span,.stats b{display:block}
.stats span{color:var(--muted);font-size:12px;font-weight:600}
.stats b{font:800 22px var(--head-font);margin-top:6px}

.report{display:grid;grid-template-columns:1fr 1.4fr;gap:26px;padding:20px}
.report h3{font:700 15px var(--head-font);margin:0 0 10px}
.saleRow,.bar p{display:flex;justify-content:space-between}
.saleRow{padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.bar{margin:10px 0}
.bar i{display:block;height:7px;background:linear-gradient(90deg,var(--purple),var(--pink));border-radius:7px}

/* ---------- dialogs / modals ---------- */
dialog{border:0;padding:0;background:transparent;color:var(--text);width:min(530px,calc(100% - 22px))}
dialog::backdrop{background:#08060bd9;backdrop-filter:blur(8px)}
.modal{
  position:relative;background:linear-gradient(160deg,#221929,#180f1f);
  border:1px solid var(--line);border-radius:20px;padding:22px;
  max-height:calc(100vh - 22px);overflow:auto;box-shadow:var(--shadow);
}
.x{
  position:absolute;top:14px;inset-inline-end:14px;border:0;background:var(--card2);
  color:#fff;border-radius:9px;font-size:19px;width:34px;height:34px;line-height:1;
}
.x:hover{background:var(--purple)}

.cameraStage{height:250px;background:#0b090e;border-radius:14px;overflow:hidden;border:1px solid var(--line-soft)}
.cameraStage video,.cameraStage canvas{width:100%;height:100%;object-fit:cover}
.cameraStage canvas{display:none}

.upload{display:flex;gap:8px;margin:9px 0}
.upload label{background:linear-gradient(120deg,var(--purple),#7a5cf0);cursor:pointer;box-shadow:0 8px 18px -8px #9a76ff70}
.upload input{position:absolute;opacity:0;width:1px}

.pickerHead{display:flex;justify-content:space-between;align-items:flex-end;margin:13px 0 7px}
.pickerHead small{color:var(--muted)}

.ages{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ages button{border-radius:9px;padding:7px}

.characters{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}
.character{
  aspect-ratio:1;border:2px solid transparent;border-radius:13px;
  background-image:url('characters.webp');background-size:400% 300%;position:relative;
  transition:border-color .15s;
}
.character:hover{border-color:#7d6a92}
.character.active{border-color:var(--pink);box-shadow:0 0 0 3px #ff5c8a33}
.character span{
  position:absolute;bottom:4px;left:4px;right:4px;background:#100c15e0;color:#fff;
  border-radius:6px;font-size:10px;padding:4px;text-align:center;font-weight:600;
}

.receipt{display:none}

/* ---------- responsive ---------- */
@media(max-width:900px){
  header{flex-wrap:wrap;padding:10px 0;position:static}
  nav{order:3;width:100%;overflow:auto;background:transparent;border:0;padding:0}
  .pos{grid-template-columns:1fr}
  .stats.four{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .shell{padding:0 12px 22px}
  .menu,.checkout{padding:16px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .head{align-items:flex-start;gap:9px;flex-direction:column}
  .head input{width:100%}
  .stats,.stats.four,.report{grid-template-columns:1fr}
  .pageHead{align-items:flex-start;gap:9px}
  .ages{grid-template-columns:repeat(2,1fr)}
}

/* ---------- print receipt ---------- */
@media print{
  body>*:not(.receipt){display:none!important}
  .receipt{
    display:block!important;width:72mm;margin:auto;color:#000;background:#fff;
    font:12px/1.4 Cairo,sans-serif;text-align:center;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .receipt h2{font-size:22px;margin:0}
  .receipt p{margin:3px}
  .receipt hr{border:0;border-top:1px dashed #000}
  .receiptColumns,.printLine{display:flex;justify-content:space-between;margin:5px 0}
  .receiptColumns{padding:4px 0;border-bottom:1px solid #000;font-size:10px}
  #lookalike{display:grid;grid-template-columns:1fr 8mm 1fr;align-items:center;gap:2mm;margin-top:10px}
  #lookalike.characterOnly{grid-template-columns:1fr;justify-items:center}
  #lookalike.characterOnly>div:first-child,#lookalike.characterOnly>b{display:none}
  #lookalike img{width:27mm;height:27mm;object-fit:cover;border:2px solid #ff5a88;border-radius:8px}
  #lookalike span{display:block;font-size:9px;font-weight:bold}
  #lookalike b{font-size:22px;color:#9675ff}
  .receipt h3{border:2px solid #ff5a88;color:#d92d6f;border-radius:7px;padding:5px;font-size:12px}
}

/* character idle/tap motion */
.character.active{animation:character-breathe 2.4s ease-in-out infinite}
.character:active{animation:character-pop .32s ease-out}
@keyframes character-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.025)}}
@keyframes character-pop{0%{transform:scale(.92) rotate(-2deg)}70%{transform:scale(1.06) rotate(1deg)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.character.active,.character:active{animation:none}}
@media print{.character,.character.active{animation:none!important;transform:none!important}}

/* v40: custom character / thermal receipt reliability */
.character.custom{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}
@media print{
  #printCharacter{display:block!important;visibility:visible!important;opacity:1!important;width:27mm!important;height:27mm!important;object-fit:cover!important;max-width:27mm!important}
  .receipt #lookalike{break-inside:avoid;page-break-inside:avoid}
}