/* ────────────────────────────────────────────────────────────────
   شگد — النظام البصري المشترك لكل أدوات ضبطة المجانية.

   الألوان منقولة حرفيًا من هوية ضبطة:
   F:\CodeHere\dabta-site\src\app\globals.css
   ⛔ لا تخترع لونًا هنا. إذا احتجت لونًا جديدًا، أضفه هناك أولًا.

   ── قواعد التباين (مقيسة، لا تُخالف) ──────────────────────────
     #dc714c على #141413 .... 5.71  ✓ AA
     #dc714c على #f5f4f2 .... 2.93  ✗ راسب
     #a8452a على #f5f4f2 .... 5.38  ✓ AA
     #141413 على #dc714c .... 5.71  ✓ AA
     #f9f8f4 على #dc714c .... 2.90  ✗ راسب

   ولهذا: البرتقالي الفاتح للنص **على الداكن فقط**، والغامق للنص على
   الفاتح، وأي زر ممتلئ بالبرتقالي نصّه أسود لا أبيض.
   ولهذا أيضًا كتلة النتائج داكنة داخل بطاقة فاتحة: هيچ الرقم الكبير
   ياخذ البرتقالي الفاتح بتباين 5.71 بدل أن يُجبَر على الغامق.
   ──────────────────────────────────────────────────────────── */

:root {
  --color-bg: #141413;
  --color-slab: #f5f4f2;
  --color-hero: #f4efe6;
  --color-accent: #dc714c;
  --color-accent-ink: #a8452a;
  --color-paper: #f9f8f4;
  --color-ink: #141413;
  --color-dim: #b8b5ae;
  --color-subtle: #56534d;

  --r-card: 22px;
  --r-field: 13px;
  --pad: 20px;

  /* حساب إبراهيم — بدّله من هنا فقط، مذكور بكل أداة */
  --_tiktok: "https://www.tiktok.com/@ibrahim_dev";
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--color-bg);
  color: var(--color-paper);
  font-family: system-ui, "Segoe UI", Tahoma, "Noto Naskh Arabic", sans-serif;
  line-height: 1.6;
  min-height: 100dvh;
  padding: 26px 16px 40px;
  display: flex;
  justify-content: center;
}

.wrap {
  width: 100%;
  max-width: 520px;
}

/* ─────────── الرأس ─────────── */

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--color-dim);
  margin-bottom: 18px;
}

.brand b {
  color: var(--color-paper);
  letter-spacing: 0;
  font-size: 15px;
}

h1 {
  font-size: clamp(30px, 8.5vw, 40px);
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.sub {
  color: var(--color-dim);
  font-size: 15px;
  margin-top: 7px;
}

/* ─────────── بطاقة المدخلات ─────────── */

.card {
  background: var(--color-paper);
  color: var(--color-ink);
  border-radius: var(--r-card);
  padding: var(--pad);
  margin-top: 22px;
}

/* ⚠️ الإيقاع الرأسي هنا مضغوط عمدًا.
   بالنسخة الأولى كان كل حقل يحمل سطر «دينار عراقي» تحته وارتفاعه 52px،
   فنزلت النسبة — وهي بيت القصيد — **تحت الطية** على موبايل 375×812.
   المستخدم يضطر ينزل حتى يشوف الجواب، والفيديو يخسر لقطته.
   القاعدة: على أصغر موبايل، النسبة لازم تبان بلا تمرير. */

.field + .field {
  margin-top: 11px;
}

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 11px;
}

.pair .field + .field,
.pair .field {
  margin-top: 0;
  /* ⚠️ إلزامي. عنصر الشبكة `min-width` الافتراضي عنده `auto`، يعني ما ينضغط
     تحت عرض محتواه. بلا هذا السطر توسّع كل صندوق إلى 309px داخل عمود 150px،
     فطلع الصندوق الثاني عند left:-279 — خارج الصفحة — وصار فيضان أفقي. */
  min-width: 0;
}

label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-subtle);
  margin-bottom: 4px;
}

label .opt {
  font-weight: 400;
  color: var(--color-dim);
}

.box {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px; /* يبقى فوق حد هدف اللمس مع الحشوة */
  padding: 0 12px;
  border: 2px solid #e4e1da;
  border-radius: var(--r-field);
  background: #fff;
}

.box:focus-within {
  border-color: var(--color-accent-ink);
}

input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 10px 0;
  color: var(--color-ink);
  font: inherit;
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: left;
  direction: ltr;
}

input:focus {
  outline: none;
}

input::placeholder {
  color: #c3bfb6;
  font-weight: 400;
}

