:root {
  --bs-menu-width: 19rem;
  --color-ink: #1c2433;
  --color-ink-soft: #374151;
  --color-muted: #6b7280;
  --color-border: #e3e8f1;
  --color-surface: #ffffff;
  --color-surface-alt: #f7f9fd;
  --color-accent: #2f6fec;
  --color-accent-dark: #1f56c2;
  --color-accent-glow: rgba(47, 111, 236, 0.2);
  --color-success: #1f8f52;
  --color-danger: #d33c4b;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 8px rgba(17, 24, 39, 0.08);
  --shadow-md: 0 10px 24px rgba(17, 24, 39, 0.12);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Public Sans", "Segoe UI", Arial, sans-serif;
  color: var(--color-ink);
  background: radial-gradient(1200px 600px at 0% -10%, #e7efff 0%, #f6f7fb 45%, #f9fbff 100%);
}

main {
  padding-bottom: 2rem;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 0.75rem;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
}

p {
  margin: 0 0 1rem;
  color: var(--color-ink-soft);
  line-height: 1.6;
}

small,
.textMuted {
  color: var(--color-muted);
  font-size: 0.875rem;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1.5rem 0;
}

.pageTitle {
  font-size: 2rem;
  font-weight: 700;
}

.sectionTitle {
  font-size: 1.4rem;
  font-weight: 700;
}

.sectionSubtitle {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.surface {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.cardHeader {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  font-weight: 600;
}

.cardBody {
  padding: 1.25rem;
}

.cardFooter {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}

.serviceNavPanel {
  border-color: #dbe3f0;
  background:
    linear-gradient(180deg, rgba(252, 253, 255, 0.98) 0%, rgba(247, 250, 255, 0.98) 100%);
  box-shadow: none;
}

.serviceNavPanel .cardBody {
  padding-block: 0.8rem;
}

.serviceNavPanelList {
  display: flex;
  align-items: center;
  gap: 0.5rem 0.7rem;
  flex-wrap: wrap;
  min-width: 0;
}

.serviceNavPanelForm {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.serviceNavPanelLink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  min-height: 2rem;
  padding: 0.32rem 0.72rem;
  border: 1px solid rgba(207, 216, 231, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #5f6c82;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.serviceNavPanelLink:hover {
  color: #244a8f;
  background: rgba(240, 246, 255, 0.98);
  border-color: rgba(173, 194, 230, 0.95);
  text-decoration: none;
  transform: translateY(-1px);
}

.serviceNavPanelLink:focus {
  outline: none;
  color: #244a8f;
  background: rgba(240, 246, 255, 0.98);
  box-shadow: 0 0 0 3px var(--color-accent-glow);
  border-color: rgba(173, 194, 230, 0.95);
}

.serviceNavPanelLinkButton {
  cursor: pointer;
}

.serviceNavPanelLinkButton:disabled {
  color: #94a3b8;
  background: rgba(248, 250, 252, 0.96);
  border-color: rgba(226, 232, 240, 0.95);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.serviceNavPanelLinkButton:disabled:hover {
  background: rgba(248, 250, 252, 0.96);
  border-color: rgba(226, 232, 240, 0.95);
  transform: none;
}

.serviceNavPanelIconLink {
  color: #3d6f43;
  background: rgba(238, 249, 240, 0.95);
  border-color: rgba(193, 231, 198, 0.95);
  white-space: nowrap;
}

.serviceNavPanelIconLink:hover,
.serviceNavPanelIconLink:focus {
  color: #226936;
  background: rgba(226, 245, 230, 0.98);
  border-color: rgba(159, 214, 168, 0.95);
}

.favouriteHeaderRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.favouriteHeaderMeta {
  min-width: 0;
  flex: 1 1 16rem;
}

.favouriteToggleButton {
  white-space: nowrap;
}

.favouriteToggleButton i {
  font-size: 1rem;
  line-height: 1;
}

.favouriteToggleButton.is-active {
  color: #b42338;
  background: rgba(255, 241, 242, 0.98);
  border-color: rgba(253, 205, 211, 0.98);
}

.favouriteToggleButton.is-active:hover,
.favouriteToggleButton.is-active:focus {
  color: #912018;
  background: rgba(255, 228, 233, 0.98);
  border-color: rgba(251, 182, 193, 0.98);
}

.stackSm {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stackMd {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stackLg {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.errorStateCard {
  max-width: 760px;
  margin-inline: auto;
}

.errorStateIntro {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.errorStateIcon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, #e7efff 0%, #f3f8ff 100%);
  color: #2a62d6;
  border: 1px solid #d8e4ff;
}

.errorStateIcon i {
  font-size: 1.15rem;
  line-height: 1;
}

.errorStateLead {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
  color: #1e2a43;
}

.errorStateHint {
  padding: 0.8rem 0.95rem;
  border: 1px solid #dde7fb;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #f6f9ff 0%, #f9fbff 100%);
  color: #3e4f71;
}

.errorStateDebug {
  margin: 0;
  white-space: pre-wrap;
  padding: 0.9rem;
  border-radius: var(--radius-md);
  background: #f8fafc;
  border: 1px solid #dbe2ee;
  color: #1f2937;
  font-size: 0.88rem;
}

.inlineRow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.savedSearchFieldGrow {
  flex: 0 1 360px;
  min-width: 240px;
}

.savedSearchRow {
  align-items: flex-end;
}

.savedSearchSelect {
  width: 100%;
}

.savedSearchSelectRow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.savedSearchDeleteBtn {
  align-self: flex-end;
}

.searchSectionAccordion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.searchSectionAccordion {
  box-shadow: none;
}

.searchAccordionSummary {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
  position: relative;
  padding-right: 3.25rem;
}

.searchAccordionSummary::-webkit-details-marker {
  display: none;
}

.searchAccordionSummary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.25rem;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2px solid #5671a6;
  border-bottom: 2px solid #5671a6;
  transform: translateY(-65%) rotate(45deg);
  transition: transform 0.2s ease;
}

details[open] > .searchAccordionSummary::after {
  transform: translateY(-35%) rotate(-135deg);
}

.searchAccordionSummaryInner {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.searchSectionAccordionInline {
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.searchAccordionSummaryLink {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  padding-right: 0;
  background: none;
  color: var(--color-accent);
}

.searchAccordionSummaryLink:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

.searchAccordionSummaryLink::after {
  position: static;
  width: 0.55rem;
  height: 0.55rem;
  margin-left: 0.15rem;
  border-right-color: currentColor;
  border-bottom-color: currentColor;
  transform: translateY(-0.08rem) rotate(45deg);
}

details[open] > .searchAccordionSummaryLink::after {
  transform: translateY(0.08rem) rotate(-135deg);
}

.searchAccordionLinkText {
  color: inherit;
  line-height: 1.45;
}

.searchAccordionTitle {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-ink);
}

.searchAccordionMeta {
  color: var(--color-muted);
  font-size: 0.9rem;
}

.searchAccordionBody {
  padding: 1rem;
  border-top: 1px solid var(--color-border);
}

.searchSectionAccordion > .searchAccordionBody {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  border-top: none;
}

.searchAccordionBodyInline {
  padding: 0.75rem 0 0;
}

.searchIntentHighlight {
  border-color: #bfd4ff;
  background:
    linear-gradient(180deg, rgba(231, 240, 255, 0.95) 0%, rgba(255, 255, 255, 1) 100%);
  box-shadow: 0 14px 28px rgba(47, 111, 236, 0.12);
}

.searchIntentTitle {
  color: #173f8a;
}

.searchIntentCardBody {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.searchIntentHeader {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.searchIntentHeader .sectionSubtitle,
.searchIntentHeader .textMuted {
  margin: 0;
}

.searchIntentTextarea {
  min-height: 7.5rem;
  border-color: #aac5ff;
  background: rgba(255, 255, 255, 0.96);
}

.searchIntentTextarea:focus {
  border-color: var(--color-accent);
}

.searchAiToggleRow {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  flex-wrap: nowrap;
}

.searchAiRerankInfoButton {
  min-width: 1.7rem;
  min-height: 1.7rem;
  padding: 0.12rem;
}

.searchAiRerankInfoButton .infoHintIcon {
  width: 1.05rem;
  height: 1.05rem;
}

.searchAiToggle {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.65rem;
  cursor: pointer;
  min-width: 0;
  flex: 1 1 auto;
}

.searchAiToggleInput {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.searchAiToggleTrack {
  display: inline-flex;
  align-items: center;
  width: 2.6rem;
  height: 1.5rem;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #e2e8f0;
  padding: 0.13rem;
  flex: 0 0 auto;
  margin-top: 0.08rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.searchAiToggleThumb {
  width: 1.08rem;
  height: 1.08rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
  transform: translateX(0);
  transition: transform 0.2s ease;
}

.searchAiToggleInput:checked + .searchAiToggleTrack {
  background: #bfdbfe;
  border-color: #60a5fa;
}

.searchAiToggleInput:checked + .searchAiToggleTrack .searchAiToggleThumb {
  transform: translateX(1.05rem);
}

.searchAiToggleInput:focus + .searchAiToggleTrack {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
}

.searchAiToggleText {
  display: block;
  color: var(--color-ink);
  line-height: 1.45;
}

.serviceSearchSelectRow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.serviceSearchSelectRow select {
  flex: 1 1 auto;
  min-width: 0;
}

.serviceSearchSelectClearBtn {
  flex: 0 0 auto;
  padding: 0.42rem 0.58rem;
  min-width: 2rem;
  gap: 0;
  font-size: 0.88rem;
  line-height: 1;
}

.serviceSearchSelectClearBtn .icon-base {
  font-size: 1rem;
}

.starRatingDisplay {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.starRatingDisplayCompact {
  gap: 0.35rem;
}

.starRatingLabel {
  margin-right: 0.1rem;
}

.starRatingStars {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.starRatingStar {
  color: #d5dbe6;
  font-size: 1rem;
  line-height: 1;
}

.starRatingDisplayCompact .starRatingStar {
  font-size: 0.95rem;
}

.starRatingStar.is-filled {
  color: #f4b63d;
}

.starRatingValue {
  white-space: nowrap;
}

.starInput {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.2rem;
  width: max-content;
  justify-content: flex-start;
}

.starInputControl {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.starInputLabel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid #d9e1ee;
  background: #f8fafc;
  color: #c7cfdb;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.starInputLabel:hover,
.starInputLabel:hover ~ .starInputLabel,
.starInputControl:checked ~ .starInputLabel {
  color: #f4b63d;
  border-color: #f3d38b;
  background: #fff8e8;
}

.starInputControl:focus + .starInputLabel {
  outline: none;
  box-shadow: 0 0 0 3px rgba(244, 182, 61, 0.22);
}

.starInputLabel:hover {
  transform: translateY(-1px);
}

.starInputFilterRow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.starInputClearLabel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.2rem;
  min-height: 2.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #f8fafc;
  color: var(--color-ink-soft);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.starInputControl:focus + .starInputClearLabel {
  outline: none;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.22);
}

.starInputControl:checked + .starInputClearLabel {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #1f56c2;
}

.ratingReminderGrid {
  display: grid;
  gap: 0.85rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.ratingReminderItem {
  min-width: 0;
}

.ratingReminderItem p,
.ratingReminderItem a {
  margin: 0;
}

.min-rating-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.1rem;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  border: 1px solid #e3e8f1;
  background: #f8fafc;
  color: #748093;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.min-rating-option:hover {
  background: #f2f5f8;
  border-color: #d7dee8;
  color: #5f6c82;
}

.min-rating-option:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.22);
}

.min-rating-option-selected {
  background: #edf2f7;
  border-color: #d3dbe7;
  color: #4f5d71;
}

.min-rating-option-stars {
  letter-spacing: 0.04em;
  color: #d28d12;
  font-size: 0.9rem;
}

label,
.formLabel {
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 0.35rem;
}

.formLabelRow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 0.35rem;
}

input,
select,
textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: #fff;
  font-size: 0.95rem;
  color: var(--color-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

select.hide-arrow,
select.without-arrow {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
  padding-right: 0.85rem;
}

select.hide-arrow::-ms-expand,
select.without-arrow::-ms-expand {
  display: none;
}

.inlineRow input,
.inlineRow select,
.inlineRow textarea {
  width: auto;
  flex: 1;
  min-width: 150px;
}

.inlineRow input[maxlength="4"] {
  flex: 0 0 auto;
  width: auto;
  min-width: auto;
}

input.serviceRequestExpirationInput {
  flex: 0 0 7rem;
  width: 7rem;
  min-width: 7rem;
  max-width: 7rem;
}

.serviceRequestExpirationPreview {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.serviceRequestExpirationPreviewValue {
  color: var(--color-ink-soft);
  font-weight: 600;
}

.phoneVerificationCodeRow {
  flex-wrap: nowrap;
}

.phoneVerificationCodeInput {
  flex: 0 0 8ch;
  width: 8ch;
  min-width: 8ch;
}

.phoneVerificationCodeRow button {
  flex: 0 0 auto;
}

@media (max-width: 420px) {
  .phoneVerificationCodeRow {
    flex-wrap: wrap;
  }
}

input::placeholder,
textarea::placeholder {
  color: #9aa3b2;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-glow);
}

.form-control {
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  padding: 0.65rem 0.85rem;
}

.formField {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.filterApplyField {
  align-items: flex-start;
}

.formRow {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.formRowThree {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.formRowTwo {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.formRowSingle {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 700px) {
  .serviceNavPanel .cardBody {
    padding: 0.85rem 0.9rem;
  }

  .serviceNavPanelList {
    align-items: flex-start;
    gap: 0.35rem 0.7rem;
  }

  .serviceNavPanelLink {
    font-size: 0.86rem;
    white-space: normal;
  }

  .searchAccordionSummary,
  .searchAccordionBody {
    padding: 0.9rem;
  }

  .searchAccordionSummaryLink {
    padding: 0;
  }

  .searchAccordionBodyInline {
    padding-top: 0.75rem;
  }

  .formRowThree {
    grid-template-columns: 1fr;
  }

  .formRowTwo {
    grid-template-columns: 1fr;
  }

  .starInputLabel {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1.25rem;
  }

  .searchAiToggleRow {
    align-items: center;
  }

  .searchAiRerankInfoButton {
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.2rem;
  }

  .searchAiRerankInfoButton .infoHintIcon {
    width: 1.18rem;
    height: 1.18rem;
  }
}

.formHint {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.infoHintButton {
  border: none;
  background: transparent;
  color: #2563eb;
  line-height: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
}

.infoHintIcon {
  width: 1rem;
  height: 1rem;
  display: block;
}

.helpTinyIcon {
  width: 0.8rem;
  height: 0.8rem;
  display: block;
  flex: 0 0 auto;
}

.infoHintButton:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-accent-glow);
  border-radius: 999px;
}

.infoHintButton:hover {
  color: #1d4ed8;
}

.formError {
  font-size: 0.85rem;
  color: var(--color-danger);
  font-weight: 600;
}

.btnPrimary,
.btnSecondary,
.btnGhost,
.btnDanger,
.btnServiceStateActive,
.btnServiceStateInactive {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.btnPrimary {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
}

.btnPrimary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(37, 99, 235, 0.3);
}

.btnSecondary {
  background: #eef2ff;
  color: #2f3b66;
  border-color: #c7d2fe;
}

.btnSecondary:hover {
  background: #e0e7ff;
}

.btnDonatePrimary {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  box-shadow: 0 8px 18px rgba(180, 83, 9, 0.22);
}

.btnDonatePrimary:hover {
  box-shadow: 0 12px 22px rgba(180, 83, 9, 0.28);
}

.btnDonateSecondary {
  color: #8a4b0f;
  background: #fff7ed;
  border-color: #fed7aa;
}

.btnDonateSecondary:hover {
  color: #6f3a05;
  background: #ffedd5;
}

.btnGhost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-border);
}

.btnGhost:hover {
  background: #f3f6fb;
}

.btnDanger {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

.btnDanger:hover {
  background: #fee2e2;
}

.btnServiceStateActive {
  background: var(--bs-success);
  color: #fff;
  border-color: var(--bs-success);
  box-shadow: 0 8px 18px rgba(var(--bs-success-rgb), 0.22);
}

.btnServiceStateActive:hover {
  background: color-mix(in sRGB, #000 10%, var(--bs-success));
  border-color: color-mix(in sRGB, #000 10%, var(--bs-success));
  color: #fff;
  transform: translateY(-1px);
}

.btnServiceStateInactive {
  background: var(--bs-secondary);
  color: #fff;
  border-color: var(--bs-secondary);
  box-shadow: 0 8px 18px rgba(var(--bs-secondary-rgb), 0.2);
}

.btnServiceStateInactive:hover {
  background: color-mix(in sRGB, #000 10%, var(--bs-secondary));
  border-color: color-mix(in sRGB, #000 10%, var(--bs-secondary));
  color: #fff;
  transform: translateY(-1px);
}

button:disabled,
.btnPrimary:disabled,
.btnSecondary:disabled,
.btnGhost:disabled,
.btnDanger:disabled,
.btnServiceStateActive:disabled,
.btnServiceStateInactive:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.badgePill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 0.75rem;
  font-weight: 600;
}

.tableStandard {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.tableStandard th,
.tableStandard td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.tableStandard th {
  background: var(--color-surface-alt);
  font-weight: 600;
  color: var(--color-ink);
}

.tableStandard tr:last-child td {
  border-bottom: none;
}

.responsiveGridMobile {
  display: none;
}

.responsiveGridCard {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.responsiveGridCardHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.responsiveGridCardHeaderText {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.responsiveGridCardEyebrow {
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.responsiveGridCardTitle {
  margin: 0;
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.responsiveGridCardState {
  white-space: normal;
  text-align: center;
}

.responsiveGridCardGrid {
  display: grid;
  gap: 0.85rem 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.responsiveGridCardField {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.responsiveGridCardFieldFull {
  grid-column: 1 / -1;
}

.responsiveGridCardLabel {
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.responsiveGridCardValue {
  color: var(--color-ink);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.responsiveGridCardAmount {
  font-weight: 700;
  overflow-wrap: anywhere;
  text-align: right;
}

.responsiveGridCardActions {
  display: grid;
  gap: 0.6rem;
}

.responsiveGridCardActions > a,
.responsiveGridCardActions > form {
  width: 100%;
}

.responsiveGridCardActions .btnPrimary,
.responsiveGridCardActions .btnSecondary,
.responsiveGridCardActions .btnGhost,
.responsiveGridCardActions .btnDanger,
.responsiveGridCardActions .btnServiceStateActive,
.responsiveGridCardActions .btnServiceStateInactive {
  width: 100%;
}

.serviceListActions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

.serviceListActionLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
}

.serviceListActionButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.serviceListActionButtons form {
  margin: 0;
}

.dashboardUnreadCardTitleRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.dashboardUnreadCardTitleRow .responsiveGridCardTitle {
  flex: 1 1 14rem;
  min-width: 0;
}

.dashboardUnreadSender {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.dashboardUnreadSenderName {
  min-width: 0;
  overflow-wrap: anywhere;
}

.dashboardUnreadAvatarImage {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  display: block;
  object-fit: cover;
}

.userPublicProfilePicture {
  display: flex;
  align-items: center;
}

.userPublicProfilePictureButton {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  line-height: 0;
  border-radius: 999px;
  cursor: zoom-in;
}

.userPublicProfilePictureButton:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-accent-glow);
}

.userPublicProfilePictureImage {
  width: 5rem;
  height: 5rem;
  display: block;
  object-fit: cover;
  border-radius: 999px;
}

.userPublicProfilePictureDialog {
  max-width: min(92vw, 42rem);
  width: min(92vw, 42rem);
}

.userPublicProfilePictureDialogImage {
  width: 100%;
  max-height: min(80vh, 38rem);
  object-fit: contain;
  border-radius: var(--radius-md);
  background: #f8fafc;
}

.dashboardWidgetColumns {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.dashboardWidgetColumn {
  display: contents;
}

.dashboardWidgetSlot {
  min-width: 0;
}

.dashboardWidgetSlot--balance {
  order: 1;
}

.dashboardWidgetSlot--services {
  order: 2;
}

.dashboardWidgetSlot--activity {
  order: 3;
}

.dashboardWidgetSlot--transactions {
  order: 4;
}

.dashboardWidgetSlot--performance {
  order: 5;
}

.dashboardWidgetSlot--unread {
  order: 6;
}

.dashboardTopSection .card {
  min-width: 0;
}

.dashboardRatingsWrap {
  position: relative;
  min-height: 260px;
}

.dashboardRatingsWrap canvas {
  width: 100% !important;
  height: 260px !important;
}

.dashboardServiceDistributionWrap {
  position: relative;
  min-height: 260px;
}

.dashboardServiceDistributionWrap canvas {
  width: 100% !important;
  height: 260px !important;
}

.dashboardBalanceTrendWrap {
  position: relative;
  min-height: 260px;
}

.dashboardBalanceTrendWrap canvas {
  width: 100% !important;
  height: 260px !important;
}

@media (min-width: 992px) {
  .dashboardWidgetColumns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .dashboardWidgetColumn {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
  }
}

@media (max-width: 767.98px) {
  .dashboardRatingsWrap {
    min-height: 220px;
  }

  .dashboardRatingsWrap canvas {
    height: 220px !important;
  }

  .dashboardServiceDistributionWrap {
    min-height: 280px;
  }

  .dashboardServiceDistributionWrap canvas {
    height: 280px !important;
  }
}

.dashboardTransactionSummaryList {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.dashboardTransactionSummaryItem {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.dashboardTransactionSummaryHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
}

.dashboardTransactionSummaryHeaderText {
  flex: 1 1 14rem;
  min-width: 0;
}

.dashboardTransactionSummaryEvent {
  color: var(--color-ink);
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.dashboardTransactionSummaryAmount {
  flex: 0 1 auto;
  max-width: 100%;
  font-weight: 700;
  line-height: 1.4;
  text-align: right;
  overflow-wrap: anywhere;
}

.dashboardTransactionSummaryGrid {
  display: grid;
  gap: 0.75rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.dashboardTransactionSummaryField {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.dashboardTransactionSummaryFieldWide {
  grid-column: 1 / -1;
}

.dashboardTransactionSummaryLabel {
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dashboardTransactionSummaryValue {
  color: var(--color-ink);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.smartServiceCreateGrid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 20rem));
  justify-content: start;
}

.smartServiceCreateCard {
  width: 100%;
}

.smartServiceCreatePrimaryActions {
  display: flex;
}

.smartServiceCreatePrimaryActions .btnPrimary {
  width: 100%;
  justify-content: center;
}

.smartServiceCreateCardActions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.smartServiceCreateInlineMessage {
  font-size: 0.9rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.smartServiceCreateInlineMessageSuccess {
  color: var(--color-success);
}

.smartServiceCreateInlineMessageError {
  color: var(--color-danger);
}

@media (min-width: 640px) {
  .smartServiceCreatePrimaryActions .btnPrimary {
    width: auto;
    min-width: 14rem;
  }
}

.helperCallout {
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  color: #0f4c5c;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
}

.helperCalloutBody {
  flex: 1 1 16rem;
  min-width: 0;
}

.helperCalloutText {
  margin: 0;
  color: inherit;
  line-height: 1.55;
}

.helperCalloutLine {
  align-items: flex-start;
}

.helperCalloutLine .helperCalloutText {
  flex: 1 1 14rem;
  min-width: 0;
}

.helperCalloutList {
  margin: 0;
  padding-left: 1.2rem;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.helperCalloutList li {
  color: inherit;
  line-height: 1.55;
}

.infoHintPopover {
  --bs-popover-max-width: min(19rem, calc(100vw - 2rem));
  --bs-popover-border-color: #bfd4ff;
  --bs-popover-body-padding-x: 0.85rem;
  --bs-popover-body-padding-y: 0.7rem;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
}

.infoHintPopover .popover-body {
  color: var(--color-ink-soft);
  font-size: 0.88rem;
  line-height: 1.5;
}

.infoHintDialog {
  max-width: min(28rem, calc(100vw - 1.5rem));
  width: calc(100vw - 1.5rem);
}

.infoHintDialog .cardBody {
  padding: 1rem;
}

.infoHintDialogContent {
  color: var(--color-ink-soft);
  line-height: 1.6;
  white-space: pre-wrap;
}

.infoHintDialogActions {
  justify-content: flex-end;
}

.paymentInvitationPanel {
  background:
    linear-gradient(135deg, rgba(255, 247, 237, 0.98) 0%, rgba(255, 255, 255, 1) 55%),
    var(--color-surface);
  border: 1px solid #fed7aa;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 28px rgba(249, 115, 22, 0.12);
  padding: 1.1rem 1.15rem;
}

.paymentInvitationEyebrow {
  display: inline-flex;
  width: max-content;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #fff1e6;
  color: #c2410c;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.paymentInvitationTitle {
  color: #7c2d12;
}

.paymentInvitationBlurb .helperCallout {
  background: rgba(255, 255, 255, 0.86);
  border-color: #fdba74;
  color: #7c2d12;
}

.paymentInvitationInput {
  max-width: 14rem;
  letter-spacing: 0.18em;
  font-weight: 700;
}

.paymentTermsPanel {
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.98) 0%, rgba(255, 255, 255, 1) 100%),
    var(--color-surface);
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.12);
  padding: 1.25rem;
}

.paymentTermsEyebrow,
.legalEyebrow,
.landingHeroKicker {
  display: inline-flex;
  width: max-content;
  align-items: center;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.paymentTermsEyebrow {
  background: #dbeafe;
  color: #1d4ed8;
}

.paymentTermsTitle {
  color: #1e3a8a;
}

.paymentTermsList,
.policyList {
  margin: 0;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: var(--color-ink-soft);
}

.paymentConsentRow {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #f8fbff;
}

.paymentConsentCheckbox {
  width: 1.1rem;
  height: 1.1rem;
  min-width: 1.1rem;
  margin-top: 0.2rem;
  padding: 0;
  flex: 0 0 auto;
  accent-color: var(--color-accent);
}

.paymentConsentText {
  margin: 0;
  color: var(--color-ink);
  line-height: 1.6;
}

.legalPage {
  width: 100%;
}

.legalHero {
  margin-bottom: 1.5rem;
  padding: 1.6rem;
  border: 1px solid #dbe4f2;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at top right, rgba(191, 219, 254, 0.45), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 249, 255, 0.98) 100%);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.legalEyebrow {
  background: #e2e8f0;
  color: #334155;
}

.landingHeroKicker {
  margin-inline: auto;
  background: #eff6ff;
  color: #1e40af;
}

.legalLead {
  max-width: 52rem;
  font-size: 1.02rem;
  line-height: 1.7;
}

.legalMetaGrid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.legalMetaItem {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.95rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.9);
}

.legalMetaLabel {
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.legalMetaValue {
  color: var(--color-ink);
  font-weight: 600;
  line-height: 1.5;
}

.legalDocument .cardBody {
  padding: 1.5rem;
}

.donateHero {
  background: #fffaf4;
  border-color: #fed7aa;
}

.donateEyebrow {
  color: #8a4b0f;
  background: #fff7ed;
}

.donateHeroActions {
  margin-top: 0.15rem;
}

.donateCallout {
  border-color: #fed7aa;
  background: #fff7ed;
}

.donateInfoGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  padding-bottom: 1.25rem;
}

.donateInfoCard {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid #dbe4f2;
  border-radius: var(--radius-md);
  background: #f8fbff;
}

.donateInfoCard p {
  line-height: 1.65;
}

.donateCostList li::marker {
  color: #d97706;
}

.legalCallout {
  padding: 1rem 1.1rem;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-md);
  background: #f8fafc;
}

.policySection {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.policySection:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.policySection p,
.policySection li {
  line-height: 1.7;
}

.legalCallout.donateCallout {
  border-color: #fed7aa;
  background: #fff7ed;
}

.policySection.donateInfoGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

dialog.surface {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  max-width: 460px;
  width: calc(100% - 2rem);
  padding: 0;
}

dialog.surface::backdrop {
  background: rgba(17, 24, 39, 0.45);
}

.htmx-indicator {
  display: none;
}

.htmx-indicator.htmx-request {
  display: inline-block;
}

.navbarMottoWrap {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  text-align: center;
  min-width: 0;
  padding-inline: 0.5rem;
}

.layout-content-navbar .layout-navbar.navbar-detached {
  border: 1px solid rgba(163, 191, 250, 0.8);
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.32), transparent 26%),
    radial-gradient(circle at bottom left, rgba(255, 217, 141, 0.18), transparent 24%),
    linear-gradient(135deg, #12325f 0%, #1c56aa 52%, #5c95ec 100%) !important;
  box-shadow: 0 18px 36px rgba(18, 50, 95, 0.16);
}

@media (min-width: 1920px) {
  /* Keep the capped authenticated layout anchored to the menu on ultra-wide screens. */
  html.layout-menu-fixed .layout-content-navbar:not(.layout-without-menu) .layout-navbar.navbar-detached.container-xxl {
    margin-inline-start: 1rem;
    margin-inline-end: auto;
  }

  html.layout-menu-fixed .layout-content-navbar:not(.layout-without-menu) .content-wrapper > .container-xxl {
    align-self: flex-start;
    margin-inline-start: 0;
    margin-inline-end: auto;
  }
}

.layout-content-navbar .layout-navbar.navbar-detached .navbarMotto {
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.layout-content-navbar .layout-navbar.navbar-detached .navbarMotto::before,
.layout-content-navbar .layout-navbar.navbar-detached .navbarMotto::after {
  display: none;
}

.layout-content-navbar .layout-navbar .navbarMottoTitle,
.layout-content-navbar .layout-navbar .navbarMottoSubtitle,
.layout-content-navbar .layout-navbar .app-brand-text.demo,
.layout-content-navbar .layout-navbar .layout-menu-toggle .icon-base,
.layout-content-navbar .layout-navbar .layout-menu-toggle.menu-link {
  color: #ffffff !important;
}

.layout-content-navbar .layout-navbar .topBarUtilityChip,
.layout-content-navbar .layout-navbar .topBarAvatarTrigger {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset;
  backdrop-filter: blur(8px);
}

.layout-content-navbar .layout-navbar .topBarUtilityChip {
  min-height: 2.5rem;
  padding-inline: 0.8rem;
  border-radius: 999px;
  color: #ffffff;
}

.layout-content-navbar .layout-navbar .topBarUtilityChip:hover,
.layout-content-navbar .layout-navbar .topBarUtilityChip:focus {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.24);
  text-decoration: none;
}

.layout-content-navbar .layout-navbar .topBarDonateChip {
  background: rgba(255, 244, 214, 0.2);
  border-color: rgba(254, 215, 170, 0.52);
}

.layout-content-navbar .layout-navbar .topBarDonateChip:hover,
.layout-content-navbar .layout-navbar .topBarDonateChip:focus {
  background: rgba(255, 237, 213, 0.3);
}

.layout-content-navbar .layout-navbar .topBarAvatarTrigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 999px;
}

.layout-content-navbar .layout-navbar .topBarAvatarTrigger:hover,
.layout-content-navbar .layout-navbar .topBarAvatarTrigger:focus {
  background: rgba(255, 255, 255, 0.22);
}

.navbarOnboardingSummary {
  color: #ffffff;
}

.navbarOnboardingEyebrow {
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.1;
  color: rgba(248, 251, 255, 0.8);
}

.navbarOnboardingText {
  margin-top: 0.12rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(248, 251, 255, 0.94);
  text-wrap: balance;
}

.navbarOnboardingCurrentStep {
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(10, 25, 47, 0.18);
}

.blankLayoutHeaderBar {
  flex-wrap: wrap;
}

.blankLayoutHeaderActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

.navbarMotto {
  position: relative;
  max-width: 760px;
  width: 100%;
  padding: 0.85rem 1.35rem;
  border: 1px solid rgba(163, 191, 250, 0.8);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.32), transparent 26%),
    radial-gradient(circle at bottom left, rgba(255, 217, 141, 0.18), transparent 24%),
    linear-gradient(135deg, #12325f 0%, #1c56aa 52%, #5c95ec 100%);
  box-shadow: 0 18px 36px rgba(18, 50, 95, 0.16);
  line-height: 1.1;
  overflow: hidden;
}

.navbarMotto::before,
.navbarMotto::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.navbarMotto::before {
  width: 11rem;
  height: 11rem;
  right: -3rem;
  top: -4rem;
  background: rgba(255, 244, 214, 0.18);
  filter: blur(8px);
}

.navbarMotto::after {
  width: 9rem;
  height: 9rem;
  left: -2rem;
  bottom: -4rem;
  background: rgba(134, 239, 172, 0.14);
  filter: blur(8px);
}

.navbarMottoTitle {
  position: relative;
  font-size: 1.75rem;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #ffffff;
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(10, 25, 47, 0.18);
}

.navbarMottoSubtitle {
  position: relative;
  margin-top: 0.18rem;
  font-size: 0.78rem;
  font-family: "Public Sans", "Segoe UI", Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(248, 251, 255, 0.88);
  text-wrap: balance;
}

.cultureFlagImage {
  width: 1.25rem;
  height: auto;
  display: inline-block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(31, 47, 74, 0.12);
}

@media (max-width: 991.98px) {
  .navbarMottoWrap {
    display: none !important;
  }

  .layout-navbar .navbar-brand.app-brand .app-brand-text.demo {
    font-size: 1.3rem;
  }

  .onboardingStepsMobile {
    margin: 0.25rem 0 0.5rem;
  }
}

@media (max-width: 575.98px) {
  .blankLayoutHeaderActions {
    width: 100%;
    justify-content: space-between;
  }

  .onboardingStepsMobile {
    padding: 0 0.75rem;
  }

  .onboardingStepsMobileIntro {
    padding: 0.85rem 0.9rem;
  }

  .onboardingStepsMobileIntroText {
    font-size: 0.88rem;
  }

  .onboardingStepsMobileGrid {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .onboardingStepCard {
    padding: 0.8rem 0.85rem;
  }

  .onboardingStepCardText {
    font-size: 0.84rem;
  }

  .userPublicProfilePictureDialog {
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
  }

  .userPublicProfilePictureDialogImage {
    max-height: 72vh;
  }
}

.layout-menu {
  block-size: 100vh;
  block-size: 100dvh;
  max-block-size: 100vh;
  max-block-size: 100dvh;
  overflow: hidden;
  border-right: 1px solid rgba(191, 219, 254, 0.9);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.72), transparent 24%),
    linear-gradient(180deg, #f7fbff 0%, #edf5ff 100%);
}

.layout-menu.menu-vertical {
  display: flex;
  flex-direction: column;
}

.layout-menu.menu-vertical .menu-inner {
  flex: 1 1 auto;
  min-block-size: 0;
  block-size: auto;
  max-block-size: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: rgba(47, 111, 236, 0.72) rgba(191, 219, 254, 0.32);
  padding-inline-end: 0.15rem;
}

.layout-menu.menu-vertical .menu-inner::-webkit-scrollbar {
  width: 1.15rem;
}

.layout-menu.menu-vertical .menu-inner::-webkit-scrollbar-track {
  background: rgba(191, 219, 254, 0.32);
  border-radius: 999px;
}

.layout-menu.menu-vertical .menu-inner::-webkit-scrollbar-thumb {
  min-height: 3rem;
  border: 3px solid rgba(237, 245, 255, 0.96);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(47, 111, 236, 0.9) 0%, rgba(31, 86, 194, 0.9) 100%);
}

.layout-menu.menu-vertical .menu-inner:hover::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(47, 111, 236, 1) 0%, rgba(31, 86, 194, 1) 100%);
}

/* Make the left menu scrollbar easier to grab when PerfectScrollbar is active. */
.layout-menu.menu-vertical .menu-inner.ps .ps__rail-y {
  inset-inline: auto 0.2rem !important;
  inline-size: 0.45rem !important;
}

.layout-menu.menu-vertical .menu-inner.ps .ps__thumb-y {
  inline-size: 0.45rem !important;
  border-radius: 999px;
  opacity: 0.42;
}

.layout-menu.menu-vertical .menu-inner.ps .ps__rail-y:hover,
.layout-menu.menu-vertical .menu-inner.ps .ps__rail-y:focus,
.layout-menu.menu-vertical .menu-inner.ps .ps__rail-y.ps--clicking,
.layout-menu.menu-vertical .menu-inner.ps .ps__rail-y:hover > .ps__thumb-y,
.layout-menu.menu-vertical .menu-inner.ps .ps__rail-y:focus > .ps__thumb-y,
.layout-menu.menu-vertical .menu-inner.ps .ps__rail-y.ps--clicking > .ps__thumb-y {
  inline-size: 0.75rem !important;
}

.layout-menu.menu-vertical .menu-inner.ps .ps__rail-y.ps--clicking > .ps__thumb-y {
  opacity: 0.7;
}

/* Keep the shared left menu compact enough for longer localized labels. */
.layout-menu .app-brand.demo {
  height: 44px;
  margin-top: 0;
  padding-inline: 0.85rem;
  border-bottom: 1px solid rgba(191, 219, 254, 0.7);
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(8px);
}

.layout-menu .app-brand-text.demo {
  font-size: 1.18rem;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #1f2f4a;
}

.layout-menu.menu-vertical .menu-divider {
  margin-block: 0.05rem 0;
  border-color: rgba(191, 219, 254, 0.65);
}

.layout-menu.menu-vertical .menu-header {
  margin-top: 0.2rem;
  margin-bottom: 0.05rem;
  padding-inline: 1rem;
}

.layout-menu.menu-vertical .menu-header .menu-header-text {
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: #72849a;
}

.layout-menu.menu-vertical .menu-item .menu-link {
  min-height: 1.9rem;
  padding: 0.32rem 1rem;
  gap: 0.4rem;
  margin-inline: 0.45rem;
  border-radius: 14px;
  color: #35506f;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.layout-menu.menu-vertical .menu-item .menu-link:hover,
.layout-menu.menu-vertical .menu-item .menu-link:focus {
  background: rgba(255, 255, 255, 0.78);
  color: #244a8f;
  text-decoration: none;
}

.layout-menu.menu-vertical .menu-item.active > .menu-link {
  background: linear-gradient(180deg, rgba(255, 252, 232, 0.98) 0%, rgba(255, 236, 163, 0.98) 100%);
  color: #6b5300;
  box-shadow: 0 10px 20px rgba(201, 153, 14, 0.18);
}

.layout-menu.menu-vertical .menu-item.active > .menu-link:hover {
  color: #6b5300;
  transform: none;
}

.layout-wrapper:not(.layout-horizontal) .layout-menu.menu-vertical .menu-inner > .menu-item.active::before {
  display: none !important;
}

.layout-menu.menu-vertical .menu-link .menu-icon {
  font-size: 0.95rem;
  color: inherit;
}

.layout-menu.menu-vertical .menu-link .text-truncate {
  font-size: 0.85rem;
  line-height: 1.1;
}

.onboardingStepsMobile {
  padding: 0 1rem;
}

.onboardingStepsMobileIntro {
  margin-bottom: 0.75rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(191, 219, 254, 0.92);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.68), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
  box-shadow: 0 14px 30px rgba(18, 50, 95, 0.08);
}

.onboardingStepsMobileEyebrow {
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.1;
  color: #4b6994;
}

.onboardingStepsMobileIntroText {
  margin-top: 0.3rem;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.45;
  color: #244a8f;
  text-wrap: balance;
}

.onboardingStepsMobileCurrentStep {
  display: block;
  margin-top: 0.3rem;
  font-weight: 700;
  color: #12325f;
}

.onboardingStepsMobileGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
}

.onboardingStepCard {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(191, 219, 254, 0.92);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.68), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
  box-shadow: 0 14px 30px rgba(18, 50, 95, 0.08);
  color: #244a8f;
  text-decoration: none;
}

.onboardingStepCard:hover,
.onboardingStepCard:focus {
  color: #1f56c2;
  text-decoration: none;
}

.onboardingStepCardActive {
  border-color: rgba(47, 111, 236, 0.82);
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.3), transparent 28%),
    linear-gradient(135deg, #12325f 0%, #1c56aa 55%, #5c95ec 100%);
  box-shadow: 0 18px 34px rgba(31, 86, 194, 0.2);
  color: #ffffff;
}

.onboardingStepCardActive:hover,
.onboardingStepCardActive:focus {
  color: #ffffff;
}

.onboardingStepCardIndex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  background: rgba(31, 86, 194, 0.12);
  color: inherit;
  font-size: 0.82rem;
  font-weight: 700;
}

.onboardingStepCardActive .onboardingStepCardIndex {
  background: rgba(255, 255, 255, 0.18);
}

.onboardingStepCardText {
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.25;
}

.onboardingStepCardStatus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1f8f54;
  font-size: 1rem;
}

.onboardingStepCardActive .onboardingStepCardStatus {
  color: #ffffff;
}

.chatAgentTopBar {
  justify-content: flex-start;
  align-items: center;
}

.chatAgentTopBarGroup {
  align-items: center;
  justify-content: flex-start;
}

.chatAgentTranscript {
  min-height: 24rem;
  max-height: 32rem;
  overflow-y: auto;
  padding: 1rem 1rem 1.25rem;
  gap: 0.85rem;
}

.chatAgentBubble {
  flex: 0 0 auto;
  width: fit-content;
  max-width: min(100%, 52rem);
}

.chatAgentBubbleUser {
  align-self: flex-end;
  width: min(28rem, calc(100% - 1rem));
}

.chatAgentBubbleAssistant {
  align-self: flex-start;
  width: min(100%, 52rem);
}

.chatAgentMessageText {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.55;
  padding-bottom: 0.15rem;
  min-height: 1.6em;
}

.chatAgentSpeakerLabel {
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.chatAgentBubbleUser .chatAgentSpeakerLabel {
  color: #1f56c2;
}

.chatAgentBubbleAssistant .chatAgentSpeakerLabel {
  color: #0f4c5c;
}

.chatAgentMessageCard .cardBody {
  min-width: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.chatAgentEmptyPanel {
  min-height: 12rem;
  justify-content: center;
}

.chatAgentMessageCard:last-of-type {
  margin-bottom: 0;
}

@media (max-width: 991.98px) {
  .responsiveGridDesktop {
    display: none;
  }

  .responsiveGridMobile {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }
}

@media (max-width: 767.98px) {
  .responsiveGridCardGrid {
    grid-template-columns: 1fr;
  }

  .serviceListActionLinks,
  .serviceListActionButtons {
    width: 100%;
  }

  .serviceListActionButtons {
    flex-direction: column;
  }

  .serviceListActionButtons form,
  .serviceListActionButtons .btnPrimary,
  .serviceListActionButtons .btnSecondary,
  .serviceListActionButtons .btnGhost,
  .serviceListActionButtons .btnDanger,
  .serviceListActionButtons .btnServiceStateActive,
  .serviceListActionButtons .btnServiceStateInactive {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .chatAgentTopBar {
    flex-direction: column;
    align-items: stretch;
  }

  .chatAgentTopBarGroup {
    flex-direction: column;
    align-items: stretch;
  }

  .chatAgentBubble {
    width: 100%;
    max-width: 100%;
  }

  .paymentConsentRow {
    padding: 0.9rem;
  }

  .legalHero,
  .legalDocument .cardBody,
  .paymentTermsPanel {
    padding: 1rem;
  }

  .infoHintDialog {
    max-width: calc(100vw - 1rem);
    width: calc(100vw - 1rem);
  }
}