/* WaitlistPlus — Familiar & refined | Bootstrap 5.3.x
 * Load AFTER Bootstrap and existing site CSS. No JavaScript or Sass required.
 * Optional application classes are prefixed wlp-. See theme README.
 * Manrope must be loaded separately; system fonts are the fallback.
 */

@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope/manrope-variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

/* 1. Brand and Bootstrap tokens (light is the default). */
:root,
[data-bs-theme="light"] {
  /* Single source for the brand color. Per-customer themes only need to override these two. */
  --wlp-primary: #3f729b;
  --wlp-primary-rgb: 63, 114, 155;
  --wlp-on-primary: #ffffff;
  /* brand color when used as text or an outline; per-customer themes darken it until it meets 4.5:1 on the page */
  --wlp-primary-text: var(--wlp-primary);
  --wlp-primary-text-rgb: var(--wlp-primary-rgb);
  --wlp-blue: var(--wlp-primary);
  --wlp-blue-hover: color-mix(in srgb, var(--wlp-primary), black 15%);
  --wlp-blue-active: color-mix(in srgb, var(--wlp-primary), black 25%);
  --wlp-focus-border: color-mix(in srgb, var(--wlp-primary), white 35%);
  --wlp-surface: #ffffff;
  --wlp-soft: color-mix(in srgb, var(--wlp-primary), white 90%);
  --wlp-muted: #56687a; /* 5.3:1 on the page background, 5.7:1 on white */
  --wlp-heading: #172d40;
  --wlp-border: #dfe7ed; /* decorative dividers only */
  --wlp-field-border: #7a8e9e; /* form control outlines need 3:1 (WCAG 1.4.11) */
  --wlp-focus: rgba(var(--wlp-primary-rgb), .25);
  --wlp-success-bg: #e9f4ee;
  --wlp-success-text: #28694f;
  --wlp-tour-bg: #f1ebf7;
  --wlp-tour-text: #745293;
  --wlp-required-bg: #fff4da;
  --wlp-required-text: #885c16;
  --bs-primary: var(--wlp-primary);
  --bs-primary-rgb: var(--wlp-primary-rgb);
  --bs-primary-text-emphasis: color-mix(in srgb, var(--wlp-primary), black 40%);
  --bs-primary-bg-subtle: var(--wlp-soft);
  --bs-primary-border-subtle: color-mix(in srgb, var(--wlp-primary), white 70%);
  --bs-font-sans-serif: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: .875rem;
  --bs-body-line-height: 1.6;
  --bs-body-color: #172d40;
  --bs-body-color-rgb: 23, 45, 64;
  --bs-body-bg: #f3f6f8;
  --bs-body-bg-rgb: 243, 246, 248;
  --bs-emphasis-color: #172d40;
  --bs-emphasis-color-rgb: 23, 45, 64;
  --bs-heading-color: #172d40;
  --bs-secondary-color: #56687a;
  --bs-secondary-color-rgb: 86, 104, 122;
  --bs-secondary-bg: #eaf1f6;
  --bs-secondary-bg-rgb: 234, 241, 246;
  --bs-tertiary-bg: #f3f6f8;
  --bs-tertiary-bg-rgb: 243, 246, 248;
  --bs-link-color: var(--wlp-primary-text);
  --bs-link-color-rgb: var(--wlp-primary-text-rgb);
  --bs-link-hover-color: var(--wlp-blue-active);
  --bs-link-hover-color-rgb: 44, 82, 111;
  --bs-border-color: #dfe7ed;
  --bs-border-color-translucent: rgba(23, 45, 64, .12);
  --bs-border-radius: .5rem;
  --bs-border-radius-sm: .375rem;
  --bs-border-radius-lg: .75rem;
  --bs-border-radius-xl: 1rem;
  --bs-focus-ring-color: var(--wlp-focus);
  --bs-box-shadow: 0 .5rem 1.5rem rgba(23, 45, 64, .08);
  --bs-box-shadow-sm: 0 .125rem .25rem rgba(23, 45, 64, .04);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(23, 45, 64, .12);
}

