/* Generated from design-system/web/paynila-bootstrap.css. Do not edit this output directly. */
/*
 * Paynila mappings for the locally vendored Bootstrap 5.3.3 baseline.
 * Keep this layer after Bootstrap and before host legacy CSS.
 */

:root,
[data-bs-theme="light"] {
  --bs-font-sans-serif: var(--pn-font-family-ui);
  --bs-body-font-family: var(--pn-font-family-ui);
  --bs-body-font-size: var(--pn-font-role-body-size);
  --bs-body-line-height: 1.5;
  --bs-body-color: var(--pn-color-text-primary);
  --bs-body-bg: var(--pn-color-surface-page);
  --bs-emphasis-color: var(--pn-color-neutral-950);
  --bs-secondary-color: var(--pn-color-text-secondary);
  --bs-tertiary-color: var(--pn-color-text-muted);
  --bs-secondary-bg: var(--pn-color-surface-secondary);
  --bs-tertiary-bg: var(--pn-color-surface-hover);
  --bs-primary: var(--pn-color-action-primary);
  --bs-primary-rgb: 25, 107, 116;
  --bs-secondary: var(--pn-color-neutral-700);
  --bs-secondary-rgb: 65, 81, 88;
  --bs-success: var(--pn-color-status-success-default);
  --bs-success-rgb: 47, 107, 79;
  --bs-info: var(--pn-color-status-information-default);
  --bs-info-rgb: 58, 111, 143;
  --bs-warning: var(--pn-color-status-warning-default);
  --bs-warning-rgb: 168, 114, 36;
  --bs-danger: var(--pn-color-status-error-default);
  --bs-danger-rgb: 179, 79, 76;
  --bs-light: var(--pn-color-neutral-50);
  --bs-light-rgb: 246, 245, 242;
  --bs-dark: var(--pn-color-neutral-900);
  --bs-dark-rgb: 23, 33, 38;
  --bs-border-color: var(--pn-color-border-default);
  --bs-border-color-translucent: rgb(215 222 219 / 65%);
  --bs-border-radius: var(--pn-radius-md);
  --bs-border-radius-sm: var(--pn-radius-sm);
  --bs-border-radius-lg: var(--pn-radius-lg);
  --bs-border-radius-xl: var(--pn-radius-xl);
  --bs-border-radius-xxl: var(--pn-radius-xl);
  --bs-border-radius-pill: var(--pn-radius-full);
  --bs-box-shadow: var(--pn-elevation-2);
  --bs-box-shadow-sm: var(--pn-elevation-1);
  --bs-box-shadow-lg: var(--pn-elevation-3);
  --bs-focus-ring-width: var(--pn-focus-ring-spread);
  --bs-focus-ring-opacity: 1;
  --bs-focus-ring-color: var(--pn-color-focus-ring);
  --bs-link-color: var(--pn-color-text-link);
  --bs-link-color-rgb: 21, 92, 100;
  --bs-link-hover-color: var(--pn-color-text-link-hover);
  --bs-link-hover-color-rgb: 16, 75, 82;
  --bs-highlight-color: var(--pn-color-text-primary);
  --bs-highlight-bg: var(--pn-color-surface-selected);
}

body {
  color: var(--pn-color-text-primary);
  background-color: var(--pn-color-surface-page);
  font-family: var(--pn-font-family-ui);
  font-size: var(--pn-font-role-body-size);
  line-height: var(--pn-font-role-body-line-height);
  letter-spacing: var(--pn-font-letter-spacing-default);
}

h1,
.h1 {
  font-size: var(--pn-font-role-page-title-size);
  font-weight: var(--pn-font-role-page-title-weight);
  line-height: var(--pn-font-role-page-title-line-height);
}

h2,
.h2 {
  font-size: var(--pn-font-size-heading-sm);
  font-weight: var(--pn-font-weight-semibold);
  line-height: var(--pn-font-line-height-heading-sm);
}

h3,
.h3 {
  font-size: var(--pn-font-size-text-lg);
  font-weight: var(--pn-font-weight-semibold);
  line-height: var(--pn-font-line-height-text-lg);
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
  color: var(--pn-color-text-primary);
  font-weight: var(--pn-font-weight-semibold);
}

