/* =====================================================================
   THEME PRO — پایه سیستم طراحی مجازینو
   نسخه: 1.0
   شامل: توکن‌های رنگی روشن/تاریک، تایپوگرافی قابل‌تنظیم، انیمیشن‌های
   عمومی و رابط پنل تنظیمات کاربر (فونت، سایز، رنگ اصلی، حالت شب).
   این فایل «پایه» است و بعد از آن theme-pro-site.css یا
   theme-pro-admin.css بارگذاری می‌شود.
===================================================================== */

@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');

:root{
  /* ---- رنگ پایه‌ای که کاربر انتخاب می‌کند (پیش‌فرض) ---- */
  --accent-h: 357;      /* hue — قرمز پیش‌فرض برند مجازینو */
  --accent-s: 88%;      /* saturation */
  --accent-l: 52%;      /* lightness */

  --accent:     hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  --accent-2:   hsl(calc(var(--accent-h) + 48) var(--accent-s) 68%);
  --accent-ink: hsl(var(--accent-h) var(--accent-s) 22%);
  --accent-rgb: 242, 19, 28;

  /* ---- حالت روشن (پیش‌فرض) ---- */
  --bg:        #f5f6fb;
  --bg-2:      #ffffff;
  --surface:   #ffffff;
  --surface-2: #f8f9ff;
  --border:    rgba(15, 23, 42, .09);
  --text:      #10131c;
  --text-2:    #565b6d;
  --muted:     #8a90a6;
  --shadow-sm: 0 6px 16px rgba(20, 20, 45, .06);
  --shadow-md: 0 16px 40px rgba(20, 20, 45, .10);
  --shadow-lg: 0 24px 60px rgba(20, 20, 45, .16);
  --radius-sm: 12px;
  --radius:    18px;
  --radius-lg: 26px;
  --glass-bg:  rgba(255, 255, 255, .70);
  --glass-border: rgba(255, 255, 255, .5);

  /* ---- تایپوگرافی ---- */
  --font-main: 'Peyda', 'Vazirmatn', Tahoma, sans-serif;
  --user-scale: 1;
  --fs-base: calc(15px * var(--user-scale));

  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}

html[data-theme="dark"]{
  --bg:        #0b0d14;
  --bg-2:      #10121b;
  --surface:   #14161f;
  --surface-2: #191c28;
  --border:    rgba(255, 255, 255, .09);
  --text:      #eef0f7;
  --text-2:    #b6bad0;
  --muted:     #7d8299;
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, .35);
  --shadow-md: 0 18px 44px rgba(0, 0, 0, .45);
  --shadow-lg: 0 26px 70px rgba(0, 0, 0, .55);
  --glass-bg:  rgba(20, 22, 31, .66);
  --glass-border: rgba(255, 255, 255, .08);
  color-scheme: dark;
}

/* انتقال نرم هنگام تعویض تم / رنگ / فونت */
html.theme-transition,
html.theme-transition *{
  transition: background-color .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), box-shadow .35s var(--ease) !important;
}

html, body{
  background: var(--bg) !important;
  color: var(--text) !important;
}

body{
  font-family: var(--font-main) !important;
  font-size: var(--fs-base) !important;
}

/* ---------------------------------------------------------------------
   انیمیشن‌های عمومی
--------------------------------------------------------------------- */
@keyframes tpFadeUp{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes tpFadeIn{
  from{ opacity:0; } to{ opacity:1; }
}
@keyframes tpPop{
  0%{ transform:scale(.92); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}
@keyframes tpShine{
  0%{ background-position: -200% 0; }
  100%{ background-position: 200% 0; }
}
@keyframes tpPulseGlow{
  0%,100%{ box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .35); }
  50%{ box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0); }
}
@keyframes tpSpin{ to{ transform: rotate(360deg); } }

#f1 > section#Header,
.admin-shell{ animation: tpFadeIn .5s var(--ease); }

a, button, .btn, input, select, textarea, .nav-link, .icon-pill{
  transition: transform .2s var(--ease), background .25s var(--ease),
              color .2s var(--ease), border-color .25s var(--ease),
              box-shadow .25s var(--ease), opacity .2s var(--ease) !important;
}

