/* =====================================================================
   THEME PRO — SITE (فروشگاه/سایت اصلی)
   بازطراحی هدر، جستجو، منو، کارت محصول، فوتر و ناوبری پایین موبایل.
   بارگذاری شود بعد از bootstrap و بعد از theme-pro.css
===================================================================== */

/* ---------- Header ---------- */
#Header{
  background: var(--glass-bg) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm) !important;
}

#HeaderTop img{ filter: drop-shadow(0 4px 10px rgba(var(--accent-rgb),.18)); }

.search-wrap .form-control{
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
.search-wrap .form-control:focus{
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16) !important;
}
.search-wrap i{ color: var(--accent) !important; }
#acBox{
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-md) !important;
  animation: tpFadeUp .25s var(--ease);
}

.icon-pill{
  background: rgba(var(--accent-rgb), .10) !important;
  border: 1px solid rgba(var(--accent-rgb), .22) !important;
  color: var(--accent) !important;
}
.icon-pill:hover{ transform: translateY(-3px) scale(1.05) !important; box-shadow: var(--shadow-sm); }

.vendor-header-btn{
  border-radius: 999px !important;
  border: 1px solid rgba(var(--accent-rgb), .25) !important;
  background: rgba(var(--accent-rgb), .08) !important;
  color: var(--accent-ink) !important;
}
.vendor-header-btn:hover{ background: rgba(var(--accent-rgb), .16) !important; transform: translateY(-2px); }

.admin-panel-btn{
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  border: none !important;
  box-shadow: var(--shadow-sm) !important;
  color: #fff !important;
}
.admin-panel-btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md) !important; }

/* ---------- Menu / Nav ---------- */
#Menu{
  background: linear-gradient(92deg, var(--accent), var(--accent-2)) !important;
  position: relative;
}
#Menu .navbar-nav .nav-link{
  color: rgba(255,255,255,.92) !important;
  position: relative;
}
#Menu .navbar-nav .nav-link::after{
  content:""; position:absolute; right:16px; left:16px; bottom:6px; height:2px; border-radius:2px;
  background:#fff; transform: scaleX(0); transform-origin: center; transition: transform .25s var(--ease);
}
#Menu .navbar-nav .nav-link:hover{ background: rgba(255,255,255,.14) !important; }
#Menu .navbar-nav .nav-link:hover::after{ transform: scaleX(1); }

/* ---------- Product cards ---------- */
.product-card{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  box-shadow: var(--shadow-sm) !important;
}
.product-card:hover{
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: rgba(var(--accent-rgb), .35) !important;
}
.product-card .price, .price-new{
  color: var(--accent-ink) !important;
  font-weight: 900 !important;
}
html[data-theme="dark"] .product-card .price,
html[data-theme="dark"] .price-new{ color: var(--accent-2) !important; }

.old-price, .price-old{ color: var(--muted) !important; text-decoration: line-through; }

.discount-badge{
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--shadow-sm);
  animation: tpPop .35s var(--ease);
}

.vendor-cta, .vc-inner{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}
.vc-badge{
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  color: #fff !important;
}

/* ---------- Buttons ---------- */
.btn-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md) !important; }
.btn, .btn-sm{ border-radius: var(--radius-sm) !important; }

