/* ===================================================================
   MOTIK — shared design system
   Tokens mirrored 1:1 from the Flutter app's theme.dart so the web
   portal and the mobile app read as the same product:
     primaryAppColor   #0E63ED  -> --primary
     secondaryAppColor #E30511  -> --secondary (danger / destructive)
     scaffoldBackground #F7F7F7 -> --bg
     statusGreen/Yellow/Red/Orange -> badge colors
     commonRadius = 10 -> --radius
=================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Oswald:wght@500;600;700&family=JetBrains+Mono:wght@400;500&family=Poppins:wght@400;500;600;700;800&display=swap');

:root{
  /* -- brand, lifted straight from theme.dart -- */
  --primary:        #0E63ED;
  --primary-dark:   #0B4FC2;
  --primary-light:  rgba(14,99,237,.08);
  --primary-light-2:rgba(14,99,237,.14);

  --secondary:      #E30511;
  --secondary-dark: #B80410;
  --secondary-light:rgba(227,5,17,.08);

  --bg:        #F7F7F7;   /* scaffoldBackground */
  --surface:   #FFFFFF;   /* white */
  --surface-2: #F5F6F8;   /* greyShade100 */
  --surface-3: #EEEFF2;   /* greyShade200 */
  --border:    #E3E5E9;   /* greyShade300 */

  --text:       #111318;  /* black, slightly softened */
  --text-dim:   #6B7280;  /* greyShade600 */
  --text-faint: #9AA0AC;  /* greyShade500 */

  --success: #48C757; /* statusGreen */
  --warning: #C6B956; /* statusYellow */
  --danger:  #DC2749; /* statusRed */
  --orange:  #CD8039; /* statusOrange */

  --radius:    10px;  /* commonRadius */
  --radius-lg: 14px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(17,19,24,.04), 0 1px 1px rgba(17,19,24,.03);
  --shadow-md: 0 4px 16px rgba(17,19,24,.06), 0 1px 3px rgba(17,19,24,.05);
  --shadow-lg: 0 12px 32px rgba(17,19,24,.10);
  --shadow-primary:    0 8px 20px rgba(14,99,237,.22);
  --shadow-primary-sm: 0 3px 10px rgba(14,99,237,.18);

  --font-display: 'Oswald', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --ease: cubic-bezier(.4,0,.2,1);

  /* -- GOTIK storefront shell (header/footer + homepage) -- */
  --font-shell:  'Poppins', 'Inter', sans-serif;
  --shell-blue:  #1446C4;   /* top bar, hover states */
  --shell-blue-2:#1652DB;   /* primary buttons, links */
  --shell-navy:  #0B1F44;   /* headings, header text */
  --shell-red:   #E3141B;   /* active nav, sale price, red CTAs */
  --shell-footer:#0A1A3D;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection{ background: var(--primary); color:#fff; }
:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: var(--surface-2); }
::-webkit-scrollbar-thumb{ background: var(--border); border-radius: var(--radius-pill); border:2px solid var(--surface-2); }
::-webkit-scrollbar-thumb:hover{ background: var(--text-faint); }

/* ---------- Frappe web-template wrapper reset ----------
   Every page here extends templates/web.html for frappe.call()/CSRF/
   realtime (see js/api.js header) — that wraps our markup in Frappe's
   own chrome: #page-<name> > .page-content-wrapper > (.page-breadcrumbs,
   main.container.my-4 > (.page-header-wrapper, .page_content, .page-footer)).
   display:contents drops those wrapper boxes from layout (own header.site/
   main/footer.site become direct flex children of body again) without
   touching the DOM, so frappe.call/csrf/realtime keep working. */
[id^="page-"],
.page-content-wrapper,
main.container,
.page_content,
.page-content{ display: contents; }

.page-breadcrumbs,
.page-header-wrapper,
.page-header,
.page-footer{ display: none !important; }

/* Bootstrap's .row/.card load before this file; our rules win on the
   properties they set, but its layout properties survive where we never
   named them (.row's -15px gutters, .card's flex-column). */
.row{ margin-left: 0; margin-right: 0; }
.card{ display: block; min-width: 0; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  color: var(--text);
}
h1{ font-size: 2.25rem; line-height: 1.15; }
h2{ font-size: 1.5rem; line-height: 1.25; }
h3{ font-size: 1.12rem; }
a{ color: var(--primary); text-decoration: none; transition: color .15s var(--ease); }
a:hover{ color: var(--primary-dark); text-decoration: underline; }
p{ color: var(--text-dim); margin: 0 0 1em; }
code, .mono{ font-family: var(--font-mono); }
.eyebrow{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 600;
}

