/* =========================
   Mobilshop Sopi – UI CSS (v4.3 CLEAN)
   Paletë unike • Tipografi e pastër • Komponentë konsistentë
   ========================= */

/* ---------- Bazë / Variables ---------- */
:root{
  --bg:#f6f7f9; --card:#fff; --text:#0f172a; --muted:#6b7280;
  --primary:#2563eb; --success:#059669; --danger:#ef4444; --warn:#f59e0b;
  --border:#e5e7eb; --hover:#f3f4f6;
  --shadow-1:0 1px 8px rgba(0,0,0,.06);
  --shadow-2:0 8px 24px rgba(0,0,0,.12);
  --radius:12px; --pad:12px;
  --fs-base:15px; --lh-base:1.55;
  --fs-h1:clamp(28px,2.2vw,32px);
  --fs-h2:clamp(22px,1.8vw,24px);
  --fs-h3:clamp(18px,1.6vw,20px);
}

/* Reset i lehtë */
*{box-sizing:border-box}
html,body{height:100%; overflow-x:hidden}
body{
  margin:0; color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font:var(--fs-base)/var(--lh-base) system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
}
img{display:block;max-width:100%;height:auto}
h1{font-size:var(--fs-h1);line-height:1.25;font-weight:700;margin:.5rem 0}
h2{font-size:var(--fs-h2);line-height:1.3;font-weight:600;margin:.5rem 0}
h3{font-size:var(--fs-h3);line-height:1.35;font-weight:600;margin:.5rem 0}
.container{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--pad)}
.muted{color:var(--muted)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Header / Navbar ---------- */
header.sticky{
  position:sticky; top:0; z-index:60; background:var(--card);
  /* hije e butë + vijë e lehtë poshtë */
  box-shadow:var(--shadow-1), 0 1px 0 var(--border);
}
.header-row{display:flex;align-items:center;gap:10px;padding:10px var(--pad)}
.nav-brand{font-weight:800;letter-spacing:.2px;cursor:pointer;white-space:nowrap}

/* Search */
.search-wrap{flex:1;position:relative}
.search-wrap input[type="search"], .search-wrap input[type="text"]{
  width:100%;height:44px;border:1px solid var(--border);border-radius:999px;padding:0 14px;outline:none;
}
#searchSuggest, #searchSuggest_mobile{
  position:absolute;left:0;right:0;margin-top:6px;background:var(--card);
  border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.18);
  z-index:70;max-height:24rem;overflow:auto;
}
#searchSuggest a[role="option"], #searchSuggest_mobile a[role="option"]{text-decoration:none;color:inherit}
#searchSuggest .view-all, #searchSuggest_mobile .view-all{display:block;text-align:center;padding:.6rem;color:var(--primary);font-weight:600}

