/* Public button component. One site-wide corner setting:
   full: var(--radius-full, 50px); square: var(--radius-none, 0);
   rounded by size: initial (uses each size's --button-size-radius). */
:root {
  --button-radius: var(--radius-full, 50px);
  --button-font-weight: 600;
  --button-focus-ring: var(--primary-700, #216394);
  /* The fill (primary.css): the brand colour darkened only as far as white text needs, with darker hover and pressed
     steps; a light brand colour keeps its colour with black text. A portal that changes a fill sets its text too. */
  --button-primary-background: var(--primary-fill, var(--primary-500));
  --button-primary-foreground: var(--primary-fill-text, var(--gray-0));
  --button-primary-hover: var(--primary-fill-hover, #287bb7);
  --button-primary-hover-foreground: var(--primary-fill-text, var(--gray-0));
  --button-primary-active: var(--primary-fill-active, #216394);
  --button-primary-active-foreground: var(--primary-fill-text, var(--gray-0));
  --button-secondary-background: var(--secondary-500, #e28d7b);
  --button-secondary-foreground: var(--gray-0);
  --button-secondary-hover: var(--secondary-600, #d97560);
  --button-secondary-active: var(--secondary-700, #ac5b4a);
  --button-gray-background: var(--gray-800);
  --button-gray-foreground: var(--gray-0);
  --button-gray-hover: var(--gray-900);
  --button-gray-active: var(--gray-1000);
  --button-gray-ghost-background: transparent;
  --button-gray-ghost-foreground: var(--gray-900);
  --button-gray-ghost-hover: var(--gray-50);
  --button-gray-ghost-active: var(--gray-300);
  --button-white-background: var(--gray-0);
  --button-white-foreground: var(--gray-800);
  --button-white-hover: var(--gray-50);
  --button-white-active: var(--gray-200);
  --button-primary-outline-background: transparent;
  --button-primary-outline-foreground: var(--button-primary-background);
  --button-primary-outline-border: var(--button-primary-background);
  --button-secondary-outline-background: transparent;
  --button-secondary-outline-foreground: var(--button-secondary-background);
  --button-secondary-outline-border: var(--button-secondary-background);
  --button-gray-outline-background: transparent;
  --button-gray-outline-foreground: var(--button-gray-background);
  --button-gray-outline-border: var(--button-gray-background);
  --button-xs-height: 28px;
  --button-sm-height: 32px;
  --button-md-height: 40px;
  --button-lg-height: 48px;
  --button-xlg-height: 56px;
}
:where(.ereg-button) {
  --button-size-height: var(--button-md-height);
  --button-size-radius: var(--radius-small, 8px);
  --button-font-size: 16px;
  --button-icon-size: 18px;
  --button-padding-y: 8px;
  --button-padding-x: 16px;
  --button-padding: var(--button-padding-y) var(--button-padding-x);
  --button-height: var(--button-size-height);
  --button-current-background: var(--button-background);
  --button-current-radius: var(--button-radius, var(--button-size-radius));
  --button-border-shorthand: 1px solid var(--button-current-border);
  --button-current-color: var(--button-color);
  --button-active-color: var(--button-hover-color);
  --button-current-border: var(--button-border);
  --button-outline: none;
  --button-opacity: 1;
  /* Private values exist only on migrated buttons; legacy selectors retain fallbacks. */
  --button-current-font-weight: var(--button-font-weight);
  --button-line-height: 1.3;
  --button-element-height: auto;
  --button-border-width: 1px;
  --button-border-style: solid;
  --button-background-image: none;
  --button-white-space: normal;
  --button-text-decoration: none;
  --button-text-shadow: none;
  --button-box-shadow: none;
  --button-outline-offset: 3px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--button-height);
  height: auto;
  max-width: 100%;
  padding: var(--button-padding);
  border: 1px solid var(--button-current-border);
  border-radius: var(--button-radius, var(--button-size-radius));
  background: var(--button-current-background);
  color: var(--button-current-color);
  font-family: inherit;
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: middle;
  opacity: var(--button-opacity);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .15s, border-color .15s, color .15s;
}
.ereg-button:where([data-button-size="xs"]) {
  --button-size-height: var(--button-xs-height);
  --button-size-radius: var(--radius-xsmall, 4px);
  --button-font-size: 12px;
  --button-icon-size: 14px;
  --button-padding-y: 4px;
  --button-padding-x: 10px;
  --button-padding: var(--button-padding-y) var(--button-padding-x);
}
.ereg-button:where([data-button-size="sm"]) {
  --button-size-height: var(--button-sm-height);
  --button-size-radius: var(--radius-small, 8px);
  --button-font-size: 14px;
  --button-icon-size: 16px;
  --button-padding-y: 5px;
  --button-padding-x: 12px;
  --button-padding: var(--button-padding-y) var(--button-padding-x);
}
.ereg-button:where([data-button-size="lg"]) {
  --button-size-height: var(--button-lg-height);
  --button-size-radius: var(--radius-medium, 12px);
  --button-font-size: 18px;
  --button-icon-size: 20px;
  --button-padding-y: 10px;
  --button-padding-x: 20px;
  --button-padding: var(--button-padding-y) var(--button-padding-x);
}
.ereg-button:where([data-button-size="xlg"]) {
  --button-size-height: var(--button-xlg-height);
  --button-size-radius: var(--radius-large, 16px);
  --button-font-size: 20px;
  --button-icon-size: 22px;
  --button-padding-y: 12px;
  --button-padding-x: 24px;
  --button-padding: var(--button-padding-y) var(--button-padding-x);
}

:where(.ereg-button[data-button-variant="primary"]) {
  --button-background: var(--button-primary-background);
  --button-color: var(--button-primary-foreground);
  --button-border: var(--button-primary-background);
  --button-hover-background: var(--button-primary-hover);
  --button-hover-color: var(--button-primary-hover-foreground);
  --button-hover-border: var(--button-primary-hover);
  --button-active-background: var(--button-primary-active);
  --button-active-color: var(--button-primary-active-foreground);
}
:where(.ereg-button[data-button-variant="primary-outline"]) {
  --button-background: var(--button-primary-outline-background);
  --button-color: var(--button-primary-outline-foreground);
  --button-border: var(--button-primary-outline-border);
  --button-hover-background: var(--button-primary-hover);
  --button-hover-color: var(--button-primary-hover-foreground);
  --button-hover-border: var(--button-primary-hover);
  --button-active-background: var(--button-primary-active);
  --button-active-color: var(--button-primary-active-foreground);
}

:where(.ereg-button[data-button-variant="secondary"]) {
  --button-background: var(--button-secondary-background);
  --button-color: var(--button-secondary-foreground);
  --button-border: var(--button-secondary-background);
  --button-hover-background: var(--button-secondary-hover);
  --button-hover-color: var(--button-secondary-foreground);
  --button-hover-border: var(--button-secondary-hover);
  --button-active-background: var(--button-secondary-active);
}
:where(.ereg-button[data-button-variant="secondary-outline"]) {
  --button-background: var(--button-secondary-outline-background);
  --button-color: var(--button-secondary-outline-foreground);
  --button-border: var(--button-secondary-outline-border);
  --button-hover-background: var(--button-secondary-hover);
  --button-hover-color: var(--button-secondary-foreground);
  --button-hover-border: var(--button-secondary-hover);
  --button-active-background: var(--button-secondary-active);
}

:where(.ereg-button[data-button-variant="gray"]) {
  --button-background: var(--button-gray-background);
  --button-color: var(--button-gray-foreground);
  --button-border: var(--button-gray-background);
  --button-hover-background: var(--button-gray-hover);
  --button-hover-color: var(--button-gray-foreground);
  --button-hover-border: var(--button-gray-hover);
  --button-active-background: var(--button-gray-active);
}
:where(.ereg-button[data-button-variant="gray-outline"]) {
  --button-background: var(--button-gray-outline-background);
  --button-color: var(--button-gray-outline-foreground);
  --button-border: var(--button-gray-outline-border);
  --button-hover-background: var(--button-gray-background);
  --button-hover-color: var(--button-gray-foreground);
  --button-hover-border: var(--button-gray-background);
  --button-active-background: var(--button-gray-active);
}


/* Match Bootstrap’s anchor background priority without blocking country overrides. */
a:where(.ereg-button[data-button-variant="gray-ghost"]) { background-color: var(--button-current-background); }
:where(.ereg-button[data-button-variant="gray-ghost"]) {
  --button-background: var(--button-gray-ghost-background);
  --button-color: var(--button-gray-ghost-foreground);
  --button-border: transparent;
  --button-hover-background: var(--button-gray-ghost-hover);
  --button-hover-color: var(--button-gray-ghost-foreground);
  --button-hover-border: transparent;
  --button-active-background: var(--button-gray-ghost-active);
}

:where(.ereg-button[data-button-variant="white"]) {
  --button-background: var(--button-white-background);
  --button-color: var(--button-white-foreground);
  --button-border: transparent;
  --button-hover-background: var(--button-white-hover);
  --button-hover-color: var(--button-white-foreground);
  --button-hover-border: transparent;
  --button-active-background: var(--button-white-active);
}

.ereg-button:hover:where(:not(:disabled):not(.disabled):not([aria-disabled="true"])),
.ereg-button:focus-visible:where(:not(:disabled):not(.disabled):not([aria-disabled="true"])) {
  --button-current-background: var(--button-hover-background);
  --button-current-color: var(--button-hover-color);
  --button-current-border: var(--button-hover-border);
}
.ereg-button:active:where(:not(:disabled):not(.disabled):not([aria-disabled="true"])),
.ereg-button:where(.active, [aria-pressed="true"], [aria-selected="true"]) {
  --button-current-background: var(--button-active-background);
  --button-current-color: var(--button-active-color);
}
.ereg-button:focus-visible {
  --button-outline: 2px solid var(--button-focus-ring);
  outline: var(--button-outline);
  outline-offset: 3px;
}
.ereg-button:disabled,
.ereg-button[aria-disabled="true"],
.ereg-button.disabled {
  --button-opacity: .45;
  opacity: var(--button-opacity);
  cursor: not-allowed;
}
.ereg-button[aria-busy="true"] { cursor: progress; }
.ereg-button:where([data-button-icon]) {
  width: var(--button-height);
  height: var(--button-height);
  min-width: var(--button-height);
  --button-padding: 0;
  --button-padding-x: 0;
  --button-padding-y: 0;
  padding: 0;
  flex-shrink: 0;
}
.ereg-button:where([data-button-icon]) > :where(i, span) {
  font-size: var(--button-icon-size);
}
.ereg-button:where(.navbar-toggle) { flex-direction: column; gap: 0; }
@media (max-width: 767.98px), (pointer: coarse) {
  :where(.ereg-button) { --button-height: max(44px, var(--button-size-height)); }
}
/* Give the secondary outline action a readable surface on the coral banner. */
:where(.online-container.apply .ereg-button[data-button-variant="secondary-outline"]) {
  --button-secondary-outline-background: var(--gray-0);
}
@media (max-width: 767.98px) {
  .online-container:where(.apply) {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .online-container .apply-btn:where(.ereg-button[data-button-variant="secondary-outline"]) {
    margin-inline-start: 0;
    flex-shrink: 0;
  }
}
/* Keep the compact white procedure actions and their responsive icon layout. */
.history-actions .step-actions a.icon:where(.ereg-button) {
  width: var(--button-height);
  height: var(--button-height);
  padding: 0;
}
@media (max-width: 767.98px) {
  :where(.procedure-actions) .history-actions .step-actions a.contact:where(.ereg-button) {
    --button-padding: 0;
    width: var(--button-height);
    min-width: var(--button-height);
    flex-shrink: 0;
  }
}
@media (prefers-reduced-motion: reduce) { :where(.ereg-button) { transition: none; } }
/* A country's generic link colour (a, a:hover, often body a:hover with !important) must not repaint the text of a
   filled or outline button, where it can match the fill: that text follows the --button-* variables, which a country
   sets to change it. White and ghost buttons keep their own text rules. */
html body .ereg-button:where([data-button-variant="primary"], [data-button-variant="primary-outline"],
  [data-button-variant="secondary"], [data-button-variant="secondary-outline"], [data-button-variant="gray"],
  [data-button-variant="gray-outline"]),
html body .ereg-button:where([data-button-variant="primary"], [data-button-variant="primary-outline"],
  [data-button-variant="secondary"], [data-button-variant="secondary-outline"], [data-button-variant="gray"],
  [data-button-variant="gray-outline"]):is(:link, :visited, :hover, :focus, :focus-visible, :active) {
  color: var(--button-current-color) !important;
}