@font-face {
    font-family: 'Peyda100';
    src: url('../fonts/PeydaWebFaNum-Thin.4dc9791976a333b36501.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Peyda200';
    src: url('../fonts/PeydaWebFaNum-ExtraLight.cb12d7d5e9d6131c285f.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Peyda300';
    src: url('../fonts/PeydaWebFaNum-Light.e5c4aa2be8084a7fd345.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Peyda400';
    src: url('../fonts/PeydaWebFaNum-Regular.a85fc388413d6fb2707b.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Peyda500';
    src: url('../fonts/PeydaWebFaNum-Medium.5ae94427bffc3c292a70.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Peyda600';
    src: url('../fonts/PeydaWebFaNum-SemiBold.bee880ae22ea6f0f046e.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Peyda700';
    src: url('../fonts/PeydaWebFaNum-Bold.2106f9398d9799d35d55.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Peyda800';
    src: url('../fonts/PeydaWebFaNum-ExtraBold.5d0e4f0b138c23493636.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Peyda900';
    src: url('../fonts/PeydaWebFaNum-Black.ce8ffc88f1303a4ed135.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

body,
html {
    font-family: 'Peyda400', sans-serif !important;
    /* Regular */
    font-weight: 400 !important;
}

h1,
h2 {
    font-family: 'Peyda900', sans-serif !important;
    /* Black */
    font-weight: 900 !important;
}

h3,
h4 {
    font-family: 'Peyda700', sans-serif !important;
    /* Bold */
    font-weight: 700 !important;
}

p {
    font-family: 'Peyda300', sans-serif !important;
    /* Light */
    font-weight: 300 !important;
}

strong,
b {
    font-family: 'Peyda800', sans-serif !important;
    /* ExtraBold */
    font-weight: 800 !important;
}

em {
    font-family: 'Peyda200', sans-serif !important;
    /* ExtraLight */
    font-weight: 200 !important;
}

a {
    font-family: 'Peyda500', sans-serif !important;
    /* Medium */
    font-weight: 500 !important;
}

small,
.caption {
    font-family: 'Peyda100', sans-serif !important;
    /* Thin */
    font-weight: 100 !important;
}

button,
input,
textarea,
select {
    font-family: 'Peyda600', sans-serif !important;
    /* SemiBold */
    font-weight: 600 !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #1976D2; border-radius: 4px; }

/* ── Transitions ── */
a, button { transition: all .2s; }

/* ── Input number: حذف فلش‌های کروم ── */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* ── Gradients ── */
.primary-gradient { background: linear-gradient(135deg, #1976D2, #42A5F5); }
.accent-gradient  { background: linear-gradient(135deg, #FF9800, #FFB74D); }
.green-gradient   { background: linear-gradient(135deg, #43A047, #66BB6A); }
.purple-gradient  { background: linear-gradient(135deg, #7B1FA2, #AB47BC); }
.red-gradient     { background: linear-gradient(135deg, #E53935, #EF5350); }

/* ── Card ── */
.card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.1); }

/* ── Badge ── */
.badge {
  position: absolute; top: -4px; right: -4px;
  width: 18px; height: 18px;
  background: #FF9800; border-radius: 50%;
  font-size: 10px; display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700;
}

/* ── Status Online dot ── */
.status-online {
  width: 10px; height: 10px;
  background: #43A047; border-radius: 50%; border: 2px solid white;
}

/* ── Bottom Nav shared ── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: white; border-top: 1px solid #E3F2FD;
  box-shadow: 0 -4px 20px rgba(25,118,210,.08);
  z-index: 50; padding: 6px 0 env(safe-area-inset-bottom, 10px);
}

/* ── PWA safe area (iPhone) ── */
@supports (padding: max(0px)) {
  .bottom-nav { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* ── Animations ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.animate-fadein  { animation: fadeIn  .3s ease; }
.animate-slideup { animation: slideUp .3s ease; }

.shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ── Toast notification ── */
#toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  background: #212121; color: white;
  padding: 12px 24px; border-radius: 50px;
  font-size: .85rem; font-weight: 600;
  z-index: 9999; opacity: 0;
  transition: opacity .3s;
  white-space: nowrap;
  pointer-events: none;
}
#toast.show { opacity: 1; }

/* ── Progress Bar ── */
.progress-bar  { height: 6px; border-radius: 3px; background: #E3F2FD; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 3px;
                 background: linear-gradient(90deg,#1976D2,#42A5F5); transition: width 1s ease; }

/* ── Wallet card decorations ── */
.wallet-card {
  background: linear-gradient(135deg, #1976D2 0%, #42A5F5 60%, #FF9800 100%);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.wallet-card::before {
  content: ''; position: absolute;
  top: -40px; right: -40px;
  width: 150px; height: 150px;
  background: rgba(255,255,255,.1); border-radius: 50%;
}
.wallet-card::after {
  content: ''; position: absolute;
  bottom: -30px; left: -30px;
  width: 120px; height: 120px;
  background: rgba(255,255,255,.08); border-radius: 50%;
}

/* ── Toggle switch ── */
.toggle         { position: relative; width: 44px; height: 24px; display: inline-block; }
.toggle input   { opacity: 0; width: 0; height: 0; }
.toggle .slider { position: absolute; cursor: pointer; inset: 0; background: #ccc; border-radius: 24px; transition: .3s; }
.toggle .slider:before {
  content: ''; position: absolute;
  height: 18px; width: 18px;
  right: 3px; bottom: 3px;
  background: white; border-radius: 50%; transition: .3s;
}
.toggle input:checked + .slider           { background: #1976D2; }
.toggle input:checked + .slider:before    { transform: translateX(-20px); }

/* ── Chat bubbles ── */
.bubble-in  {
  background: white;
  border-radius: 16px 16px 16px 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.bubble-out {
  background: linear-gradient(135deg, #1976D2, #42A5F5);
  color: white;
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 2px 8px rgba(25,118,210,.3);
}

/* ── Sidebar desktop ── */
.sidebar-item.active { background: #EFF6FF; color: #1976D2; }
.sidebar-item.active i { color: #1976D2; }

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 100; display: none;
  align-items: flex-end; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-sheet {
  background: white; border-radius: 24px 24px 0 0;
  width: 100%; max-width: 480px;
  padding: 20px; animation: slideUp .3s ease;
  max-height: 90vh; overflow-y: auto;
}

/* ── Form inputs ── */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #1976D2 !important;
  box-shadow: 0 0 0 3px rgba(25,118,210,.1);
}

/* ── Responsive table ── */
@media (max-width: 600px) {
  table { font-size: .75rem; }
  th, td { padding: 8px 10px !important; }
}