/* =============================================
   استایل اصلی منوی فروشگاه
============================================= */
:root {
  --primary:       #6366f1;
  --primary-light: #eef2ff;
  --accent:        #f59e0b;
  --discount:      #ef4444;
  --text:          #1e293b;
  --muted:         #64748b;
  --border:        #e2e8f0;
  --card-r:        16px;
  --ease:          cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:'Vazirmatn','Segoe UI',Tahoma,sans-serif;
  direction:rtl; color:var(--text);
  overflow-x:hidden;
}

/* -------- Header -------- */
.store-header {
  background:linear-gradient(135deg,#1e293b,#312e81);
  padding:22px 16px 28px;
  text-align:center;
}
.store-logo {
  width:80px;height:80px;border-radius:20px;
  object-fit:cover;border:3px solid rgba(255,255,255,.2);
  margin-bottom:10px;box-shadow:0 8px 24px rgba(0,0,0,.3);
  display:block;margin-left:auto;margin-right:auto;
}
.store-logo-placeholder {
  width:80px;height:80px;background:rgba(255,255,255,.1);
  border-radius:20px;display:flex;align-items:center;
  justify-content:center;font-size:36px;
  margin:0 auto 10px;
}
.store-name { color:#fff;font-size:20px;font-weight:800; }

/* -------- Social Bar -------- */
.social-bar {
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  padding:14px 16px;background:rgba(255,255,255,.85);
  backdrop-filter:blur(6px);border-top:1px solid var(--border);
}
.social-item {
  display:flex;align-items:center;gap:7px;padding:7px 14px;
  border-radius:50px;background:#fff;text-decoration:none;
  color:var(--text);font-size:13px;font-weight:600;
  border:1px solid var(--border);
  transition:all .2s var(--ease);
}
.social-item:hover {
  background:var(--primary-light);border-color:var(--primary);
  color:var(--primary);transform:translateY(-2px);
}
.social-item img { width:22px;height:22px;border-radius:6px;object-fit:cover; }

/* -------- Section Title -------- */
.section-title {
  padding:20px 16px 12px;font-size:17px;font-weight:800;
  color:var(--text);display:flex;align-items:center;gap:8px;
}

/* -------- Top Nav -------- */
.top-nav {
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:200;
}
.btn-back {
  background:var(--primary-light);color:var(--primary);
  border:none;border-radius:10px;padding:8px 14px;
  font-size:13px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;gap:6px;
  transition:all .2s;white-space:nowrap;
}
.btn-back:hover { background:var(--primary);color:#fff; }
.nav-category-name { font-size:15px;font-weight:700;flex:1; }

/* دکمه تغییر نما */
.view-toggle-btn {
  background:var(--primary-light);color:var(--primary);
  border:none;border-radius:10px;
  width:38px;height:38px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;transition:all .2s;flex-shrink:0;
}
.view-toggle-btn:hover { background:var(--primary);color:#fff; }

/* -------- Categories Grid -------- */
.categories-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;padding:0 16px 20px;
}
@media(min-width:600px) { .categories-grid { grid-template-columns:repeat(3,1fr); } }
@media(min-width:900px) { .categories-grid { grid-template-columns:repeat(4,1fr); } }

.category-card {
  background:#fff;border-radius:var(--card-r);
  overflow:hidden;cursor:pointer;
  border:2px solid transparent;
  box-shadow:0 2px 8px rgba(0,0,0,.07);
  transition:all .25s var(--ease);text-align:center;
}
.category-card:hover {
  border-color:var(--primary);
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(99,102,241,.2);
}
.category-card:active { transform:scale(.97); }
.category-img-wrap {
  width:100%;aspect-ratio:1;overflow:hidden;
  background:var(--primary-light);
  display:flex;align-items:center;justify-content:center;
}
.category-img-wrap img {
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.category-card:hover .category-img-wrap img { transform:scale(1.08); }
.category-img-placeholder { font-size:48px;opacity:.35; }
.category-name { padding:10px 8px;font-size:14px;font-weight:700; }

/* -------- Products Grid -------- */
.drag-hint {
  text-align:center;font-size:12px;color:var(--muted);
  padding:8px 16px 4px;display:flex;align-items:center;
  justify-content:center;gap:6px;
}
.products-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;padding:8px 16px 100px;
}
@media(min-width:600px) { .products-grid { grid-template-columns:repeat(3,1fr); } }
@media(min-width:900px) { .products-grid { grid-template-columns:repeat(4,1fr); } }

.product-card {
  background:#fff;border-radius:var(--card-r);
  overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.07);
  transition:all .25s var(--ease);
  position:relative;user-select:none;
}
.product-card:hover { transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.12); }
.product-card.sortable-drag { opacity:.85;transform:scale(1.04) rotate(1deg);z-index:999; }
.product-card.sortable-ghost { opacity:.25; }

.product-img-wrap {
  width:100%;aspect-ratio:4/3;overflow:hidden;
  background:var(--primary-light);
  display:flex;align-items:center;justify-content:center;
}
.product-img-wrap img { width:100%;height:100%;object-fit:cover;transition:transform .4s; }
.product-card:hover .product-img-wrap img { transform:scale(1.06); }
.product-img-placeholder { font-size:38px;opacity:.28; }
.product-body { padding:10px 12px 14px; }
.product-name {
  font-size:13px;font-weight:700;line-height:1.4;
  margin-bottom:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.product-desc {
  font-size:11px;color:var(--muted);line-height:1.5;margin-bottom:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.product-price { font-size:13px;font-weight:700; }
.product-price.struck { text-decoration:line-through;color:var(--muted);font-weight:400;font-size:12px; }
.product-final-price { font-size:15px;font-weight:800;color:var(--discount); }
.price-unit { font-size:11px;color:var(--muted);font-weight:400; }

/* -------- Discount Badge -------- */
.discount-badge {
  position:absolute;top:8px;right:8px;
  background:var(--discount);color:#fff;
  border-radius:10px;padding:3px 8px;
  font-size:11px;font-weight:700;
  box-shadow:0 2px 8px rgba(239,68,68,.4);z-index:2;
}

/* -------- Countdown -------- */
.countdown-wrap {
  background:#fff5f5;border:1px solid #fecaca;
  border-radius:10px;padding:6px 8px;margin-top:8px;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.countdown-label { font-size:10px;color:var(--discount);font-weight:700; }
.countdown-timer { display:flex;gap:3px;direction:ltr; }
.countdown-block {
  background:var(--discount);color:#fff;border-radius:5px;
  padding:2px 5px;font-size:12px;font-weight:700;
  min-width:24px;text-align:center;
}
.countdown-sep { color:var(--discount);font-weight:700; }

/* -------- Hot Banner -------- */
.hot-discount-banner {
  background:linear-gradient(135deg,#dc2626,#f59e0b);color:#fff;
  padding:10px 16px;margin:8px 16px;border-radius:12px;
  font-size:13px;font-weight:600;
  display:flex;align-items:center;gap:8px;
  overflow-x:auto;white-space:nowrap;
  box-shadow:0 4px 12px rgba(220,38,38,.3);
}

/* -------- Suggestion Card -------- */
.suggestion-card {
  background:linear-gradient(135deg,#f0fdf4,#dcfce7);
  border:2px dashed #86efac;border-radius:var(--card-r);
  padding:24px 16px;text-align:center;cursor:pointer;
  transition:all .25s var(--ease);
}
.suggestion-card:hover {
  border-color:#22c55e;transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(34,197,94,.2);
}
.suggestion-logo { width:60px;height:60px;border-radius:14px;object-fit:cover;margin:0 auto 10px;display:block; }
.suggestion-icon { font-size:40px;margin-bottom:10px; }
.suggestion-text { font-size:13px;font-weight:600;color:#166534;line-height:1.6; }

/* -------- Review Button -------- */
.review-btn-wrap { padding:16px; }
.review-btn {
  width:100%;background:linear-gradient(135deg,var(--primary),#8b5cf6);
  color:#fff;border:none;border-radius:14px;padding:14px;
  font-size:15px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all .2s;box-shadow:0 4px 12px rgba(99,102,241,.3);
}
.review-btn:hover { opacity:.9;transform:translateY(-2px); }

/* ================================================================
   SWIPER CARD MODE
================================================================ */
#mode-swiper {
  padding: 20px 0 80px;
  min-height: 85vh;
  display: flex;
  align-items: center;
}
.main-swiper {
  width: 100%;
  padding: 12px 0 50px !important;
}
.main-swiper .swiper-slide {
  width: 82vw !important;
  max-width: 420px;
  display: flex;
  align-items: stretch;
}
.swiper-product-card {
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 75vh;
  max-height: 82vh;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  position: relative;
}
.main-swiper .swiper-slide-active .swiper-product-card {
  box-shadow: 0 16px 48px rgba(99,102,241,.25);
  transform: scale(1.02);
}
.swiper-product-img {
  width: 100%; flex: 0 0 55%;
  overflow: hidden;background: var(--primary-light);
  display: flex;align-items: center;justify-content: center;
}
.swiper-product-img img {
  width:100%;height:100%;object-fit:cover;
}
.swiper-product-img-placeholder { font-size:80px;opacity:.2; }
.swiper-product-body {
  flex: 1; padding: 20px;
  display: flex;flex-direction: column;
  overflow-y: auto;
}
.swiper-product-name {
  font-size: 18px;font-weight: 800;
  color: var(--text);line-height: 1.4;margin-bottom: 8px;
}
.swiper-product-desc {
  font-size: 13px;color: var(--muted);
  line-height: 1.7;flex: 1;
}
.swiper-product-footer {
  padding-top: 16px;border-top: 1px solid var(--border);margin-top: 12px;
}
.swiper-product-price {
  font-size: 15px;font-weight: 700;
}
.swiper-product-price.struck {
  text-decoration: line-through;color: var(--muted);
  font-size: 13px;font-weight: 400;
}
.swiper-product-final-price {
  font-size: 22px;font-weight: 800;color: var(--discount);
}
.swiper-discount-badge {
  position: absolute;top: 12px;right: 12px;
  background: var(--discount);color: #fff;
  border-radius: 12px;padding: 4px 12px;
  font-size: 13px;font-weight: 700;z-index: 2;
  box-shadow: 0 2px 8px rgba(239,68,68,.4);
}
/* پیجینیشن */
.main-swiper .swiper-pagination-bullet { background: var(--primary); }
.main-swiper .swiper-button-prev,
.main-swiper .swiper-button-next {
  color: var(--primary);
  background: #fff;
  border-radius: 50%;
  width: 36px;height: 36px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.main-swiper .swiper-button-prev::after,
.main-swiper .swiper-button-next::after { font-size: 14px;font-weight: 700; }

/* -------- Modals -------- */
.modal-overlay {
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px);z-index:2000;
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.modal-overlay.open { opacity:1;pointer-events:all; }
.modal-sheet {
  background:#fff;border-radius:24px 24px 0 0;
  padding:24px 20px 36px;width:100%;max-width:560px;
  transform:translateY(100%);transition:transform .35s var(--ease);
  max-height:88vh;overflow-y:auto;position:relative;
}
.modal-overlay.open .modal-sheet { transform:translateY(0); }
.modal-handle { width:40px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 20px; }
.modal-title { font-size:18px;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:8px; }
.modal-close {
  position:absolute;top:16px;left:20px;
  background:var(--border);border:none;border-radius:50%;
  width:32px;height:32px;cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;
}

/* Stars */
.stars-rating { display:flex;gap:4px;margin:12px 0 4px; }
.star-wrap { display:flex;flex-direction:column;align-items:center;gap:2px; }
.star-btn { font-size:28px;cursor:pointer;background:none;border:none;color:#d1d5db;transition:transform .15s;padding:0;line-height:1; }
.star-btn.active { color:var(--accent); }
.star-btn:hover { transform:scale(1.2); }
.star-num { font-size:11px;font-weight:700;color:var(--muted);line-height:1; }
.star-label-wrap { display:flex;justify-content:space-between;margin-bottom:14px; }
.star-label-min,.star-label-max { font-size:11px;color:var(--muted); }

/* Form elements */
.form-textarea,.form-input {
  width:100%;border:2px solid var(--border);border-radius:12px;
  padding:12px 14px;font-size:14px;font-family:inherit;
  direction:rtl;color:var(--text);outline:none;resize:none;
  transition:border-color .2s;
}
.form-textarea:focus,.form-input:focus { border-color:var(--primary); }
.btn-submit {
  width:100%;background:var(--primary);color:#fff;
  border:none;border-radius:12px;padding:13px;
  font-size:15px;font-weight:700;cursor:pointer;
  margin-top:12px;font-family:inherit;
  transition:all .2s;
}
.btn-submit:hover { opacity:.9; }
.btn-submit:disabled { opacity:.5;cursor:not-allowed; }

/* Toast */
.toast-wrap { position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:9999; }
.toast {
  background:#1e293b;color:#fff;padding:12px 22px;
  border-radius:14px;font-size:14px;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  opacity:0;transform:translateY(16px);transition:all .3s;
  white-space:nowrap;
}
.toast.show { opacity:1;transform:translateY(0); }
.toast.success { background:#16a34a; }
.toast.error   { background:#dc2626; }

/* Skeleton */
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.skeleton {
  background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);
  background-size:200% 100%;animation:shimmer 1.2s infinite;border-radius:8px;
}

/* Animation */
@keyframes fadeInUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
.animate-in { animation:fadeInUp .3s var(--ease) forwards; }

/* Empty state */
.empty-state { text-align:center;padding:60px 20px;color:var(--muted); }
.empty-state .empty-icon { font-size:60px;margin-bottom:16px;opacity:.25; }