@font-face {
  font-family: 'Visa Dialect';
  src: url('assets/fonts/VisaDialect-Light.woff2') format('woff2'),
       url('assets/fonts/VisaDialect-Light.woff') format('woff');
  font-weight: 300;
}
@font-face {
  font-family: 'Visa Dialect';
  src: url('assets/fonts/VisaDialect-Medium.woff2') format('woff2'),
       url('assets/fonts/VisaDialect-Medium.woff') format('woff');
  font-weight: 500;
}
@font-face {
  font-family: 'Visa Dialect';
  src: url('assets/fonts/VisaDialect-Regular.woff2') format('woff2'),
       url('assets/fonts/VisaDialect-Regular.woff') format('woff');
  font-weight: 400;
}
@font-face {
  font-family: 'Visa Dialect';
  src: url('assets/fonts/VisaDialect-Semibold.woff2') format('woff2'),
       url('assets/fonts/VisaDialect-Semibold.woff') format('woff');
  font-weight: 600;
}

:root {
  --visa-white: #FFFFFF;
  --visa-blue: #112AA7;
  --visa-navy: #15195A;
  --visa-gold: #FCC015;

  --text-inky: #060824;
  --text-subtle: #696969;
  --text-link: #112AA7;

  --border-light: #E5EBF0;
  --border-dark: #B9BACD;
  --border-component: #808080;
  --background-light: #F0F0F0;
  --background-button-hover: #E5EBF0;

  --red-background: #FFD6E9;
  --red-icon: #BE2D2D;
  --red-error-border: #9B0000;

  --green-background: #D6F2C4;
  --green-icon: #2F6F4E;

  --grey-background: #E5E5E5;
  --grey-icon: #696969;

  --amber-background: #FFEF99;
  --amber-icon: #875903;

  --blue-background: #C7EDFF;
  --blue-icon: #005E8A;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Visa Dialect', system-ui, -apple-system, sans-serif;
  color: var(--text-inky);
  background: var(--visa-white);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

button, select {
  font-family: inherit;
}

/* Top navigation bar */

.topnav {
  height: 80px;
  flex-shrink: 0;
  width: 100%;
  background: var(--visa-navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.topnav-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topnav-logo {
  height: 23px;
}

.topnav-title {
  font-weight: 600;
  font-size: 20px;
  color: var(--visa-white);
}

.topnav-right {
  display: flex;
  align-items: stretch;
  height: 100%;
  gap: 24px;
}

.topnav-tabs {
  display: flex;
  align-items: stretch;
  height: 100%;
  gap: 8px;
}

.topnav-tab {
  position: relative;
  appearance: none;
  border: none;
  background: transparent;
  color: #D9D9D9;
  font-family: 'Visa Dialect', sans-serif;
  font-weight: 400;
  font-size: 14px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topnav-tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 12px;
  border-radius: 6px;
  color: inherit;
}

.topnav-tab--active .topnav-tab-pill {
  background: var(--visa-blue);
  color: var(--visa-white);
  font-weight: 500;
}

.topnav-tab--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--visa-gold);
}

.topnav-chevron {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 2px;
}

.topnav-profile {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #D9D9D9;
}

.topnav-profile svg {
  height: 24px;
  width: 24px;
}

.topnav-datetime {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  font-size: 11px;
  line-height: 14px;
  color: var(--visa-white);
}

/* Page layout */

.view {
  flex: 1 0 auto;
  padding: 0 24px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 56px;
}

.page-title {
  font-weight: 600;
  font-size: 32px;
  color: var(--visa-blue);
  margin: 0;
  max-width: 640px;
}

.page-actions {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
}

/* Buttons */

.btn {
  appearance: none;
  cursor: pointer;
  border-radius: 6px;
  padding: 11px 15px;
  font-family: 'Visa Dialect', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.25px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn--secondary {
  background: transparent;
  border: 1px solid var(--visa-blue);
  color: var(--visa-blue);
}

.btn--secondary:hover {
  background: var(--background-button-hover);
}

.btn--primary {
  background: var(--visa-blue);
  border: 1px solid var(--visa-blue);
  color: var(--visa-white);
}

.btn--primary:hover {
  background: var(--visa-navy);
}

.btn-icon {
  width: 16px;
  height: 16px;
}

/* Status badges (menu table, overlay, tooltip, and benefit page sidebar) */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 0;
  border-radius: 4px;
  font-size: 11px;
  line-height: 14px;
  color: var(--text-inky);
}

.badge-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-left: 8px;
  margin-right: 6px;
}

