/* extensions.css — cookie banner, trust strip, page-perf accent
   Loads after motion-fixes.css. */

/* ---------- Cookie consent banner — REMOVED 2026-05-22 (kept rules unused) ---------- */
.mb-cookie--retired {
  display: none !important;
}
.mb-cookie {
  display: none !important;
  position: fixed;
  inset-inline: 14px;
  bottom: 14px;
  z-index: 9994;
  max-width: 720px;
  margin-inline: auto;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid rgba(15, 68, 89, 0.12);
  border-radius: 14px;
  box-shadow: 0 18px 48px -22px rgba(15, 68, 89, 0.35);
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  transform: translateY(140%);
  opacity: 0;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 360ms;
  font-family: "Alexandria", "Noto Kufi Arabic", system-ui, sans-serif;
}
.mb-cookie.is-shown { transform: translateY(0); opacity: 1; }
.mb-cookie p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: #0a2a3d;
}
.mb-cookie p a {
  color: #12525C;
  text-decoration: underline;
}
.mb-cookie button {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  min-height: 40px;
  white-space: nowrap;
}
.mb-cookie__accept { background: #12525C; color: #fff; }
.mb-cookie__accept:hover { background: #12525C; }
.mb-cookie__decline {
  background: transparent;
  color: #0a2a3d;
  border: 1px solid rgba(15, 68, 89, 0.18) !important;
}
.mb-cookie__decline:hover { background: rgba(15, 68, 89, 0.05); }
@media (max-width: 640px) {
  .mb-cookie {
    grid-template-columns: 1fr;
    inset-inline: 10px;
    bottom: 78px; /* sit above the action-dock */
    padding: 14px 16px;
  }
  .mb-cookie__buttons { display: flex; gap: 8px; }
  .mb-cookie__buttons button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mb-cookie { transition: none; }
}

/* ---------- Zakat price-feed last-updated stamp ---------- */
.mb-price-stamp {
  font-size: 12px;
  color: rgba(15, 68, 89, 0.65);
  margin-top: 6px;
}
.mb-price-stamp .mb-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #12525C;
  margin-inline-end: 6px;
  animation: mb-dot-pulse 2.4s ease infinite;
}
@keyframes mb-dot-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .mb-price-stamp .mb-dot { animation: none; opacity: 0.9; }
}

/* ---------- PWA install pill ---------- */
.mb-install-pill {
  position: fixed;
  bottom: 22px;
  inset-inline-start: 22px;
  z-index: 9993;
  background: #fff;
  border: 1px solid rgba(15, 68, 89, 0.14);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 340px;
  box-shadow: 0 18px 48px -24px rgba(15, 68, 89, 0.4);
  transform: translateY(120%);
  opacity: 0;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms;
  font-family: "Alexandria", "Noto Kufi Arabic", system-ui, sans-serif;
}
.mb-install-pill.is-shown { transform: translateY(0); opacity: 1; }
.mb-install-pill img { flex: 0 0 28px; border-radius: 6px; }
.mb-install-pill > div { flex: 1; min-width: 0; line-height: 1.4; }
.mb-install-pill strong { display: block; font-size: 13.5px; color: #0a2a3d; }
.mb-install-pill small { font-size: 11.5px; color: #5a6872; }
.mb-install-pill__btn {
  background: #12525C;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  font-family: inherit;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}
.mb-install-pill__btn:hover { background: #12525C; }
.mb-install-pill__dis {
  background: transparent;
  color: #5a6872;
  border: 0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
@media (max-width: 640px) {
  .mb-install-pill {
    inset-inline: 12px;
    bottom: 90px; /* clear of mobile sticky CTA */
    max-width: none;
  }
}
/* The iPhone card (2026-09-13): Safari has no one-tap install, so it shows the
   two taps, each with the icon the visitor will actually look for. */
.mb-install-pill--ios { align-items: flex-start; max-width: 380px; padding: 14px 14px 14px 10px; }
.mb-install-pill--ios img { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; }
.mb-install-pill--ios strong { font-size: 14px; margin-block-end: 6px; }
.mb-ios__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mb-ios__steps li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 12.5px; color: #26404E; line-height: 1.5; }
.mb-ios__num {
  width: 18px; height: 18px; border-radius: 999px; background: #EEF4F5; color: #12525C;
  font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; flex: none;
}
.mb-ios__ico {
  width: 24px; height: 24px; border-radius: 7px; background: #EEF4F5; color: #0A7AFF;
  display: inline-grid; place-items: center; flex: none;
}
.mb-ios__ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mb-install-pill--ios .mb-install-pill__btn { align-self: center; }
/* On a phone the steps get the card's full width and «فهمت» sits under them:
   beside them it squeezed each step onto three lines (measured at 390px). */
@media (max-width: 640px) {
  .mb-install-pill--ios {
    bottom: calc(18px + env(safe-area-inset-bottom));
    flex-wrap: wrap; padding: 16px 16px 14px; gap: 10px 12px;
  }
  .mb-install-pill--ios .mb-ios__body { flex: 1 1 0; padding-inline-end: 22px; }
  .mb-install-pill--ios .mb-install-pill__btn { flex: 1 0 100%; order: 3; padding: 11px 14px; font-size: 14px; border-radius: 10px; }
  .mb-install-pill--ios .mb-install-pill__dis { position: absolute; inset-block-start: 8px; inset-inline-end: 6px; }
  .mb-ios__steps li { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .mb-install-pill { transition: none; }
}