/* Menx — استایل پنل کسب‌وکار (فاز ۳) */

.menx-panel {
  --menx-bg: #ffffff;
  --menx-line: #e6e8ee;
  --menx-ink: #1f2430;
  --menx-mute: #6b7280;
  --menx-primary: #4f5aa8;
  --menx-danger: #e24642;
  --menx-ok: #1e7a44;
  --menx-radius: 12px;

  direction: rtl;
  color: var(--menx-ink);
  max-inline-size: 1080px;
  margin-inline: auto;
  padding-block: 16px;
  font-size: 14px;
  line-height: 1.9;
}

.menx-panel * { box-sizing: border-box; }

.menx-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: var(--menx-bg);
  border: 1px solid var(--menx-line);
  border-radius: var(--menx-radius);
}

.menx-head h1 { margin: 0; font-size: 20px; font-weight: 800; }

.menx-slug {
  font-size: 12px;
  color: var(--menx-mute);
  text-decoration: none;
  direction: ltr;
  display: inline-block;
}

.menx-slug:hover { color: var(--menx-primary); }

.menx-head-side { display: flex; gap: 8px; flex-wrap: wrap; }

.menx-chip {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef0f3;
  color: #5b6472;
}

.menx-chip-ok { background: #e6f7ec; color: var(--menx-ok); }
.menx-chip-err { background: #fdecec; color: #b3261e; }

/* ناوبری */
.menx-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 14px;
}

.menx-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--menx-line);
  border-radius: 999px;
  background: #fff;
  color: var(--menx-ink);
  text-decoration: none;
  font-size: 13px;
  transition: .15s;
}

.menx-nav-item:hover { border-color: var(--menx-primary); color: var(--menx-primary); }

.menx-nav-item.is-active {
  background: var(--menx-primary);
  border-color: var(--menx-primary);
  color: #fff;
}

.menx-nav-ico { opacity: .75; font-size: 11px; }

/* کارت */
.menx-card {
  background: var(--menx-bg);
  border: 1px solid var(--menx-line);
  border-radius: var(--menx-radius);
  padding: 16px 18px;
  margin-block-end: 14px;
}

.menx-card > h2 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
}

.menx-card > h2 small { font-weight: 400; color: var(--menx-mute); font-size: 12px; }

.menx-sub { color: var(--menx-mute); font-size: 12px; margin: 0 0 10px; display: block; }
.menx-empty { color: var(--menx-mute); font-size: 13px; padding: 10px 0; margin: 0; }

/* هشدار */
.menx-alert {
  padding: 10px 14px;
  border-radius: 10px;
  margin-block-end: 12px;
  font-size: 13px;
}

