/* public_html/assets/css/base.css */
/* ـــــــــــــــــــــ
01) متغيرات الهوية
ـــــــــــــــــــــ */
:root{
--brand-from:#060066;
--brand-to:#2a2ad0;
--brand-ink:#ffffff;
--bg:#0b1220;
--card:#0f172a;
--ink:#e5e7eb;
--muted:#94a3b8;
--line:#1f2a44;
--primary:#0090A6;
--primary-hov:#007a8d;
--secondary:#00BCD9;
--secondary-hov:#00a2c2;
--acc:var(--secondary);
}
/* ـــــــــــــــــــــ
02) قواعد عامة + خط Cairo
ـــــــــــــــــــــ */
html, body{
margin:0; padding:0; height:100%;
background:var(--bg); color:var(--ink);
font-family:"Cairo","Ciro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
html[dir="rtl"]{ direction:rtl }
*{ box-sizing:border-box }
a{ color:var(--acc); text-decoration:none }
a:hover{ text-decoration:underline }
/* === تخطيط فوتر لاصق بأسفل الصفحة (Sticky Footer) ===
نجعل body عنصر Flex عمودي وندفع الفوتر للأسفل بـ margin-top:auto */
body{
min-height:100vh; /* دعم عام */
min-height:100svh; /* قياس أدق على الهواتف الحديثة */
display:flex;
flex-direction:column;
}
.page-container{ /* عنصر يجب أن يحمل هذا الكلاس */
flex:1 0 auto; /* يتمدد ويدفع الفوتر للأسفل عند قِصر المحتوى */
}
.site-footer{
margin-top:auto !important; /* يلتصق بالأسفل عند قِصر المحتوى */
flex-shrink:0;
width:100%;
padding-bottom:max(18px, env(safe-area-inset-bottom)); /* احترام الحواف الآمنة */
}
/* (اختياري) عند إظهار بنر الكوكيز الثابت بالأسفل،
أضف الكلاس has-cc إلى لترك مساحة أسفل المحتوى */
body.has-cc .page-container{ padding-bottom:120px; }
/* أزرار */
.btn{
appearance:none; border:0; border-radius:12px;
padding:10px 14px; font-weight:700; cursor:pointer;
transition:transform .06s ease, box-shadow .2s ease, background-color .2s ease;
line-height:1; display:inline-flex; align-items:center; gap:8px;
}
.btn:active{ transform:translateY(1px) }
.btn--primary{ background:var(--primary); color:#fff; box-shadow:0 8px 20px rgba(0,144,166,.25) }
.btn--primary:hover{ background:var(--primary-hov) }
.btn--secondary{ background:var(--secondary); color:#00323a; box-shadow:0 8px 20px rgba(0,188,217,.22) }
.btn--secondary:hover{ background:var(--secondary-hov) }
/* حاويات */
.wrap{ max-width:1040px; margin:0 auto; padding:28px 18px 64px }
.card{
background:var(--card); border:1px solid var(--line);
border-radius:16px; padding:18px; margin:14px 0;
box-shadow:0 10px 40px rgba(0,0,0,.24);
}
/* نصوص */
h1{ font-size:28px; margin:0 0 8px; font-weight:800; letter-spacing:.3px; color:#fff }
h2{ font-size:20px; margin:0 0 10px; color:#e2e8f0 }
h3{ font-size:17px; margin:14px 0 8px; color:#e2e8f0 }
p{ line-height:1.9; margin:8px 0 }
/* عناصر مساعدة */
.pill{
display:inline-block; background:#0b132b; border:1px solid var(--line);
color:#cbd5e1; padding:6px 10px; border-radius:999px; font-weight:700;
}
/* صناديق الكود */
code,pre{ background:#0b132b; border:1px solid #1e293b; color:#e2e8f0; border-radius:10px }
code{ padding:2px 6px }
pre{ padding:14px; direction:ltr; overflow:auto }
/* شبكات */
.grid{ display:grid; gap:12px; grid-template-columns:repeat(2,1fr) }
.grid-3{ display:grid; gap:12px; grid-template-columns:repeat(3,1fr) }
@media (max-width:900px){ .grid,.grid-3{ grid-template-columns:1fr } }
/* لافتة الكوكيز */
#cookie-consent[hidden]{ display:none !important }
#cookie-consent .cc-card{
position: fixed; inset-inline:16px; bottom:16px; z-index: 9999;
background: var(--card); color: var(--ink);
border:1px solid var(--line); border-radius:14px;
box-shadow:0 20px 60px rgba(0,0,0,.3); padding:16px;
}
#cookie-consent .cc-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px }
#cookie-consent .cc-more{ color: var(--acc) }
/* أزرار داخل لافتة الكوكيز */
#cookie-consent .cc-btn{
font: inherit;
border-radius: 10px;
padding: 8px 14px;
cursor: pointer;
font-weight:600;
}
#cookie-consent .cc-btn--ghost{
background: transparent; border:1px solid var(--line); color:var(--ink);
}
#cookie-consent .cc-btn--primary{
background: var(--primary); color:#fff;
}
#cookie-consent .cc-btn--neutral{
background: var(--muted); color:#000;
}