/* Opt into dark mode using Bootstrap's data-bs-theme="dark". */
[data-bs-theme="dark"] {
  --wlp-surface: #192d3d;
  --wlp-soft: #284457;
  --wlp-muted: #a2b3c1;
  --wlp-heading: #e6edf3;
  --wlp-border: #304352;
  --wlp-field-border: #6d8597;
  --wlp-focus: rgba(130, 182, 221, .3);
  --wlp-success-bg: #244b3b;
  --wlp-success-text: #a5ddbf;
  --wlp-tour-bg: #463654;
  --wlp-tour-text: #d8bfed;
  --wlp-required-bg: #4d4024;
  --wlp-required-text: #eed097;
  --bs-primary: var(--wlp-primary);
  --bs-primary-rgb: var(--wlp-primary-rgb);
  --bs-primary-text-emphasis: #b1d1e8;
  --bs-primary-bg-subtle: #284457;
  --bs-primary-border-subtle: #496b83;
  --bs-body-color: #e6edf3;
  --bs-body-color-rgb: 230, 237, 243;
  --bs-body-bg: #122330;
  --bs-body-bg-rgb: 18, 35, 48;
  --bs-emphasis-color: #e6edf3;
  --bs-emphasis-color-rgb: 230, 237, 243;
  --bs-heading-color: #e6edf3;
  --bs-secondary-color: #a2b3c1;
  --bs-secondary-color-rgb: 162, 179, 193;
  --bs-secondary-bg: #284457;
  --bs-secondary-bg-rgb: 40, 68, 87;
  --bs-tertiary-bg: #122330;
  --bs-tertiary-bg-rgb: 18, 35, 48;
  --bs-link-color: #a2c9e6;
  --bs-link-color-rgb: 162, 201, 230;
  --bs-link-hover-color: #c8e2f5;
  --bs-link-hover-color-rgb: 200, 226, 245;
  --bs-border-color: #304352;
  --bs-border-color-translucent: rgba(230, 237, 243, .14);
  --bs-focus-ring-color: rgba(130, 182, 221, .3);
}

/* 2. Typography. Utility classes can still override these defaults. */
body { font-family: var(--bs-body-font-family); }
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--bs-heading-color);
  line-height: 1.3;
}
h1, h2 { letter-spacing: -.035em; }
.form-label { font-size: .8125rem; font-weight: 600; margin-bottom: .4375rem; }
.form-text { color: var(--wlp-muted); font-size: .75rem; line-height: 1.6; }

/* 3. Buttons: Bootstrap component variables must be set explicitly. */
.btn {
  --bs-btn-font-size: .8125rem;
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: .875rem;
  --bs-btn-padding-y: .5625rem;
  --bs-btn-border-radius: .5rem;
  --bs-btn-focus-shadow-rgb: var(--wlp-primary-rgb);
}
.btn-sm { --bs-btn-font-size: .75rem; --bs-btn-padding-x: .625rem; --bs-btn-padding-y: .375rem; }
.btn-lg { --bs-btn-font-size: 1rem; --bs-btn-padding-x: 1.25rem; --bs-btn-padding-y: .75rem; }
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--wlp-blue);
  --bs-btn-border-color: var(--wlp-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--wlp-blue-hover);
  --bs-btn-hover-border-color: var(--wlp-blue-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--wlp-blue-active);
  --bs-btn-active-border-color: var(--wlp-blue-active);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--wlp-blue);
  --bs-btn-disabled-border-color: var(--wlp-blue);
}
.btn-outline-primary {
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-border-color: var(--wlp-primary-text);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--wlp-blue);
  --bs-btn-hover-border-color: var(--wlp-blue);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--wlp-blue-active);
  --bs-btn-active-border-color: var(--wlp-blue-active);
  --bs-btn-disabled-color: var(--bs-link-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--wlp-primary-text);
}
/* Quiet secondary actions, matching the previews. */
.btn-secondary, .btn-outline-secondary, .btn-light, .wlp-btn-quiet {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: var(--wlp-surface);
  --bs-btn-border-color: var(--wlp-border);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: var(--wlp-soft);
  --bs-btn-hover-border-color: var(--wlp-border);
  --bs-btn-active-color: var(--bs-body-color);
  --bs-btn-active-bg: var(--wlp-soft);
  --bs-btn-active-border-color: var(--wlp-blue);
  --bs-btn-disabled-color: var(--wlp-muted);
  --bs-btn-disabled-bg: var(--wlp-surface);
  --bs-btn-disabled-border-color: var(--wlp-border);
}
.btn-link { --bs-btn-color: var(--bs-link-color); --bs-btn-hover-color: var(--bs-link-hover-color); }
/* Danger, success, warning and info buttons retain Bootstrap semantics. */

