/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: 0.25rem;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer utilities {
  .visible {
    visibility: visible;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .mb-1 {
    margin-bottom: var(--spacing);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .ml-1 {
    margin-left: var(--spacing);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }
  .ml-5 {
    margin-left: calc(var(--spacing) * 5);
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .table {
    display: table;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .line-through {
    text-decoration-line: line-through;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .select-all {
    -webkit-user-select: all;
    -moz-user-select: all;
         user-select: all;
  }
}
:root {
  --hi-focus-ring: #0d4e46;
  --hi-focus-ring-width: 2px;
  --hi-focus-ring-offset: 2px;
  --hi-button-primary-bg: #ffd800;
  --hi-button-primary-hover: #ffea00;
  --hi-button-primary-text: #2b2b2b;
  --hi-button-secondary-bg: #6c757d;
  --hi-button-secondary-hover: #5a6268;
  --hi-button-secondary-text: #ffffff;
  --hi-button-tertiary-bg: transparent;
  --hi-button-tertiary-hover: #ececec;
  --hi-button-tertiary-text: #2b2b2b;
  --hi-button-tertiary-border: #2b2b2b;
  --hi-button-warning-bg: #dc3545;
  --hi-button-warning-hover: #c82333;
  --hi-button-warning-text: #ffffff;
  --hi-button-success-bg: #4e9758;
  --hi-button-success-hover: #3d8540;
  --hi-button-success-text: #ffffff;
  --hi-button-disabled-bg: #eeeeee;
  --hi-button-disabled-text: #909090;
  --hi-button-font-family: MuseoSansRounded-700, 'MuseoSansRounded-700 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
  --hi-button-font-size: 15px;
  --hi-button-line-height: 20px;
  --hi-button-padding-x: 24px;
  --hi-button-padding-y: 6px;
  --hi-button-gap: 8px;
  --hi-button-radius: 6px;
  --hi-button-border-width: 2px;
  --hi-button-transition: all 0.2s;
  --hi-text-color-primary: #007bff;
  --hi-text-color-secondary: #6c757d;
  --hi-text-color-muted: #6c757d;
  --hi-text-color-error: #dc3545;
  --hi-text-color-success: #28a745;
  --hi-text-font-family: MuseoSansRounded-300, 'MuseoSansRounded-300 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;
  --hi-text-font-family-heading: MuseoSansRounded-700, 'MuseoSansRounded-700 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
  --hi-text-font-family-code: 'Courier New', Courier, monospace;
  --hi-text-color-base: #2b2b2b;
  --hi-text-size-h1: clamp(1.5rem, 4vw, 2rem);
  --hi-text-size-h2: clamp(1.25rem, 3.25vw, 1.625rem);
  --hi-text-size-h3: clamp(1.125rem, 2.75vw, 1.375rem);
  --hi-text-size-h4: clamp(1rem, 2.375vw, 1.1875rem);
  --hi-text-size-h5: clamp(0.9375rem, 2.125vw, 1.0625rem);
  --hi-text-size-h6: clamp(0.875rem, 2vw, 1rem);
  --hi-text-size-body-large: clamp(0.9375rem, 2vw, 1.25rem);
  --hi-text-size-body: 0.875rem;
  --hi-text-margin-body: 0.75rem;
  --hi-text-size-body-small: 0.8125rem;
  --hi-text-size-caption: 0.75rem;
  --hi-text-size-code: 0.875em;
  --hi-text-line-height-heading: 1.2;
  --hi-text-line-height-body: 1.5;
  --hi-text-line-height-tight: 1.25;
  --hi-text-weight-normal: 400;
  --hi-text-weight-medium: 500;
  --hi-text-weight-semibold: 600;
  --hi-text-weight-bold: 700;
  --hi-flex-gap-xs: 0.25rem;
  --hi-flex-gap-sm: 0.5rem;
  --hi-flex-gap-md: 1rem;
  --hi-flex-gap-lg: 1.5rem;
  --hi-flex-gap-xl: 2rem;
  --hi-input-border-color: #d1d5db;
  --hi-input-border-color-hover: #9ca3af;
  --hi-input-border-color-focus: #3b82f6;
  --hi-input-border-color-error: #ef4444;
  --hi-input-border-color-success: #10b981;
  --hi-input-bg: #ffffff;
  --hi-input-bg-disabled: #f3f4f6;
  --hi-input-bg-readonly: #f9fafb;
  --hi-input-text-color: #2b2b2b;
  --hi-input-text-color-placeholder: #9ca3af;
  --hi-input-text-color-disabled: #6b7280;
  --hi-input-padding-sm: 0.375rem 0.625rem;
  --hi-input-padding-md: 0.5rem 0.75rem;
  --hi-input-padding-lg: 0.625rem 1rem;
  --hi-input-font-size-sm: 0.875rem;
  --hi-input-font-size-md: 1rem;
  --hi-input-font-size-lg: 1.125rem;
  --hi-input-line-height-sm: 1.25rem;
  --hi-input-line-height-md: 1.5rem;
  --hi-input-line-height-lg: 1.75rem;
  --hi-input-border-radius: 0.375rem;
  --hi-input-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
@font-face {
  font-family: 'MuseoSansRounded-300';
  src: url(fonts/MuseoSansRounded-300.woff2) format('woff2'), url(fonts/MuseoSansRounded-300.woff) format('woff');
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MuseoSansRounded-300 Fallback';
  src: local('Arial'), local('ArialMT');
  ascent-override: 93.958%;
  descent-override: 25.9884%;
  line-gap-override: 0%;
  size-adjust: 100.0447%;
}
@font-face {
  font-family: 'HiUiMuseoSansRounded-500 Fallback';
  src: local('Arial'), local('ArialMT');
  ascent-override: 92.3024%;
  descent-override: 25.5304%;
  line-gap-override: 0%;
  size-adjust: 101.8392%;
}
@font-face {
  font-family: 'MuseoSansRounded-700 Fallback';
  src: local('Arial'), local('ArialMT');
  ascent-override: 90.7041%;
  descent-override: 25.0884%;
  line-gap-override: 0%;
  size-adjust: 103.6337%;
}
@font-face {
  font-family: 'HiUiMuseoSansRounded-500';
  src: url(fonts/MuseoSansRounded-500.woff2) format('woff2'), url(fonts/MuseoSansRounded-500.woff) format('woff');
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MuseoSansRounded-700';
  src: url(fonts/MuseoSansRounded-700.woff2) format('woff2'), url(fonts/MuseoSansRounded-700.woff) format('woff');
  font-style: normal;
  font-display: swap;
}
button.hi-ui.tw-btn-base, a.hi-ui.tw-btn-base, .hi-ui.tw-btn-base {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  vertical-align: baseline !important;
  height: -moz-fit-content;
  height: fit-content;
  gap: var(--hi-button-gap);
  font-family: var(--hi-button-font-family);
  font-size: var(--hi-button-font-size);
  line-height: var(--hi-button-line-height);
  text-transform: uppercase;
  border: var(--hi-button-border-width) solid transparent;
  border-radius: var(--hi-button-radius);
  transition: var(--hi-button-transition);
  cursor: pointer;
  font-weight: normal;
  margin: 0;
}
a.hi-ui.tw-btn-base {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
}
.hi-ui.tw-btn-base:focus {
  outline: none !important;
}
.hi-ui.tw-btn-base:focus-visible {
  outline: var(--hi-focus-ring-width) solid var(--hi-focus-ring) !important;
  outline-offset: var(--hi-focus-ring-offset);
}
button.hi-ui.tw-btn-primary, a.hi-ui.tw-btn-primary, .hi-ui.tw-btn-primary {
  background-color: var(--hi-button-primary-bg);
  color: var(--hi-button-primary-text);
  border-color: transparent;
}
button.hi-ui.tw-btn-primary:hover:not(:disabled):not(.tw-btn-disabled), a.hi-ui.tw-btn-primary:hover:not(:disabled):not(.tw-btn-disabled), .hi-ui.tw-btn-primary:hover:not(:disabled):not(.tw-btn-disabled) {
  background-color: var(--hi-button-primary-hover);
}
button.hi-ui.tw-btn-secondary, a.hi-ui.tw-btn-secondary, .hi-ui.tw-btn-secondary {
  background-color: var(--hi-button-secondary-bg);
  color: var(--hi-button-secondary-text);
  border-color: transparent;
}
button.hi-ui.tw-btn-secondary:hover:not(:disabled):not(.tw-btn-disabled), a.hi-ui.tw-btn-secondary:hover:not(:disabled):not(.tw-btn-disabled), .hi-ui.tw-btn-secondary:hover:not(:disabled):not(.tw-btn-disabled) {
  background-color: var(--hi-button-secondary-hover);
}
button.hi-ui.tw-btn-tertiary, a.hi-ui.tw-btn-tertiary, .hi-ui.tw-btn-tertiary {
  background-color: var(--hi-button-tertiary-bg);
  color: var(--hi-button-tertiary-text);
  border: var(--hi-button-border-width) solid var(--hi-button-tertiary-border);
}
button.hi-ui.tw-btn-tertiary:hover:not(:disabled):not(.tw-btn-disabled), a.hi-ui.tw-btn-tertiary:hover:not(:disabled):not(.tw-btn-disabled), .hi-ui.tw-btn-tertiary:hover:not(:disabled):not(.tw-btn-disabled) {
  background-color: var(--hi-button-tertiary-hover);
}
button.hi-ui.tw-btn-warning, a.hi-ui.tw-btn-warning, .hi-ui.tw-btn-warning {
  background-color: var(--hi-button-warning-bg);
  color: var(--hi-button-warning-text);
  border-color: transparent;
}
button.hi-ui.tw-btn-warning:hover:not(:disabled):not(.tw-btn-disabled), a.hi-ui.tw-btn-warning:hover:not(:disabled):not(.tw-btn-disabled), .hi-ui.tw-btn-warning:hover:not(:disabled):not(.tw-btn-disabled) {
  background-color: var(--hi-button-warning-hover);
}
button.hi-ui.tw-btn-success, a.hi-ui.tw-btn-success, .hi-ui.tw-btn-success {
  background-color: var(--hi-button-success-bg);
  color: var(--hi-button-success-text);
  border-color: transparent;
}
button.hi-ui.tw-btn-success:hover:not(:disabled):not(.tw-btn-disabled), a.hi-ui.tw-btn-success:hover:not(:disabled):not(.tw-btn-disabled), .hi-ui.tw-btn-success:hover:not(:disabled):not(.tw-btn-disabled) {
  background-color: var(--hi-button-success-hover);
}
button.hi-ui.tw-btn-size-small, a.hi-ui.tw-btn-size-small, .hi-ui.tw-btn-size-small {
  padding: calc(var(--hi-button-padding-y) * 0.75 + 0.5px) calc(var(--hi-button-padding-x) * 0.75) calc(var(--hi-button-padding-y) * 0.75 - 0.5px);
  font-size: calc(var(--hi-button-font-size) * 0.875);
}
button.hi-ui.tw-btn-size-medium, a.hi-ui.tw-btn-size-medium, .hi-ui.tw-btn-size-medium {
  padding: calc(var(--hi-button-padding-y) * 0.75 + 1px) calc(var(--hi-button-padding-x) * 0.75) calc(var(--hi-button-padding-y) * 0.75 - 1px);
  font-size: calc(var(--hi-button-font-size) * 0.875);
}
button.hi-ui.tw-btn-size-large, a.hi-ui.tw-btn-size-large, .hi-ui.tw-btn-size-large {
  padding: calc(var(--hi-button-padding-y) * 1.25 - 0.5px) calc(var(--hi-button-padding-x) * 1.25) calc(var(--hi-button-padding-y) * 1.25 + 0.5px);
  font-size: calc(var(--hi-button-font-size) * 1.125);
}
button.hi-ui.tw-btn-disabled, a.hi-ui.tw-btn-disabled, .hi-ui.tw-btn-disabled, button.hi-ui:disabled, a.hi-ui:disabled {
  background-color: var(--hi-button-disabled-bg) !important;
  color: var(--hi-button-disabled-text) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  border-color: transparent !important;
  opacity: 1 !important;
}
button.hi-ui.tw-w-full, a.hi-ui.tw-w-full, .hi-ui.tw-w-full {
  width: 100%;
}
button.hi-ui.tw-w-auto, a.hi-ui.tw-w-auto, .hi-ui.tw-w-auto {
  width: auto;
}
.hi-ui-text {
  margin: 0;
  padding: 0;
  font-family: var(--hi-text-font-family);
  color: var(--hi-text-color-base);
}
.hi-ui-text-heading-1, .hi-ui-text-heading-2, .hi-ui-text-heading-3, .hi-ui-text-heading-4, .hi-ui-text-heading-5, .hi-ui-text-heading-6 {
  font-family: var(--hi-text-font-family-heading);
  font-weight: var(--hi-text-weight-normal);
  line-height: var(--hi-text-line-height-heading);
}
.hi-ui-text-heading-1 {
  font-size: var(--hi-text-size-h1);
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.hi-ui-text-heading-2 {
  font-size: var(--hi-text-size-h2);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}
.hi-ui-text-heading-3 {
  font-size: var(--hi-text-size-h3);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.hi-ui-text-heading-4 {
  font-size: var(--hi-text-size-h4);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.hi-ui-text-heading-5 {
  font-size: var(--hi-text-size-h5);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.hi-ui-text-heading-6 {
  font-size: var(--hi-text-size-h6);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.hi-ui-text-body-large {
  font-size: var(--hi-text-size-body-large);
  line-height: var(--hi-text-line-height-body);
  margin-bottom: 1rem;
}
.hi-ui-text-body {
  font-size: var(--hi-text-size-body);
  line-height: var(--hi-text-line-height-body);
  margin-bottom: var(--hi-text-margin-body);
}
.hi-ui-text-body-small {
  font-size: var(--hi-text-size-body-small);
  line-height: var(--hi-text-line-height-body);
  margin-bottom: 0.5rem;
}
.hi-ui-text-label {
  font-size: var(--hi-text-size-body-small);
  font-weight: var(--hi-text-weight-medium);
  line-height: var(--hi-text-line-height-tight);
  display: inline-block;
}
.hi-ui-text-caption {
  font-size: var(--hi-text-size-caption);
  line-height: var(--hi-text-line-height-body);
  color: var(--hi-text-color-muted);
}
.hi-ui-text-error {
  font-size: var(--hi-text-size-body-small);
  color: var(--hi-text-color-error);
  line-height: var(--hi-text-line-height-body);
}
.hi-ui-text-success {
  font-size: var(--hi-text-size-body-small);
  color: var(--hi-text-color-success);
  line-height: var(--hi-text-line-height-body);
}
.hi-ui-text-muted {
  color: var(--hi-text-color-muted);
}
.hi-ui-text-inline {
  display: inline;
}
.hi-ui-text-code {
  font-family: var(--hi-text-font-family-code);
  font-size: var(--hi-text-size-code);
  padding: 0.125rem 0.25rem;
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 3px;
}
.hi-ui-text-color-primary {
  color: var(--hi-text-color-primary);
}
.hi-ui-text-color-secondary {
  color: var(--hi-text-color-secondary);
}
.hi-ui-text-color-muted {
  color: var(--hi-text-color-muted);
}
.hi-ui-text-color-error {
  color: var(--hi-text-color-error);
}
.hi-ui-text-color-success {
  color: var(--hi-text-color-success);
}
.hi-ui-text-bold {
  font-family: MuseoSansRounded-700, 'MuseoSansRounded-700 Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.hi-ui-text-align-left {
  text-align: left;
}
.hi-ui-text-align-center {
  text-align: center;
}
.hi-ui-text-align-right {
  text-align: right;
}
.hi-ui-text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
input.hi-ui-input, textarea.hi-ui-input, .hi-ui-input {
  font-family: var(--hi-text-font-family);
  color: var(--hi-input-text-color);
  background-color: var(--hi-input-bg);
  border: 1px solid var(--hi-input-border-color);
  border-radius: var(--hi-input-border-radius);
  outline: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  width: auto;
  display: inline-block;
}
input.hi-ui-input::-moz-placeholder, textarea.hi-ui-input::-moz-placeholder, .hi-ui-input::-moz-placeholder {
  color: var(--hi-input-text-color-placeholder);
  opacity: 1;
}
input.hi-ui-input::placeholder, textarea.hi-ui-input::placeholder, .hi-ui-input::placeholder {
  color: var(--hi-input-text-color-placeholder);
  opacity: 1;
}
input.hi-ui-input:hover:not(:disabled):not(:-moz-read-only), textarea.hi-ui-input:hover:not(:disabled):not(:-moz-read-only), .hi-ui-input:hover:not(:disabled):not(:-moz-read-only) {
  border-color: var(--hi-input-border-color-hover);
}
input.hi-ui-input:hover:not(:disabled):not(:read-only), textarea.hi-ui-input:hover:not(:disabled):not(:read-only), .hi-ui-input:hover:not(:disabled):not(:read-only) {
  border-color: var(--hi-input-border-color-hover);
}
input.hi-ui-input:focus, textarea.hi-ui-input:focus, .hi-ui-input:focus {
  border-color: var(--hi-input-border-color-focus);
  box-shadow: var(--hi-input-focus-ring);
}
input.hi-ui-input-size-sm, textarea.hi-ui-input-size-sm, .hi-ui-input-size-sm {
  padding: var(--hi-input-padding-sm);
  font-size: var(--hi-input-font-size-sm);
  line-height: var(--hi-input-line-height-sm);
}
input.hi-ui-input-size-md, textarea.hi-ui-input-size-md, .hi-ui-input-size-md {
  padding: var(--hi-input-padding-sm);
  font-size: var(--hi-input-font-size-sm);
  line-height: var(--hi-input-line-height-sm);
}
input.hi-ui-input-size-lg, textarea.hi-ui-input-size-lg, .hi-ui-input-size-lg {
  padding: var(--hi-input-padding-lg);
  font-size: var(--hi-input-font-size-lg);
  line-height: var(--hi-input-line-height-lg);
}
input.hi-ui-input-state-error, textarea.hi-ui-input-state-error, .hi-ui-input-state-error {
  border-color: var(--hi-input-border-color-error);
}
input.hi-ui-input-state-error:focus, textarea.hi-ui-input-state-error:focus, .hi-ui-input-state-error:focus {
  border-color: var(--hi-input-border-color-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
input.hi-ui-input-state-success, textarea.hi-ui-input-state-success, .hi-ui-input-state-success {
  border-color: var(--hi-input-border-color-success);
}
input.hi-ui-input-state-success:focus, textarea.hi-ui-input-state-success:focus, .hi-ui-input-state-success:focus {
  border-color: var(--hi-input-border-color-success);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
input.hi-ui-input-disabled, textarea.hi-ui-input-disabled, .hi-ui-input-disabled, input.hi-ui-input:disabled, textarea.hi-ui-input:disabled, .hi-ui-input:disabled {
  background-color: var(--hi-input-bg-disabled);
  color: var(--hi-input-text-color-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}
input.hi-ui-input:-moz-read-only, textarea.hi-ui-input:-moz-read-only, .hi-ui-input:-moz-read-only {
  background-color: var(--hi-input-bg-readonly);
  cursor: default;
}
input.hi-ui-input-readonly, textarea.hi-ui-input-readonly, .hi-ui-input-readonly, input.hi-ui-input:read-only, textarea.hi-ui-input:read-only, .hi-ui-input:read-only {
  background-color: var(--hi-input-bg-readonly);
  cursor: default;
}
input.hi-ui-input-full-width, textarea.hi-ui-input-full-width, .hi-ui-input-full-width {
  width: 100%;
  display: block;
  box-sizing: border-box;
}
select.hi-ui-select, .hi-ui-select {
  font-family: var(--hi-text-font-family);
  color: var(--hi-input-text-color);
  background-color: var(--hi-input-bg);
  border: 1px solid var(--hi-input-border-color);
  border-radius: var(--hi-input-border-radius);
  outline: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  width: auto;
  display: inline-block;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27%3E%3Cpath fill=%27%232b2b2b%27 d=%27M1 0L5 4L9 0L10 1L5 6L0 1z%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 10px 6px;
}
select.hi-ui-select:hover:not(:disabled), .hi-ui-select:hover:not(:disabled) {
  border-color: var(--hi-input-border-color-hover);
}
select.hi-ui-select:focus, .hi-ui-select:focus {
  border-color: var(--hi-input-border-color-focus);
  box-shadow: var(--hi-input-focus-ring);
}
select.hi-ui-select-size-sm, .hi-ui-select-size-sm {
  padding: var(--hi-input-padding-sm);
  padding-right: 2rem;
  font-size: var(--hi-input-font-size-sm);
  line-height: var(--hi-input-line-height-sm);
}
select.hi-ui-select-size-md, .hi-ui-select-size-md {
  padding: var(--hi-input-padding-sm);
  padding-right: 2rem;
  font-size: var(--hi-input-font-size-sm);
  line-height: var(--hi-input-line-height-sm);
}
select.hi-ui-select-size-lg, .hi-ui-select-size-lg {
  padding: var(--hi-input-padding-lg);
  padding-right: 2.5rem;
  font-size: var(--hi-input-font-size-lg);
  line-height: var(--hi-input-line-height-lg);
}
select.hi-ui-select-state-error, .hi-ui-select-state-error {
  border-color: var(--hi-input-border-color-error);
}
select.hi-ui-select-state-error:focus, .hi-ui-select-state-error:focus {
  border-color: var(--hi-input-border-color-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
select.hi-ui-select-state-success, .hi-ui-select-state-success {
  border-color: var(--hi-input-border-color-success);
}
select.hi-ui-select-state-success:focus, .hi-ui-select-state-success:focus {
  border-color: var(--hi-input-border-color-success);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
select.hi-ui-select-disabled, .hi-ui-select-disabled, select.hi-ui-select:disabled, .hi-ui-select:disabled {
  background-color: var(--hi-input-bg-disabled);
  color: var(--hi-input-text-color-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}
select.hi-ui-select-full-width, .hi-ui-select-full-width {
  width: 100%;
  display: block;
}
.hi-ui-form-label {
  margin: 0;
}
.hi-ui-form-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.hi-ui-form-button {
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .hi-ui-form-container {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 16px !important;
  }
  .hi-ui-form-label {
    min-width: 120px;
    flex-shrink: 0;
  }
  .hi-ui-form-input {
    max-width: 300px;
    width: auto;
  }
  .hi-ui-form-button {
    width: auto;
  }
  .hi-ui-form-actions {
    flex-shrink: 0;
  }
}
.hi-ui-mobile-force .hi-ui-form-container {
  flex-direction: column !important;
  align-items: flex-start !important;
}
.hi-ui-mobile-force .hi-ui-form-label {
  min-width: auto !important;
}
.hi-ui-mobile-force .hi-ui-form-input {
  width: 100% !important;
  max-width: 100% !important;
}
.hi-ui-mobile-force .hi-ui-form-button {
  width: 100% !important;
}
.hi-ui-flex {
  display: flex;
}
.hi-ui-flex-row {
  flex-direction: row;
}
.hi-ui-flex-column {
  flex-direction: column;
}
.hi-ui-flex-row-reverse {
  flex-direction: row-reverse;
}
.hi-ui-flex-column-reverse {
  flex-direction: column-reverse;
}
.hi-ui-flex-justify-start {
  justify-content: flex-start;
}
.hi-ui-flex-justify-end {
  justify-content: flex-end;
}
.hi-ui-flex-justify-center {
  justify-content: center;
}
.hi-ui-flex-justify-between {
  justify-content: space-between;
}
.hi-ui-flex-justify-around {
  justify-content: space-around;
}
.hi-ui-flex-justify-evenly {
  justify-content: space-evenly;
}
.hi-ui-flex-align-start {
  align-items: flex-start;
}
.hi-ui-flex-align-end {
  align-items: flex-end;
}
.hi-ui-flex-align-center {
  align-items: center;
}
.hi-ui-flex-align-baseline {
  align-items: baseline;
}
.hi-ui-flex-align-stretch {
  align-items: stretch;
}
.hi-ui-flex-gap-xs {
  gap: var(--hi-flex-gap-xs);
}
.hi-ui-flex-gap-sm {
  gap: var(--hi-flex-gap-sm);
}
.hi-ui-flex-gap-md {
  gap: var(--hi-flex-gap-md);
}
.hi-ui-flex-gap-lg {
  gap: var(--hi-flex-gap-lg);
}
.hi-ui-flex-gap-xl {
  gap: var(--hi-flex-gap-xl);
}
.hi-ui-flex-wrap {
  flex-wrap: wrap;
}
a.hi-ui-link, .hi-ui-link {
  color: var(--hi-text-color-base);
  font-family: MuseoSansRounded-700, 'MuseoSansRounded-700 Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  cursor: pointer;
  transition: opacity 0.15s ease-in-out;
}
a.hi-ui-link:hover:not(.hi-ui-link-disabled), .hi-ui-link:hover:not(.hi-ui-link-disabled) {
  opacity: 0.8;
}
a.hi-ui-link:focus-visible, .hi-ui-link:focus-visible {
  outline: var(--hi-focus-ring-width) solid var(--hi-focus-ring);
  outline-offset: var(--hi-focus-ring-offset);
}
a.hi-ui-link-underline, .hi-ui-link-underline {
  text-decoration: underline;
}
a.hi-ui-link-no-underline, .hi-ui-link-no-underline {
  text-decoration: none;
}
a.hi-ui-link-disabled, .hi-ui-link-disabled {
  color: #9ca3af;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.6;
}
.hi-ui-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hi-ui-list-style-disc {
  list-style-type: disc;
  padding-left: 1.5rem;
}
.hi-ui-list-style-circle {
  list-style-type: circle;
  padding-left: 1.5rem;
}
.hi-ui-list-style-square {
  list-style-type: square;
  padding-left: 1.5rem;
}
.hi-ui-list-style-decimal {
  list-style-type: decimal;
  padding-left: 1.5rem;
}
.hi-ui-list-style-lower-alpha {
  list-style-type: lower-alpha;
  padding-left: 1.5rem;
}
.hi-ui-list-style-upper-alpha {
  list-style-type: upper-alpha;
  padding-left: 1.5rem;
}
.hi-ui-list-style-lower-roman {
  list-style-type: lower-roman;
  padding-left: 1.5rem;
}
.hi-ui-list-style-upper-roman {
  list-style-type: upper-roman;
  padding-left: 1.5rem;
}
.hi-ui-image {
  display: block;
  max-width: 100%;
  height: auto;
}
.hi-ui-image-icon {
  display: inline-block;
  vertical-align: middle;
}
#hi-ui-page-root ul, #hi-ui-page-root ol {
  margin-top: 1rem;
  margin-bottom: 1rem;
  line-height: 1.6;
  font-size: var(--hi-text-size-body);
}
#hi-ui-page-root ul li, #hi-ui-page-root ol li {
  margin-bottom: 0.5rem;
}
#hi-ui-page-root ul li:last-child, #hi-ui-page-root ol li:last-child {
  margin-bottom: 0;
}
.hi-ui-text-heading-1:first-child, .hi-ui-text-heading-2:first-child, .hi-ui-text-heading-3:first-child, .hi-ui-text-heading-4:first-child, .hi-ui-text-heading-5:first-child, .hi-ui-text-heading-6:first-child {
  margin-top: 0;
}
@media (min-width: 768px) {
  :root {
    --hi-text-size-body: 1rem;
    --hi-text-margin-body: 1rem;
    --hi-text-size-body-small: 0.875rem;
  }
  input.hi-ui-input-size-md, textarea.hi-ui-input-size-md, .hi-ui-input-size-md {
    padding: var(--hi-input-padding-md);
    font-size: var(--hi-input-font-size-md);
    line-height: var(--hi-input-line-height-md);
  }
  button.hi-ui.tw-btn-size-medium, a.hi-ui.tw-btn-size-medium, .hi-ui.tw-btn-size-medium {
    padding: var(--hi-button-padding-y) var(--hi-button-padding-x);
    font-size: var(--hi-button-font-size);
  }
  select.hi-ui-select-size-md, .hi-ui-select-size-md {
    padding: var(--hi-input-padding-md);
    padding-right: 2.25rem;
    font-size: var(--hi-input-font-size-md);
    line-height: var(--hi-input-line-height-md);
  }
}
.hi-ui-page--reset .hi-ui-text {
  font-family: var(--hi-text-font-family);
  color: var(--hi-text-color-base);
}
.hi-ui-page--reset .hi-ui-text-heading-1, .hi-ui-page--reset .hi-ui-text-heading-2, .hi-ui-page--reset .hi-ui-text-heading-3, .hi-ui-page--reset .hi-ui-text-heading-4, .hi-ui-page--reset .hi-ui-text-heading-5, .hi-ui-page--reset .hi-ui-text-heading-6 {
  font-family: var(--hi-text-font-family-heading);
  font-weight: var(--hi-text-weight-normal);
  line-height: var(--hi-text-line-height-heading);
  letter-spacing: normal;
  background: none;
}
.hi-ui-page--reset .hi-ui-text-heading-1 {
  font-size: var(--hi-text-size-h1);
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.hi-ui-page--reset .hi-ui-text-heading-2 {
  font-size: var(--hi-text-size-h2);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}
.hi-ui-page--reset .hi-ui-text-body {
  font-size: var(--hi-text-size-body);
  line-height: var(--hi-text-line-height-body);
}
.hi-ui-page--reset ul, .hi-ui-page--reset ol {
  font-family: var(--hi-text-font-family);
}
.hi-ui-page--reset .hi-ui-text-error {
  color: var(--hi-text-color-error);
}
.hi-ui-page--reset .hi-ui-text-success {
  color: var(--hi-text-color-success);
}
.hi-ui-page--reset .hi-ui-text-color-error {
  color: var(--hi-text-color-error);
}
.hi-ui-page--reset .hi-ui-text-color-success {
  color: var(--hi-text-color-success);
}
.hi-ui-page--reset input.hi-ui-input, .hi-ui-page--reset textarea.hi-ui-input {
  font-family: var(--hi-text-font-family);
  font-size: var(--hi-input-font-size-sm);
  line-height: var(--hi-input-line-height-sm);
  color: var(--hi-input-text-color);
  background: var(--hi-input-bg);
  border: 1px solid var(--hi-input-border-color);
  border-radius: var(--hi-input-border-radius);
  padding: var(--hi-input-padding-sm);
}
.hi-ui-page--reset input.hi-ui-input-state-error, .hi-ui-page--reset textarea.hi-ui-input-state-error {
  border-color: var(--hi-input-border-color-error);
}
.hi-ui-page--reset input.hi-ui-input-state-success, .hi-ui-page--reset textarea.hi-ui-input-state-success {
  border-color: var(--hi-input-border-color-success);
}
.hi-ui-page--reset select.hi-ui-select {
  font-family: var(--hi-text-font-family);
  font-size: var(--hi-input-font-size-sm);
  line-height: var(--hi-input-line-height-sm);
  color: var(--hi-input-text-color);
  background-color: var(--hi-input-bg);
  border: 1px solid var(--hi-input-border-color);
  border-radius: var(--hi-input-border-radius);
  padding: var(--hi-input-padding-sm);
  padding-right: 2rem;
}
.hi-ui-page--reset select.hi-ui-select-state-error {
  border-color: var(--hi-input-border-color-error);
}
.hi-ui-page--reset select.hi-ui-select-state-success {
  border-color: var(--hi-input-border-color-success);
}
.hi-ui-page--reset a.hi-ui-link {
  color: var(--hi-text-color-base);
  font-family: MuseoSansRounded-700, 'MuseoSansRounded-700 Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
}
.hi-ui-page--reset a.hi-ui-link-underline {
  text-decoration: underline;
}
.hi-ui-page--reset a.hi-ui-link:hover:not(.hi-ui-link-disabled) {
  opacity: 0.8;
  color: var(--hi-text-color-base);
}
#hi-ui-sidebar.hi-ui-sidebar {
  display: block;
  width: 230px;
  background: #d6d6d6;
  text-align: center;
  padding-top: 15px;
  float: left;
  border-top-right-radius: 15px;
}
@media (max-width: 768px) {
  #hi-ui-sidebar.hi-ui-sidebar {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    z-index: 999;
    float: none;
    overflow-y: auto;
    background: #fff;
    border-top-right-radius: 0;
    padding: 60px 0 0 0;
    transition: right 0.3s ease;
    box-shadow: none;
    text-align: left;
  }
  #hi-ui-sidebar.hi-ui-sidebar.hi-ui-sidebar-open {
    right: 0;
  }
}
#hi-ui-sidebar .hi-ui-sidebar-logout-mobile {
  display: none;
}
#hi-ui-sidebar .hi-ui-cart-mobile {
  display: none;
}
#hi-ui-sidebar .hi-ui-cart-desktop {
  display: block;
}
#hi-ui-sidebar .hi-ui-cart-button {
  text-align: center;
  margin: 25px auto 0 auto;
}
#hi-ui-sidebar a.hi-ui-cart-button-link, #hi-ui-sidebar .hi-ui-cart-button-link {
  display: block;
  margin: 0 auto;
  transition: opacity 0.2s ease;
  text-decoration: none;
}
#hi-ui-sidebar a.hi-ui-cart-button-link:hover, #hi-ui-sidebar .hi-ui-cart-button-link:hover {
  opacity: 0.8;
}
#hi-ui-sidebar .hi-ui-cart-button-icon {
  display: block;
  width: 205px;
  height: 30px;
  margin: 0 auto;
}
#hi-ui-sidebar .hi-ui-resume-purchase-mobile {
  display: none;
}
#hi-ui-sidebar .hi-ui-resume-purchase-desktop {
  display: block;
}
@keyframes hi-ui-slide-down {
  from {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
  }
  to {
    max-height: 300px;
    opacity: 1;
    margin-top: 8px;
    margin-bottom: 12px;
    padding-top: 15px;
    padding-bottom: 15px;
    overflow: visible;
  }
}
@keyframes hi-ui-slide-up {
  from {
    max-height: 300px;
    opacity: 1;
    margin-top: 8px;
    margin-bottom: 12px;
    padding-top: 15px;
    padding-bottom: 15px;
    overflow: hidden;
  }
  to {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
  }
}
#hi-ui-sidebar .hi-ui-resume-purchase-box {
  background: #fef18f url(images/bg_side_resume.png) repeat-x top;
  border-radius: 8px;
  padding: 15px;
  border: 1px solid #fff7a7;
  width: 173px;
  color: #595224;
  text-shadow: 1px 1px 1px #fff;
  font-weight: 700;
  font-size: 13px;
  margin: 8px auto 12px auto;
  position: relative;
  animation: hi-ui-slide-down 0.4s ease-out forwards;
}
#hi-ui-sidebar .hi-ui-resume-purchase-box.hi-ui-closing {
  animation: hi-ui-slide-up 0.3s ease-in forwards;
}
#hi-ui-sidebar .hi-ui-resume-purchase-close {
  position: absolute;
  top: -5px;
  right: -5px;
}
#hi-ui-sidebar .hi-ui-resume-purchase-close-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #71682e;
  border-radius: 50%;
  text-decoration: none;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
}
#hi-ui-sidebar .hi-ui-resume-purchase-close-link:hover {
  background: #5a5425;
}
#hi-ui-sidebar .hi-ui-resume-purchase-close-link img {
  width: 12px;
  height: 12px;
}
#hi-ui-sidebar #sideresume.hi-ui-resume-purchase-box .hi-ui-resume-purchase-title {
  font-size: 17px;
  padding: 0 0 5px 0;
  margin: 0;
  text-align: left;
  line-height: 1.2em;
}
#hi-ui-sidebar #sideresume.hi-ui-resume-purchase-box .hi-ui-resume-purchase-message {
  font-size: inherit;
  font-weight: normal;
  text-align: left;
  line-height: 1.2em;
  padding: 0;
  margin: 0;
}
#hi-ui-sidebar .hi-ui-resume-purchase-actions {
  margin-top: 10px;
}
#hi-ui-sidebar .hi-ui-resume-purchase-button, #hi-ui-sidebar #sideresume .hi-ui-resume-purchase-button, #hi-ui-sidebar #sideresume button.hi-ui-resume-purchase-button {
  font-size: 12px;
  display: block;
  background: #fff url(images/bg_btn_sideresume.png) repeat-x top;
  padding: 10px;
  text-decoration: none;
  margin-top: 10px;
  border: 1px solid #f6eb94;
  color: #595224;
  border-radius: 15px;
  box-shadow: 1px 1px 5px #ece28c;
  line-height: 1.6em;
  transition: all 0.2s ease;
  cursor: pointer;
  width: 100%;
  text-align: center;
  font-family: inherit;
  font-weight: normal;
  text-transform: none;
  box-sizing: border-box;
}
#hi-ui-sidebar .hi-ui-resume-purchase-button:hover {
  background: url(images/bg_btn_sideresume.png) 0 -7px;
  box-shadow: 1px 1px 5px #e0d687;
  text-decoration: none;
}
#hi-ui-sidebar .hi-ui-resume-purchase-icon {
  border: none;
  float: left;
  padding: 0 12px 0 5px;
  vertical-align: middle;
}
#hi-ui-sidebar .hi-ui-menu-section-title {
  padding-top: 10px;
  line-height: 2em;
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
}
#hi-ui-sidebar .hi-ui-menu-section-list, #hi-ui-sidebar ul.hi-ui-menu-section-list {
  margin-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  gap: 5px;
  padding-left: 0;
  margin: 0;
  width: auto;
}
#hi-ui-sidebar .hi-ui-menu-section:last-child .hi-ui-menu-section-list {
  padding-bottom: 32px;
}
#hi-ui-sidebar .hi-ui-menu-item {
  text-align: left;
  list-style: none;
  margin-bottom: 0;
}
#hi-ui-sidebar ul li a.hi-ui-menu-item-link, #hi-ui-sidebar li a.hi-ui-menu-item-link, #hi-ui-sidebar a.hi-ui-menu-item-link {
  padding-left: 32px;
  width: 205px !important;
  display: flex;
  align-items: center;
  height: 26px;
  text-decoration: none;
  background: #ebebeb url(images/btn_right_list_cropped.png) no-repeat top;
  position: relative;
  box-sizing: border-box;
  color: #2b2b2b;
  overflow: visible;
  padding-right: 0;
  text-overflow: clip;
  white-space: normal;
  line-height: normal;
  font-family: inherit;
}
#hi-ui-sidebar a.hi-ui-menu-item-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.2s ease;
  pointer-events: none;
  border-radius: 3px;
}
#hi-ui-sidebar a.hi-ui-menu-item-link:hover {
  opacity: 1;
}
#hi-ui-sidebar a.hi-ui-menu-item-link:hover::before {
  background-color: rgba(255, 255, 255, 0.3);
}
#hi-ui-sidebar .hi-ui-menu-item-text {
  display: inline-block;
  font-family: 'HiUiMuseoSansRounded-500', 'HiUiMuseoSansRounded-500 Fallback', sans-serif;
  font-weight: normal;
  font-size: 12px;
  position: relative;
  z-index: 1;
}
#hi-ui-sidebar .hi-ui-menu-item-sub .hi-ui-menu-item-text {
  padding-left: 8px;
}
@media (max-width: 768px) {
  #hi-ui-sidebar .hi-ui-sidebar-logout-mobile {
    display: block;
    padding: 32px 16px 16px 16px;
  }
  #hi-ui-sidebar .hi-ui-cart-desktop {
    display: none;
  }
  #hi-ui-sidebar .hi-ui-cart-mobile {
    display: block;
    padding: 0 16px 16px 16px;
  }
  #hi-ui-sidebar .hi-ui-resume-purchase-desktop {
    display: none;
  }
  #hi-ui-sidebar .hi-ui-resume-purchase-mobile {
    display: block;
    padding: 0 16px 16px 16px;
  }
  #hi-ui-sidebar .hi-ui-resume-purchase-box {
    background: #ffd800;
    background-image: none;
    width: 100%;
    margin: 0;
    padding: 16px;
    box-shadow: none;
    border: none;
    border-radius: 8px;
    box-sizing: border-box;
  }
  #hi-ui-sidebar .hi-ui-resume-purchase-close {
    display: none;
  }
  #hi-ui-sidebar .hi-ui-resume-purchase-title {
    font-size: 16px;
    font-weight: bold;
  }
  #hi-ui-sidebar .hi-ui-resume-purchase-message {
    font-size: 14px;
  }
  #hi-ui-sidebar .hi-ui-resume-purchase-button {
    background: #fff;
    background-image: none;
    font-size: 14px;
    padding: 12px 16px;
    min-height: 44px;
    border-radius: 8px;
  }
  #hi-ui-sidebar .hi-ui-resume-purchase-button:hover {
    background: #f9f9f9;
    background-image: none;
  }
  #hi-ui-sidebar .hi-ui-menu-section-title {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
    padding: 16px 16px 8px 16px;
    line-height: 1.2;
    text-align: left;
  }
  #hi-ui-sidebar .hi-ui-menu-section-list, #hi-ui-sidebar ul.hi-ui-menu-section-list {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 0;
  }
  #hi-ui-sidebar .hi-ui-menu-section:last-child .hi-ui-menu-section-list {
    padding-bottom: 100px;
  }
  #hi-ui-sidebar .hi-ui-menu-item {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  #hi-ui-sidebar ul li a.hi-ui-menu-item-link, #hi-ui-sidebar li a.hi-ui-menu-item-link, #hi-ui-sidebar a.hi-ui-menu-item-link {
    width: 100% !important;
    height: auto;
    min-height: 44px;
    padding: 12px 16px;
    background: transparent;
    background-image: none;
    border-radius: 0;
    margin: 0;
    font-weight: normal;
    box-shadow: none;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    transition: background-color 0.15s ease;
    box-sizing: border-box;
    color: #2b2b2b;
    overflow: visible;
    padding-right: 16px;
    text-overflow: clip;
    white-space: normal;
    line-height: normal;
    font-family: inherit;
  }
  #hi-ui-sidebar a.hi-ui-menu-item-link::before {
    display: none;
  }
  #hi-ui-sidebar a.hi-ui-menu-item-link:hover {
    background: #f9f9f9;
  }
  #hi-ui-sidebar .hi-ui-menu-item-text {
    font-size: 15px;
    color: #2b2b2b;
  }
  #hi-ui-sidebar .hi-ui-menu-item-sub a.hi-ui-menu-item-link {
    padding-left: 32px;
  }
  #hi-ui-sidebar .hi-ui-menu-item-sub .hi-ui-menu-item-text {
    padding-left: 0;
  }
  #hi-ui-sidebar .hi-ui-menu-item-active a.hi-ui-menu-item-link {
    background: #fffbf0;
    border-left: 3px solid #ffd800;
    padding-left: 13px;
    font-weight: 600;
  }
  #hi-ui-sidebar .hi-ui-menu-item-active.hi-ui-menu-item-sub a.hi-ui-menu-item-link {
    padding-left: 29px;
  }
}
[class*='hi-ui-']:focus:not(:focus-visible) {
  outline: none;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

/* =============================================================================
   Badge Component Styles
   ============================================================================= */

.hi-ui-badge {
  /* Theme variables with defaults */
  --hi-badge-bg: #e5e7eb;
  --hi-badge-text: #374151;
  --hi-badge-border: transparent;
  --hi-badge-font-family:
    HiUiMuseoSansRounded-500, 'HiUiMuseoSansRounded-500 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  font-family: var(--hi-badge-font-family);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  vertical-align: baseline;
  background-color: var(--hi-badge-bg);
  color: var(--hi-badge-text);
  border: 1px solid var(--hi-badge-border);
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* =============================================================================
   Size Variants
   ============================================================================= */

.hi-ui-badge--sm {
  font-size: 0.625rem; /* 10px */
  padding: 0.125rem 0.375rem; /* 2px 6px */
}

.hi-ui-badge--md {
  font-size: 0.75rem; /* 12px */
  padding: 0.1875rem 0.5rem; /* 3px 8px */
}

.hi-ui-badge--lg {
  font-size: 0.875rem; /* 14px */
  padding: 0.25rem 0.625rem; /* 4px 10px */
}

/* =============================================================================
   Color Variants - Solid (default)
   ============================================================================= */

/* Default - Gray */
.hi-ui-badge--default {
  --hi-badge-bg: #e5e7eb;
  --hi-badge-text: #374151;
  --hi-badge-border: #e5e7eb;
}

/* Success - Green */
.hi-ui-badge--success {
  --hi-badge-bg: #4e9758;
  --hi-badge-text: #ffffff;
  --hi-badge-border: #4e9758;
}

/* Warning - Amber/Orange */
.hi-ui-badge--warning {
  --hi-badge-bg: #f59e0b;
  --hi-badge-text: #ffffff;
  --hi-badge-border: #f59e0b;
}

/* Error - Red */
.hi-ui-badge--error {
  --hi-badge-bg: #dc3545;
  --hi-badge-text: #ffffff;
  --hi-badge-border: #dc3545;
}

/* Info - Teal/Cyan */
.hi-ui-badge--info {
  --hi-badge-bg: #4e8c97;
  --hi-badge-text: #ffffff;
  --hi-badge-border: #4e8c97;
}

/* Neutral - Dark Gray */
.hi-ui-badge--neutral {
  --hi-badge-bg: #6b7280;
  --hi-badge-text: #ffffff;
  --hi-badge-border: #6b7280;
}

/* =============================================================================
   Outlined Variant
   ============================================================================= */

.hi-ui-badge--outlined {
  background-color: transparent;
}

.hi-ui-badge--outlined.hi-ui-badge--default {
  --hi-badge-text: #374151;
  --hi-badge-border: #9ca3af;
}

.hi-ui-badge--outlined.hi-ui-badge--success {
  --hi-badge-text: #3d8540;
  --hi-badge-border: #4e9758;
}

.hi-ui-badge--outlined.hi-ui-badge--warning {
  --hi-badge-text: #b45309;
  --hi-badge-border: #f59e0b;
}

.hi-ui-badge--outlined.hi-ui-badge--error {
  --hi-badge-text: #b91c1c;
  --hi-badge-border: #dc3545;
}

.hi-ui-badge--outlined.hi-ui-badge--info {
  --hi-badge-text: #3a6d76;
  --hi-badge-border: #4e8c97;
}

.hi-ui-badge--outlined.hi-ui-badge--neutral {
  --hi-badge-text: #4b5563;
  --hi-badge-border: #6b7280;
}

/* =============================================================================
   Pill Shape
   ============================================================================= */

.hi-ui-badge--pill {
  border-radius: 9999px;
}

/* =============================================================================
   Icon Styles
   ============================================================================= */

.hi-ui-badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hi-ui-badge--sm .hi-ui-badge__icon {
  font-size: 0.625rem;
}

.hi-ui-badge--md .hi-ui-badge__icon {
  font-size: 0.75rem;
}

.hi-ui-badge--lg .hi-ui-badge__icon {
  font-size: 0.875rem;
}

/* SVG icons inside badge */
.hi-ui-badge__icon svg {
  width: 1em;
  height: 1em;
}

/* =============================================================================
   Text Styles
   ============================================================================= */

.hi-ui-badge__text {
  display: inline-block;
}

/* =============================================================================
   High Contrast Mode
   ============================================================================= */

@media (prefers-contrast: high) {
  .hi-ui-badge {
    border-width: 2px;
  }

  .hi-ui-badge--outlined {
    border-width: 2px;
  }
}

/* =============================================================================
   Responsive - Slightly larger touch targets on mobile
   ============================================================================= */

@media (max-width: 768px) {
  .hi-ui-badge--sm {
    padding: 0.1875rem 0.4375rem;
  }

  .hi-ui-badge--md {
    padding: 0.25rem 0.5625rem;
  }

  .hi-ui-badge--lg {
    padding: 0.3125rem 0.6875rem;
  }
}

/* =============================================================================
   Notice Component Styles
   ============================================================================= */

.hi-ui-notice {
  --hi-notice-bg: #eff6ff;
  --hi-notice-text: #1e40af;
  --hi-notice-border: #93c5fd;
  --hi-notice-icon-color: #3b82f6;
  --hi-notice-font-family:
    HiUiMuseoSansRounded-500, 'HiUiMuseoSansRounded-500 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;

  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  margin-bottom: 1rem; /* Match Text body — each block manages its own bottom spacing */
  font-family: var(--hi-notice-font-family);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--hi-notice-text);
  background-color: var(--hi-notice-bg);
  border: 1px solid var(--hi-notice-border);
  border-radius: 6px;
}

/* =============================================================================
   Variants
   ============================================================================= */

.hi-ui-notice--info {
  --hi-notice-bg: #eff6ff;
  --hi-notice-text: #1e40af;
  --hi-notice-border: #93c5fd;
  --hi-notice-icon-color: #3b82f6;
}

.hi-ui-notice--success {
  --hi-notice-bg: #f0fdf4;
  --hi-notice-text: #166534;
  --hi-notice-border: #86efac;
  --hi-notice-icon-color: #4e9758;
}

.hi-ui-notice--warning {
  --hi-notice-bg: #fffbeb;
  --hi-notice-text: #92400e;
  --hi-notice-border: #fcd34d;
  --hi-notice-icon-color: #f59e0b;
}

.hi-ui-notice--error {
  --hi-notice-bg: #fef2f2;
  --hi-notice-text: #991b1b;
  --hi-notice-border: #fca5a5;
  --hi-notice-icon-color: #dc3545;
}

/* =============================================================================
   Icon
   ============================================================================= */

.hi-ui-notice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--hi-notice-icon-color);
  margin-top: 0.0625rem;
}

