/* ===============================
   المتغيرات الرئيسية للألوان 
   =============================== */
:root {
  --primary-color: #2c3e50;
  --accent-color: #1abc9c;
  --accent-hover: #16a085;
}

/* ===============================
   عناصر الكروت الرئيسية (البطاقات)
   =============================== */
.content-card {
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px rgba(0,0,0,.05);
  margin-bottom: 1.5rem;
  min-height: 260px;
}
@media (max-width: 767px) {
  .content-card { min-height: 200px; }
}
.content-card .card-header, .content-card h2 {
  color: var(--primary-color);
  font-weight: 700;
  display: flex;
  align-items: center;
  background-color: transparent;
  border-bottom: 0;
  padding: 1.5rem 1.5rem 0 1.5rem;
}
.content-card .card-body { padding: 1.5rem; }
.content-card .card-header i, .content-card h2 i {
  font-size: 1.5rem;
  margin-inline-end: 0.75rem;
  color: var(--accent-color);
}
#calculator-card { border-top: 4px solid var(--accent-color); }

/* ===============================
   الأزرار الرئيسية
   =============================== */
#calculateBtn, .btn-primary {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  font-weight: 700;
  padding: .75rem;
  font-size: 1.1rem;
  color: #fff !important;
}
.btn-primary, #calculateBtn {
  background-color: #117a65 !important;
  border-color: #117a65 !important;
  color: #fff !important;
}
.btn-primary .button-text, 
#calculateBtn .button-text {
  color: #fff !important;
  font-weight: bold;
  text-shadow: 0 1px 1px rgba(0,0,0,0.15);
}

/* ===============================
   صناديق التفسير (interpretation-box)
   =============================== */
.interpretation-box { 
  padding: 1rem; 
  border-radius: 0.5rem; 
  margin-bottom: 0.75rem; 
  border-left: 5px solid; 
}
.interpretation-box.success { 
  background-color: #d1e7dd; 
  border-color: #155724; 
}
.interpretation-box.success strong { color: #0f5132; }
.interpretation-box.warning { 
  background-color: #fff3cd; 
  border-color: #664d03; 
}
.interpretation-box.warning strong { color: #664d03; }
.interpretation-box.danger { 
  background-color: #f8d7da; 
  border-color: #842029; 
}
.interpretation-box.danger strong { color: #58151c; }
.interpretation-box.info { 
  background-color: #cff4fc; 
  border-color: #055160; 
}
.interpretation-box.info strong { color: #055160; }

/* ===============================
   نصوص وتنسيقات إضافية
   =============================== */
.lead { font-size: 1.25rem; font-weight: 300; }
.hero-section .lead { font-size: 1rem; }
.list-unstyled { padding-left: 0; list-style: none; }
.rounded-2 { border-radius: var(--bs-border-radius) !important; }
.bg-light { background-color: #f8f9fa !important; }
.bg-white { background-color: #fff !important; }
.pt-4 { padding-top: 1.5rem !important; }
.fs-4 { font-size: 1.5rem !important; }
.fw-bold { font-weight: 700 !important; }

/* ===============================
   الـ Breadcrumb (مسار التنقل)
   =============================== */
.breadcrumb {
  min-height: 38px;
  box-sizing: border-box;
}
.breadcrumb a {
  color: #145456 !important;
  text-decoration: underline;
  font-weight: 500;
}
.breadcrumb a:hover, .breadcrumb a:focus {
  color: #0b3a40 !important;
}
.breadcrumb.bg-light {
  background-color: #fff !important;
}

/* ===============================
   ثبات الهيدر والـ hero-section
   =============================== */
header, .navbar {
  min-height: 72px;
}
.hero-section {
  background-color: var(--primary-color);
  color: white;
  padding: 2rem 1rem;
  text-align: center;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-section h1 {
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 2.2rem;
  min-height: 56px;
}

/* ===============================
   زر اللغة في الـ Navbar
   =============================== */
.btn.btn-light.btn-sm.dropdown-toggle {
  min-width: 110px;
  min-height: 32px;
}

/* ===============================
   العناوين الرئيسية
   =============================== */
nav h1, section h1, article h1, aside h1 {
  font-size: 2rem;
}

/* ===============================
   أيقونات الهيدر
   =============================== */
.card-header i,
.card-header i::before {
  display: inline-block;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  vertical-align: middle;
}

/* ===============================
   الحاوية الرئيسية
   =============================== */
main.container-fluid {
  min-height: 60vh;
}

/* ===============================
   الخط الأساسي للموقع (يمكن نقلها لـ main.css لو أردت override لاحق)
   =============================== */
body {
  font-family: 'Inter', 'Cairo', sans-serif;
  font-size-adjust: 0.5;
}

/* ===============================
   حاوية الإعلانات
   =============================== */
.ad-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 1rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90px;
}
@media (max-width: 767px) {
  .ad-container {
    min-height: 60px;
    padding: 0 4px;
  }
}

/* ===============================
   نتيجة الحاسبة (area)
   =============================== */
#result-area {
  min-height: 100px;
}