/* 4. Forms: retain Bootstrap validation and disabled/read-only behavior. */
.form-control, .form-select {
  background-color: var(--wlp-surface);
  border-color: var(--wlp-field-border);
  color: var(--bs-body-color);
  border-radius: .5rem;
  font-size: .875rem;
  padding-top: .625rem;
  padding-bottom: .625rem;
}
.form-control-sm, .form-select-sm { font-size: .8125rem; padding-top: .375rem; padding-bottom: .375rem; }
.form-control-lg, .form-select-lg { font-size: 1rem; padding-top: .75rem; padding-bottom: .75rem; }
.form-control::placeholder { color: var(--wlp-muted); opacity: .85; }
.form-control:focus:where(:not(.is-invalid):not(.is-valid)),
.form-select:focus:where(:not(.is-invalid):not(.is-valid)) {
  background-color: var(--wlp-surface);
  color: var(--bs-body-color);
  border-color: var(--wlp-focus-border);
  box-shadow: 0 0 0 .25rem var(--wlp-focus);
}
.form-control:disabled, .form-select:disabled { background-color: var(--bs-secondary-bg); opacity: 1; }
.form-check-input { border-color: var(--wlp-field-border); }
.form-check-input:checked { background-color: var(--wlp-blue); border-color: var(--wlp-blue); }
.form-check-input:focus {
    border-color: var(--wlp-focus-border);
    box-shadow: 0 0 0 .25rem var(--wlp-focus);
}
.input-group-text { background: var(--bs-tertiary-bg); border-color: var(--wlp-field-border); color: var(--wlp-muted); font-size: .8125rem; }
/* Do not set form-select background shorthand: Bootstrap's arrow stays intact. */

/* 5. Panels and tables. */
.card {
  --bs-card-bg: var(--wlp-surface);
  --bs-card-color: var(--bs-body-color);
  --bs-card-border-color: var(--wlp-border);
  --bs-card-border-radius: .75rem;
  --bs-card-inner-border-radius: calc(.75rem - 1px);
  --bs-card-spacer-x: 1.25rem;
  --bs-card-spacer-y: 1.25rem;
  --bs-card-cap-bg: var(--wlp-surface);
  --bs-card-cap-color: var(--bs-body-color);
  --bs-card-cap-padding-x: 1.25rem;
  --bs-card-cap-padding-y: 1rem;
  box-shadow: none;
}
.card-header { font-weight: 700; }
.card-header > :last-child, .card-title:last-child { margin-bottom: 0; }
.table:where(:not(.table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light, .table-dark)) {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: var(--wlp-surface);
  --bs-table-border-color: var(--wlp-border);
  --bs-table-striped-bg: var(--bs-tertiary-bg);
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-hover-bg: var(--wlp-soft);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-active-bg: var(--wlp-soft);
  --bs-table-active-color: var(--bs-body-color);
  font-size: .8125rem;
  vertical-align: middle;
}
.table > :not(caption) > * > * { padding: .875rem .75rem; }
.table-sm > :not(caption) > * > * { padding: .5rem .625rem; }
.table > thead {
  --bs-table-bg: var(--bs-tertiary-bg);
  --bs-table-color: var(--wlp-muted);
  font-size: .75rem;
  font-weight: 600;
}
.table > thead th { font-weight: 600; }

/* 6. Navigation, menus and dialogs. */
.nav {
  --bs-nav-link-color: var(--wlp-muted);
  --bs-nav-link-hover-color: var(--bs-body-color);
  --bs-nav-link-font-weight: 600;
  --bs-nav-link-padding-x: .875rem;
  --bs-nav-link-padding-y: .625rem;
}
.nav-pills {
  --bs-nav-pills-border-radius: .5rem;
  --bs-nav-pills-link-active-color: var(--bs-body-color);
  --bs-nav-pills-link-active-bg: var(--wlp-soft);
  gap: .375rem;
}
.nav-tabs {
  --bs-nav-tabs-border-color: var(--wlp-border);
  --bs-nav-tabs-link-hover-border-color: transparent transparent var(--wlp-border);
  --bs-nav-tabs-link-active-color: var(--bs-body-color);
  --bs-nav-tabs-link-active-bg: var(--wlp-surface);
  --bs-nav-tabs-link-active-border-color: var(--wlp-border) var(--wlp-border) var(--wlp-surface);
}
.dropdown-menu {
  --bs-dropdown-bg: var(--wlp-surface);
  --bs-dropdown-color: var(--bs-body-color);
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-color: var(--bs-body-color);
  --bs-dropdown-link-hover-bg: var(--wlp-soft);
  --bs-dropdown-link-active-color: var(--bs-body-color);
  --bs-dropdown-link-active-bg: var(--wlp-soft);
  --bs-dropdown-border-color: var(--wlp-border);
  --bs-dropdown-border-radius: .75rem;
  --bs-dropdown-item-padding-y: .5rem;
  --bs-dropdown-font-size: .8125rem;
  box-shadow: var(--bs-box-shadow);
}
.list-group {
  --bs-list-group-bg: var(--wlp-surface);
  --bs-list-group-color: var(--bs-body-color);
  --bs-list-group-border-color: var(--wlp-border);
  --bs-list-group-action-color: var(--bs-body-color);
  --bs-list-group-action-hover-bg: var(--wlp-soft);
  --bs-list-group-action-hover-color: var(--bs-body-color);
  --bs-list-group-active-bg: var(--wlp-soft);
  --bs-list-group-active-color: var(--bs-body-color);
  --bs-list-group-active-border-color: var(--wlp-border);
}
.accordion {
  --bs-accordion-bg: var(--wlp-surface);
  --bs-accordion-color: var(--bs-body-color);
  --bs-accordion-btn-color: var(--bs-body-color);
  --bs-accordion-btn-bg: var(--wlp-surface);
  --bs-accordion-active-color: var(--bs-body-color);
  --bs-accordion-active-bg: var(--wlp-soft);
  --bs-accordion-border-color: var(--wlp-border);
  --bs-accordion-border-radius: .75rem;
  --bs-accordion-inner-border-radius: calc(.75rem - 1px);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem var(--wlp-focus);
}
.modal {
  --bs-modal-bg: var(--wlp-surface);
  --bs-modal-color: var(--bs-body-color);
  --bs-modal-border-color: var(--wlp-border);
  --bs-modal-border-radius: .875rem;
  --bs-modal-header-border-color: var(--wlp-border);
  --bs-modal-footer-border-color: var(--wlp-border);
}
.offcanvas { --bs-offcanvas-bg: var(--wlp-surface); --bs-offcanvas-color: var(--bs-body-color); }
.pagination {
  --bs-pagination-color: var(--bs-link-color);
  --bs-pagination-bg: var(--wlp-surface);
  --bs-pagination-border-color: var(--wlp-border);
  --bs-pagination-hover-color: var(--bs-body-color);
  --bs-pagination-hover-bg: var(--wlp-soft);
  --bs-pagination-hover-border-color: var(--wlp-border);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--wlp-blue);
  --bs-pagination-active-border-color: var(--wlp-blue);
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem var(--wlp-focus);
}
.progress { --bs-progress-bg: var(--wlp-soft); --bs-progress-bar-bg: var(--wlp-blue); }

