/* LSH brand palette. Loaded after legacy page styles on every updated page. */
:root, html[data-theme="light"] {
  --brand:#012169; --primary:#253880; --surface:#FFFFFF;
  --page-bg:#F7F8FC; --ink:#012169; --subtle:#525866;
  --line:#D4D4D4; --link:#253880; --support:#EEF1FA;
  --selected:#E7ECFF; --primary-line:#253880; --focus:#B77900;
  --success:#17683A; --warning:#805500; --error:#B42318;
  --card-shadow:0 8px 28px rgb(1 33 105 / 6%);
  color-scheme:light;
}
html[data-theme="dark"] {
  --page-bg:#080F23; --surface:#121D36; --ink:#F7F8FC;
  --subtle:#D4D4D4; --line:#33415F; --link:#AFC2FF;
  --support:#172647; --selected:#253880; --primary-line:#AFC2FF;
  --focus:#F3C45D; --success:#88D8AC; --warning:#F3C45D; --error:#FFB4AB;
  --card-shadow:none; color-scheme:dark;
}
/* Bridge the variable names used by the existing landing, account and catalog. */
:root, html[data-theme] {
  --bg:var(--page-bg); --page:var(--page-bg); --card:var(--surface);
  --panel:var(--surface); --text:var(--ink); --dark:var(--ink);
  --muted:var(--subtle); --border:var(--line); --input:var(--surface);
  --accent:var(--primary); --accent-text:#FFFFFF; --button:var(--primary);
  --button-text:#FFFFFF; --green:var(--primary); --light:var(--support);
  --lsh-bg:var(--page-bg); --lsh-card:var(--surface); --lsh-text:var(--ink);
  --lsh-muted:var(--subtle); --lsh-border:var(--line); --lsh-input:var(--surface);
  --lsh-accent:var(--primary); --lsh-button-text:#FFFFFF;
}
html[data-theme] body {background:var(--page-bg)!important;color:var(--ink)!important}
html[data-theme] :is(.hero,section.content) {background:var(--page-bg)!important}
html[data-theme] :is(header,footer,.lsh-header,.lsh-footer) {
  background:var(--brand)!important;color:#F7F8FC!important;border-color:#33415F!important;
}
html[data-theme] :is(header,footer) :is(a,p,span,strong,summary,h2,h3,.small,.brand,.back) {
  color:#F7F8FC!important;
}
html[data-theme] header .lsh-brand span {border-left-color:#D4D4D4!important}
html[data-theme] :is(.card,.lsh-card,.custom,.repair-link,dialog,.lsh-menu-links) {
  background:var(--surface)!important;color:var(--ink)!important;
  border-color:var(--line)!important;box-shadow:var(--card-shadow);
}
html[data-theme] :is(h1,h1 span,h2,h3,h4,label,legend,strong,dt) {color:var(--ink)!important}
html[data-theme] :is(p,.small,.category,.count,.service-number,.lsh-muted,.steps li) {color:var(--subtle)!important}
html[data-theme] a {color:var(--link)}
html[data-theme] #services .service a {color:var(--link)!important}
html[data-theme] :is(input,select,textarea,#appearanceButton,#servicePickerButton) {
  background:var(--surface)!important;color:var(--ink)!important;border-color:var(--line)!important;
  accent-color:var(--link);
}
html[data-theme] :is(input,textarea)::placeholder {color:var(--subtle)!important;opacity:1}
html[data-theme] :is(button,.button,.lsh-button,.custom button),
html[data-theme] :is(#authSubmit,#guestActions button:not(.outline)) {
  background:var(--primary)!important;color:#FFFFFF!important;
  border:1px solid var(--primary-line);border-radius:14px;
}
html[data-theme] :is(button,.button,.lsh-button):hover:not(:disabled) {
  background:#012169!important;color:#FFFFFF!important;opacity:1;
}
html[data-theme] :is(button.outline,a.button.outline,button.secondary,a.lsh-button.secondary,#googleSignIn) {
  background:transparent!important;color:var(--link)!important;border-color:var(--line)!important;
}
html[data-theme] :is(header,footer) :is(button.outline,a.button.outline,button.secondary,a.lsh-button.secondary) {
  color:#F7F8FC!important;border-color:#AFC2FF!important;
}
html[data-theme] header #guestActions button.outline {
  color:#F7F8FC!important;border-color:#AFC2FF!important;background:transparent!important;
}
html[data-theme] :is(#passwordToggle,#appearanceClose,#servicePickerClose,.lsh-menu-action,dialog button[aria-label*="Close"]) {
  background:transparent!important;color:var(--ink)!important;border-color:transparent!important;
}
html[data-theme] header .lsh-menu summary {color:#FFFFFF!important}
html[data-theme] header .lsh-menu-links :is(a,p,span,label,strong,h3) {color:var(--ink)!important}
html[data-theme] header .lsh-menu-links a:hover {background:var(--support)!important}
html[data-theme] :is(#appearanceDialog,#servicePickerDialog) {
  background:var(--surface)!important;color:var(--ink)!important;
  border-color:var(--line)!important;border-radius:22px;
}
html[data-theme] :is(#appearanceDialog .appearance-option,#servicePickerDialog .service-option) {
  background:transparent!important;color:var(--ink)!important;border-color:var(--line)!important;
}
html[data-theme] :is(#appearanceDialog .appearance-option,#servicePickerDialog .service-option)[aria-pressed="true"] {
  background:var(--selected)!important;color:var(--ink)!important;border-color:var(--link)!important;
}
html[data-theme] :is(#appearanceDialog .appearance-option,#servicePickerDialog .service-option):hover {
  background:var(--support)!important;color:var(--ink)!important;
}
html[data-theme] dialog::backdrop {
  background:rgb(8 15 35 / 45%)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
html[data-theme] :is(.badge,.lsh-badge,.hero .card .example,.profile-photo-circle) {
  background:var(--support)!important;color:var(--ink)!important;border-color:var(--line)!important;
}
html[data-theme] #booking {background:var(--support)!important;color:var(--ink)!important}
html[data-theme] #booking :is(.price-row.total,#total) {color:var(--ink)!important}
html[data-theme] :is(.price-row,.lsh-theme-controls,fieldset) {border-color:var(--line)!important}
html[data-theme] #agents .agent-banner {background:var(--brand)!important;color:#F7F8FC!important}
html[data-theme] #agents .agent-banner :is(h2,p) {color:#F7F8FC!important}
html[data-theme] #agents .agent-banner .button.outline {color:#F7F8FC!important;border-color:#AFC2FF!important;background:transparent!important}
html[data-theme] .repair-link:hover {background:var(--support)!important;border-color:var(--link)!important}
html[data-theme] :focus-visible {outline:3px solid var(--focus)!important;outline-offset:4px}
html[data-theme] :is(.error,.lsh-error,[data-status="error"]) {color:var(--error)!important;border-color:var(--error)!important}
html[data-theme] :is(.notice,[data-status="warning"]) {border-color:var(--warning)!important}
html[data-theme] [data-status="success"] {color:var(--success)!important}
html[data-theme] :is(#authStatus,#requestStatus,#profileStatus,#pageStatus,#notificationStatus)[data-status="error"] {color:var(--error)!important}
html[data-theme] :is(#authStatus,#requestStatus,#profileStatus,#pageStatus,#notificationStatus)[data-status="success"] {color:var(--success)!important}
@media(prefers-reduced-motion:no-preference) {
  button,a.button,.lsh-button,.repair-link {transition:background-color .15s,border-color .15s,color .15s}
}
/* Keep footer text white in both themes */
html[data-theme] footer p,
html[data-theme] .lsh-footer p,
html[data-theme] .lsh-footer-bottom,
html[data-theme] .lsh-footer-bottom p {
  color: #FFFFFF !important;
}
/* Clear rounded buttons in the account header */
html[data-theme] header .header-actions a.button,
html[data-theme] header .header-actions #accountLogout {
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
  border-radius: 999px !important;
  background: transparent !important;
  padding: 12px 18px;
  font-weight: 600;
}

html[data-theme] header .header-actions a.button:hover,
html[data-theme] header .header-actions #accountLogout:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}
  html[data-theme="light"] body header .header-actions a.button.outline,
html[data-theme="dark"] body header .header-actions a.button.outline {
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
  background: transparent !important;
  border-radius: 999px !important;
  opacity: 1 !important;
}
  html[data-theme] #accountBookService,
html[data-theme] #accountManageJobs {
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
  border-radius: 999px !important;
  background: transparent !important;
  opacity: 1 !important;
}
  html[data-theme] #accountTheme {
  display: none !important;
}

html[data-theme] #accountThemeButton {
  color: #FFFFFF !important;
  background: transparent !important;
  border: 2px solid #FFFFFF !important;
  border-radius: 999px;
  padding: 12px 18px;
}