a {
  color: var(--pn-color-text-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

a:hover {
  color: var(--pn-color-text-link-hover);
}

.btn {
  --bs-btn-font-family: var(--pn-font-family-ui);
  --bs-btn-font-size: var(--pn-font-role-button-size);
  --bs-btn-font-weight: var(--pn-font-role-button-weight);
  --bs-btn-line-height: var(--pn-font-role-button-line-height);
  --bs-btn-border-radius: var(--pn-radius-control);
  --bs-btn-padding-x: var(--pn-space-4);
  --bs-btn-padding-y: calc((var(--pn-size-control-default) - var(--pn-font-role-button-line-height) - 2px) / 2);
  min-block-size: var(--pn-size-control-default);
  box-shadow: none;
  transition-duration: var(--pn-motion-duration-fast);
  transition-timing-function: var(--pn-motion-ease-standard);
}

.btn-primary {
  --bs-btn-color: var(--pn-color-action-on-primary);
  --bs-btn-bg: var(--pn-color-action-primary);
  --bs-btn-border-color: var(--pn-color-action-primary);
  --bs-btn-hover-color: var(--pn-color-action-on-primary);
  --bs-btn-hover-bg: var(--pn-color-action-primary-hover);
  --bs-btn-hover-border-color: var(--pn-color-action-primary-hover);
  --bs-btn-focus-shadow-rgb: 25, 107, 116;
  --bs-btn-active-color: var(--pn-color-action-on-primary);
  --bs-btn-active-bg: var(--pn-color-action-primary-active);
  --bs-btn-active-border-color: var(--pn-color-action-primary-active);
  --bs-btn-disabled-color: var(--pn-color-text-disabled);
  --bs-btn-disabled-bg: var(--pn-color-surface-disabled);
  --bs-btn-disabled-border-color: var(--pn-color-border-disabled);
}

.btn-secondary {
  --bs-btn-color: var(--pn-color-text-primary);
  --bs-btn-bg: var(--pn-color-action-secondary);
  --bs-btn-border-color: var(--pn-color-border-strong);
  --bs-btn-hover-color: var(--pn-color-text-primary);
  --bs-btn-hover-bg: var(--pn-color-action-secondary-hover);
  --bs-btn-hover-border-color: var(--pn-color-border-strong);
  --bs-btn-focus-shadow-rgb: 25, 107, 116;
  --bs-btn-active-color: var(--pn-color-text-primary);
  --bs-btn-active-bg: var(--pn-color-surface-selected);
  --bs-btn-active-border-color: var(--pn-color-border-interactive);
  --bs-btn-disabled-color: var(--pn-color-text-disabled);
  --bs-btn-disabled-bg: var(--pn-color-surface-disabled);
  --bs-btn-disabled-border-color: var(--pn-color-border-disabled);
}

.btn-outline-primary {
  --bs-btn-color: var(--pn-color-text-link);
  --bs-btn-border-color: var(--pn-color-action-primary);
  --bs-btn-hover-color: var(--pn-color-action-on-primary);
  --bs-btn-hover-bg: var(--pn-color-action-primary-hover);
  --bs-btn-hover-border-color: var(--pn-color-action-primary-hover);
  --bs-btn-active-color: var(--pn-color-action-on-primary);
  --bs-btn-active-bg: var(--pn-color-action-primary-active);
  --bs-btn-active-border-color: var(--pn-color-action-primary-active);
  --bs-btn-disabled-color: var(--pn-color-text-disabled);
  --bs-btn-disabled-border-color: var(--pn-color-border-disabled);
}

.btn-outline-secondary {
  --bs-btn-color: var(--pn-color-text-secondary);
  --bs-btn-border-color: var(--pn-color-border-strong);
  --bs-btn-hover-color: var(--pn-color-text-primary);
  --bs-btn-hover-bg: var(--pn-color-surface-secondary);
  --bs-btn-hover-border-color: var(--pn-color-border-strong);
  --bs-btn-active-color: var(--pn-color-text-primary);
  --bs-btn-active-bg: var(--pn-color-surface-selected);
  --bs-btn-active-border-color: var(--pn-color-border-interactive);
  --bs-btn-disabled-color: var(--pn-color-text-disabled);
  --bs-btn-disabled-border-color: var(--pn-color-border-disabled);
}

.btn-danger,
.btn-outline-danger {
  --bs-btn-focus-shadow-rgb: 179, 79, 76;
}

.btn-danger {
  --bs-btn-color: var(--pn-color-white);
  --bs-btn-bg: var(--pn-color-action-destructive);
  --bs-btn-border-color: var(--pn-color-action-destructive);
  --bs-btn-hover-color: var(--pn-color-white);
  --bs-btn-hover-bg: var(--pn-color-action-destructive-hover);
  --bs-btn-hover-border-color: var(--pn-color-action-destructive-hover);
  --bs-btn-active-color: var(--pn-color-white);
  --bs-btn-active-bg: var(--pn-color-status-error-strong);
  --bs-btn-active-border-color: var(--pn-color-status-error-strong);
  --bs-btn-disabled-color: var(--pn-color-text-disabled);
  --bs-btn-disabled-bg: var(--pn-color-surface-disabled);
  --bs-btn-disabled-border-color: var(--pn-color-border-disabled);
}

.btn-outline-danger {
  --bs-btn-color: var(--pn-color-status-error-strong);
  --bs-btn-border-color: var(--pn-color-status-error-default);
  --bs-btn-hover-color: var(--pn-color-white);
  --bs-btn-hover-bg: var(--pn-color-status-error-default);
  --bs-btn-hover-border-color: var(--pn-color-status-error-default);
  --bs-btn-active-color: var(--pn-color-white);
  --bs-btn-active-bg: var(--pn-color-status-error-strong);
  --bs-btn-active-border-color: var(--pn-color-status-error-strong);
  --bs-btn-disabled-color: var(--pn-color-text-disabled);
  --bs-btn-disabled-border-color: var(--pn-color-border-disabled);
}

.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
  cursor: not-allowed;
  opacity: 1;
}

.form-control,
.form-select {
  min-block-size: var(--pn-size-control-default);
  color: var(--pn-color-text-primary);
  background-color: var(--pn-color-surface-primary);
  border-color: var(--pn-color-border-input);
  border-radius: var(--pn-radius-control);
  box-shadow: none;
  transition-duration: var(--pn-motion-duration-fast);
  transition-timing-function: var(--pn-motion-ease-standard);
}

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
  border-color: var(--pn-color-border-input-hover);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--pn-color-border-focus);
  box-shadow: 0 0 0 var(--pn-focus-ring-spread) var(--pn-color-focus-ring);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  color: var(--pn-color-text-disabled);
  background-color: var(--pn-color-surface-disabled);
  border-color: var(--pn-color-border-disabled);
  opacity: 1;
}