/* ---------- Cards / panels generic ---------- */
.card, .card-soft{
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ---------- Footer ---------- */
.ip-footer{ background: var(--bg-2) !important; }
.ip-footer-bg{
  background:
    radial-gradient(900px 500px at 10% 20%, rgba(var(--accent-rgb),.20) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(700px 400px at 90% 10%, rgba(var(--accent-rgb),.18) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(135deg, #0b0d16 0%, #131427 45%, #1a1230 100%) !important;
}
.ip-footer-card{
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.10) !important;
}
.ip-title{
  background: rgba(var(--accent-rgb), .22) !important;
  border-color: rgba(var(--accent-rgb), .3) !important;
}
.ip-links a:hover{ border-color: rgba(var(--accent-rgb), .4) !important; }
.ip-ico{ background: rgba(var(--accent-rgb), .18) !important; border-color: rgba(var(--accent-rgb), .28) !important; }
.ip-phone:hover{ background: rgba(var(--accent-rgb), .18) !important; }

footer{ background: #0b0d16 !important; }
footer a:hover{ color: var(--accent-2) !important; }

/* ---------- Bottom mobile nav ---------- */
.mobile-nav, #bottomNav{
  background: var(--glass-bg) !important;
  backdrop-filter: blur(16px) saturate(160%);
  border-top: 1px solid var(--glass-border) !important;
}
#bottomNav .nav-link.active,
#bottomNav .nav-icon.fill-icon{ color: var(--accent) !important; }

/* ---------- Section reveal on scroll ---------- */
.container.my-5, .card-soft, .product-card{
  animation: tpFadeUp .5s var(--ease) both;
}

/* =====================================================================
   ساختار جدید: نوار بالای هدر، برند، داک آیکون‌ها، ناوبری شناور، فوتر برند
===================================================================== */

/* ---- نوار بالای هدر ---- */
.mz-topbar{
  background: linear-gradient(90deg, #0b0d16, #171326 60%, #0b0d16);
  color: rgba(255,255,255,.82);
  font-size: .74rem;
  position: relative;
  overflow: hidden;
}
.mz-topbar::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.5), transparent);
  height: 2px; top: auto; bottom: 0;
}
.mz-topbar-inner{
  display:flex; align-items:center; justify-content:center; gap:22px;
  padding:7px 12px; flex-wrap:wrap;
}
.mz-topbar-item{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
.mz-topbar-item i{ color: var(--accent-2); }
@media (max-width: 640px){ .mz-topbar-hide-sm{ display:none; } }

/* ---- برند/لوگو ---- */
.mz-brand{ display:flex; align-items:center; gap:10px; }
.mz-brand-tag{
  display:none;
  font-size:.68rem; font-weight:800; color: var(--accent-ink);
  background: rgba(var(--accent-rgb), .10);
  border: 1px solid rgba(var(--accent-rgb), .22);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
@media (min-width: 992px){ .mz-brand-tag{ display:inline-block; } }

/* ---- داک آیکون‌های هدر ---- */
.mz-action-dock{
  display:flex; align-items:center; gap:8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 6px; border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.mz-action-dock .vendor-header-btn{
  border-radius: 999px !important; padding: 8px 14px !important; border: none !important;
  background: transparent !important; color: var(--text-2) !important;
}
.mz-action-dock .vendor-header-btn:hover{ color: var(--accent-ink) !important; background: rgba(var(--accent-rgb),.10) !important; }
.mz-action-dock .icon-pill{ border: none !important; background: transparent !important; width:38px; height:38px; }
.mz-action-dock .icon-pill:hover{ background: rgba(var(--accent-rgb),.14) !important; }
.mz-dock-sep{ width:1px; height:22px; background: var(--border); flex-shrink:0; }

/* ---- ناوبری شناور و جدا از هدر ---- */
#Menu.mz-floating-nav{
  background: transparent !important;
  padding: 0 0 16px;
  margin-top: -8px;
}
#Menu.mz-floating-nav .navbar{
  background: linear-gradient(120deg, #0b0d16, #171326 55%, #0b0d16);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 6px 14px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
#Menu.mz-floating-nav .navbar::before{
  content:"";
  position:absolute; inset:-40% -10%;
  background: conic-gradient(from 0deg, rgba(var(--accent-rgb),.22), transparent 30%, transparent 70%, rgba(var(--accent-rgb),.22));
  animation: tpSpin 14s linear infinite;
  opacity:.5; pointer-events:none;
}
#Menu.mz-floating-nav .navbar-nav{ position:relative; z-index:1; }
#Menu.mz-floating-nav .nav-link{
  border-radius: 999px !important;
  font-size:.86rem;
}
#Menu.mz-floating-nav .nav-link::after{ display:none; }
#Menu.mz-floating-nav .nav-link:hover{
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  color:#fff !important;
  box-shadow: var(--shadow-sm);
}

/* ---- بند برند فوتر ---- */
.mz-footer-brand{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding-bottom: 22px; margin-bottom: 22px;
  border-bottom: 1px dashed rgba(255,255,255,.14);
}
.mz-footer-brand-mark{
  width:52px; height:52px; border-radius:16px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:1.4rem; color:#fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 12px 26px rgba(var(--accent-rgb), .35);
}
.mz-footer-brand-title{ font-weight:900; font-size:1.15rem; color:#fff; }
.mz-footer-brand-sub{ font-size:.8rem; color: rgba(255,255,255,.62); margin-top:2px; }
.mz-footer-brand-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-inline-start:auto; }
.mz-chip{
  display:flex; align-items:center; gap:6px;
  font-size:.78rem; color:#fff; text-decoration:none;
  padding:8px 14px; border-radius:999px;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
}
.mz-chip:hover{ background: rgba(var(--accent-rgb), .28); border-color: rgba(var(--accent-rgb), .4); }
.mz-chip i{ color: var(--accent-2); }

.ip-footer-card{ position: relative; }
.ip-footer-card::before{
  content:""; position:absolute; top:0; right:16px; left:16px; height:2px; border-radius:2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); opacity:.8;
}
#HeaderTop img {
    height: 60px !important;
}
/* =====================================================================
   واکنش‌گرایی موبایل: هدر، دکمه پنل مدیریت، منوی باز شده
===================================================================== */
@media (max-width: 767.98px){
  #HeaderTop{
    padding: 10px 12px;
    gap: 8px;
  }
  #HeaderTop img{ height: 46px !important; }
  .mz-brand-tag{ display: none !important; }

  .search-wrap{ order: 3; flex: 1 1 100%; max-width: none; min-width: 0; }

  .user-cart{
    order: 2;
    margin-inline-start: auto;
    gap: 6px;
    flex-wrap: nowrap;
  }
  .mz-action-dock{ padding: 4px; gap: 2px; }
  .mz-action-dock .vendor-header-btn span{ display: none; }
  .mz-action-dock .vendor-header-btn{ padding: 8px !important; }
  .icon-pill{ width: 38px; height: 38px; }

  /* دکمه پنل مدیریت: از بلوک بزرگ به یک قرص کوچک و هماهنگ با ردیف هدر */
  .admin-panel-btn{
    width: auto !important;
    height: 38px !important;
    padding: 0 12px !important;
    font-size: .72rem !important;
    border-radius: 999px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    -webkit-box-reflect: none !important;
    display: inline-flex !important;
    align-items: center;
    white-space: nowrap;
  }
  .admin-panel-btn i{ font-size: .95rem !important; margin-inline-end: 4px !important; }
  .admin-panel-btn > div{ margin: 0 !important; }
}

