:root {
  --site-ink: #071b34;
  --site-brand: #e11d2e;
  --site-primary: #005897;
  --site-accent: #ff9944;
  --site-mist: #f4f7fb;
}

/* Shared typography and component styling based on the completed offers page. */
.font-black {
  font-weight: 600 !important;
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2364758b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem 1.25rem;
}

input,
select,
textarea,
button {
  font: inherit;
}

/* Bring page-specific palettes into the primary Mastercard offers system. */
.bg-forest,
.bg-blue,
.bg-gradient-to-r.from-blue {
  background-color: var(--site-ink) !important;
}

.from-blue {
  --tw-gradient-from: var(--site-primary) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(0 88 151 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-indigo-700 {
  --tw-gradient-to: var(--site-ink) var(--tw-gradient-to-position) !important;
}

.text-forest,
.text-blue,
.text-emerald-700 {
  color: var(--site-ink) !important;
}

.bg-sage {
  background-color: var(--site-mist) !important;
}

.bg-gold {
  background-color: var(--site-accent) !important;
}

.text-gold,
.text-amber-300,
.text-amber-400 {
  color: var(--site-accent) !important;
}

.shadow-soft {
  box-shadow: 0 18px 50px rgba(7, 27, 52, 0.12);
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--site-brand);
  outline-offset: 2px;
}