::selection{ background: rgba(var(--accent-rgb), .28); color: var(--text); }

/* اسکرول‌بار ظریف */
*{ scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb),.45) transparent; }
*::-webkit-scrollbar{ width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb{ background: rgba(var(--accent-rgb),.45); border-radius: 99px; }

/* =====================================================================
   پنل تنظیمات کاربر
===================================================================== */
#tpToggleBtn{
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  cursor: pointer;
}
#tpToggleBtn svg{ width: 22px; height: 22px; }

#tpToggleBtn.tp-floating{
  position: fixed;
  z-index: 10050;
  bottom: 86px;
  inset-inline-end: 16px;
  width: 52px;
  height: 52px;
  box-shadow: var(--shadow-lg);
  animation: tpPulseGlow 2.6s ease-in-out infinite;
}
#tpToggleBtn.tp-floating:hover{ transform: translateY(-3px) rotate(35deg) scale(1.04); }
#tpToggleBtn.tp-floating svg{ width: 24px; height: 24px; }
@media (max-width: 480px){ #tpToggleBtn.tp-floating{ bottom: 84px; } }

#tpToggleBtn.tp-anchored{
  position: static;
  width: 38px;
  height: 38px;
  box-shadow: none;
  animation: none;
  flex-shrink: 0;
}
#tpToggleBtn.tp-anchored:hover{ transform: translateY(-2px) rotate(35deg); box-shadow: var(--shadow-sm); }
#tpToggleBtn.tp-anchored svg{ width: 19px; height: 19px; }

#tpOverlay{
  position: fixed; inset: 0; z-index: 10040;
  background: rgba(6,7,12,.45);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease);
}
#tpOverlay.open{ opacity: 1; pointer-events: auto; }

#tpPanel{
  position: fixed; z-index: 10045;
  top: 0; bottom: 0; inset-inline-end: 0;
  width: min(360px, 92vw);
  background: var(--surface);
  color: var(--text);
  border-inline-start: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateX(var(--tp-off, 110%));
  transition: transform .38s var(--ease);
  display: flex; flex-direction: column;
  font-family: var(--font-main);
}
html[dir="rtl"] #tpPanel{ --tp-off: -110%; }
html:not([dir="rtl"]) #tpPanel{ --tp-off: 110%; }
#tpPanel.open{ transform: translateX(0); }

#tpPanel .tp-head{
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.14), transparent);
}
#tpPanel .tp-head h4{ margin:0; font-weight:900; font-size:1.05rem; }
#tpPanel .tp-head p{ margin:2px 0 0; font-size:.78rem; color: var(--muted); }
#tpPanel .tp-close{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--border);
  background: var(--surface-2); color: var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
#tpPanel .tp-close:hover{ background: rgba(var(--accent-rgb),.14); }

#tpPanel .tp-body{ padding: 18px 20px 28px; overflow-y: auto; flex:1; }
#tpPanel .tp-section{ margin-bottom: 26px; animation: tpFadeUp .4s var(--ease) both; }
#tpPanel .tp-label{
  font-size:.82rem; font-weight:800; margin-bottom:10px; display:flex; align-items:center; gap:8px; color: var(--text);
}
#tpPanel .tp-label i{ color: var(--accent); font-size:1rem; }

/* تعویض روشن/تاریک */
.tp-mode-row{ display:flex; gap:8px; background: var(--surface-2); padding:5px; border-radius: 999px; border:1px solid var(--border); }
.tp-mode-row button{
  flex:1; border:none; background:transparent; padding:9px 6px; border-radius:999px;
  font-size:.78rem; font-weight:700; color: var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px;
}
.tp-mode-row button.active{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; box-shadow: var(--shadow-sm); }

/* فونت */
.tp-font-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tp-font-opt{
  border:1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-sm);
  padding:12px 8px; text-align:center; cursor:pointer; font-size:.85rem; color: var(--text-2);
}
.tp-font-opt.active{ border-color: var(--accent); color: var(--accent-ink); background: rgba(var(--accent-rgb),.10); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.22) inset; }

