/* ============================================================
   الحقيبة الرقمية للأستاذ الجزائري — نظام التصميم الأساسي
   ============================================================
   الألوان: مستوحاة من علم الجزائر وشعار المنصة
   الطباعة: IBM Plex Sans Arabic (نصوص) + Reem Kufi (عناوين/هوية)
   ============================================================ */

:root {
  --color-primary: #0E6E3E;
  --color-primary-dark: #0A5230;
  --color-gold: #C9A34E;
  --color-crimson: #C8102E;
  --color-paper: #F3F4F5;
  --color-card: #FFFFFF;
  --color-ink: #1C1B18;
  --color-ink-soft: #5B5A55;
  --color-sage: #EEF4EF;
  --color-sage-border: #D7E6DA;

  --radius-card: 18px;
  --radius-input: 10px;
  --shadow-card: 0 18px 40px -20px rgba(14, 110, 62, 0.35);

  --font-ui: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  --font-brand: 'Cairo', var(--font-ui);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-ui);
}

body {
  direction: rtl;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- الشريط العلوي والسفلي بألوان العلم ---------- */
.flag-bar {
  width: 100%;
  height: 64px;
  background-color: var(--color-primary);
  background-image: url('../assets/ribbon.svg');
  background-repeat: repeat-x;
  background-size: 100% 10px;
  background-position: top;
  flex-shrink: 0;
}

.flag-bar.bottom { background-position: bottom; }


.footer-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  font-size: 12px;
  color: #fff;
  position: relative;
  margin-top: -30px;
  z-index: 1;
}

.footer-bar span { opacity: 0.95; }

.page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 16px 10px;
  flex: 1;
}

/* ---------- الترويسة الرسمية ---------- */
.header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.header .state-line {
  font-size: 13px;
  color: var(--color-ink-soft);
  font-weight: 500;
}

.header .ministry-line {
  font-size: 12px;
  color: var(--color-ink-soft);
}

.header .logo {
  width: 132px;
  height: 132px;
  object-fit: contain;
  margin: 12px 0 8px;
}

.header .brand-name {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.35;
  margin: 0;
}

.header .brand-name .line-1 { color: var(--color-primary-dark); }
.header .brand-name .line-2 { color: var(--color-crimson); }

/* ---------- البطاقات العامة ---------- */
.card {
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-sage-border);
  padding: 22px;
}

.card h2 {
  font-size: 16px;
  margin: 0 0 14px;
  color: var(--color-primary-dark);
}

/* ---------- تبويب الدخول / إنشاء حساب ---------- */
.auth-tabs {
  display: flex;
  background: var(--color-sage);
  border-radius: var(--radius-input);
  padding: 4px;
  margin-bottom: 16px;
}

.auth-tabs button {
  flex: 1;
  border: none;
  background: transparent;
  padding: 9px 0;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-ink-soft);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.auth-tabs button.active {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

.field {
  margin-bottom: 14px;
}

.field label {
  display: block;
  font-size: 13px;
  color: var(--color-ink-soft);
  margin-bottom: 6px;
}

.field input[type="email"],
.field input[type="password"],
.field input[type="text"] {
  width: 100%;
  padding: 11px 12px;
  border-radius: var(--radius-input);
  border: 1px solid var(--color-sage-border);
  background: var(--color-sage);
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-ink);
}

.field input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  background: #fff;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-ink-soft);
  margin-bottom: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-input);
  border: none;
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.08s ease, filter 0.15s ease;
}

.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover { filter: brightness(1.06); }

.btn-outline {
  background: #fff;
  color: var(--color-primary-dark);
  border: 1.5px solid var(--color-primary);
}

.btn-gold {
  background: var(--color-gold);
  color: #3A2E0A;
}

.status-msg {
  font-size: 13px;
  margin-top: 10px;
  min-height: 18px;
}
.status-msg.error { color: var(--color-crimson); }
.status-msg.success { color: var(--color-primary-dark); }

/* ---------- صف أزرار التثبيت ---------- */
.install-row {
  display: flex;
  gap: 10px;
}
.install-row .btn { font-size: 13.5px; padding: 10px; }

/* ---------- بطاقة الاشتراك ---------- */
.subscribe-card p {
  font-size: 13px;
  color: var(--color-ink-soft);
  line-height: 1.9;
  margin: 0 0 14px;
}
.subscribe-card .price {
  color: var(--color-primary-dark);
  font-weight: 700;
}

/* ---------- بطاقة الرقم التسلسلي ---------- */
.serial-row {
  display: flex;
  gap: 8px;
}
.serial-row input { flex: 1; }
.serial-row .btn { width: auto; padding: 0 18px; }

@media (max-width: 380px) {
  .install-row, .serial-row { flex-direction: column; }
}