.hi-ui-notice__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* =============================================================================
   Content
   ============================================================================= */

.hi-ui-notice__content {
  flex: 1;
  min-width: 0;
}

/* Text and Link children inherit the notice's variant color (e.g., success green,
   error red) instead of falling back to their hardcoded base colors. Links remain
   distinguishable via underline + bold weight. Using __content in the selector
   gives enough specificity to override .hi-ui-page--reset a.hi-ui-link (0,2,1). */
.hi-ui-notice .hi-ui-notice__content .hi-ui-text,
.hi-ui-notice .hi-ui-notice__content a.hi-ui-link,
.hi-ui-notice .hi-ui-notice__content .hi-ui-link {
  color: inherit;
}

/* Text children inherit the notice's font-size so they match the container.
   Text body variant (14px) would otherwise override the mobile 13px notice size. */
.hi-ui-notice .hi-ui-notice__content .hi-ui-text {
  font-size: inherit;
}

/* =============================================================================
   Dismiss Button
   ============================================================================= */

.hi-ui-notice__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--hi-notice-text);
  cursor: pointer;
  border-radius: 4px;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.hi-ui-notice__dismiss:hover {
  opacity: 1;
}

.hi-ui-notice__dismiss:focus-visible {
  outline: 2px solid var(--hi-notice-icon-color);
  outline-offset: 2px;
  opacity: 1;
}

.hi-ui-notice__dismiss svg {
  width: 1rem;
  height: 1rem;
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 768px) {
  .hi-ui-notice {
    padding: 0.75rem;
    font-size: 0.8125rem;
  }
}

/* =============================================================================
   CopyButton Component Styles
   ============================================================================= */

.hi-ui-copy-button {
  --hi-copy-button-color: #6b7280;
  --hi-copy-button-hover: #374151;
  --hi-copy-button-copied: #4e9758;
  --hi-copy-button-size: 1.75rem;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hi-copy-button-size);
  height: var(--hi-copy-button-size);
  padding: 0;
  border: none;
  background: none;
  color: var(--hi-copy-button-color);
  cursor: pointer;
  border-radius: 4px;
  transition:
    color 0.15s,
    background-color 0.15s;
}

.hi-ui-copy-button:hover {
  color: var(--hi-copy-button-hover);
  background-color: #f3f4f6;
}

.hi-ui-copy-button:focus-visible {
  outline: var(--hi-focus-ring-width) solid var(--hi-focus-ring);
  outline-offset: 2px;
}

/* =============================================================================
   Copied State
   ============================================================================= */

.hi-ui-copy-button--copied {
  color: var(--hi-copy-button-copied);
}

.hi-ui-copy-button--copied:hover {
  color: var(--hi-copy-button-copied);
}

/* =============================================================================
   Icon
   ============================================================================= */

.hi-ui-copy-button__icon {
  width: 1rem;
  height: 1rem;
}

/* =============================================================================
   Copied Popup (above the button)
   ============================================================================= */

.hi-ui-copy-button__popup {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
  font-family: MuseoSansRounded-300, 'MuseoSansRounded-300 Fallback', sans-serif;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.15s,
    transform 0.15s;
}

.hi-ui-copy-button__popup::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1a1a1a;
}

.hi-ui-copy-button__popup--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===================================================
   Checkbox Component Styles
   =================================================== */

/* Wrapper - acts as clickable label */
.hi-ui-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-family: var(--hi-text-font-family);
  color: var(--hi-input-text-color);
  line-height: 1.4;
}

/* Hide native checkbox but keep it accessible */
.hi-ui-checkbox-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Custom checkbox box */
.hi-ui-checkbox-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid var(--hi-input-border-color);
  border-radius: 4px;
  background-color: var(--hi-input-bg);
  transition:
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

/* Check mark icon - hidden by default */
.hi-ui-checkbox-check,
.hi-ui-checkbox-indeterminate {
  display: none;
  color: white;
}

/* Hover state */
.hi-ui-checkbox:hover:not(.hi-ui-checkbox-disabled) .hi-ui-checkbox-box {
  border-color: var(--hi-input-border-color-hover);
}

/* Focus state - use focus-visible for keyboard-only focus */
.hi-ui-checkbox-input:focus-visible + .hi-ui-checkbox-box {
  border-color: var(--hi-input-border-color-focus);
  box-shadow: var(--hi-input-focus-ring);
}

/* Checked state */
.hi-ui-checkbox-input:checked + .hi-ui-checkbox-box {
  background-color: var(--hi-table-header-bg, #256957);
  border-color: var(--hi-table-header-bg, #256957);
}

.hi-ui-checkbox-input:checked + .hi-ui-checkbox-box .hi-ui-checkbox-check {
  display: block;
}

/* Indeterminate state */
.hi-ui-checkbox-input:indeterminate + .hi-ui-checkbox-box {
  background-color: var(--hi-table-header-bg, #256957);
  border-color: var(--hi-table-header-bg, #256957);
}

.hi-ui-checkbox-input:indeterminate + .hi-ui-checkbox-box .hi-ui-checkbox-check {
  display: none;
}

.hi-ui-checkbox-input:indeterminate + .hi-ui-checkbox-box .hi-ui-checkbox-indeterminate {
  display: block;
}

/* Size Variants */

/* Small */
.hi-ui-checkbox-size-sm {
  font-size: var(--hi-input-font-size-sm, 0.875rem);
}

.hi-ui-checkbox-size-sm .hi-ui-checkbox-box {
  width: 14px;
  height: 14px;
}

.hi-ui-checkbox-size-sm .hi-ui-checkbox-check,
.hi-ui-checkbox-size-sm .hi-ui-checkbox-indeterminate {
  width: 10px;
  height: 10px;
}

/* Medium (default) */
.hi-ui-checkbox-size-md {
  font-size: var(--hi-input-font-size-sm, 0.875rem);
}

.hi-ui-checkbox-size-md .hi-ui-checkbox-box {
  width: 18px;
  height: 18px;
}

.hi-ui-checkbox-size-md .hi-ui-checkbox-check,
.hi-ui-checkbox-size-md .hi-ui-checkbox-indeterminate {
  width: 12px;
  height: 12px;
}

/* Large */
.hi-ui-checkbox-size-lg {
  font-size: var(--hi-input-font-size-lg, 1rem);
}

.hi-ui-checkbox-size-lg .hi-ui-checkbox-box {
  width: 22px;
  height: 22px;
}

.hi-ui-checkbox-size-lg .hi-ui-checkbox-check,
.hi-ui-checkbox-size-lg .hi-ui-checkbox-indeterminate {
  width: 14px;
  height: 14px;
}

/* Error State */
.hi-ui-checkbox-state-error .hi-ui-checkbox-box {
  border-color: var(--hi-input-border-color-error);
}

.hi-ui-checkbox-state-error .hi-ui-checkbox-input:checked + .hi-ui-checkbox-box,
.hi-ui-checkbox-state-error .hi-ui-checkbox-input:indeterminate + .hi-ui-checkbox-box {
  background-color: var(--hi-input-border-color-error);
  border-color: var(--hi-input-border-color-error);
}

.hi-ui-checkbox-state-error .hi-ui-checkbox-input:focus-visible + .hi-ui-checkbox-box {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Disabled State */
.hi-ui-checkbox-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.hi-ui-checkbox-disabled .hi-ui-checkbox-box {
  background-color: var(--hi-input-bg-disabled);
}

.hi-ui-checkbox-disabled .hi-ui-checkbox-input:checked + .hi-ui-checkbox-box,
.hi-ui-checkbox-disabled .hi-ui-checkbox-input:indeterminate + .hi-ui-checkbox-box {
  background-color: var(--hi-table-header-bg, #256957);
  opacity: 0.6;
}

/* Label text */
.hi-ui-checkbox-label {
  flex: 1;
  position: relative;
  top: 1px;
}

/* ===================================================
   DescriptionList Component
   =================================================== */

.hi-ui-description-list {
  --hi-dl-value-color: var(--hi-text-color-primary, #111827);
  --hi-dl-stripe-bg: var(--hi-bg-subtle, #f3f3f3);
  --hi-dl-gap: 0.5rem;
  --hi-dl-row-gap: 0.75rem;
  --hi-dl-font-family: var(--hi-text-font-family, system-ui, sans-serif);

  display: flex;
  flex-direction: column;
  gap: var(--hi-dl-row-gap);
  margin: 0;
  padding: 0;
  font-family: var(--hi-dl-font-family);
}

.hi-ui-description-list__item {
  display: flex;
  margin: 0;
}

.hi-ui-description-list__label {
  font-weight: 500;
  margin: 0;
}

.hi-ui-description-list__value {
  color: var(--hi-dl-value-color);
  margin: 0;
}

/* ===================================================
   Layout Variants
   =================================================== */

/* Stacked: label above value */
.hi-ui-description-list--stacked .hi-ui-description-list__item {
  flex-direction: column;
  gap: 0.25rem;
}

/* Horizontal: label and value side by side */
.hi-ui-description-list--horizontal .hi-ui-description-list__item {
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--hi-dl-gap);
}

.hi-ui-description-list--horizontal .hi-ui-description-list__label {
  flex-shrink: 0;
}

.hi-ui-description-list--horizontal .hi-ui-description-list__value {
  text-align: right;
}

/* Inline: all items flow inline */
.hi-ui-description-list--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}

.hi-ui-description-list--inline .hi-ui-description-list__item {
  flex-direction: row;
  align-items: baseline;
  gap: 0.375rem;
}

.hi-ui-description-list--inline .hi-ui-description-list__label::after {
  content: ':';
}

/* Inline reverts to stacked on mobile */
@media (max-width: 768px) {
  .hi-ui-description-list--inline {
    flex-direction: column;
  }

  .hi-ui-description-list--inline .hi-ui-description-list__item {
    flex-direction: column;
    gap: 0.25rem;
  }

  .hi-ui-description-list--inline .hi-ui-description-list__label::after {
    content: none;
  }
}

/* ===================================================
   Size Variants
   =================================================== */

.hi-ui-description-list--sm {
  --hi-dl-row-gap: 0.5rem;
}

.hi-ui-description-list--sm .hi-ui-description-list__label {
  font-size: 0.75rem;
  line-height: 1.4;
}

.hi-ui-description-list--sm .hi-ui-description-list__value {
  font-size: 0.75rem;
  line-height: 1.4;
}

.hi-ui-description-list--md {
  --hi-dl-row-gap: 0.75rem;
}

.hi-ui-description-list--md .hi-ui-description-list__label {
  font-size: 0.875rem;
  line-height: 1.5;
}

.hi-ui-description-list--md .hi-ui-description-list__value {
  font-size: 0.875rem;
  line-height: 1.5;
}

.hi-ui-description-list--lg {
  --hi-dl-row-gap: 1rem;
}

.hi-ui-description-list--lg .hi-ui-description-list__label {
  font-size: 1rem;
  line-height: 1.5;
}

.hi-ui-description-list--lg .hi-ui-description-list__value {
  font-size: 1rem;
  line-height: 1.5;
}

/* ===================================================
   Striped Variant
   =================================================== */

.hi-ui-description-list--striped {
  gap: 0;
}

.hi-ui-description-list--striped .hi-ui-description-list__item {
  padding: 0.5rem 0.75rem;
}

.hi-ui-description-list--striped .hi-ui-description-list__item:nth-child(odd) {
  background-color: var(--hi-dl-stripe-bg);
}

/* ===================================================
   Accessibility
   =================================================== */

@media (prefers-contrast: high) {
  .hi-ui-description-list__label {
    font-weight: 600;
  }

  .hi-ui-description-list--striped .hi-ui-description-list__item:nth-child(odd) {
    border: 1px solid currentColor;
  }
}

/* =============================================================================
   EmptyState Component Styles
   ============================================================================= */

.hi-ui-empty-state {
  --hi-empty-state-bg: #ffffff;
  --hi-empty-state-text: #374151;
  --hi-empty-state-description: #6b7280;
  --hi-empty-state-icon-color: #9ca3af;
  --hi-empty-state-font-family:
    HiUiMuseoSansRounded-500, 'HiUiMuseoSansRounded-500 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  font-family: var(--hi-empty-state-font-family);
  background-color: var(--hi-empty-state-bg);
  color: var(--hi-empty-state-text);
  border-radius: 8px;
}

/* =============================================================================
   Icon
   ============================================================================= */

.hi-ui-empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--hi-empty-state-icon-color);
}

.hi-ui-empty-state__icon svg {
  width: 3rem;
  height: 3rem;
}

/* =============================================================================
   Title
   ============================================================================= */

.hi-ui-empty-state__title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--hi-empty-state-text);
}

/* =============================================================================
   Description
   ============================================================================= */

.hi-ui-empty-state__description {
  margin: 0 0 1.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--hi-empty-state-description);
  max-width: 28rem;
}

/* =============================================================================
   Action
   ============================================================================= */

.hi-ui-empty-state__action {
  display: flex;
  gap: 0.5rem;
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 768px) {
  .hi-ui-empty-state {
    padding: 2rem 0;
  }

  .hi-ui-empty-state__icon svg {
    width: 2.5rem;
    height: 2.5rem;
  }

  .hi-ui-empty-state__title {
    font-size: 1rem;
  }
}

.hi-ui-gradient-bar {
  background: linear-gradient(to right, #1a355d 0%, #63b770 100%);
  height: 9px;
  width: 100%;
}

.hi-ui-layout-container {
  max-width: var(--hi-layout-max-width, 1170px);
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* ===================================================
   Spinner Component Styles
   =================================================== */

.hi-ui-spinner {
  --hi-spinner-color: currentColor;
  --hi-spinner-track-color: rgba(128, 128, 128, 0.2);

  display: inline-block;
  flex-shrink: 0;
  border-radius: 50%;
  border-style: solid;
  border-color: var(--hi-spinner-track-color);
  border-top-color: var(--hi-spinner-color);
  animation: hi-ui-spin 0.8s linear infinite;
}

/* Size variants */
.hi-ui-spinner--small {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.hi-ui-spinner--medium {
  width: 24px;
  height: 24px;
  border-width: 3px;
}

.hi-ui-spinner--large {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

/* Animation keyframes */
@keyframes hi-ui-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hi-ui-spinner {
    animation: none;
    /* Show as static indicator instead */
    border-top-color: var(--hi-spinner-color);
    border-right-color: var(--hi-spinner-color);
  }
}

/* =============================================================================
   LoadingOverlay Component Styles
   ============================================================================= */

.hi-ui-loading-overlay {
  position: relative;
}

.hi-ui-loading-overlay__backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 10;
  border-radius: inherit;
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 768px) {
  .hi-ui-loading-overlay__backdrop .hi-ui-spinner--large {
    width: 24px;
    height: 24px;
  }
}

/* ===================================================
   PriceDisplay Component
   =================================================== */

.hi-ui-price-display {
  --hi-price-color: var(--hi-text-color-primary, #111827);
  --hi-price-original-color: var(--hi-text-color-secondary, #6b7280);
  --hi-price-interval-color: var(--hi-text-color-secondary, #6b7280);
  --hi-price-vat-color: var(--hi-text-color-tertiary, #9ca3af);
  --hi-price-font-family: var(--hi-text-font-family, system-ui, sans-serif);

  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  font-family: var(--hi-price-font-family);
  color: var(--hi-price-color);
}

/* ===================================================
   Current Price
   =================================================== */

.hi-ui-price-display__current {
  display: inline-flex;
  align-items: baseline;
}

.hi-ui-price-display__currency {
  font-family: MuseoSansRounded-700, 'MuseoSansRounded-700 Fallback', sans-serif;
}

.hi-ui-price-display__amount {
  font-family: MuseoSansRounded-700, 'MuseoSansRounded-700 Fallback', sans-serif;
}

.hi-ui-price-display__interval {
  color: var(--hi-price-interval-color);
  font-weight: 400;
  margin-left: 0.125em;
}

/* ===================================================
   Original Price (Discount)
   =================================================== */

.hi-ui-price-display__original {
  display: inline-flex;
  align-items: baseline;
  color: var(--hi-price-original-color);
  text-decoration: line-through;
  font-weight: 400;
}

.hi-ui-price-display__original .hi-ui-price-display__currency,
.hi-ui-price-display__original .hi-ui-price-display__amount {
  font-weight: 400;
}

/* ===================================================
   VAT Text
   =================================================== */

.hi-ui-price-display__vat {
  color: var(--hi-price-vat-color);
  font-weight: 400;
}

/* ===================================================
   Size Variants
   =================================================== */

.hi-ui-price-display--sm {
  font-size: 0.875rem;
  line-height: 1.4;
}

.hi-ui-price-display--sm .hi-ui-price-display__interval,
.hi-ui-price-display--sm .hi-ui-price-display__vat {
  font-size: 0.75rem;
}

.hi-ui-price-display--md {
  font-size: 1.125rem;
  line-height: 1.4;
}

.hi-ui-price-display--md .hi-ui-price-display__interval,
.hi-ui-price-display--md .hi-ui-price-display__vat {
  font-size: 0.875rem;
}

.hi-ui-price-display--lg {
  font-size: 1.5rem;
  line-height: 1.3;
}

.hi-ui-price-display--lg .hi-ui-price-display__interval,
.hi-ui-price-display--lg .hi-ui-price-display__vat {
  font-size: 1rem;
}

.hi-ui-price-display--xl {
  font-size: 2rem;
  line-height: 1.2;
}

.hi-ui-price-display--xl .hi-ui-price-display__interval,
.hi-ui-price-display--xl .hi-ui-price-display__vat {
  font-size: 1.125rem;
}

/* ===================================================
   Accessibility
   =================================================== */

@media (prefers-contrast: high) {
  .hi-ui-price-display__original {
    text-decoration-thickness: 2px;
  }
}

.hi-ui-quantity-selector {
  display: inline-flex;
  align-items: center;
}

.hi-ui-quantity-selector--disabled {
  opacity: 0.4;
  pointer-events: none;
}

.hi-ui-quantity-selector__btn {
  display: inline-block;
  width: 16px;
  height: 16px;
  padding: 0;
  margin-bottom: -1px;
  border: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  cursor: pointer;
  transition: opacity 0.2s;
}

.hi-ui-quantity-selector__btn--minus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27%3E %3Ccircle cx=%278%27 cy=%278%27 r=%278%27 fill=%27%23EEEEEE%27/%3E %3Cpath d=%27M3.69141 8.80006C3.69141 9.47139 3.91686 9.84435 4.36775 9.84435H7.16977H8.82843H11.6465C12.0813 9.84435 12.3068 9.47139 12.3068 8.80006V8.4271C12.3068 7.75577 12.0813 7.38281 11.6465 7.38281H8.82843H7.16977H4.36775C3.91686 7.38281 3.69141 7.75577 3.69141 8.4271V8.80006Z%27 fill=%27%23333333%27/%3E %3C/svg%3E");
}

.hi-ui-quantity-selector__btn--minus:hover:not(:disabled) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27%3E %3Ccircle cx=%278%27 cy=%278%27 r=%278%27 fill=%27%23D2D2D2%27/%3E %3Cpath d=%27M3.69141 8.80006C3.69141 9.47139 3.91686 9.84435 4.36775 9.84435H7.16977H8.82843H11.6465C12.0813 9.84435 12.3068 9.47139 12.3068 8.80006V8.4271C12.3068 7.75577 12.0813 7.38281 11.6465 7.38281H8.82843H7.16977H4.36775C3.91686 7.38281 3.69141 7.75577 3.69141 8.4271V8.80006Z%27 fill=%27%23333333%27/%3E %3C/svg%3E");
}

.hi-ui-quantity-selector__btn--plus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27%3E %3Ccircle cx=%278%27 cy=%278%27 r=%278%27 fill=%27%23EEEEEE%27/%3E %3Cpath d=%27M4.36775 8.85797C3.91686 8.85797 3.69141 8.59977 3.69141 8.135V7.8768C3.69141 7.41204 3.91686 7.15383 4.36775 7.15383H7.16977V3.79719C7.16977 3.33242 7.41132 3.07422 7.84612 3.07422H8.16819C8.60298 3.07422 8.82843 3.33242 8.82843 3.79719V7.15383H11.6465C12.0813 7.15383 12.3068 7.41204 12.3068 7.8768V8.135C12.3068 8.59977 12.0813 8.85797 11.6465 8.85797H8.82843V12.1974C8.82843 12.6794 8.60298 12.9204 8.16819 12.9204H7.84612C7.41132 12.9204 7.16977 12.6794 7.16977 12.1974V8.85797H4.36775Z%27 fill=%27%23333333%27/%3E %3C/svg%3E");
}

.hi-ui-quantity-selector__btn--plus:hover:not(:disabled) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27%3E %3Ccircle cx=%278%27 cy=%278%27 r=%278%27 fill=%27%23D2D2D2%27/%3E %3Cpath d=%27M4.36775 8.85797C3.91686 8.85797 3.69141 8.59977 3.69141 8.135V7.8768C3.69141 7.41204 3.91686 7.15383 4.36775 7.15383H7.16977V3.79719C7.16977 3.33242 7.41132 3.07422 7.84612 3.07422H8.16819C8.60298 3.07422 8.82843 3.33242 8.82843 3.79719V7.15383H11.6465C12.0813 7.15383 12.3068 7.41204 12.3068 7.8768V8.135C12.3068 8.59977 12.0813 8.85797 11.6465 8.85797H8.82843V12.1974C8.82843 12.6794 8.60298 12.9204 8.16819 12.9204H7.84612C7.41132 12.9204 7.16977 12.6794 7.16977 12.1974V8.85797H4.36775Z%27 fill=%27%23333333%27/%3E %3C/svg%3E");
}

.hi-ui-quantity-selector__btn--disabled {
  opacity: 0.3;
  cursor: default;
}

.hi-ui-quantity-selector__value {
  padding: 0 8px;
  font-size: 16px;
}

/* =============================================================================
   ProgressBar Component Styles
   ============================================================================= */

.hi-ui-progress-bar {
  --hi-progress-bar-bg: #e5e7eb;
  --hi-progress-bar-fill: #4e8c97;
  --hi-progress-bar-text: #374151;
  --hi-progress-bar-font-family:
    HiUiMuseoSansRounded-500, 'HiUiMuseoSansRounded-500 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;

  width: 100%;
  font-family: var(--hi-progress-bar-font-family);
}

/* =============================================================================
   Header (Label + Value)
   ============================================================================= */

.hi-ui-progress-bar__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.375rem;
}

.hi-ui-progress-bar__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--hi-progress-bar-text);
}

.hi-ui-progress-bar__value {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--hi-progress-bar-text);
}

/* =============================================================================
   Track
   ============================================================================= */

.hi-ui-progress-bar__track {
  width: 100%;
  background-color: var(--hi-progress-bar-bg);
  border-radius: 9999px;
  overflow: hidden;
}

/* =============================================================================
   Fill
   ============================================================================= */

.hi-ui-progress-bar__fill {
  height: 100%;
  background-color: var(--hi-progress-bar-fill);
  border-radius: 9999px;
  transition: width 0.3s ease;
}

/* =============================================================================
   Size Variants
   ============================================================================= */

.hi-ui-progress-bar--sm .hi-ui-progress-bar__track {
  height: 0.25rem; /* 4px */
}

.hi-ui-progress-bar--md .hi-ui-progress-bar__track {
  height: 0.5rem; /* 8px */
}

.hi-ui-progress-bar--lg .hi-ui-progress-bar__track {
  height: 0.75rem; /* 12px */
}

/* =============================================================================
   Color Variants
   ============================================================================= */

.hi-ui-progress-bar--default {
  --hi-progress-bar-fill: #4e8c97;
}

.hi-ui-progress-bar--success {
  --hi-progress-bar-fill: #4e9758;
}

.hi-ui-progress-bar--warning {
  --hi-progress-bar-fill: #f59e0b;
}

.hi-ui-progress-bar--error {
  --hi-progress-bar-fill: #dc3545;
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 768px) {
  .hi-ui-progress-bar__label,
  .hi-ui-progress-bar__value {
    font-size: 0.75rem;
  }
}

/* ===================================================
   Radio Component Styles
   =================================================== */

/* Wrapper - acts as clickable label */
.hi-ui-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-family: var(--hi-text-font-family);
  color: var(--hi-input-text-color);
  line-height: 1.4;
}

/* Hide native radio but keep it accessible */
.hi-ui-radio-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Custom radio circle */
.hi-ui-radio-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid var(--hi-input-border-color);
  border-radius: 50%;
  background-color: var(--hi-input-bg);
  transition:
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

/* Inner dot - hidden by default */
.hi-ui-radio-dot {
  display: none;
  border-radius: 50%;
  background-color: white;
}

/* Hover state */
.hi-ui-radio:hover:not(.hi-ui-radio-disabled) .hi-ui-radio-circle {
  border-color: var(--hi-input-border-color-hover);
}

/* Focus state - use focus-visible for keyboard-only focus */
.hi-ui-radio-input:focus-visible + .hi-ui-radio-circle {
  border-color: var(--hi-input-border-color-focus);
  box-shadow: var(--hi-input-focus-ring);
}

/* Checked state */
.hi-ui-radio-input:checked + .hi-ui-radio-circle {
  background-color: var(--hi-table-header-bg, #256957);
  border-color: var(--hi-table-header-bg, #256957);
}

.hi-ui-radio-input:checked + .hi-ui-radio-circle .hi-ui-radio-dot {
  display: block;
}

/* Size Variants */

/* Small */
.hi-ui-radio-size-sm {
  font-size: var(--hi-input-font-size-sm, 0.875rem);
}

.hi-ui-radio-size-sm .hi-ui-radio-circle {
  width: 14px;
  height: 14px;
}

.hi-ui-radio-size-sm .hi-ui-radio-dot {
  width: 6px;
  height: 6px;
}

/* Medium (default) */
.hi-ui-radio-size-md {
  font-size: var(--hi-input-font-size-sm, 0.875rem);
}

.hi-ui-radio-size-md .hi-ui-radio-circle {
  width: 18px;
  height: 18px;
}

.hi-ui-radio-size-md .hi-ui-radio-dot {
  width: 8px;
  height: 8px;
}

/* Large */
.hi-ui-radio-size-lg {
  font-size: var(--hi-input-font-size-lg, 1rem);
}

.hi-ui-radio-size-lg .hi-ui-radio-circle {
  width: 22px;
  height: 22px;
}

.hi-ui-radio-size-lg .hi-ui-radio-dot {
  width: 10px;
  height: 10px;
}

/* Error State */
.hi-ui-radio-state-error .hi-ui-radio-circle {
  border-color: var(--hi-input-border-color-error);
}

.hi-ui-radio-state-error .hi-ui-radio-input:checked + .hi-ui-radio-circle {
  background-color: var(--hi-input-border-color-error);
  border-color: var(--hi-input-border-color-error);
}

.hi-ui-radio-state-error .hi-ui-radio-input:focus-visible + .hi-ui-radio-circle {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Disabled State */
.hi-ui-radio-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.hi-ui-radio-disabled .hi-ui-radio-circle {
  background-color: var(--hi-input-bg-disabled);
}

.hi-ui-radio-disabled .hi-ui-radio-input:checked + .hi-ui-radio-circle {
  background-color: var(--hi-table-header-bg, #256957);
  opacity: 0.6;
}

/* Label text */
.hi-ui-radio-label {
  flex: 1;
}

/* =============================================================================
   Slider Component Styles
   ============================================================================= */

.hi-ui-slider {
  /* Theme variables */
  --hi-slider-track-bg: #e5e7eb;
  --hi-slider-fill-bg: #256957;
  --hi-slider-thumb-bg: #ffffff;
  --hi-slider-thumb-border: #256957;
  --hi-slider-thumb-shadow: rgba(0, 0, 0, 0.1);
  --hi-slider-thumb-focus-ring: rgba(37, 105, 87, 0.3);
  --hi-slider-value-color: #2b2b2b;
  --hi-slider-label-color: #2b2b2b;
  --hi-slider-disabled-opacity: 0.5;
  --hi-slider-font-family:
    MuseoSansRounded-300, 'MuseoSansRounded-300 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;
  --hi-slider-font-family-bold:
    MuseoSansRounded-700, 'MuseoSansRounded-700 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;

  /* Size variants */
  --hi-slider-track-height-sm: 4px;
  --hi-slider-track-height-md: 6px;
  --hi-slider-track-height-lg: 8px;
  --hi-slider-thumb-size-sm: 16px;
  --hi-slider-thumb-size-md: 20px;
  --hi-slider-thumb-size-lg: 24px;
  --hi-slider-font-size-sm: 12px;
  --hi-slider-font-size-md: 14px;
  --hi-slider-font-size-lg: 16px;

  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  font-family: var(--hi-slider-font-family);
}

/* =============================================================================
   Label
   ============================================================================= */

.hi-ui-slider__label {
  font-family: var(--hi-slider-font-family-bold);
  font-size: var(--hi-slider-font-size-md);
  color: var(--hi-slider-label-color);
  margin: 0;
}

.hi-ui-slider--sm .hi-ui-slider__label {
  font-size: var(--hi-slider-font-size-sm);
}

.hi-ui-slider--lg .hi-ui-slider__label {
  font-size: var(--hi-slider-font-size-lg);
}

/* =============================================================================
   Wrapper (contains track and value display)
   ============================================================================= */

.hi-ui-slider__wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

/* Vertical layouts for above/below value positions */
.hi-ui-slider--value-above .hi-ui-slider__wrapper,
.hi-ui-slider--value-below .hi-ui-slider__wrapper {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

/* Track needs explicit width in column layout since flex: 1 doesn't work */
.hi-ui-slider--value-above .hi-ui-slider__track,
.hi-ui-slider--value-below .hi-ui-slider__track {
  width: 100%;
  flex: none;
}

/* =============================================================================
   Track
   ============================================================================= */

.hi-ui-slider__track {
  position: relative;
  flex: 1;
  height: var(--hi-slider-track-height-md);
  background: var(--hi-slider-track-bg);
  border-radius: calc(var(--hi-slider-track-height-md) / 2);
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.hi-ui-slider--sm .hi-ui-slider__track {
  height: var(--hi-slider-track-height-sm);
  border-radius: calc(var(--hi-slider-track-height-sm) / 2);
}

.hi-ui-slider--lg .hi-ui-slider__track {
  height: var(--hi-slider-track-height-lg);
  border-radius: calc(var(--hi-slider-track-height-lg) / 2);
}

/* Larger touch target on mobile */
.hi-ui-slider__track::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  bottom: -8px;
}

/* =============================================================================
   Tick Marks
   ============================================================================= */

.hi-ui-slider__ticks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.hi-ui-slider__tick {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 10px;
  background: var(--hi-slider-track-bg);
  border-radius: 1px;
  transform: translate(-50%, -50%);
}

/* Tick marks on top of fill should be darker */
.hi-ui-slider__tick::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  border-radius: inherit;
}

/* Size variants for ticks */
.hi-ui-slider--sm .hi-ui-slider__tick {
  height: 8px;
}

.hi-ui-slider--lg .hi-ui-slider__tick {
  height: 12px;
  width: 3px;
}

/* =============================================================================
   Fill (progress bar)
   ============================================================================= */

.hi-ui-slider__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--hi-slider-fill-bg);
  border-radius: inherit;
  pointer-events: none;
  transition: width 0.05s ease-out;
}

/* =============================================================================
   Thumb
   ============================================================================= */

.hi-ui-slider__thumb {
  position: absolute;
  top: 50%;
  width: var(--hi-slider-thumb-size-md);
  height: var(--hi-slider-thumb-size-md);
  background: var(--hi-slider-thumb-bg);
  border: 2px solid var(--hi-slider-thumb-border);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
  outline: none;
  box-shadow: 0 2px 4px var(--hi-slider-thumb-shadow);
  transition:
    box-shadow 0.15s ease,
    transform 0.1s ease;
}

.hi-ui-slider--sm .hi-ui-slider__thumb {
  width: var(--hi-slider-thumb-size-sm);
  height: var(--hi-slider-thumb-size-sm);
}

.hi-ui-slider--lg .hi-ui-slider__thumb {
  width: var(--hi-slider-thumb-size-lg);
  height: var(--hi-slider-thumb-size-lg);
}

/* Focus state */
.hi-ui-slider__thumb:focus {
  box-shadow:
    0 2px 4px var(--hi-slider-thumb-shadow),
    0 0 0 3px var(--hi-slider-thumb-focus-ring);
}

/* Hover state */
.hi-ui-slider__thumb:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

/* Active/dragging state */
.hi-ui-slider__thumb:active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.15);
}

/* =============================================================================
   Value Display
   ============================================================================= */

.hi-ui-slider__value {
  font-family: var(--hi-slider-font-family-bold);
  font-size: var(--hi-slider-font-size-md);
  color: var(--hi-slider-value-color);
  white-space: nowrap;
  min-width: 3ch;
  text-align: center;
}

.hi-ui-slider--sm .hi-ui-slider__value {
  font-size: var(--hi-slider-font-size-sm);
}

.hi-ui-slider--lg .hi-ui-slider__value {
  font-size: var(--hi-slider-font-size-lg);
}

/* Left/right positions */
.hi-ui-slider--value-left .hi-ui-slider__value,
.hi-ui-slider--value-right .hi-ui-slider__value {
  min-width: 4ch;
}

/* =============================================================================
   Disabled State
   ============================================================================= */

.hi-ui-slider--disabled {
  opacity: var(--hi-slider-disabled-opacity);
  pointer-events: none;
}

.hi-ui-slider--disabled .hi-ui-slider__track {
  cursor: not-allowed;
}

.hi-ui-slider--disabled .hi-ui-slider__thumb {
  cursor: not-allowed;
}

/* =============================================================================
   Responsive Adjustments
   ============================================================================= */

@media (max-width: 768px) {
  .hi-ui-slider__wrapper {
    gap: 8px;
  }

  /* Increase touch target size on mobile */
  .hi-ui-slider__track::before {
    top: -12px;
    bottom: -12px;
  }

  /* Slightly larger thumb on mobile for easier touch */
  .hi-ui-slider__thumb {
    width: calc(var(--hi-slider-thumb-size-md) + 4px);
    height: calc(var(--hi-slider-thumb-size-md) + 4px);
  }

  .hi-ui-slider--sm .hi-ui-slider__thumb {
    width: calc(var(--hi-slider-thumb-size-sm) + 4px);
    height: calc(var(--hi-slider-thumb-size-sm) + 4px);
  }

  .hi-ui-slider--lg .hi-ui-slider__thumb {
    width: calc(var(--hi-slider-thumb-size-lg) + 4px);
    height: calc(var(--hi-slider-thumb-size-lg) + 4px);
  }
}

/* =============================================================================
   High Contrast Mode
   ============================================================================= */

@media (prefers-contrast: high) {
  .hi-ui-slider__track {
    border: 1px solid currentColor;
  }

  .hi-ui-slider__thumb {
    border-width: 3px;
  }
}

/* =============================================================================
   Reduced Motion
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .hi-ui-slider__fill {
    transition: none;
  }

  .hi-ui-slider__thumb {
    transition: none;
  }
}

/* ===================================================
   Textarea Component Styles
   =================================================== */

/* Base Textarea */
textarea.hi-ui-textarea,
.hi-ui-textarea {
  box-sizing: border-box;
  font-family: var(--hi-text-font-family);
  color: var(--hi-input-text-color);
  background-color: var(--hi-input-bg);
  border: 1px solid var(--hi-input-border-color);
  border-radius: var(--hi-input-border-radius);
  outline: none;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  width: auto;
  display: inline-block;
  vertical-align: top;
}

/* Placeholder */
textarea.hi-ui-textarea::-moz-placeholder, .hi-ui-textarea::-moz-placeholder {
  color: var(--hi-input-text-color-placeholder);
  opacity: 1;
}
textarea.hi-ui-textarea::placeholder,
.hi-ui-textarea::placeholder {
  color: var(--hi-input-text-color-placeholder);
  opacity: 1;
}

/* Hover State */
textarea.hi-ui-textarea:hover:not(:disabled):not(:-moz-read-only), .hi-ui-textarea:hover:not(:disabled):not(:-moz-read-only) {
  border-color: var(--hi-input-border-color-hover);
}
textarea.hi-ui-textarea:hover:not(:disabled):not(:read-only),
.hi-ui-textarea:hover:not(:disabled):not(:read-only) {
  border-color: var(--hi-input-border-color-hover);
}

/* Focus State */
textarea.hi-ui-textarea:focus,
.hi-ui-textarea:focus {
  border-color: var(--hi-input-border-color-focus);
  box-shadow: var(--hi-input-focus-ring);
}

/* Size Variants */
textarea.hi-ui-textarea-size-sm,
.hi-ui-textarea-size-sm {
  padding: var(--hi-input-padding-sm);
  font-size: var(--hi-input-font-size-sm);
  line-height: var(--hi-input-line-height-sm);
}

textarea.hi-ui-textarea-size-md,
.hi-ui-textarea-size-md {
  padding: var(--hi-input-padding-sm);
  font-size: var(--hi-input-font-size-sm);
  line-height: var(--hi-input-line-height-sm);
}

textarea.hi-ui-textarea-size-lg,
.hi-ui-textarea-size-lg {
  padding: var(--hi-input-padding-lg);
  font-size: var(--hi-input-font-size-lg);
  line-height: var(--hi-input-line-height-lg);
}

/* State Variants */
textarea.hi-ui-textarea-state-error,
.hi-ui-textarea-state-error {
  border-color: var(--hi-input-border-color-error);
}

textarea.hi-ui-textarea-state-error:focus,
.hi-ui-textarea-state-error:focus {
  border-color: var(--hi-input-border-color-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

textarea.hi-ui-textarea-state-success,
.hi-ui-textarea-state-success {
  border-color: var(--hi-input-border-color-success);
}

textarea.hi-ui-textarea-state-success:focus,
.hi-ui-textarea-state-success:focus {
  border-color: var(--hi-input-border-color-success);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Disabled State */
textarea.hi-ui-textarea-disabled,
.hi-ui-textarea-disabled,
textarea.hi-ui-textarea:disabled,
.hi-ui-textarea:disabled {
  background-color: var(--hi-input-bg-disabled);
  color: var(--hi-input-text-color-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Read-only State */
textarea.hi-ui-textarea:-moz-read-only, .hi-ui-textarea:-moz-read-only {
  background-color: var(--hi-input-bg-readonly);
  cursor: default;
}
textarea.hi-ui-textarea-readonly,
.hi-ui-textarea-readonly,
textarea.hi-ui-textarea:read-only,
.hi-ui-textarea:read-only {
  background-color: var(--hi-input-bg-readonly);
  cursor: default;
}

/* Full Width */
textarea.hi-ui-textarea-full-width,
.hi-ui-textarea-full-width {
  width: 100%;
  display: block;
}

/* Resize Variants */
textarea.hi-ui-textarea-resize-none,
.hi-ui-textarea-resize-none {
  resize: none;
}

textarea.hi-ui-textarea-resize-vertical,
.hi-ui-textarea-resize-vertical {
  resize: vertical;
}

textarea.hi-ui-textarea-resize-horizontal,
.hi-ui-textarea-resize-horizontal {
  resize: horizontal;
}

textarea.hi-ui-textarea-resize-both,
.hi-ui-textarea-resize-both {
  resize: both;
}

/* ===================================================
   Toggle Component Styles
   =================================================== */

/* Wrapper - acts as clickable label */
.hi-ui-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-family: var(--hi-text-font-family);
  color: var(--hi-input-text-color);
  line-height: 1.4;
}

/* Hide native checkbox but keep it accessible */
.hi-ui-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Track (the pill-shaped background) */
.hi-ui-toggle__track {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: var(--hi-input-border-color, #d1d5db);
  transition:
    background-color 0.2s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

/* Thumb (the circular knob) */
.hi-ui-toggle__thumb {
  position: absolute;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease-in-out;
}

/* Label text */
.hi-ui-toggle__label {
  flex: 1;
}

/* ===================================================
   Size Variants
   =================================================== */

/* Small */
.hi-ui-toggle--size-sm {
  font-size: var(--hi-input-font-size-sm, 0.875rem);
}

.hi-ui-toggle--size-sm .hi-ui-toggle__track {
  width: 32px;
  height: 18px;
}

.hi-ui-toggle--size-sm .hi-ui-toggle__thumb {
  width: 14px;
  height: 14px;
  left: 2px;
}

.hi-ui-toggle--size-sm .hi-ui-toggle__input:checked + .hi-ui-toggle__track .hi-ui-toggle__thumb {
  transform: translateX(14px);
}

/* Medium (default) */
.hi-ui-toggle--size-md {
  font-size: var(--hi-input-font-size-sm, 0.875rem);
}

.hi-ui-toggle--size-md .hi-ui-toggle__track {
  width: 44px;
  height: 24px;
}

.hi-ui-toggle--size-md .hi-ui-toggle__thumb {
  width: 20px;
  height: 20px;
  left: 2px;
}

.hi-ui-toggle--size-md .hi-ui-toggle__input:checked + .hi-ui-toggle__track .hi-ui-toggle__thumb {
  transform: translateX(20px);
}

/* Large */
.hi-ui-toggle--size-lg {
  font-size: var(--hi-input-font-size-lg, 1rem);
}

.hi-ui-toggle--size-lg .hi-ui-toggle__track {
  width: 56px;
  height: 30px;
}

.hi-ui-toggle--size-lg .hi-ui-toggle__thumb {
  width: 26px;
  height: 26px;
  left: 2px;
}

.hi-ui-toggle--size-lg .hi-ui-toggle__input:checked + .hi-ui-toggle__track .hi-ui-toggle__thumb {
  transform: translateX(24px);
}

/* ===================================================
   States
   =================================================== */

/* Hover state */
.hi-ui-toggle:hover:not(.hi-ui-toggle--disabled) .hi-ui-toggle__track {
  background-color: var(--hi-input-border-color-hover, #9ca3af);
}

.hi-ui-toggle:hover:not(.hi-ui-toggle--disabled)
  .hi-ui-toggle__input:checked
  + .hi-ui-toggle__track {
  background-color: #3d7a45;
}

/* Focus state - use focus-visible for keyboard-only focus */
.hi-ui-toggle__input:focus-visible + .hi-ui-toggle__track {
  box-shadow: var(--hi-input-focus-ring, 0 0 0 3px rgba(78, 151, 88, 0.2));
}

/* Checked state */
.hi-ui-toggle__input:checked + .hi-ui-toggle__track {
  background-color: #4e9758;
}

/* Disabled state */
.hi-ui-toggle--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.hi-ui-toggle--disabled .hi-ui-toggle__track {
  background-color: var(--hi-input-bg-disabled, #e5e7eb);
}

.hi-ui-toggle--disabled .hi-ui-toggle__input:checked + .hi-ui-toggle__track {
  background-color: #4e9758;
  opacity: 0.6;
}

/* ===================================================
   Accessibility
   =================================================== */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hi-ui-toggle__track,
  .hi-ui-toggle__thumb {
    transition: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: more) {
  .hi-ui-toggle__track {
    border: 2px solid #000000;
  }

  .hi-ui-toggle__input:checked + .hi-ui-toggle__track {
    background-color: #000000;
  }

  .hi-ui-toggle__input:focus-visible + .hi-ui-toggle__track {
    outline: 3px solid #000000;
    outline-offset: 2px;
    box-shadow: none;
  }
}

/* Tooltip wrapper - inline display to not affect layout */
.hi-ui-tooltip-wrapper {
  position: relative;
  display: inline-flex;
  cursor: help;
}

/* Tooltip bubble */
.hi-ui-tooltip {
  position: absolute;
  z-index: 1000;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.4;
  color: #ffffff;
  background-color: #333333;
  border-radius: 4px;
  width: -moz-max-content;
  width: max-content;
  max-width: 250px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.15s ease,
    visibility 0.15s ease;
}

.hi-ui-tooltip--visible {
  opacity: 1;
  visibility: visible;
}

/* Arrow */
.hi-ui-tooltip__arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
}

/* Light variant — dark-on-white bubble (legacy-style hover popovers). The
   outline is a drop-shadow filter rather than a border so it follows the
   combined shape of the bubble AND its arrow child (a border would edge only the
   rectangle, leaving the arrow borderless); the per-position rules below colour
   the triangle white so it's part of that shape. */
.hi-ui-tooltip--light {
  color: #2b2b2b;
  background-color: #ffffff;
  filter: drop-shadow(0 0 0.6px rgba(0, 0, 0, 0.38)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.14));
}

.hi-ui-tooltip--light.hi-ui-tooltip--top .hi-ui-tooltip__arrow {
  border-top-color: #ffffff;
}

.hi-ui-tooltip--light.hi-ui-tooltip--bottom .hi-ui-tooltip__arrow {
  border-bottom-color: #ffffff;
}

.hi-ui-tooltip--light.hi-ui-tooltip--left .hi-ui-tooltip__arrow {
  border-left-color: #ffffff;
}

.hi-ui-tooltip--light.hi-ui-tooltip--right .hi-ui-tooltip__arrow {
  border-right-color: #ffffff;
}

/* Position: Top (default) */
.hi-ui-tooltip--top {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
}

.hi-ui-tooltip--top .hi-ui-tooltip__arrow {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: #333333;
  border-bottom: 0;
}

/* Position: Bottom */
.hi-ui-tooltip--bottom {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
}

.hi-ui-tooltip--bottom .hi-ui-tooltip__arrow {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: #333333;
  border-top: 0;
}

/* Position: Left */
.hi-ui-tooltip--left {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 8px;
}

.hi-ui-tooltip--left .hi-ui-tooltip__arrow {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: #333333;
  border-right: 0;
}

/* Position: Right */
.hi-ui-tooltip--right {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
}

.hi-ui-tooltip--right .hi-ui-tooltip__arrow {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: #333333;
  border-left: 0;
}

/* Accordion container */
.hi-ui-accordion {
  width: 100%;
}

/* Accordion group */
.hi-ui-accordion-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Individual accordion item */
.hi-ui-accordion__item {
  border-bottom: 1px solid #e5e7eb;
}

.hi-ui-accordion__item:last-child {
  border-bottom: none;
}

/* Trigger button */
.hi-ui-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 12px 0;
  background: none;
  border: none;
  cursor: pointer;
  /* Native <button> does not inherit font-family — pin it to the DS font so the
     trigger label renders in Museo rather than the UA default (Arial). */
  font-family: var(--hi-text-font-family);
  font-size: 16px;
  font-weight: 500;
  color: #1f2937;
  text-align: left;
}

.hi-ui-accordion__trigger:focus-visible {
  outline: var(--hi-focus-ring-width) solid var(--hi-focus-ring);
  outline-offset: 2px;
}

.hi-ui-accordion__item--disabled .hi-ui-accordion__trigger {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Label */
.hi-ui-accordion__label {
  flex: 1;
  padding-right: 12px;
}

/* Chevron icon */
.hi-ui-accordion__chevron {
  flex-shrink: 0;
  color: #6b7280;
  transition: transform 0.2s ease-out;
}

.hi-ui-accordion__item--expanded .hi-ui-accordion__chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .hi-ui-accordion__chevron {
    transition: none;
  }
}

/* Panel - CSS grid animation. `visibility: hidden` removes the collapsed
   content from the accessibility tree and tab order (the 0fr collapse alone
   only hides it visually, so screen-reader browse mode could walk into
   "closed" panels while the trigger says aria-expanded="false"). Visibility
   transitions discretely — it flips at the END of the close animation and
   instantly on open — so the motion is unaffected. */
.hi-ui-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  visibility: hidden;
  transition:
    grid-template-rows 0.2s ease,
    visibility 0.2s;
}

.hi-ui-accordion__item--expanded .hi-ui-accordion__panel {
  grid-template-rows: 1fr;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .hi-ui-accordion__panel {
    transition: none;
  }
}

/* Content wrapper - needed for grid animation */
.hi-ui-accordion__content {
  min-height: 0;
  overflow: hidden;
}

.hi-ui-accordion__item--expanded .hi-ui-accordion__content {
  padding-bottom: 16px;
}

/* Content text styling */
.hi-ui-accordion__content {
  font-family: var(--hi-text-font-family);
  font-size: 14px;
  line-height: 1.5;
  color: #4b5563;
}

/* When the open content also toggles the item (toggleOnContentClick). */
.hi-ui-accordion__content--clickable {
  cursor: pointer;
}

/* Two-bar arrow icon (legacy presales FAQ chevron). Two short bars form a
   chevron; the rotation flips with the item's expanded state. Independent of
   the animation variant. */
.hi-ui-accordion__arrow {
  position: relative;
  flex-shrink: 0;
  align-self: center;
  width: 14px;
  height: 14px;
  color: #6b7280;
}

.hi-ui-accordion__arrow::before,
.hi-ui-accordion__arrow::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 6px;
  width: 3px;
  height: 9px;
  background-color: currentColor;
  transition: transform 0.25s ease-in-out;
}

/* Collapsed: chevron points down. */
.hi-ui-accordion__arrow::before {
  transform: translate(2px, 0) rotate(45deg);
}

.hi-ui-accordion__arrow::after {
  transform: translate(-2px, 0) rotate(-45deg);
}

/* Expanded: chevron points up. */
.hi-ui-accordion__item--expanded .hi-ui-accordion__arrow::before {
  transform: translate(-2px, 0) rotate(45deg);
}

.hi-ui-accordion__item--expanded .hi-ui-accordion__arrow::after {
  transform: translate(2px, 0) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .hi-ui-accordion__arrow::before,
  .hi-ui-accordion__arrow::after {
    transition: none;
  }
}

/* ── slide-fade variant ──────────────────────────────────────────────────────
   Legacy presales FAQ motion: the panel animates max-height + opacity + a small
   translateY slide (instead of the default grid-rows collapse), and each item
   flips in on mount. Opt-in via `animation="slide-fade"`. */
.hi-ui-accordion--slide-fade .hi-ui-accordion__panel {
  display: block;
  transition: none;
  /* The a11y hiding lives on __content in this variant (the panel has no
     transition, so hiding here would cut the close animation short). */
  visibility: visible;
}

/* Collapsed content is hidden from the accessibility tree too (see the
   default panel rule); the existing `all` transition carries visibility, so
   it flips after the close animation and instantly on open. */
.hi-ui-accordion--slide-fade .hi-ui-accordion__content {
  max-height: 0;
  opacity: 0;
  transform: translateY(50%);
  visibility: hidden;
  transition: all 0.25s ease-in-out;
}

.hi-ui-accordion--slide-fade .hi-ui-accordion__item--expanded .hi-ui-accordion__content {
  /* Capped height (legacy hack) — large enough for any FAQ answer. */
  max-height: 800px;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.hi-ui-accordion--slide-fade .hi-ui-accordion__item {
  animation: hi-ui-accordion-flipdown 0.5s ease both;
}

@keyframes hi-ui-accordion-flipdown {
  0% {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
  }
  80% {
    transform: rotateX(8deg);
  }
  83% {
    transform: rotateX(6deg);
  }
  92% {
    transform: rotateX(-3deg);
  }
  100% {
    transform-origin: top center;
    transform: rotateX(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hi-ui-accordion--slide-fade .hi-ui-accordion__content {
    transition: none;
  }

  .hi-ui-accordion--slide-fade .hi-ui-accordion__item {
    animation: none;
  }
}

/* AccountButton styles - CSS-only hover dropdown */

#hi-ui-topnav .hi-ui-account-button {
  display: inline-block;
  position: relative;
}

/* AccountButton specific styling - applies to both login button and account dropdown button */
#hi-ui-topnav .hi-ui-account-button .tw-btn-base,
#hi-ui-topnav .hi-ui-topnav-right > .tw-btn-base.tw-btn-success {
  font-size: 11px !important;
  line-height: 1 !important;
  border-radius: 5px;
  padding: 7px 5px 6px 8px !important;
  height: 28px !important;
  gap: 8px;
  color: #ffffff !important;
}

/* Ensure login button text and icon are white - override legacy page styles */
#hi-ui-topnav .hi-ui-account-button .tw-btn-base *,
#hi-ui-topnav .hi-ui-topnav-right > .tw-btn-base.tw-btn-success,
#hi-ui-topnav .hi-ui-topnav-right > .tw-btn-base.tw-btn-success * {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Override legacy _shared.css button styles (cpanel/mwp pages) */
#hi-ui-topnav .hi-ui-account-button .tw-btn-base {
  box-shadow: none !important;
  top: auto !important;
  position: relative !important;
}

#hi-ui-topnav .hi-ui-account-button .tw-btn-base:active {
  box-shadow: none !important;
  top: auto !important;
}

#hi-ui-topnav .hi-ui-account-button .tw-btn-base svg,
#hi-ui-topnav .hi-ui-account-button .tw-btn-base img {
  width: 13px !important;
  height: 13px !important;
  margin-left: 0 !important;
  position: relative !important;
  top: -1px !important;
}

/* Button hover state - applies when hovering button OR when hovering the parent container (which includes the dropdown) */
#hi-ui-topnav .hi-ui-account-button .tw-btn-base:hover,
#hi-ui-topnav .hi-ui-account-button:hover .tw-btn-base,
#hi-ui-topnav .hi-ui-topnav-right > .tw-btn-base.tw-btn-success:hover {
  background-color: #0d4e46 !important;
}

/* Dropdown menu - hidden by default */
#hi-ui-topnav .hi-ui-account-button-menu {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  top: 100%;
  right: 0;
  background: #0d4e46;
  border-radius: 6px;
  margin-top: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
  z-index: 1000;
}

/* Show dropdown on hover or when keyboard-opened */
#hi-ui-topnav .hi-ui-account-button:hover .hi-ui-account-button-menu,
#hi-ui-topnav .hi-ui-account-button-menu-keyboard-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Dropdown links - use ID selector for highest precedence over page content styles */
#hi-ui-topnav .hi-ui-account-button-link {
  display: flex;
  align-items: center;
  padding: 9px 10px;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  font-family: 'MuseoSansRounded-700', 'MuseoSansRounded-700 Fallback', sans-serif;
  transition: background-color 0.15s ease;
  text-transform: uppercase;
  white-space: nowrap;
}

#hi-ui-topnav .hi-ui-account-button-link:hover {
  text-decoration: none;
}

#hi-ui-topnav .hi-ui-account-button-link:last-child {
  border-bottom: none;
}

#hi-ui-topnav .hi-ui-account-button-link:first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#hi-ui-topnav .hi-ui-account-button-link:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

/* Breadcrumbs Component Styles */

#hi-ui-breadcrumbs.hi-ui-breadcrumbs {
  padding: 0;
  margin: 0;
}

/* Ensure the list wraps properly */
#hi-ui-breadcrumbs ol {
  flex-wrap: wrap;
  margin: 0;
}

/* Keep each breadcrumb item's text together */
#hi-ui-breadcrumbs .hi-ui-list-item {
  white-space: nowrap;
  margin: 0;
}

#hi-ui-breadcrumbs a.hi-ui-link,
#hi-ui-breadcrumbs .hi-ui-text {
  font-family:
    MuseoSansRounded-300,
    'MuseoSansRounded-300 Fallback',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  font-size: 12px;
  font-weight: normal;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

#hi-ui-breadcrumbs a.hi-ui-link {
  text-decoration: underline;
}

#hi-ui-breadcrumbs a.hi-ui-link:hover {
  text-decoration: none;
  opacity: 1;
}

/* Card container */
.hi-ui-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

/* Variants */
.hi-ui-card--default {
  border: 1px solid #e5e7eb;
}

.hi-ui-card--elevated {
  border: none;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.hi-ui-card--outlined {
  border: 2px solid #d1d5db;
}

.hi-ui-card--surface {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

/* Interactive states */
.hi-ui-card--interactive {
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.hi-ui-card--interactive:hover {
  transform: translateY(-2px);
}

.hi-ui-card--interactive.hi-ui-card--default:hover {
  border-color: #d1d5db;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.hi-ui-card--interactive.hi-ui-card--elevated:hover {
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.hi-ui-card--interactive.hi-ui-card--outlined:hover {
  border-color: #9ca3af;
}

.hi-ui-card--interactive:focus-visible {
  outline: var(--hi-focus-ring-width) solid var(--hi-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .hi-ui-card--interactive {
    transition: none;
  }

  .hi-ui-card--interactive:hover {
    transform: none;
  }
}

/* Cover image */
.hi-ui-card__cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex-shrink: 0;
}

.hi-ui-card__cover-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Header */
.hi-ui-card__header {
  flex-shrink: 0;
}

/* Body */
.hi-ui-card__body {
  flex: 1;
}

/* Footer */
.hi-ui-card__footer {
  flex-shrink: 0;
}

/* Padding variants - applied to header, body, footer */
.hi-ui-card--padding-none .hi-ui-card__header,
.hi-ui-card--padding-none .hi-ui-card__body,
.hi-ui-card--padding-none .hi-ui-card__footer {
  padding: 0;
}

.hi-ui-card--padding-sm .hi-ui-card__header,
.hi-ui-card--padding-sm .hi-ui-card__body,
.hi-ui-card--padding-sm .hi-ui-card__footer {
  padding: 12px;
}

.hi-ui-card--padding-md .hi-ui-card__header,
.hi-ui-card--padding-md .hi-ui-card__body,
.hi-ui-card--padding-md .hi-ui-card__footer {
  padding: 24px;
}

@media (max-width: 768px) {
  .hi-ui-card--padding-md .hi-ui-card__header,
  .hi-ui-card--padding-md .hi-ui-card__body,
  .hi-ui-card--padding-md .hi-ui-card__footer {
    padding: 16px;
  }
}

.hi-ui-card--padding-lg .hi-ui-card__header,
.hi-ui-card--padding-lg .hi-ui-card__body,
.hi-ui-card--padding-lg .hi-ui-card__footer {
  padding: 24px;
}

/* Header border - only when there's content after it */
.hi-ui-card__header:not(:last-child) {
  border-bottom: 1px solid #f3f4f6;
}

/* Footer border - only when there's content before it */
.hi-ui-card__footer:not(:first-child) {
  border-top: 1px solid #f3f4f6;
}

/* Title row */
.hi-ui-card__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hi-ui-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: #1f2937;
}

.hi-ui-card__title-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Actions container */
.hi-ui-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hi-ui-card__actions--start {
  justify-content: flex-start;
}

.hi-ui-card__actions--center {
  justify-content: center;
}

.hi-ui-card__actions--end {
  justify-content: flex-end;
}

.hi-ui-card__actions--between {
  justify-content: space-between;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .hi-ui-card__title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .hi-ui-card__actions {
    width: 100%;
  }

  .hi-ui-card__actions--end,
  .hi-ui-card__actions--between {
    flex-direction: column;
  }

  .hi-ui-card__actions--end > *,
  .hi-ui-card__actions--between > * {
    width: 100%;
  }
}

/* High contrast mode */
@media (prefers-contrast: more) {
  .hi-ui-card--default,
  .hi-ui-card--outlined {
    border-width: 2px;
    border-color: #000000;
  }

  .hi-ui-card--elevated {
    border: 2px solid #000000;
    box-shadow: none;
  }

  .hi-ui-card--interactive:focus-visible {
    outline-width: 3px;
  }

  .hi-ui-card__header {
    border-bottom-color: #000000;
  }

  .hi-ui-card__footer {
    border-top-color: #000000;
  }
}

/* ===================================================
   CardSelector Component Styles
   =================================================== */

/* CSS Custom Properties */
:root {
  --hi-cs-bg: #ffffff;
  --hi-cs-border-color: #d1d5db;
  --hi-cs-border-color-hover: #9ca3af;
  --hi-cs-border-color-selected: #256957;
  --hi-cs-border-color-focus: #3b82f6;
  --hi-cs-border-radius: 8px;
  --hi-cs-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  --hi-cs-shadow-hover: 0 4px 6px rgba(0, 0, 0, 0.07);
  --hi-cs-text-color: #2b2b2b;
  --hi-cs-text-color-muted: #6b7280;
  --hi-cs-font-family: var(
    --hi-text-font-family,
    MuseoSansRounded-300,
    'MuseoSansRounded-300 Fallback',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif
  );
}

/* Fieldset wrapper (optional) */
.hi-ui-card-selector__fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.hi-ui-card-selector__legend {
  font-family: var(--hi-cs-font-family);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--hi-cs-text-color);
  margin-bottom: 0.75rem;
  padding: 0;
}

.hi-ui-card-selector__legend--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Grid container */
.hi-ui-card-selector {
  display: grid;
  gap: 0.75rem;
  font-family: var(--hi-cs-font-family);
}

/* Column variants */
.hi-ui-card-selector--cols-1 {
  grid-template-columns: 1fr;
}

.hi-ui-card-selector--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.hi-ui-card-selector--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.hi-ui-card-selector--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Mobile responsive - stack on small screens */
@media (max-width: 768px) {
  .hi-ui-card-selector--cols-2,
  .hi-ui-card-selector--cols-3,
  .hi-ui-card-selector--cols-4 {
    grid-template-columns: 1fr;
  }
}

/* Individual card */
.hi-ui-card-selector__card {
  position: relative;
  background: var(--hi-cs-bg);
  border: 2px solid var(--hi-cs-border-color);
  border-radius: var(--hi-cs-border-radius);
  box-shadow: var(--hi-cs-shadow);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.hi-ui-card-selector__card:hover:not(.hi-ui-card-selector__card--disabled) {
  border-color: var(--hi-cs-border-color-hover);
  box-shadow: var(--hi-cs-shadow-hover);
}

/* Selected state */
.hi-ui-card-selector__card--selected {
  border-color: var(--hi-cs-border-color-selected);
  background-color: rgba(37, 105, 87, 0.03);
}

.hi-ui-card-selector__card--selected:hover:not(.hi-ui-card-selector__card--disabled) {
  border-color: var(--hi-cs-border-color-selected);
}

/* Disabled state */
.hi-ui-card-selector__card--disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background-color: #f9fafb;
}

.hi-ui-card-selector--disabled .hi-ui-card-selector__card {
  cursor: not-allowed;
  opacity: 0.5;
  background-color: #f9fafb;
}

/* Style the Radio/Checkbox inside the card */
.hi-ui-card-selector__card .hi-ui-radio,
.hi-ui-card-selector__card .hi-ui-checkbox {
  display: flex;
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
  cursor: pointer;
}

.hi-ui-card-selector__card--disabled .hi-ui-radio,
.hi-ui-card-selector__card--disabled .hi-ui-checkbox {
  cursor: not-allowed;
}

/* Override the label flex to allow content to grow */
.hi-ui-card-selector__card .hi-ui-radio-label,
.hi-ui-card-selector__card .hi-ui-checkbox-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Focus state on card when input is focused */
.hi-ui-card-selector__card:has(.hi-ui-radio-input:focus-visible),
.hi-ui-card-selector__card:has(.hi-ui-checkbox-input:focus-visible) {
  outline: 2px solid var(--hi-cs-border-color-focus);
  outline-offset: 2px;
}

/* Content area */
.hi-ui-card-selector__content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

/* Icon */
.hi-ui-card-selector__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--hi-cs-text-color);
}

.hi-ui-card-selector__icon svg {
  width: 100%;
  height: 100%;
}

/* Text container */
.hi-ui-card-selector__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

/* Label */
.hi-ui-card-selector__label {
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--hi-cs-text-color);
}

/* Description */
.hi-ui-card-selector__description {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--hi-cs-text-color-muted);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ===================================================
   Size Variants
   =================================================== */

/* Small */
.hi-ui-card-selector--sm .hi-ui-card-selector__card .hi-ui-radio,
.hi-ui-card-selector--sm .hi-ui-card-selector__card .hi-ui-checkbox {
  padding: 0.75rem;
}

.hi-ui-card-selector--sm .hi-ui-card-selector__content {
  gap: 0.5rem;
}

.hi-ui-card-selector--sm .hi-ui-card-selector__icon {
  width: 20px;
  height: 20px;
}

.hi-ui-card-selector--sm .hi-ui-card-selector__label {
  font-size: 0.875rem;
}

.hi-ui-card-selector--sm .hi-ui-card-selector__description {
  font-size: 0.75rem;
}

/* Large */
.hi-ui-card-selector--lg .hi-ui-card-selector__card .hi-ui-radio,
.hi-ui-card-selector--lg .hi-ui-card-selector__card .hi-ui-checkbox {
  padding: 1.25rem;
}

.hi-ui-card-selector--lg .hi-ui-card-selector__content {
  gap: 1rem;
}

.hi-ui-card-selector--lg .hi-ui-card-selector__icon {
  width: 32px;
  height: 32px;
}

.hi-ui-card-selector--lg .hi-ui-card-selector__label {
  font-size: 1rem;
}

.hi-ui-card-selector--lg .hi-ui-card-selector__description {
  font-size: 0.875rem;
}

/* ===================================================
   Accessibility
   =================================================== */

/* High contrast mode */
@media (prefers-contrast: more) {
  .hi-ui-card-selector__card {
    border-width: 3px;
  }

  .hi-ui-card-selector__card--selected {
    border-color: #000000;
    background-color: #e5e5e5;
  }

  .hi-ui-card-selector__card:has(.hi-ui-radio-input:focus-visible),
  .hi-ui-card-selector__card:has(.hi-ui-checkbox-input:focus-visible) {
    outline-width: 3px;
    outline-color: #000000;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hi-ui-card-selector__card {
    transition: none;
  }
}

/* Body scroll lock when modal is open */
body.hi-ui-modal-open {
  overflow: hidden;
}

/* Native dialog reset and base styles */
.hi-ui-modal {
  border: none;
  padding: 0;
  max-width: none;
  max-height: 90vh;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  outline: none;
  box-sizing: border-box;
  animation: hi-ui-modal-in 0.3s ease forwards;
}

.hi-ui-modal--closing {
  animation: hi-ui-modal-out 0.3s ease forwards;
}

/* Native backdrop */
.hi-ui-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  animation: hi-ui-modal-backdrop-in 0.3s ease forwards;
}

.hi-ui-modal--closing::backdrop {
  animation: hi-ui-modal-backdrop-out 0.3s ease forwards;
}

/* Animations */
@keyframes hi-ui-modal-in {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes hi-ui-modal-out {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.95);
    opacity: 0;
  }
}

@keyframes hi-ui-modal-backdrop-in {
  from {
    background-color: rgba(0, 0, 0, 0);
  }
  to {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

@keyframes hi-ui-modal-backdrop-out {
  from {
    background-color: rgba(0, 0, 0, 0.5);
  }
  to {
    background-color: rgba(0, 0, 0, 0);
  }
}

/* Size variants */
.hi-ui-modal--small {
  width: 400px;
  max-width: calc(100vw - 32px);
}

.hi-ui-modal--medium {
  width: 600px;
  max-width: calc(100vw - 32px);
}

.hi-ui-modal--large {
  width: 850px;
  max-width: calc(100vw - 32px);
}

/* Close button */
.hi-ui-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #2b2b2b;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  padding: 0;
}

.hi-ui-modal__close:hover {
  background-color: #f3f4f6;
  color: #374151;
}

.hi-ui-modal__close:focus-visible {
  outline: var(--hi-focus-ring-width) solid var(--hi-focus-ring);
  outline-offset: var(--hi-focus-ring-offset);
}

/* Title */
.hi-ui-modal__title {
  margin: 0;
  padding: 32px 48px 0 20px;
  font-family: 'MuseoSansRounded-700', 'MuseoSansRounded-700 Fallback', sans-serif;
  font-size: 1.25rem;
  color: #111827;
  line-height: 1.4;
}

/* Body */
.hi-ui-modal__body {
  /* flex-basis auto (not 0) + min-height:0 so the body sizes to its content in
     WebKit - a flex column with only max-height would otherwise collapse the
     body to ~0 height in Safari. Shrinks and scrolls when content exceeds 90vh. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
  box-sizing: border-box;
  /* Raw text children (e.g. ConfirmationDialog's message) would otherwise fall back
     to the browser default serif — the title already sets a font, so match it for the
     body. Component-styled content (Text, Input…) sets its own font and is unaffected. */
  font-family: var(--hi-text-font-family);
}

/* When there's a title, reduce top padding on body */
.hi-ui-modal__title + .hi-ui-modal__body {
  padding-top: 16px;
}

/* Footer */
.hi-ui-modal__footer {
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-start;
  gap: 12px;
}

/* Responsive: Medium and Large go full-screen on mobile */
@media (max-width: 768px) {
  .hi-ui-modal--medium,
  .hi-ui-modal--large {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .hi-ui-modal--medium .hi-ui-modal__body,
  .hi-ui-modal--large .hi-ui-modal__body {
    flex: 1;
  }

  /* Small modals stay centered but have some padding */
  .hi-ui-modal--small {
    width: calc(100vw - 32px);
    max-width: 400px;
  }

  /* Footer buttons stack full-width on mobile */
  .hi-ui-modal__footer {
    flex-direction: column;
  }

  .hi-ui-modal__footer > *,
  .hi-ui-modal__footer > * > * {
    width: 100%;
  }

  /* Reverse order so primary action is on top */
  .hi-ui-modal__footer > * {
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
  }
}

/* =============================================================================
   ConfirmationDialog Component Styles
   ============================================================================= */

.hi-ui-confirmation-dialog .hi-ui-modal__body {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #4b5563;
}

/* ===================================================
   FeatureCard Component
   =================================================== */

.hi-ui-feature-card {
  --hi-fc-bg: var(--hi-bg-primary, #ffffff);
  --hi-fc-border-color: var(--hi-border-color, #e5e7eb);
  --hi-fc-border-radius: 0.5rem;
  --hi-fc-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --hi-fc-title-color: var(--hi-text-color-primary, #111827);
  --hi-fc-subtitle-color: var(--hi-text-color-secondary, #6b7280);
  --hi-fc-feature-color: var(--hi-text-color-primary, #111827);
  --hi-fc-included-color: var(--hi-color-success, #059669);
  --hi-fc-excluded-color: var(--hi-text-color-tertiary, #9ca3af);
  --hi-fc-highlight-color: var(--hi-color-primary, #4e8c97);
  --hi-fc-badge-bg: var(--hi-color-primary, #4e8c97);
  --hi-fc-badge-color: #ffffff;
  --hi-fc-font-family: var(--hi-text-font-family, system-ui, sans-serif);

  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--hi-fc-bg);
  border: 1px solid var(--hi-fc-border-color);
  border-radius: var(--hi-fc-border-radius);
  box-shadow: var(--hi-fc-shadow);
  font-family: var(--hi-fc-font-family);
}

/* Cards with badges need top margin for the badge to show */
.hi-ui-feature-card:has(.hi-ui-feature-card__badge) {
  margin-top: 0.875rem;
}

/* ===================================================
   Badge
   =================================================== */

.hi-ui-feature-card__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: var(--hi-fc-badge-bg);
  color: var(--hi-fc-badge-color);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  white-space: nowrap;
}

/* ===================================================
   Header
   =================================================== */

.hi-ui-feature-card__header {
  padding: 1.5rem 1.5rem 0.5rem;
  text-align: center;
}

.hi-ui-feature-card__badge + .hi-ui-feature-card__header {
  padding-top: 2rem;
}

.hi-ui-feature-card__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--hi-fc-title-color);
  line-height: 1.3;
}

.hi-ui-feature-card__subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--hi-fc-subtitle-color);
  line-height: 1.4;
}

.hi-ui-feature-card__price {
  margin-top: 1rem;
}

/* ===================================================
   Features List
   =================================================== */

.hi-ui-feature-card__features {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--hi-fc-border-color);
  border-bottom: 1px solid var(--hi-fc-border-color);
}

.hi-ui-feature-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.25rem 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--hi-fc-feature-color);
}

.hi-ui-feature-card__feature--excluded {
  color: var(--hi-fc-excluded-color);
}

.hi-ui-feature-card__feature--excluded .hi-ui-feature-card__feature-text {
  text-decoration: line-through;
}

.hi-ui-feature-card__feature-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hi-ui-feature-card__feature-icon svg {
  width: 1rem;
  height: 1rem;
}

.hi-ui-feature-card__feature--included .hi-ui-feature-card__feature-icon {
  color: var(--hi-fc-included-color);
}

.hi-ui-feature-card__feature--excluded .hi-ui-feature-card__feature-icon {
  color: var(--hi-fc-excluded-color);
}

.hi-ui-feature-card__feature-text {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.hi-ui-feature-card__feature-info {
  display: inline-flex;
  align-items: center;
  color: var(--hi-fc-subtitle-color);
  cursor: help;
}

.hi-ui-feature-card__feature-info svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* ===================================================
   Actions Footer
   =================================================== */

.hi-ui-feature-card__actions {
  padding: 0.5rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ===================================================
   Highlighted Variant
   =================================================== */

.hi-ui-feature-card--highlighted {
  border-color: var(--hi-fc-highlight-color);
  border-width: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ===================================================
   Disabled State
   =================================================== */

.hi-ui-feature-card--disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* ===================================================
   Accessibility
   =================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-contrast: high) {
  .hi-ui-feature-card {
    border-width: 2px;
  }

  .hi-ui-feature-card--highlighted {
    border-width: 3px;
  }

  .hi-ui-feature-card__feature--excluded .hi-ui-feature-card__feature-text {
    text-decoration-thickness: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hi-ui-feature-card,
  .hi-ui-feature-card * {
    transition: none !important;
  }
}

/* ===================================================
   Mobile Responsive
   =================================================== */

@media (max-width: 768px) {
  .hi-ui-feature-card__header {
    padding: 1.25rem 1rem 0.75rem;
  }

  .hi-ui-feature-card__badge + .hi-ui-feature-card__header {
    padding-top: 1.75rem;
  }

  .hi-ui-feature-card__title {
    font-size: 1.125rem;
  }

  .hi-ui-feature-card__features {
    padding: 0.75rem 1rem;
  }

  .hi-ui-feature-card__feature {
    padding: 0.375rem 0;
    font-size: 0.8125rem;
  }

  .hi-ui-feature-card__actions {
    padding: 0.75rem 1rem 1.25rem;
  }
}

/* ===================================================
   FilterableSelect Component Styles
   =================================================== */

/* CSS Custom Properties */
:root {
  --hi-fs-bg: var(--hi-input-bg, #ffffff);
  --hi-fs-border-color: var(--hi-input-border-color, #d1d5db);
  --hi-fs-border-color-hover: var(--hi-input-border-color-hover, #9ca3af);
  --hi-fs-border-color-focus: var(--hi-input-border-color-focus, #3b82f6);
  --hi-fs-border-color-error: var(--hi-input-border-color-error, #ef4444);
  --hi-fs-border-color-success: var(--hi-input-border-color-success, #10b981);
  --hi-fs-border-radius: var(--hi-input-border-radius, 0.375rem);
  --hi-fs-text-color: var(--hi-input-text-color, #2b2b2b);
  --hi-fs-text-color-placeholder: var(--hi-input-text-color-placeholder, #9ca3af);
  --hi-fs-text-color-disabled: var(--hi-input-text-color-disabled, #6b7280);
  --hi-fs-bg-disabled: var(--hi-input-bg-disabled, #f3f4f6);
  --hi-fs-focus-ring: var(--hi-input-focus-ring, 0 0 0 3px rgba(59, 130, 246, 0.1));
  --hi-fs-font-family: var(
    --hi-text-font-family,
    MuseoSansRounded-300,
    'MuseoSansRounded-300 Fallback',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif
  );
  --hi-fs-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  --hi-fs-dropdown-max-height: 240px;
  --hi-fs-option-bg-hover: #f3f4f6;
  --hi-fs-option-bg-selected: rgba(37, 105, 87, 0.06);
  --hi-fs-option-bg-highlighted: #e5e7eb;
  --hi-fs-group-header-color: #6b7280;
  --hi-fs-z-index: 1000;
}

/* ===================================================
   Container
   =================================================== */

.hi-ui-filterable-select {
  position: relative;
  display: inline-block;
  max-width: 100%;
  font-family: var(--hi-fs-font-family);
}

.hi-ui-filterable-select--full-width {
  width: 100%;
  display: block;
}

/* Hidden sizer — contains all option labels to set natural width */
.hi-ui-filterable-select__sizer {
  display: flex;
  flex-direction: column;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  padding: 0 2rem 0 0.625rem;
}

/* ===================================================
   Trigger Button
   =================================================== */

.hi-ui-filterable-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--hi-fs-bg);
  border: 1px solid var(--hi-fs-border-color);
  border-radius: var(--hi-fs-border-radius);
  cursor: pointer;
  text-align: left;
  font-family: var(--hi-fs-font-family);
  color: var(--hi-fs-text-color);
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.hi-ui-filterable-select__trigger:hover:not(:disabled) {
  border-color: var(--hi-fs-border-color-hover);
}

.hi-ui-filterable-select__trigger:focus-visible {
  border-color: var(--hi-fs-border-color-focus);
  box-shadow: var(--hi-fs-focus-ring);
  outline: none;
}

/* Placeholder text */
.hi-ui-filterable-select__trigger-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Placeholder uses same text colour as native select default option */

/* Icons area */
.hi-ui-filterable-select__trigger-icons {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

/* Arrow icon */
.hi-ui-filterable-select__arrow {
  display: flex;
  align-items: center;
  color: var(--hi-fs-text-color);
  transition: transform 0.15s ease;
}

.hi-ui-filterable-select--open .hi-ui-filterable-select__arrow {
  transform: rotate(180deg);
}

/* Clear button */
.hi-ui-filterable-select__clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: 2px;
  color: var(--hi-fs-text-color);
  cursor: pointer;
}

.hi-ui-filterable-select__clear-btn:focus-visible {
  outline: 2px solid var(--hi-fs-border-color-focus);
  outline-offset: 1px;
}

/* ===================================================
   Size Variants — match Select/Input atom sizing
   =================================================== */

/* Small */
.hi-ui-filterable-select--sm .hi-ui-filterable-select__trigger {
  padding: var(--hi-input-padding-sm, 0.375rem 0.625rem);
  font-size: var(--hi-input-font-size-sm, 0.875rem);
  line-height: var(--hi-input-line-height-sm, 1.25rem);
}

/* Medium (mobile-first: uses sm sizing, like Input/Select atoms) */
.hi-ui-filterable-select--md .hi-ui-filterable-select__trigger {
  padding: var(--hi-input-padding-sm, 0.375rem 0.625rem);
  font-size: var(--hi-input-font-size-sm, 0.875rem);
  line-height: var(--hi-input-line-height-sm, 1.25rem);
}

/* Medium — desktop: scale up to md values */
@media (min-width: 768px) {
  .hi-ui-filterable-select--md .hi-ui-filterable-select__trigger {
    padding: var(--hi-input-padding-md, 0.5rem 0.75rem);
    font-size: var(--hi-input-font-size-md, 1rem);
    line-height: var(--hi-input-line-height-md, 1.5rem);
  }
}

/* Large */
.hi-ui-filterable-select--lg .hi-ui-filterable-select__trigger {
  padding: var(--hi-input-padding-lg, 0.625rem 1rem);
  font-size: var(--hi-input-font-size-lg, 1.125rem);
  line-height: var(--hi-input-line-height-lg, 1.75rem);
}

/* ===================================================
   State Variants
   =================================================== */

.hi-ui-filterable-select--state-error .hi-ui-filterable-select__trigger {
  border-color: var(--hi-fs-border-color-error);
}

.hi-ui-filterable-select--state-error .hi-ui-filterable-select__trigger:focus-visible {
  border-color: var(--hi-fs-border-color-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.hi-ui-filterable-select--state-success .hi-ui-filterable-select__trigger {
  border-color: var(--hi-fs-border-color-success);
}

.hi-ui-filterable-select--state-success .hi-ui-filterable-select__trigger:focus-visible {
  border-color: var(--hi-fs-border-color-success);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Disabled */
.hi-ui-filterable-select--disabled .hi-ui-filterable-select__trigger {
  background-color: var(--hi-fs-bg-disabled);
  color: var(--hi-fs-text-color-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ===================================================
   Dropdown
   =================================================== */

.hi-ui-filterable-select__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--hi-fs-z-index);
  background: var(--hi-fs-bg);
  border: 1px solid var(--hi-fs-border-color);
  border-radius: var(--hi-fs-border-radius);
  box-shadow: var(--hi-fs-dropdown-shadow);
  overflow: hidden;
}

/* Search container */
.hi-ui-filterable-select__search-container {
  padding: 0.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.hi-ui-filterable-select__search {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--hi-fs-font-family);
  font-size: var(--hi-input-font-size-sm, 0.875rem);
  line-height: var(--hi-input-line-height-sm, 1.25rem);
  padding: var(--hi-input-padding-sm, 0.375rem 0.625rem);
  color: var(--hi-fs-text-color);
  background: var(--hi-fs-bg);
  border: 1px solid var(--hi-fs-border-color);
  border-radius: var(--hi-fs-border-radius);
  outline: none;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.hi-ui-filterable-select__search::-moz-placeholder {
  color: var(--hi-fs-text-color-placeholder);
  opacity: 1;
}

.hi-ui-filterable-select__search::placeholder {
  color: var(--hi-fs-text-color-placeholder);
  opacity: 1;
}

.hi-ui-filterable-select__search:focus {
  border-color: var(--hi-fs-border-color-focus);
  box-shadow: var(--hi-fs-focus-ring);
}

/* Remove webkit search cancel button for consistent styling */
.hi-ui-filterable-select__search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Listbox */
.hi-ui-filterable-select__listbox {
  max-height: var(--hi-fs-dropdown-max-height);
  overflow-y: auto;
  padding: 0.25rem 0;
}

/* ===================================================
   Options
   =================================================== */

.hi-ui-filterable-select__option {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: inherit;
  line-height: 1.4;
  color: var(--hi-fs-text-color);
  min-height: 32px;
  display: flex;
  align-items: center;
}

.hi-ui-filterable-select__option--highlighted {
  background-color: var(--hi-fs-option-bg-highlighted);
}

.hi-ui-filterable-select__option--selected {
  background-color: var(--hi-fs-option-bg-selected);
  font-weight: 500;
}

.hi-ui-filterable-select__option--selected.hi-ui-filterable-select__option--highlighted {
  background-color: var(--hi-fs-option-bg-highlighted);
}

.hi-ui-filterable-select__option--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Group header */
.hi-ui-filterable-select__group-header {
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hi-fs-group-header-color);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* No results */
.hi-ui-filterable-select__no-results {
  padding: 0.75rem;
  text-align: center;
  color: var(--hi-fs-text-color-placeholder);
  font-style: italic;
}

/* Screen reader only — visually hidden live region */
.hi-ui-filterable-select__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===================================================
   Mobile Responsive
   =================================================== */

@media (max-width: 768px) {
  /* Touch targets on mobile */
  .hi-ui-filterable-select__option {
    min-height: 32px;
    padding: 0.625rem 0.75rem;
  }

  /* Limit dropdown height to viewport on small screens */
  .hi-ui-filterable-select__listbox {
    max-height: 50vh;
  }

  /* Prevent iOS auto-zoom on input focus */
  .hi-ui-filterable-select__search {
    font-size: 16px;
  }
}

/* ===================================================
   Accessibility
   =================================================== */

/* High contrast mode */
@media (prefers-contrast: more) {
  .hi-ui-filterable-select__trigger {
    border-width: 2px;
  }

  .hi-ui-filterable-select__option--highlighted {
    outline: 2px solid #000000;
    outline-offset: -2px;
  }

  .hi-ui-filterable-select__option--selected {
    background-color: #e5e5e5;
  }

  .hi-ui-filterable-select__dropdown {
    border-width: 2px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hi-ui-filterable-select__trigger,
  .hi-ui-filterable-select__arrow,
  .hi-ui-filterable-select__search {
    transition: none;
  }
}

/* ===================================================
   Form Component Styles
   =================================================== */

/* Base */
.hi-ui-form {
  display: block;
}

/* Fieldset reset - remove default fieldset styling */
.hi-ui-form-fieldset {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* Submitting state */
.hi-ui-form-submitting {
  opacity: 0.7;
  pointer-events: none;
}

/* Error summary spacing */
.hi-ui-form-error-summary {
  margin-bottom: 1rem;
}

/* ===================================================
   FormField Component Styles
   =================================================== */

/* Base */
.hi-ui-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Full width */
.hi-ui-form-field-full-width {
  width: 100%;
}

.hi-ui-form-field-full-width .hi-ui-form-field-control > * {
  width: 100%;
}

/* Label */
.hi-ui-form-field-label {
  display: block;
}

/* Required asterisk */
.hi-ui-form-field-required {
  color: var(--hi-color-error, #ef4444);
}

/* Screen reader only label */
.hi-ui-form-field-label-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Control wrapper */
.hi-ui-form-field-control {
  display: flex;
  flex-direction: column;
}

/* Message area */

.hi-ui-form-field-error,
.hi-ui-form-field-success,
.hi-ui-form-field-helper {
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* Label position: top (default vertical layout) */
.hi-ui-form-field-label-top {
  flex-direction: column;
}

/* Label position: left (horizontal layout on desktop, vertical on mobile) */
@media (min-width: 768px) {
  .hi-ui-form-field-label-left {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }

  .hi-ui-form-field-label-left .hi-ui-form-field-label {
    min-width: 120px;
    flex-shrink: 0;
  }

  .hi-ui-form-field-label-left .hi-ui-form-field-control {
    flex: 1;
  }
}

/* Label position: hidden */
.hi-ui-form-field-label-hidden {
  /* No visual changes needed, label is sr-only */
}

/* =============================================================================
   InlineEdit Component Styles
   ============================================================================= */

.hi-ui-inline-edit {
  --hi-inline-edit-text: #374151;
  --hi-inline-edit-border: #d1d5db;
  --hi-inline-edit-focus: #4e8c97;
  --hi-inline-edit-placeholder: #9ca3af;
  --hi-inline-edit-font-family:
    HiUiMuseoSansRounded-500, 'HiUiMuseoSansRounded-500 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;
  --hi-inline-edit-height: 2rem;

  display: inline-flex;
  font-family: var(--hi-inline-edit-font-family);
  height: var(--hi-inline-edit-height);
}

/* =============================================================================
   Display Mode
   ============================================================================= */

.hi-ui-inline-edit__display {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 100%;
}

.hi-ui-inline-edit__value {
  font-size: 0.875rem;
  color: var(--hi-inline-edit-text);
  line-height: 1;
}

.hi-ui-inline-edit__placeholder {
  color: var(--hi-inline-edit-placeholder);
  font-style: italic;
}

.hi-ui-inline-edit__edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: none;
  color: #6b7280;
  cursor: pointer;
  border-radius: 4px;
  transition:
    color 0.15s,
    background-color 0.15s;
}

.hi-ui-inline-edit__edit:hover {
  color: var(--hi-inline-edit-focus);
  background-color: #f3f4f6;
}

.hi-ui-inline-edit__edit:focus-visible {
  outline: 2px solid var(--hi-inline-edit-focus);
  outline-offset: 2px;
}

.hi-ui-inline-edit__edit svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* =============================================================================
   Edit Mode
   ============================================================================= */

.hi-ui-inline-edit__form {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 100%;
}

.hi-ui-inline-edit__input {
  font-family: inherit;
  font-size: 0.875rem;
  padding: 0 0.5rem;
  border: 1px solid var(--hi-inline-edit-border);
  border-radius: 4px;
  color: var(--hi-inline-edit-text);
  outline: none;
  min-width: 8rem;
  height: 100%;
  box-sizing: border-box;
}

.hi-ui-inline-edit__input:focus {
  border-color: var(--hi-inline-edit-focus);
  box-shadow: 0 0 0 2px rgba(78, 140, 151, 0.2);
}

.hi-ui-inline-edit__save,
.hi-ui-inline-edit__cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 4px;
  transition:
    color 0.15s,
    background-color 0.15s;
}

.hi-ui-inline-edit__save {
  color: #4e9758;
}

.hi-ui-inline-edit__save:hover {
  background-color: #f0fdf4;
}

.hi-ui-inline-edit__cancel {
  color: #dc3545;
}

.hi-ui-inline-edit__cancel:hover {
  background-color: #fef2f2;
}

.hi-ui-inline-edit__save:focus-visible,
.hi-ui-inline-edit__cancel:focus-visible {
  outline: 2px solid var(--hi-inline-edit-focus);
  outline-offset: 2px;
}

.hi-ui-inline-edit__save svg,
.hi-ui-inline-edit__cancel svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* =============================================================================
   Disabled
   ============================================================================= */

.hi-ui-inline-edit--disabled .hi-ui-inline-edit__value {
  opacity: 0.6;
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 768px) {
  .hi-ui-inline-edit__input {
    min-width: 6rem;
  }
}

#hi-ui-mainnav .hi-ui-mainnav-item {
  position: relative;
  display: inline-block;
  line-height: 21px;
  height: 21px;
}

#hi-ui-mainnav .hi-ui-mainnav-item__link {
  position: relative;
  display: inline-block;
  font-size: clamp(15px, 1.4vw, 17.5px);
  white-space: nowrap;
  font-family:
    MuseoSansRounded-300,
    'MuseoSansRounded-300 Fallback',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  font-weight: normal;
  color: #000000;
  text-decoration: none;
  transition: color 200ms ease-in-out;
}

#hi-ui-mainnav .hi-ui-mainnav-item__link:hover,
#hi-ui-mainnav .hi-ui-mainnav-item__link:focus-visible {
  opacity: 1;
}

#hi-ui-mainnav .hi-ui-mainnav-item__sale-badge {
  position: absolute;
  bottom: 22px;
  left: 0px;
  pointer-events: none;
  display: flex;
  align-items: center;
}

#hi-ui-mainnav .hi-ui-mainnav-item__underline {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 5px;
  background-color: #beccc0;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

/* `:has(:focus-visible)` rather than `:focus-within`: the underline is a focus
   affordance for keyboard users, but :focus-within also matched a mouse click,
   so after a client-side navigation the clicked item kept its underline on the
   new page — competing with the genuine `.active` underline. */
#hi-ui-mainnav .hi-ui-mainnav-item.active .hi-ui-mainnav-item__underline,
#hi-ui-mainnav .hi-ui-mainnav-item:hover .hi-ui-mainnav-item__underline,
#hi-ui-mainnav .hi-ui-mainnav-item:has(:focus-visible) .hi-ui-mainnav-item__underline {
  opacity: 1;
}

#hi-ui-mainnav .hi-ui-mainnav-mobile-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 76px;
  padding: 8px 4px;
  box-sizing: border-box;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  color: #3c3c3b;
  transition:
    background-color 200ms ease-in-out,
    color 200ms ease-in-out;
}

#hi-ui-mainnav .hi-ui-mainnav-mobile-item:focus {
  outline: none;
}

/* Inset offset (not the shared +2px): the item is a full-width row in the mobile
   menu, so an outset ring would be clipped by its neighbours. */
#hi-ui-mainnav .hi-ui-mainnav-mobile-item:focus-visible {
  outline: var(--hi-focus-ring-width) solid var(--hi-focus-ring);
  outline-offset: -2px;
}

#hi-ui-mainnav .hi-ui-mainnav-mobile-item:hover {
  background: none;
  opacity: 0.8;
}

#hi-ui-mainnav .hi-ui-mainnav-mobile-item:active {
  background: none;
}

/* Override legacy _shared.css button styles (cpanel/mwp pages) */
#hi-ui-mainnav button.hi-ui-mainnav-mobile-item {
  box-shadow: none !important;
  top: auto !important;
  position: relative !important;
}

#hi-ui-mainnav button.hi-ui-mainnav-mobile-item:active {
  box-shadow: none !important;
  top: auto !important;
}

#hi-ui-mainnav button.hi-ui-mainnav-mobile-item svg {
  width: auto !important;
  height: 36px !important;
  margin-left: 0 !important;
  vertical-align: baseline !important;
  fill: #3c3c3b !important;
}

#hi-ui-mainnav .hi-ui-mainnav-mobile-item.active {
  background-color: #f5f5f5;
}

#hi-ui-mainnav .hi-ui-mainnav-mobile-item.active:hover,
#hi-ui-mainnav .hi-ui-mainnav-mobile-item.active:active {
  background-color: #f5f5f5;
}

#hi-ui-mainnav .hi-ui-mainnav-mobile-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

#hi-ui-mainnav .hi-ui-mainnav-mobile-item__icon svg {
  width: auto;
  height: 36px;
}

#hi-ui-mainnav .hi-ui-mainnav-mobile-item__icon img {
  width: 50px;
  height: 50px;
  display: block;
}

#hi-ui-mainnav .hi-ui-mainnav-mobile-item__label {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  text-transform: uppercase;
}

/**
 * Pagination Component Styles
 * Responsive pagination with page numbers, prev/next, and page size selector
 */

/* CSS Custom Properties for theming */
.hi-ui-pagination {
  --hi-pagination-gap: 16px;
  --hi-pagination-pages-gap: 4px;
  --hi-pagination-font-family: 'MuseoSansRounded-300', 'MuseoSansRounded-300 Fallback', sans-serif;
}

/* Main container */
.hi-ui.hi-ui-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--hi-pagination-gap);
  padding: 16px 0;
  font-family: var(--hi-pagination-font-family);
}

/* Info section - "Showing X-Y of Z items" */
.hi-ui-pagination-info {
  flex-shrink: 0;
}

/* Controls section - prev/next and page numbers */
.hi-ui-pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Page numbers group */
.hi-ui-pagination-pages {
  display: flex;
  align-items: center;
  gap: var(--hi-pagination-pages-gap);
}

/* Page number buttons */
.hi-ui-pagination-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #256957;
  font-family: var(--hi-pagination-font-family);
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.hi-ui-pagination-page-btn:hover {
  background-color: rgba(37, 105, 87, 0.1);
}

.hi-ui-pagination-page-btn:focus-visible {
  outline: var(--hi-focus-ring-width) solid var(--hi-focus-ring);
  outline-offset: var(--hi-focus-ring-offset);
}

.hi-ui-pagination-page-btn-current {
  background-color: #256957;
  color: #ffffff;
}

.hi-ui-pagination-page-btn-current:hover {
  background-color: #1e5446;
}

/* Page size selector section */
.hi-ui-pagination-page-size {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.hi-ui-pagination-page-size .hi-ui-select {
  width: auto;
  min-width: 70px;
}

/* Mobile Styles */
@media (max-width: 768px) {
  .hi-ui.hi-ui-pagination {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .hi-ui-pagination-info {
    text-align: center;
    order: 1;
  }

  .hi-ui-pagination-controls {
    justify-content: center;
    order: 2;
  }

  /* Simplify page numbers on mobile - hide middle pages */
  .hi-ui-pagination-pages {
    display: none;
  }

  .hi-ui-pagination-page-size {
    justify-content: center;
    order: 3;
  }
}

/* =============================================================================
   PaymentMethodSelector Component Styles
   ============================================================================= */

.hi-ui-payment-method-selector {
  --hi-pms-border: #d1d5db;
  --hi-pms-border-selected: #4e8c97;
  --hi-pms-bg: #ffffff;
  --hi-pms-bg-selected: #f0f9fa;
  --hi-pms-text: #374151;
  --hi-pms-text-secondary: #6b7280;
  --hi-pms-accent: #4e8c97;
  --hi-pms-font-family:
    HiUiMuseoSansRounded-500, 'HiUiMuseoSansRounded-500 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;

  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: var(--hi-pms-font-family);
}

/* =============================================================================
   Option
   ============================================================================= */

.hi-ui-payment-method-selector__option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--hi-pms-border);
  border-radius: 6px;
  background-color: var(--hi-pms-bg);
  cursor: pointer;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}

.hi-ui-payment-method-selector__option:hover {
  border-color: var(--hi-pms-accent);
}

.hi-ui-payment-method-selector__option--selected {
  border-color: var(--hi-pms-border-selected);
  background-color: var(--hi-pms-bg-selected);
}

/* =============================================================================
   Radio
   ============================================================================= */

.hi-ui-payment-method-selector__radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.hi-ui-payment-method-selector__indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid var(--hi-pms-border);
  border-radius: 50%;
  transition: border-color 0.15s;
}

.hi-ui-payment-method-selector__option--selected .hi-ui-payment-method-selector__indicator {
  border-color: var(--hi-pms-accent);
}

.hi-ui-payment-method-selector__option--selected .hi-ui-payment-method-selector__indicator::after {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--hi-pms-accent);
}

.hi-ui-payment-method-selector__radio:focus-visible + .hi-ui-payment-method-selector__indicator {
  outline: 2px solid var(--hi-pms-accent);
  outline-offset: 2px;
}

/* =============================================================================
   Details
   ============================================================================= */

.hi-ui-payment-method-selector__details {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.hi-ui-payment-method-selector__type {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hi-pms-text);
}

.hi-ui-payment-method-selector__number {
  font-size: 0.875rem;
  color: var(--hi-pms-text);
  letter-spacing: 0.025em;
}

.hi-ui-payment-method-selector__expiry {
  font-size: 0.75rem;
  color: var(--hi-pms-text-secondary);
}

/* =============================================================================
   Default Badge
   ============================================================================= */

.hi-ui-payment-method-selector__default {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--hi-pms-accent);
  background-color: rgba(78, 140, 151, 0.1);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  flex-shrink: 0;
}

/* =============================================================================
   Add New Button
   ============================================================================= */

.hi-ui-payment-method-selector__add-new {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--hi-pms-border);
  border-radius: 6px;
  background: none;
  color: var(--hi-pms-accent);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}

.hi-ui-payment-method-selector__add-new:hover {
  border-color: var(--hi-pms-accent);
  background-color: var(--hi-pms-bg-selected);
}

.hi-ui-payment-method-selector__add-new:focus-visible {
  outline: 2px solid var(--hi-pms-accent);
  outline-offset: 2px;
}

.hi-ui-payment-method-selector__add-new svg {
  width: 1rem;
  height: 1rem;
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 768px) {
  .hi-ui-payment-method-selector__details {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .hi-ui-payment-method-selector__expiry {
    width: 100%;
    padding-left: 0;
  }
}

/* ===================================================
   Stepper Component Styles
   =================================================== */

/* Screen reader only - visually hidden but accessible */
.hi-ui-stepper .hi-ui-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* CSS Variables for customization */
.hi-ui-stepper {
  --hi-stepper-completed-bg: #256957;
  --hi-stepper-completed-text: #ffffff;
  --hi-stepper-current-bg: #256957;
  --hi-stepper-current-text: #ffffff;
  --hi-stepper-pending-bg: #e5e7eb;
  --hi-stepper-pending-text: #9ca3af;
  --hi-stepper-connector-completed: #256957;
  --hi-stepper-connector-pending: #e5e7eb;
  --hi-stepper-label-color: #2b2b2b;
  --hi-stepper-label-muted: #6b7280;
  --hi-stepper-font-family:
    MuseoSansRounded-300, 'MuseoSansRounded-300 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;
  --hi-stepper-font-family-bold:
    MuseoSansRounded-700, 'MuseoSansRounded-700 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;

  /* Size variants */
  --hi-stepper-size-sm: 24px;
  --hi-stepper-size-md: 32px;
  --hi-stepper-size-lg: 40px;
  --hi-stepper-font-size-sm: 12px;
  --hi-stepper-font-size-md: 14px;
  --hi-stepper-font-size-lg: 16px;
}

/* Container */
.hi-ui-stepper {
  width: 100%;
}

/* ===================================================
   Default Variant (Horizontal)
   =================================================== */

.hi-ui-stepper--default .hi-ui-stepper__list {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hi-ui-stepper--default .hi-ui-stepper__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  min-width: 0;
}

/* First item doesn't get flex to prevent uneven spacing */
.hi-ui-stepper--default .hi-ui-stepper__item:first-child,
.hi-ui-stepper--default .hi-ui-stepper__item:last-child {
  flex: 0 0 auto;
}

/* Connector line */
.hi-ui-stepper--default .hi-ui-stepper__connector {
  position: absolute;
  top: calc(var(--hi-stepper-size-md) / 2);
  right: calc(50% + var(--hi-stepper-size-md) / 2 + 8px);
  left: calc(-50% + var(--hi-stepper-size-md) / 2 + 8px);
  height: 2px;
  background-color: var(--hi-stepper-connector-pending);
  transform: translateY(-50%);
}

.hi-ui-stepper--default .hi-ui-stepper__connector--completed {
  background-color: var(--hi-stepper-connector-completed);
}

/* Size-specific connector positioning */
.hi-ui-stepper--sm .hi-ui-stepper__connector {
  top: calc(var(--hi-stepper-size-sm) / 2);
  right: calc(50% + var(--hi-stepper-size-sm) / 2 + 6px);
  left: calc(-50% + var(--hi-stepper-size-sm) / 2 + 6px);
}

.hi-ui-stepper--lg .hi-ui-stepper__connector {
  top: calc(var(--hi-stepper-size-lg) / 2);
  right: calc(50% + var(--hi-stepper-size-lg) / 2 + 10px);
  left: calc(-50% + var(--hi-stepper-size-lg) / 2 + 10px);
}

/* ===================================================
   Step Indicator (Circle)
   =================================================== */

.hi-ui-stepper__indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hi-stepper-size-md);
  height: var(--hi-stepper-size-md);
  border-radius: 50%;
  font-family: var(--hi-stepper-font-family-bold);
  font-size: var(--hi-stepper-font-size-md);
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

/* Size variants for indicator */
.hi-ui-stepper--sm .hi-ui-stepper__indicator {
  width: var(--hi-stepper-size-sm);
  height: var(--hi-stepper-size-sm);
  font-size: var(--hi-stepper-font-size-sm);
}

.hi-ui-stepper--lg .hi-ui-stepper__indicator {
  width: var(--hi-stepper-size-lg);
  height: var(--hi-stepper-size-lg);
  font-size: var(--hi-stepper-font-size-lg);
}

/* State colors */
.hi-ui-stepper__item--completed .hi-ui-stepper__indicator {
  background-color: var(--hi-stepper-completed-bg);
  color: var(--hi-stepper-completed-text);
}

.hi-ui-stepper__item--current .hi-ui-stepper__indicator {
  background-color: var(--hi-stepper-current-bg);
  color: var(--hi-stepper-current-text);
}

.hi-ui-stepper__item--pending .hi-ui-stepper__indicator {
  background-color: var(--hi-stepper-pending-bg);
  color: var(--hi-stepper-pending-text);
}

/* Clickable indicator */
.hi-ui-stepper__indicator--clickable {
  cursor: pointer;
}

.hi-ui-stepper__indicator--clickable:hover {
  transform: scale(1.1);
}

.hi-ui-stepper__indicator--clickable:focus-visible {
  outline: 2px solid var(--hi-stepper-current-bg);
  outline-offset: 2px;
}

/* Disabled state */
.hi-ui-stepper__item--disabled .hi-ui-stepper__indicator {
  opacity: 0.5;
  cursor: not-allowed;
}

.hi-ui-stepper__item--disabled .hi-ui-stepper__indicator--clickable {
  cursor: not-allowed;
}

.hi-ui-stepper__item--disabled .hi-ui-stepper__indicator--clickable:hover {
  transform: none;
}

/* ===================================================
   Indicator Content (Number, Checkmark, Icon)
   =================================================== */

.hi-ui-stepper__number {
  line-height: 1;
}

.hi-ui-stepper__checkmark {
  width: 60%;
  height: 60%;
}

.hi-ui-stepper__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60%;
  height: 60%;
}

.hi-ui-stepper__icon svg {
  width: 100%;
  height: 100%;
}

.hi-ui-stepper__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
}

/* ===================================================
   Step Content (Label & Description)
   =================================================== */

.hi-ui-stepper__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 8px;
  text-align: center;
  max-width: 120px;
}

.hi-ui-stepper__label {
  font-family: var(--hi-stepper-font-family);
  font-size: 14px;
  color: var(--hi-stepper-label-color);
  line-height: 1.3;
}

.hi-ui-stepper__item--current .hi-ui-stepper__label {
  font-family: var(--hi-stepper-font-family-bold);
}

.hi-ui-stepper__item--pending .hi-ui-stepper__label {
  color: var(--hi-stepper-label-muted);
}

.hi-ui-stepper__item--disabled .hi-ui-stepper__label {
  opacity: 0.5;
}

.hi-ui-stepper__description {
  font-family: var(--hi-stepper-font-family);
  font-size: 12px;
  color: var(--hi-stepper-label-muted);
  margin-top: 4px;
  line-height: 1.3;
}

/* ===================================================
   Compact Variant (Numbers only, no labels)
   =================================================== */

.hi-ui-stepper--compact .hi-ui-stepper__content {
  display: none;
}

.hi-ui-stepper--compact .hi-ui-stepper__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hi-ui-stepper--compact .hi-ui-stepper__item {
  display: flex;
  align-items: center;
  position: relative;
}

.hi-ui-stepper--compact .hi-ui-stepper__connector {
  position: static;
  width: 24px;
  height: 2px;
  transform: none;
  flex-shrink: 0;
}

/* ===================================================
   Vertical Variant
   =================================================== */

.hi-ui-stepper--vertical .hi-ui-stepper__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hi-ui-stepper--vertical .hi-ui-stepper__item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  position: relative;
  padding-bottom: 24px;
}

.hi-ui-stepper--vertical .hi-ui-stepper__item:last-child {
  padding-bottom: 0;
}

.hi-ui-stepper--vertical .hi-ui-stepper__connector {
  position: absolute;
  top: calc(var(--hi-stepper-size-md) + 4px);
  left: calc(var(--hi-stepper-size-md) / 2);
  width: 2px;
  height: calc(100% - var(--hi-stepper-size-md) - 4px);
  transform: translateX(-50%);
}

/* Size-specific vertical connector */
.hi-ui-stepper--vertical.hi-ui-stepper--sm .hi-ui-stepper__connector {
  top: calc(var(--hi-stepper-size-sm) + 4px);
  left: calc(var(--hi-stepper-size-sm) / 2);
  height: calc(100% - var(--hi-stepper-size-sm) - 4px);
}

.hi-ui-stepper--vertical.hi-ui-stepper--lg .hi-ui-stepper__connector {
  top: calc(var(--hi-stepper-size-lg) + 4px);
  left: calc(var(--hi-stepper-size-lg) / 2);
  height: calc(100% - var(--hi-stepper-size-lg) - 4px);
}

.hi-ui-stepper--vertical .hi-ui-stepper__content {
  align-items: flex-start;
  text-align: left;
  margin-top: 0;
  margin-left: 12px;
  max-width: none;
}

.hi-ui-stepper--vertical .hi-ui-stepper__label {
  padding-top: 4px;
}

.hi-ui-stepper--vertical.hi-ui-stepper--sm .hi-ui-stepper__label {
  padding-top: 2px;
}

.hi-ui-stepper--vertical.hi-ui-stepper--lg .hi-ui-stepper__label {
  padding-top: 8px;
}

/* ===================================================
   Mobile Responsive
   =================================================== */

@media (max-width: 768px) {
  /* Default variant hides labels on mobile */
  .hi-ui-stepper--default .hi-ui-stepper__content {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Reduce connector gap on mobile */
  .hi-ui-stepper--default .hi-ui-stepper__connector {
    right: calc(50% + var(--hi-stepper-size-md) / 2 + 4px);
    left: calc(-50% + var(--hi-stepper-size-md) / 2 + 4px);
  }

  .hi-ui-stepper--default.hi-ui-stepper--sm .hi-ui-stepper__connector {
    right: calc(50% + var(--hi-stepper-size-sm) / 2 + 4px);
    left: calc(-50% + var(--hi-stepper-size-sm) / 2 + 4px);
  }

  .hi-ui-stepper--default.hi-ui-stepper--lg .hi-ui-stepper__connector {
    right: calc(50% + var(--hi-stepper-size-lg) / 2 + 4px);
    left: calc(-50% + var(--hi-stepper-size-lg) / 2 + 4px);
  }

  /* Vertical variant keeps labels visible */
  .hi-ui-stepper--vertical .hi-ui-stepper__content {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    margin-left: 12px;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

#hi-ui-mainnav .hi-ui-subnav-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(8px, 1.2vw, 16px);
  padding: clamp(12px, 1.5vw, 20px);
  text-decoration: none;
  color: #333333;
  border-radius: 8px;
  cursor: pointer;
}

#hi-ui-mainnav .hi-ui-subnav-item__icon-container {
  width: clamp(60px, 7vw, 90px);
  height: clamp(70px, 8vw, 104px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#hi-ui-mainnav .hi-ui-subnav-item__icon {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 1;
  -o-object-fit: contain;
     object-fit: contain;
}

#hi-ui-mainnav .hi-ui-subnav-item__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding-top: 8px;
}

#hi-ui-mainnav .hi-ui-subnav-item__label {
  position: relative;
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: normal;
  font-family:
    HiUiMuseoSansRounded-500,
    'HiUiMuseoSansRounded-500 Fallback',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  line-height: 1.3;
  text-decoration: none;
}

#hi-ui-mainnav .hi-ui-subnav-item__sale-badge {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  height: 18px;
  width: auto;
  display: block;
  pointer-events: none;
}

#hi-ui-mainnav .hi-ui-subnav-item:hover,
#hi-ui-mainnav .hi-ui-subnav-item:focus-visible {
  opacity: 1;
}

/* :focus-visible, so the underline is a keyboard affordance only — on :focus it
   survived a client-side navigation and left the clicked item underlined. */
#hi-ui-mainnav .hi-ui-subnav-item:hover .hi-ui-subnav-item__label span,
#hi-ui-mainnav .hi-ui-subnav-item:focus-visible .hi-ui-subnav-item__label span {
  text-decoration: underline;
}

#hi-ui-mainnav .hi-ui-subnav-item__separator {
  width: 100%;
  height: 1px;
  background-color: #ededed;
}

#hi-ui-mainnav .hi-ui-subnav-item__description {
  font-size: clamp(13px, 1.2vw, 15px);
  font-family:
    MuseoSansRounded-300,
    'MuseoSansRounded-300 Fallback',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  font-weight: normal;
  color: #777777;
  line-height: 1.5;
}

/**
 * Table Component Styles
 * Responsive table with desktop table view and mobile card view
 */

/* Screen reader only - visually hidden but accessible */
.hi-ui-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* CSS Custom Properties for theming */
.hi-ui-table {
  --hi-table-header-bg: #256957;
  --hi-table-header-color: #ffffff;
  --hi-table-row-border: #eeeeee;
  --hi-table-text-color: #2b2b2b;
  --hi-table-cell-padding: 13px 12px;
  --hi-table-header-padding: 14px 12px;
  --hi-table-font-family: 'MuseoSansRounded-300', 'MuseoSansRounded-300 Fallback', sans-serif;
  --hi-table-header-font-family:
    'MuseoSansRounded-700', 'MuseoSansRounded-700 Fallback', sans-serif;
  --hi-table-header-font-size: 14px;
  --hi-table-cell-font-size: 16px;
  --hi-table-card-gap: 16px;
  --hi-table-card-padding: 16px;
  --hi-table-card-border-radius: 8px;
  --hi-table-card-bg: #ffffff;
  --hi-table-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Desktop Table View */
.hi-ui.hi-ui-table .hi-ui-table-desktop {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

/* Grid layout mode */
.hi-ui.hi-ui-table .hi-ui-table-grid {
  display: grid;
}

.hi-ui.hi-ui-table .hi-ui-table-grid thead,
.hi-ui.hi-ui-table .hi-ui-table-grid tbody,
.hi-ui.hi-ui-table .hi-ui-table-grid tr {
  display: contents;
}

.hi-ui.hi-ui-table .hi-ui-table-grid .hi-ui-table-header-cell {
  background: var(--hi-table-header-bg);
  color: var(--hi-table-header-color);
}

.hi-ui.hi-ui-table .hi-ui-table-grid .hi-ui-table-header-cell,
.hi-ui.hi-ui-table .hi-ui-table-grid .hi-ui-table-cell {
  display: flex;
  align-items: center;
}

/* Header Row */
.hi-ui.hi-ui-table .hi-ui-table-header {
  background: var(--hi-table-header-bg);
  color: var(--hi-table-header-color);
  text-transform: uppercase;
}

/* Header Cell */
.hi-ui.hi-ui-table .hi-ui-table-header-cell {
  padding: var(--hi-table-header-padding);
  font-family: var(--hi-table-header-font-family);
  font-size: var(--hi-table-header-font-size);
  font-weight: normal;
  color: inherit;
  vertical-align: middle;
}

.hi-ui.hi-ui-table .hi-ui-table-header-cell:first-child {
  border-top-left-radius: 4px;
}

.hi-ui.hi-ui-table .hi-ui-table-header-cell:last-child {
  border-top-right-radius: 4px;
}

/* Header content wrapper for flexbox alignment */
.hi-ui-table-header-content {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hi-ui-table-header-sortable {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.hi-ui-table-header-sortable:hover {
  background: rgba(255, 255, 255, 0.1);
}

.hi-ui-table-header-sortable:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: -2px;
}

/* Sort Icons */
.hi-ui-table-sort-icon {
  display: inline-flex;
  flex-direction: column;
}

.hi-ui-table-sort-arrow {
  opacity: 0.3;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.hi-ui-table-sort-arrow-up {
  margin-bottom: -6px;
}

.hi-ui-table-sort-arrow.hi-ui-table-sort-active {
  opacity: 1;
  transform: scale(1.3);
}

/* Cell */
.hi-ui.hi-ui-table .hi-ui-table-cell {
  padding: var(--hi-table-cell-padding);
  border-bottom: 1px solid var(--hi-table-row-border);
  font-family: var(--hi-table-font-family);
  font-size: var(--hi-table-cell-font-size);
  color: var(--hi-table-text-color);
  line-height: 24px;
  vertical-align: middle;
}

.hi-ui.hi-ui-table .hi-ui-table-row:last-child .hi-ui-table-cell {
  border-bottom: none;
}

/* Clickable Row */
.hi-ui.hi-ui-table .hi-ui-table-row-clickable:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

/* Loading State */
.hi-ui-table-loading-cell {
  padding: var(--hi-table-cell-padding);
}

/* Empty State */
.hi-ui-table-empty-cell {
  padding: var(--hi-table-cell-padding);
  text-align: center;
  color: #666;
}

/* Selection Checkbox Column */
.hi-ui-table-select-cell {
  width: 48px;
  text-align: center;
}

.hi-ui-table-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--hi-table-header-bg);
}

.hi-ui-table-checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.hi-ui-table-checkbox:focus-visible {
  outline: 2px solid var(--hi-table-header-bg);
  outline-offset: 2px;
}

/* Selected Row */
.hi-ui.hi-ui-table .hi-ui-table-row-selected {
  background-color: rgba(37, 105, 87, 0.08);
}

.hi-ui.hi-ui-table .hi-ui-table-row-selected:hover {
  background-color: rgba(37, 105, 87, 0.12);
}

/* Sticky Header Container */
.hi-ui-table-scroll-container {
  overflow-y: auto;
  border-radius: 4px;
}

.hi-ui-table-thead-sticky {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Add shadow to header when scrolled (via JS class) */
.hi-ui-table-scroll-container.hi-ui-table-scrolled .hi-ui-table-thead-sticky {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Mobile Card View - Hidden by default */
.hi-ui-table-mobile {
  display: none;
}

/* Mobile Sort Bar - Hidden by default */
.hi-ui-table-mobile-sort {
  display: none;
}

/* Mobile Styles */
@media (max-width: 1024px) {
  .hi-ui-table-desktop,
  .hi-ui.hi-ui-table .hi-ui-table-grid {
    display: none;
  }

  .hi-ui-table-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--hi-table-card-gap);
  }

  .hi-ui-table-mobile [role='list'] {
    display: flex;
    flex-direction: column;
    gap: var(--hi-table-card-gap);
  }

  /* Mobile Sort Bar */
  .hi-ui-table-mobile-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
  }

  .hi-ui-table-mobile-sort-label {
    font-family: var(--hi-table-header-font-family);
    font-size: 13px;
    color: #666;
    text-transform: uppercase;
    flex-shrink: 0;
  }

  .hi-ui-table-mobile-sort-select {
    flex: 1;
  }

  .hi-ui-table-mobile-sort-direction {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    font-size: 18px;
    color: var(--hi-table-text-color);
    cursor: pointer;
    flex-shrink: 0;
  }

  .hi-ui-table-mobile-sort-direction:hover {
    background: #f5f5f5;
  }

  .hi-ui-table-mobile-sort-direction:focus-visible {
    outline: 2px solid var(--hi-table-header-bg);
    outline-offset: 1px;
  }

  /* Card */
  .hi-ui-table-card {
    background: var(--hi-table-card-bg);
    border-radius: var(--hi-table-card-border-radius);
    box-shadow: var(--hi-table-card-shadow);
    padding: var(--hi-table-card-padding);
    border: 1px solid var(--hi-table-row-border);
  }

  /* Card Row - inline label/value pairs */
  .hi-ui-table-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid var(--hi-table-row-border);
    gap: 16px;
  }

  .hi-ui-table-card-row:last-child {
    border-bottom: none;
  }

  .hi-ui-table-card-label {
    font-family: var(--hi-table-header-font-family);
    font-size: 13px;
    color: #666;
    text-transform: uppercase;
    flex-shrink: 0;
  }

  .hi-ui-table-card-value {
    font-family: var(--hi-table-font-family);
    font-size: 15px;
    color: var(--hi-table-text-color);
    text-align: right;
    word-break: break-word;
  }

  /* Loading Card */
  .hi-ui-table-loading-card {
    background: var(--hi-table-card-bg);
    border-radius: var(--hi-table-card-border-radius);
    padding: var(--hi-table-card-padding);
    border: 1px solid var(--hi-table-row-border);
  }

  /* Empty Card */
  .hi-ui-table-empty-card {
    background: var(--hi-table-card-bg);
    border-radius: var(--hi-table-card-border-radius);
    padding: var(--hi-table-card-padding);
    border: 1px solid var(--hi-table-row-border);
    text-align: center;
    color: #666;
  }

  /* Hide columns marked as hideOnMobile */
  .hi-ui-table-hide-mobile {
    display: none;
  }

  /* Card Selection */
  .hi-ui-table-card-select {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--hi-table-row-border);
  }

  .hi-ui-table-card-select-label {
    font-family: var(--hi-table-header-font-family);
    font-size: 13px;
    color: #666;
    text-transform: uppercase;
    cursor: pointer;
  }

  .hi-ui-table-card-selected {
    background-color: rgba(37, 105, 87, 0.08);
    border-color: var(--hi-table-header-bg);
  }

  .hi-ui-table-card-clickable:hover {
    background-color: rgba(0, 0, 0, 0.04);
  }
}

/* ===================================================
   Tabs Component Styles
   =================================================== */

/* CSS Variables for customization */
.hi-ui-tabs {
  --hi-tabs-border-color: #e5e7eb;
  --hi-tabs-active-color: #256957;
  --hi-tabs-active-text: #2b2b2b;
  --hi-tabs-text-color: #6b7280;
  --hi-tabs-hover-bg: rgba(0, 0, 0, 0.04);
  --hi-tabs-disabled-opacity: 0.5;
  --hi-tabs-font-family:
    MuseoSansRounded-300, 'MuseoSansRounded-300 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;
  --hi-tabs-font-family-active:
    MuseoSansRounded-700, 'MuseoSansRounded-700 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
  --hi-tabs-gap: 0.5rem;
  --hi-tabs-panel-padding: 1rem 0;
}

/* Container */
.hi-ui-tabs {
  width: 100%;
}

/* Tab list - scrollable when overflowing */
.hi-ui-tabs__list {
  display: flex;
  gap: var(--hi-tabs-gap);
  overflow-x: auto;
  overflow-y: hidden;
}

/* Base tab button */
.hi-ui-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-family: var(--hi-tabs-font-family);
  font-size: 0.9375rem;
  line-height: 1.25;
  color: var(--hi-tabs-text-color);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
  flex-shrink: 0;
}

.hi-ui-tabs__tab:focus-visible {
  outline: 2px solid var(--hi-tabs-active-color);
  outline-offset: 2px;
}

/* Tab icon */
.hi-ui-tabs__tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
}

.hi-ui-tabs__tab-icon svg {
  width: 100%;
  height: 100%;
}

/* When mobileIcons is set, hide icons on desktop — they only show on mobile */
.hi-ui-tabs--mobile-icons .hi-ui-tabs__tab-icon {
  display: none;
}

/* Disabled state */
.hi-ui-tabs__tab--disabled {
  opacity: var(--hi-tabs-disabled-opacity);
  cursor: not-allowed;
}

/* Panel */
.hi-ui-tabs__panel {
  padding: var(--hi-tabs-panel-padding);
  animation: hi-tabs-fade-in 0.2s ease-out;
}

@keyframes hi-tabs-fade-in {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}

.hi-ui-tabs__panel:focus {
  outline: none;
}

.hi-ui-tabs__panel-title {
  display: none;
}

/* ===================================================
   Sliding Indicator (for default and underline variants)
   =================================================== */

.hi-ui-tabs__indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background-color: var(--hi-tabs-active-color);
  transition:
    transform 0.2s ease-out,
    width 0.2s ease-out;
  pointer-events: none;
}

/* ===================================================
   Default Variant
   =================================================== */

.hi-ui-tabs--default .hi-ui-tabs__list {
  position: relative;
  border-bottom: 1px solid var(--hi-tabs-border-color);
}

.hi-ui-tabs--default .hi-ui-tabs__tab {
  position: relative;
  margin-bottom: -1px;
}

.hi-ui-tabs--default .hi-ui-tabs__tab:hover:not(.hi-ui-tabs__tab--disabled) {
  color: var(--hi-tabs-active-text);
  background-color: var(--hi-tabs-hover-bg);
}

.hi-ui-tabs--default .hi-ui-tabs__tab--active {
  color: var(--hi-tabs-active-text);
  font-family: var(--hi-tabs-font-family-active);
}

/* ===================================================
   Pills Variant
   =================================================== */

.hi-ui-tabs--pills .hi-ui-tabs__list {
  position: relative;
  gap: 0.25rem;
}

.hi-ui-tabs--pills .hi-ui-tabs__tab {
  position: relative;
  z-index: 1;
  border-radius: 9999px;
  padding: 0.5rem 1rem;
}

.hi-ui-tabs--pills
  .hi-ui-tabs__tab:hover:not(.hi-ui-tabs__tab--disabled):not(.hi-ui-tabs__tab--active) {
  background-color: var(--hi-tabs-hover-bg);
}

.hi-ui-tabs--pills .hi-ui-tabs__tab--active {
  color: #ffffff;
  font-family: var(--hi-tabs-font-family-active);
  background-color: transparent;
}

.hi-ui-tabs--pills .hi-ui-tabs__indicator {
  height: 100%;
  top: 0;
  bottom: auto;
  border-radius: 9999px;
  background-color: var(--hi-tabs-active-color);
  z-index: 0;
}

/* ===================================================
   Underline Variant
   =================================================== */

.hi-ui-tabs--underline .hi-ui-tabs__list {
  position: relative;
  padding-bottom: 6px;
}

.hi-ui-tabs--underline .hi-ui-tabs__tab {
  padding: 0.5rem 0;
  margin-right: 1.5rem;
}

.hi-ui-tabs--underline .hi-ui-tabs__tab:last-of-type {
  margin-right: 0;
}

.hi-ui-tabs--underline .hi-ui-tabs__tab:hover:not(.hi-ui-tabs__tab--disabled) {
  color: var(--hi-tabs-active-text);
}

.hi-ui-tabs--underline .hi-ui-tabs__tab--active {
  color: var(--hi-tabs-active-text);
  font-family: var(--hi-tabs-font-family-active);
}

.hi-ui-tabs--underline .hi-ui-tabs__indicator {
  bottom: 0;
}

/* ===================================================
   Mobile Responsive
   =================================================== */

@media (max-width: 768px) {
  .hi-ui-tabs__tab {
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
  }

  .hi-ui-tabs--pills .hi-ui-tabs__tab {
    padding: 0.5rem 0.875rem;
  }

  .hi-ui-tabs--underline .hi-ui-tabs__tab {
    margin-right: 1rem;
  }

  /* Hide scrollbar on mobile for cleaner touch scrolling */
  .hi-ui-tabs__list {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .hi-ui-tabs__list::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  /* Mobile icons mode: full width, equally spaced */
  .hi-ui-tabs--mobile-icons .hi-ui-tabs__list {
    display: flex;
    width: 100%;
  }

  .hi-ui-tabs--mobile-icons .hi-ui-tabs__tab {
    flex: 1;
    justify-content: center;
  }

  .hi-ui-tabs--mobile-icons .hi-ui-tabs__tab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .hi-ui-tabs--mobile-icons .hi-ui-tabs__tab-icon {
    display: flex;
    width: 1.5rem;
    height: 1.5rem;
  }

  .hi-ui-tabs__panel-title {
    display: block;
    font-family: MuseoSansRounded-700, 'MuseoSansRounded-700 Fallback', sans-serif;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }
}

/* TopNavLink styles - no underline by default, underline on hover */
/* Use ID selector for highest precedence over page content styles */
#hi-ui-topnav a.hi-ui-topnav-link {
  font-family: 'MuseoSansRounded-300', 'MuseoSansRounded-300 Fallback', sans-serif;
  font-size: 11px;
  color: #3c3c3b;
  text-decoration: none;
  transition: -webkit-text-decoration 0.2s ease;
  transition: text-decoration 0.2s ease;
  transition: text-decoration 0.2s ease, -webkit-text-decoration 0.2s ease;
  font-weight: normal;
  /* Pin line-height so the item is host-independent — otherwise it inherits the
     host body's line-height (1.5 in the presales Next app → 16.5px, vs the
     legacy site's 1.43 → 15.7px), which shifts vertical centring in the bar. */
  line-height: 16px;
}

#hi-ui-topnav a.hi-ui-topnav-link:hover {
  text-decoration: underline;
  opacity: 1;
}

.hi-ui-contact-form-modal .hi-ui-form-field {
  padding-top: 12px;
}

.hi-ui-contact-form-modal__pair-row > * {
  flex: 1;
  min-width: 0;
}

@media (max-width: 768px) {
  .hi-ui-contact-form-modal__pair-row {
    flex-direction: column;
    gap: 0;
  }
}

#hi-ui-footer .hi-ui-footer-section {
  display: flex;
  flex-direction: column;
}

#hi-ui-footer .hi-ui-footer-section__title {
  margin-bottom: 16px;
  text-transform: uppercase;
  font-family: 'HiUiMuseoSansRounded-500', 'HiUiMuseoSansRounded-500 Fallback', sans-serif;
  font-weight: normal;
  font-size: 17.5px;
}

#hi-ui-footer .hi-ui-footer-section__list {
  margin: 0;
  padding: 0;
}

#hi-ui-footer .hi-ui-footer-section__list .hi-ui-list-item {
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 17.5px;
}

#hi-ui-footer .hi-ui-footer-section__list .hi-ui-list-item a.hi-ui-link {
  font-family: 'MuseoSansRounded-300', 'MuseoSansRounded-300 Fallback', sans-serif;
  font-weight: normal;
  font-size: 17.5px;
  text-decoration: none;
}

#hi-ui-footer .hi-ui-footer-section__list .hi-ui-list-item a.hi-ui-link:hover {
  text-decoration: underline;
  opacity: 1;
}

/* Mobile styles */
@media (max-width: 768px) {
  #hi-ui-footer .hi-ui-footer-section__title {
    margin-bottom: 12px;
    font-size: 15px;
  }

  #hi-ui-footer .hi-ui-footer-section__list .hi-ui-list-item {
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 15px;
  }

  #hi-ui-footer .hi-ui-footer-section__list .hi-ui-list-item a.hi-ui-link {
    font-size: 15px;
  }
}

#hi-ui-footer.hi-ui-footer {
  background-color: #f8f8f8;
  padding-bottom: 24px;
  max-width: 100%;
}

/* Main content area - 4 equal columns */
#hi-ui-footer .hi-ui-footer__content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 24px;
  margin-bottom: 40px;
  padding-top: 64px;
}

/* Logo */
#hi-ui-footer .hi-ui-footer__logo img {
  width: 150px;
  height: auto;
}

/* Link sections container - each section is a column */
#hi-ui-footer .hi-ui-footer__sections {
  display: contents;
}

/* Social area */
#hi-ui-footer .hi-ui-footer__social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

#hi-ui-footer .hi-ui-footer__social-icons {
  display: flex;
  gap: 8px;
  line-height: normal;
}

#hi-ui-footer .hi-ui-footer__social-icons a {
  font-size: 10px;
}

#hi-ui-footer a.hi-ui-footer__social-link {
  color: #3c3c3b;
  transition: color 0.2s ease;
  text-decoration: none;
}

#hi-ui-footer a.hi-ui-footer__social-link:hover {
  color: #63b770;
  opacity: 1;
}

/* Legal section */
#hi-ui-footer .hi-ui-footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 24px;
  border-top: 1px solid #e5e5e5;
  font-size: 14px !important;
  font-weight: normal !important;
}

#hi-ui-footer .hi-ui-footer__legal-left {
  display: flex;
  flex-direction: column;
}

#hi-ui-footer .hi-ui-footer__copyright {
  color: #3c3c3b;
}

/* Override Text component rem-based font-size for pages with non-standard root font-size */
#hi-ui-footer .hi-ui-footer__legal .hi-ui-text,
#hi-ui-footer .hi-ui-footer__legal .hi-ui-text-body-small {
  font-size: 14px !important;
  font-weight: normal !important;
}

#hi-ui-footer .hi-ui-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

#hi-ui-footer .hi-ui-footer__legal-separator {
  width: 6px;
  text-align: center;
}

#hi-ui-footer .hi-ui-footer__legal-links a.hi-ui-link {
  color: #63b770;
  font-size: 14px;
  font-family: 'MuseoSansRounded-300', 'MuseoSansRounded-300 Fallback', sans-serif;
  font-weight: normal;
  line-height: 21px;
  text-decoration: none;
}

#hi-ui-footer .hi-ui-footer__legal-links a.hi-ui-link:hover {
  text-decoration: underline;
  opacity: 1;
}

#hi-ui-footer .hi-ui-footer__legal-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Mobile styles */
@media (max-width: 768px) {
  #hi-ui-footer .hi-ui-footer__content {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding-top: 32px;
    margin-bottom: 24px;
  }

  #hi-ui-footer .hi-ui-footer__logo {
    display: none;
  }

  #hi-ui-footer .hi-ui-footer__social {
    grid-column: 1 / -1;
  }

  #hi-ui-footer .hi-ui-footer__legal {
    flex-direction: column;
    gap: 16px;
    padding-top: 16px;
  }

  #hi-ui-footer .hi-ui-footer__legal-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-top: 12px;
  }

  #hi-ui-footer .hi-ui-footer__legal-separator {
    display: none;
  }

  #hi-ui-footer .hi-ui-footer__legal-right {
    align-items: flex-start;
    gap: 4px;
  }

  #hi-ui-footer .hi-ui-footer__social {
    align-items: center;
    gap: 8px;
  }
}

#hi-ui-mainnav.hi-ui-mainnav-wrapper {
  position: relative;
}

#hi-ui-mainnav .hi-ui-mainnav {
  position: relative;
  display: flex;
  align-items: center;
  height: 80px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-bottom: 1px solid #e7e7e7;
}

#hi-ui-mainnav .hi-ui-mainnav__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#hi-ui-mainnav .hi-ui-mainnav__logo {
  display: flex;
  align-items: center;
  margin-right: clamp(16px, 2vw, 24px);
}

#hi-ui-mainnav .hi-ui-mainnav__logo img {
  width: clamp(136px, 15vw, 200px);
  height: clamp(32px, 3.6vw, 48px);
}

#hi-ui-mainnav .hi-ui-mainnav__items {
  display: flex;
  align-items: stretch;
  gap: clamp(12px, 2vw, 24px);
}

#hi-ui-mainnav .hi-ui-mainnav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-top: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
  z-index: 1000;
}

#hi-ui-mainnav .hi-ui-mainnav__subnav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1.2vw, 16px);
  height: clamp(140px, 14vw, 180px);
  align-content: center;
}

/* Mobile Navigation Bar - Hidden on desktop */
#hi-ui-mainnav .hi-ui-mainnav-mobile {
  display: none;
}

/* Mobile Menu Panel */
#hi-ui-mainnav .hi-ui-mainnav-mobile-menu {
  display: none;
}

/* Responsive: show mobile nav, hide desktop nav */
@media (max-width: 768px) {
  #hi-ui-mainnav.hi-ui-mainnav-wrapper {
    min-height: 67px;
  }

  /* When isMobileFixed=false: mobile nav scrolls with the page, no space reservation */
  #hi-ui-mainnav.hi-ui-mainnav-wrapper--mobile-scroll {
    min-height: 0;
  }

  #hi-ui-mainnav .hi-ui-mainnav {
    display: none;
  }

  #hi-ui-mainnav .hi-ui-mainnav-mobile {
    display: flex;
    justify-content: space-between;
    padding: 0 14px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    border-bottom: 1px solid #e7e7e7;
    z-index: 1000;
  }

  #hi-ui-mainnav .hi-ui-mainnav-mobile__group {
    display: flex;
    gap: 8px;
  }

  #hi-ui-mainnav.hi-ui-mainnav-wrapper--mobile-scroll .hi-ui-mainnav-mobile {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
  }

  #hi-ui-mainnav .hi-ui-mainnav-mobile-menu {
    display: block;
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    z-index: 999;
    overflow-y: auto;
    padding-bottom: 80px;
    transition: right 0.3s ease;
  }

  #hi-ui-mainnav .hi-ui-mainnav-mobile-menu--open {
    right: 0;
  }

  #hi-ui-mainnav .hi-ui-mainnav-mobile-menu__content {
    padding-top: 76px;
  }

  #hi-ui-mainnav a.hi-ui-mainnav-mobile-menu__item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 12px 16px;
    font-size: 15px;
    color: #2b2b2b;
    font-family: 'HiUiMuseoSansRounded-500', 'HiUiMuseoSansRounded-500 Fallback', sans-serif;
    font-weight: normal;
    background: transparent;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    transition: background-color 0.15s ease;
    box-sizing: border-box;
    line-height: normal;
  }

  #hi-ui-mainnav a.hi-ui-mainnav-mobile-menu__item:hover {
    background: #f9f9f9;
  }

  #hi-ui-mainnav .hi-ui-mainnav-mobile-menu__sale-badge {
    margin-left: 8px;
  }
}

/* Badge used on nav items (SALE, NEW, etc.) — background-color set inline per item */
#hi-ui-mainnav .hi-ui-nav-badge {
  color: #fff;
  font-family: MuseoSansRounded-300, 'MuseoSansRounded-300 Fallback', sans-serif;
  font-size: 12px;
  line-height: 17px;
  text-transform: uppercase;
  text-align: center;
  padding: 2px 5px 0;
  border-radius: 3px;
  display: inline-block;
}

/* TopNav organism styles */

.hi-ui-topnav {
  background: #f8f8f8;
  border-bottom: 1px solid #ededed;
  height: 48px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1001;
  /* Contain the slide-out states below. Whichever of the two right-hand groups
     is hidden sits at `translateX(20px)` — parked outside the bar, invisible and
     inert, but still counted in scrollable overflow, which gave every page a 4px
     horizontal overflow at any viewport narrow enough for the 1170px container to
     be fluid (769–1201px). `clip` rather than `hidden` on purpose: `hidden` would
     force the other axis to a scroll container and cut off the account dropdown,
     whereas `overflow-x: clip` leaves `overflow-y` genuinely visible. The bar is
     viewport-wide, so the clip edge IS the viewport edge — nothing legitimate can
     sit beyond it. */
  overflow-x: clip;
}

/* Hide on mobile (<768px) */
@media (max-width: 768px) {
  .hi-ui-topnav {
    display: none;
  }
}

/* Left side: Search bar */
.hi-ui-topnav-left {
  flex: 0 1 auto;
}

/* Right side container - houses both search controls and nav links */
.hi-ui-topnav-right-container {
  position: relative;
  flex: 0 1 auto;
  display: flex;
  align-items: center;
}

/* Both search controls and nav links */
.hi-ui-topnav-right {
  white-space: nowrap;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* Search controls - hidden by default, slides in from right when visible */
.hi-ui-topnav-search-controls {
  position: absolute;
  right: 0;
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
}

.hi-ui-topnav-search-controls.visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Nav links - visible by default, slides out to right when hidden */
.hi-ui-topnav-links {
  opacity: 1;
  transform: translateX(0);
}

.hi-ui-topnav-links:not(.visible) {
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
}

/* TopNav search - override rem-based gap with fixed pixels for consistent spacing */
/* Pages with non-standard root font-size (e.g. login) cause rem gap to differ */
.hi-ui-topnav-search {
  gap: 16px !important;
}

/* TopNav search input - override legacy page styles */
/* Using fixed pixel values to avoid rem unit issues on pages with non-standard root font-size */
.hi-ui-topnav-search .hi-ui-input {
  flex: 1;
  min-width: 240px;
  box-sizing: border-box;
  padding: 6px !important;
  font-size: 16px !important;
  line-height: 20px !important;
}

/* Override legacy _shared.css box-shadow and active shift on TopNav buttons */
.hi-ui-topnav .tw-btn-base {
  box-shadow: none !important;
  position: static !important;
  top: auto !important;
}

/* Section sub-navigation (legacy `.subpages`): a dark-green bar of white links
   under the MainNav. Desktop is a horizontal row; below 768 it collapses behind
   a hamburger into a full-width dropdown panel. An item with children is a
   dropdown (legacy `li.dropdown`), revealed on hover/focus on desktop and nested
   in the panel on mobile. ID-scoped (like MainNav) so the skin wins over the
   shared atom defaults. */
#hi-ui-section-nav.hi-ui-section-nav {
  background-color: #0d4e46;
  /* The one dark surface in the chrome. The shared ring colour IS this bar's
     background, so it would be invisible here — re-declaring the token flips
     every ring inside the bar and its dropdown (#04332d) to white, which sits
     at 9.6:1 against both. Custom properties inherit, so nothing below needs
     to know it was overridden. */
  --hi-focus-ring: #ffffff;
  /* The bar pins to the top once the (non-sticky) MainNav scrolls past it
     (legacy `.subpages { position: sticky; top: 0; z-index: 900 }`). */
  position: sticky;
  top: 0;
  z-index: 900;
}

#hi-ui-section-nav .hi-ui-section-nav__bar {
  position: relative;
}

/* Toggle is desktop-hidden; only the row of links shows. */
#hi-ui-section-nav .hi-ui-section-nav__toggle {
  display: none;
}

#hi-ui-section-nav .hi-ui-section-nav__menu {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

#hi-ui-section-nav .hi-ui-section-nav__item {
  margin: 0;
  padding: 0;
}

#hi-ui-section-nav .hi-ui-section-nav__item--dropdown {
  position: relative;
}

/* White links in the light text cut (legacy inherits it; the id overrides the
   shared `a.hi-ui-link` colour, its MuseoSansRounded-700 family, and its :hover
   opacity fade — legacy underlines, it doesn't dim). A transparent 3px bottom
   border reserves space so the hover/active underline doesn't shift the row. The
   dropdown trigger is a <button> reset to match the links exactly. */