/* سایز فونت */
.tp-size-row{ display:flex; align-items:center; gap:10px; }
.tp-size-row input[type=range]{
  flex:1; accent-color: var(--accent); height:4px; cursor:pointer;
}
.tp-size-badge{
  min-width:44px; text-align:center; font-size:.78rem; font-weight:800; color:#fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-radius: 999px; padding:5px 0;
}

/* پالت رنگ */
.tp-color-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.tp-swatch{
  width:30px; height:30px; border-radius:50%; cursor:pointer; border:2px solid var(--surface);
  box-shadow: 0 0 0 1.5px var(--border); position:relative;
}
.tp-swatch.active::after{
  content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--accent);
}
.tp-custom-color{
  width:34px; height:34px; border-radius:50%; border:none; padding:0; cursor:pointer; background:none;
}
.tp-custom-color::-webkit-color-swatch-wrapper{ padding:0; border-radius:50%; }
.tp-custom-color::-webkit-color-swatch{ border-radius:50%; border:2px solid var(--surface); }

.tp-reset{
  width:100%; margin-top:6px; padding:11px; border-radius: var(--radius-sm); border:1px dashed var(--border);
  background: transparent; color: var(--muted); font-size:.8rem; cursor:pointer; font-weight:700;
}
.tp-reset:hover{ color: var(--text); border-color: var(--accent); }

/* =====================================================================
   شبکهٔ ایمنی حالت تاریک/روشن
   خیلی از صفحات از کلاس‌های آماده بوت‌استرپ (text-dark، bg-white، card،
   table، modal، form-control و ...) با رنگ ثابت استفاده می‌کنند. این
   بخش آن‌ها را به توکن‌های رنگی متغیر وصل می‌کند تا در حالت تاریک هم
   متن‌ها خوانا بمانند و پس‌زمینه‌ها هماهنگ با تم شوند.
===================================================================== */
body, p, span, li, label, small, h1, h2, h3, h4, h5, h6, .form-label, .form-check-label,
div, td, th, dt, dd, strong, b, em, i:not([class*="bi-"]){
  color: var(--text) !important;
}
body a{ color: var(--text-2) !important; }
body a:hover{ color: var(--accent-ink) !important; }

.text-dark, .text-black{ color: var(--text) !important; }
.text-muted, .text-secondary, .text-black-50{ color: var(--muted) !important; }
a:not(.btn):not([class*="bg-"]){ color: inherit; }

.bg-white, .bg-light{ background: var(--surface) !important; color: var(--text) !important; }
.bg-body, .bg-body-tertiary, .bg-body-secondary{ background: var(--bg) !important; color: var(--text) !important; }