.badge-label {
  padding-right: 8px;
}

.badge--published { background: var(--green-background); }
.badge--pending { background: var(--blue-background); }
.badge--rejected { background: var(--amber-background); }
.badge--expired { background: var(--red-background); }
.badge--draft { background: var(--grey-background); }

/* Status wizard (overlay and benefit page sidebar) */

.status-wizard {
  margin-top: 16px;
  width: 296px;
}

.wizard-image {
  display: block;
  width: 296px;
  height: 40px;
}

.wizard-labels {
  position: relative;
  width: 296px;
  height: 20px;
  margin-top: 8px;
}

.wizard-label {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-inky);
  white-space: nowrap;
}

.wizard-label--current {
  font-weight: 500;
}

/* Related benefits hierarchy (overlay and benefit page sidebar) */

.related-benefits-list {
  list-style-type: disc;
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-inky);
}

.related-benefits-children {
  list-style-type: disc;
  margin: 2px 0 0 0;
  padding-left: 18px;
  font-weight: 400;
  color: var(--text-subtle);
}

.related-benefits-list,
.related-benefits-list ul,
.related-benefits-list ul ul {
  list-style-type: disc !important;
}

/* The currently-viewed benefit in the overlay's schematic is medium-weight
   regardless of its depth (Base, Ext Lvl 1, or Ext Lvl 2) -- everything
   else stays at the browser default (regular) weight. Scoped to the
   overlay's own id so it doesn't affect the benefit page sidebar's
   separately-styled copy of this same tree (see benefit.css). */
#detail-related-benefits .related-benefits-current {
  font-weight: 500;
}

/* Footer */

.page-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 125px;
  padding: 0 24px 48px 24px;
  background: var(--background-light);
  flex-shrink: 0;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 24px;
}

.footer-logo {
  display: inline-block;
  width: 71px;
  height: 23px;
  color: var(--visa-blue);
}

.footer-copyright {
  font-size: 11px;
  color: var(--text-inky);
}

/* Overlay (shared) — base shade/card/fade + header/close/actions. Reused by
   the benefit-menu detail overlay (menu.css has menu-specific content
   styles: tabs, basic-info columns, history, etc.) and the benefit page's
   Add New Tier overlay (benefit.css has its form-field layout). */

.overlay-shade {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 10;
}

.overlay {
  display: none;
  position: fixed;
  top: 180px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  max-width: calc(100% - 48px);
  max-height: calc(100vh - 216px);
  overflow-y: auto;
  background: var(--visa-white);
  border-radius: 8px;
  padding: 16px 24px 36px 24px;
  box-shadow: 0px 4px 20px 2px rgba(0, 0, 0, 0.25);
  z-index: 11;
  opacity: 0;
  transition: opacity 0.5s ease, height 0.2s ease;
}

.overlay-shade--visible {
  display: block;
}

.overlay--visible {
  display: block;
}

.overlay--fade-in {
  opacity: 1;
}

.overlay--fade-out {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.overlay-title {
  font-weight: 600;
  font-size: 24px;
  margin: 0;
}

.overlay-close {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-inky);
}

.overlay-close-x {
  display: block;
}

.overlay-close-label {
  font-size: 12px;
  font-weight: 300;
  margin-top: 4px;
}

.overlay-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 52px;
}