/* AL-HARAMEEN — «كرت العلبة» / the card in the box, support centre (assets/js/box-cards.js, round 13). */
.bc { margin: 26px 0 8px; scroll-margin-top: 90px; }
.bc-app { background: #fff; border: 1.5px solid var(--line); border-radius: 22px; padding: 20px 22px 18px; box-shadow: 0 6px 22px rgba(11, 61, 38, .07); min-height: 160px; }
.bc-title { margin: 0; font-size: clamp(20px, 3vw, 25px); font-weight: 800; color: var(--green-900); }
.bc-lead { margin: 6px 0 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.75; max-width: 780px; }
.bc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bc-chip { font: inherit; font-weight: 800; font-size: 16px; letter-spacing: .5px; min-width: 58px; min-height: 44px; padding: 6px 14px; border-radius: 12px; border: 1.5px solid var(--green-600); background: var(--green-100); color: var(--green-900); cursor: pointer; direction: ltr; }
.bc-chip:hover, .bc-chip:focus-visible { background: var(--green-600); color: #fff; outline: none; }
.bc-chip[aria-pressed="true"] { background: var(--green-700); border-color: var(--green-700); color: #fff; box-shadow: 0 0 0 3px rgba(201, 165, 68, .45); }
.bc-where { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.bc-out:empty { display: none; }
.bc-card { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 14px; }
.bc-ct { margin: 0 0 10px; font-size: 19px; font-weight: 800; color: var(--green-900); }
.bc-fig { margin: 0; overflow-x: auto; border-radius: 12px; background: #F7F6F1; padding: 8px; }
.bc-img { display: block; height: auto; max-width: 100%; margin-inline: auto; border-radius: 6px; }
.bc-note { margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: var(--ink); border-inline-start: 3px solid var(--gold-500); padding-inline-start: 10px; }
.bc-models { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.bc-lab { font-size: 13.5px; font-weight: 800; color: var(--green-700); margin-inline-end: 4px; }
.bc-model { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--green-100); color: var(--green-900); text-decoration: none; unicode-bidi: isolate; }
.bc-model:hover, .bc-model:focus-visible { background: var(--green-600); color: #fff; }
.bc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bc-go, .bc-help { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 14px; font-weight: 800; font-size: 15px; text-decoration: none; }
.bc-go { background: var(--gold-500); color: #1C1606; }
.bc-go:hover, .bc-go:focus-visible { background: var(--gold-300); }
.bc-help { border: 1.5px solid var(--green-600); color: var(--green-700); background: #fff; }
.bc-help:hover, .bc-help:focus-visible { background: var(--green-100); }
.bc-rows { display: grid; gap: 8px; margin-top: 14px; }
.bc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; background: #F7F6F1; border-radius: 12px; padding: 8px 12px; }
.bc-row .bc-lab { color: var(--ink); font-size: 14.5px; flex: 1 1 220px; }
.bc-langs { display: flex; gap: 6px; }
.bc-link { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; color: var(--green-700); font-weight: 700; font-size: 14px; text-decoration: none; }
.bc-langs .bc-link:hover, .bc-langs .bc-link:focus-visible { border-color: var(--green-600); background: var(--green-100); }
.bc-small { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 560px) {
  .bc-app { padding: 16px 14px; border-radius: 18px; }
  .bc-chip { min-width: 52px; font-size: 15px; }
  .bc-acts a { flex: 1 1 100%; justify-content: center; }
}

/* the box-card block is built by box-cards.js: the empty box keeps its room (audit 4 Nov 2026). 218-243 px desktop,
   333-431 px on a phone. */
.bc-app { min-height: 218px; }
@media (max-width: 560px) { .bc-app { min-height: 333px; } }