/* Spark Electronics — small custom layer on top of Tailwind */

/* Global square-ish corners: force every element to 4px radius */
*,
*::before,
*::after {
  border-radius: 4px !important;
}

html { -webkit-tap-highlight-color: transparent; }

/* Keep the vertical scrollbar gutter always reserved so switching between
   short tabs (no scroll) and long tabs (scroll) never shifts the layout. */
html { overflow-y: scroll; }
@supports (scrollbar-gutter: stable) {
  html { overflow-y: auto; scrollbar-gutter: stable; }
}

#view { animation: fade-in .25s ease; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.skeleton { background: linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 37%,#e2e8f0 63%); background-size: 400% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Lucide icons scale with the surrounding text size (1em) */
svg.lucide { width: 1em; height: 1em; vertical-align: -0.15em; flex: 0 0 auto; }

/* Hero slider pagination keeps round dots despite the global 4px rule */
.swiper-pagination-bullet { border-radius: 9999px !important; opacity: .45; }
.swiper-pagination-bullet-active { background: #f59e0b !important; opacity: 1; }

.swiper { overflow: hidden; position: relative; }
.swiper-wrapper { display: flex; align-items: stretch; }
#cats .swiper-slide { width: 160px; flex-shrink: 0; }
#featured .swiper-slide { width: 280px; flex-shrink: 0; }

input, select, textarea { outline: none; }
.field {
  width: 100%; border: 1px solid #cbd5e1; border-radius: 4px; padding: .6rem .8rem;
  font-size: .9rem; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.field:focus { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600;
  border-radius:4px; padding:.62rem 1.1rem; font-size:.9rem; transition:.15s; cursor:pointer; }
.btn-primary { background:#f59e0b; color:#0f172a; }
.btn-primary:hover { background:#d97706; }
.btn-dark { background:#0f172a; color:#fff; }
.btn-dark:hover { background:#1e293b; }
.btn-ghost { background:#f1f5f9; color:#0f172a; }
.btn-ghost:hover { background:#e2e8f0; }
.btn:disabled { opacity:.55; cursor:not-allowed; }

.badge { display:inline-flex; align-items:center; gap:.25rem; font-size:.72rem; font-weight:700;
  padding:.15rem .55rem; border-radius:4px; }
span#cart-count {
    line-height: 10px;
}
/* ------------------------------------------------------- filter rating pills */
.rating-pill { padding: .4rem .8rem; font-size: .8rem; font-weight: 600; border-radius: 4px;
  border: 1px solid #e2e8f0; color: #475569; background: #fff; transition: .15s; }
.rating-pill:hover { border-color: #cbd5e1; background: #f8fafc; }
.rating-pill.on { border-color: #f59e0b; background: #fffbeb; color: #b45309; }
/* ------------------------------------------------------- floating chat buttons */
.chat-fabs {
  position: fixed; right: 1.25rem; bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 40; display: flex; flex-direction: column; gap: .75rem;
}
.chat-fab {
  position: relative; display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem; border-radius: 9999px !important;
  color: #fff; box-shadow: 0 10px 25px rgba(2, 6, 23, .28);
  transition: transform .15s ease; animation: chat-in .3s ease;
}
.chat-fab:hover, .chat-fab:focus-visible { transform: scale(1.08); }
.chat-fab svg { width: 1.75rem; height: 1.75rem; }
.chat-wa { background: #25d366; }
.chat-msg { background: linear-gradient(135deg, #00b2ff, #006aff); }
.chat-tip {
  position: absolute; right: calc(100% + .6rem); top: 50%;
  transform: translateY(-50%) translateX(4px); white-space: nowrap;
  background: #0f172a; color: #fff; font-size: .75rem; font-weight: 600;
  padding: .35rem .6rem; border-radius: 4px !important;
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
}
.chat-fab:hover .chat-tip, .chat-fab:focus-visible .chat-tip { opacity: 1; transform: translateY(-50%); }
@keyframes chat-in { from { opacity: 0; transform: translateY(8px); } }
/* ------------------------------------------------------------------ invoice */
/* Thermal-printer invoice: 80mm roll */
#print-root { display: none; }

#print-root .invoice {
  width: 72mm; margin: 0 auto; color: #000; background: #fff;
  font-family: 'Courier New', Courier, 'SolaimanLipi', monospace; font-size: 11px; line-height: 1.35;
}
#print-root .inv-center { text-align: center; }
#print-root .inv-strong { font-weight: 700; }
#print-root .inv-hr { border-top: 1px dashed #000; margin: 4px 0; }
#print-root .inv-row { display: flex; justify-content: space-between; gap: 8px; }
#print-root .inv-name { font-size: 11px; }
#print-root .inv-sm { font-size: 10px; }
#print-root .inv-total { font-size: 14px; font-weight: 700; }
#print-root .inv-logo { font-size: 18px; font-weight: 800; letter-spacing: 1px; }

@media print {
  @page { size: 80mm auto; margin: 4mm; }
  html, body { background: #fff !important; }
  body > *:not(#print-root) { display: none !important; }
  .chat-fabs { display: none !important; }
  #print-root { display: block !important; }
  #print-root, #print-root * { border-radius: 0 !important; box-shadow: none !important; }
}