.menx-alert-ok { background: #e6f7ec; color: var(--menx-ok); }
.menx-alert-err { background: #fdecec; color: #b3261e; }

/* فرم */
.menx-form label { display: block; font-size: 12px; color: var(--menx-mute); margin-block-end: 4px; }

.menx-form input[type="text"],
.menx-form input[type="file"],
.menx-form select,
.menx-form textarea {
  inline-size: 100%;
  padding: 8px 10px;
  border: 1px solid var(--menx-line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  background: #fff;
  color: var(--menx-ink);
}

.menx-form input:focus,
.menx-form select:focus,
.menx-form textarea:focus {
  outline: none;
  border-color: var(--menx-primary);
}

.menx-form textarea { resize: vertical; }

.menx-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.menx-form-row input[type="text"] { inline-size: auto; flex: 1 1 160px; }
.menx-form-row select { inline-size: auto; flex: 0 1 200px; }
.menx-w-sm { flex: 0 0 70px !important; text-align: center; }

.menx-grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.menx-col2 { grid-column: 1 / -1; }
.menx-grow { flex: 1 1 auto; min-inline-size: 0; }

.menx-check {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 13px !important;
  color: var(--menx-ink) !important;
  padding-block: 8px;
}

.menx-check input { inline-size: auto !important; }

.menx-slug-box {
  display: flex;
  align-items: center;
  border: 1px solid var(--menx-line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.menx-slug-box span {
  padding: 8px 10px;
  background: #f5f6fa;
  color: var(--menx-mute);
  font-size: 12px;
  direction: ltr;
}

.menx-slug-box input { border: none !important; border-radius: 0 !important; }
.menx-price { direction: ltr; text-align: start; }
.menx-prev { display: block; margin-block-start: 8px; border-radius: 8px; object-fit: cover; }

/* دکمه */
.menx-btn {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--menx-line);
  border-radius: 8px;
  background: #f5f6fa;
  color: var(--menx-ink);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  transition: .15s;
}

.menx-btn:hover { border-color: var(--menx-primary); color: var(--menx-primary); }

.menx-btn-primary {
  background: var(--menx-primary);
  border-color: var(--menx-primary);
  color: #fff;
}

.menx-btn-primary:hover { filter: brightness(1.08); color: #fff; }

.menx-btn-danger {
  background: #fdecec;
  border-color: #f7cfcf;
  color: var(--menx-danger);
}

.menx-btn-danger:hover { background: var(--menx-danger); color: #fff; border-color: var(--menx-danger); }

/* لیست */
.menx-list { list-style: none; margin: 0; padding: 0; }

.menx-list-item {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  padding: 10px;
  border: 1px solid var(--menx-line);
  border-radius: 10px;
  margin-block-end: 8px;
  background: #fff;
}

.menx-list-item.menx-ghost { opacity: .4; }

.menx-drag {
  cursor: grab;
  color: #b6bcc7;
  font-size: 18px;
  line-height: 1;
  padding-block-start: 6px;
  user-select: none;
}

.menx-thumb { flex: 0 0 56px; }
.menx-thumb img { border-radius: 8px; object-fit: cover; }

.menx-thumb-empty {
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: 8px;
  background: #f5f6fa;
  color: #b6bcc7;
}

.menx-count { font-size: 12px; color: var(--menx-mute); white-space: nowrap; }

/* پیشرفت */
.menx-progress {
  block-size: 8px;
  border-radius: 999px;
  background: #eef0f3;
  overflow: hidden;
}

.menx-progress span {
  display: block;
  block-size: 100%;
  background: var(--menx-primary);
  transition: width .3s;
}

.menx-steps { list-style: none; margin: 8px 0 0; padding: 0; }

.menx-steps li {
  padding: 6px 0;
  border-block-end: 1px dashed var(--menx-line);
  font-size: 13px;
}

.menx-steps li::before { content: "\25CB"; margin-inline-end: 8px; color: #c4c9d4; }
.menx-steps li.is-done::before { content: "\2713"; color: var(--menx-ok); }
.menx-steps li a { color: inherit; text-decoration: none; }
.menx-steps li a:hover { color: var(--menx-primary); }

.menx-quick { display: flex; flex-wrap: wrap; gap: 8px; }

/* قالب‌ها */
.menx-themes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-block-end: 14px;
}

.menx-theme {
  display: block;
  border: 2px solid var(--menx-line);
  border-radius: var(--menx-radius);
  padding: 10px;
  cursor: pointer;
  transition: .15s;
}

.menx-theme:hover { border-color: #c4c9d4; }
.menx-theme.is-selected { border-color: var(--menx-primary); background: #f7f8fd; }
.menx-theme input { position: absolute; opacity: 0; pointer-events: none; }

.menx-theme-prev {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  background: #eef0f3 center / cover no-repeat;
  margin-block-end: 8px;
}

.menx-theme-name { display: block; font-weight: 700; font-size: 13px; }
.menx-theme-desc { display: block; font-size: 12px; color: var(--menx-mute); }
.menx-theme-demo { font-size: 12px; color: var(--menx-primary); text-decoration: none; }

/* اونبوردینگ و مهمان */
.menx-onboard, .menx-guest {
  max-inline-size: 520px;
  margin-inline: auto;
  padding: 24px;
  border: 1px solid var(--menx-line);
  border-radius: var(--menx-radius);
  background: #fff;
}

.menx-onboard .menx-form > * { margin-block-end: 10px; }

@media (max-width: 640px) {
  .menx-grid2 { grid-template-columns: 1fr; }
  .menx-form-row { flex-direction: column; align-items: stretch; }
  .menx-form-row input[type="text"], .menx-form-row select { flex: 1 1 auto; inline-size: 100%; }
  .menx-w-sm { flex: 1 1 auto !important; }
}