/* لایه پوشش کل فرم */
.form-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  backdrop-filter: blur(8px);
  animation: fadeInOverlay 0.3s ease forwards;
}

/* انیمیشن فید این */
@keyframes fadeInOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* باکس فرم ورود و تایید خروج */
.logout-confirm-box,
.login-form {
  background: rgba(15, 0, 25, 0.85);
  padding: 2.5rem 3rem;
  border-radius: 16px;
  box-shadow:
    0 8px 24px rgba(156, 39, 176, 0.6),
    0 4px 12px rgba(64, 0, 96, 0.6);
  text-align: center;
  width: 350px;
  max-width: 90vw;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #e0d8ff;
  animation: popIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(156, 39, 176, 0.5);
}

/* انیمیشن پاپ این */
@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* فرم - فیلدهای ورودی */
.login-form input {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(180, 120, 255, 0.15);
  border-radius: 12px;
  background: rgba(20, 0, 30, 0.5);
  color: #f0eaff;
  font-size: 1rem;
  margin-top: 0.5rem;
  outline: none;
  backdrop-filter: blur(6px);
  transition: all 0.3s ease;
  box-shadow:
    inset 0 0 5px rgba(180, 120, 255, 0.15),
    0 0 0 transparent;
}

.login-form input::placeholder {
  color: rgba(220, 220, 255, 0.45);
  font-style: italic;
}

.login-form input:focus {
  border-color: #9c27b0;
  box-shadow:
    0 0 12px rgba(156, 39, 176, 0.8),
    inset 0 0 6px rgba(156, 39, 176, 0.5);
  background: rgba(30, 0, 45, 0.65);
}

/* دکمه‌ها */
.form-buttons {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.btn-success,
.btn-cancel {
  flex: 1;
  padding: 0.75rem 0;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.15s ease, box-shadow 0.3s ease;
  box-shadow: 0 4-12px rgba(156, 39, 176, 0.35);
  user-select: none;
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-shadow: 0 0 4px rgba(156, 39, 176, 0.9);
}

.btn-success {
  background: linear-gradient(45deg, #7e57c2, #9c27b0);
  box-shadow: 0 6px 16px rgba(156, 39, 176, 0.8);
}

.btn-success:hover {
  background: linear-gradient(45deg, #9c27b0, #7e57c2);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(156, 39, 176, 1);
}

.btn-success:active {
  transform: translateY(1px);
  box-shadow: 0 4px 10px rgba(156, 39, 176, 0.6);
}

.btn-cancel {
  background: linear-gradient(45deg, #d32f2f, #b71c1c);
  box-shadow: 0 6px 16px rgba(183, 28, 28, 0.8);
}

.btn-cancel:hover {
  background: linear-gradient(45deg, #b71c1c, #d32f2f);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(183, 28, 28, 1);
}

.btn-cancel:active {
  transform: translateY(1px);
  box-shadow: 0 4px 10px rgba(183, 28, 28, 0.6);
}

.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 👇 این کلاس جدید رو اضافه کنید */
.blurred {
    filter: blur(5px);
    transition: filter 0.5s ease;
}

/* تغییر تم */

/* تم روشن برای فرم ورود و تایید خروج */
body[data-theme="light"] .form-overlay {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
}

body[data-theme="light"] .logout-confirm-box,
body[data-theme="light"] .login-form {
  background: rgba(255, 255, 255, 0.9);
  color: #3a3a3a;
  box-shadow:
    0 8px 24px rgba(130, 86, 188, 0.5),
    0 4px 12px rgba(100, 70, 160, 0.5);
  border: 1px solid rgba(130, 86, 188, 0.5);
  backdrop-filter: blur(10px);
}

body[data-theme="light"] .login-form input {
  background: rgba(245, 245, 250, 0.8);
  color: #3a3a3a;
  border: 1px solid rgba(130, 86, 188, 0.3);
  box-shadow:
    inset 0 0 5px rgba(130, 86, 188, 0.15),
    0 0 0 transparent;
}

body[data-theme="light"] .login-form input::placeholder {
  color: rgba(100, 100, 130, 0.45);
  font-style: italic;
}

body[data-theme="light"] .login-form input:focus {
  border-color: #8256bc;
  box-shadow:
    0 0 12px rgba(130, 86, 188, 0.8),
    inset 0 0 6px rgba(130, 86, 188, 0.5);
  background: rgba(230, 230, 240, 0.9);
}

body[data-theme="light"] .form-buttons .btn-success {
  background: linear-gradient(45deg, #a38bcd, #8256bc);
  box-shadow: 0 6px 16px rgba(130, 86, 188, 0.8);
  color: #fff;
  text-shadow: 0 0 4px rgba(130, 86, 188, 0.9);
}

body[data-theme="light"] .form-buttons .btn-success:hover {
  background: linear-gradient(45deg, #8256bc, #a38bcd);
  box-shadow: 0 8px 20px rgba(130, 86, 188, 1);
}

body[data-theme="light"] .form-buttons .btn-success:active {
  box-shadow: 0 4px 10px rgba(130, 86, 188, 0.6);
}

body[data-theme="light"] .form-buttons .btn-cancel {
  background: linear-gradient(45deg, #e57373, #d32f2f);
  box-shadow: 0 6px 16px rgba(211, 47, 47, 0.8);
  color: #fff;
  text-shadow: 0 0 4px rgba(211, 47, 47, 0.9);
}

body[data-theme="light"] .form-buttons .btn-cancel:hover {
  background: linear-gradient(45deg, #d32f2f, #e57373);
  box-shadow: 0 8px 20px rgba(211, 47, 47, 1);
}

body[data-theme="light"] .form-buttons .btn-cancel:active {
  box-shadow: 0 4px 10px rgba(211, 47, 47, 0.6);
}

body[data-theme="light"] .disabled {
  opacity: 0.6;
  cursor: not-allowed;
}