/* upicharges.in brand layer.
   Loaded after the Tailwind build. Tailwind's rules live in @layer, so these
   unlayered rules win without !important. Colours follow the logo:
   UPI blue for structure, the lightning orange for the one "attention" accent. */

:root {
  --color-brand: #0a4fc4;        /* logo blue, darkened for AA text contrast */
  --color-brand-dark: #073a93;
  --color-brand-tint: #ebf2ff;
  --color-accent: #b85400;       /* logo orange, readable as text */
  --color-accent-tint: #fff2e4;
  --color-ink: #0e1a33;
  --color-ink-soft: #46536b;
  --color-ink-faint: #5d6880;
  --color-paper: #f5f7fb;
  --color-sunk: #eef2f8;
  --color-rule: #dde4ef;
  --color-rule-strong: #c6d1e2;
  --radius-card: .75rem;
  --logo-orange: #ff7a00;
  --footer-bg: #0b1b3a;
}

body { background: var(--color-paper); -webkit-font-smoothing: antialiased; }

/* ---------- Header ---------- */
body > header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--color-rule);
  box-shadow: 0 1px 2px rgba(14,26,51,.04);
}
@supports (backdrop-filter: blur(8px)) {
  body > header { background: rgba(255,255,255,.88); backdrop-filter: saturate(1.4) blur(10px); }
}

/* Logo: the link keeps its accessible name (the SVG's aria-label stays in the
   tree, only visually hidden); the picture is the new logo. */
body > header > div > a:first-child {
  display: block;
  width: 190px; height: 44px;
  background: url(/logo.png) left center / contain no-repeat;
  position: relative;
}
body > header > div > a:first-child > span {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 380px) {
  body > header > div > a:first-child { width: 146px; height: 34px; }
}

/* Language switch: quiet pill instead of a heavy outlined box */
body > header a[hreflang] {
  border-width: 1px; border-color: var(--color-rule);
  border-radius: 999px; color: var(--color-ink); font-weight: 600;
}
body > header a[hreflang]:hover { border-color: var(--color-brand); color: var(--color-brand); }
body > header > div > div > a:not([hreflang]) { border-radius: 999px; }

/* Tool nav row: text tabs, not a row of boxes */
body > header > nav, body > header > nav ul { background: transparent; }
body > header > nav { border-top: 1px solid var(--color-rule); }
body > header > nav a {
  border-color: transparent; background: transparent;
  color: var(--color-ink-soft); border-radius: 999px;
}
body > header > nav a:hover { background: var(--color-brand-tint); border-color: transparent; color: var(--color-brand); }
body > header > nav a[aria-current="page"] { background: var(--color-brand-tint); color: var(--color-brand); }

/* ---------- Surfaces ---------- */
.border-2.border-rule-strong { border-width: 1px; }
.rounded-card.border-rule-strong,
.rounded-card.border-rule.bg-card {
  box-shadow: 0 1px 2px rgba(14,26,51,.05), 0 4px 16px -8px rgba(14,26,51,.10);
}
/* the amount input keeps a firm edge so it reads as a field */
.focus-within\:border-brand.border-2 { border-width: 2px; }
.border-t-2.border-rule-strong { border-top-width: 1px; }

/* Home hero: a light UPI-blue field with a thin orange rule from the logo bolt */
main > section.bg-card.border-b {
  background: linear-gradient(180deg, #ffffff 0%, var(--color-brand-tint) 100%);
  border-bottom: 3px solid var(--logo-orange);
}
main h1 { letter-spacing: -.02em; }

a.bg-brand { box-shadow: 0 6px 16px -8px rgba(10,79,196,.55); }

/* ---------- Footer ---------- */
body > footer {
  background: var(--footer-bg);
  color: #fff;
  border-top: 0;
}
body > footer > div { padding-top: 2.5rem; padding-bottom: 2rem; }
body > footer > div::before {
  content: ""; display: block;
  width: 168px; height: 39px; margin-bottom: 1.5rem;
  background: url(/logo-white.png) left center / contain no-repeat;
}
body > footer nav a { color: rgba(255,255,255,.86); font-weight: 500; }
body > footer nav a:hover { color: #fff; }

/* "Rules last verified" block: one calm status line, not a boxed banner */
body > footer .rounded-card.bg-sunk {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .75rem;
  padding: 1rem 1.125rem;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .75rem 1.25rem;
  box-shadow: none;
}
body > footer .rounded-card.bg-sunk > p:first-child {
  flex: 1 1 22rem;
  color: rgba(255,255,255,.82);
  font-weight: 400; font-size: .8125rem; line-height: 1.5;
  padding-left: 1.75rem; position: relative;
}
body > footer .rounded-card.bg-sunk > p:first-child::before {
  content: ""; position: absolute; left: 0; top: .05rem;
  width: 1.125rem; height: 1.125rem; border-radius: 50%;
  background: #1f9d55 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat;
}
body > footer .rounded-card.bg-sunk > p:last-child { margin-top: 0; gap: .5rem .75rem; }
body > footer .rounded-card.bg-sunk a {
  text-decoration: none; font-size: .8125rem;
  border-radius: 999px; padding: .375rem .875rem;
  border: 1px solid rgba(255,255,255,.22);
  color: #fff; font-weight: 600;
}
body > footer .rounded-card.bg-sunk a[target="_blank"] {
  background: #fff; color: var(--footer-bg); border-color: #fff;
}
body > footer .rounded-card.bg-sunk a[target="_blank"]::after { content: " ↗"; }
body > footer .rounded-card.bg-sunk a:hover { border-color: #fff; }
body > footer > div > p:last-child { color: rgba(255,255,255,.6); }

/* ---------- Focus & motion ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--logo-orange); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }