/* =========================================================================
   Ohmyfin — Brand v3 layer
   Original visual identity owned by Ohmyfin Organisation (Panama #687928532).
   Adds: monogram mark for the wordmark, amber accent token, hero polish.
   This file is loaded AFTER trackmyswift1.min.css and only adds new styles
   or overrides where the layer is needed. It does not remove existing rules.
   ========================================================================= */

:root {
  --brand-primary: #047857;
  --brand-primary-dark: #065F46;
  --brand-wash: #ECFDF5;
  --brand-mint: #e3f7ec;          /* signature soft mint — used as page wash (dimmer than #d1fae5) */
  --brand-mint-strong: #c8efd8;   /* stronger mint for accents/borders */
  --brand-accent: #F59E0B;
  --brand-accent-dark: #D97706;
  --brand-ink: #0F2A23;
  --brand-muted: #5B6B66;
  --brand-line: #E2EBE7;
}

/* -------------------------------------------------------------------------
   GLOBAL MINT WASH
   Applies the signature mint (#d1fae5) as a sitewide page background so
   every page shares the brand atmosphere. Cards, navbars, modals and
   inputs stay white/their own colour so contrast & readability are
   preserved. Avoid clobbering pages that already paint their own body
   colour by using a low-specificity selector.
   ------------------------------------------------------------------------- */
html { background-color: var(--brand-mint); }
body {
  background-color: var(--brand-mint);
}
/* Keep cards/sheets crisp white on the mint background */
.card,
.modal-content,
.dropdown-menu,
.popover,
.toast,
.form-control,
.input-group-text {
  background-color: #ffffff;
}
/* Reusable utility tokens */
.bg-mint        { background-color: var(--brand-mint) !important; }
.bg-mint-soft   { background-color: #e6fcf2 !important; }
.bg-mint-strong { background-color: var(--brand-mint-strong) !important; }
.border-mint    { border-color: var(--brand-mint-strong) !important; }
.section-mint {
  background-color: var(--brand-mint);
  border-top: 1px solid var(--brand-mint-strong);
  border-bottom: 1px solid var(--brand-mint-strong);
}
/* Tint the sitewide footer with a slightly stronger mint band so it
   visually anchors the page without fighting the body wash. */
footer, .site-footer, .omf-footer {
  background-color: var(--brand-mint);
}

/* -------------------------------------------------------------------------
   1. WORDMARK + MONOGRAM
   The .logo class is used in the navbar across every page. We prepend an
   inline-SVG monogram representing a multi-leg payment path (3 staggered
   bars with amber endpoint nodes) — meaningful for a SWIFT tracker and
   visually distinctive. Pure CSS so no extra HTTP request.
   ------------------------------------------------------------------------- */
.logo {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* The brand logo is now rendered as a single PNG image (img inside .logo).
   Suppress the legacy CSS-generated globe pseudo-element wherever an <img>
   child is present so we don't render two logos side-by-side. */
.logo:has(img)::before { content: none !important; display: none !important; }

@media (max-width: 500px) {
  .logo { gap: 8px; }
}

/* -------------------------------------------------------------------------
   2. AMBER ACCENT BUTTON
   Complementary CTA colour for high-intent actions (e.g. "Track now",
   "Start free"). Used sparingly to keep emerald as the primary identity.
   ------------------------------------------------------------------------- */
.btn-accent,
.btn-accent:visited {
  background-color: var(--brand-accent);
  border: 1px solid var(--brand-accent-dark);
  color: #1A1208;
  font-weight: 600;
  border-radius: 8px;
  padding: 10px 20px;
  transition: background-color .15s ease, transform .08s ease;
}
.btn-accent:hover,
.btn-accent:focus {
  background-color: var(--brand-accent-dark);
  color: #fff;
  text-decoration: none;
}
.btn-accent:active { transform: translateY(1px); }

/* -------------------------------------------------------------------------
   3. HERO BLOCK
   A signature hero pattern: small uppercase eyebrow tag, 2-line title,
   muted subtitle, then the existing form, followed by a slim trust strip
   of independent verification statements. Existing markup is preserved
   wherever possible — these classes are additive.
   ------------------------------------------------------------------------- */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-primary-dark);
  background: var(--brand-wash);
  border: 1px solid var(--brand-line);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.hero-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-accent);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.hero-title {
  font-weight: 800;
  font-size: 40px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--brand-ink);
  margin: 0 auto 12px;
  max-width: 720px;
}
.hero-title .accent {
  color: var(--brand-primary);
  background: linear-gradient(180deg, transparent 62%, rgba(245, 158, 11, 0.22) 62%);
  padding: 0 4px;
}

.hero-subtitle {
  font-size: 16px;
  line-height: 1.55;
  color: var(--brand-muted);
  max-width: 560px;
  margin: 0 auto 28px;
}

@media (max-width: 600px) {
  .hero-title { font-size: 28px; }
  .hero-subtitle { font-size: 14px; padding: 0 16px; }
}

