/* ====== أساسيات عامة ====== */
* { box-sizing: border-box; }
html, body { height: 100%; }                /* مهم للفلكس */
body{
  min-height: 100vh;                        /* طول نافذة المتصفح */
  margin: 0;
  display: flex;
  flex-direction: column;                   /* رأس > محتوى > فوتر */
  background: #fff;
  color: #000;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height: 1.6;
}

/* الروابط */
a{ color:#000; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* الحاويات العامة */
.container{ width:100%; margin:0 auto; padding:16px; }

/* الهيدر */
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.nav nav{ display:flex; gap:12px; flex-wrap:wrap; }
.logo{ font-weight:700; }
.lang{ display:flex; align-items:center; gap:8px; }

/* أقسام */
.hero{ padding:48px 0; border-top:1px solid #000; border-bottom:1px solid #000; margin-top:16px; }
.row{ display:flex; align-items:center; }
.gap{ gap:12px; flex-wrap:wrap; }
.grid-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:24px 0; }

/* أزرار */
.btn{ border:1px solid #000; padding:10px 16px; display:inline-block; cursor:pointer; }
.btn.outline{ background:#fff; }

/* بطاقات */
.cards .card{ border:1px solid #000; padding:16px; }

/* النماذج */
.form{ display:grid; gap:12px; max-width:520px; margin:auto; }
.form label{ display:grid; gap:6px; }
.form input,.form textarea,.form select{
  padding:10px; border:1px solid #000; background:#fff; color:#000;
}

/* ====== تثبيت الفوتر بأسفل الشاشة ====== */
/* اجعل الـ MAIN يتمدد ليدفع الفوتر لأسفل */
main{ flex: 1 0 auto; }

.footer-fixed{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #fff;            /* أبيض ليسد أي شفافية */
  border-top: 1px solid #000;
  padding: 16px;
  text-align: center;
  z-index: 1000;
}
body{ padding-bottom: 64px; }  /* مساحة حتى لا يغطي الفوتر المحتوى */

/* نص ثانوي */
.muted{ opacity:0.75; }

/* تجاوب */
@media (max-width:640px){ .nav nav{ gap:8px; } }