.form-check-input:checked {
  background-color: var(--pn-color-action-primary);
  border-color: var(--pn-color-action-primary);
}

.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
  border-color: var(--pn-color-status-error-default);
}

.invalid-feedback,
.invalid-tooltip {
  color: var(--pn-color-status-error-strong);
}

.form-control.is-valid,
.form-select.is-valid,
.was-validated .form-control:valid,
.was-validated .form-select:valid {
  border-color: var(--pn-color-status-success-default);
}

.valid-feedback,
.valid-tooltip {
  color: var(--pn-color-status-success-strong);
}

.alert {
  --bs-alert-border-radius: var(--pn-radius-md);
  border-width: var(--pn-border-width);
  box-shadow: none;
}

.alert-success {
  --bs-alert-color: var(--pn-color-status-success-strong);
  --bs-alert-bg: var(--pn-color-status-success-light);
  --bs-alert-border-color: var(--pn-color-status-success-default);
}

.alert-warning {
  --bs-alert-color: var(--pn-color-status-warning-strong);
  --bs-alert-bg: var(--pn-color-status-warning-light);
  --bs-alert-border-color: var(--pn-color-status-warning-default);
}

.alert-danger {
  --bs-alert-color: var(--pn-color-status-error-strong);
  --bs-alert-bg: var(--pn-color-status-error-light);
  --bs-alert-border-color: var(--pn-color-status-error-default);
}

.alert-info {
  --bs-alert-color: var(--pn-color-status-information-strong);
  --bs-alert-bg: var(--pn-color-status-information-light);
  --bs-alert-border-color: var(--pn-color-status-information-default);
}

.alert-secondary {
  --bs-alert-color: var(--pn-color-status-neutral-strong);
  --bs-alert-bg: var(--pn-color-status-neutral-light);
  --bs-alert-border-color: var(--pn-color-border-default);
}

.badge {
  border-radius: var(--pn-radius-full);
  font-size: var(--pn-font-role-caption-size);
  font-weight: var(--pn-font-weight-medium);
  line-height: var(--pn-font-role-caption-line-height);
}

.card {
  --bs-card-color: var(--pn-color-text-primary);
  --bs-card-bg: var(--pn-color-surface-primary);
  --bs-card-border-color: var(--pn-color-border-default);
  --bs-card-border-radius: var(--pn-radius-card);
  --bs-card-box-shadow: var(--pn-elevation-0);
}

.table {
  --bs-table-color: var(--pn-color-text-primary);
  --bs-table-bg: var(--pn-color-surface-primary);
  --bs-table-border-color: var(--pn-color-border-default);
  --bs-table-striped-bg: var(--pn-color-surface-secondary);
  --bs-table-striped-color: var(--pn-color-text-primary);
  --bs-table-hover-bg: var(--pn-color-surface-hover);
  --bs-table-hover-color: var(--pn-color-text-primary);
  --bs-table-active-bg: var(--pn-color-surface-selected-row);
  --bs-table-active-color: var(--pn-color-text-primary);
  font-size: var(--pn-font-role-table-size);
  line-height: var(--pn-font-role-table-line-height);
  font-variant-numeric: tabular-nums;
}