/* 7. Optional application classes: add these to your shared layouts. */
.wlp-header {
  background: var(--wlp-surface);
  border-bottom: 1px solid var(--wlp-border);
  padding-block: .875rem;
}
.wlp-header.navbar {
  --bs-navbar-color: var(--wlp-muted);
  --bs-navbar-hover-color: var(--bs-body-color);
  --bs-navbar-active-color: var(--bs-body-color);
  --bs-navbar-brand-color: var(--bs-body-color);
  --bs-navbar-brand-hover-color: var(--bs-body-color);
  --bs-navbar-toggler-border-color: var(--wlp-border);
}
.wlp-logo { display: block; width: 163px; max-width: 100%; height: auto; }
.wlp-logo-dark { display: none; }
[data-bs-theme="dark"] .wlp-logo-light { display: none; }
[data-bs-theme="dark"] .wlp-logo-dark { display: block; }
[data-bs-theme="light"] .wlp-logo-light { display: block; }
[data-bs-theme="light"] .wlp-logo-dark { display: none; }
.wlp-org-name { margin-top: .125rem; color: var(--bs-body-color); font-size: .8125rem; font-weight: 600; min-height: 24px; display: inline-flex; align-items: center; }
.wlp-header .nav-link.active { color: var(--bs-body-color); box-shadow: inset 0 -2px 0 var(--wlp-primary); }
.wlp-header-search { width: 11rem; }
/* between lg and xl the header is tight: Add person and Settings show their icon only (text stays for screen readers) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .wlp-text-xl-up { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
  .wlp-header-search { width: 9rem; }
}
@media (max-width: 991.98px) { .wlp-header-search { width: auto; } }
.wlp-page { max-width: 1240px; margin-inline: auto; padding: 1.75rem; }
.wlp-page-title { font-size: clamp(1.5rem, 2.5vw, 1.875rem); font-weight: 800; letter-spacing: -.035em; }
.wlp-page-subtitle { color: var(--wlp-muted); margin-top: .375rem; font-size: .8125rem; }
.wlp-eyebrow { color: var(--wlp-muted); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.wlp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.wlp-settings-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.5rem; }
.wlp-settings-main { min-width: 0; }
.wlp-footer { color: var(--wlp-muted); font-size: .75rem; padding-block: 1.25rem; }
.wlp-badge { display: inline-block; padding: .35em .6em; font-size: .6875rem; font-weight: 600; line-height: 1.4; border-radius: .375rem; background: var(--wlp-soft); color: var(--bs-body-color); }
.wlp-status-waiting { background: var(--wlp-soft); color: var(--bs-body-color); }
.wlp-status-approved { background: var(--wlp-success-bg); color: var(--wlp-success-text); }
.wlp-status-tour { background: var(--wlp-tour-bg); color: var(--wlp-tour-text); }
.wlp-badge-required { background: var(--wlp-required-bg); color: var(--wlp-required-text); }
.wlp-person-link { color: var(--bs-body-color); font-weight: 700; text-decoration: none; }
.wlp-person-link:hover { color: var(--bs-link-color); text-decoration: underline; }

/* Status pills: color by status type so a list can be scanned at a glance. Text and icon still carry the meaning. */
.wlp-status-pill[data-status-type="New"] { background: color-mix(in srgb, var(--wlp-primary), var(--wlp-surface) 80%); color: var(--bs-primary-text-emphasis); border-color: transparent; }
.wlp-status-pill[data-status-type="Intermediate"] { background: var(--wlp-required-bg); color: var(--wlp-required-text); border-color: transparent; }
.wlp-status-pill[data-status-type="Complete"] { background: var(--wlp-success-bg); color: var(--wlp-success-text); border-color: transparent; }
.wlp-status-pill[data-status-type="Removed"] { background: var(--wlp-surface); color: var(--wlp-muted); border-color: var(--wlp-field-border); border-style: dashed; }

/* Toasts (showToast in site.js): quiet confirmations with an optional Undo. */
.toast-container { z-index: 1090; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important; }
.wlp-toast { --bs-toast-bg: var(--wlp-surface); --bs-toast-color: var(--bs-body-color); --bs-toast-border-color: var(--wlp-border); --bs-toast-box-shadow: var(--bs-box-shadow-lg); --bs-toast-font-size: .875rem; --bs-toast-max-width: 420px; border-left: 4px solid var(--wlp-success-text); }
.wlp-toast-success .wlp-toast-icon { color: var(--wlp-success-text); }
.wlp-toast-danger { border-left-color: var(--bs-danger); }
.wlp-toast-danger .wlp-toast-icon { color: var(--bs-danger); }
.wlp-toast-warning { border-left-color: var(--wlp-required-text); }
.wlp-toast-warning .wlp-toast-icon { color: var(--wlp-required-text); }
.wlp-toast-info { border-left-color: var(--wlp-primary); }
.wlp-toast-info .wlp-toast-icon { color: var(--wlp-primary); }
.wlp-toast-icon { width: 1.25em; height: 1.25em; }

/* Tooltips and pagination follow the theme (and per-customer brand colors). */
.tooltip { --bs-tooltip-bg: var(--bs-body-color); --bs-tooltip-color: var(--bs-body-bg); --bs-tooltip-opacity: 1; --bs-tooltip-font-size: .8125rem; }
.page-item.active .page-link { background-color: var(--wlp-blue); border-color: var(--wlp-blue); color: var(--wlp-on-primary); }

/* Customer-authored html (portal instructions) inside a padded card: drop the trailing paragraph margin. */
.wlp-rich-text > :last-child { margin-bottom: 0; }

/* Portal signup: family summary rows, list chips and the inline remove confirmation. */
.wlp-family-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem 1rem; padding-block: .875rem; }
.wlp-family-row:first-child { padding-top: 0; }
.wlp-family-row + .wlp-family-row { border-top: 1px solid var(--wlp-border); }
.wlp-chip { display: inline-flex; align-items: center; padding: .125rem .5rem; border-radius: 50rem; font-size: .75rem; font-weight: 600; background: var(--bs-tertiary-bg); color: var(--wlp-muted); border: 1px solid var(--wlp-border); }
.wlp-chip-success { background: var(--wlp-success-bg); color: var(--wlp-success-text); border-color: transparent; }
.wlp-remove-confirm { background: var(--bs-danger-bg-subtle); border-radius: var(--bs-border-radius); padding: .75rem; }

