/*
 * BHD Currency v3
 * https://design.bhd.om/currency.css
 *
 * Canonical OMR display: the OFFICIAL Omani Rial sign (Central Bank of Oman,
 * 2025) on the LEFT of the number. NOT the generic Arabic Rial ligature ﷼.
 *
 * The .bhd-omr__sym span hosts an inline <svg> with fill=currentColor so the
 * symbol colour follows the surrounding text (works in dark mode, brand
 * accents, etc.).
 *
 * Markup (preferred):
 *   <span class="bhd-omr"><span class="bhd-omr__sym" role="img" aria-label="OMR"></span> <bdi>1,250.500</bdi></span>
 *
 * On DOMContentLoaded currency.js auto-injects the inline SVG into any
 * empty .bhd-omr__sym spans. If JS is disabled, the @supports CSS fallback
 * below shows the text "OMR" so the value still parses.
 */

.bhd-omr {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* Force LTR rendering inside this container so the symbol always sits
     on the visual LEFT of the number, regardless of the surrounding
     direction. isolate-override prevents the parent's RTL context from
     reordering the flex children. */
  unicode-bidi: isolate-override;
  direction: ltr;
}

.bhd-omr__sym {
  display: inline-flex;
  align-items: center;
  width: 1.4em;
  height: 0.85em;
  vertical-align: -0.05em;
  flex-shrink: 0;
  line-height: 1;
  /* If a legacy template left ﷼ or "OMR" text inside, suppress it without
     collapsing the em-based dimensions. */
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}

.bhd-omr__sym svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
  text-indent: 0; /* reset so the <svg> itself isn't pushed off-screen */
}

/* Brand-coloured symbol (for hero pricing tiles, etc.) */
.bhd-omr--brand .bhd-omr__sym svg { fill: var(--primary, currentColor); }

/* Pill style for compact table cells */
.bhd-omr--pill {
  background: var(--muted, #f4f4f5);
  padding: 0.1em 0.5em;
  border-radius: var(--radius-sm, 4px);
  font-size: 0.875em;
}

/* Smaller form for sub-labels */
.bhd-omr--xs { font-size: 0.75em; }

/* No-JS fallback: render small "OMR" text so the amount is still readable. */
.bhd-omr__sym:empty::before {
  content: 'OMR';
  display: block;
  text-indent: 0;
  font-size: 0.55em;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: currentColor;
  text-align: center;
  line-height: 1.5em;
}
/* When JS has hydrated and injected the <svg>, hide the text fallback. */
.bhd-omr__sym:not(:empty)::before { display: none; }