/* ============================================================
   دستیار سالن زیبایی — طراحی یکپارچه محصولات وب
   وب‌اپ مالکان، صفحه اصلی، ویزارد رزرو، صفحات عمومی سالن
   Mobile-first · RTL · فونت اختصاصی آریان
   ============================================================ */

@font-face {
  font-family: 'Arian Sans';
  src: url('/static/fonts/arian-sans.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* brand */
  --plum: #3d1c33;
  --plum-2: #5a2a4c;
  --rose: #b4356c;
  --rose-dark: #8f2455;
  --rose-soft: #fceef5;
  --gold: #d9a441;
  --gold-soft: #fdf3e0;
  /* neutrals */
  --bg: #faf6f8;
  --surface: #ffffff;
  --ink: #2b1e28;
  --muted: #82707d;
  --line: #f0e2ea;
  --danger: #d64550;
  --ok: #1f8a63;
  /* shape */
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 10px 30px rgba(61, 28, 51, .10);
  --shadow-sm: 0 3px 12px rgba(61, 28, 51, .07);
  --grad: linear-gradient(135deg, var(--rose) 0%, var(--plum) 120%);
}

/* ---- فونت اختصاصی، همه‌جا ---- */
body, input, select, textarea, button, .form-control, .form-select, .btn {
  font-family: 'Arian Sans', Vazirmatn, Tahoma, sans-serif !important;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--rose); color: #fff; }

/* ---- دکمه‌ها ---- */
.btn { border-radius: var(--radius-sm); font-weight: 700; min-height: 42px; transition: transform .15s ease, box-shadow .15s ease, background .15s; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible {
  outline: 3px solid rgba(180, 53, 108, .35); outline-offset: 1px;
}
.btn-primary, .btn-success:not(:hover), .btn-dark {
  background: var(--grad) !important; border: none !important; color: #fff !important;
  box-shadow: 0 6px 16px rgba(143, 36, 85, .28);
}
.btn-primary:hover, .btn-dark:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(143, 36, 85, .36); }
.btn-outline-primary { color: var(--rose) !important; border: 1.5px solid var(--rose) !important; background: transparent; }
.btn-outline-primary:hover { background: var(--rose) !important; color: #fff !important; }
.btn-danger { background: var(--danger) !important; border: none !important; }
.btn-light, .btn-outline-secondary { border-radius: var(--radius-sm); }

/* ---- کارت‌ها ---- */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
  background: var(--surface);
  overflow: hidden;
}
.card-header {
  background: var(--rose-soft) !important;
  color: var(--plum) !important;
  border-bottom: 1px solid var(--line) !important;
  font-weight: 800;
}
.card:hover { box-shadow: var(--shadow); }

/* ---- فرم‌ها ---- */
.form-label { font-weight: 700; color: var(--plum); font-size: .88rem; }
.form-control, .form-select {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .6rem .85rem;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 4px rgba(180, 53, 108, .12);
}

/* ---- جدول‌ها ---- */
.table { font-size: .88rem; }
.table th {
  background: var(--rose-soft);
  color: var(--plum);
  font-weight: 800;
  white-space: nowrap;
}
.table td { vertical-align: middle; }

/* ---- نوار بالایی پنل‌ها ---- */
.navbar { background: var(--grad) !important; box-shadow: 0 4px 18px rgba(61, 28, 51, .25); }
.navbar .nav-link { color: rgba(255,255,255,.92) !important; border-radius: 10px; font-weight: 600; }
.navbar .nav-link:hover, .navbar .nav-link.active { background: rgba(255,255,255,.16) !important; color: #fff !important; }

/* ---- برچسب‌ها و هشدارها ---- */
.badge { border-radius: 8px; font-weight: 700; padding: .45em .7em; }
.bg-primary { background: var(--rose) !important; }
.alert { border: none; border-radius: var(--radius-sm); font-size: .9rem; }
.alert-success { background: #e6f6ef; color: #14634a; }
.alert-danger  { background: #fdeaec; color: #a62633; }
.alert-warning { background: var(--gold-soft); color: #7c5a12; }
.alert-info    { background: #eaf3fd; color: #235d94; }

/* ---- ناوبری پایین موبایل (اپ‌مانند) ---- */
.bnav {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.bnav a { border-radius: 12px; transition: background .15s; }
.bnav a:active { background: var(--rose-soft); }

/* ---- اسکرول‌بار ظریف ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #dcc7d4; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- حرکت ---- */
@media (prefers-reduced-motion: no-preference) {
  .card, .btn { will-change: transform; }
}