/* -------------------------------------------------------------------------
   4. TRUST STRIP
   A row of three short verification statements positioned beneath the
   tracker form. Reinforces the "independent / no-signup" positioning.
   ------------------------------------------------------------------------- */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 28px;
  margin: 28px auto 12px;
  max-width: 760px;
  padding: 0 16px;
}
.trust-strip .trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--brand-muted);
}
.trust-strip .trust-item i {
  color: var(--brand-primary);
  font-size: 14px;
}
.trust-strip .trust-item strong {
  color: var(--brand-ink);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   5. SUBTLE PRIMARY-BUTTON REFINEMENT
   Existing .btn-primary uses #047857 background. Add a refined hover
   transition and slightly tighter radius for a more polished feel without
   altering the colour family.
   ------------------------------------------------------------------------- */
.btn-primary {
  border-radius: 8px;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--brand-primary-dark) !important;
  border-color: var(--brand-primary-dark) !important;
}

/* Compact info tooltip — opens BELOW the icon so it's not clipped by the hero card */
.omf-tip { position: relative; cursor: help; }
.omf-tip::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 280px;
  max-width: calc(100vw - 32px);
  background: #1E293B;            /* brand slate-dark */
  color: #fff;
  font: 500 12.5px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #334155;       /* subtle slate edge */
  box-shadow: 0 12px 28px -8px rgba(15, 23, 42, .35), 0 2px 6px rgba(15, 23, 42, .15);
  white-space: normal;
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 9999;
  pointer-events: none;
}
.omf-tip::before {
  content: "";
  position: absolute;
  top: calc(100% + 4px);
  right: 12px;
  width: 0; height: 0;
  border: 6px solid transparent;
  border-bottom-color: #1E293B;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, visibility .15s;
  z-index: 10000;
  pointer-events: none;
}
.omf-tip:hover::after, .omf-tip:focus-within::after,
.omf-tip:hover::before, .omf-tip:focus-within::before {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* On very narrow viewports anchor the tooltip to the right edge of the screen */
@media (max-width: 520px) {
  .omf-tip::after { width: calc(100vw - 32px); right: -8px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   PRIMARY NAVIGATION — refined, professional button-style links (site-wide)
   Turns the plain text nav (Home, Knowledge Center, Status Codes, …) into
   clean, evenly-spaced button-style links with a subtle emerald hover/active
   state. Compact metrics + an overflow safety net (flex-wrap) keep the whole
   bar — including the JS-injected Sign In / Sign Up / search / Track Payment —
   on a single line at common laptop widths WITHOUT forcing horizontal page
   scroll. (A too-wide bar was clipping the hero on the left.)
   Specificity ( .navbar .navbar-nav > .nav-item > .nav-link ) intentionally
   beats Bootstrap's default .navbar-nav .nav-link without needing !important.
   ────────────────────────────────────────────────────────────────────────── */
/* Trim the oversized brand logo and the legacy 100px spacer that wasted ~140px
   of bar width (inline styles → need !important to override). */
.navbar .navbar-brand.logo img { height: 50px !important; }
.navbar .navbar-nav li.laptop { margin-left: 20px !important; }

@media (min-width: 992px) {
  /* Center the row, and let it wrap as a LAST resort instead of overflowing
     the page (no more horizontal scrollbar / clipped hero). */
  .navbar .navbar-nav { align-items: center; flex-wrap: wrap; row-gap: 4px; }
}

.navbar .navbar-nav > .nav-item > .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;                 /* slate-700 — calm, professional default */
  background-color: transparent;
  border-radius: 8px;
  line-height: 1;
  white-space: nowrap;
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.navbar .navbar-nav > .nav-item > .nav-link:hover,
.navbar .navbar-nav > .nav-item > .nav-link:focus-visible {
  color: #047857;                 /* emerald brand */
  background-color: #ECFDF5;      /* emerald-50 wash */
}
.navbar .navbar-nav > .nav-item > .nav-link > i {
  font-size: 12.5px;
  color: #047857;
}
/* Current page — a quiet but clear "you are here" treatment. The ring uses an
   inset box-shadow (NOT a border) so it never adds layout width. */
.navbar .navbar-nav > .nav-item > .nav-link.omf-nav-active,
.navbar .navbar-nav > .nav-item > .nav-link.active,
.navbar .navbar-nav > .nav-item > .nav-link[aria-current="page"] {
  color: #047857;
  background-color: #ECFDF5;
  box-shadow: inset 0 0 0 1px #6EE7B7;   /* emerald-300 ring */
}
/* Keep the language-dropdown caret from crowding its label */
.navbar .navbar-nav .nav-link.dropdown-toggle::after { margin-left: 5px; }

/* Tighten the JS-injected controls (inline-styled → !important) so the whole
   bar fits one line on laptops. */
#omf-auth-nav-buttons a { height: 34px !important; padding: 0 12px !important; font-size: 13px !important; }
.omf-search.omf-search--navbar { max-width: 220px !important; margin-left: 6px !important; }
.omf-search.omf-search--navbar input[name="q"] { width: 140px !important; }
#nav-track-payment-btn .btn, #nav-track-payment .btn { padding: 7px 14px !important; font-size: 13.5px !important; }