html[data-theme] #accountThemePopup {
  box-sizing: border-box;
  width: min(340px, 90vw);
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: #FFFFFF;
  color: #012169;
}

html[data-theme="dark"] #accountThemePopup {
  background: #121D36;
  color: #F7F8FC;
}

#accountThemePopup::backdrop {
  background: rgba(8, 15, 35, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#accountThemePopup h2 {
  margin: 0 0 18px;
  color: inherit;
}

html[data-theme] #accountThemePopup button {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid currentColor;
  border-radius: 12px;
  background: transparent !important;
  color: inherit !important;
  text-align: left;
}

html[data-theme] #accountThemePopup button[aria-pressed="true"] {
  background: #253880 !important;
  color: #FFFFFF !important;
  border-color: #AFC2FF;
}
    /* Animate all signed-in menu items */
.lsh-menu[open] #memberMenuActions > a,
.lsh-menu[open] #memberMenuActions > button {
  animation: lshMenuEnter 350ms ease-out both;
}

.lsh-menu[open] #memberMenuActions > :nth-child(1) {
  animation-delay: 280ms;
}

.lsh-menu[open] #memberMenuActions > :nth-child(2) {
  animation-delay: 350ms;
}

.lsh-menu[open] #memberMenuActions > :nth-child(3) {
  animation-delay: 420ms;
}