.card, .list-group-item, .modal-content, .dropdown-menu, .offcanvas,
.accordion-item, .accordion-button, .toast, .popover, .popover-body{
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.accordion-button:not(.collapsed){ background: rgba(var(--accent-rgb), .12) !important; color: var(--accent-ink) !important; }
.accordion-button::after{ filter: none; }
.dropdown-item{ color: var(--text) !important; }
.dropdown-item:hover, .dropdown-item:focus{ background: rgba(var(--accent-rgb), .12) !important; color: var(--text) !important; }
.dropdown-divider{ border-color: var(--border) !important; }

.table{ color: var(--text) !important; border-color: var(--border) !important; }
.table > :not(caption) > *{ background: transparent !important; color: var(--text) !important; border-color: var(--border) !important; }
.table thead{ background: var(--surface-2) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > *{ background: rgba(var(--accent-rgb), .04) !important; }
.table-hover > tbody > tr:hover > *{ background: rgba(var(--accent-rgb), .09) !important; }

.form-control, .form-select, .form-check-input, textarea, input[type="text"],
input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"]{
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.form-control::placeholder{ color: var(--muted) !important; opacity: 1; }
.form-control:disabled, .form-select:disabled{ opacity: .6; }
.input-group-text{ background: var(--surface-2) !important; color: var(--text-2) !important; border-color: var(--border) !important; }

.btn-light{ background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border) !important; }
.btn-outline-secondary, .btn-outline-dark{ color: var(--text) !important; border-color: var(--border) !important; }
.btn-outline-secondary:hover, .btn-outline-dark:hover{ background: rgba(var(--accent-rgb), .12) !important; color: var(--text) !important; }
.badge.text-bg-light{ background: var(--surface-2) !important; color: var(--text) !important; }

.modal-header, .modal-footer, .offcanvas-header{ border-color: var(--border) !important; }
hr{ border-color: var(--border) !important; opacity: 1; }
.nav-tabs{ border-color: var(--border) !important; }
.nav-tabs .nav-link{ color: var(--muted) !important; border-color: transparent !important; }
.nav-tabs .nav-link.active{ background: var(--surface) !important; color: var(--accent-ink) !important; border-color: var(--border) var(--border) var(--surface) !important; }

html[data-theme="dark"] .btn-close{ filter: invert(1) grayscale(1) brightness(1.8); }
html[data-theme="dark"] img[src*="tick.gif"]{ filter: brightness(.9); }
html[data-theme="dark"] .card, html[data-theme="dark"] .modal-content{ box-shadow: var(--shadow-md) !important; }

/* select/option های بومی مرورگر */
select, option{ background: var(--surface); color: var(--text); }

/* ---------------------------------------------------------------------
   نواحی با پس‌زمینهٔ تیرهٔ ثابت (فوتر، نوار بالا، منوی شناور، سایدبار
   ادمین): صرف‌نظر از تم روشن/تاریک سایت، متن باید همیشه روشن بماند.
--------------------------------------------------------------------- */
.ip-footer, .ip-footer *,
footer, footer *,
.mz-topbar, .mz-topbar *,
#Menu, #Menu *,
.offcanvas-custom, .offcanvas-custom *,
.sidebar, .sidebar *{
  color: rgba(255,255,255,.86) !important;
}
.ip-title, .mz-footer-brand-title, .mz-chip, .mz-chip *, #Menu .nav-link,
.brand-title, #Menu .nav-link:hover, #Menu .nav-link.active,
.sidebar .nav-link:hover, .sidebar .nav-link.active, .btn-soft, .btn-soft *{
  color: #fff !important;
}
.sidebar .nav-section-title, .brand-sub{ color: rgba(226,232,240,.65) !important; }

/* دکمه‌ها و نشان‌ها: متن همیشه روی گرادینت/رنگ پس‌زمینهٔ خودشان خوانا بماند */
.btn-primary, .btn-primary *, .btn-danger, .btn-danger *, .btn-success, .btn-success *,
.btn-info, .btn-info *, .badge, .badge *, .discount-badge, .discount-badge *,
.admin-panel-btn, .admin-panel-btn *, .vendor-header-btn, .vendor-header-btn *,
.icon-pill, .icon-pill *{
  color: #fff !important;
}
.btn-warning, .btn-warning *, .btn-light, .btn-light *, .badge.text-bg-light, .badge.text-bg-light *{
  color: var(--text) !important;
}
.icon-pill, .icon-pill *{ color: var(--accent) !important; }
.vendor-header-btn, .vendor-header-btn *{ color: var(--text-2) !important; }
.mz-action-dock .vendor-header-btn, .mz-action-dock .vendor-header-btn *{ color: var(--text-2) !important; }

/* جستجوی پیشنهادی (Autocomplete) */
.ac-box{ background: var(--surface) !important; }
.ac-head{ background: var(--surface-2) !important; border-color: var(--border) !important; }
.ac-title, .ac-name{ color: var(--text) !important; }
.ac-hint, .ac-desc{ color: var(--muted) !important; }
.ac-item{ color: var(--text) !important; border-color: var(--border) !important; }
.ac-item:hover{ background: rgba(var(--accent-rgb), .08) !important; }
.ac-price .stk{ background: var(--surface) !important; color: var(--text-2) !important; border-color: var(--border) !important; }
.ac-more{ color: var(--accent-ink) !important; background: rgba(var(--accent-rgb), .08) !important; }