/* ==========================================
   ڕووکاری پەڕەکان
   ڕەنگە سەرەکییەکان لێرە دادەنرێن
   ========================================== */

/* :root: ڕەنگەکان وەک گۆڕاو (variable) دادەنێین تا لە یەک جێ بگۆڕدرێن */
:root {
  --green: #16a34a;        /* ڕەنگی سەوزی سەرەکی */
  --green-dark: #15803d;   /* سەوزی تاریکتر بۆ کاتی hover */
  --black: #111111;        /* ڕەنگی ڕەش بۆ دەق */
  --white: #ffffff;        /* ڕەنگی سپی بۆ پاشبنەما */
  --gray: #f2f2f2;         /* خۆڵەمێشی ڕووناک */
  --border: #dddddd;       /* ڕەنگی لێواری بۆکسەکان */
}

/* box-sizing: border-box وا دەکات padding ناوی قەبارەکە بژمێرێت */
* {
  box-sizing: border-box;
}

/* body: ناوەڕۆکی گشتی پەڕەکە */
body {
  margin: 0;                         /* بۆشایی دەوروبەری پەڕە بسڕەوە */
  font-family: Tahoma, Arial, sans-serif;  /* فۆنتی سادە */
  background: var(--white);          /* پاشبنەمای سپی */
  color: var(--black);               /* دەقی ڕەش */
  direction: rtl;                    /* نووسین لە ڕاستەوە */
}

/* navbar: شریتی سەرەوە (سەوز) */
.navbar {
  background: var(--green);          /* پاشبنەمای سەوز */
  color: var(--white);               /* دەقی سپی */
  display: flex;                     /* ئایتەمەکان لە یەک ڕیزدا */
  justify-content: space-between;    /* ناونیشان لە لایەک و بەستەرەکان لە لایەکی تر */
  align-items: center;               /* لە ناوەڕاستی ستوونیدا */
  padding: 12px 20px;                /* بۆشایی ناوەوە */
  flex-wrap: wrap;                   /* لە مۆبایلدا بچێتە دێڕی نوێ */
  gap: 10px;                         /* بۆشایی نێوان ئایتەمەکان */
}

.navbar h1 {
  margin: 0;                         /* بۆشایی دەوری ناونیشان بسڕەوە */
  font-size: 20px;
}

.navbar nav a {
  color: var(--white);
  text-decoration: none;             /* هێڵی ژێر بەستەرەکە لاببە */
  margin-inline-start: 14px;         /* بۆشایی لە بەستەرەکانەوە */
  font-weight: bold;
}

/* main: ناوەڕۆک لە ناوەڕاستی پەڕەدا */
main {
  padding: 20px;
  max-width: 1000px;                 /* زیاتر لەمە فراوان نەبێت */
  margin: auto;                      /* لە ناوەڕاست دابنرێت */
}

/* input و select و button: شێوەی سادە */
input,
select {
  width: 100%;                       /* پانیی تەواوی بۆکس */
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;                /* گۆشەی نەرم */
  font-size: 15px;
  margin-bottom: 8px;
}

button {
  background: var(--green);          /* دوگمەی سەوز */
  color: var(--white);
  border: 0;                         /* بێ هێڵ */
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;                   /* کاتێک ماوس لەسەری بێت دەستەکە دەردەکەوێت */
  font-size: 15px;
}

button:hover {
  background: var(--green-dark);     /* کاتێک ماوس لەسەری بێت ڕەنگەکە تاریکتر دەبێت */
}

/* grid: کارتەکانی خواردن وەک شەبەکە (grid) ڕیز دەکرێن */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* هەر کارتێک لانیکەم 200px ـە و بە ئۆتۆماتیکی ژمارەی ستوون دەگۆڕێت */
  gap: 14px;                         /* بۆشایی نێوان کارتەکان */
  margin-top: 16px;
}

/* card: کارتی هەر خواردنێک */
.card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;                   /* کلیک بکرێت */
  text-align: center;
}

.card:hover {
  border-color: var(--green);        /* لێواری سەوز بێت کاتێک ماوس لەسەرە */
}

.card h3 {
  margin: 0 0 6px;
  color: var(--green-dark);
}

/* box: بۆکسی فۆرم و ئەنجام */
.box {
  max-width: 480px;
  margin: 24px auto;                 /* لە ناوەڕاستی پەڕەدا */
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
}

.box label {
  display: block;                    /* هەر label لە دێڕێکی جیادا */
  margin: 10px 0 4px;
  font-weight: bold;
}

/* ئەنجامی حیساب */
.result-line {
  display: flex;
  justify-content: space-between;    /* ناو لە لایەک و ژمارە لە لایەکی تر */
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.result-line span:last-child {
  color: var(--green-dark);
  font-weight: bold;
}

.status {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: var(--green-dark);
  margin: 12px 0;
}

.note {
  font-size: 13px;
  color: #555;                       /* ڕەنگی خۆڵەمێشی بۆ تێبینی */
  margin-top: 14px;
}