/* Customer logo in the portal header and the settings preview: capped height, width follows the image. */
.wlp-portal-logo { display: block; height: auto; width: auto; max-height: 48px; max-width: min(240px, 60vw); }

/* Portal family page: one-time confirmation after a signup (inside .alert-success). */
.wlp-done-icon { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--wlp-surface); }
.wlp-done-icon svg { width: 1rem; height: 1rem; }
.wlp-receipt-line { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .625rem; padding-top: .625rem; border-top: 1px solid var(--bs-success-border-subtle); font-variant-numeric: tabular-nums; }
.wlp-receipt-label { font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .75; margin-right: .25rem; }
.min-w-0 { min-width: 0; }

/* Portal signup review: label/value pairs, stacked on phones so long values (emails) keep the full width. */
.wlp-kv { display: grid; grid-template-columns: minmax(7rem, 38%) 1fr; gap: .375rem 1rem; margin: 0; }
.wlp-kv dt { font-weight: 400; color: var(--wlp-muted); }
.wlp-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
  .wlp-kv { grid-template-columns: 1fr; gap: 0; }
  .wlp-kv dt { font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .wlp-kv dd { margin-bottom: .5rem; }
  .wlp-kv dd:last-child { margin-bottom: 0; }
}

/* 8. Mobile sizing. Reorganizing desktop tables still needs markup changes. */
/* The settings sidebar collapses below lg, so the layout goes to one column at the same point. */
@media (max-width: 991.98px) {
  .wlp-settings-layout { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 575.98px) {
  /* icon buttons drop their visible text on phones but keep it for screen readers (see hide-text on the icon tag helpers) */
  .wlp-text-sm-up { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
  .wlp-page { padding: 1.25rem 1rem; }
  .wlp-header .wlp-logo { width: 150px; }
  .form-control, .form-select { font-size: 1rem; min-height: 44px; }
  .form-control[type="color"] { min-height: 44px; }
  .btn:not(.btn-link), .nav-link, .dropdown-item { min-height: 44px; }
  .wlp-save-mobile { width: 100%; }
}
@media (pointer: coarse) {
  .btn:not(.btn-link), .nav-link, .dropdown-item { min-height: 44px; }
}


/* The datepicker inserts its popup right after its input, so a date input at the end of an
   .input-group is no longer the last child and loses its rounded right corners. Put them back. */
.input-group > .datepicker-input:has(+ .datepicker:last-child) {
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
}

/* Datepicker (vanillajs-datepicker): its stylesheet loads after this one and uses direct
   color declarations, so these selectors are deliberately more specific. */
.datepicker .datepicker-picker {
    background: var(--wlp-surface);
    border: 1px solid var(--wlp-border);
    border-radius: 12px;
    box-shadow: var(--bs-box-shadow);
    color: var(--bs-body-color);
}

.datepicker .datepicker-picker .datepicker-header .datepicker-controls .btn {
    background-color: var(--wlp-primary);
    border-color: var(--wlp-primary);
    color: var(--wlp-on-primary);
    font-weight: 700;
}

.datepicker .datepicker-picker .datepicker-header .datepicker-controls .btn:hover {
    background-color: var(--wlp-blue-hover);
    border-color: var(--wlp-blue-hover);
}

.datepicker .datepicker-picker .datepicker-header .datepicker-controls .btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .2rem var(--wlp-focus);
}

.datepicker .datepicker-picker .datepicker-cell:not(.disabled):hover,
.datepicker .datepicker-picker .datepicker-cell.focused:not(.selected) {
    background-color: var(--wlp-soft);
}

.datepicker .datepicker-picker .datepicker-cell.selected,
.datepicker .datepicker-picker .datepicker-cell.selected:hover {
    background-color: var(--wlp-primary);
    color: var(--wlp-on-primary);
}

.datepicker .datepicker-picker .datepicker-cell.today:not(.selected) {
    box-shadow: inset 0 0 0 1px var(--wlp-primary);
}

.datepicker .datepicker-picker .datepicker-footer .btn {
    background-color: var(--wlp-primary);
    border-color: var(--wlp-primary);
    color: var(--wlp-on-primary);
}