/* ============================================================
   بياناتك · Components — reusable building blocks
   ============================================================ */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding-block: 0; padding-inline: var(--sp-6);
  border: 1px solid transparent; border-radius: var(--r-btn);
  font-family: var(--font-ar); font-size: var(--fs-body); font-weight: var(--fw-semi);
  line-height: 1; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.btn--accent  { background: var(--c-accent); color: var(--c-on-accent); }
.btn--accent:hover  { background: var(--c-accent-hover); }
.btn--primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn--primary:hover { background: var(--c-primary-hover); }
.btn--soft    { background: var(--c-primary-tint); color: var(--c-primary-ink); }
.btn--soft:hover    { background: color-mix(in srgb, var(--c-primary) 16%, transparent); }
.btn--ghost   { background: var(--c-surface); color: var(--c-ink); border-color: var(--c-border); }
.btn--ghost:hover   { background: var(--c-surface-2); border-color: var(--c-faint); }

.btn--lg    { min-height: 52px; padding-inline: var(--sp-8); font-size: var(--fs-body-lg); }
.btn--block { width: 100%; }

/* ---------- Icon button (square, 44 hit target) ---------- */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  border: 1px solid var(--c-border); border-radius: var(--r-btn);
  background: var(--c-surface); color: var(--c-primary-ink); cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.icon-btn:hover { background: var(--c-primary-tint); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn svg { width: 19px; height: 19px; }

/* ---------- Card ---------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
}
.card__pad { padding: var(--sp-6); }

/* ---------- Field ---------- */
.field {
  width: 100%; min-height: 48px; padding-inline: var(--sp-4);
  background: var(--c-surface); color: var(--c-ink);
  border: 1px solid var(--c-border); border-radius: var(--r-field);
  font-family: var(--font-ar); font-size: var(--fs-body);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.field::placeholder { color: var(--c-faint); }
.field:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-tint); }
.label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--c-sub); margin-block-end: var(--sp-2); }

/* ---------- Copy row — the product hero ---------- */
.copy-row {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
}
.copy-row + .copy-row { border-block-start: 1px solid var(--c-hair); }
.copy-row__label {
  font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--c-sub);
  white-space: nowrap; flex: 0 0 auto; min-width: 92px;
}
.copy-row__value {
  flex: 1 1 auto; text-align: center; font-size: var(--fs-num);
  color: var(--c-ink); -webkit-user-select: all; user-select: all;
}

/* the 44px copy button + its copied state */
.copy-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  border: 1px solid var(--c-border); border-radius: var(--r-btn);
  background: var(--c-surface); color: var(--c-primary-ink); cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.copy-btn:hover { background: var(--c-primary-tint); }
.copy-btn:active { transform: scale(0.92); }
.copy-btn svg { width: 19px; height: 19px; transition: opacity var(--dur-1) var(--ease); }
.copy-btn .ic-check { position: absolute; opacity: 0; }
.copy-btn.is-copied { background: var(--c-ok); border-color: transparent; color: #fff; }
.copy-btn.is-copied .ic-copy { opacity: 0; }
.copy-btn.is-copied .ic-check { opacity: 1; }

/* ---------- Status badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px 11px; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-med); line-height: 1; white-space: nowrap;
}
.badge__dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: currentColor; flex: 0 0 auto; }
.badge--ok   { background: var(--c-ok-bg);   color: var(--c-ok); }
.badge--warn { background: var(--c-warn-bg); color: var(--c-warn); }
.badge--bad  { background: var(--c-bad-bg);  color: var(--c-bad); }
/* permanent — for documents that never expire (VAT, National Address) */
.badge--perm { background: var(--c-primary-tint); color: var(--c-primary-ink); }

/* ---------- Verified chip ---------- */
.chip-verified {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: var(--r-pill);
  background: var(--c-primary-tint); color: var(--c-primary-ink);
  font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: 1;
}
.chip-verified svg { width: 14px; height: 14px; }

/* ---------- Certificate card ---------- */
.cert-card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4); background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--r-card);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.cert-card:hover { box-shadow: var(--sh-2); }
.cert-card__top { display: flex; align-items: flex-start; gap: var(--sp-3); }
.cert-card__icon {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-surface-2); color: var(--c-primary-ink); font-weight: var(--fw-bold);
  font-family: var(--font-en); font-size: 12px; letter-spacing: 0.02em; overflow: hidden;
}
.cert-card__name { font-size: var(--fs-body); font-weight: var(--fw-semi); color: var(--c-ink); line-height: 1.35; }
.cert-card__meta { font-size: var(--fs-sm); color: var(--c-sub); }
.cert-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }

/* ---------- Brand lockup ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px;
  background: var(--c-primary); color: var(--c-on-primary);
  display: flex; align-items: center; justify-content: center;
}
.brand__mark svg { width: 20px; height: 20px; }
.brand__word { font-size: 21px; font-weight: var(--fw-bold); color: var(--c-ink); line-height: 1; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; inset-block-end: 24px; inset-inline-start: 50%;
  transform: translate(-50%, 16px); /* JS sets translateX dir-aware via center */
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 11px 18px; border-radius: var(--r-pill);
  background: var(--c-ink); color: var(--c-bg);
  font-size: var(--fs-sm); font-weight: var(--fw-med);
  box-shadow: var(--sh-pop); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  z-index: 80;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 16px; height: 16px; }

/* ---------- Segmented control (lang / theme) ---------- */
.seg { display: inline-flex; padding: 3px; background: var(--c-surface-2); border-radius: var(--r-pill); gap: 2px; }
.seg button {
  border: 0; background: transparent; color: var(--c-sub); cursor: pointer;
  padding: 6px 14px; border-radius: var(--r-pill); font-family: var(--font-ar);
  font-size: var(--fs-sm); font-weight: var(--fw-med); line-height: 1;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.seg button.is-active { background: var(--c-surface); color: var(--c-ink); box-shadow: var(--sh-1); }