.box .unit {
  flex: none;
  font-size: 12.5px;
  color: var(--color-dim);
  font-weight: 700;
}

/* ─────────── العروض ─────────── */

.offer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e7e4dd;
}

.offer-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.offer-head .opt {
  font-size: 12.5px;
  color: var(--color-dim);
}

.tag {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.7;
}

/* نص أسود على أي خلفية فاتحة — الأبيض على البرتقالي 2.90 وراسب */
.tag {
  background: #d9d5cc;
  color: #141413;
}

/* شارة الفائز: البرتقالي محجوز للأرخص لا لترتيب الإدخال */
.badge {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.7;
  background: var(--color-accent);
  color: #141413;
}

.trio {
  display: grid;
  grid-template-columns: 1fr 1fr 0.72fr;
  gap: 8px;
}

.trio .field {
  margin-top: 0;
  min-width: 0; /* ⚠️ بلاه ما ينضغط العنصر لعموده ويصير فيضان أفقي */
}

.trio input {
  font-size: 17px;
}

.trio .box {
  padding: 0 10px;
}

/* ─────────── صفوف نتائج العروض ─────────── */

.offers {
  margin-top: 18px;
}

.orow {
  padding: 12px 0;
  border-top: 1px solid #2b2a28;
}

.orow.win {
  padding: 12px;
  margin: 8px -12px;
  border: 2px solid var(--color-accent);
  border-radius: 14px;
}

.orow-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.orow-top .orow-total {
  margin-inline-start: auto;
}

.orow-total {
  font-size: 21px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

.orow-sub {
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--color-dim);
  line-height: 1.7;
}

.orow-sub b {
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.orow-sub .p {
  color: var(--color-accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: inline-block; /* يحمي اتجاه dir="ltr" من الانهيار داخل السطر */
}

.orow-sub.dim {
  margin-top: 2px;
  color: #6f6b64;
}

.vtitle {
  display: block;
  font-size: 19px;
  font-weight: 800;
  color: var(--color-paper);
  margin-bottom: 4px;
}

/* ─────────── كتلة النتائج (داكنة داخل الفاتحة) ─────────── */

.out {
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: calc(var(--r-card) - 4px);
  padding: var(--pad);
  margin-top: 18px;
}

.out[hidden] {
  display: none;
}

.row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.row + .row {
  margin-top: 10px;
}

.row .k {
  font-size: 14.5px;
  color: var(--color-dim);
}

.row .v {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

.v.hot {
  color: var(--color-accent);
}

.big {
  text-align: center;
  margin: 16px 0 4px;
}

.big .n {
  display: block;
  font-size: clamp(56px, 14vw, 96px);
  font-weight: 900;
  line-height: 1;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

/* الحالة النادرة: مجموع الأقساط أقل من السعر النقدي.
   ما نخترع لونًا «نجاح» — لوحة ضبطة ما بيها واحد، والاختراع يكسر الهوية.
   نستعمل لون النص العادي: غياب البرتقالي هو الإشارة. */
.big .n.good {
  color: var(--color-paper);
}

.big .c {
  display: block;
  font-size: 14px;
  color: var(--color-dim);
  margin-top: 4px;
}

/* ─────────── شريطا المقارنة ─────────── */

.bars {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #2b2a28;
}

.bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--color-dim);
  margin-bottom: 5px;
}

.bar-label .amt {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  color: var(--color-paper);
  font-weight: 700;
}

.bar {
  height: 16px;
  border-radius: 999px;
  background: #2b2a28;
  overflow: hidden;
}

.bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  width: 0;
  transition: width 0.35s ease;
}

/* النقدي محايد، والعرضان متمايزان — القارئ لازم يميّزهم بلمحة بلا قراءة */
.bar.cash > span {
  background: #5c5952;
}

.bar.a > span {
  background: var(--color-accent);
}

.bar.b > span {
  background: #d9d5cc;
}

.bar + .bar-label {
  margin-top: 14px;
}

.note {
  margin-top: 16px;
  font-size: 14px;
  color: var(--color-dim);
  text-align: center;
}

.note b {
  color: var(--color-paper);
  font-variant-numeric: tabular-nums;
}

/* ─────────── التذييل ─────────── */

footer {
  margin-top: 26px;
  text-align: center;
  font-size: 13.5px;
  color: var(--color-dim);
  line-height: 1.9;
}

footer a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 700;
}

footer a:hover {
  text-decoration: underline;
}

@media (max-width: 380px) {
  :root {
    --pad: 16px;
  }
}