/* ════════════════════════════════════════════════
   Findly — حاسبة CBM
   ملحق لـ dark.css. كل الأصناف هنا مسبوقة بـ cbm-
   كي لا تصطدم بأصناف الموقع. منطقية الاتجاه بالكامل
   (inline-start / inline-end) فتعمل بالعربية والإنجليزية.
   ════════════════════════════════════════════════ */

/* ── الشريط العلوي: الوحدات وطريقة الشحن ── */

.cbm-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  padding: clamp(18px, 2.6vw, 26px);
  margin-block-end: 22px;
}

.cbm-f { display: flex; flex-direction: column; gap: 7px; min-inline-size: 0; }
.cbm-f > label {
  font-size: 13px; font-weight: 700; color: var(--text-mute);
  letter-spacing: 0;
}

.cbm-f select,
.cbm-f input {
  font: inherit; font-size: 15.5px; color: var(--text);
  padding: 11px 14px;
  background: rgba(4,18,31,.6);
  border: 1.5px solid var(--ink-700);
  border-radius: var(--radius-sm);
  inline-size: 100%;
  min-inline-size: 0;
  transition: border-color .18s, box-shadow .18s;
}
.cbm-f select {
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  /* سهم مرسوم — القائمة الافتراضية تظهر فاتحة ثقيلة على خلفية داكنة */
  background-image: linear-gradient(45deg, transparent 50%, var(--orange) 50%),
                    linear-gradient(135deg, var(--orange) 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  background-position: right 18px center, right 12px center;
  padding-inline-end: 34px;
}
[dir="rtl"] .cbm-f select {
  background-position: left 12px center, left 18px center;
  background-image: linear-gradient(225deg, transparent 50%, var(--orange) 50%),
                    linear-gradient(315deg, var(--orange) 50%, transparent 50%);
  padding-inline-end: 14px; padding-inline-start: 34px;
}
.cbm-f select option { background: var(--ink-800); color: var(--text); }

.cbm-f input:focus, .cbm-f select:focus {
  outline: none; border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255,145,76,.15);
}
.cbm-f input.cbm-bad { border-color: #e2564d; }

/* مفتاح بحري / جوي */
.cbm-seg { display: flex; gap: 8px; background: rgba(4,18,31,.6);
  border: 1.5px solid var(--ink-700); border-radius: var(--radius-sm); padding: 4px; }
.cbm-seg button {
  flex: 1 1 0; min-inline-size: 0;
  font: inherit; font-size: 14.5px; font-weight: 700;
  color: var(--text-dim); background: none; border: 0; cursor: pointer;
  padding: 8px 6px; border-radius: 10px; white-space: nowrap;
  transition: background-color .18s, color .18s;
}
.cbm-seg button:hover { color: var(--text); }
.cbm-seg button[aria-pressed="true"] { background: var(--orange); color: #08151f; }

/* ── جدول الأصناف ── */

.cbm-items { display: grid; gap: 14px; }

.cbm-row {
  display: grid;
  grid-template-columns: 44px minmax(150px, 1.6fr) repeat(3, minmax(78px, .9fr)) minmax(74px, .8fr) minmax(96px, 1fr) 44px;
  gap: 12px;
  align-items: end;
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-sm);
  padding: 16px;
}

.cbm-n {
  display: flex; align-items: center; justify-content: center;
  block-size: 42px;
  border-radius: 10px;
  background: rgba(255,145,76,.12);
  color: var(--orange);
  font-weight: 700; font-size: 14px; letter-spacing: .04em;
}

.cbm-row .cbm-f > label { font-size: 12px; }
.cbm-row input { padding: 10px 12px; font-size: 15px; }
.cbm-row input[type="number"] { -moz-appearance: textfield; }
.cbm-row input[type="number"]::-webkit-outer-spin-button,
.cbm-row input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cbm-del {
  block-size: 42px; inline-size: 42px;
  display: flex; align-items: center; justify-content: center;
  background: none; cursor: pointer;
  border: 1.5px solid var(--ink-700); border-radius: 10px;
  color: var(--text-mute);
  transition: color .18s, border-color .18s, background-color .18s;
}
.cbm-del:hover { color: #ff9a92; border-color: #e2564d; background: rgba(226,86,77,.1); }
.cbm-del svg { inline-size: 16px; block-size: 16px; }

/* حصيلة الصف — تظهر تحت حقوله */
.cbm-out {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  padding-block-start: 12px;
  border-block-start: 1px dashed var(--ink-700);
  font-size: 14px; color: var(--text-mute);
}
.cbm-out b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── أزرار التحكّم ── */

.cbm-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 18px; }

.cbm-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font: inherit; font-size: 15px; font-weight: 700;
  padding: 11px 20px; cursor: pointer;
  color: var(--text-dim);
  background: rgba(255,255,255,.05);
  border: 1.5px solid var(--ink-700);
  border-radius: var(--pill);
  transition: color .18s, border-color .18s, background-color .18s, transform .18s;
}
.cbm-btn:hover { color: var(--text); border-color: rgba(255,255,255,.28); transform: translateY(-2px); }
.cbm-btn svg { inline-size: 16px; block-size: 16px; flex: none; }
.cbm-btn-accent { background: var(--orange); border-color: var(--orange); color: #08151f; }
.cbm-btn-accent:hover { background: var(--orange-dk); border-color: var(--orange-dk); color: #08151f; }
.cbm-btn.is-ok { border-color: #4bbf88; color: #7fe0b4; }

/* ── بطاقات النتائج ── */

.cbm-res {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-block-start: 26px;
}

.cbm-card {
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-sm);
  padding: 20px;
}
.cbm-card > span {
  display: block; font-size: 13px; font-weight: 700; color: var(--text-mute);
  margin-block-end: 8px;
}
.cbm-card strong {
  display: block;
  font-size: clamp(24px, 3vw, 32px); font-weight: 300; letter-spacing: -.02em;
  color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.15;
}
.cbm-card strong i { font-style: normal; font-size: 15px; color: var(--text-mute); margin-inline-start: 6px; }
.cbm-card small { display: block; margin-block-start: 8px; font-size: 13.5px; color: var(--text-dim); }

.cbm-card-hero { background: var(--navy); border-color: rgba(255,255,255,.14); }
.cbm-card-hero > span { color: rgba(255,255,255,.72); }
.cbm-card-hero strong { color: #fff; }
.cbm-card-hero small { color: rgba(255,255,255,.8); }

.cbm-card-charge { border-color: rgba(255,145,76,.5); background: rgba(255,145,76,.07); }
.cbm-card-charge > span { color: var(--orange); }

/* ── الحاويات ── */

.cbm-cont {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}

.cbm-cc {
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-sm);
  padding: 22px;
}
.cbm-cc h3 { font-size: 18px; font-weight: 700; }
.cbm-cc .cbm-dim { font-size: 13.5px; color: var(--text-mute); margin-block: 5px 16px; }

.cbm-meter {
  block-size: 9px; border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.cbm-meter i {
  display: block; block-size: 100%;
  background: linear-gradient(90deg, var(--orange), var(--orange-dk));
  border-radius: 999px;
  inline-size: 0;
  transition: inline-size .45s cubic-bezier(.4,0,.2,1);
}
.cbm-meter.is-over i { background: linear-gradient(90deg, #ff8f86, #e2564d); }

.cbm-cc ul { margin-block-start: 14px; display: grid; gap: 8px; }
.cbm-cc li {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 14.5px; color: var(--text-mute);
}
.cbm-cc li b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.cbm-cc li b.cbm-warn { color: #ff9a92; }

/* جدول الحاويات ستّة أعمدة — لا يتّسع لشاشة الجوال.
   يمرّر أفقياً داخل إطاره بدل أن يمدّ الصفحة كلها. */
.cbm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cbm-scroll .tbl { min-inline-size: 620px; }

/* ── تنبيه فارغ ── */
.cbm-empty {
  border: 1.5px dashed var(--ink-700); border-radius: var(--radius-sm);
  padding: 26px; text-align: center; color: var(--text-mute); font-size: 15px;
}

/* ── الشاشات الصغيرة ── */

@media (max-width: 1080px) {
  .cbm-row { grid-template-columns: 44px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 44px; }
  .cbm-row .cbm-f-desc { grid-column: 2 / 5; }
}

@media (max-width: 620px) {
  .cbm-row { grid-template-columns: 44px minmax(0,1fr) minmax(0,1fr) 44px; padding: 14px; gap: 10px; }
  .cbm-row .cbm-f-desc { grid-column: 2 / 4; }
  .cbm-out { font-size: 13.5px; gap: 6px 14px; }
  .cbm-tools .cbm-btn { flex: 1 1 auto; justify-content: center; }
}

/* ── الطباعة ── */

@media print {
  .hdr, .ftr, .wa-float, .band, .cbm-tools, .cbm-del, .skip-link,
  .page-head-photo, .band-photo, #cbmFaq { display: none !important; }
  body { background: #fff; color: #000; }
  .cbm-bar, .cbm-row, .cbm-card, .cbm-cc, .cbm-card-hero {
    background: #fff !important; border: 1px solid #999 !important; color: #000 !important;
  }
  .cbm-card strong, .cbm-card > span, .cbm-card small,
  .cbm-cc li, .cbm-cc li b, .cbm-out, .cbm-out b { color: #000 !important; }
  .section { padding-block: 14px; }
  .big-title { font-size: 26px; color: #000; }
}