#hi-ui-section-nav .hi-ui-section-nav__link {
  display: block;
  /* 12/7 vertical (not a flat 10) nudges the text slightly lower. With the 23px
     line-box and the 3px transparent underline border, the bar is exactly 45px
     (pinned line-height keeps it deterministic, not font-metric-dependent). No
     horizontal padding: legacy spaces links via margin-left (below) so the first
     link's text aligns to the container edge and the hover underline hugs the text. */
  padding: 12px 0 7px;
  margin-left: 20px;
  color: #ffffff;
  font-family: var(--hi-text-font-family);
  font-size: 15px;
  line-height: 23px;
  border-bottom: 3px solid transparent;
}

/* First link sits close to the container edge (legacy 5px), not a full 20px gap. */
#hi-ui-section-nav .hi-ui-section-nav__item:first-child .hi-ui-section-nav__link {
  margin-left: 5px;
}

#hi-ui-section-nav .hi-ui-section-nav__trigger {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font: inherit;
  font-family: var(--hi-text-font-family);
  font-size: 15px;
}

#hi-ui-section-nav .hi-ui-section-nav__link:hover {
  opacity: 1;
}

/* Only leaf links (anchors) underline on hover; the dropdown trigger (a button)
   opens the panel instead — legacy `.menu .dropdown a:hover { border-bottom: 0 }`. */
#hi-ui-section-nav a.hi-ui-section-nav__link:hover {
  border-bottom-color: #ffffff;
}

/* Only leaf links carry the active underline. The dropdown trigger (a button)
   never underlines — neither on hover nor when a child page is active — it just
   opens the panel (legacy keeps the trigger borderless). */
#hi-ui-section-nav a.hi-ui-section-nav__link--active {
  border-bottom-color: #ffffff;
}

/* Desktop dropdown panel (legacy `.menu .dropdown ul`): hidden until the item is
   hovered or focused within, then an absolutely-positioned darker panel. */
#hi-ui-section-nav .hi-ui-section-nav__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 230px;
  margin: 0;
  padding: 12px 21px;
  list-style: none;
  background-color: #04332d;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* `:has(:focus-visible)` rather than `:focus-within`: mouse users open this by
   hovering, and :focus-within also matched the click, so with client-side
   navigation the panel stayed open over the page the click had just loaded —
   focus never left the link, because the document never reloaded. Keyboard
   users still open it by tabbing in. */
#hi-ui-section-nav .hi-ui-section-nav__item--dropdown:hover .hi-ui-section-nav__dropdown,
#hi-ui-section-nav
  .hi-ui-section-nav__item--dropdown:has(:focus-visible)
  .hi-ui-section-nav__dropdown {
  display: block;
}

#hi-ui-section-nav .hi-ui-section-nav__dropdown-item {
  margin: 0;
  padding: 0;
}

#hi-ui-section-nav .hi-ui-section-nav__dropdown-link {
  display: block;
  padding: 13px 0 10px;
  color: #ffffff;
  font-family: var(--hi-text-font-family);
  font-size: 15px;
}

/* Dropdown children never underline (legacy `.menu .dropdown a:hover`
   borderless); just hold full opacity over the shared Link :hover fade. */
#hi-ui-section-nav .hi-ui-section-nav__dropdown-link:hover,
#hi-ui-section-nav .hi-ui-section-nav__dropdown-link--active {
  opacity: 1;
}

/* Optional "View Basket" button (legacy `.subpages_right .view-basket`): pinned
   to the bar's right, shown only below 1024 — desktop hands off to the page's own
   basket UI. White-outline transparent button on the green bar. */
#hi-ui-section-nav .hi-ui-section-nav__basket {
  display: none;
}

@media (max-width: 1023px) {
  #hi-ui-section-nav .hi-ui-section-nav__basket {
    display: block;
    position: absolute;
    top: 5px;
    right: 0;
    padding: 8px 16px 6px;
    background: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 6px;
    font-family: var(--hi-text-font-family-heading);
    font-size: 15px;
    line-height: 18px;
    text-transform: uppercase;
    cursor: pointer;
  }

  #hi-ui-section-nav .hi-ui-section-nav__basket:hover {
    background: transparent;
  }
}

/* Optional duration/price toggle (legacy `.subpages .switch-wrap`): a labelled
   two-state switch pinned to the bar's right, shown at ALL widths (a primary
   price control, unlike the basket button which is a <1024-only hand-off). The
   switch itself is legacy's transparent white-bordered pill with a sliding white
   knob; the flanking option labels + optional prefix ("Prices | ") are white. */
#hi-ui-section-nav .hi-ui-section-nav__switch-wrap {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  color: #ffffff;
  font-family: var(--hi-text-font-family);
  font-size: 14px;
}

#hi-ui-section-nav .hi-ui-section-nav__switch-title {
  font-family: 'HiUiMuseoSansRounded-500', 'HiUiMuseoSansRounded-500 Fallback', sans-serif;
  font-weight: 500;
  margin-right: 5px;
}

#hi-ui-section-nav .hi-ui-section-nav__switch-option {
  /* Legacy option labels are 12px — smaller than the 14px "Prices |" prefix. */
  font-size: 12px;
  white-space: nowrap;
}

#hi-ui-section-nav .hi-ui-section-nav__switch {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 24px;
  margin: 0 4px;
  padding: 0;
  background: transparent;
  border: 2px solid #ffffff;
  border-radius: 40px;
  box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.11);
  cursor: pointer;
}

/* Knob slides 1px→17px between the off (left) and on (right) states, matching
   legacy `.switcher.left/right::after` translateX. */
#hi-ui-section-nav .hi-ui-section-nav__switch-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  background-color: #ffffff;
  transform: translateX(1px);
  transition: transform 0.2s ease-out;
}

#hi-ui-section-nav .hi-ui-section-nav__switch--on .hi-ui-section-nav__switch-knob {
  transform: translateX(17px);
}

/* Below 768: hamburger reveals a full-width dark dropdown of stacked links, with
   any dropdown's children nested + indented (legacy mobile pattern). */
@media (max-width: 767px) {
  #hi-ui-section-nav .hi-ui-section-nav__toggle {
    display: flex;
    align-items: center;
    /* Match the desktop bar height exactly (the desktop link computes to 45px:
       12/7 padding + a 23px line-box + the 3px transparent underline border). */
    min-height: 45px;
    /* Nudge the bars a few px off the container's left edge. */
    padding: 0 0 0 4px;
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
  }

  /* Legacy's `.navicon`: a 22×2 middle bar with two pseudo-element bars 8px above
     and below — three square-ended white lines. `transition: all` drives the
     morph to an X when the button is open (below). */
  #hi-ui-section-nav .hi-ui-section-nav__hamburger,
  #hi-ui-section-nav .hi-ui-section-nav__hamburger::before,
  #hi-ui-section-nav .hi-ui-section-nav__hamburger::after {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #ffffff;
    transition: all 0.2s ease-out;
  }

  #hi-ui-section-nav .hi-ui-section-nav__hamburger {
    position: relative;
  }

  #hi-ui-section-nav .hi-ui-section-nav__hamburger::before,
  #hi-ui-section-nav .hi-ui-section-nav__hamburger::after {
    content: '';
    position: absolute;
    left: 0;
  }

  #hi-ui-section-nav .hi-ui-section-nav__hamburger::before {
    top: -8px;
  }

  #hi-ui-section-nav .hi-ui-section-nav__hamburger::after {
    top: 8px;
  }

  /* Open: middle bar fades out, outer bars meet at centre and cross into an X
     (legacy `.menu-btn:checked ~ .menu-icon .navicon`). */
  #hi-ui-section-nav
    .hi-ui-section-nav__toggle[aria-expanded='true']
    .hi-ui-section-nav__hamburger {
    background-color: transparent;
  }

  #hi-ui-section-nav
    .hi-ui-section-nav__toggle[aria-expanded='true']
    .hi-ui-section-nav__hamburger::before {
    top: 0;
    transform: rotate(-45deg);
  }

  #hi-ui-section-nav
    .hi-ui-section-nav__toggle[aria-expanded='true']
    .hi-ui-section-nav__hamburger::after {
    top: 0;
    transform: rotate(45deg);
  }

  #hi-ui-section-nav .hi-ui-section-nav__menu {
    /* Break out of the LayoutContainer gutter for a full-width panel. */
    margin: 0 -16px;
    display: none;
    flex-direction: column;
    background-color: #04342e;
  }

  /* Open: drop out of flow and fill the screen below the 45px bar (legacy
     `.menu-btn:checked ~ .menu { position: absolute; top: 45px; min-height: 100vh }`),
     overlaying the page. Background scroll is locked in JS so nothing scrolls
     behind it — improving on legacy, where the page still scrolled. */
  #hi-ui-section-nav .hi-ui-section-nav__menu--open {
    display: flex;
    position: absolute;
    top: 45px;
    left: 0;
    right: 0;
    min-height: 100vh;
    z-index: 900;
  }

  #hi-ui-section-nav .hi-ui-section-nav__link,
  #hi-ui-section-nav .hi-ui-section-nav__trigger {
    width: 100%;
    padding: 10px 20px 10px 15px;
    /* Zero the desktop bar's link-spacing margins (20px, 5px on the first item)
       — left over in the stacked panel they pushed every parent except the
       first to the children's indent column, erasing the hierarchy. */
    margin-left: 0;
    text-align: left;
    border-bottom: none;
  }

  /* The desktop first-item margin rule is more specific (it carries the
     :first-child chain), so it needs its own zero here. */
  #hi-ui-section-nav .hi-ui-section-nav__item:first-child .hi-ui-section-nav__link {
    margin-left: 0;
  }

  #hi-ui-section-nav a.hi-ui-section-nav__link:hover {
    border-bottom: none;
  }

  /* The dropdown block carries a divider rule (legacy
     `.subpages_left .menu .dropdown { border-bottom: 1px #146056 solid }`). */
  #hi-ui-section-nav .hi-ui-section-nav__item--dropdown {
    border-bottom: 1px solid #146056;
  }

  /* Active dropdown trigger (its current page lives in the panel): the heading
     goes museo-700 to mark the active section on mobile. */
  #hi-ui-section-nav .hi-ui-section-nav__trigger.hi-ui-section-nav__link--active {
    font-family: var(--hi-text-font-family-heading);
  }

  /* Dropdown children: always shown, nested + indented under the parent. */
  #hi-ui-section-nav .hi-ui-section-nav__dropdown {
    display: block;
    position: static;
    min-width: 0;
    padding: 0 0 10px 20px;
    background: none;
    box-shadow: none;
  }

  #hi-ui-section-nav .hi-ui-section-nav__dropdown-link {
    padding: 10px 20px 10px 15px;
  }
}

/**
 * Page Component Styles
 * Full page layout with TopNav, MainNav, content area with sidebar, and Footer
 */

/* Reset body margin when Page component is used */
body:has(.hi-ui-page) {
  margin: 0;
}

.hi-ui-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #e6e6e6;
}

/* The sticky-footer chain, and the reason it has to keep going.
   `.hi-ui-page` is a `min-height: 100vh` column, so on a page whose content is
   shorter than the viewport there is leftover height to place, and `flex: 1`
   hands it to this container — the standard sticky footer. But the slack has to
   reach the content: a container that grows while its own child stays at
   content height just relocates the emptiness to a gap between the last content
   and the footer. So the container is a column too, and passes the growth on.

   `--full-width` is always applied alongside the base class, so it only resets
   what differs; it inherits the flex behaviour above. Its child is the host
   app's own content root, which hi-ui can't safely target — the app decides
   which of its elements takes the slack (in presales, `<main>` — see
   apps/presales/app/globals.css). */
.hi-ui-page__container {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-top: 15px;
}

.hi-ui-page__container--full-width {
  margin-top: 0;
}

/* `flex: 1 0 auto` rather than `1`: basis `auto` keeps the row's natural height
   as its floor, so on a tall page this adds nothing, and growth is the only
   effect. The row already stretches its children (Flex defaults to
   `align-items: stretch`), so the content card and sidebar follow it down. */
.hi-ui-page__layout {
  flex: 1 0 auto;
  gap: 0;
}

.hi-ui-page__content {
  min-width: 0; /* Prevent content from overflowing */
  padding: 32px;
  background-color: #ffffff;
  border-top-left-radius: 15px;
}

.hi-ui-page__breadcrumbs {
  margin-bottom: 15px;
}

@media (max-width: 768px) {
  .hi-ui-page {
    background-color: #ffffff;
  }

  .hi-ui-page__content {
    padding: 0 0 2rem 0;
  }
}

.hi-ui-add-hosting-confirmation__banner {
  margin-top: 16px;
}

.hi-ui-add-hosting-confirmation__ns-warning {
  margin-top: 8px;
}

.hi-ui-add-hosting-confirmation__card {
  margin-top: 16px;
}

.hi-ui-add-hosting-confirmation__section {
  margin-bottom: 24px;
}

.hi-ui-add-hosting-confirmation__section:last-child {
  margin-bottom: 0;
}

.hi-ui-add-hosting-confirmation__submit {
  margin-top: 24px;
}

.hi-ui-add-hosting-confirmation__notify-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.hi-ui-add-hosting-confirmation__notify-controls > .hi-ui-form-field {
  align-self: stretch;
}

.hi-ui-add-hosting-confirmation__alt-link {
  display: block;
  margin-top: 16px;
}

.hi-ui-add-hosting-confirmation__fallback {
  display: block;
  margin-top: 16px;
}

@media (max-width: 768px) {
  .hi-ui-add-hosting-confirmation__submit button.hi-ui {
    width: 100%;
  }
}

.hi-ui-add-hosting__intro {
  margin-bottom: 8px;
}

.hi-ui-add-hosting__error {
  margin-top: 16px;
}

.hi-ui-add-hosting__loading {
  display: flex;
  justify-content: center;
  padding: 48px 0;
}

.hi-ui-add-hosting__card {
  margin-top: 16px;
}

.hi-ui-add-hosting__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hi-ui-add-hosting__submit {
  margin-top: 24px;
}

@media (max-width: 768px) {
  .hi-ui-add-hosting__submit button.hi-ui {
    width: 100%;
  }
}

/* =============================================================================
 * BasketPage — matches legacy basket.css design
 * ============================================================================= */

.hi-ui-basket-page {
  color: #333333;
  font-family: MuseoSansRounded-300, sans-serif;
  font-size: 14px;
}

/* Title row — Flex handles display/alignment, override gap for legacy match */
.hi-ui-basket-page__title-row {
  gap: 12px;
}

.hi-ui-basket-page__icon {
  width: 28px;
  height: 28px;
  margin-top: 26px;
}

.hi-ui-basket-page__title {
  color: #333333;
  margin: 0;
  padding: 0;
  font-family: MuseoSansRounded-700, sans-serif;
  font-size: 32px;
  letter-spacing: 0;
}

/* Main section */
.hi-ui-basket-page__section {
  padding: 16px 0 48px;
}

/* Error messages — every top-of-basket error notice shares this palette:
   #9c2020 text on a #fef3f2 ground with a #fda5a5 border and square corners.
   The text colour reaches Notice's Text children via its `color: inherit`. */
.hi-ui-basket-page__error {
  padding: 12px;
  margin-bottom: 24px;
  background-color: #fef3f2;
  color: #9c2020;
  border: 1px solid #fda5a5;
  border-radius: 0;
  font-family: MuseoSansRounded-300, sans-serif;
  font-size: 14px;
}

.hi-ui-basket-page__error a {
  color: #9c2020;
}

/* Locked domain transfer notice — bold lead line above a wrapping explanation */
.hi-ui-basket-page__error--locked .hi-ui-basket-page__locked-error-title {
  margin-bottom: 4px;
}

.hi-ui-basket-page .hi-ui-basket-page__error--locked .hi-ui-basket-page__locked-error-body {
  margin-bottom: 0;
  font-family: HiUiMuseoSansRounded-500, sans-serif;
}

/* Locked domain transfer line — the product name and its category render in the
   locked-red; the quantity, price and remove control keep their normal colour.
   The leading `.hi-ui-basket-page` + nested selectors raise specificity above
   the `.hi-ui-page--reset .hi-ui-text` (0,2,0) override in pages.css, which
   otherwise forces Text back to the base colour. */
.hi-ui-basket-page .hi-ui-basket-page__row--locked .hi-ui-basket-page__td-product .hi-ui-text,
.hi-ui-basket-page .hi-ui-basket-page__card--locked .hi-ui-basket-page__card-header .hi-ui-text {
  color: #9c2020;
}

/* "Locked" badge sat alongside a struck-out-free locked transfer name */
.hi-ui-basket-page__locked-badge {
  margin-left: 8px;
  vertical-align: middle;
}

.hi-ui-basket-page .hi-ui-basket-page__locked-badge {
  color: #9c2020;
  border-color: #9c2020;
  border-radius: 0;
  padding: 4px 8px;
  font-family: MuseoSansRounded-700, sans-serif;
  font-size: 13px;
  text-transform: none;
}

/* Optically centre the label (it sits ~1px high at this size) */
.hi-ui-basket-page .hi-ui-basket-page__locked-badge .hi-ui-badge__text {
  position: relative;
  top: 1px;
}

/* Credit warning */
.hi-ui-basket-page__credit-warning {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

.hi-ui-basket-page__credits-intro {
  padding: 8px 0;
  margin-bottom: 0;
}

.hi-ui-basket-page__credits-table {
  padding: 12px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  margin-bottom: 24px;
}

.hi-ui-basket-page__credits-list .hi-ui-description-list__value {
  text-align: right;
}

/* Loading state — Flex handles layout */
.hi-ui-basket-page__loading-container {
  height: 100px;
  font-size: 16px;
}

/* Empty basket */
.hi-ui-basket-page__empty {
  margin-top: 16px;
  border-radius: 4px;
}

.hi-ui-basket-page__empty-title {
  padding-bottom: 16px;
  font-family: MuseoSansRounded-700, sans-serif;
  font-size: 24px;
}

.hi-ui-basket-page__empty-prompt {
  padding: 16px 0;
  font-size: 16px;
}

.hi-ui-basket-page__empty-list {
  padding-left: 32px;
}

.hi-ui-basket-page .hi-ui-basket-page__empty-list-item {
  margin-bottom: 0;
  padding: 4px 0;
}

.hi-ui-basket-page a.hi-ui-basket-page__empty-link {
  color: #333333;
  font-family: HiUiMuseoSansRounded-500, sans-serif;
  font-size: 14px;
  font-weight: normal;
}

.hi-ui-basket-page a.hi-ui-basket-page__empty-link:hover {
  color: #333333;
}

/* =============================================================================
 * Table
 * ============================================================================= */

.hi-ui-basket-page__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

/* Table head */
.hi-ui-basket-page__thead {
  background: #ffffff;
  color: #3b3b3b;
  font-size: 14px;
  font-weight: normal;
  text-transform: uppercase;
}

.hi-ui-basket-page__thead th {
  padding: 0 0 6px 0;
  background: #ffffff;
  font-weight: normal;
  font-size: 14px;
  border: none;
}

.hi-ui-basket-page__th-product {
  text-align: left;
}

.hi-ui-basket-page__th-qty {
  width: 104px;
  text-align: center;
}

.hi-ui-basket-page__th-price {
  width: 104px;
  text-align: right;
}

.hi-ui-basket-page__th-delete {
  width: 64px;
}

/* Gradient bar */
.hi-ui-basket-page__gradient-bar {
  height: 4px;
  padding: 0;
  border: none;
  background: linear-gradient(to right, #193351 0%, #5eaa6b 100%);
  border-radius: 2px;
}

/* =============================================================================
 * Item rows
 * ============================================================================= */

.hi-ui-basket-page__row {
  border-bottom: 1px solid #efefef;
}

.hi-ui-basket-page__row td {
  padding: 0;
}

.hi-ui-basket-page__row-child td {
  padding: 0;
  min-height: unset;
  height: unset;
  vertical-align: top;
}

/* Bundle parent followed by child: remove parent bottom border */
.hi-ui-basket-page__row:has(+ .hi-ui-basket-page__row-child) {
  border-bottom: none;
}

/* Only the last child in a bundle group gets the bottom border */
.hi-ui-basket-page__row-child + .hi-ui-basket-page__row-child {
  border-bottom: none;
}

.hi-ui-basket-page__row-child:has(+ .hi-ui-basket-page__row:not(.hi-ui-basket-page__row-child)),
.hi-ui-basket-page__row-child:last-child {
  border-bottom: 1px solid #efefef;
}

/* Product cell */
.hi-ui-basket-page__td-product {
  text-align: left;
}

.hi-ui-basket-page__product-inner {
  padding: 16px 0;
  line-height: 24px;
}

.hi-ui-basket-page__row-child .hi-ui-basket-page__product-inner {
  padding: 0 0 16px 16px;
  line-height: 20px;
}

.hi-ui-basket-page__product-inner a {
  color: #333333;
  text-decoration: underline;
}

.hi-ui-basket-page .hi-ui-basket-page__item-title {
  font-family: MuseoSansRounded-700, sans-serif;
  font-size: 16px;
}

.hi-ui-basket-page__row-child .hi-ui-basket-page__item-title,
.hi-ui-basket-page__row-child .hi-ui-basket-page__td-qty,
.hi-ui-basket-page__row-child .hi-ui-basket-page__td-price {
  font-family: MuseoSansRounded-300, sans-serif;
  font-size: 14px;
}

.hi-ui-basket-page__item-category {
  font-family: MuseoSansRounded-300, sans-serif;
  font-size: 14px;
  color: #333333;
}

.hi-ui-basket-page__item-spec {
  font-family: MuseoSansRounded-700, sans-serif;
  font-size: 14px;
  color: #333333;
}

.hi-ui-basket-page__product-detail {
  line-height: 24px;
}

.hi-ui-basket-page__admin-fee {
  margin-left: 8px;
}

/* Selects (years, contacts, etc.) — match legacy 7pt style */
.hi-ui-basket-page__select {
  padding: 4px;
  margin: 5px 0 5px 4px;
  background: #f3f3f3;
  color: #333333;
  border: none;
  border-radius: 4px;
  font-family: MuseoSansRounded-700, sans-serif;
  font-size: 12px;
}

/* Authcode input */
.hi-ui-basket-page__authcode-input {
  padding: 4px;
  font-size: 12px;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

/* Quantity cell */
.hi-ui-basket-page__td-qty {
  width: 104px;
  text-align: center;
  font-size: 16px;
  vertical-align: middle;
}

.hi-ui-basket-page__qty-static {
  padding: 0 8px;
}

/* Price cell */
.hi-ui-basket-page__td-price {
  width: 104px;
  text-align: right;
  vertical-align: middle;
  font-family: MuseoSansRounded-700, sans-serif;
  font-size: 16px;
}

/* Delete cell */
.hi-ui-basket-page__td-delete {
  width: 64px;
  text-align: right;
  vertical-align: middle;
}

.hi-ui-basket-page__row-child .hi-ui-basket-page__delete-btn {
  visibility: hidden;
}

.hi-ui-basket-page__delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  padding: 0;
  border: none;
  background: none;
  color: #333333;
  cursor: pointer;
  transition: color 0.2s;
}

.hi-ui-basket-page__delete-btn:hover {
  color: #b6202e;
}

/* =============================================================================
 * Totals
 * ============================================================================= */

.hi-ui-basket-page__total-label {
  padding-top: 32px;
  padding-right: 16px;
  font-size: 14px;
  text-transform: uppercase;
  text-align: right;
  vertical-align: middle;
}

.hi-ui-basket-page__total-value {
  padding-top: 32px;
  padding-right: 0;
  font-family: MuseoSansRounded-700, sans-serif;
  font-size: 24px;
  text-align: right;
  vertical-align: middle;
}

/* =============================================================================
 * Checkout
 * ============================================================================= */

/* Flex handles layout for checkout-row and checkout-cards */
.hi-ui-basket-page__checkout-row {
  padding-top: 8px;
}

.hi-ui-basket-page__checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: #ffd800;
  color: #2b2b2b;
  font-family: MuseoSansRounded-700, sans-serif;
  font-size: 15px;
  text-shadow: none;
  text-transform: uppercase;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s;
}

.hi-ui-basket-page__checkout-btn:hover {
  background: #ffea00;
}

.hi-ui-basket-page__checkout-btn:disabled {
  background: #eeeeee;
  color: #727272;
  cursor: not-allowed;
  text-shadow: none;
}

.hi-ui-basket-page__checkout-lock {
  width: 17px;
  height: 20px;
  margin-bottom: 1px;
}

/* Trustpilot — Flex handles layout */
.hi-ui-basket-page__trustpilot-row {
  padding-top: 16px;
}

.hi-ui-basket-page__trustpilot-row .trustpilot-widget {
  margin-right: -26px;
}

/* Bottom section: footer prompts + checkout + trustpilot */
.hi-ui-basket-page__bottom {
  display: flex;
  flex-direction: column;
}

/* Footer prompts — below checkout/trustpilot on desktop */
.hi-ui-basket-page__footer-prompts {
  order: 1;
  padding-top: 8px;
  color: #000000;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hi-ui-basket-page__footer-prompts a {
  color: #000000;
  text-decoration: underline;
}

/* =============================================================================
 * Mobile — dual-view pattern (desktop table / mobile cards)
 * ============================================================================= */

/* Mobile view: hidden by default */
.hi-ui-basket-page__mobile {
  display: none;
}

@media (max-width: 768px) {
  .hi-ui-basket-page__icon {
    margin-top: 24px;
  }

  .hi-ui-basket-page__title {
    font-size: 24px;
  }

  /* Hide desktop table, show mobile cards */
  .hi-ui-basket-page__desktop {
    display: none;
  }

  .hi-ui-basket-page__mobile {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Card */
  .hi-ui-basket-page__card {
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  /* Card header: product name + delete */
  .hi-ui-basket-page__card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
  }

  /* Card body: product details, selects, etc. */
  .hi-ui-basket-page__card-body {
    padding: 8px 0;
  }

  .hi-ui-basket-page__card-body:empty {
    display: none;
  }

  .hi-ui-basket-page__card-body .hi-ui-basket-page__select {
    display: block;
    width: 100%;
    margin-left: 0;
  }

  .hi-ui-basket-page__card-body .hi-ui-basket-page__authcode-input {
    width: 100%;
    margin-top: 4px;
    box-sizing: border-box;
  }

  /* Bundle children */
  .hi-ui-basket-page__card-children {
    border-top: 1px solid #eeeeee;
    padding-top: 8px;
    margin-top: 8px;
  }

  .hi-ui-basket-page__card-child {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 14px;
    color: #666666;
  }

  /* Card footer: qty + price */
  .hi-ui-basket-page__card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eeeeee;
    padding-top: 12px;
    margin-top: 8px;
  }

  .hi-ui-basket-page__card-footer-price {
    font-family: MuseoSansRounded-700, sans-serif;
    font-size: 18px;
  }

  /* Card total */
  .hi-ui-basket-page__card-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 16px 0 0;
  }

  .hi-ui-basket-page__card-total-value {
    font-size: 22px;
  }

  /* Checkout */
  .hi-ui-basket-page__checkout-row {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 16px;
  }

  .hi-ui-basket-page__checkout-cards {
    justify-content: center;
  }

  .hi-ui-basket-page__checkout-btn {
    width: 100%;
  }

  .hi-ui-basket-page__trustpilot-row {
    justify-content: center;
  }

  .hi-ui-basket-page__trustpilot-row .trustpilot-widget {
    margin-right: 0;
  }

  /* Move footer prompts above checkout on mobile */
  .hi-ui-basket-page__footer-prompts {
    order: 0;
    padding: 24px 0;
    gap: 24px;
  }
}

.hi-ui-be-list-page__sublinks {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0.5rem 0 1rem;
}

.hi-ui-be-list-page__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.hi-ui-be-list-page__filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Greyed placeholder shown in the Email cell of an unassigned mailbox. Colour is set
   on this inner span (not the Text element) so it beats the pages.css reset by owning
   its own colour rather than fighting the reset's specificity. */
.hi-ui-be-list-page__unassigned {
  color: var(--hi-text-color-muted, #6c757d);
}

/* "Manage" row-actions dropdown — the portal's yellow cog trigger that reveals a menu on
   click, matching the package-table manage control (ManagePackages / PackageTable). hi-ui
   has no shared dropdown primitive, so the pattern is replicated page-locally, as there.
   The menu itself is portaled to <body> and positioned with fixed coordinates (see
   ManageMenu.tsx) so it can never be clipped by the table/card containers — this is what
   keeps it on-screen in the mobile card view (issue #325). */
.hi-ui-be-manage {
  display: inline-flex;
}

.hi-ui-be-manage__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: #ffd800;
  color: #1c274c;
  cursor: pointer;
}

.hi-ui-be-manage__trigger:hover,
.hi-ui-be-manage__trigger[aria-expanded='true'] {
  background: #4f678c;
  color: #fff;
}

/* Positioned inline (position: fixed + coordinates) from ManageMenu.tsx; this rule only
   carries the visual styling. z-index sits above page chrome since it lives on <body>. */
.hi-ui-be-manage__menu {
  z-index: 1000;
  width: 220px;
  background: #fff;
  border: 1px solid #c9d3d5;
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.hi-ui-be-manage__item {
  display: block;
  width: 100%;
  padding: 9px 16px;
  background: none;
  border: none;
  text-align: left;
  font-family: MuseoSansRounded-300, sans-serif;
  font-size: 14px;
  color: #2b2b2b;
  cursor: pointer;
  box-sizing: border-box;
}

.hi-ui-be-manage__item:hover:not(:disabled),
.hi-ui-be-manage__item:focus-visible {
  background-color: #edf0f3;
  outline: none;
}

.hi-ui-be-manage__item:disabled {
  color: #909090;
  cursor: not-allowed;
}

/* Manage column has no header label and its control (cog / Assign button) is right-aligned,
   matching the cog column on other pages (ManagePackages uses the Table's align:'right').
   The column is structurally last (the selection column is first) and the grid cells are
   flex containers, so align via justify-content on the last cell / header cell. */
.hi-ui-be-list-page .hi-ui-table-grid .hi-ui-table-cell:last-child,
.hi-ui-be-list-page .hi-ui-table-grid .hi-ui-table-header-cell:last-child {
  justify-content: flex-end;
}

/* Mobile card view: the now-label-less Manage column would otherwise render an empty
   label line above its control — drop it. */
.hi-ui-be-list-page .hi-ui-table-card-label:empty {
  display: none;
}

/* Card view (hi-ui Table switches to cards at <=1024px): with the Manage label hidden its
   control (cog / Assign) would sit at the left of the row. Right-align it to match the
   desktop cog column and to give the leftward-opening dropdown room to stay on-screen
   (issue #325). Manage is the last column and always renders a value, so its card row is
   the last one. */
@media (max-width: 1024px) {
  .hi-ui-be-list-page .hi-ui-table-card-row:last-child .hi-ui-table-card-value {
    margin-left: auto;
  }
}

/* Modal footer actions: a row on desktop. On mobile the shared Modal rule
   (.hi-ui-modal__footer > *) turns this wrapper into a full-width, reversed
   column so the primary action sits on top and Cancel/No below it. */
.hi-ui-be-modal-actions {
  display: flex;
  gap: 12px;
}

/* Modal: clear vertical separation between stacked form fields. FormField's own 0.5rem
   gap is label↔control only, so consecutive fields would otherwise sit flush. */
.hi-ui-be-modal-fields {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 1rem;
}

/* Red asterisk in the "* All fields are required" caption, matching FormField's own
   per-field required markers (--hi-color-error). */
.hi-ui-be-required-asterisk {
  color: var(--hi-color-error, #ef4444);
}

/* Long email addresses: let the grid cells shrink (they are flex containers, so
   default min-width:auto would force the whole grid wider) and wrap the address
   inside the Email column instead of overflowing. */
.hi-ui-be-list-page .hi-ui-table-cell,
.hi-ui-be-list-page .hi-ui-table-header-cell {
  min-width: 0;
}

.hi-ui-be-list-page__email {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Mobile: form controls span full width (portal convention). */
@media (max-width: 767px) {
  .hi-ui-be-list-page__toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .hi-ui-be-list-page__filter {
    flex-direction: column;
    align-items: stretch;
  }

  .hi-ui-be-list-page__filter > * {
    width: 100%;
  }
}

.hi-ui-change-password-page__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .hi-ui-change-password-page__fields {
    width: 40%;
  }
}

.hi-ui-change-password-page__submit {
  margin-top: 12px;
}

@media (min-width: 768px) {
  .hi-ui-change-password-page__submit {
    margin-top: 24px;
  }
}

@media (max-width: 768px) {
  .hi-ui-change-password-page__submit button.hi-ui {
    width: 100%;
  }
}

.hi-ui-extras-page {
  width: 100%;
}

.hi-ui-extras-page .hi-ui-tabs__list {
  overflow-x: hidden;
  gap: 0.25rem;
}

.hi-ui-extras-page .hi-ui-banner {
  margin-bottom: 1.5rem;
}

.hi-ui-extras-page__product {
  width: 100%;
}

.hi-ui-extras-page .hi-ui-text-label {
  font-size: 1.1875rem;
}

.hi-ui-extras-page__product-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#hi-ui-page-root .hi-ui-extras-page__features {
  list-style: none;
  padding: 0 0 0 1rem;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#hi-ui-page-root .hi-ui-extras-page__features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #2b2b2b;
  font-size: 0.875rem;
  margin-bottom: 0;
}

.hi-ui-extras-page__features li::before {
  content: '\2713';
  color: #4e9758;
  font-weight: bold;
  flex-shrink: 0;
}

.hi-ui-extras-page__features--icons li::before {
  display: none;
}

.hi-ui-extras-page__features--icons .hi-ui-icon {
  flex-shrink: 0;
}

.hi-ui-extras-page__specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.hi-ui-extras-page__specs-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border: 2px solid var(--hi-color-primary, #4e9758);
  border-radius: 8px;
}

#hi-ui-page-root .hi-ui-extras-page__specs-card .hi-ui-extras-page__features {
  margin-bottom: 0;
}

.hi-ui-extras-page__tier-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.hi-ui-extras-page__tier-column {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border: 2px solid var(--hi-color-border, #e5e7eb);
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.5;
  transition:
    opacity 0.2s,
    border-color 0.2s;
}

#hi-ui-page-root .hi-ui-extras-page__tier-column .hi-ui-extras-page__features {
  margin-bottom: 0;
}

.hi-ui-extras-page__tier-column:hover {
  opacity: 0.8;
}

