@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Lao:wght@300;400;600;700&display=swap');

:root {
  --bg: #0B0F14;
  --surface: #10161C;
  --surface2: #121922;
  --border: rgba(148,163,184,.16);
  --text: #F1F5F9;
  --muted: rgba(241,245,249,.68);
  --accent: #3B82F6;
  --accent2: #60A5FA;
  --danger: #EF4444;
  --success: #22C55E;
  --warning: #F59E0B;
  --shadow: 0 12px 40px rgba(0,0,0,.35);
  --radius: 16px;
  --radius-sm: 12px;
  --maxw: 1180px;
}

/* Themes */
:root[data-theme="blue"]{
  --accent:#3B82F6; --accent2:#60A5FA;
  --bg:#0B1220; --surface:#111B2E; --surface2:#0E1727;
  --border:rgba(148,163,184,.18);
  --text:#EAF1FF; --muted:rgba(234,241,255,.68);
}
:root[data-theme="silver"]{
  --accent:#C9D1D9; --accent2:#9AA4AE;
  --bg:#0A0D10; --surface:#10161C; --surface2:#0F141A;
  --border:rgba(201,209,217,.16);
  --text:#F4F7FA; --muted:rgba(244,247,250,.70);
}
:root[data-theme="gray"]{
  --accent:#94A3B8; --accent2:#CBD5E1;
  --bg:#0B0F14; --surface:#121922; --surface2:#0F1620;
  --border:rgba(148,163,184,.16);
  --text:#F1F5F9; --muted:rgba(241,245,249,.68);
}
:root[data-theme="dark"]{
  --accent:#A3AAB5; --accent2:#6B7280;
  --bg:#07090C; --surface:#0E141B; --surface2:#0A1016;
  --border:rgba(163,170,181,.14);
  --text:#F5F7FA; --muted:rgba(245,247,250,.66);
}
:root[data-theme="black"]{
  --accent:#E5E7EB; --accent2:#9CA3AF;
  --bg:#000000; --surface:#0B0F14; --surface2:#070B10;
  --border:rgba(229,231,235,.12);
  --text:#FFFFFF; --muted:rgba(255,255,255,.65);
}
:root[data-theme="jade"]{
  --accent:#10B981; --accent2:#34D399;
  --bg:#07120F; --surface:#0C1C17; --surface2:#081712;
  --border:rgba(16,185,129,.18);
  --text:#ECFDF5; --muted:rgba(236,253,245,.68);
}
:root[data-theme="purple"]{
  --accent:#8B5CF6; --accent2:#A78BFA;
  --bg:#0B0714; --surface:#120F24; --surface2:#0D0A1B;
  --border:rgba(139,92,246,.18);
  --text:#F5F3FF; --muted:rgba(245,243,255,.68);
}
:root[data-theme="wine"]{
  --accent:#E11D48; --accent2:#FB7185;
  --bg:#12070B; --surface:#1B0D12; --surface2:#13080D;
  --border:rgba(225,29,72,.16);
  --text:#FFF1F2; --muted:rgba(255,241,242,.68);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  font-family: 'Noto Sans Lao', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 700px at 10% -10%, rgba(255,255,255,.06), transparent 60%),
              radial-gradient(900px 500px at 110% 10%, rgba(255,255,255,.04), transparent 55%),
              var(--bg);
  color: var(--text);
}
a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

.container{ max-width: var(--maxw); margin: 0 auto; padding: 18px; }
.nav{
  position: sticky; top:0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(0,0,0,.45);
  border-bottom: 1px solid var(--border);
}
.nav-inner{ max-width: var(--maxw); margin:0 auto; padding: 12px 18px; display:flex; align-items:center; justify-content: space-between; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:32px; width:32px; border-radius: 10px; object-fit: cover; }
.brand .title{ font-weight: 800; letter-spacing: .2px; }
.nav-links{ display:flex; gap: 14px; align-items:center; flex-wrap: wrap; }
.badge{ display:inline-flex; gap:8px; align-items:center; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--border); color: var(--muted); font-size: 13px; }

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}
.card.pad{ padding: 18px; }
.card h2, .card h3{ margin: 0 0 10px 0; }
.muted{ color: var(--muted); }
.grid{ display:grid; gap: 14px; }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 980px){ .grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px){ .grid-4, .grid-3, .grid-2{ grid-template-columns: 1fr; } }

.hero{
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.35), rgba(0,0,0,.65));
}
.hero > *{ position: relative; z-index: 1; }
.hero h1{ font-size: 38px; margin: 10px 0 6px; }
.hero p{ margin: 0; color: rgba(255,255,255,.78); max-width: 56ch; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  user-select: none;
}
.btn:hover{ background: rgba(255,255,255,.10); text-decoration: none; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.btn-primary{
  border-color: rgba(0,0,0,0);
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  position: relative;
}
.btn-primary::before{
  content:"";
  position:absolute; inset:0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.btn-primary span{ position: relative; z-index:1; }
.btn-primary:hover{ background: rgba(255,255,255,.08); }

.btn-success{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35); }
.btn-danger{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.35); }
.btn-soft{ background: rgba(255,255,255,.04); }

.btn-login{ background: rgba(59,130,246,.18); border-color: rgba(59,130,246,.35); }
.btn-register{ background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.35); }

.input, select, textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.25);
  color: var(--text);
  outline: none;
  font-family: inherit;
}

/* Ensure form controls and pseudo buttons use the same font */
input, button, select, textarea{ font-family: inherit; }
input::file-selector-button,
input::-webkit-file-upload-button{ font-family: inherit; }
.input:focus, select:focus, textarea:focus{
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}
label{ display:block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field{ margin-bottom: 12px; }

.table{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--border);
}
.table th, .table td{
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}
.table th{ color: var(--muted); font-weight: 700; background: rgba(255,255,255,.04); }
.table tr:last-child td{ border-bottom: none; }

.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-size: 12px;
}
.pill.ok{ border-color: rgba(34,197,94,.35); color: rgba(187,247,208,.9); background: rgba(34,197,94,.12); }
.pill.warn{ border-color: rgba(245,158,11,.35); color: rgba(253,230,138,.92); background: rgba(245,158,11,.10); }
.pill.bad{ border-color: rgba(239,68,68,.35); color: rgba(254,202,202,.95); background: rgba(239,68,68,.10); }

.kbd{
  display:inline-block;
  padding: 3px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-size: 12px;
}

.footer{
  padding: 20px 0 34px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

/* POS: show messenger/delivery fields when toggled (CSS fallback)
   Helps in cases where JS is cached/outdated or an extension blocks scripts. */
@supports(selector(:has(*))){
  .card:has(#isDelivery:checked) #deliveryFields{ display:block !important; }
  .card:has(#printEnabled:checked) #printFields{ display:block !important; }
}

/* Print */
@media print{
  .no-print{ display:none !important; }
  body{ background: #fff !important; color: #000 !important; }
  .card{ box-shadow:none !important; border: none !important; background: transparent !important; }
}