/* ---------- Slideshow / Hero ---------- */
.slideshow{position:relative;aspect-ratio:16/9;border-radius:1rem;overflow:hidden;background:#e5e7eb}
@media (min-width:1024px){.slideshow{aspect-ratio:16/6}}
.slideshow .slide{position:absolute;inset:0;opacity:0;transition:opacity .45s ease;pointer-events:none}
.slideshow .slide.active{opacity:1;pointer-events:auto}
.slideshow .caption{position:absolute;inset-inline:0;bottom:0;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));z-index:20}
.dots{position:absolute;left:0;right:0;bottom:.5rem;display:flex;justify-content:center;gap:.5rem;z-index:60}
.dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.5);border:1px solid rgba(0,0,0,.08)}
.dot.is-active{background:#fff}
.nav-btn{width:36px;height:36px;line-height:36px;text-align:center;border:1px solid var(--border);background:#fff;border-radius:999px;box-shadow:var(--shadow-1)}
.nav-btn:focus-visible,.nav-btn:hover{box-shadow:var(--shadow-2)}
#prevSlide,#nextSlide{z-index:70;pointer-events:auto}

/* ---------- Oferta ditore (kolona e majtë) ---------- */
#dailyOffers, #dailyOffers>.offer-card{height:100%}
#dailyOffers>.offer-card{display:flex;flex-direction:column}
#dailyOffers .offer-media{flex:1 1 auto;position:relative}
#dailyOffers .offer-dot{width:10px;height:10px;border-radius:999px}

/* ---------- Karta të Produkteve (INDEX) ---------- */
.products-grid{display:grid;gap:10px;margin:16px 0;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:480px){ .products-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:768px){ .products-grid{grid-template-columns:repeat(5,1fr)} }   /* më shumë kolona */
@media (min-width:1280px){ .products-grid{grid-template-columns:repeat(6,1fr)} }
@media (min-width:1536px){ .products-grid{grid-template-columns:repeat(7,1fr)} }  /* opsionale: shumë i gjerë */

.product-card{
  background:var(--card); border-radius:.75rem; overflow:hidden; box-shadow:var(--shadow-1);
  display:flex; flex-direction:column; transition:transform .15s ease, box-shadow .15s ease;
}
.product-card:hover,.product-card:focus-within{ transform:translateY(-1px); box-shadow:var(--shadow-2) }

/* Ule pak lartësinë e fotos (override ndaj klasave Tailwind) */
.product-card > div > a > img{ height:15.5rem !important; } /* ≈ 152px */

.product-card .body{ padding:10px; display:flex; gap:6px; flex-direction:column; }
.product-card .title{ font-weight:700; line-height:1.25; font-size:.95rem; }
.price-row{ display:flex; align-items:baseline; gap:6px; justify-content:center; font-size:.95rem; }
.old-price{ color:var(--danger); text-decoration:line-through; opacity:.9; }
.price-current{ color:var(--success); font-weight:800; }

/* Butoni “Ruaj” (❤️) */
.save-btn{
  position:absolute; right:8px; bottom:8px; background:rgba(255,255,255,.9);
  backdrop-filter:saturate(150%) blur(2px);
  padding:.3rem .55rem; border-radius:10px; border:1px solid var(--border);
  box-shadow:var(--shadow-1); font-size:12px; color:#6b7280;
}
.save-btn:hover{ background:#fff }
.save-btn.is-saved{ color:#dc2626; border-color:#fecaca; box-shadow:0 0 0 2px rgba(255,255,255,.85) }

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:90}
.modal.hidden{display:none}
.modal-content{background:var(--card);border-radius:16px;padding:16px;width:min(640px,92vw);max-height:90vh;overflow:auto;position:relative}
.modal-close{position:absolute;top:.5rem;right:.5rem;background:#eef2f7;border:1px solid var(--border);border-radius:10px;padding:.3rem .6rem}
/* Mobile bottom-sheet për #savedModal */
@media (max-width:640px){
  #savedModal{align-items:flex-end!important}
  #savedModal>div[class*="max-w-"]{width:100%!important;max-width:none!important;height:92vh;border-top-left-radius:18px;border-top-right-radius:18px;border-bottom-left-radius:0;border-bottom-right-radius:0}
}

/* ---------- Butonë / Chips / Tooltip / Toast ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--border);background:#fff;color:#111827;cursor:pointer;transition:box-shadow .12s ease, transform .12s ease, background .12s ease}
.btn:hover,.btn:focus-visible{background:var(--hover);box-shadow:0 1px 6px rgba(0,0,0,.08)}
.btn.-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:.25rem .6rem;border-radius:999px;background:#eef2ff;color:#1e3a8a;border:1px solid #e0e7ff;font-size:12px}
.chip .x{cursor:pointer;opacity:.8}
.tooltip{position:relative}
.tooltip:hover::after{content:attr(aria-label);position:absolute;bottom:100%;left:50%;transform:translate(-50%,-6px);white-space:nowrap;background:#111827;color:#fff;font-size:12px;padding:.25rem .5rem;border-radius:6px;box-shadow:var(--shadow-1)}
.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(12px);bottom:12px;background:#111827;color:#fff;padding:.6rem .9rem;border-radius:10px;box-shadow:var(--shadow-2);opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;z-index:100}
.toast.toast--show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Stats (Admin) ---------- */
.stats-row{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}
.stat{flex:1 1 160px;min-height:76px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px;box-shadow:var(--shadow-1);font-weight:700}
.stat--clickable{cursor:pointer;transition:transform .12s ease, box-shadow .12s ease}
.stat--clickable:hover,.stat--clickable:focus-visible{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.stat[aria-disabled="true"]{cursor:default;opacity:.9;box-shadow:var(--shadow-1)}

/* ---------- Tabela -> Cards në Mobile ---------- */
.table-responsive table{width:100%;border-collapse:collapse;background:var(--card)}
.table-responsive th,.table-responsive td{padding:10px 12px;border-bottom:1px solid var(--border)}
.table-img{width:56px;height:56px;object-fit:cover;border-radius:8px}
@media (max-width:768px){
  .table-responsive thead{display:none}
  .table-responsive tr{display:block;border:1px solid var(--border);border-radius:12px;margin-bottom:10px;box-shadow:var(--shadow-1);overflow:hidden;background:var(--card)}
  .table-responsive td{display:grid;grid-template-columns:42% 58%;gap:6px;border-bottom:1px solid var(--border);padding:10px 12px}
  .table-responsive td:last-child{border-bottom:0}
  .table-responsive td::before{content:attr(data-label);font-weight:700;color:var(--muted)}
  .table-actions .btn{width:100%;margin:4px 0}
}

/* ---------- Utility ---------- */
.u-hide{display:none!important}
.w-100{width:100%}
.text-center{text-align:center}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}
.p-1{padding:4px}.p-2{padding:8px}.p-3{padding:12px}
.round{border-radius:var(--radius)}
.shadow-1{box-shadow:var(--shadow-1)}.shadow-2{box-shadow:var(--shadow-2)}

/* ---------- Tweaks ---------- */
#heroWrap{border-radius:1rem;overflow:hidden} /* ruaj radius në slideshow */

/* --- Hover-swap global për karta (index + product) --- */
.s-media{position:relative}
.s-img-1,.s-img-2{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; background:#f8fafc;
  transition:opacity .25s ease, transform .25s ease;
}
.s-img-2{opacity:0}
.s-card.has-2:hover .s-img-2{opacity:1}
.s-card.has-2:hover .s-img-1{opacity:0}
.s-card:not(.has-2):hover .s-img-1{transform:scale(1.03)}

/* ---------- PRODUCT PAGE – galeri / lightbox ---------- */
.hero-frame{aspect-ratio:4/5}
@media (min-width:768px){ .hero-frame{aspect-ratio:4/3} }
.thumb.selected{outline:2px solid #2563eb; outline-offset:2px}
body.lb-open{overflow:hidden}

/* ---------- PRODUCT PAGE – Suggestions (rresht horizontal, karta të vogla) ---------- */
#suggest .s-wrap{position:relative}
#suggest .s-row{
  display:flex; gap:.75rem; overflow-x:auto; padding:.25rem 0;
  scroll-snap-type:x mandatory;
}
#suggest .s-row::-webkit-scrollbar{height:8px}
#suggest .s-row::-webkit-scrollbar-thumb{background:#d4d4d8;border-radius:9999px}

#suggest .s-card{
  scroll-snap-align:start;
  flex:0 0 180px; /* të vogla */
  border:1px solid var(--border); border-radius:14px; background:#fff;
  overflow:hidden; transition:transform .2s, box-shadow .2s;
}
#suggest .s-card:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(2,6,23,.08) }

#suggest .s-body{ padding:.75rem .85rem; text-align:center }
#suggest .s-title{ display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
#suggest .s-meta { font-size:.85rem; color:#6b7280; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
#suggest .s-price{ display:inline-flex; align-items:baseline; gap:.5rem; margin-top:.25rem }
#suggest .s-price .now{ color:var(--success); font-weight:700 }
#suggest .s-price .old{ text-decoration:line-through; color:var(--danger); opacity:.85 }

#suggest .s-badge{ position:absolute; top:.5rem; left:.5rem }   /* korrigjuar emri */
#suggest .s-off{
  position:absolute; top:.5rem; right:.5rem;
  background:#1b9d04; color:#fff; font-weight:700; font-size:.75rem;
  padding:.15rem .45rem; border-radius:.4rem;
}

/* Filters: range full-width dhe spacing i vogël */
#filtersBox input[type="range"]{width:100%;display:block}

/* Kartat pak më të vogla në index */
.product-card .thumb{ aspect-ratio: 4/3; }
@media (min-width:1024px){ .products-grid{ grid-template-columns: repeat(6,1fr); } }
.product-card .body{ padding:10px; }