@media (max-width: 640px){
  .mz-topbar-inner{
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mz-topbar-inner::-webkit-scrollbar{ display: none; }
}

/* منوی موبایل: وقتی باز میشه دیگه شکل نگیره و تمیز باز/بسته بشه */
@media (max-width: 991.98px){
  #Menu.mz-floating-nav{ margin-top: 0; padding: 0 10px 12px; }
  #Menu.mz-floating-nav .navbar{
    border-radius: 20px;
    padding: 8px 12px;
  }
  #Menu.mz-floating-nav .navbar::before{ display: none; }
   #Menu.mz-floating-nav .navbar-toggler {
       width: 100%;
       display: flex;
       justify-content: flex-end;
       padding: 15px 5px;
   }

  #Menu.mz-floating-nav .navbar-collapse{
    margin-top: 6px;
    border-top: 1px solid rgba(255,255,255,.10);
    padding-top: 8px;
    animation: tpFadeUp .3s var(--ease);
  }
  #Menu.mz-floating-nav .navbar-nav{
    width: 100%;
    align-items: stretch !important;
  }
  #Menu.mz-floating-nav .nav-item{ width: 100%; }
  #Menu.mz-floating-nav .nav-link{
    padding: 12px 14px !important;
    margin: 2px 0 !important;
    text-align: center;
  }
}