.lsh-menu[open] #memberMenuActions > :nth-child(4) {
  animation-delay: 490ms;
}

.lsh-menu[open] #memberMenuActions > :nth-child(5) {
  animation-delay: 560ms;
}

.lsh-menu[open] .lsh-theme-controls {
  animation-delay: 630ms;
}

@media (prefers-reduced-motion: reduce) {
  .lsh-menu[open] #memberMenuActions > a,
  .lsh-menu[open] #memberMenuActions > button,
  .lsh-menu[open] .lsh-theme-controls {
    animation: none !important;
  }
}
    /* Blur the page behind the open menu */
.lsh-menu[open]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(8, 15, 35, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}

/* Keep the menu and close button clear */
.lsh-menu[open] .lsh-menu-links {
  z-index: 100;
}

.lsh-menu[open] > summary {
  position: relative;
  z-index: 101;
}
    /* Shared header brand */
html[data-theme] .lsh-standard-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #FFFFFF !important;
  text-decoration: none !important;
}

html[data-theme] .lsh-standard-brand img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

html[data-theme] .lsh-standard-brand span {
  border-left: 1px solid #FFFFFF;
  padding-left: 12px;
  color: #FFFFFF !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

/* Rounded navigation buttons */
.lsh-header-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

html[data-theme] .lsh-header-buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border: 1px solid #AFC2FF !important;
  border-radius: 999px;
  background: #253880 !important;
  color: #FFFFFF !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none !important;
}

html[data-theme] .lsh-header-buttons a:hover {
  background: #304798 !important;
}

.lsh-header-buttons a:focus-visible {
  outline: 3px solid #F3C45D;
  outline-offset: 3px;
}
    /* Keep LSH header logos white */
html[data-theme] header .brand img,
html[data-theme] header .lsh-brand img,
html[data-theme] header img[data-lsh-logo],
html[data-theme] #accountLogo {
  filter: none !important;
}
    html[data-theme] header .lsh-standard-brand {
  gap: 8px;
}

html[data-theme] header .lsh-standard-brand img {
  width: 100px !important;
  height: auto !important;
  flex-shrink: 0;
}
    html[data-theme] header .lsh-standard-brand {
  gap: 8px !important;
}

html[data-theme] header .lsh-standard-brand img {
  display: block;
  width: 100px !important;
  max-width: none !important;
  height: auto !important;
  flex: 0 0 100px;
  margin: -16px -34px !important;
  padding: 0 !important;
  transform: none !important;
}

html[data-theme] header .lsh-standard-brand span {
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.25 !important;
}