/* ==========================================
   Font Setup (Vazirmatn + IRANSansWeb)
   ========================================== */
@font-face {
  font-family: 'Vazirmatn';
  src: url('https://salambaba.co/orders/font/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('https://salambaba.co/orders/font/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'IRANSansWeb';
  src: url('https://salambaba.co/font/IRANSansWeb.woff2') format('woff2'),
       url('https://salambaba.co/font/IRANSansWeb.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IRANSansWeb';
  src: url('https://salambaba.co/font/IRANSansWeb_Bold.woff2') format('woff2'),
       url('https://salambaba.co/font/IRANSansWeb_Bold.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}

/* ==========================================
   Theme Variables
   ========================================== */
:root {
  --brand-blue: #007BFF;     /* 🔹 آبی شفاف‌تر و مدرن‌تر */
  --brand-green: #22c55e;
  --brand-yellow: #facc15;
  --brand-red: #ef4444;
  --text: #0f172a;
  --muted: #6c757d;          /* 🔸 طوسی واقعی‌تر (bootstrap-style) */
  --card: #ffffff;
  --shadow: 0 6px 18px rgba(15,23,42,.08);
  --border: #d1d5db;         /* 🔹 مرزها کمی روشن‌تر */
}


/* ==========================================
   Global Layout
   ========================================== */
html, body {
  font-family: 'Vazirmatn', 'IRANSansWeb', Tahoma, Arial, sans-serif;
  direction: rtl;
  text-align: right;
  background: linear-gradient(180deg, #f9fafb 0%, #f1f5f9 100%);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px;
  margin: 0;
}

/* ==========================================
   Logo Stripes (Top Animated Logo)
   ========================================== */
.logo-stripes {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  background: var(--card);
 padding: 19px 0px;
  border-radius: 18px;
  box-shadow: var(--shadow);
  animation: blink 3.5s infinite alternate;
  margin-bottom: 22px;
}
.logo-stripes span {
 display: block;
    width: 19px;
    height: 65px;
    border-radius: 20px;
}
.b { background: var(--brand-blue); }
.g { background: var(--brand-green); }
.y { background: var(--brand-yellow); }
.r { background: var(--brand-red); }

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.55; }
  100% { opacity: 1; }
}

/* ==========================================
   Login Box
   ========================================== */
.login-box {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border-radius: 20px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.login-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(14,165,233,0.15);
}

/* ==========================================
   Welcome Section
   ========================================== */
.welcome {
  text-align: center;
  margin-bottom: 18px;
}
.welcome h1 {
  font-size: 22px;
  color: var(--brand-blue);
  font-weight: 800;
  margin: 0;
}
.welcome p {
  font-size: 14px;
  color: var(--muted);
  margin: 6px 0 0;
}

/* ==========================================
   Motivation Box
   ========================================== */
.motivation {
  background: linear-gradient(180deg, #e0f2fe, #ffffff);
  border: 1px solid #bae6fd;
  color: #0369a1;
  border-radius: 14px;
  padding: 12px 14px;
  text-align: center;
  line-height: 1.8;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(14,165,233,.1);
  margin-bottom: 20px;
}

/* ==========================================
   Form Fields
   ========================================== */
.field {
  margin-bottom: 14px;
  text-align: right;
}
.field span {
 display: list-item;
    margin: 14px 2px 2px 10px;
    color: var(--muted);
    font-size: 16px;
    background: linear-gradient(284deg, #dadcdf, #a1bbf200);
    border-radius: 1px 7px 5px 1px;
    padding: 6px;
}
input {
  width: 100%;
  padding: 10px 1px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fafc;
  font-size: 15px;
  color: var(--text);
  transition: all 0.2s ease;
}
input:focus {
  border-color: var(--brand-blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(14,165,233,.2);
  outline: none;
}

/* ==========================================
   Error Note
   ========================================== */
.note {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

/* ==========================================
   Submit Button
   ========================================== */
.btn {
  width: 50%;
  border: none;
  background: linear-gradient(135deg, var(--brand-blue), #0284c7);
  color: #fff;
  border-radius: 12px;
  font-weight: 700;
  padding: 12px;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(14,165,233,.3);
      margin: 38px;
      font-family: 'Vazirmatn';
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(14,165,233,.35);
}
.btn:active {
  transform: scale(0.97);
}

/* ==========================================
   Responsive
   ========================================== */
@media (max-width: 480px) {
  .login-box {
    padding: 24px;
  }
  .welcome h1 {
    font-size: 20px;
  }
}
@keyframes wave {
  0%, 100% { transform: translateY(15px); }
  25% { transform: translateY(25px); }
  50% { transform: translateY(10px); }
  75% { transform: translateY(10px); }
}

.logo-stripes span {
  display: block;
  width: 20px;
  height: 48px;
  border-radius: 20px;
  animation: wave 5s infinite ease-in-out;
}
.register-link a{
  font-size:15px;
  text-decoration:none;
}
.register-link a:hover{
  opacity:0.7;
}

/* تاخیر زمانی برای هر نوار */
.logo-stripes .b { animation-delay: 0s; }
.logo-stripes .g { animation-delay: 0.1s; }
.logo-stripes .y { animation-delay: 0.2s; }
.logo-stripes .r { animation-delay: 0.3s; }