.hi-ui-extras-page__tier-column--active {
  opacity: 1;
  border-color: var(--hi-color-primary, #4e9758);
}

.hi-ui-extras-page .hi-ui-card-selector__fieldset {
  margin-bottom: 1rem;
}

.hi-ui-extras-page__card-form {
  box-sizing: border-box;
  width: 100%;
}

.hi-ui-extras-page__card-form .hi-ui-card__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hi-ui-extras-page__card-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.hi-ui-extras-page__email-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hi-ui-extras-page__email-prefix {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.hi-ui-extras-page__email-prefix .hi-ui-input {
  flex: 1;
  min-width: 0;
}

.hi-ui-extras-page__email-at {
  white-space: nowrap;
  flex-shrink: 0;
  margin: 0;
  line-height: 1;
  color: var(--hi-ui-color-text-secondary, #6b7280);
}

.hi-ui-extras-page__email-input .hi-ui-select {
  flex: 1;
  min-width: 0;
}

.hi-ui-extras-page__price-with-renewal {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.hi-ui-extras-page__price-with-renewal .hi-ui-price-display__interval {
  color: inherit;
}

.hi-ui-extras-page__renewal-note {
  color: var(--hi-ui-color-text-secondary, #6b7280);
}

.hi-ui-extras-page__billing-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hi-ui-extras-page__billing-toggle .hi-ui-text {
  margin: 0;
}

.hi-ui-extras-page__billing-toggle .hi-ui-toggle__track {
  background-color: #4e9758;
}

.hi-ui-extras-page__billing-toggle .hi-ui-toggle:hover .hi-ui-toggle__track {
  background-color: #3d7a45;
}

.hi-ui-extras-page__loading {
  display: flex;
  justify-content: center;
  padding: 1.5rem 0;
}

@media (max-width: 768px) {
  .hi-ui-extras-page .hi-ui-text-label {
    font-size: 1rem;
  }

  .hi-ui-extras-page__specs-grid {
    grid-template-columns: 1fr;
  }

  .hi-ui-extras-page__card-form .hi-ui-card__body {
    align-items: center;
  }

  .hi-ui-extras-page__card-footer {
    align-items: stretch;
    width: 100%;
  }

  .hi-ui-extras-page__card-footer .hi-ui-price-display {
    align-self: center;
  }

  .hi-ui-extras-page__price-with-renewal {
    flex-direction: column;
    align-items: center;
  }

  .hi-ui-extras-page__email-input {
    flex-direction: column;
  }

  .hi-ui-extras-page__email-prefix {
    width: 100%;
  }

  #hi-ui-page-root .hi-ui-extras-page__features {
    padding: 0;
  }

  .hi-ui-extras-page__tier-column {
    padding: 0.5rem;
  }

  .hi-ui-extras-page__email-input .hi-ui-select {
    width: 100%;
  }

  .hi-ui-extras-page .hi-ui-card-selector--cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.hi-ui-feedback-page__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hi-ui-feedback-page__submit {
  margin-top: 12px;
}

@media (min-width: 768px) {
  .hi-ui-feedback-page__submit {
    margin-top: 24px;
  }
}

@media (max-width: 768px) {
  .hi-ui-feedback-page__submit button.hi-ui {
    width: 100%;
  }
}

/* Stepper — force the first and last steps to flex-grow equally. hi-ui's base
   sets them to flex: 0 0 auto, which makes the middle step balloon and throws
   off the connector positioning (connectors use -50% of the item's width, so
   they only land between step centres when every item shares equal width). */
.hi-ui-hosting-package-type-form__stepper .hi-ui-stepper__item:first-child,
.hi-ui-hosting-package-type-form__stepper .hi-ui-stepper__item:last-child {
  flex: 1;
}

/* Step 1 — uniform field alignment.
   FormField labelPosition="left" defaults to min-width: 120px, so labels longer
   than that (e.g. "Email distribution lists") push the Select right and break
   the column. We bump the label column to a width that fits every Step-1 label;
   the control area flexes to fill the remaining width (no cap). */
.hi-ui-hosting-package-type-form-step1 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .hi-ui-hosting-package-type-form-step1 .hi-ui-form-field-label-left .hi-ui-form-field-label {
    min-width: 220px;
    width: 220px;
  }

  .hi-ui-hosting-package-type-form-step1 .hi-ui-form-field-label-left .hi-ui-form-field-control {
    flex: 1;
  }
}

.hi-ui-numeric-limit-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Custom-mode row: textfield + select side-by-side so the user can either
   type a number or revert to a preset without a separate "back" action. */
.hi-ui-numeric-limit-field__custom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

/* Custom input: render the unit (e.g. "MB") as an in-field suffix so it stays
   visible once a number is typed, mirroring the placeholder's hint. The input
   gets right padding to make room, and the number spinners are hidden so they
   don't collide with the suffix. */
.hi-ui-numeric-limit-field__input-unit {
  position: relative;
  display: flex;
  align-items: center;
}

.hi-ui-numeric-limit-field__input-unit input {
  width: 100%;
  padding-right: 4.5rem;
  -moz-appearance: textfield;
}

.hi-ui-numeric-limit-field__input-unit input::-webkit-outer-spin-button,
.hi-ui-numeric-limit-field__input-unit input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.hi-ui-numeric-limit-field__unit {
  position: absolute;
  right: 0.75rem;
  color: #6b7280;
  font-size: 0.875rem;
  pointer-events: none;
  white-space: nowrap;
}

/* Email field with a Configure link rendered BELOW the Select (rather than
   FormField's helperText which lands inline-right of the input in the
   labelPosition="left" row layout). Link styling per design feedback:
   smaller font + tight 5px vertical spacing. */
.hi-ui-hosting-package-type-form__email-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

@media (min-width: 768px) {
  .hi-ui-hosting-package-type-form__email-field-configure {
    /* Align under the Select column: label width + FormField row gap */
    padding-left: calc(220px + 1rem);
  }
}

.hi-ui-hosting-package-type-form__email-field-configure a {
  font-size: 14px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: inline-block;
}

/* Steps 2 / 3 — grouped checkbox categories.
   The fieldset becomes a flex wrap container so checkboxes have consistent
   horizontal + vertical gaps. The section title is a regular `<div>` rather
   than a `<legend>` so it sits INSIDE the container rather than overlapping
   the top border (browsers position <legend> over the fieldset border). */
.hi-ui-hosting-package-type-form__category {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0.75rem 1rem 1rem;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.hi-ui-hosting-package-type-form__category-legend {
  flex-basis: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
}

/* The category title renders as <Text variant="heading-3"> → h3.hi-ui-text.
   hi-ui-text-heading-3 (specificity 0,2,1), which sets its own size. Override
   with a 0,3,0 selector (legend class + the two text classes) so the heading
   sits at 16px. */
.hi-ui-hosting-package-type-form__category-legend .hi-ui-text.hi-ui-text-heading-3 {
  font-size: 16px;
}

/* Explanatory subtext under a category heading (steps 2/3). The font/colour
   override uses a 0,3,0 selector (legend + the two hi-ui text classes) so it
   beats hi-ui's body-text rule. */
.hi-ui-hosting-package-type-form__category-subtext {
  display: block;
  margin-top: 0.15rem;
}

.hi-ui-hosting-package-type-form__category-legend
  .hi-ui-text.hi-ui-hosting-package-type-form__category-subtext {
  font-size: 14px;
  color: #6b7280;
}

/* Installable-apps category: 2-column checkbox grid for digestibility; the
   legend (heading + subtext) spans both columns. */
.hi-ui-hosting-package-type-form__category--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.25rem;
}

.hi-ui-hosting-package-type-form__category--grid .hi-ui-hosting-package-type-form__category-legend {
  grid-column: 1 / -1;
}

/* Default-app-install category: block layout for the single dropdown. */
.hi-ui-hosting-package-type-form__category--block {
  display: block;
}

.hi-ui-hosting-package-type-edit-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hi-ui-hosting-package-type-edit-page__form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hi-ui-hosting-package-type-edit-page__header-strip {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  background: var(--hi-ui-surface-muted, #f5f5f5);
  border-radius: 6px;
}

.hi-ui-hosting-package-type-edit-page__os-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.hi-ui-hosting-package-type-edit-page__step {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hi-ui-hosting-package-type-edit-page__footer {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.hi-ui-hosting-package-type-edit-page__submit-error {
  margin-top: 0.5rem;
}

.hi-ui-hosting-package-type-edit-page__success {
  margin-top: 15px;
  margin-bottom: -20px;
}

.hi-ui-hosting-package-type-wizard-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hi-ui-hosting-package-type-wizard-page__form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hi-ui-hosting-package-type-wizard-page__step {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hi-ui-hosting-package-type-wizard-page__footer {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.hi-ui-hosting-package-type-wizard-page__submit-error {
  margin-top: 0.5rem;
}

.hi-ui-hosting-package-types-page__header {
  margin-bottom: 32px;
}

.hi-ui-hosting-package-types-page__toolbar {
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .hi-ui-hosting-package-types-page__toolbar {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 1rem;
  }
}

.hi-ui-hosting-package-types-page .hi-ui-table a.hi-ui-link {
  font-family: MuseoSansRounded-300, sans-serif;
  font-weight: normal;
}

.hi-ui-hosting-package-types-page__cog-wrapper {
  position: relative;
  display: inline-flex;
  margin-left: auto;
}

.hi-ui-hosting-package-types-page__cog-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: #ffd800;
  color: #1c274c;
  cursor: pointer;
}

.hi-ui-hosting-package-types-page__cog-trigger:hover,
.hi-ui-hosting-package-types-page__cog-wrapper--open
  .hi-ui-hosting-package-types-page__cog-trigger {
  background: #4f678c;
  color: #fff;
}

.hi-ui-hosting-package-types-page__dropdown {
  z-index: 10;
  min-width: 100px;
  background: #fff;
  border: 1px solid #c9d3d5;
  border-radius: 3px;
  animation: hi-hosting-package-types-dropdown-fade-in 0.2s ease;
}

@keyframes hi-hosting-package-types-dropdown-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hi-ui-hosting-package-types-page__dropdown-item {
  display: block;
  width: 100%;
  padding: 9px 16px;
  background: none;
  border: none;
  text-align: left;
  font-family: MuseoSansRounded-300, sans-serif;
  font-size: 14px;
  color: #2b2b2b;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}

.hi-ui-hosting-package-types-page__dropdown-item:hover {
  background-color: #edf0f3;
}

/* PageMessages — per-customer message banner.
   Notices carry their own styling; this only spaces stacked notices and the
   optional message title. */

.hi-ui-page-messages > * + * {
  margin-top: 1rem;
}

.hi-ui-page-messages__title {
  margin: 0 0 0.25rem;
  font-weight: 600;
}

/* Override modal styles for the pro2shared upgrade modal (desktop only) */
@media (min-width: 769px) {
  .hi-ui-modal:has(.hi-ui-pro2shared-upgrade-modal) {
    max-width: calc(100vw - 32px);
    border-radius: 20px;
  }

  .hi-ui-modal:has(.hi-ui-pro2shared-upgrade-modal) .hi-ui-modal__body {
    padding: 20px 45px;
  }

  .hi-ui-modal:has(.hi-ui-pro2shared-upgrade-modal--tiers-0),
  .hi-ui-modal:has(.hi-ui-pro2shared-upgrade-modal--tiers-1) {
    width: 560px;
  }

  .hi-ui-modal:has(.hi-ui-pro2shared-upgrade-modal--tiers-2) {
    width: 650px;
  }

  .hi-ui-modal:has(.hi-ui-pro2shared-upgrade-modal--tiers-3) {
    width: 935px;
  }
}

.hi-ui-pro2shared-upgrade-modal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.hi-ui-pro2shared-upgrade-modal__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hi-ui-pro2shared-upgrade-modal__title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  justify-content: center;
}

.hi-ui-pro2shared-upgrade-modal__subtitle {
  font-size: 16px;
}

/* Grey body section — extends edge-to-edge */
.hi-ui-pro2shared-upgrade-modal__body {
  background: #f5f5f5;
  margin: 0 -45px -20px;
  padding: 20px 45px;
  border-radius: 0 0 20px 20px;
}

/* Tier cards */
.hi-ui-pro2shared-upgrade-modal__tiers {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.hi-ui-pro2shared-upgrade-modal__card {
  flex: 1;
  min-width: 200px;
  max-width: 280px;
  border: 1px solid #d3d3d3;
  background: #fff;
  border-radius: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.hi-ui-gradient-bar.hi-ui-pro2shared-upgrade-modal__card-bar {
  height: 5px;
  border-radius: 10px;
  width: calc(100% - 40px);
  margin: 0 auto;
}

.hi-ui-pro2shared-upgrade-modal .hi-ui-pro2shared-upgrade-modal__card-name {
  margin: 0;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: MuseoSansRounded-700, sans-serif;
  font-size: 22px;
  color: #000;
}

/* Feature rows */
.hi-ui-pro2shared-upgrade-modal__features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  margin-top: 10px;
}

.hi-ui-pro2shared-upgrade-modal__feature {
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid #eee;
  padding-top: 8px;
}

.hi-ui-pro2shared-upgrade-modal__feature:last-child {
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.hi-ui-pro2shared-upgrade-modal .hi-ui-pro2shared-upgrade-modal__feature-label {
  font-size: 16px;
}

.hi-ui-pro2shared-upgrade-modal__feature-tick {
  color: #256957;
  flex-shrink: 0;
  padding-left: 16px;
  padding-top: 2px;
  align-self: flex-start;
}

.hi-ui-pro2shared-upgrade-modal__feature-value {
  font-family: MuseoSansRounded-700, sans-serif;
  color: #02927f;
  font-size: 18px;
}

/* Pricing */
.hi-ui-pro2shared-upgrade-modal__pricing {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.hi-ui-pro2shared-upgrade-modal .hi-ui-pro2shared-upgrade-modal__price {
  font-family: MuseoSansRounded-700, sans-serif;
  font-size: 22px;
  color: #285e77;
  margin: 0;
}

.hi-ui-pro2shared-upgrade-modal .hi-ui-pro2shared-upgrade-modal__interval {
  font-family: MuseoSansRounded-300, sans-serif;
  font-size: 12px;
  color: #6e6e6e;
}

/* CTA button */
.hi-ui-pro2shared-upgrade-modal .hi-ui-pro2shared-upgrade-modal__cta {
  width: -moz-fit-content;
  width: fit-content;
  align-self: center;
}

/* Footer disclaimers */
.hi-ui-pro2shared-upgrade-modal__footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  text-align: center;
}

/* Responsive — stack cards on mobile */
@media (max-width: 768px) {
  .hi-ui-pro2shared-upgrade-modal__title {
    margin-top: 0.5rem;
  }

  .hi-ui-pro2shared-upgrade-modal__tiers {
    flex-direction: column;
    align-items: center;
  }

  .hi-ui-pro2shared-upgrade-modal__card {
    max-width: 100%;
    width: 100%;
    padding: 16px;
    gap: 8px;
  }

  .hi-ui-pro2shared-upgrade-modal .hi-ui-pro2shared-upgrade-modal__card-name {
    min-height: auto;
  }

  .hi-ui-pro2shared-upgrade-modal__features {
    margin-top: 4px;
    text-align: center;
  }

  .hi-ui-pro2shared-upgrade-modal__feature {
    justify-content: center;
  }

  .hi-ui-pro2shared-upgrade-modal__feature-tick {
    display: none;
  }

  .hi-ui-pro2shared-upgrade-modal__pricing {
    margin-top: 0;
  }

  .hi-ui-pro2shared-upgrade-modal
    .hi-ui-pro2shared-upgrade-modal__card
    .hi-ui-pro2shared-upgrade-modal__cta {
    width: 100%;
    align-self: stretch;
  }
}

/* ===================================================
   PremiumUpsellModal Component Styles

   Replaces the legacy "Upgrade to Premium Hosting" upsell
   (javascript/cp-premium-hosting-upsell.js). Scoped under
   .hi-ui-ph-upsell to avoid clashing with legacy CSS.
   =================================================== */

.hi-ui-ph-upsell {
  --hi-ph-text-color: #2b2b2b;
  --hi-ph-text-color-muted: #6b7280;
  --hi-ph-border-color: #e5e7eb;
}

/* --- CardSelector card contents --- */
.hi-ui-ph-upsell__card-label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hi-ui-ph-upsell__card-title {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--hi-ph-text-color);
}

.hi-ui-ph-upsell__card-blurb {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--hi-ph-text-color-muted);
}

/* --- Details area (spec + payment columns) --- */
.hi-ui-ph-upsell__details {
  margin-top: 0.5rem;
}

/* --- Spec definition list --- */
.hi-ui-ph-upsell__spec {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 1rem;
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
}

.hi-ui-ph-upsell__spec dt {
  color: var(--hi-ph-text-color-muted);
}

.hi-ui-ph-upsell__spec dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
  color: var(--hi-ph-text-color);
}

/* --- Key features list --- */
.hi-ui-ph-upsell__features {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.hi-ui-ph-upsell__features li {
  padding: 0.25rem 0;
  font-size: 0.875rem;
  color: var(--hi-ph-text-color);
}

.hi-ui-ph-upsell__features strong {
  font-weight: 700;
}

/* The spec <dl> and features <ul> are raw HTML (no .hi-ui-text), so they'd fall
   back to the page font while the surrounding Text components use the hi-ui font.
   Set it directly here — class specificity beats any bare dd/li element rule and a
   direct declaration beats inheritance — so this section matches the others. */
.hi-ui-ph-upsell__spec dt,
.hi-ui-ph-upsell__spec dd,
.hi-ui-ph-upsell__features li {
  font-family: var(--hi-text-font-family);
}

/* --- Payment smallprint --- */
.hi-ui-ph-upsell__smallprint {
  display: block;
  margin-top: 0.375rem;
  color: var(--hi-ph-text-color-muted);
}

/* --- Mobile --- */
@media (max-width: 767px) {
  .hi-ui-ph-upsell__spec dd {
    text-align: left;
  }
}

.hi-ui-manage-hosting-page__section {
  margin-top: 1.5rem;
}

.hi-ui-manage-hosting-page__assign-card {
  margin: 1rem 0;
}

.hi-ui-manage-hosting-page__access-form {
  margin: 1rem 0;
}

/* Mobile: the account/domain dropdowns and their action buttons span the full
   width — stack the form row and stretch each control. */
@media (max-width: 767px) {
  .hi-ui-manage-hosting-page__assign-card .hi-ui-flex,
  .hi-ui-manage-hosting-page__access-form .hi-ui-flex {
    flex-direction: column;
    align-items: stretch;
  }

  .hi-ui-manage-hosting-page__assign-card .hi-ui-form-field,
  .hi-ui-manage-hosting-page__assign-card .hi-ui-select,
  .hi-ui-manage-hosting-page__assign-card button.hi-ui,
  .hi-ui-manage-hosting-page__access-form .hi-ui-select,
  .hi-ui-manage-hosting-page__access-form button.hi-ui {
    width: 100%;
  }
}

.hi-ui-manage-packages-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hi-ui-manage-packages__page-links {
  flex-shrink: 0;
}

.hi-ui-manage-packages__page-links .hi-ui-link {
  font-family: MuseoSansRounded-300, sans-serif;
  font-size: 0.8125rem;
}

.hi-ui-manage-packages-page a.hi-ui-link {
  font-family: MuseoSansRounded-300, sans-serif;
  font-weight: normal;
}

.hi-ui-manage-packages__package-cell .hi-ui-icon {
  position: relative;
  top: -1px;
}

.hi-ui-manage-packages-page .hi-ui-toggle {
  vertical-align: middle;
}

.hi-ui-manage-packages__search-links-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.hi-ui-manage-packages__search-links-row .hi-ui-input {
  width: 200px;
}

.hi-ui-manage-packages__loading {
  display: flex;
  justify-content: center;
  padding: 3rem 0;
}

.hi-ui-manage-packages__bulk-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Group cell */
.hi-ui-manage-packages__group-cell {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}

.hi-ui-manage-packages__group-cell:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Cog dropdown */
.hi-ui-manage-packages__cog-wrapper {
  position: relative;
  display: inline-flex;
}

.hi-ui-manage-packages__cog-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: #ffd800;
  color: #1c274c;
  cursor: pointer;
}

.hi-ui-manage-packages__cog-trigger:hover,
.hi-ui-manage-packages__cog-wrapper--open .hi-ui-manage-packages__cog-trigger {
  background: #4f678c;
  color: #fff;
}

.hi-ui-manage-packages__dropdown {
  z-index: 10;
  width: 220px;
  background: #fff;
  border: 1px solid #c9d3d5;
  border-radius: 3px;
  animation: hi-manage-dropdown-fade-in 0.2s ease;
}

@keyframes hi-manage-dropdown-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hi-ui-manage-packages__dropdown-item {
  display: block;
  width: 100%;
  padding: 9px 16px;
  background: none;
  border: none;
  text-align: left;
  font-family: MuseoSansRounded-300, sans-serif;
  font-size: 14px;
  color: #2b2b2b;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}

.hi-ui-manage-packages__dropdown-item:hover {
  background-color: #edf0f3;
}

/* Delete confirmation list */
.hi-ui-manage-packages__delete-list {
  margin: 0.5rem 0 0;
  padding-left: 1.5rem;
  font-size: 0.875rem;
}

/* Group modal */
.hi-ui-group-modal {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hi-ui-group-modal__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Group management table */
.hi-ui-group-management {
  padding: 0.5rem 0;
}

.hi-ui-group-management__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.hi-ui-group-management__table th {
  text-align: left;
  padding: 0.5rem;
  border-bottom: 1px solid #e5e7eb;
  font-family: MuseoSansRounded-700, sans-serif;
}

.hi-ui-group-management__table td {
  padding: 0.5rem;
  border-bottom: 1px solid #f3f4f6;
  height: 48px;
  vertical-align: middle;
}

.hi-ui-group-management__table th:first-child,
.hi-ui-group-management__table td:first-child {
  width: 350px;
}

.hi-ui-group-management__table td:last-child {
  width: 180px;
  white-space: nowrap;
}

.hi-ui-group-management__edit-button {
  all: unset;
  display: flex;
  align-items: center;
  padding: 4px;
  cursor: pointer;
  border-radius: 4px;
}

.hi-ui-group-management__edit-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.hi-ui-group-management__delete-button {
  all: unset;
  display: flex;
  align-items: center;
  padding: 4px;
  cursor: pointer;
  border-radius: 4px;
  color: #dc3545;
}

.hi-ui-group-management__delete-button:hover {
  background-color: rgba(220, 53, 69, 0.08);
}

/* Migration modal */
.hi-ui-manage-packages__migrate-h4 {
  margin-top: 0.5rem;
}
.hi-ui-manage-packages__faux-link {
  all: unset;
  color: #007bff;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
}

.hi-ui-manage-packages__faux-link:hover {
  text-decoration: underline;
}

.hi-ui-manage-packages__migrate-sites-list {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
  font-size: 0.875rem;
}

/* Mobile */
@media (max-width: 768px) {
  .hi-ui-manage-packages__search-links-row {
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
  }

  .hi-ui-manage-packages__search-links-row .hi-ui-input {
    width: 100%;
    box-sizing: border-box;
  }

  .hi-ui-manage-packages__page-links {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-shrink: 1;
    width: 100%;
    box-sizing: border-box;
  }

  .hi-ui-manage-packages__bulk-actions {
    flex-direction: column;
  }

  .hi-ui-manage-packages__migrate-schedule {
    flex-direction: column;
  }

  .hi-ui-manage-packages__migrate-schedule .hi-ui-select {
    width: 100%;
  }

  .hi-ui-manage-packages__migrate-card .hi-ui.tw-w-auto {
    width: 100%;
  }

  .hi-ui-manage-packages-page .hi-ui-manage-packages__bulk-actions .hi-ui.tw-w-auto {
    width: 100%;
  }

  .hi-ui-manage-packages-page > .hi-ui-card .hi-ui-card__body > .hi-ui-flex {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .hi-ui-manage-packages-page > .hi-ui-card .hi-ui-card__body .hi-ui {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .hi-ui-manage-packages-page > .hi-ui-card .hi-ui-card__body .hi-ui-select {
    grid-column: 1 / -1;
    width: 100%;
  }
}

.hi-ui-notifications-page a.hi-ui-link {
  font-family: MuseoSansRounded-300, sans-serif;
  font-size: 14px;
  font-weight: normal;
}

.hi-ui-notifications-page__submit {
  margin-top: 12px;
}

.hi-ui-notifications-page__table-section {
  margin-top: 24px;
}

.hi-ui-notifications-page__table-header {
  margin-bottom: 12px;
}

/* Fix column widths so sorting doesn't reflow them. Without this the
   browser auto-sizes columns from content, and the longest visible
   domain on the current page determines the Domain Name width — which
   "jumps" each time the sort changes. `table-layout: fixed` respects
   the per-column widths set on the <th>s. The Domain Name column is
   `width: auto`, so it absorbs whatever space the four fixed-width
   columns don't take. Long domain names wrap to a second line rather
   than stretching the column. */
.hi-ui-notifications-page__table-section .hi-ui-table-desktop {
  table-layout: fixed;
}

@media (min-width: 768px) {
  .hi-ui-notifications-page__submit {
    margin-top: 24px;
  }
}

@media (max-width: 768px) {
  .hi-ui-notifications-page__submit button.hi-ui {
    width: 100%;
  }
}

/* Cog dropdown — mirrors ManagePackagesPage exactly */
.hi-ui-notifications-page__cog-wrapper {
  position: relative;
  display: inline-flex;
}

.hi-ui-notifications-page__cog-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: #ffd800;
  color: #1c274c;
  cursor: pointer;
}

.hi-ui-notifications-page__cog-trigger:hover,
.hi-ui-notifications-page__cog-wrapper--open .hi-ui-notifications-page__cog-trigger {
  background: #4f678c;
  color: #fff;
}

.hi-ui-notifications-page__dropdown {
  z-index: 10;
  width: 220px;
  background: #fff;
  border: 1px solid #c9d3d5;
  border-radius: 3px;
  animation: hi-notifications-dropdown-fade-in 0.2s ease;
}

@keyframes hi-notifications-dropdown-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hi-ui-notifications-page__dropdown-item {
  display: block;
  width: 100%;
  padding: 9px 16px;
  background: none;
  border: none;
  text-align: left;
  font-family: MuseoSansRounded-300, sans-serif;
  font-size: 14px;
  color: #2b2b2b;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}

.hi-ui-notifications-page__dropdown-item:hover {
  background-color: #edf0f3;
}

.hi-ui-order-domain-credits-page {
  width: 100%;
}

.hi-ui-order-domain-credits-page__section {
  margin-top: 2rem;
}

/* Responsive grid of batch-size pricing cards (replaces the legacy transposed table). */
.hi-ui-order-domain-credits-page__card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.hi-ui-order-domain-credits-page__card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.hi-ui-order-domain-credits-page__card-title {
  margin: 0;
}

.hi-ui-order-domain-credits-page__buy-form {
  margin-top: 0.5rem;
}

/* PayPal button (and its loading placeholder) sit under Buy now, centred. */
.hi-ui-order-domain-credits-page__paypal {
  margin-top: 0.5rem;
  min-height: 1.5rem;
  width: 100%;
  display: flex;
  justify-content: center;
}

.hi-ui-order-domain-credits-page__paypal-loading {
  margin-top: 0.5rem;
  min-height: 1.5rem;
  text-align: center;
}

/* Low-credit warning fields: compact label column with a small input sitting
   close to the label. */
@media (min-width: 768px) {
  .hi-ui-order-domain-credits-page__warnings .hi-ui-form-field-label-left {
    gap: 0.5rem;
  }

  .hi-ui-order-domain-credits-page__warnings .hi-ui-form-field-label {
    width: 20rem;
    min-width: 20rem;
    white-space: nowrap;
  }
}

.hi-ui-order-domain-credits-page__warnings .hi-ui-form-field-control input {
  width: 5rem;
}

/* Space between each warning-level option. */
.hi-ui-order-domain-credits-page__warnings .hi-ui-form-field {
  margin-bottom: 1rem;
}

.hi-ui-order-domain-credits-page__warnings-submit {
  margin-top: 1.25rem;
}

/* Balances: inline label + value, values right-aligned so they line up in a
   column with each other. */
.hi-ui-order-domain-credits-page__balances {
  max-width: 28rem;
}

.hi-ui-order-domain-credits-page__balances .hi-ui-description-list__item {
  justify-content: space-between;
  gap: 1rem;
}

/* Bold labels. */
.hi-ui-order-domain-credits-page__balances .hi-ui-description-list__label {
  font-weight: 700;
}

/* Balance values: solid black, larger and bold so the counts stand out
   (overrides the hi-ui DescriptionList default value colour of #007bff). */
.hi-ui-order-domain-credits-page__balances .hi-ui-description-list__value {
  color: #000;
  font-size: 1.25rem;
  font-weight: 700;
}

.hi-ui-domains-modal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 0;
}

.hi-ui-domains-modal__detail .hi-ui-copy-button {
  position: relative;
  top: -5px;
}

.hi-ui-domains-modal__type-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hi-ui-domains-modal__type-header .hi-ui-text {
  font-size: 16px;
}

.hi-ui-domains-modal__type-header .hi-ui-package-table__package-badge {
  font-size: 16px;
}

.hi-ui-domains-modal__detail {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.hi-ui-domains-modal__list-header {
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
}

.hi-ui-domains-modal__list-header .hi-ui-pagination {
  width: 100%;
}

.hi-ui-domains-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hi-ui-domains-modal__list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  gap: 12px;
}

.hi-ui-domains-modal__domain-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.hi-ui-domains-modal__domain-text {
  font-size: 18px;
}

.hi-ui-domains-modal__unavailable-hint {
  color: #999;
}

.hi-ui-domains-modal__unavailable {
  color: #999;
  flex-shrink: 0;
}

.hi-ui-domains-modal__list-item button.hi-ui.tw-btn-size-small,
.hi-ui-domains-modal__list-item a.hi-ui.tw-btn-size-small {
  padding: 5px 8px 4px;
}

@media (max-width: 768px) {
  .hi-ui-domains-modal__list-item {
    gap: 10px;
  }

  .hi-ui-domains-modal__domain-text {
    font-size: 14px;
    word-break: break-all;
  }

  .hi-ui-domains-modal__list-item button.hi-ui.tw-btn-size-small,
  .hi-ui-domains-modal__list-item a.hi-ui.tw-btn-size-small {
    padding: 3px 6px 2px;
  }
}

.hi-ui-assign-domain-modal {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hi-ui-assign-domain-modal .hi-ui-notice {
  margin-bottom: 0;
}

.hi-ui-assign-domain-modal__no-options {
  color: #c31d1d;
  font-family: MuseoSansRounded-300, sans-serif;
  font-size: 16px;
  margin-bottom: 8px;
}

.hi-ui-assign-domain-modal__current {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
}

.hi-ui-assign-domain-modal__actions {
  display: flex;
  justify-content: center;
  padding: 12px 0 20px;
}

.hi-ui-assign-domain-modal__help-content {
  display: flex;
  flex-direction: column;
}

/* Override medium size to 420px on desktop; below 768 let the
   generic mobile rule take over (full-screen) */
@media (min-width: 769px) {
  .hi-ui-modal--medium:has(.hi-ui-assign-domain-modal) {
    width: 420px;
  }
}

/* Allow dropdown to overflow the modal */
.hi-ui-modal:has(.hi-ui-assign-domain-modal) {
  overflow: visible;
}

.hi-ui-modal__body:has(.hi-ui-assign-domain-modal) {
  overflow: visible;
}

/* DNS checkbox: right-aligned, label before box */
.hi-ui-assign-domain-modal .hi-ui-checkbox {
  align-self: flex-end;
  flex-direction: row-reverse;
  padding: 4px 0;
}

/* Gradient border on FilterableSelect trigger */
.hi-ui-assign-domain-modal .hi-ui-filterable-select__trigger {
  border: none;
  background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #1d3555, #4b83cd);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 3px solid transparent;
  border-radius: 6px;
}

/* Gradient border on dropdown */
.hi-ui-assign-domain-modal .hi-ui-filterable-select__dropdown {
  border: none;
  background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #1d3555, #4b83cd);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 3px solid transparent;
  border-radius: 6px;
}

/* Dropdown option font size */
.hi-ui-assign-domain-modal .hi-ui-filterable-select__option {
  font-size: 18px;
  word-break: break-all;
}

/* Accordion background */
.hi-ui-assign-domain-modal .hi-ui-accordion__item {
  background: #f0f0f0;
  padding: 2px 14px;
  border-radius: 5px;
}

.hi-ui-assign-domain-modal .hi-ui-accordion__trigger {
  min-height: 0;
  padding: 12px 0;
}

.hi-ui-assign-domain-modal .hi-ui-accordion__item--expanded .hi-ui-accordion__content {
  padding: 0 0 16px;
}

.hi-ui-assign-domain-modal .hi-ui-accordion__label {
  font-family: MuseoSansRounded-700, sans-serif;
  font-size: 14px;
}

/* Colored scrollbar */
.hi-ui-assign-domain-modal .hi-ui-filterable-select__listbox {
  scrollbar-color: #4a8675 transparent;
  max-height: 240px;
}

/* Override modal styles for upgrade modal (desktop only) */
@media (min-width: 769px) {
  .hi-ui-modal:has(.hi-ui-upgrade-modal) {
    max-width: calc(100vw - 32px);
    border-radius: 20px;
  }

  .hi-ui-modal:has(.hi-ui-upgrade-modal) .hi-ui-modal__body {
    padding: 20px 45px;
  }

  .hi-ui-modal:has(.hi-ui-upgrade-modal--plans-0),
  .hi-ui-modal:has(.hi-ui-upgrade-modal--plans-1) {
    width: 560px;
  }

  .hi-ui-modal:has(.hi-ui-upgrade-modal--plans-2) {
    width: 650px;
  }

  .hi-ui-modal:has(.hi-ui-upgrade-modal--plans-3) {
    width: 935px;
  }
}

.hi-ui-upgrade-modal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.hi-ui-upgrade-modal__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hi-ui-upgrade-modal__icon {
  margin-bottom: 4px;
}

.hi-ui-upgrade-modal__title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  justify-content: center;
}

.hi-ui-upgrade-modal .hi-ui-package-table__package-badge {
  font-size: 18px;
}

.hi-ui-upgrade-modal .hi-ui-package-table__package-badge-border {
  padding: 3px;
  position: relative;
  top: -1px;
}

.hi-ui-upgrade-modal__subtitle {
  font-size: 16px;
}

.hi-ui-upgrade-modal .hi-ui-upgrade-modal__green-text {
  font-family: MuseoSansRounded-700, sans-serif;
  font-size: 16px;
  color: #285e77;
}

/* Grey body section — extends edge-to-edge */
.hi-ui-upgrade-modal__body {
  background: #f5f5f5;
  margin: 0 -45px -20px;
  padding: 20px 45px;
  border-radius: 0 0 20px 20px;
}

/* Plan cards */
.hi-ui-upgrade-modal__plans {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.hi-ui-upgrade-modal__card {
  flex: 1;
  min-width: 200px;
  max-width: 280px;
  border: 1px solid #d3d3d3;
  background: #fff;
  border-radius: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.hi-ui-gradient-bar.hi-ui-upgrade-modal__card-bar {
  height: 5px;
  border-radius: 10px;
  width: calc(100% - 40px);
  margin: 0 auto;
}

.hi-ui-upgrade-modal .hi-ui-upgrade-modal__card-name {
  margin: 0;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: MuseoSansRounded-700, sans-serif;
  font-size: 22px;
  color: #000;
}

/* Feature comparison rows */
.hi-ui-upgrade-modal__features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  margin-top: 10px;
}

.hi-ui-upgrade-modal__feature {
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid #eee;
  padding-top: 8px;
}

.hi-ui-upgrade-modal__feature:last-child {
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.hi-ui-upgrade-modal .hi-ui-upgrade-modal__feature-label {
  font-size: 16px;
}

.hi-ui-upgrade-modal__feature-tick {
  color: #256957;
  flex-shrink: 0;
  padding-left: 16px;
  padding-top: 2px;
  align-self: flex-start;
}

.hi-ui-upgrade-modal__feature-values {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.hi-ui-upgrade-modal .hi-ui-upgrade-modal__feature-old {
  font-family: MuseoSansRounded-300, sans-serif;
  font-size: 16px;
  color: #808080;
}

.hi-ui-upgrade-modal__feature-arrow {
  color: #256957;
}

.hi-ui-upgrade-modal .hi-ui-upgrade-modal__feature-new {
  font-family: MuseoSansRounded-700, sans-serif;
  color: #02927f;
  font-size: 18px;
}

/* Pricing */
.hi-ui-upgrade-modal__pricing {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.hi-ui-upgrade-modal .hi-ui-upgrade-modal__price {
  font-family: MuseoSansRounded-700, sans-serif;
  font-size: 22px;
  color: #285e77;
  margin: 0;
}

.hi-ui-upgrade-modal .hi-ui-upgrade-modal__vat {
  font-family: MuseoSansRounded-300, sans-serif;
  font-size: 12px;
  color: #2b2b2b;
}

.hi-ui-upgrade-modal .hi-ui-upgrade-modal__renewal {
  font-family: MuseoSansRounded-300, sans-serif;
  font-size: 12px;
  color: #6e6e6e;
}

/* CTA button */
.hi-ui-upgrade-modal .hi-ui-upgrade-modal__cta {
  width: -moz-fit-content;
  width: fit-content;
  align-self: center;
}

/* Loading state */
.hi-ui-upgrade-modal__loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

/* Error block with retry */
.hi-ui-upgrade-modal__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Footer */
.hi-ui-upgrade-modal__footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 16px;
  text-align: center;
}

/* Responsive — stack cards on mobile */
@media (max-width: 768px) {
  .hi-ui-upgrade-modal__title {
    margin-top: 0.5rem;
  }

  .hi-ui-upgrade-modal__plans {
    flex-direction: column;
    align-items: center;
  }

  .hi-ui-upgrade-modal__card {
    max-width: 100%;
    width: 100%;
    padding: 16px;
    gap: 8px;
  }

  .hi-ui-upgrade-modal .hi-ui-upgrade-modal__card-name {
    min-height: auto;
  }

  .hi-ui-upgrade-modal__features {
    margin-top: 4px;
  }

  .hi-ui-upgrade-modal__features {
    text-align: center;
  }

  .hi-ui-upgrade-modal__feature {
    justify-content: center;
  }

  .hi-ui-upgrade-modal__feature-values {
    justify-content: center;
  }

  .hi-ui-upgrade-modal__feature-tick {
    display: none;
  }

  .hi-ui-upgrade-modal__pricing {
    margin-top: 0;
  }

  .hi-ui-upgrade-modal .hi-ui-upgrade-modal__renewal,
  .hi-ui-upgrade-modal .hi-ui-upgrade-modal__vat {
    font-size: 14px;
  }

  .hi-ui-upgrade-modal .hi-ui-upgrade-modal__card .hi-ui-upgrade-modal__cta {
    width: 100%;
    align-self: stretch;
  }
}

.hi-ui-package-table-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 14px;
}

.hi-ui-package-table-page .hi-ui-table-empty-cell {
  text-align: left;
}

/* Websites column — smaller font to match legacy */
.hi-ui-package-table__websites-cell {
  font-size: 12px;
  white-space: nowrap;
}

a.hi-ui-package-table__websites-link.hi-ui-link {
  color: #2b2b2b;
  text-decoration: underline;
  cursor: pointer;
  font-family: MuseoSansRounded-300, sans-serif;
  font-weight: normal;
}

.hi-ui-package-table-page__header {
  display: flex;
  flex-direction: column;
}

.hi-ui-package-table-page__intro {
  display: flex;
  flex-direction: column;
}

/* Package Domain cell */
.hi-ui-package-table__domain-cell {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.hi-ui-package-table__product-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 4px;
}

.hi-ui-package-table__domain-name {
  font-size: 14px;
  word-break: break-all;
}

.hi-ui-package-table__info-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: help;
  margin-top: 4px;
}

.hi-ui-package-table__edit-button {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.hi-ui-package-table__edit-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.hi-ui-package-table__edit-icon {
  width: 16px;
  height: 16px;
}

/* IP cell */
.hi-ui-package-table__ip-cell {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Suspended badge — tooltip wrapper must fill the grid cell */
.hi-ui-tooltip-wrapper:has(.hi-ui-package-table__suspended-badge) {
  width: 100%;
}

.hi-ui-package-table__suspended-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 8px;
  width: 100%;
  background: #cf2d3c;
  color: #ffffff;
  border-radius: 5px;
  font-family: MuseoSansRounded-700, sans-serif;
  font-size: 12px;
}

/* Manage dropdown */
.hi-ui-package-table__manage-dropdown {
  position: relative;
  display: inline-block;
  margin-left: auto;
}

.hi-ui-package-table__manage-dropdown--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.hi-ui-package-table__cog-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: #ffd800;
  color: #1c274c;
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s;
}

@media (hover: hover) {
  .hi-ui-package-table__cog-trigger:hover {
    background: #4f678c;
    color: #fff;
  }
}

.hi-ui-package-table__manage-dropdown--open .hi-ui-package-table__cog-trigger {
  background: #4f678c;
  color: #fff;
}

.hi-ui-package-table__cog-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hi-ui-package-table__cog-trigger--loading {
  opacity: 0.5;
  cursor: not-allowed;
  background: #4f678c;
  color: #fff;
}

@keyframes hi-ui-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hi-ui-package-table__manage-menu {
  z-index: 10;
  width: 124px;
  background: #fff;
  border: 1px solid #c9d3d5;
  border-radius: 3px;
  animation: hi-ui-fade-in 0.2s ease;
}

.hi-ui-package-table__manage-item {
  display: block;
  width: 100%;
  padding: 9px 16px;
  background: none;
  border: none;
  text-align: left;
  font-family: MuseoSansRounded-300, sans-serif;
  font-size: 14px;
  color: #2b2b2b;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}

/* Package type badge — gradient-border pill */
.hi-ui-package-table__package-badge-border {
  background-image: linear-gradient(to right, #11293f, #5fad6e);
  padding: 2px;
  border-radius: 20px;
  display: inline-block;
}

.hi-ui-package-table__package-badge {
  display: flex;
  padding: 4px 6px 2px;
  background: #ffffff;
  border-radius: 20px;
  font-family: MuseoSansRounded-700, sans-serif;
  font-size: 11px;
  line-height: 16px;
  text-transform: uppercase;
  white-space: nowrap;
}

.hi-ui-package-table__manage-item:hover {
  background-color: #edf0f3;
}

/* Upgrade notifications */
.hi-ui-package-table-page__notifications {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hi-ui-package-table-page .hi-ui-notice {
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
  border: none;
}

.hi-ui-package-table-page .hi-ui-notice--success {
  background-color: #dbfae7;
}

.hi-ui-package-table-page .hi-ui-notice--error {
  background-color: #ffe6e6;
}

.hi-ui-package-table-page .hi-ui-notice.hi-ui-package-table-page__no-domains {
  width: auto;
}

.hi-ui-package-table-page .hi-ui-notice__dismiss {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  opacity: 1;
}

.hi-ui-package-table-page .hi-ui-notice__dismiss svg {
  width: 1rem;
  height: 1rem;
}

.hi-ui-package-table-page .hi-ui-notice__icon {
  align-self: center;
}

/* Pulse animation for upgrade in-progress icon */
@keyframes hi-ui-upgrade-pulse {
  0%,
  60%,
  100% {
    transform: scale(1);
  }
  80% {
    transform: scale(1.2);
  }
}

.hi-ui-package-table-page__pulse-icon {
  display: inline-flex;
  animation: hi-ui-upgrade-pulse 1s linear infinite;
}

/* Notification text layout */
.hi-ui-package-table-page__notification-success {
  display: flex;
  flex-direction: column;
}

.hi-ui-package-table-page__notification-success > .hi-ui-text:first-child {
  font-size: 13px;
  color: #000;
}

.hi-ui-package-table-page__notification-success > .hi-ui-text:last-child {
  font-family: MuseoSansRounded-300, sans-serif;
  font-size: 12px;
}

.hi-ui-package-table-page__notification-error {
  display: flex;
  flex-direction: column;
}

.hi-ui-package-table-page__notification-error > .hi-ui-text:first-child {
  font-size: 13px;
  color: #000;
}

.hi-ui-package-table-page__notification-error > .hi-ui-text:last-child {
  font-family: MuseoSansRounded-300, sans-serif;
  font-size: 12px;
}

.hi-ui-package-table-page__notification-error .hi-ui-link {
  font-family: MuseoSansRounded-700, sans-serif;
  font-size: 12px;
  color: #000;
}

/* Notice background — match upgrade error notifications */
.hi-ui-package-table-page .hi-ui-notice--error {
  background-color: #ffe6e6;
}

/* Notice heading */
.hi-ui-package-table-page .hi-ui-notice--error .hi-ui-notice__content > .hi-ui-text:first-child {
  font-size: 18px;
  margin-bottom: 0.5rem;
}

/* Notice body text — #2b2b2b, leaving the "No domains found" heading in Notice red */
.hi-ui-package-table-page__errorbox-body,
.hi-ui-package-table-page__errorbox-body .hi-ui-text {
  color: #2b2b2b !important;
}

.hi-ui-package-table-page__errorbox-body p {
  margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
  .hi-ui-package-table__product-icon,
  .hi-ui-package-table__info-icon {
    margin-top: 0;
  }

  .hi-ui-package-table__edit-button {
    margin-top: -3px;
  }

  .hi-ui-package-table__suspended-badge {
    padding: 4px 8px;
  }
}

/* ─── Outer wrapper — full-width background with diagonal bars ─────────── */

.hi-ui-register-page {
  background-color: #f5f5f5;
  position: relative;
  overflow: hidden;
  padding: 60px 20px 80px;
}

/* Diagonal ribbons — exact presales parallax_shape1 / parallax_shape2 values,
   only changed position:fixed → position:absolute */
.hi-ui-register-page::before,
.hi-ui-register-page::after {
  content: '';
  position: absolute;
  top: 0;
  width: 3800px;
  height: 85px;
  opacity: 0.9999;
  mix-blend-mode: multiply;
  z-index: 0;
  pointer-events: none;
  transform-origin: 100% 100%;
}

/* parallax_shape1 — green */
.hi-ui-register-page::before {
  right: -330px;
  background: linear-gradient(45deg, #60b76c 46%, #428468);
  transform: rotate(-30deg);
}

/* parallax_shape2 — navy→green (top shifted up so bar extends to top edge) */
.hi-ui-register-page::after {
  right: 550px;
  top: -300px;
  background: linear-gradient(45deg, #1c3b5d 75%, #5db269 87%);
  transform: rotate(-127deg);
}

/* ─── Content container — centered above the bars ──────────────────────── */

.hi-ui-register-page__content {
  position: relative;
  z-index: 1;
  max-width: 650px;
  margin: 0 auto;
}

/* ─── Header — centered above the form card ────────────────────────────── */

.hi-ui-register-page__header {
  text-align: center;
  margin-bottom: 2rem;
}

.hi-ui-register-page__header .hi-ui-text-heading-1 {
  font-size: 36px;
  font-family: 'HiUiMuseoSansRounded-500';
  font-weight: normal;
  margin: 0;
}

.hi-ui-register-page__help {
  justify-content: center;
  margin-top: 0.75rem;
}

.hi-ui-register-page__help p {
  font-size: 18px;
}

/* ─── Server errors ────────────────────────────────────────────────────── */

.hi-ui-register-page__server-errors {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ─── Form card — white card on the gray background ────────────────────── */

.hi-ui-register-page__form {
  padding: 32px;
  margin-top: 10px;
  background: #ffffff;
}

/* ─── Row spacing — 24px between field groups (matching live page) ─────── */

.hi-ui-register-page__name-row,
.hi-ui-register-page__address-search-row,
.hi-ui-register-page__address-fields,
.hi-ui-register-page__email-row,
.hi-ui-register-page__password-row,
.hi-ui-register-page__dob-row,
.hi-ui-register-page__company-row {
  margin-bottom: 24px;
}

/* Tighter spacing for stacked address fields within the group */
.hi-ui-register-page__address-fields .hi-ui-form-field {
  margin-bottom: 8px;
}

/* ─── Field sizing ─────────────────────────────────────────────────────── */

/* Title select narrower */
.hi-ui-register-page__title-field {
  flex: 0 0 auto;
  min-width: 100px;
  max-width: 120px;
}

/* Country field */
.hi-ui-register-page__country-field {
  flex: 0 0 auto;
  min-width: 200px;
}

/* Ideal Postcodes wrapper */
.hi-ui-register-page__ideal-wrapper {
  flex: 2;
}

/* Manual address — styled as green link (matching live page) */
.hi-ui-register-page__manual-address-btn {
  flex-shrink: 0;
  align-self: center;
  color: #63b770;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-weight: 400;
  font-size: 0.875rem;
}

.hi-ui-register-page__manual-address-btn:hover {
  color: #52955c;
}

/* ─── Password ─────────────────────────────────────────────────────────── */

.hi-ui-register-page__password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.hi-ui-register-page__password-wrapper .hi-ui-input {
  flex: 1;
  padding-right: 2.5rem;
}

.hi-ui-register-page__password-toggle {
  position: absolute;
  right: 0.5rem;
  padding: 0.25rem;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #2b2b2b;
}

.hi-ui-register-page__password-toggle:hover {
  color: #000;
}

/* ─── Checkboxes ───────────────────────────────────────────────────────── */

.hi-ui-register-page__checkboxes {
  margin-bottom: 16px;
}

.hi-ui-register-page__tandc-error {
  margin-left: 1.75rem;
  margin-top: 0.25rem;
}

/* ─── Submit section — ReCAPTCHA and button side by side ───────────────── */

.hi-ui-register-page__submit-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

.hi-ui-register-page__recaptcha {
  flex-shrink: 0;
}

.hi-ui-register-page__actions {
  flex-shrink: 0;
}

.hi-ui-register-page__actions .tw-btn-base {
  min-width: 300px;
  min-height: 56px;
  text-transform: uppercase;
  font-size: 1rem;
}

/* ─── Mobile ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .hi-ui-register-page {
    padding: 40px 0 60px;
  }

  .hi-ui-register-page::before,
  .hi-ui-register-page::after {
    width: 2000px;
    height: 60px;
    top: 80px;
  }

  .hi-ui-register-page::before {
    right: -200px;
    top: -110px;
  }

  .hi-ui-register-page::after {
    right: 325px;
    top: -100px;
  }

  .hi-ui-register-page__help.hi-ui-flex {
    flex-direction: column;
  }

  .hi-ui-register-page__form {
    padding: 20px 16px;
  }

  .hi-ui-register-page__name-row.hi-ui-flex,
  .hi-ui-register-page__address-search-row.hi-ui-flex,
  .hi-ui-register-page__email-row.hi-ui-flex,
  .hi-ui-register-page__password-row.hi-ui-flex,
  .hi-ui-register-page__dob-row.hi-ui-flex,
  .hi-ui-register-page__company-row.hi-ui-flex {
    flex-direction: column;
    gap: 8px;
  }

  .hi-ui-register-page__title-field,
  .hi-ui-register-page__country-field {
    min-width: unset;
    max-width: unset;
    width: 100%;
  }

  .hi-ui-register-page__ideal-wrapper {
    width: 100%;
  }

  .hi-ui-register-page__submit-row {
    flex-direction: column;
    gap: 8px;
  }

  .hi-ui-register-page__actions .tw-btn-base {
    min-width: 200px;
    width: 100%;
  }
}

.hi-ui-ssl-info-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hi-ui-ssl-info-page__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hi-ui-ssl-info-page__message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 240px;
}

/* A flow (install or manage) is a vertical stack of section cards. */
.hi-ui-ssl-info__flow {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hi-ui-ssl-info__section-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Tighten the gap between a section card's header and its body (hi-ui Card pads
   header + body 24px each). Trim the facing edges so a heading sits close to its
   subheading. */
.hi-ui-ssl-info-page .hi-ui-card__header {
  padding-bottom: 4px;
}

.hi-ui-ssl-info-page .hi-ui-card__body {
  padding-top: 4px;
}

/* The page spaces everything with flex `gap`, but hi-ui headings/body Text ship
   large default margins (heading margin-top 24px, margin-bottom 8-12px, body
   margin-bottom 16px) that both fight the gap and throw off flex alignment — e.g.
   a status Badge centring against a heading's margin-box instead of its text.
   Reset them so `gap` alone governs spacing. */
.hi-ui-ssl-info-page .hi-ui-text {
  margin: 0;
}

/* Highlight an incomplete section on a failed submit (mirrors legacy .section-error). */
.hi-ui-ssl-info__section--error {
  border-color: #d64545;
  box-shadow: 0 0 0 1px #d64545;
}

.hi-ui-ssl-info__section-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hi-ui-ssl-info__manage-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.hi-ui-ssl-info__actions {
  display: flex;
  gap: 12px;
}

/* Organisation Details: two-column form grid on desktop, single column on mobile. */
.hi-ui-ssl-info__form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Coverage preview + subdomain block. */
.hi-ui-ssl-info__preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hi-ui-ssl-info__domain-option {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid #e0e0e0;
}

.hi-ui-ssl-info__domain-search,
.hi-ui-ssl-info__domain-csr,
.hi-ui-ssl-info__subdomain {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hi-ui-ssl-info__checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.hi-ui-ssl-info__inline-spinner {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* DCV method options: grey the non-selected ones (mirrors .control-section-disabled). */
.hi-ui-ssl-info__dcv-option {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid #e0e0e0;
}

.hi-ui-ssl-info__dcv-option--disabled {
  opacity: 0.5;
}

.hi-ui-ssl-info__dcv-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 28px;
}

/* Wrapper so the "Show me how" button keeps its natural width in the DCV column
   (a bare Button is a flex child and would stretch to full width). */
.hi-ui-ssl-info__dcv-action {
  display: flex;
}

.hi-ui-ssl-info__email-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* OV/EV validation checklist. */
.hi-ui-ssl-info__validation-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hi-ui-ssl-info__validation-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-left-width: 4px;
  border-radius: 8px;
}

/* Fixed-size status icon; the label + status text flow beside it. Inline on
   desktop, stacked on mobile (see media query) so narrow rows don't split into
   two cramped, ragged columns. */
.hi-ui-ssl-info__validation-step .hi-ui-icon {
  flex-shrink: 0;
}

.hi-ui-ssl-info__validation-content {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  -moz-column-gap: 8px;
       column-gap: 8px;
  row-gap: 2px;
}

/* Consistent status accent — reuses the hi-ui status-Badge colours so every row
   shares one treatment (uniform border + left accent) and differs only by state. */
.hi-ui-ssl-info__validation-step--validated {
  border-left-color: #4e9758;
}

.hi-ui-ssl-info__validation-step--waiting {
  border-left-color: #f59e0b;
}

.hi-ui-ssl-info__validation-step--attention {
  border-left-color: #dc3545;
}

/* Muted status description, following the bold section label. */
.hi-ui-ssl-info__validation-status {
  color: #6b7280;
}

/* "Show me how" guide content. */
.hi-ui-ssl-info__guide {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hi-ui-ssl-info__guide-value {
  padding-left: 16px;
}

.hi-ui-ssl-info__terms-disclaimer {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (max-width: 767px) {
  .hi-ui-ssl-info__form-grid {
    grid-template-columns: 1fr;
  }

  .hi-ui-ssl-info__actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* Full-width "Show me how" on mobile (matches the full-width action buttons). */
  .hi-ui-ssl-info__dcv-action {
    flex-direction: column;
  }

  /* Stack the label above the status text so each row reads cleanly in a narrow
     column instead of splitting into two ragged columns. */
  .hi-ui-ssl-info__validation-content {
    flex-direction: column;
    align-items: flex-start;
  }
}

.hi-ui-ssl-summary-page__list {
  padding: 16px 0 32px 0;
}

/* Loading / error / empty message area — mirrors legacy .ssl-loading-container. */
.hi-ui-ssl-summary-page__message {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 240px;
  font-size: 1.5rem;
  text-align: center;
}

/*
 * Long, unbreakable domain names in the Name column otherwise blow out its grid
 * track — the desktop Table is a CSS grid whose `fr` tracks size to min-content,
 * and a long domain has no break points — pushing the whole table wider than its
 * container so the sidebar overlaps the Assign/Manage buttons (issue #237).
 * Letting every cell shrink below its content width and break long names keeps
 * the grid within its container. Scoped to this page so the shared Table is
 * unaffected elsewhere.
 */
.hi-ui-ssl-summary-page .hi-ui-table-cell,
.hi-ui-ssl-summary-page .hi-ui-table-header-cell {
  min-width: 0;
  overflow-wrap: anywhere;
}

/*
 * The Assign/Manage labels are single words, so the `overflow-wrap: anywhere`
 * above would happily break them mid-word ("MANA/GE") in a narrow action
 * column. The Table's last column is sized to fit these buttons (see
 * gridColumns), so keep each label on one line.
 */
.hi-ui-ssl-summary-page .hi-ui-table-cell button.hi-ui {
  white-space: nowrap;
}

/* Name cell — display name stacked over a smaller, greyed common name. */
.hi-ui-ssl-summary-page__name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hi-ui-ssl-summary-page__common-name {
  color: #858585;
  font-size: 0.8rem;
  line-height: 1rem;
}

.hi-ui-ssl-summary-page__unassigned {
  color: #c5c5c5;
}

.hi-ui-ssl-summary-page__status {
  text-transform: capitalize;
}

/* Manage button — legacy yellow (#ffd800) rather than the hi-ui warning red. */
.hi-ui-ssl-summary-page__manage-button.hi-ui {
  background: #ffd800 !important;
  background-color: #ffd800 !important;
  background-image: none !important;
  border-color: #ffd800 !important;
  color: #242424 !important;
}

.hi-ui-ssl-summary-page__manage-button.hi-ui:hover:not(:disabled) {
  background: #ffea00 !important;
  background-color: #ffea00 !important;
  border-color: #ffea00 !important;
  color: #333333 !important;
}

/*
 * Mobile card view (Table switches to cards at <= 1024px): the action cell is a
 * flex "label / value" row, so a fullWidth button only fills its content-sized
 * value span. Give the action cell the full row width so Assign/Manage span it.
 */
@media (max-width: 1024px) {
  .hi-ui-ssl-summary-page .hi-ui-table-card-row:has(button.hi-ui) {
    gap: 0;
  }

  .hi-ui-ssl-summary-page .hi-ui-table-card-row:has(button.hi-ui) .hi-ui-table-card-label {
    display: none;
  }

  .hi-ui-ssl-summary-page .hi-ui-table-card-value:has(button.hi-ui) {
    flex: 1;
  }

  .hi-ui-ssl-summary-page .hi-ui-table-card-value button.hi-ui {
    width: 100%;
  }
}

.hi-ui-soft-transfer-page__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hi-ui-soft-transfer-page__submit {
  margin-top: 12px;
}

@media (min-width: 768px) {
  .hi-ui-soft-transfer-page__submit {
    margin-top: 24px;
  }
}

@media (max-width: 768px) {
  .hi-ui-soft-transfer-page__submit button.hi-ui {
    width: 100%;
  }
}

.hi-ui-status-page {
  /* Static informational page — all styling comes from the hi-ui Text/Link atoms
     and the Page layout, so there are no page-specific overrides. The wrapper
     class is kept as a styling hook, consistent with the other page components. */
}

.hi-ui-ticket-list-page__toolbar {
  margin: 1.5rem 0;
  gap: 1rem;
}

.hi-ui-ticket-list-page__search {
  position: relative;
  flex: 1;
  max-width: 280px;
}

.hi-ui-ticket-list-page__search--has-value input {
  padding-right: 4rem;
}

.hi-ui-ticket-list-page__clear-search {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
}

.hi-ui-ticket-list-page__id-cell {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.hi-ui-ticket-list-page__summary-cell {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.hi-ui-ticket-list-page__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hi-ui-ticket-list-page__status-mobile {
  display: none;
}

.hi-ui-ticket-list-page__loading {
  padding: 3rem 0;
}

@media (max-width: 768px) {
  .hi-ui-ticket-list-page__toolbar {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 0.5rem;
  }

  .hi-ui-ticket-list-page__search {
    max-width: 100%;
    order: 1;
  }

  .hi-ui-ticket-list-page .hi-ui-empty-state__action {
    width: 100%;
  }

  .hi-ui-ticket-list-page .hi-ui-empty-state__action > a.hi-ui,
  .hi-ui-ticket-list-page .hi-ui-empty-state__action > button.hi-ui {
    width: 100% !important;
  }

  .hi-ui-ticket-list-page__status-desktop {
    display: none;
  }

  .hi-ui-ticket-list-page__status-mobile {
    display: inline;
  }
}

.hi-ui-ticket-raise-page__form {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: var(--hi-color-surface-alt, #f9fafb);
  border-radius: 8px;
  border: 1px solid var(--hi-color-border, #e5e7eb);
}

.hi-ui-ticket-raise-page__form .hi-ui-form-field {
  margin-bottom: 1rem;
}

/* Expert services */
.hi-ui-ticket-raise-page__expert-services {
  margin-bottom: 1rem;
}

.hi-ui-ticket-raise-page__expert-services-list {
  margin-top: 0.5rem;
}

/* Package countdown */
.hi-ui-ticket-raise-page__countdown {
  margin-bottom: 1rem;
}

.hi-ui-ticket-raise-page__countdown-timer {
  font-variant-numeric: tabular-nums;
}

/* Error log */
.hi-ui-ticket-raise-page__error-log {
  margin-bottom: 1rem;
}

/* Support articles */
.hi-ui-ticket-raise-page__support-articles {
  margin-bottom: 1rem;
}

.hi-ui-ticket-raise-page__article-list {
  margin-top: 0.5rem;
}

.hi-ui-ticket-raise-page__article-description {
  color: var(--hi-color-text-muted, #6b7280);
  font-size: 0.8125rem;
}

/* File upload */
.hi-ui-ticket-raise-page__file-upload {
  margin: 1rem 0 1.5rem;
}

.hi-ui-ticket-raise-page__file-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hi-ui-ticket-raise-page__file-picker {
  padding: 0.5rem 0;
}

.hi-ui-ticket-raise-page__file-name {
  color: var(--hi-color-text-muted, #6b7280);
}

.hi-ui-ticket-raise-page__file-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--hi-color-text-muted, #6b7280);
  cursor: pointer;
}

.hi-ui-ticket-raise-page__file-remove:hover {
  color: var(--hi-color-text, #111827);
  background: var(--hi-color-surface-hover, #f3f4f6);
}

.hi-ui-ticket-raise-page__file-types {
  margin: 0.5rem 0;
}

/* Checkboxes section */
.hi-ui-ticket-raise-page__checkboxes {
  margin-bottom: 1.5rem;
}

/* Actions */
.hi-ui-ticket-raise-page__actions {
  margin-top: 1rem;
}

/* System status banners */
.hi-ui-ticket-raise-page__status-banners {
  margin-bottom: 1rem;
}

/* Back link */
.hi-ui-ticket-raise-page__back {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Section spacing */
.hi-ui-ticket-raise-page__section {
  margin-bottom: 1.5rem;
}

/* Mobile */
@media (max-width: 768px) {
  .hi-ui-ticket-raise-page__file-picker.hi-ui-flex {
    flex-direction: column;
    align-items: flex-start;
  }

  .hi-ui-ticket-raise-page__expert-services-list.hi-ui-flex {
    gap: 0.75rem;
  }

  .hi-ui-ticket-raise-page__contact-fields.hi-ui-flex {
    flex-direction: column;
    gap: 0;
  }
}

/*
 * Customer Services landing — faithful 1:1 port of the legacy
 * public_html/ws2k13/assets/css/ticket.css, scoped under .hi-ui-ticket-start-page.
 * Heading sizes/margins (h1 32px, h2 24px, #2B2B2B) are ported from the legacy
 * page's computed styles — legacy inherited them from the portal stylesheet, which
 * is not loaded in the hi_ui_full_page context, so they're set explicitly here.
 * The bespoke design (grey cards, gradient search border, yellow/outline CTAs) has
 * no matching hi-ui component variants — native elements styled here instead.
 */

.hi-ui-ticket-start-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #242424;
  font-family: MuseoSansRounded-300, sans-serif;
  font-size: 1rem;
}

.hi-ui-ticket-start-page__title {
  margin: 8px 0 16px;
  font-family: MuseoSansRounded-700, sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 32px;
  color: #2b2b2b;
}

.hi-ui-ticket-start-page__intro {
  line-height: 1.2rem;
  padding-bottom: 6px;
}

.hi-ui-ticket-start-page__intro a {
  display: inline-flex;
  color: #2b2b2b;
}

.hi-ui-ticket-start-page__sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 8px;
}

.hi-ui-ticket-start-page__section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 24px 24px;
  background: #f8f8f8;
  border-radius: 10px;
}

.hi-ui-ticket-start-page__section--status {
  padding: 18px 24px;
}

.hi-ui-ticket-start-page__section-header {
  margin-top: 16px;
  margin-bottom: 8px;
  font-family: MuseoSansRounded-700, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 24px;
  color: #2b2b2b;
}

/* System-status card */
.hi-ui-ticket-start-page__status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hi-ui-ticket-start-page__status-badge {
  color-scheme: normal;
}

/* BetterStack announcement banner (third-party HTML) */
.hi-ui-ticket-start-page__announcement {
  display: flex;
  align-items: center;
  padding: 0 24px 18px;
  background: #fdeded;
  border-radius: 10px;
}

/* BetterStack's <h2> title — 4px smaller than the third-party UA default (24px). */
.hi-ui-ticket-start-page__announcement h2 {
  font-size: 20px;
}

.hi-ui-ticket-start-page__announcement p {
  margin: 0;
  font-size: 14px;
  line-height: 1.2em;
  padding-bottom: 16px;
}

.hi-ui-ticket-start-page__announcement p:last-child {
  padding-bottom: 0;
}

.hi-ui-ticket-start-page__announcement a {
  color: #2b2b2b;
  font-family: MuseoSansRounded-700, sans-serif;
}

.hi-ui-ticket-start-page__announcement a:hover {
  color: #2b2b2b;
}

.hi-ui-ticket-start-page__announcement .betteruptime-announcement__close {
  display: none !important;
}

/* CTA buttons */
.hi-ui-ticket-start-page__cta {
  box-sizing: border-box;
  font-family: MuseoSansRounded-700, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  padding: 10px 14px 9px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-shadow: none;
  text-decoration: none;
  transition: 0.2s;
}

.hi-ui-ticket-start-page__cta:hover {
  text-decoration: none;
}

.hi-ui-ticket-start-page__cta--solid {
  background: #ffd800;
  color: #000;
}

.hi-ui-ticket-start-page__cta--solid:hover {
  background: #ffe037;
}

.hi-ui-ticket-start-page__cta--outline {
  background: transparent;
  color: #000;
  border: 2px solid black;
  padding: 10px 16px 8px;
  font-size: 14px;
}

.hi-ui-ticket-start-page__cta--outline:hover {
  background: #e2e2e2;
}

/* Common questions */
.hi-ui-ticket-start-page__questions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
}

.hi-ui-ticket-start-page__question-header {
  font-family: MuseoSansRounded-700, sans-serif;
  font-size: 16px;
}

.hi-ui-ticket-start-page__question-link {
  color: #2b2b2b;
  font-size: 14px;
  width: -moz-fit-content;
  width: fit-content;
}

.hi-ui-ticket-start-page__question-link:hover {
  color: #2b2b2b;
}

/* Support database search */
.hi-ui-ticket-start-page__button-group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
}

.hi-ui-ticket-start-page__search-border {
  padding: 3px;
  background-image: linear-gradient(to right, #203a62, #578ad8);
  border-radius: 8px;
  margin-top: 4px;
}

.hi-ui-ticket-start-page__search {
  position: relative;
  display: flex;
  border-radius: 5px;
  overflow: hidden;
  background: white;
}

.hi-ui-ticket-start-page__search-input {
  border: none;
  padding: 11px 12px;
  flex: 1;
  outline: none;
  font-size: 20px;
  box-sizing: border-box;
}

.hi-ui-ticket-start-page__search-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 10px 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hi-ui-ticket-start-page__search-button:hover {
  background: none;
}

.hi-ui-ticket-start-page__typewriter {
  position: absolute;
  left: 12px;
  top: 55%;
  transform: translateY(-50%);
  color: #000000;
  font-size: 20px;
  font-family: MuseoSansRounded500, sans-serif;
  opacity: 0.5;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.2s;
}

.hi-ui-ticket-start-page__caret {
  display: inline-block;
  width: 1.5px;
  height: 1.2em;
  background: #888;
  margin-left: 1px;
  animation: hi-ui-ticket-start-blink-caret 1s steps(1) infinite;
  vertical-align: middle;
}

@keyframes hi-ui-ticket-start-blink-caret {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

/* Mobile: stack CTA groups and make each button full width. */
@media (max-width: 768px) {
  .hi-ui-ticket-start-page__status-row,
  .hi-ui-ticket-start-page__button-group {
    flex-direction: column;
    align-items: stretch;
  }

  .hi-ui-ticket-start-page__status-row {
    gap: 12px;
  }

  .hi-ui-ticket-start-page__cta {
    width: 100%;
    text-align: center;
  }
}

.hi-ui-ticket-view-page__form {
  margin-top: 1.5rem;
}

.hi-ui-ticket-view-page__show-more {
  margin-bottom: 1rem;
}

/* Updates list */
.hi-ui-ticket-view-page__updates {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hi-ui-ticket-view-page__update {
  border: 1px solid var(--hi-color-border, #e5e7eb);
  border-radius: 8px;
}

.hi-ui-ticket-view-page__update--staff {
  border-left: 3px solid var(--hi-color-success, #16a34a);
}

.hi-ui-ticket-view-page__update--customer {
  border-left: 3px solid var(--hi-color-info, #2563eb);
}

.hi-ui-ticket-view-page__update-header {
  padding: 0.75rem 1rem;
  background: var(--hi-color-surface-alt, #f9fafb);
  border-bottom: 1px solid var(--hi-color-border, #e5e7eb);
  border-radius: 7px 7px 0 0;
}

.hi-ui-ticket-view-page__update-body {
  padding: 1rem;
}

.hi-ui-ticket-view-page__update-body p {
  margin: 0 0 0.5rem;
}

.hi-ui-ticket-view-page__update-body p:last-child {
  margin-bottom: 0;
}

/* Update text content */
.hi-ui-ticket-view-page__update-text {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.hi-ui-ticket-view-page__update-text a {
  color: var(--hi-color-primary, #2563eb);
  text-decoration: underline;
}

/* Glossary terms */
.hi-ui-ticket-view-page__update-text .glossary_highlighted {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  cursor: help;
  text-decoration-color: var(--hi-color-info, #2563eb);
}

/* Staff signature */
.hi-ui-ticket-view-page__sales-signature {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: #838383;
  font-family: 'MuseoSansRounded-300';
  font-weight: 400;
}

.hi-ui-ticket-view-page .hi-ui-ticket-view-page__sales-signature a.hi-ui-link {
  color: #838383;
  font-family: 'MuseoSansRounded-300';
  font-weight: 400;
  font-size: 0.8125rem;
}

/* Quote display */
.hi-ui-ticket-view-page__quote {
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  background: var(--hi-color-surface-alt, #f9fafb);
  border-radius: 4px;
}

.hi-ui-ticket-view-page__quote--aborted {
  text-decoration: line-through;
}

/* Expert services */
.hi-ui-ticket-view-page__expert-services {
  margin-bottom: 0.75rem;
}

.hi-ui-ticket-view-page__expert-services ul {
  margin: 0.25rem 0 0 1.5rem;
  padding: 0;
}

/* Previous rating display */
.hi-ui-ticket-view-page__rated {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--hi-color-surface-alt, #f3f4f6);
  border-radius: 4px;
}

/* Attachment */
.hi-ui-ticket-view-page__attachment {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.hi-ui-ticket-view-page__attachment-link {
  color: var(--hi-color-primary, #2563eb);
  text-decoration: underline;
  cursor: pointer;
}

.hi-ui-ticket-view-page__attachment-error {
  width: 100%;
}

/* Star rating */
.hi-ui-ticket-view-page__rating {
  margin: 1rem 0;
  padding: 1rem;
  background: var(--hi-color-surface-alt, #f9fafb);
  border-radius: 8px;
  border: 1px solid var(--hi-color-border, #e5e7eb);
}

.hi-ui-ticket-view-page__stars {
  display: flex;
  gap: 0.25rem;
  margin: 0.75rem 0;
  flex-wrap: wrap;
}

.hi-ui-ticket-view-page__star {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: transform 0.1s ease;
}

.hi-ui-ticket-view-page__star:hover {
  transform: scale(1.15);
}

.hi-ui-ticket-view-page__star:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.hi-ui-ticket-view-page__star-icon {
  width: 28px;
  height: 28px;
  fill: var(--hi-color-border, #d1d5db);
  stroke: var(--hi-color-border, #d1d5db);
  stroke-width: 1;
  transition: fill 0.15s ease;
}

.hi-ui-ticket-view-page__star--active .hi-ui-ticket-view-page__star-icon {
  fill: var(--hi-color-warning, #f59e0b);
  stroke: var(--hi-color-warning, #f59e0b);
}

.hi-ui-ticket-view-page__feedback-sent {
  margin: 1.5rem 0;
  padding: 1rem;
  background: var(--hi-color-surface-alt, #f9fafb);
  border-radius: 8px;
  border: 1px solid var(--hi-color-border, #e5e7eb);
  text-align: center;
}

/* Reply form */
.hi-ui-ticket-view-page__reply {
  margin-top: 1rem;
  padding: 1.5rem;
  background: var(--hi-color-surface-alt, #f9fafb);
  border-radius: 8px;
  border: 1px solid var(--hi-color-border, #e5e7eb);
}

.hi-ui-ticket-view-page__reply .hi-ui-form-field {
  margin-bottom: 1rem;
}

.hi-ui-ticket-view-page__file-upload {
  margin: 1rem 0 2rem;
}

.hi-ui-ticket-view-page__file-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hi-ui-ticket-view-page__file-picker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0;
}

.hi-ui-ticket-view-page__file-name {
  color: var(--hi-color-text-muted, #6b7280);
}

.hi-ui-ticket-view-page__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* Back link */
.hi-ui-ticket-view-page__back {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Mobile */
@media (max-width: 768px) {
  .hi-ui-ticket-view-page .hi-ui-description-list__label,
  .hi-ui-ticket-view-page .hi-ui-description-list__value {
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .hi-ui-ticket-view-page__update-header {
    padding: 0.5rem 0.75rem;
  }

  .hi-ui-ticket-view-page__update-body {
    padding: 0.75rem;
  }

  .hi-ui-ticket-view-page__actions {
    flex-direction: column;
  }

  .hi-ui-ticket-view-page__stars {
    gap: clamp(0rem, 0.5vw, 0.25rem);
    justify-content: center;
  }

  .hi-ui-ticket-view-page__star {
    padding: clamp(0.125rem, 0.4vw, 0.25rem);
  }

  .hi-ui-ticket-view-page__star-icon {
    width: 24px;
    height: 24px;
  }
}

/* Overall vertical rhythm between the page's major sections. */
.hi-ui-transfer-page__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 880px;
}

.hi-ui-transfer-page__results {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* A titled section: heading + its content stacked with tighter spacing. */
.hi-ui-transfer-page__section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hi-ui-transfer-page__intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* The textarea field label — sized between body text and the page headings,
   with a clear gap before the box. Overrides the FormField's small label Text. */
.hi-ui-transfer-page__domains-field > .hi-ui-form-field-label {
  margin-bottom: 15px;
}

.hi-ui-transfer-page__domains-field > .hi-ui-form-field-label .hi-ui-text {
  font-size: 20px;
  line-height: 1.3;
}

.hi-ui-transfer-page__ns-change {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

/* Match the "(what is this?)" link to the checkbox label size (0.875rem). */
.hi-ui-transfer-page__ns-change a {
  font-size: 0.875rem;
}

.hi-ui-transfer-page__submit {
  margin-top: 20px;
}

/* The parenthetical in the field label is regular weight, not the bold the
   FormField label applies (which swaps to the 700-weight font family). */
.hi-ui-transfer-page__label-note {
  font-family: var(--hi-text-font-family, 'MuseoSansRounded-300', sans-serif);
  font-weight: 400;
}

/* Price-list heading with the view toggle floated inline to the right. */
.hi-ui-transfer-page__price-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* The heading carries its own vertical margin; zero it here so it sits on the
   same centre-line as the toggle group rather than being pushed off. */
.hi-ui-transfer-page__price-header > .hi-ui-text {
  margin: 0;
}

.hi-ui-transfer-page__price-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hi-ui-transfer-page__toggle-text {
  font-family: var(--hi-text-font-family, 'MuseoSansRounded-300', sans-serif);
  font-size: 0.875rem;
  color: var(--hi-text-color, inherit);
}

/* Free-services checklist — two columns on wider screens. */
.hi-ui-transfer-page__features {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
}

.hi-ui-transfer-page__feature {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hi-ui-transfer-page__tick {
  flex-shrink: 0;
}

.hi-ui-transfer-page__price-table {
  width: 100%;
  border-collapse: collapse;
  /* Match the hi-ui Table molecule's typography so the price list reads
     consistently with the rest of the page (not the browser default serif). */
  font-family: var(--hi-table-font-family, 'MuseoSansRounded-300', sans-serif);
  font-size: var(--hi-table-cell-font-size, 16px);
  color: var(--hi-text-color, inherit);
}

.hi-ui-transfer-page__price-table th,
.hi-ui-transfer-page__price-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid #e6e6e6;
  vertical-align: top;
}

.hi-ui-transfer-page__price-table tr:last-child td {
  border-bottom: none;
}

.hi-ui-transfer-page__price-table thead th {
  font-family: var(--hi-table-header-font-family, 'MuseoSansRounded-700', sans-serif);
  /* Headers match the cell text size (was a couple px smaller). */
  font-size: var(--hi-table-cell-font-size, 16px);
  font-weight: 600;
  border-bottom: 2px solid #e6e6e6;
}

.hi-ui-transfer-page__price-table th:first-child,
.hi-ui-transfer-page__price-table td:first-child {
  width: 30%;
}

@media (max-width: 768px) {
  .hi-ui-transfer-page__features {
    grid-template-columns: 1fr;
  }

  .hi-ui-transfer-page__submit button.hi-ui {
    width: 100%;
  }
}


/*# sourceMappingURL=hi-ui-v1.38.0.css.map*/