/* Shared by the React care tools and the standalone waiting-times tool.
   Keep page-specific result layouts in their own stylesheets. */
.care-tools-page {
  --care-ink: #1f2152;
  --care-muted: #687187;
  --care-orange: #e96908;
  --care-blue: #4342ff;
  --care-line: #e4e5ec;
  --care-bg: #f7f7fa;
  --care-tool-icon: url('/assets/care-tools/waiting-times-outline.svg');
  background: var(--care-bg);
}
.care-tools-doctors { --care-tool-icon: url('/assets/care-tools/doctor-hub-outline.svg'); }
.care-tools-fees { --care-tool-icon: url('/assets/care-tools/private-fees-outline.svg'); }
.care-tools-page main,
.care-tools-page .doctor-results-search { background: var(--care-bg); }
.care-tools-page .care-tools-container,
.care-tools-page .fees-shell,
.care-tools-page .shell,
.care-tools-page main > .container {
  box-sizing: border-box;
  width: min(1200px, calc(100% - 48px));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}
.care-tools-page .doctor-results-page { padding: 0 0 72px; }
.care-tools-page .doctor-results-search { padding: 0; }
/* A quiet paper texture for the care tool introductions. Keep it behind
   content and let it fade before the lower sections without clipping menus. */
.care-tools-doctors .doctor-results-page,
.care-tools-page .care-tools-surface {
  position: relative;
  isolation: isolate;
}
.care-tools-doctors .doctor-results-page::before,
.care-tools-page .care-tools-surface::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: 460px;
  max-height: 100%;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse at 82% 12%, rgba(111, 91, 237, .10), transparent 62%),
    radial-gradient(ellipse at 8% 0%, rgba(142, 189, 222, .08), transparent 58%),
    radial-gradient(ellipse at 98% 58%, rgba(233, 105, 8, .035), transparent 48%),
    url('/assets/care-tools/soft-grain.svg');
  background-size: auto, auto, auto, 160px 160px;
  mask-image: linear-gradient(#000 0%, #000 40%, transparent 100%);
}
.care-tools-doctors .doctor-results-search,
.care-tools-page .care-tools-surface > main { background: transparent; }
@media (max-width: 700px) {
  .care-tools-doctors .doctor-results-page::before,
  .care-tools-page .care-tools-surface::before {
    height: 360px;
    opacity: .75;
  }
}
.care-tools-page main .site-breadcrumb[aria-label] {
  margin: 0;
  padding: 24px 0 0;
  min-height: 45px;
  color: var(--care-muted);
  font-size: 14px;
  line-height: 21px;
}
.care-tools-page main .care-tools-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0;
  min-height: 0;
  margin: 0;
  padding: 20px 0 16px;
  text-align: left;
}
.care-tools-page main .care-tools-hero::before { display: none; }
.care-tools-page main .care-tools-hero > div { min-width: 0; text-align: left; }
.care-tools-page main .care-tools-hero h1 {
  position: relative;
  max-width: none;
  margin: 0;
  color: var(--care-ink);
  padding-left: 46px;
  font-size: 32px;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: -.8px;
}
.care-tools-page main .care-tools-hero h1::before {
  content: "";
  position: absolute;
  top: .18em;
  left: 0;
  width: 32px;
  height: 32px;
  background: var(--care-tool-icon) center / contain no-repeat;
}
.care-tools-page main .care-tools-hero h1 > span { color: var(--care-orange); }
.care-tools-page main .care-tools-hero p {
  max-width: 660px;
  margin: 8px 0 0;
  padding-left: 46px;
  color: var(--care-muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
}
.care-tools-page main .care-tools-hero > img[aria-hidden] {
  display: none;
}
.care-tools-page main .care-tool-tabs[aria-label] {
  /* Shared placement: introduction, service navigation, then the query. */
  position: relative;
  z-index: 2;
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 24px;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--care-line);
  border-radius: 999px;
  background: #f1f2f7;
  overflow-x: auto;
  scrollbar-width: thin;
  isolation: isolate;
}
.care-tools-page main .care-tool-tabs[aria-label].has-hover-indicator::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--care-tab-indicator-y, 5px);
  left: 0;
  width: var(--care-tab-indicator-width, 0px);
  height: var(--care-tab-indicator-height, calc(100% - 10px));
  box-sizing: border-box;
  border: 1px solid #f0c5a3;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff 0%, #fff0e2 100%);
  box-shadow: 0 3px 9px rgba(165, 81, 17, .12);
  pointer-events: none;
  transform: translate3d(var(--care-tab-indicator-x, 0px), 0, 0);
  transition: width .34s cubic-bezier(.22, .8, .25, 1),
    height .24s cubic-bezier(.22, .8, .25, 1), top .24s cubic-bezier(.22, .8, .25, 1),
    transform .34s cubic-bezier(.22, .8, .25, 1), background .2s ease,
    border-color .2s ease, box-shadow .2s ease;
}
.care-tools-page main .care-tool-tabs[aria-label].has-hover-indicator.is-hovered::before {
  border-color: #bd4e00;
  background: linear-gradient(135deg, #e96908 0%, #bd4e00 100%);
  box-shadow: 0 5px 13px rgba(165, 81, 17, .25), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.care-tools-page main .care-tool-tabs[aria-label] a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #555d70;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease,
    box-shadow .2s ease, transform .2s cubic-bezier(.22,.8,.25,1), filter .2s ease;
}
.care-tools-page main .care-tool-tabs[aria-label] a svg {
  transition: transform .24s cubic-bezier(.22,.8,.25,1);
}
@media (hover: hover) and (pointer: fine) {
  .care-tools-page main .care-tool-tabs[aria-label].has-hover-indicator a:not([aria-current="page"]):hover {
    border-color: transparent;
    color: #fff;
    background: transparent;
    box-shadow: none;
    transform: none;
  }
  .care-tools-page main .care-tool-tabs[aria-label].has-hover-indicator a[aria-current="page"]:hover {
    border-color: transparent;
    color: #fff;
    background: transparent;
    box-shadow: none;
    filter: none;
    transform: none;
  }
  .care-tools-page main .care-tool-tabs[aria-label].has-hover-indicator a:hover svg {
    transform: translateX(2px);
  }
  .care-tools-page main .care-tool-tabs[aria-label] a:not([aria-current="page"]):hover {
    border-color: #f2c7a2;
    color: #a14f0a;
    background: linear-gradient(145deg, #fff 0%, #fff2e6 100%);
    box-shadow: 0 6px 15px rgba(165, 81, 17, .15), inset 0 0 0 1px rgba(216, 130, 63, .12);
    transform: translateY(-2px) scale(1.015);
  }
  .care-tools-page main .care-tool-tabs[aria-label] a:not([aria-current="page"]):hover svg {
    transform: translateX(3px);
  }
  .care-tools-page main .care-tool-tabs[aria-label] a[aria-current="page"]:hover {
    box-shadow: 0 7px 16px rgba(165, 81, 17, .22), inset 0 1px 0 rgba(255, 255, 255, .6);
    filter: brightness(1.03);
    transform: translateY(-1px);
  }
}
.care-tools-page main .care-tool-tabs[aria-label].has-hover-indicator a:is(:hover, :focus-visible) {
  border-color: transparent;
  color: #fff;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.care-tools-page main .care-tool-tabs[aria-label] a[aria-current="page"] {
  border-color: #f2b47e;
  color: #a84d00;
  background: #fff2e8;
  box-shadow: 0 2px 6px rgba(165, 81, 17, .10);
  transform: none;
}
.care-tools-page main .care-tool-tabs[aria-label].has-hover-indicator a[aria-current="page"] {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.care-tools-page main .care-tool-tabs[aria-label] a[aria-current="page"] svg {
  color: #a84d00;
}
.care-tools-page main .care-tool-tabs[aria-label] a:focus-visible {
  outline: 3px solid var(--care-orange);
  outline-offset: -3px;
}
@media (prefers-reduced-motion: reduce) {
  .care-tools-page main .care-tool-tabs[aria-label].has-hover-indicator::before {
    transition: none;
  }
  .care-tools-page main .care-tool-tabs[aria-label] a,
  .care-tools-page main .care-tool-tabs[aria-label] a svg { transition: none; }
  .care-tools-page main .care-tool-tabs[aria-label] a:not([aria-current="page"]):hover { transform: none; }
}
.care-tools-page .care-tools-panel,
.care-tools-page .fees-search-panel,
.care-tools-page .query-card,
.care-tools-page .fees-sidebar,
.care-tools-page .fees-card {
  border: 1px solid var(--care-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}
.care-tools-page .fees-card {
  border-color: #d5dbe6;
  box-shadow: 0 2px 10px rgba(36, 46, 75, .075);
}
.care-tools-page .fees-card:hover {
  border-color: #c5cedd;
  box-shadow: 0 5px 15px rgba(36, 46, 75, .1);
}
.care-tools-page .care-tools-panel,
.care-tools-page .fees-search-panel { padding: 24px; }
.care-tools-page .care-tools-panel { width: 100%; margin: 0; }
.care-tools-page .care-tools-panel::after { display: none; }
.care-tools-page .care-tools-source-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 16px 24px 0;
  color: var(--care-muted);
}
.care-tools-page .care-tools-source-note svg { width: 24px; height: 24px; flex: 0 0 24px; }
.care-tools-page .care-tools-source-note > div { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.care-tools-page .care-tools-source-note strong,
.care-tools-page .care-tools-source-note span { margin: 0; font-size: 13px; line-height: 1.65; }
.care-tools-page .care-tools-source-note strong { color: var(--care-ink); }
.care-tools-page .doctor-search-compact { gap: 16px; }
.care-tools-page .doctor-more-filters { min-height: 44px; margin: 0; }
.care-tools-page .doctor-search-button { min-height: 48px; }
.care-tools-page .doctor-picker-trigger,
.care-tools-page .doctor-name-field input,
.care-tools-page .query-fields select { min-height: 48px; }
@media (max-width: 700px) {
  .care-tools-page .care-tools-container,
  .care-tools-page .fees-shell,
  .care-tools-page .shell,
  .care-tools-page main > .container { width: calc(100% - 32px); }
  .care-tools-page main .site-breadcrumb[aria-label] { padding-top: 20px; min-height: 41px; }
  .care-tools-page main .care-tools-hero { padding: 18px 0 16px; }
  .care-tools-page main .care-tools-hero > img[aria-hidden] { display: none; }
  .care-tools-page main .care-tools-hero h1 { padding-left: 40px; font-size: 28px; }
  .care-tools-page main .care-tools-hero h1::before { width: 28px; height: 28px; }
  .care-tools-page main .care-tools-hero p { padding-left: 40px; max-width: none; font-size: 15px; line-height: 1.65; }
  .care-tools-page main .care-tool-tabs[aria-label] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    width: 100%;
    margin-bottom: 20px;
    overflow: visible;
  }
  .care-tools-page main .care-tool-tabs[aria-label] a {
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    min-height: 76px;
    padding: 8px;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
  }
  .care-tools-page main .care-tool-tabs[aria-label] a > span {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 4em;
    min-height: 2.8em;
  }
  .care-tools-page .care-tools-panel,
  .care-tools-page .fees-search-panel { padding: 20px; }
  .care-tools-page .doctor-search-compact { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .care-tools-page .doctor-search-compact > .doctor-field { grid-column: 1; grid-row: auto; }
  .care-tools-page .doctor-search-compact .doctor-search-button { grid-column: 1; grid-row: 4; }
  .care-tools-page .doctor-search-compact .doctor-more-filters { grid-column: 1; grid-row: 5; text-align: left; }
  .care-tools-page .doctor-search-compact .doctor-extra-fields:not([hidden]) { grid-column: 1; grid-row: 6; grid-template-columns: minmax(0, 1fr); }
  .care-tools-page .fees-quick { flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 6px; scrollbar-width: thin; }
  .care-tools-page .fees-quick > span,
  .care-tools-page .fees-quick button { flex: 0 0 auto; white-space: nowrap; }
  .care-tools-page .fees-quick > span:first-child { width: auto; margin: 0 4px 0 0; }
  .care-tools-page .fees-quick button { min-height: 44px; }
  .care-tools-page .care-tools-source-note { padding: 16px 20px 0; }
}
@media (max-width: 480px) {
  .care-tools-page .query-fields { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px; }
  .care-tools-page .field-divider { display: none; }
  .care-tools-page .district-control button span:last-child { display: inline; }
  .care-tools-page .query-fields select { font-size: 16px; }
}
