/* CSS */
.auth-wrapper {
  display: flex; align-items: center; justify-content: center;
  min-height: 50vh;
  background: linear-gradient(135deg, #f5f0ff 0%, #e0d7fc 100%);
  font-family: 'Cairo', sans-serif;
  padding: 250px 10px;
}
.hidden { display: none !important; }

.action-buttons {
  display: flex; flex-direction: column; gap: 16px;
}
.btn-action {
  padding: 14px 20px; font-size: 18px; border: none;
  border-radius: 8px; background-color: #673ab7; color: #fff;
  cursor: pointer; transition: background 0.3s;
}
.btn-action:hover { background-color: #532c91; }

.auth-card {
  background: #fff; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  width: 360px; max-width: 100%; padding: 24px; text-align: center;
}
.auth-header h2 {
  margin: 0; color: #673ab7; font-size: 24px;
}
.auth-header p {
  margin-top: 4px; color: #555; font-size: 14px;
}

/* تعديل تبويبات أعلى البطاقة بمظهر واضح */
.auth-tabs {
  display: flex;
  background: #f0f0ff;
  border-radius: 8px;
  overflow: hidden;
  margin: 24px 0 16px;
}
.auth-tabs button {
  flex: 1; padding: 12px 0; border: none;
  background: transparent; font-size: 16px; cursor: pointer;
  transition: background 0.3s, color 0.3s;
  color: #888; /* لون باهت للتاب الغير مفعل */
}
.auth-tabs button.active {
  background: #673ab7; /* خلفية بنفسجية */
  color: #fff;         /* نص أبيض */
}

.auth-forms { position: relative; }
form { display: none; flex-direction: column; }
form.form-active { display: flex; }

.form-group { text-align: right; margin-bottom: 16px; }
.form-group label {
  display: block; margin-bottom: 4px; font-size: 14px; color: #333;
}
.form-group input {
  width: 100%; padding: 10px 12px;
  border: 1px solid #ccc; border-radius: 8px; font-size: 14px;
}

.btn-primary {
  padding: 12px; width: 100%; border: none; border-radius: 8px;
  background-color: #673ab7; color: #fff; font-size: 16px;
  cursor: pointer; transition: background 0.3s;
}
.btn-primary:hover { background-color: #532c91; }

.ad-slot { margin: 24px 0; }

.alert-box {
  background: #fff3cd; color: #856404;
  padding: 12px; border-radius: 8px; font-size: 13px;
  margin-bottom: 16px;
}

.footer-links {
  display: flex; justify-content: space-between; font-size: 13px; color: #555;
}
.footer-links a,
.footer-links span {
  text-decoration: none; cursor: pointer; transition: color 0.2s;
}
.footer-links a:hover,
.footer-links span:hover { color: #673ab7; }