.table > thead {
  color: var(--pn-color-text-secondary);
  background-color: var(--pn-color-surface-page);
}

.modal-content,
.offcanvas,
.dropdown-menu {
  color: var(--pn-color-text-primary);
  background-color: var(--pn-color-surface-overlay);
  border-color: var(--pn-color-border-default);
}

.modal-content {
  border-radius: var(--pn-radius-dialog);
  box-shadow: var(--pn-elevation-3);
}

.modal-backdrop {
  --bs-backdrop-bg: var(--pn-color-brand-anchor);
  --bs-backdrop-opacity: 0.4;
}

.offcanvas {
  --bs-offcanvas-border-color: var(--pn-color-border-default);
  --bs-offcanvas-box-shadow: var(--pn-elevation-3);
}

.offcanvas-backdrop {
  background-color: var(--pn-color-brand-anchor);
}

.dropdown-menu {
  --bs-dropdown-color: var(--pn-color-text-primary);
  --bs-dropdown-bg: var(--pn-color-surface-overlay);
  --bs-dropdown-border-color: var(--pn-color-border-default);
  --bs-dropdown-border-radius: var(--pn-radius-md);
  --bs-dropdown-box-shadow: var(--pn-elevation-2);
  --bs-dropdown-link-color: var(--pn-color-text-primary);
  --bs-dropdown-link-hover-color: var(--pn-color-text-primary);
  --bs-dropdown-link-hover-bg: var(--pn-color-surface-hover);
  --bs-dropdown-link-active-color: var(--pn-color-text-primary);
  --bs-dropdown-link-active-bg: var(--pn-color-surface-selected);
  --bs-dropdown-link-disabled-color: var(--pn-color-text-disabled);
}

.nav {
  --bs-nav-link-color: var(--pn-color-text-link);
  --bs-nav-link-hover-color: var(--pn-color-text-link-hover);
  --bs-nav-link-disabled-color: var(--pn-color-text-disabled);
}

.nav-tabs {
  --bs-nav-tabs-border-color: var(--pn-color-border-default);
  --bs-nav-tabs-link-hover-border-color: var(--pn-color-border-subtle) var(--pn-color-border-subtle) var(--pn-color-border-default);
  --bs-nav-tabs-link-active-color: var(--pn-color-text-primary);
  --bs-nav-tabs-link-active-bg: var(--pn-color-surface-primary);
  --bs-nav-tabs-link-active-border-color: var(--pn-color-border-default) var(--pn-color-border-default) var(--pn-color-surface-primary);
}

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--pn-color-text-muted);
  --bs-breadcrumb-item-active-color: var(--pn-color-text-secondary);
}

.pagination {
  --bs-pagination-color: var(--pn-color-text-link);
  --bs-pagination-bg: var(--pn-color-surface-primary);
  --bs-pagination-border-color: var(--pn-color-border-default);
  --bs-pagination-hover-color: var(--pn-color-text-link-hover);
  --bs-pagination-hover-bg: var(--pn-color-surface-hover);
  --bs-pagination-hover-border-color: var(--pn-color-border-strong);
  --bs-pagination-focus-color: var(--pn-color-text-link-hover);
  --bs-pagination-focus-bg: var(--pn-color-surface-selected);
  --bs-pagination-focus-box-shadow: 0 0 0 var(--pn-focus-ring-spread) var(--pn-color-focus-ring);
  --bs-pagination-active-color: var(--pn-color-action-on-primary);
  --bs-pagination-active-bg: var(--pn-color-action-primary);
  --bs-pagination-active-border-color: var(--pn-color-action-primary);
  --bs-pagination-disabled-color: var(--pn-color-text-disabled);
  --bs-pagination-disabled-bg: var(--pn-color-surface-disabled);
  --bs-pagination-disabled-border-color: var(--pn-color-border-disabled);
}

.spinner-border,
.spinner-grow {
  color: var(--pn-color-action-primary);
}

.progress {
  --bs-progress-bg: var(--pn-color-surface-secondary);
  --bs-progress-border-radius: var(--pn-radius-full);
  --bs-progress-box-shadow: none;
}

.progress-bar {
  background-color: var(--pn-color-action-primary);
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.page-link:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible {
  outline: var(--pn-focus-ring-width) solid var(--pn-color-focus-default);
  outline-offset: var(--pn-focus-ring-offset);
  box-shadow: 0 0 0 var(--pn-focus-ring-spread) var(--pn-color-focus-ring);
}