/* ---------- layout ---------- */
.wrap{ max-width: 1180px; margin: 0 auto; padding: 0 24px; width: 100%; }
main{ flex: 1; position: relative; z-index: 1; padding: 36px 0 72px; }
.grid{ display: grid; gap: 20px; }
.grid-items{ grid-template-columns: repeat(auto-fill, minmax(224px,1fr)); }
.grid-2{ grid-template-columns: 1fr 1fr; }
@media (max-width: 720px){ .grid-2{ grid-template-columns: 1fr; } }
.stack{ display:flex; flex-direction:column; gap:14px; }
.row{ display:flex; align-items:center; gap:12px; flex-wrap: wrap; }
.row.between{ justify-content: space-between; }
.section{ margin-bottom: 44px; }
.section > .row.between{ margin-bottom: 18px; }
.section > .row.between h2{
  margin-bottom: 0; position: relative; padding-left: 14px;
}
.section > .row.between h2::before{
  content:""; position:absolute; left:0; top:.15em; bottom:.15em; width:4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--primary), var(--primary-dark));
}

/* ---------- header / nav (GOTIK storefront header: top info bar,
   logo + search + account actions, category bar) ---------- */
.shell-wrap{ max-width: 1360px; margin: 0 auto; padding: 0 28px; width: 100%; }
header.site{
  position: relative; z-index: 50;
  background: #fff;
  font-family: var(--font-shell);
  box-shadow: 0 2px 10px rgba(11,31,68,.05);
}
.topbar{ background: var(--shell-blue); color:#fff; font-size:12.5px; font-weight:500; }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:36px; }
.topbar-item{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.topbar-item svg{ width:15px; height:15px; flex-shrink:0; color:#FFC83D; }
.topbar-center{ display:inline-flex; align-items:center; gap:14px; }
.topbar-center .topbar-item:nth-child(3) svg,
.topbar-center .topbar-item:nth-child(5) svg{ color:#4ADE80; }
.topbar-sep{ width:1px; height:14px; background: rgba(255,255,255,.35); }
.topbar-help, .topbar-help:visited{ color:#fff; }
.topbar-help:hover{ color:#fff; text-decoration:underline; }
.topbar-help svg{ color:#fff; }

.mainbar{ display:flex; align-items:center; gap:32px; padding: 18px 28px; }
.brand{ display:flex; align-items:center; flex-shrink:0; transition: opacity .15s var(--ease); }
.brand:hover{ opacity:.85; }
.brand-logo{ height:52px; display:block; }
/* Text fallback while images/logo_horiz.png isn't uploaded yet. */
.brand-wordmark{ font-family: var(--font-shell); font-weight:800; font-size:38px; line-height:52px; letter-spacing:.01em; color: var(--shell-blue); }

.hsearch{
  flex:1; max-width:620px; margin: 0 auto; display:flex; align-items:stretch; height:48px;
  border:1.5px solid #D5DDEA; border-radius:8px; background:#fff; overflow:hidden;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.hsearch:focus-within{ border-color: var(--shell-blue-2); box-shadow: 0 0 0 3px rgba(22,82,219,.12); }
.hsearch input{
  flex:1; min-width:0; border:none; border-radius:0; padding:0 18px; height:100%;
  font-family: var(--font-shell); font-size:14px; color: var(--shell-navy); background:transparent; box-shadow:none;
}
.hsearch input:focus{ outline:none; box-shadow:none; border:none; }
.hsearch input::placeholder{ color:#8A94A6; }
.hsearch-cat{ position:relative; display:flex; align-items:center; border-left:1.5px solid #E3E8F1; }
.hsearch-cat select{
  appearance:none; -webkit-appearance:none; border:none; border-radius:0; height:100%; width:170px;
  padding:0 34px 0 16px; background:transparent; box-shadow:none;
  font-family: var(--font-shell); font-size:13.5px; color: var(--shell-navy); cursor:pointer;
}
.hsearch-cat select:focus{ outline:none; box-shadow:none; }
.hsearch-cat svg{ position:absolute; right:12px; width:15px; height:15px; color:#6B7486; pointer-events:none; }
.hsearch button{
  width:56px; border:none; background: var(--shell-blue-2); color:#fff; cursor:pointer;
  display:grid; place-items:center; transition: background .15s var(--ease);
}
.hsearch button:hover{ background: var(--shell-blue); }
.hsearch button svg{ width:21px; height:21px; }

.hactions, #navRight{ display:flex; align-items:center; gap:28px; flex-shrink:0; }
.hact{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  background:none; border:none; padding:0; margin:0; cursor:pointer;
  font-family: var(--font-shell); color: var(--shell-navy); text-decoration:none;
}
a.hact:hover, button.hact:hover{ color: var(--shell-blue-2); text-decoration:none; }
.hact-icon{ position:relative; display:inline-flex; color: inherit; }
.hact-icon svg{ width:28px; height:28px; }
.hact-label{ font-size:13px; font-weight:500; }
.hact-text{ display:flex; flex-direction:column; line-height:1.3; }
.hact-text a, .hact-text b{ font-size:13px; font-weight:600; color: var(--shell-navy); }
.hact-text a + a{ font-weight:500; color:#4B5568; }
.hact-text a:hover{ color: var(--shell-blue-2); text-decoration:none; }
.hact-text small{ font-size:11.5px; font-weight:500; color:#5B6578; }
.role-tag.sales{ color: var(--shell-blue-2); }
.role-tag.customer{ color:#2f9d3d; }

.catbar{ border-top:1px solid #E7ECF3; background:#fff; }
.catbar-inner{ display:flex; align-items:center; gap:40px; height:56px; }
.allcats{ position:relative; flex-shrink:0; }
.allcats-btn{
  display:inline-flex; align-items:center; gap:12px; height:42px; width:226px; padding:0 18px;
  border:none; border-radius:5px; background: var(--shell-blue-2); color:#fff; cursor:pointer;
  font-family: var(--font-shell); font-size:14px; font-weight:600;
  transition: background .15s var(--ease);
}
.allcats-btn:hover{ background: var(--shell-blue); }
.allcats-btn svg{ width:19px; height:19px; }
.allcats-menu{
  position:absolute; left:0; top:calc(100% + 7px); width:260px; max-height:420px; overflow-y:auto; z-index:70;
  background:#fff; border:1px solid #E3E8F1; border-radius:8px; box-shadow: 0 16px 40px rgba(11,31,68,.14);
  padding:6px 0;
}
.allcats-menu a{ display:block; padding:10px 18px; font-size:14px; color: var(--shell-navy); }
.allcats-menu a:hover{ background:#F2F6FD; color: var(--shell-blue-2); text-decoration:none; }
.allcats-empty{ padding:12px 18px; font-size:13px; color:#8A94A6; }
.nav-links{ display:flex; align-items:stretch; gap:40px; height:100%; overflow-x:auto; scrollbar-width:none; }
.nav-links::-webkit-scrollbar{ display:none; }
.nav-links a{
  position:relative; display:flex; align-items:center; white-space:nowrap;
  font-family: var(--font-shell); font-size:14px; font-weight:500; color: var(--shell-navy);
  transition: color .15s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--shell-red);
  transform: scaleX(0); transition: transform .2s var(--ease);
}
.nav-links a:hover{ color: var(--shell-red); text-decoration:none; }
.nav-links a.active{ color: var(--shell-red); font-weight:600; }
.nav-links a.active::after{ transform: scaleX(1); }

@media (max-width: 1100px){
  .mainbar{ gap:22px; }
  .hactions, #navRight{ gap:20px; }
  .hsearch-cat select{ width:140px; }
}
@media (max-width: 900px){
  .topbar-center{ display:none; }
  .mainbar{ flex-wrap:wrap; padding:14px 20px; row-gap:14px; }
  .shell-wrap{ padding:0 20px; }
  .brand-logo{ height:42px; }
  .hactions, #navRight{ margin-left:auto; }
  .hsearch{ order:3; flex-basis:100%; max-width:none; }
  .catbar-inner{ gap:22px; }
  .allcats-btn{ width:auto; }
}
@media (max-width: 640px){
  .topbar-inner > .topbar-item:first-child{ display:none; }
  .topbar-inner{ justify-content:center; }
  .hact-label, .hact-text small{ display:none; }
  .hactions, #navRight{ gap:16px; }
  .hsearch-cat{ display:none; }
  .allcats-btn span{ display:none; }
  .allcats-btn{ padding:0 12px; }
  .nav-links{ gap:22px; }
}
.role-pill{
  font-family: var(--font-mono); font-size:.7rem; padding: 5px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-dim);
  text-transform: uppercase; letter-spacing:.06em; background: var(--surface-2);
  display:inline-flex; align-items:center; gap:6px;
}
.role-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background: currentColor; opacity:.65; }
.role-pill.customer{ border-color: var(--success); color: #2f9d3d; background: rgba(72,199,87,.1); }
.role-pill.sales{ border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.role-pill.guest{ border-color: var(--border); color: var(--text-faint); }
.cart-count{
  position:absolute; top:-6px; right:-9px; background: var(--shell-red); color:#fff;
  font-family: var(--font-shell); font-size:10.5px; font-weight:700;
  border-radius: 50%; min-width:18px; height:18px; padding:0 4px; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 2px #fff;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-display); font-weight:700; letter-spacing:.01em;
  font-size:.88rem; padding: 12px 24px; border-radius: var(--radius);
  border: 1px solid var(--primary);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  cursor:pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
  box-shadow: var(--shadow-primary-sm);
}
.btn:hover{
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-dark));
  border-color: var(--primary-dark);
  text-decoration:none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-primary);
}
.btn:active{ transform: translateY(0); box-shadow: var(--shadow-primary-sm); }
/* Solid buttons made from <a> tags: the browser's own default a:visited (and
   in some browsers a:hover) style is a type selector + pseudo-class, which
   beats a single class like .btn on specificity — that's what was showing
   through as grey text instead of staying white. .btn.ghost/.btn.danger are
   unaffected since their own :hover rules are more specific than this. */
.btn:link, .btn:visited, .btn:hover, .btn:active{ color:#fff; }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.btn.ghost{ background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: var(--shadow-sm); }
.btn.ghost:hover{ border-color: var(--primary); color: var(--primary); background: var(--primary-light); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn.danger{ background: linear-gradient(135deg, var(--secondary), var(--secondary-dark)); border-color: var(--secondary); color:#fff; box-shadow: 0 3px 10px rgba(227,5,17,.18); }
.btn.danger:hover{ background: linear-gradient(135deg, var(--secondary-dark), var(--secondary-dark)); border-color: var(--secondary-dark); box-shadow: 0 8px 20px rgba(227,5,17,.22); }
.btn.small{ padding:9px 16px; font-size:.78rem; border-radius: var(--radius-sm); }
.btn.block{ width:100%; }

/* ---------- cards ---------- */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 22px;
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.card.tight{ padding:16px; }
a.card:hover{ border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration:none; }

/* ---------- item detail carousel ---------- */
.carousel-arrow{
  position:absolute; top:50%; transform: translateY(-50%); width:34px; height:34px; border-radius:50%;
  border:1px solid var(--border); background: var(--surface); color: var(--text); font-size:1.2rem; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow: var(--shadow-sm);
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.carousel-arrow:hover{ background: var(--surface-2); border-color: var(--primary); }
.carousel-arrow.prev{ left:12px; }
.carousel-arrow.next{ right:12px; }
.carousel-thumbs{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.carousel-thumb{
  width:56px; height:56px; padding:0; border-radius: var(--radius-sm); border:2px solid var(--border);
  background: var(--surface-2); overflow:hidden; cursor:pointer; flex-shrink:0;
  transition: border-color .15s var(--ease);
}
.carousel-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.carousel-thumb:hover{ border-color: var(--primary); }
.carousel-thumb.active{ border-color: var(--primary); }

/* item card */
.item-card{
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-lg); overflow:hidden; display:flex; flex-direction:column;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.item-card:hover{ border-color: var(--primary); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.item-card .thumb{
  width:100%; aspect-ratio: 1/1; background: var(--surface-2);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.item-card .thumb img{ width:100%; height:100%; object-fit: cover; transition: transform .35s var(--ease); }
.item-card:hover .thumb img{ transform: scale(1.06); }
.item-card .thumb .ph{ color: var(--text-faint); font-family: var(--font-mono); font-size:.7rem; letter-spacing:.05em; }
.item-card .body{ padding: 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.item-card .cat{ font-family: var(--font-mono); font-size:.66rem; color: var(--text-faint); text-transform:uppercase; letter-spacing:.06em; }
.item-card .name{ font-weight:600; color: var(--text); font-size:.95rem; line-height:1.35; }
.item-card .price{ margin-top:auto; font-family: var(--font-mono); font-size:1.08rem; color: var(--primary); font-weight:700; }
.item-card .locked{ font-family: var(--font-mono); font-size:.72rem; color: var(--text-faint); }
.item-card .foot{ padding: 14px 16px; border-top:1px solid var(--border); background: var(--surface-2); }

/* ---------- forms ---------- */
label{ display:block; font-size:.78rem; color: var(--text-dim); margin-bottom:6px; font-weight:600; letter-spacing:.01em; }
input, select, textarea{
  width:100%; background: var(--surface); border:1px solid var(--border); color: var(--text);
  padding: 12px 14px; border-radius: var(--radius); font-family: var(--font-body); font-size:.92rem;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input::placeholder, textarea::placeholder{ color: var(--text-faint); }
select{
  appearance:none; -webkit-appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7280' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px;
}
input:focus, select:focus, textarea:focus{
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-light-2);
}
.field{ margin-bottom: 18px; }
.field .hint{ font-size:.75rem; color: var(--text-faint); margin-top:5px; }
.required-mark{ color: var(--danger); margin-left:3px; }
form .btn{ margin-top: 8px; }

/* ---------- typeahead (customer search) ---------- */
.typeahead{ position:relative; }
.typeahead-results{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:20;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); max-height:220px; overflow-y:auto;
}
.typeahead-results button{
  display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding: 10px 13px; font-size:.88rem; color: var(--text); border-bottom: 1px solid var(--border);
  transition: background .12s var(--ease);
}
.typeahead-results button:last-child{ border-bottom:none; }
.typeahead-results button:hover{ background: var(--surface-2); }
.typeahead-results .muted{ color: var(--text-faint); font-size:.8rem; }
.selected-chip{
  display:inline-flex; align-items:center; gap:8px; background: var(--primary-light); color: var(--primary-dark);
  border:1px solid var(--primary); border-radius: var(--radius-pill); padding: 6px 12px; font-size:.85rem; font-weight:600;
}
.selected-chip button{ background:none; border:none; color: var(--primary-dark); cursor:pointer; font-weight:700; font-size:.9rem; line-height:1; padding:0; }

/* ---------- loyalty redemption ---------- */
.loyalty-box{ background: var(--primary-light); border:1px solid var(--primary); border-radius: var(--radius-lg); padding:18px; }
.loyalty-box .row.between{ margin-bottom:10px; }

/* ---------- payment / pesapal ---------- */
.pesapal-frame-wrap{ border:1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden; margin-top:16px; box-shadow: var(--shadow-sm); }
.pesapal-frame-wrap iframe{ width:100%; height:520px; border:none; display:block; }
.pesapal-status{ display:flex; align-items:center; gap:10px; padding:12px 14px; font-size:.88rem; color: var(--text-dim); }
.spinner{
  width:16px; height:16px; border-radius:50%; border:2px solid var(--border); border-top-color: var(--primary);
  animation: spin .7s linear infinite; flex-shrink:0;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ---------- tables ---------- */
table{ width:100%; border-collapse: collapse; }
th,td{ text-align:left; padding: 13px 16px; border-bottom: 1px solid var(--border); font-size:.88rem; }
th{ font-family: var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color: var(--text-faint); background: var(--surface-2); font-weight:600; }
tr{ transition: background .12s var(--ease); }
tr:hover td{ background: var(--surface-2); }
.table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.table-wrap table{ border:none; }
.table-wrap tr:last-child td{ border-bottom: none; }

/* Denser table for list pages carrying more columns (orders/invoices/receipts) */
.table-compact th, .table-compact td{ padding: 9px 12px; font-size:.78rem; }
.table-compact th{ font-size:.64rem; }

/* ---------- badges / status (mapped 1:1 to theme.dart status colors) ---------- */
.badge{ display:inline-flex; align-items:center; gap:5px; font-family: var(--font-mono); font-size:.7rem; padding:5px 11px; border-radius: var(--radius-pill); text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background: currentColor; flex-shrink:0; }
.badge.ok{ background: rgba(72,199,87,.12); color: #2f9d3d; }        /* statusGreen */
.badge.pending{ background: rgba(198,185,86,.18); color: #8a7a1f; } /* statusYellow */
.badge.bad{ background: rgba(220,39,73,.12); color: var(--danger); }/* statusRed */
.badge.neutral{ background: rgba(205,128,57,.14); color: #a1642a; } /* statusOrange */

/* ---------- alerts / empty / loading ---------- */
.alert{ padding: 14px 16px 14px 18px; border-radius: var(--radius); font-size:.88rem; border:1px solid; border-left-width:3px; margin-bottom: 16px; }
.alert.error{ background: rgba(220,39,73,.06); border-color: var(--danger); color: var(--secondary-dark); }
.alert.success{ background: rgba(72,199,87,.08); border-color: var(--success); color: #237a2d; }
.alert.info{ background: var(--primary-light); border-color: var(--primary); color: var(--primary-dark); }
.empty{ text-align:center; padding: 64px 20px; color: var(--text-faint); }
.empty h3{ color: var(--text-dim); }
.loading{ text-align:center; padding: 64px 20px; color: var(--text-faint); font-family: var(--font-mono); font-size:.8rem; letter-spacing:.03em; }

/* ---------- skeleton loaders (shown while a grid/list is refetching, so
   the layout doesn't collapse to a bare "Loading…" line and pop back) ---------- */
.skeleton{
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: skeleton-shimmer 1.4s ease infinite; border-radius: var(--radius);
}
@keyframes skeleton-shimmer{ 0%{ background-position: 100% 50%; } 100%{ background-position: 0 50%; } }
.item-card.skeleton-card .thumb{ background: none; }
.skeleton-line{ height:12px; }

/* ---------- hero ---------- */
.hero{
  border:1px solid var(--border); background: linear-gradient(135deg, #FFFFFF 0%, var(--surface-2) 100%);
  border-radius: var(--radius-lg); padding: 56px; position: relative; overflow:hidden; margin-bottom: 40px;
  box-shadow: var(--shadow-md);
}
.hero::after{
  content:""; position:absolute; right:-80px; top:-80px; width:320px; height:320px; border-radius:50%;
  background: radial-gradient(circle, var(--primary-light-2), transparent 70%);
}
.hero::before{
  content:""; position:absolute; left:-60px; bottom:-110px; width:240px; height:240px; border-radius:50%;
  background: radial-gradient(circle, var(--secondary-light), transparent 70%);
}
.hero h1{ font-size: 2.4rem; max-width: 640px; }
.hero p{ max-width: 520px; font-size: 1.02rem; }
.hero-with-image{ display:grid; grid-template-columns: 1.1fr 1fr; align-items:center; gap:36px; position:relative; z-index:1; }
@media (max-width: 860px){ .hero-with-image{ grid-template-columns: 1fr; } }
.hero-poster{ width:100%; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow:hidden; background: var(--surface-2); box-shadow: var(--shadow-lg); }
.hero-poster img{ width:100%; height:100%; object-fit: contain; display:block; }

/* ---------- carousel ---------- */
.carousel{ position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-md); background: var(--surface-2); }
.carousel-track{ display:flex; transition: transform .5s var(--ease); }
.carousel-slide{ min-width:100%; aspect-ratio: 16/7; background: var(--surface-2); }
.carousel-slide img{ width:100%; height:100%; object-fit: fill; display:block; }
.carousel-dots{ position:absolute; left:0; right:0; bottom:16px; display:flex; justify-content:center; gap:8px; }
.carousel-dots button{ width:8px; height:8px; border-radius:50%; border:none; background: rgba(255,255,255,.55); cursor:pointer; padding:0; transition: width .2s var(--ease), background .2s var(--ease); }
.carousel-dots button.active{ background:#fff; width:24px; border-radius:5px; }
.carousel-arrow{ position:absolute; top:50%; transform: translateY(-50%); width:38px; height:38px; border-radius:50%; border:none; background: rgba(17,19,24,.35); backdrop-filter: blur(4px); color:#fff; font-size:1.15rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition: background .15s var(--ease), transform .15s var(--ease); }
.carousel-arrow:hover{ background: rgba(17,19,24,.6); transform: translateY(-50%) scale(1.08); }
.carousel-arrow.prev{ left:16px; }
.carousel-arrow.next{ right:16px; }

/* ---------- brand — plain circular logo, no card chrome ---------- */
.brand-circle{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  text-decoration:none; color: var(--text);
  transition: transform .2s var(--ease);
}
.brand-circle:hover{ transform: translateY(-4px); text-decoration:none; }
.brand-circle-thumb{
  width:110px; height:110px; border-radius:50%;
  overflow:hidden; background: var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.brand-circle:hover .brand-circle-thumb{ box-shadow: var(--shadow-md); border-color: var(--primary-light-2); }
.brand-circle-thumb img{ width:88%; height:88%; object-fit:contain; }
.brand-circle-thumb .ph{ font-family: var(--font-display); font-weight:700; font-size:1.6rem; color: var(--text-faint); }
.brand-circle-name{ font-weight:600; font-size:.82rem; color: var(--text-dim); }

/* ---------- footer ---------- */
footer.site{
  margin-top: auto;
  background: var(--shell-footer);
  color: rgba(255,255,255,.8);
  font-family: var(--font-shell);
}
.footer-main{
  display:grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap:40px;
  padding-top: 44px; padding-bottom: 40px;
}
.footer-wordmark{
  display:inline-block; font-weight:800; font-size:34px; line-height:1; letter-spacing:.01em; color:#fff;
}
.footer-wordmark:hover{ color:#fff; text-decoration:none; opacity:.9; }
.footer-tagline{ margin-top:6px; font-size:14px; font-weight:500; color:#FF4B4B; }
.footer-social{ display:flex; gap:10px; margin-top:22px; }
.footer-social-btn{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff;
  transition: transform .15s var(--ease), opacity .15s var(--ease);
}
.footer-social-btn svg{ width:20px; height:20px; }
.footer-social-btn.whatsapp{ background:#25D366; }
.footer-social-btn:hover{ transform: translateY(-2px); color:#fff; }
.footer-col{ display:flex; flex-direction:column; gap:10px; }
.footer-col-title{ font-size:15px; font-weight:600; color:#fff; margin-bottom:6px; }
.footer-col a{ font-size:13.5px; color: rgba(255,255,255,.78); transition: color .15s var(--ease); }
.footer-col a:hover{ color:#fff; text-decoration:none; }
.footer-contact{ display:inline-flex; align-items:center; gap:10px; font-size:13.5px; color: rgba(255,255,255,.78); }
/* Divider between Quick Links and Contact Us */
.footer-col-contact{ border-left:1px solid rgba(255,255,255,.18); padding-left:40px; }
.footer-contact svg{ width:17px; height:17px; color:#fff; flex-shrink:0; }
.footer-bottom{
  background: rgba(0,0,0,.18); border-top:1px solid rgba(255,255,255,.08);
  padding: 15px 0; font-size:12.5px; text-align:center; color: rgba(255,255,255,.75);
}
.footer-bottom-sep{ margin: 0 14px; opacity:.6; }
@media (max-width: 900px){
  .footer-main{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: 1 / -1; }
}
@media (max-width: 520px){
  .footer-main{ grid-template-columns: 1fr; gap:28px; }
  .footer-col-contact{ border-left:none; padding-left:0; }
  .footer-bottom-sep{ display:block; height:0; overflow:hidden; margin:0; }
}

/* ---------- notifications: header bell + dropdown ---------- */
.notif-wrap{ position:relative; }
.notif-panel{
  position:absolute; top:calc(100% + 12px); right:0; width:340px; max-width:88vw;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); z-index:60; overflow:hidden;
}
.notif-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 16px; border-bottom:1px solid var(--border);
  font-family: var(--font-display); font-weight:700; font-size:.88rem;
}
.notif-panel-head button{
  background:none; border:none; color: var(--primary); font-size:.76rem; font-weight:600; cursor:pointer; padding:0;
}
.notif-panel-body{ max-height:360px; overflow-y:auto; }
.notif-item{
  display:block; padding:13px 16px; border-bottom:1px solid var(--border); border-left:3px solid transparent;
  color: var(--text); text-decoration:none;
  transition: background .12s var(--ease), border-color .12s var(--ease);
}
.notif-item:hover{ background: var(--surface-2); text-decoration:none; }
.notif-item:last-child{ border-bottom:none; }
.notif-item.unread{ background: var(--primary-light); border-left-color: var(--primary); }
.notif-item.unread:hover{ background: var(--primary-light-2); }
.notif-item-subject{ font-weight:600; font-size:.86rem; margin-bottom:2px; }
.notif-item-msg{
  font-size:.8rem; color: var(--text-dim); margin-bottom:4px;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.notif-item-time{ font-family: var(--font-mono); font-size:.68rem; color: var(--text-faint); }
.notif-panel-foot{
  display:block; text-align:center; padding:12px; font-size:.8rem; font-weight:600;
  border-top:1px solid var(--border); background: var(--surface-2); color: var(--primary);
  transition: background .15s var(--ease);
}
.notif-panel-foot:hover{ background: var(--surface-3); text-decoration:none; }
.notif-empty{ text-align:center; padding:36px 16px; color: var(--text-faint); font-size:.85rem; }

/* ---------- notifications: full /gotik/notifications.html list ---------- */
.notif-list-item{ display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border-bottom:1px solid var(--border); transition: background .12s var(--ease); }
.notif-list-item:last-child{ border-bottom:none; }
.notif-list-item.unread{ background: var(--primary-light); cursor:pointer; }
.notif-dot{ width:8px; height:8px; border-radius:50%; background: var(--primary); margin-top:6px; flex-shrink:0; }
.notif-list-item:not(.unread) .notif-dot{ background: transparent; }
.notif-list-body{ flex:1; }
.notif-list-subject{ font-weight:700; font-size:.92rem; margin-bottom:3px; }
.notif-list-msg{ font-size:.86rem; color: var(--text-dim); margin-bottom:6px; }
.notif-list-time{ font-family: var(--font-mono); font-size:.72rem; color: var(--text-faint); }

/* ---------- checkout page ---------- */
.checkout-layout{ align-items:start; }
.checkout-col h1, .checkout-col h2{
  font-size:1.3rem; margin:0 0 16px; line-height:1.2;
}

/* ---------- input group (e.g. coupon code + Apply) ---------- */
.input-group{ display:flex; }
.input-group input{
  flex:1; min-width:0;
  border-top-right-radius:0; border-bottom-right-radius:0;
}
.input-group .btn{
  flex-shrink:0; border-top-left-radius:0; border-bottom-left-radius:0;
  border-left:none; padding:12px 22px; font-size:.86rem; white-space:nowrap;
}
.input-group input:focus{ position:relative; z-index:1; }

/* ---------- profile page ---------- */
.profile-avatar-wrap{ display:flex; justify-content:center; }
.profile-avatar{
  width:116px; height:116px; border-radius:50%; object-fit:cover;
  background: var(--surface-2); border:3px solid var(--surface); box-shadow: var(--shadow-md);
}
.section-title{
  font-family: var(--font-display); font-weight:700; font-size:.76rem; text-transform:uppercase;
  letter-spacing:.05em; color: var(--text-dim); padding-top:14px; border-top:1px solid var(--border);
}
.section-title:first-child{ padding-top:0; border-top:none; }

/* ---------- misc ---------- */
.hidden{ display:none !important; }
.divider{ height:1px; background: var(--border); margin: 24px 0; }
.qty-input{ width: 70px; text-align:center; }
.rate-input{ width: 90px; text-align:right; }

/* ---------- checkout order summary (rate/qty columns) ---------- */
.summary-header, .summary-row{
  display:grid; grid-template-columns: 1fr 128px 70px 92px; gap:10px; align-items:center;
}
.summary-header{
  font-family: var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em;
  color: var(--text-faint); padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid var(--border);
}
.summary-header span:nth-child(2), .summary-header span:nth-child(3){ text-align:center; }
.summary-header span:last-child{ text-align:right; }
@media (max-width: 480px){
  .summary-header, .summary-row{ grid-template-columns: 1fr 92px 50px 78px; gap:6px; }
  .summary-row .rate-input{ width:60px; }
  .summary-row .qty-input{ width:44px; }
}
.stat{ font-family: var(--font-mono); font-size:1.9rem; color: var(--text); font-weight:700; letter-spacing:-.01em; }
.stat-label{ font-family: var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color: var(--text-faint); }
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:22px; }
.tabs button{ background:none; border:none; color:var(--text-dim); font-family:var(--font-display); font-weight:700; font-size:.85rem; padding:11px 18px; cursor:pointer; border-bottom:2px solid transparent; transition: color .15s var(--ease), border-color .15s var(--ease); }
.tabs button:hover{ color: var(--text); }
.tabs button.active{ color: var(--primary); border-bottom-color: var(--primary); }

@media (max-width: 640px){
  .nav-links{ gap:16px; }
  .hero{ padding:32px 24px; }
  .hero h1{ font-size:1.7rem; }
}

/* ---------- third-party chat widget override ----------
   clefincode_chat (installed separately, not ours to edit) injects its
   own floating bubble into every page via its own hooks. We replace it
   with the WhatsApp button below instead of the in-app chat. */
.chat-app{ display:none !important; }

/* ---------- modals (add-to-cart rate/description dialog) ---------- */
.modal-overlay{
  position: fixed; inset:0; z-index: 200;
  background: rgba(17,19,24,.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display:flex; align-items:center; justify-content:center; padding: 20px;
  opacity:0; visibility:hidden;
  transition: opacity .2s var(--ease), visibility 0s linear .2s;
}
.modal-overlay.open{
  opacity:1; visibility:visible;
  transition: opacity .2s var(--ease), visibility 0s linear 0s;
}
.modal-box{
  width:100%; max-width:440px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--primary);
  box-shadow: var(--shadow-lg);
  padding: 26px;
  transform: scale(.94) translateY(10px);
  transition: transform .22s var(--ease);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.modal-overlay.open .modal-box{ transform: scale(1) translateY(0); }
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.modal-head h3{ margin:0; }
.modal-close{
  background:none; border:none; cursor:pointer; line-height:1; padding:2px 4px;
  font-size:1.5rem; color: var(--text-faint); border-radius: var(--radius-sm);
  transition: color .15s var(--ease), background .15s var(--ease);
}
.modal-close:hover{ color: var(--text); background: var(--surface-2); }
.modal-item{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.modal-item-thumb{
  width:56px; height:56px; flex-shrink:0; border-radius: var(--radius-sm); overflow:hidden;
  background: var(--surface-2); display:flex; align-items:center; justify-content:center;
}
.modal-item-thumb img{ width:100%; height:100%; object-fit:cover; }
.modal-item-thumb .ph{ color: var(--text-faint); font-family: var(--font-mono); font-size:.6rem; }
.modal-item-name{ font-weight:600; color: var(--text); font-size:.95rem; line-height:1.3; }
.modal-item-code{ font-size:.72rem; color: var(--text-faint); margin-top:2px; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:6px; }
.modal-actions .btn{ margin-top:0; }
@media (max-width: 480px){
  .modal-box{ padding:20px; }
  .modal-actions{ flex-direction: column-reverse; }
  .modal-actions .btn{ width:100%; }
}

/* ---------- toast notifications (styled like .alert, just floating) ----
   Namespaced as .motik-toast-* deliberately — see the comment in app.js's
   Toast module for why plain .toast/.show would collide with Bootstrap. */
.motik-toast-root{
  position: fixed; top:20px; left:50%; transform:translateX(-50%); z-index:400;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;
  max-width: min(92vw, 380px);
}
.motik-toast{
  display:flex; align-items:center; width:max-content; max-width:100%;
  padding:9px 14px 9px 16px; border-radius: var(--radius); font-size:.82rem; font-weight:600; line-height:1.35;
  border:1px solid; color:#fff; margin:0;
  box-shadow: var(--shadow-lg); opacity:0; transform: translateY(-10px);
  transition: opacity .2s var(--ease), transform .2s var(--ease); pointer-events:auto;
}
.motik-toast.is-visible{ opacity:1; transform: translateY(0); }
.motik-toast-success{ background: var(--success); border-color: var(--success); }
.motik-toast-error{ background: var(--danger); border-color: var(--danger); }

/* ---------- inline image zoom (applied directly to the item image, no
   overlay/modal) ---------- */
.zoomable{ touch-action: none; }
.zoomable img{
  user-select:none; -webkit-user-drag:none;
  transition: transform .12s ease-out; will-change: transform;
}
.zoomable.dragging img{ transition:none; }
.zoom-controls{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; background: rgba(17,19,24,.65); backdrop-filter: blur(4px);
  padding:6px; border-radius: var(--radius-pill); z-index:2;
}
.zoom-controls button{
  width:32px; height:32px; border-radius:50%; border:none; background: rgba(255,255,255,.12);
  color:#fff; font-size:1.1rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition: background .15s var(--ease), opacity .15s var(--ease);
}
.zoom-controls button:hover{ background: rgba(255,255,255,.22); }
.zoom-controls button:disabled{ opacity:.35; cursor:default; }

/* ---------- floating WhatsApp button ---------- */
.whatsapp-float{
  position: fixed; right: 22px; bottom: 22px; z-index: 999;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 20px rgba(37,211,102,.4), var(--shadow-md);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.whatsapp-float:hover{
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 26px rgba(37,211,102,.5), var(--shadow-lg);
  text-decoration:none;
}
.whatsapp-float svg{ width:30px; height:30px; }
@media (max-width: 640px){
  .whatsapp-float{ right:16px; bottom:16px; width:52px; height:52px; }
  .whatsapp-float svg{ width:28px; height:28px; }
}