/* =========================================================================
   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; }
}