/**
 * MedCare — Health Packages page + home packages banner.
 * Loaded last among page medcare CSS from CareLayout (before shell).
 */

/* —— Home packages banner —— */
.care--web .care-mc-pkg-banner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(140px, 200px) minmax(180px, 240px);
  align-items: center;
  grid-gap: 20px 28px;
  gap: 20px 28px;
  max-width: 1200px;
  margin: 8px auto 28px;
  padding: 22px 28px;
  border-radius: 12px;
  background:
    radial-gradient(ellipse 80% 120% at 12% 50%, rgba(255, 255, 255, 0.55), transparent 55%),
    linear-gradient(105deg, #d4f1f4 0%, #c5ebf0 38%, #b8e4ec 100%);
  border: 1px solid color-mix(in srgb, #7ec8d4 35%, transparent);
  box-shadow: var(--care-v2-shadow-sm);
  overflow: hidden;
}

.care--web .care-mc-pkg-banner__media {
  position: relative;
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(11, 31, 58, 0.12);
  justify-self: center;
}

.care--web .care-mc-pkg-banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.care--web .care-mc-pkg-banner__copy {
  min-width: 0;
}

.care--web .care-mc-pkg-banner__title {
  margin: 0 0 6px;
  font-family: var(--care-v2-font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--care-v2-navy);
  line-height: 1.25;
}

.care--web .care-mc-pkg-banner__lead {
  margin: 0 0 16px;
  color: var(--care-v2-muted);
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 36ch;
}

.care--web .care-mc-pkg-banner__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 10px;
  background: var(--care-v2-primary) !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  border: none;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--care-v2-primary) 28%, transparent);
}

.care--web .care-mc-pkg-banner__cta:hover {
  background: var(--care-v2-primary-hover) !important;
  color: #fff !important;
}

.care--web .care-mc-pkg-banner__trust-wrap {
  min-width: 0;
}

.care--web .care-mc-pkg-banner__trust-title {
  margin: 0 0 12px;
  font-family: var(--care-v2-font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--care-v2-navy);
  line-height: 1.3;
}

.care--web .care-mc-pkg-banner__trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.care--web .care-mc-pkg-banner__trust li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.care--web .care-mc-pkg-banner__trust-ico {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.85);
  color: var(--care-v2-primary);
  box-shadow: 0 1px 0 rgba(11, 31, 58, 0.04);
}

.care--web .care-mc-pkg-banner__trust-ico svg {
  width: 18px;
  height: 18px;
}

.care--web .care-mc-pkg-banner__trust strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--care-v2-navy);
  line-height: 1.25;
}

.care--web .care-mc-pkg-banner__trust span {
  display: block;
  font-size: 0.75rem;
  color: var(--care-v2-muted);
  line-height: 1.3;
}

/* —— Packages page —— */
.care--web .care-mc-packages .care-page__body,
.care--web .care-mc-packages__body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px 72px;
}

.care--web .care-mc-packages__head {
  margin-bottom: 20px;
}

.care--web .care-mc-packages__title {
  margin: 0 0 8px;
  font-family: var(--care-v2-font-display);
  font-size: clamp(1.75rem, 3vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--care-v2-primary);
  line-height: 1.15;
}

.care--web .care-mc-packages__lead {
  margin: 0;
  color: var(--care-v2-muted);
  font-size: 1rem;
  line-height: 1.45;
}

.care--web .care-mc-packages__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
}

.care--web .care-mc-packages__search {
  display: block;
  width: min(100%, 420px);
}

.care--web .care-mc-packages__search input {
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1.5px solid color-mix(in srgb, var(--care-v2-primary) 22%, var(--care-v2-line));
  background: var(--care-v2-surface);
  color: var(--care-v2-navy);
  font-size: 0.95rem;
}

.care--web .care-mc-packages__search input:focus {
  outline: 2px solid color-mix(in srgb, var(--care-v2-primary) 45%, transparent);
  outline-offset: 1px;
  border-color: var(--care-v2-primary);
}

.care--web .care-mc-packages__empty {
  margin: 8px 0 24px;
  padding: 28px 22px;
  border-radius: var(--care-v2-radius, 12px);
  border: 1px dashed var(--care-v2-line);
  background: color-mix(in srgb, var(--care-v2-surface) 88%, var(--care-v2-primary));
  color: var(--care-v2-muted);
  text-align: center;
}

.care--web .care-mc-packages__empty p {
  margin: 0 0 14px;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--care-v2-navy);
}

.care--web .care-mc-packages__empty-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  background: var(--care-v2-primary);
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
}

.care--web .care-mc-packages__pill {
  min-height: 40px;
  padding: 0 18px;
  border-radius: var(--care-v2-radius-pill);
  border: 1.5px solid color-mix(in srgb, var(--care-v2-primary) 28%, var(--care-v2-line));
  background: var(--care-v2-surface);
  color: var(--care-v2-navy);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
}

.care--web .care-mc-packages__pill.is-active {
  background: var(--care-v2-primary);
  border-color: var(--care-v2-primary);
  color: #fff;
}

.care--web .care-mc-packages__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  grid-gap: 24px;
  gap: 24px;
  align-items: start;
}

.care--web .care-mc-packages__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.care--web .care-mc-packages__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.care--web .care-mc-pkg-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px 18px 16px;
  background: var(--care-v2-surface);
  border: 1px solid var(--care-v2-line);
  border-radius: var(--care-v2-radius, 12px);
  box-shadow: var(--care-v2-shadow-card, var(--care-v2-shadow-sm));
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.care--web .care-mc-pkg-card:hover,
.care--web .care-mc-pkg-card:focus-within {
  border-color: color-mix(in srgb, var(--care-v2-primary) 42%, var(--care-v2-line));
  box-shadow: 0 10px 28px rgba(11, 31, 58, 0.1);
}

.care--web .care-mc-pkg-card__hit {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: start;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.care--web .care-mc-pkg-card__ico {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}

.care--web .care-mc-pkg-card__ico--rose {
  background: #ffe4ec;
  color: #e11d48;
}
.care--web .care-mc-pkg-card__ico--sky {
  background: #dbeafe;
  color: #2563eb;
}
.care--web .care-mc-pkg-card__ico--mint {
  background: #d1fae5;
  color: #059669;
}
.care--web .care-mc-pkg-card__ico--amber {
  background: #fef3c7;
  color: #d97706;
}
.care--web .care-mc-pkg-card__ico--violet {
  background: #ede9fe;
  color: #7c3aed;
}
.care--web .care-mc-pkg-card__ico--coral {
  background: #ffedd5;
  color: #ea580c;
}

.care--web .care-mc-pkg-card__name {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--care-v2-navy);
  line-height: 1.3;
}

.care--web .care-mc-pkg-card__practice {
  margin: -4px 0 8px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--care-v2-primary);
  line-height: 1.3;
}

.care--web .care-mc-pkg-card__includes {
  margin: 0 0 16px;
  flex: 1 1;
  font-size: 0.86rem;
  color: var(--care-v2-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.care--web .care-mc-pkg-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.care--web .care-mc-pkg-card__price {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--care-v2-navy);
  white-space: nowrap;
}

.care--web .care-mc-pkg-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 10px;
  background: var(--care-v2-primary) !important;
  color: #fff !important;
  font: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  cursor: pointer;
}

.care--web .care-mc-pkg-card__cta:hover {
  background: var(--care-v2-primary-hover) !important;
}

.care--web .care-mc-packages__promo {
  position: -webkit-sticky;
  position: sticky;
  top: 88px;
  border-radius: var(--care-v2-radius-lg);
  overflow: hidden;
  background: linear-gradient(165deg, #0b1f3a 0%, #12355c 55%, #0b4a8a 100%);
  color: #fff;
  min-height: 420px;
  display: flex;
  flex-direction: column;
}

.care--web .care-mc-packages__promo-photo {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.care--web .care-mc-packages__promo-copy {
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1;
}

.care--web .care-mc-packages__promo-copy h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.care--web .care-mc-packages__promo-copy p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
  flex: 1 1;
}

.care--web .care-mc-packages__promo-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  margin-top: 4px;
  border-radius: 10px;
  background: var(--care-v2-primary);
  color: #fff !important;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

.care--web .care-mc-packages__promo-cta:hover {
  background: var(--care-v2-primary-hover);
  color: #fff !important;
}

.care--web .care-mc-packages__skel.care-skel-list--pharmacy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

@media (max-width: 1024px) {
  .care--web .care-mc-packages__layout {
    grid-template-columns: 1fr;
  }

  .care--web .care-mc-packages__promo {
    position: static;
    min-height: 0;
    flex-direction: row;
    align-items: stretch;
  }

  .care--web .care-mc-packages__promo-photo {
    width: 42%;
    height: auto;
    min-height: 180px;
  }

  .care--web .care-mc-packages__grid,
  .care--web .care-mc-packages__skel.care-skel-list--pharmacy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .care--web .care-mc-pkg-banner {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 20px 18px;
    margin-left: 16px;
    margin-right: 16px;
  }

  .care--web .care-mc-pkg-banner__media {
    max-width: 140px;
  }

  .care--web .care-mc-pkg-banner__lead {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .care--web .care-mc-pkg-banner__trust {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    min-width: 0;
    gap: 10px 16px;
  }

  .care--web .care-mc-pkg-banner__trust li {
    flex: 1 1 140px;
    justify-content: center;
    text-align: start;
  }

  .care--web .care-mc-packages__grid,
  .care--web .care-mc-packages__skel.care-skel-list--pharmacy {
    grid-template-columns: 1fr;
  }

  .care--web .care-mc-packages__promo {
    flex-direction: column;
  }

  .care--web .care-mc-packages__promo-photo {
    width: 100%;
    height: 180px;
  }

  .care--web .care-mc-packages__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .care--web .care-mc-packages__pill {
    flex: 0 0 auto;
  }
}

.care--web.care--phone .care-mc-pkg-banner {
  margin-left: 12px;
  margin-right: 12px;
}

/* —— Package detail sheet (portaled to body — do not nest under .care--web) —— */
.care-mc-pkg-sheet {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: end center;
  padding: 0;
  isolation: isolate;
}

.care-mc-pkg-sheet__scrim {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: color-mix(in srgb, #0b1f3a 48%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}

.care-mc-pkg-sheet__card {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: min(92dvh, 760px);
  overflow: hidden;
  padding: 22px 22px 0;
  border-radius: 16px 16px 0 0;
  border: 1px solid #dbe4f0;
  background: #fff;
  box-shadow: 0 24px 64px rgba(11, 31, 58, 0.22);
  display: flex;
  flex-direction: column;
}

.care-mc-pkg-sheet__body {
  overflow: auto;
  padding-bottom: 8px;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  min-height: 0;
}

.care-mc-pkg-sheet__close {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #dbe4f0;
  background: #fff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.care-mc-pkg-sheet__kicker {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2563eb;
}

.care-mc-pkg-sheet__card h2 {
  margin: 4px 0 0;
  -webkit-padding-end: 40px;
          padding-inline-end: 40px;
  font-size: 1.25rem;
  color: #0b1f3a;
}

.care-mc-pkg-sheet__practice {
  margin: 0;
  color: #0066ff;
  font-size: 0.9rem;
  font-weight: 700;
}

.care-mc-pkg-sheet__desc,
.care-mc-pkg-sheet__validity {
  margin: 0;
  color: #5b6b82;
  font-size: 0.9rem;
  line-height: 1.45;
}

.care-mc-pkg-sheet__price {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0b1f3a;
}

.care-mc-pkg-sheet__includes h3 {
  margin: 8px 0 6px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0b1f3a;
}

.care-mc-pkg-sheet__includes ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.care-mc-pkg-sheet__includes li {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #dbe4f0;
  background: #f7f9fc;
  font-size: 0.88rem;
  color: #0b1f3a;
}

.care-mc-pkg-sheet__actions {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  margin: 0 -22px 0;
  padding: 12px 22px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #e8eef6;
  background: #fff;
}

.care-mc-pkg-sheet .care-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  width: 100%;
  padding: 0 18px;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.care-mc-pkg-sheet .care-btn--primary {
  border: 0;
  background: #0066ff;
  color: #fff !important;
}

.care-mc-pkg-sheet .care-btn--primary:hover {
  background: #0052cc;
}

.care-mc-pkg-sheet .care-btn--ghost {
  background: #fff;
  color: #0b1f3a !important;
  border: 1px solid #dbe4f0;
}

.care--web .care-mc-pkg-card__desc {
  margin: 0 0 10px;
  color: var(--care-v2-muted);
  font-size: 0.82rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.care--web .care-mc-packages__note {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 2px;
  border: 1px solid var(--care-v2-line);
  background: var(--care-v2-primary-mist, #f5f9ff);
  color: var(--care-v2-navy);
  font-size: 0.88rem;
}

.care--web .care-mc-packages__empty-cta--ghost {
  -webkit-margin-start: 8px;
          margin-inline-start: 8px;
  background: transparent !important;
  color: var(--care-v2-primary) !important;
  border: 1px solid var(--care-v2-line);
}

@media (min-width: 721px) {
  .care-mc-pkg-sheet {
    place-items: center;
    padding: 24px;
  }

  .care-mc-pkg-sheet__card {
    border-radius: 12px;
    max-height: min(86dvh, 720px);
  }
}

/**
 * MedCare — Health Articles page.
 * Loaded from CareLayout with packages CSS (before shell).
 */

.care--web .care-mc-articles .care-page__body,
.care--web .care-mc-articles__body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px 72px;
}

.care--web .care-mc-articles__head {
  margin-bottom: 18px;
}

.care--web .care-mc-articles__title {
  margin: 0 0 8px;
  font-family: var(--care-v2-font-display);
  font-size: clamp(1.75rem, 3vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--care-v2-primary);
  line-height: 1.15;
}

.care--web .care-mc-articles__lead {
  margin: 0;
  color: var(--care-v2-muted);
  font-size: 1rem;
  line-height: 1.45;
}

.care--web .care-mc-articles__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
  padding-bottom: 0;
  border-bottom: none;
}

.care--web .care-mc-articles__tab {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  min-height: 40px;
  padding: 0 18px;
  border-radius: var(--care-v2-radius-pill);
  border: 1.5px solid color-mix(in srgb, var(--care-v2-primary) 28%, var(--care-v2-line));
  background: var(--care-v2-surface);
  color: var(--care-v2-navy);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 0;
}

.care--web .care-mc-articles__tab.is-active {
  background: var(--care-v2-primary);
  border-color: var(--care-v2-primary);
  color: #fff;
  border-bottom-color: var(--care-v2-primary);
}

.care--web .care-mc-articles__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.care--web .care-mc-article-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--care-v2-surface);
  border: 1px solid var(--care-v2-line);
  border-radius: var(--care-v2-radius, 12px);
  overflow: hidden;
  box-shadow: var(--care-v2-shadow-card, var(--care-v2-shadow-sm));
}

.care--web .care-mc-article-card__media {
  display: block;
  line-height: 0;
}

.care--web .care-mc-article-card__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  background: var(--care-v2-primary-mist);
}

.care--web .care-mc-article-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  padding: 16px 16px 18px;
}

.care--web .care-mc-article-card__meta {
  display: none;
}

.care--web .care-mc-article-card__title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--care-v2-navy);
  line-height: 1.35;
}

.care--web .care-mc-article-card__title a {
  color: inherit;
  text-decoration: none;
}

.care--web .care-mc-article-card__title a:hover {
  color: var(--care-v2-primary);
}

.care--web .care-mc-article-card__excerpt {
  margin: 0 0 14px;
  flex: 1 1;
  font-size: 0.88rem;
  color: var(--care-v2-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.care--web .care-mc-article-card__more {
  align-self: flex-start;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: none;
  padding: 0;
  color: var(--care-v2-primary);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
}

.care--web .care-mc-article-card__more:hover {
  text-decoration: underline;
}

.care--web .care-mc-article-page__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--care-v2-line);
  border-radius: 2px;
  background: var(--care-v2-surface);
  color: var(--care-v2-navy);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease;
}

.care--web .care-mc-article-page__back:hover {
  border-color: color-mix(in srgb, var(--care-v2-primary) 40%, var(--care-v2-line));
  background: var(--care-v2-primary-mist);
  color: var(--care-v2-primary);
}

.care--web .care-mc-article-page__back-ico,
.care--web .care-mc-article-page__back .care-ico {
  width: 18px;
  height: 18px;
}

.care--web .care-mc-article-detail {
  margin: 0;
  padding: 0;
  border-bottom: 0;
}

.care--web .care-mc-article-detail--page {
  max-width: 760px;
}

.care--web .care-mc-article-detail__img {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: 2px;
  margin-bottom: 18px;
  background: var(--care-v2-primary-mist);
  border: 1px solid var(--care-v2-line);
}

.care--web .care-mc-article-detail__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}

.care--web .care-mc-article-detail__cat {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 2px;
  background: var(--care-v2-primary-mist);
  color: var(--care-v2-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.care--web .care-mc-article-detail__meta {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--care-v2-muted);
}

.care--web .care-mc-article-detail__title {
  margin: 0 0 16px;
  font-family: var(--care-v2-font-display);
  font-size: clamp(1.55rem, 2.8vw, 2.05rem);
  font-weight: 700;
  color: var(--care-v2-navy);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.care--web .care-mc-article-detail__body {
  margin: 0 0 24px;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--care-v2-ink);
  max-width: 68ch;
}

.care--web .care-mc-article-detail__body p {
  margin: 0 0 1em;
}

.care--web .care-mc-article-detail__body p:last-child {
  margin-bottom: 0;
}

.care--web .care-mc-article-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--care-v2-primary-soft);
  color: var(--care-v2-primary);
  border: none;
  border-radius: 2px;
  min-height: 42px;
  padding: 0 16px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
}

.care--web .care-mc-article-detail__back .care-ico {
  width: 16px;
  height: 16px;
}

.care--web .care-mc-article-detail__back:hover {
  filter: brightness(0.98);
}

.care--web .care-mc-articles__skel.care-skel-list--pharmacy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

@media (max-width: 900px) {
  .care--web .care-mc-articles__grid,
  .care--web .care-mc-articles__skel.care-skel-list--pharmacy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .care--web .care-mc-articles__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .care--web .care-mc-articles__tab {
    flex: 0 0 auto;
    margin-bottom: 0;
  }

  .care--web .care-mc-articles__grid,
  .care--web .care-mc-articles__skel.care-skel-list--pharmacy {
    grid-template-columns: 1fr;
  }
}

/**
 * Professional line icons — soft blue squircles, monochrome stroke.
 * Never show 3D /care/icons PNG art in chrome.
 */
.care--web .care-ico,
.care--web .care-top__icon-btn .care-ico,
.care--web .care-mico--line,
.care--web .care-mico--mark {
  color: var(--care-v2-primary, #0066ff);
}

.care--web .care-top__icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--care-v2-line, #e2e8f0);
  background: #fff;
  display: inline-grid;
  place-items: center;
  color: var(--care-v2-navy, #0b1f3a);
  padding: 0;
}

.care--web .care-top__icon-btn .care-ico {
  width: 18px;
  height: 18px;
  color: var(--care-v2-navy, #0b1f3a);
}

.care--web .care-mico--line,
.care--web .care-mico--mark {
  display: inline-grid;
  place-items: center;
  background: var(--care-v2-primary-soft, #ebf5ff) !important;
  color: var(--care-v2-primary, #0066ff) !important;
  border-radius: 14px;
}

.care--web .care-mico--line svg,
.care--web .care-mico--mark svg {
  width: 55%;
  height: 55%;
}

.care--web .care-mico--art img {
  display: none !important;
}

.care--web .care-v2-type-strip__circle,
.care--web .care-v2-popular__ico {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--care-v2-primary-soft, #ebf5ff);
  color: var(--care-v2-primary, #0066ff);
}

.care--web .care-v2-type-strip__ico,
.care--web .care-v2-popular__ico svg {
  width: 26px;
  height: 26px;
  color: inherit;
}

.care--web .care-v2-type-strip__ico.care-ico {
  width: 26px;
  height: 26px;
}

/* Kind cards / shelves: soft-blue line icon squircles */
.care--web .care-kind-card__ico {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--care-v2-primary-soft, #ebf5ff);
  color: var(--care-v2-primary, #0066ff);
  flex-shrink: 0;
}

.care--web .care-kind-card__ico .care-ico {
  width: 24px;
  height: 24px;
}

/* Hide legacy tiny icon imgs only — keep category cover art visible. */
.care--web .care-kind-card > img:not(.care-kind-card__art) {
  display: none;
}

.care--web .care-kind-card__art {
  display: block !important;
  width: 100% !important;
  height: 148px !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 12px 16px 4px !important;
  background: linear-gradient(180deg, #eef6ff 0%, #f8fbff 100%) !important;
  box-sizing: border-box !important;
}

.care--web .care-kind-card--photo {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: auto !important;
  color: var(--care-v2-ink, #0f172a) !important;
  background: #fff !important;
}

.care--web .care-kind-card--photo .care-kind-card__body,
.care--web .care-kind-card--photo > span {
  position: static !important;
  inset: auto !important;
  display: block !important;
  padding: 12px 16px 16px !important;
  background: transparent !important;
  color: inherit !important;
}

.care--web .care-kind-card--photo strong {
  color: var(--care-v2-navy, #0b1f3a) !important;
}

.care--web .care-kind-card--photo em {
  color: var(--care-v2-muted, #64748b) !important;
}

.care--web .care-kind-shelf__title > img {
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
  padding: 6px !important;
  border-radius: 12px !important;
  background: var(--care-v2-primary-soft, #ebf5ff) !important;
}

/**
 * One phone chrome for Care, login, and every staff module.
 * Desktop B2B is unchanged. Staff home launcher is unchanged.
 */

@media (max-width: 767px) {
  .care,
  html.ch-native-app .spa-login {
    --care-navy: #1e3a5f;
    --care-header-start: #2563eb;
    --care-header-end: #1e3a5f;
    --ch-phone-chrome-top: #ffffff;
    color-scheme: light;
  }

  .spa-login {
    --ch-phone-chrome-top: #2563eb;
  }

  .spa-login__field input {
    background: #eef2f6 !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
  }

  .spa-login__submit {
    min-height: 48px;
    border-radius: 14px !important;
    font-weight: 700 !important;
    background: #2563eb !important;
    color: #fff !important;
    box-shadow: none !important;
  }
}

html.ch-native-app .spa-login {
  --login-ink: #0f172a;
  --login-accent: #2563eb;
  --login-accent-deep: #1e3a5f;
  background: linear-gradient(135deg, #2563eb, #1e3a5f);
  overflow-x: hidden;
  overflow-y: auto;
}

html.ch-native-app .spa-login__atmosphere,
html.ch-native-app .spa-login__orb,
html.ch-native-app .spa-login__logo-ring,
html.ch-native-app .spa-login__brand-kicker {
  display: none;
}

html.ch-native-app .spa-login__hero {
  text-align: start;
  margin-bottom: 18px;
}

html.ch-native-app .spa-login__logo-wrap {
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
}

html.ch-native-app .spa-login__logo {
  width: 40px;
  height: 40px;
  filter: brightness(0) invert(1);
}

html.ch-native-app .spa-login__title,
html.ch-native-app .spa-login__lead {
  color: #fff;
}

html.ch-native-app .spa-login__title {
  font-size: 28px;
  font-weight: 800;
}

html.ch-native-app .spa-login__lead {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
}

html.ch-native-app .spa-login__main {
  justify-content: flex-start;
  overflow: visible;
  padding-bottom: 28px;
}

html.ch-native-app .spa-login__mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 6px;
  gap: 6px;
  margin-bottom: 12px;
  padding: 4px;
  border-radius: 14px;
  background: #fff;
  border: 0;
}

html.ch-native-app .spa-login__mode button {
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #64748b;
  font-weight: 700;
}

html.ch-native-app .spa-login__mode button.is-active {
  background: #eff6ff;
  color: #1e3a5f;
}

html.ch-native-app .spa-login__panel,
html.ch-native-app .spa-login__form {
  background: #fff;
  border-radius: 22px;
  border: 0;
  box-shadow: none;
  padding: 20px 18px 18px;
}

html.ch-native-app .spa-login__staff-link {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  border: 1.4px solid #2563eb;
  border-radius: 14px;
  background: #fff;
  color: #1e3a5f;
  font-weight: 700;
}

html.ch-native-app .spa-login__submit {
  display: block !important;
  visibility: visible !important;
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  flex-shrink: 0;
  border: 0;
  border-radius: 14px !important;
  background: #2563eb !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  opacity: 1;
}

html.ch-native-app .spa-login__locale {
  background: rgba(255, 255, 255, 0.16);
  border-color: transparent;
}

html.ch-native-app .spa-login__locale button {
  color: #fff;
}

html.ch-native-app .spa-login__locale button.is-active {
  background: #fff;
  color: #1e3a5f;
}

html.ch-native-app .spa-login__back {
  background: rgba(255, 255, 255, 0.16);
  border-color: transparent;
  color: #fff;
}

@media (max-width: 767px) {
  .care,
  .pp,
  html.ch-native-app,
  html.ch-native-app body,
  html.ch-native-app body.ch-no-sidebar,
  html.opd-m-active,
  body.opd-m-active,
  html.pharm-m-active,
  body.pharm-m-active,
  html.lab-m-active,
  body.lab-m-active,
  html.rad-m-active,
  body.rad-m-active,
  html.pat-m-active,
  body.pat-m-active,
  html.ipd-m-active,
  body.ipd-m-active,
  .mod-m-app,
  .mod-m-app[data-mod-theme],
  .opd-mobile-app,
  .pharm-mobile-app,
  .lab-mobile-app,
  .rad-mobile-app,
  .pat-mobile-app,
  .ipd-mobile-app,
  .rehab-mobile-app,
  .bb-mobile-app,
  [class*='-mobile-app'] {
    --ec-platform-blue: #2563eb !important;
    --ec-brand-primary: #2563eb !important;
    --ec-platform-blue-hover: #1e3a5f !important;
    --ec-brand-primary-hover: #1e3a5f !important;
    --ec-proposal-accent: #2563eb !important;
    --ec-platform-mist: #eff6ff !important;
    --ec-proposal-page-bg: #f8fafc !important;
    --ec-proposal-card-bg: #ffffff !important;
    --ec-platform-paper: #ffffff !important;
    --ec-platform-ink: #0f172a !important;
    --ec-platform-muted: #64748b !important;
    --ec-platform-line: rgba(30, 58, 95, 0.1) !important;
    --ec-platform-btn-radius: 14px !important;
    --ch-phone-accent: #2563eb !important;
    --ch-phone-accent-strong: #1e3a5f !important;
    --ch-phone-accent-soft: #eff6ff !important;
    --ch-phone-accent-mist: #eff6ff !important;
    --ch-phone-chrome-top: #ffffff !important;
    --mbn-accent: #2563eb !important;
    --mbn-accent-soft: #eff6ff !important;
    --mod-m-accent: #2563eb !important;
    --mod-m-accent-mid: #2563eb !important;
    --mod-m-accent-deep: #1e3a5f !important;
    --mod-m-accent-soft: #eff6ff !important;
    --mod-m-atmosphere: #f8fafc !important;
    --mod-m-ink: #0f172a !important;
    --mod-m-muted: #64748b !important;
    --mod-m-line: rgba(30, 58, 95, 0.1) !important;
    --mod-m-radius: 14px !important;
    --mod-hub-accent: #2563eb !important;
    --mod-hub-accent-mid: #2563eb !important;
    --mod-hub-accent-deep: #1e3a5f !important;
    --mod-hub-soft: #eff6ff !important;
    --mod-hub-shadow: rgba(0, 18, 36, 0.04) !important;
    --opd-m-bg: #f8fafc !important;
    --opd-m-surface: #ffffff !important;
    --opd-m-ink: #0f172a !important;
    --opd-m-muted: #64748b !important;
    --opd-m-accent: #2563eb !important;
    --opd-m-accent-press: #1e3a5f !important;
    --opd-m-accent-soft: #eff6ff !important;
    --opd-m-chrome: #2563eb !important;
    --opd-m-chrome-deep: #1e3a5f !important;
    --opd-m-radius: 14px !important;
    --opd-m-font: 0.95rem !important;
    --pharm-m-bg: #f8fafc !important;
    --pharm-m-surface: #ffffff !important;
    --pharm-m-ink: #0f172a !important;
    --pharm-m-muted: #64748b !important;
    --pharm-m-accent: #2563eb !important;
    --pharm-m-accent-press: #1e3a5f !important;
    --pharm-m-accent-soft: #eff6ff !important;
    --pharm-m-chrome: #2563eb !important;
    --pharm-m-chrome-deep: #1e3a5f !important;
    --pharm-m-radius: 14px !important;
    --pharm-m-atmosphere: #f8fafc !important;
    --lab-m-bg: #f8fafc !important;
    --lab-m-surface: #ffffff !important;
    --lab-m-ink: #0f172a !important;
    --lab-m-muted: #64748b !important;
    --lab-m-accent: #2563eb !important;
    --lab-m-accent-press: #1e3a5f !important;
    --lab-m-accent-soft: #eff6ff !important;
    --lab-m-chrome: #2563eb !important;
    --lab-m-chrome-deep: #1e3a5f !important;
    --lab-m-radius: 14px !important;
    --lab-m-atmosphere: #f8fafc !important;
    --rad-m-bg: #f8fafc !important;
    --rad-m-surface: #ffffff !important;
    --rad-m-ink: #0f172a !important;
    --rad-m-muted: #64748b !important;
    --rad-m-accent: #2563eb !important;
    --rad-m-accent-press: #1e3a5f !important;
    --rad-m-accent-soft: #eff6ff !important;
    --rad-m-chrome: #2563eb !important;
    --rad-m-chrome-deep: #1e3a5f !important;
    --rad-m-radius: 14px !important;
    --rad-m-atmosphere: #f8fafc !important;
    --pat-m-bg: #f8fafc !important;
    --pat-m-surface: #ffffff !important;
    --pat-m-ink: #0f172a !important;
    --pat-m-muted: #64748b !important;
    --pat-m-accent: #2563eb !important;
    --pat-m-accent-press: #1e3a5f !important;
    --pat-m-accent-soft: #eff6ff !important;
    --pat-m-chrome: #2563eb !important;
    --pat-m-chrome-deep: #1e3a5f !important;
    --pat-m-radius: 14px !important;
    --pat-m-atmosphere: #f8fafc !important;
    --ipd-m-bg: #f8fafc !important;
    --ipd-m-surface: #ffffff !important;
    --ipd-m-ink: #0f172a !important;
    --ipd-m-muted: #64748b !important;
    --ipd-m-accent: #2563eb !important;
    --ipd-m-accent-press: #1e3a5f !important;
    --ipd-m-accent-soft: #eff6ff !important;
    --ipd-m-chrome: #2563eb !important;
    --ipd-m-chrome-deep: #1e3a5f !important;
    --ipd-m-radius: 14px !important;
    --ipd-m-atmosphere: #f8fafc !important;
    --rehab-m-bg: #f8fafc !important;
    --rehab-m-surface: #ffffff !important;
    --rehab-m-ink: #0f172a !important;
    --rehab-m-muted: #64748b !important;
    --rehab-m-accent: #2563eb !important;
    --rehab-m-accent-press: #1e3a5f !important;
    --rehab-m-accent-soft: #eff6ff !important;
    --rehab-m-chrome: #2563eb !important;
    --rehab-m-chrome-deep: #1e3a5f !important;
    --rehab-m-radius: 14px !important;
    --hr-accent: #2563eb !important;
    --hr-accent-hover: #1e3a5f !important;
    --hr-soft: #eff6ff !important;
    --hr-atmosphere: #f8fafc !important;
    --hr-ink: #0f172a !important;
    --bb-m-bg: #f8fafc !important;
    --bb-m-canvas: #f8fafc !important;
    --bb-m-ink: #0f172a !important;
    --bb-m-radius: 14px !important;
    --care-navy: #1e3a5f;
    --care-header-start: #2563eb;
    --care-header-end: #1e3a5f;
    color-scheme: light;
  }

  .mod-m-app,
  .opd-mobile-app,
  .pharm-mobile-app,
  .lab-mobile-app,
  .rad-mobile-app,
  .pat-mobile-app,
  .ipd-mobile-app,
  .rehab-mobile-app,
  [class*='-mobile-app'] {
    background: #f8fafc !important;
    color: #0f172a !important;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  }

  html.ch-native-app .ec-app-topbar--compact,
  html.ch-native-app .ec-app-topbar--compact .ec-app-topbar__appbar,
  html.ch-native-app body.mod-m-branded.ec-b2b-theme.ec-sidebar-layout .ec-app-topbar.ec-app-topbar--compact,
  html.ch-native-app body.mod-m-theme-ambulance .ec-app-topbar.ec-app-topbar--compact {
    background: #fff !important;
    color: #0f172a !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(30, 58, 95, 0.1) !important;
  }

  html.ch-native-app .ec-app-topbar--compact .ec-app-topbar__title,
  html.ch-native-app .ec-app-topbar--compact .ec-app-topbar__nav-btn,
  html.ch-native-app .ec-app-topbar--compact .ec-app-topbar__menu-btn,
  html.ch-native-app .ec-app-topbar--compact .ec-app-topbar__burger-bar {
    color: #0f172a !important;
    background: transparent !important;
  }

  html.ch-native-app .ec-app-topbar--compact .ec-app-topbar__burger-bar {
    background: #0f172a !important;
  }

  .care-hero--photo {
    display: none !important;
  }

  nav.module-bottom-nav,
  nav.opd-bottom-nav,
  nav.ipd-bottom-nav,
  nav.care-tabs,
  nav.pp-tabs,
  .rehab-dock__bar,
  .mod-float-dock__bar {
    background: #fff !important;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
  }

  .mod-m-app .btn-primary,
  .mod-m-app button[type='submit'],
  .mod-m-app .ec-btn-primary,
  [class*='-mobile-app'] .btn-primary,
  [class*='-mobile-app'] button[type='submit'],
  [class*='-mobile-app'] .ec-btn-primary,
  .spa-login__submit {
    min-height: 48px;
    border-radius: 14px;
    font-weight: 700;
    background: #2563eb;
    color: #fff;
    box-shadow: none;
  }
}

html.ch-native-app .mod-m-app,
html.ch-native-app [class*='-mobile-app'] {
  --mod-m-accent: #2563eb !important;
  --mod-m-atmosphere: #f8fafc !important;
  --ch-phone-chrome-top: #ffffff !important;
  background: #f8fafc !important;
}

/* Native app always uses the same staff chrome (not only ≤767). Care top/tabs stay white. */
html.ch-native-app,
html.ch-native-app body,
html.ch-native-app .mod-m-app,
html.ch-native-app [class*='-mobile-app'] {
  --ch-phone-chrome-top: #ffffff !important;
  --ch-phone-accent: #2563eb !important;
  --mbn-accent: #2563eb !important;
  --mod-hub-accent: #2563eb !important;
}

html.ch-native-app .ec-app-topbar--compact,
html.ch-native-app .ec-app-topbar--compact .ec-app-topbar__appbar {
  background: #fff !important;
  color: #0f172a !important;
  border-bottom: 1px solid rgba(30, 58, 95, 0.1) !important;
}

html.ch-native-app .care-top,
html.ch-native-app .care-tabs,
html.ch-native-app .pp-top,
html.ch-native-app .pp-tabs {
  background: #fff !important;
  color: inherit !important;
}

html.ch-native-app .rehab-dock,
html.ch-native-app .mod-float-dock,
html.ch-native-app .mod-m-pill-dock {
  padding: 0 !important;
  max-width: none !important;
  justify-content: stretch !important;
}

html.ch-native-app .rehab-dock__bar,
html.ch-native-app .mod-float-dock__bar {
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
  max-width: none !important;
  width: 100% !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

html.ch-native-app .careos-mobile-screen [class$='__head'],
html.ch-native-app .careos-mobile-screen [class$='__header'] {
  background: #fff !important;
  color: #0f172a !important;
  border-bottom: 1px solid rgba(30, 58, 95, 0.1) !important;
}

@media (max-width: 767px) {
  .module-bottom-nav__label,
  .rehab-dock__label {
    font-size: 11px !important;
  }

  .rehab-dock,
  .mod-float-dock,
  .mod-m-pill-dock {
    padding: 0 !important;
    max-width: none !important;
    justify-content: stretch !important;
  }

  .rehab-dock__bar,
  .mod-float-dock__bar {
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
    max-width: none !important;
    width: 100% !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }

  /* Bare utility only. Never steal display/padding from module cards. */
  .staff-phone-row:not([class*='card']):not([class*='__']):not(.care-doc):not(.care-center):not(.care-search-hit):not(.care-spec-list__item):not(.care-rad-row):not(.bb-group):not(.bb-life-row):not(.rad-m-slot):not(.hr-phone-row):not(.rehab-phone-row):not(.clinic-shot-patient-row):not(.pref-hub-card):not(.hospital-shot__hub):not(.opd-cw-choice):not(.opd-cw-doctor-trigger) {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 56px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(30, 58, 95, 0.1);
    color: #0f172a;
  }

  .staff-phone-chips,
  .opd-m-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 8px;
    -webkit-overflow-scrolling: touch;
  }

  .staff-phone-chip,
  .opd-m-chip,
  .opd-date-filter__chip {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    background: #eef2f6;
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
  }

  .care-home-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 8px;
  }

  .care-home-chips a {
    text-decoration: none;
  }

  .staff-phone-chip.is-active,
  .opd-m-chip.is-active,
  .opd-date-filter__chip.is-active {
    background: #eff6ff;
    color: #1e3a5f;
  }

  .staff-phone-footer {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.08);
  }

  .staff-phone-empty,
  .staff-phone-error,
  .mod-m-hub__empty,
  .pharm-empty-state,
  .pharm-shot-empty,
  .ui-empty-state {
    margin: 24px 0;
    padding: 20px 16px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(30, 58, 95, 0.1);
    color: #64748b;
    text-align: center;
  }

  .staff-phone-error {
    color: #c4453c;
    border-color: rgba(196, 69, 60, 0.2);
  }
}

/*
 * Phone tab bars — Flutter Care patient.
 * Target the <nav> / dock bar only. Never [class*='-bottom-nav']
 * (that matches has-module-bottom-nav, __fab, __label, __sheet).
 */
@media (max-width: 767px) {
  :is([class*='-mobile-app'], .mod-m-app) nav.module-bottom-nav,
  :is([class*='-mobile-app'], .mod-m-app) nav.module-bottom-nav.module-bottom-nav--segmented,
  :is([class*='-mobile-app'], .mod-m-app) nav.opd-bottom-nav,
  :is([class*='-mobile-app'], .mod-m-app) nav.ipd-bottom-nav,
  .mod-m-pill-dock .module-bottom-nav,
  nav.care-tabs,
  nav.pp-tabs,
  .rehab-dock__bar,
  .mod-float-dock__bar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    min-height: 56px !important;
    padding: 6px max(6px, env(safe-area-inset-right, 0px)) 0
      max(6px, env(safe-area-inset-left, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-top: 1px solid rgba(30, 58, 95, 0.1) !important;
    background: #fff !important;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-around !important;
    gap: 0 !important;
    z-index: 1180 !important;
  }

  :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav > a,
  :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav > .module-bottom-nav__more,
  :is([class*='-mobile-app'], .mod-m-app) .opd-bottom-nav > a,
  :is([class*='-mobile-app'], .mod-m-app) .opd-bottom-nav > .opd-bottom-nav__more,
  :is([class*='-mobile-app'], .mod-m-app) .ipd-bottom-nav > a,
  :is([class*='-mobile-app'], .mod-m-app) .ipd-bottom-nav > .ipd-bottom-nav__more,
  nav.care-tabs > button,
  nav.care-tabs > .care-tabs__btn,
  nav.pp-tabs > a,
  .rehab-dock__item,
  .mod-float-dock__item {
    flex: 1 1 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    min-height: 48px !important;
    min-width: 0 !important;
    padding: 6px 4px 8px !important;
    gap: 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #64748b !important;
  }

  :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav > a.is-active,
  :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav > .module-bottom-nav__more.is-active,
  :is([class*='-mobile-app'], .mod-m-app) .opd-bottom-nav > a.is-active,
  :is([class*='-mobile-app'], .mod-m-app) .opd-bottom-nav > .opd-bottom-nav__more.is-active,
  :is([class*='-mobile-app'], .mod-m-app) .ipd-bottom-nav > a.is-active,
  :is([class*='-mobile-app'], .mod-m-app) .ipd-bottom-nav > .ipd-bottom-nav__more.is-active,
  nav.care-tabs > button.is-active,
  nav.care-tabs > .care-tabs__btn.is-active,
  nav.pp-tabs > a.is-active,
  .rehab-dock__item.is-active,
  .mod-float-dock__item.is-active {
    color: #2563eb !important;
    background: transparent !important;
  }

  :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav__label,
  :is([class*='-mobile-app'], .mod-m-app) .opd-bottom-nav__label,
  :is([class*='-mobile-app'], .mod-m-app) .ipd-bottom-nav__label,
  nav.care-tabs button span,
  .rehab-dock__label,
  .mod-float-dock__label {
    display: block !important;
    max-width: 100% !important;
    margin: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    color: inherit !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav__glyph,
  :is([class*='-mobile-app'], .mod-m-app) .opd-bottom-nav__glyph,
  :is([class*='-mobile-app'], .mod-m-app) .ipd-bottom-nav__glyph,
  .rehab-dock__glyph,
  .mod-float-dock__glyph {
    width: 28px !important;
    height: 28px !important;
    background: transparent !important;
    color: inherit !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav > a.is-active .module-bottom-nav__glyph,
  :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav > .module-bottom-nav__more.is-active .module-bottom-nav__glyph {
    width: 56px !important;
    height: 28px !important;
    border-radius: 14px !important;
    background: #eff6ff !important;
    color: #2563eb !important;
  }

  :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav__fab-slot,
  :is([class*='-mobile-app'], .mod-m-app) .opd-bottom-nav__fab-slot,
  :is([class*='-mobile-app'], .mod-m-app) .ipd-bottom-nav__fab-slot,
  :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav--segmented > .module-bottom-nav__fab-slot {
    flex: 1 1 !important;
    width: auto !important;
    height: auto !important;
    min-height: 48px !important;
    padding: 0 2px 8px !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-end !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav__fab,
  :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav--segmented .module-bottom-nav__fab,
  :is([class*='-mobile-app'], .mod-m-app) .opd-bottom-nav__fab,
  :is([class*='-mobile-app'], .mod-m-app) .ipd-bottom-nav__fab,
  .rehab-dock__fab,
  .mod-float-dock__fab,
  nav.pp-tabs .pp-tabs__fab {
    flex: 0 0 auto !important;
    width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: -22px 0 4px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: #2563eb !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(30, 111, 234, 0.32) !important;
    display: grid !important;
    place-items: center !important;
    grid-gap: 0 !important;
    gap: 0 !important;
  }

  :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav__fab.is-open,
  :is([class*='-mobile-app'], .mod-m-app) .opd-bottom-nav__fab.is-open,
  :is([class*='-mobile-app'], .mod-m-app) .ipd-bottom-nav__fab.is-open,
  nav.pp-tabs .pp-tabs__fab.is-open {
    background: #1e3a5f !important;
    color: #fff !important;
    border-radius: 50% !important;
    transform: rotate(45deg) !important;
  }

  :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav__fab .module-bottom-nav__label,
  :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav--segmented .module-bottom-nav__fab .module-bottom-nav__label {
    display: none !important;
  }

  :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav__fab .module-bottom-nav__fab-plus,
  :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav__fab .module-bottom-nav__fab-plus::before {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 18px !important;
    height: 2.5px !important;
    border-radius: 2px !important;
    background: #fff !important;
    transform: translate(-50%, -50%) !important;
    content: '' !important;
  }

  :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav__fab .module-bottom-nav__fab-plus::before {
    width: 2.5px !important;
    height: 18px !important;
  }

  :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav__fab .module-bottom-nav__fab-plus::after {
    content: none !important;
  }
}

html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) nav.module-bottom-nav,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) nav.module-bottom-nav.module-bottom-nav--segmented,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) nav.opd-bottom-nav,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) nav.ipd-bottom-nav,
html.ch-native-app .mod-m-pill-dock .module-bottom-nav,
html.ch-native-app nav.care-tabs,
html.ch-native-app nav.pp-tabs,
html.ch-native-app .rehab-dock__bar,
html.ch-native-app .mod-float-dock__bar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  min-height: 56px !important;
  padding: 6px max(6px, env(safe-area-inset-right, 0px)) 0
    max(6px, env(safe-area-inset-left, 0px)) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-top: 1px solid rgba(30, 58, 95, 0.1) !important;
  background: #fff !important;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-around !important;
  gap: 0 !important;
  z-index: 1180 !important;
}

html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav > a,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav > .module-bottom-nav__more,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .opd-bottom-nav > a,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .opd-bottom-nav > .opd-bottom-nav__more,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .ipd-bottom-nav > a,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .ipd-bottom-nav > .ipd-bottom-nav__more,
html.ch-native-app nav.care-tabs > button,
html.ch-native-app nav.care-tabs > .care-tabs__btn,
html.ch-native-app nav.pp-tabs > a,
html.ch-native-app .rehab-dock__item,
html.ch-native-app .mod-float-dock__item {
  flex: 1 1 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  min-height: 48px !important;
  min-width: 0 !important;
  padding: 6px 4px 8px !important;
  gap: 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #64748b !important;
}

html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav > a.is-active,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav > .module-bottom-nav__more.is-active,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .opd-bottom-nav > a.is-active,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .opd-bottom-nav > .opd-bottom-nav__more.is-active,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .ipd-bottom-nav > a.is-active,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .ipd-bottom-nav > .ipd-bottom-nav__more.is-active,
html.ch-native-app nav.care-tabs > button.is-active,
html.ch-native-app nav.care-tabs > .care-tabs__btn.is-active,
html.ch-native-app nav.pp-tabs > a.is-active,
html.ch-native-app .rehab-dock__item.is-active,
html.ch-native-app .mod-float-dock__item.is-active {
  color: #2563eb !important;
  background: transparent !important;
}

html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav__label,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .opd-bottom-nav__label,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .ipd-bottom-nav__label,
html.ch-native-app nav.care-tabs button span,
html.ch-native-app .rehab-dock__label,
html.ch-native-app .mod-float-dock__label {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  color: inherit !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav__glyph,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .opd-bottom-nav__glyph,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .ipd-bottom-nav__glyph,
html.ch-native-app .rehab-dock__glyph,
html.ch-native-app .mod-float-dock__glyph {
  width: 28px !important;
  height: 28px !important;
  background: transparent !important;
  color: inherit !important;
  border-radius: 0 !important;
  transform: none !important;
}

html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav > a.is-active .module-bottom-nav__glyph,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav > .module-bottom-nav__more.is-active .module-bottom-nav__glyph {
  width: 56px !important;
  height: 28px !important;
  border-radius: 14px !important;
  background: #eff6ff !important;
  color: #2563eb !important;
}

html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav__fab-slot,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .opd-bottom-nav__fab-slot,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .ipd-bottom-nav__fab-slot,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav--segmented > .module-bottom-nav__fab-slot {
  flex: 1 1 !important;
  width: auto !important;
  height: auto !important;
  min-height: 48px !important;
  padding: 0 2px 8px !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: flex-end !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav__fab,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav--segmented .module-bottom-nav__fab,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .opd-bottom-nav__fab,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .ipd-bottom-nav__fab,
html.ch-native-app .rehab-dock__fab,
html.ch-native-app .mod-float-dock__fab,
html.ch-native-app nav.pp-tabs .pp-tabs__fab {
  flex: 0 0 auto !important;
  width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: -22px 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #2563eb !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(30, 111, 234, 0.32) !important;
  display: grid !important;
  place-items: center !important;
  grid-gap: 0 !important;
  gap: 0 !important;
}

html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav__fab.is-open,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .opd-bottom-nav__fab.is-open,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .ipd-bottom-nav__fab.is-open,
html.ch-native-app nav.pp-tabs .pp-tabs__fab.is-open {
  background: #1e3a5f !important;
  color: #fff !important;
  border-radius: 50% !important;
  transform: rotate(45deg) !important;
}

html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav__fab .module-bottom-nav__label,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav--segmented .module-bottom-nav__fab .module-bottom-nav__label {
  display: none !important;
}

html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav__fab .module-bottom-nav__fab-plus,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav__fab .module-bottom-nav__fab-plus::before {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 18px !important;
  height: 2.5px !important;
  border-radius: 2px !important;
  background: #fff !important;
  transform: translate(-50%, -50%) !important;
  content: '' !important;
}

html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav__fab .module-bottom-nav__fab-plus::before {
  width: 2.5px !important;
  height: 18px !important;
}

html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .module-bottom-nav__fab .module-bottom-nav__fab-plus::after {
  content: none !important;
}

html.ch-native-app .care.care--phone .care-tabs {
  display: flex !important;
}

/*
 * One Care palette in every staff module.
 * Beats brand-opd / pharmacy teal / lab cyan / rad indigo / IPD blue / BB red chrome.
 * Blood type / critical / warn stay on their own tokens.
 */
@media (max-width: 767px) {
  html.ch-native-app body,
  html.ch-native-app body.ipd-m-active,
  html.ch-native-app body[data-ch-tone],
  body.ch-no-sidebar[data-ch-tone] {
    --ch-phone-chrome-top: #ffffff !important;
    --ch-phone-accent: #2563eb !important;
  }

  body.ec-b2b-theme.ec-sidebar-layout .ec-app-topbar.ec-app-topbar--compact[class*='--brand-'],
  body.ch-no-sidebar.ec-b2b-theme.ec-sidebar-layout
    .ec-app-topbar.ec-app-topbar--compact[class*='--brand-'],
  body:has([class*='-m-hero']) .ec-app-topbar--compact[class*='--brand-'],
  body[class*='-m-active'] .ec-app-topbar--compact[class*='--brand-'],
  body[class*='mod-m-theme-'] .ec-app-topbar.ec-app-topbar--compact,
  .ec-app-topbar--compact[class*='ec-app-topbar--brand'] {
    background: #fff !important;
    color: #0f172a !important;
    border-bottom: 1px solid rgba(30, 58, 95, 0.1) !important;
    box-shadow: none !important;
  }

  .ec-app-topbar--compact[class*='--brand-'] .ec-app-topbar__title,
  .ec-app-topbar--compact[class*='--brand-'] .ec-app-topbar__nav-btn,
  .ec-app-topbar--compact[class*='--brand-'] .ec-app-topbar__menu-btn,
  .ec-app-topbar--compact[class*='--brand-'] .ec-app-topbar__burger-bar {
    color: #0f172a !important;
    background: transparent !important;
  }

  .ec-app-topbar--compact[class*='--brand-'] .ec-app-topbar__burger-bar {
    background: #0f172a !important;
  }

}

html.ch-native-app body,
html.ch-native-app body.ipd-m-active,
html.ch-native-app body[data-ch-tone] {
  --ch-phone-chrome-top: #ffffff !important;
  --ch-phone-accent: #2563eb !important;
}

html.ch-native-app body.ec-b2b-theme.ec-sidebar-layout
  .ec-app-topbar.ec-app-topbar--compact[class*='--brand-'],
html.ch-native-app body.ch-no-sidebar.ec-b2b-theme.ec-sidebar-layout
  .ec-app-topbar.ec-app-topbar--compact[class*='--brand-'],
html.ch-native-app body:has([class*='-m-hero']) .ec-app-topbar--compact[class*='--brand-'],
html.ch-native-app body[class*='-m-active'] .ec-app-topbar--compact[class*='--brand-'],
html.ch-native-app body[class*='mod-m-theme-'] .ec-app-topbar.ec-app-topbar--compact,
html.ch-native-app .ec-app-topbar--compact[class*='ec-app-topbar--brand'] {
  background: #fff !important;
  color: #0f172a !important;
  border-bottom: 1px solid rgba(30, 58, 95, 0.1) !important;
  box-shadow: none !important;
}

html.ch-native-app .ec-app-topbar--compact[class*='--brand-'] .ec-app-topbar__title,
html.ch-native-app .ec-app-topbar--compact[class*='--brand-'] .ec-app-topbar__nav-btn,
html.ch-native-app .ec-app-topbar--compact[class*='--brand-'] .ec-app-topbar__menu-btn,
html.ch-native-app .ec-app-topbar--compact[class*='--brand-'] .ec-app-topbar__burger-bar {
  color: #0f172a !important;
  background: transparent !important;
}

html.ch-native-app .ec-app-topbar--compact[class*='--brand-'] .ec-app-topbar__burger-bar {
  background: #0f172a !important;
}

html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .btn-primary,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) .rad-shot-btn--primary,
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) [class*='shot-btn--primary'],
html.ch-native-app :is([class*='-mobile-app'], .mod-m-app) [class*='-btn--primary'] {
  background: #2563eb !important;
  color: #fff !important;
  border-color: #2563eb !important;
}

/*
 * Care profile drawer + login sheet sit under nav.care-tabs (z-index 1180).
 * Phone / native only — desktop Care is a side drawer and a centered modal.
 */
@media (max-width: 767px) {
  .care-drawer,
  .care-auth-sheet {
    z-index: 1220 !important;
  }

  .care.care--phone.care--menu-open nav.care-tabs,
  body.care-auth-open nav.care-tabs {
    display: none !important;
  }
}

html.ch-native-app .care-drawer,
html.ch-native-app .care-auth-sheet,
body.care-phone-shell .care-auth-sheet {
  z-index: 1220 !important;
}

html.ch-native-app .care.care--phone.care--menu-open .care-tabs,
html.ch-native-app body.care-auth-open nav.care-tabs,
html.ch-native-app body.care-auth-open .care.care--phone .care-tabs,
body.care-phone-shell.care-auth-open nav.care-tabs {
  display: none !important;
}

/**
 * One-app phone skin — Flutter Care Staff.
 * Same canvas, cards, chips, fields, and primary actions in every module.
 * Color / radius / type only. Never display, flex, grid, or header offset.
 * Desktop ≥768 is unchanged. Login gradient and staff-home greeting stay.
 */

@media (max-width: 767px) {
  html.ch-native-app,
  html.ch-native-app body,
  html.ch-native-app body.ch-no-sidebar {
    --staff-phone-gutter: 12px;
    --staff-phone-section: 12px;
    --staff-phone-card-pad: 10px;
    --staff-phone-tap: 40px;
    --staff-phone-radius: 14px;
    --staff-phone-field: #eef2f6;
    --opd-m-pad-x: 12px;
    --pharm-m-pad-x: 12px;
    --lab-m-pad-x: 12px;
    --rad-m-pad-x: 12px;
    --pat-m-pad-x: 12px;
    --ipd-m-pad-x: 12px;
    --mod-m-pad-x: 12px;
    --ec-platform-btn-radius: 14px;
    --ch-mobile-radius: 14px;
    --ch-mobile-radius-lg: 14px;
  }

  html.ch-native-app body.ec-b2b-theme.ec-sidebar-layout .ec-app-content,
  html.ch-native-app body.ch-no-sidebar.ec-b2b-theme.ec-sidebar-layout .ec-app-content {
    background-image: none !important;
  }

  html.ch-native-app body.ec-b2b-theme.ec-sidebar-layout .ec-app-content:has([class*='-mobile-app']),
  html.ch-native-app body.ec-b2b-theme.ec-sidebar-layout .ec-app-content:has([data-branded-module-app]),
  html.ch-native-app body.ec-b2b-theme.ec-sidebar-layout .ec-app-content:has(.care) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html.ch-native-app .staff-home__lede {
    display: block;
  }
}

/* —— Shared surfaces: white card, paper canvas, Care ink —— */
@media (max-width: 767px) {
  :is(
    .opd-mobile-app,
    .pharm-mobile-app,
    .lab-mobile-app,
    .rad-mobile-app,
    .pat-mobile-app,
    .ipd-mobile-app,
    .rehab-mobile-app,
    .bb-mobile-app,
    .mod-m-app
  )
    :is(
      .opd-m-card,
      .rad-m-card,
      .pat-m-card,
      .mod-m-hub__tile,
      .careos-kpi,
      .module-kpi,
      .ec-kpi-card,
      .rad-shot-kpi,
      .pharm-shot-kpi,
      .lab-shot-kpi,
      .opd-shot-kpi,
      .ipd-shot-kpi,
      .bb-kpi,
      .hr-kpi,
      .er-kpi,
      .ot-kpi,
      .amb-kpi,
      .er-card,
      .amb-trip-card,
      .pref-hub-card,
      .hospital-shot__hub,
      .hr-phone-row,
      .rehab-phone-row,
      .bb-life-row,
      .ehr-phone__row
    ) {
    background-color: #ffffff;
    border-radius: 14px;
    color: #0f172a;
    box-shadow: 0 4px 12px rgba(0, 18, 36, 0.04);
  }

  :is(
    .opd-mobile-app,
    .pharm-mobile-app,
    .lab-mobile-app,
    .rad-mobile-app,
    .pat-mobile-app,
    .ipd-mobile-app,
    .rehab-mobile-app,
    .bb-mobile-app,
    .mod-m-app
  )
    :is(
      .careos-kpi__value,
      .module-kpi__value,
      .rad-shot-kpi__value,
      .ec-kpi-card__value,
      .mod-m-hub__label,
      .mod-m-hub__title
    ) {
    color: #0f172a;
    font-weight: 800;
  }

  :is(
    .opd-mobile-app,
    .pharm-mobile-app,
    .lab-mobile-app,
    .rad-mobile-app,
    .pat-mobile-app,
    .ipd-mobile-app,
    .rehab-mobile-app,
    .bb-mobile-app,
    .mod-m-app
  )
    :is(
      .careos-kpi__meta,
      .rad-shot-kpi__meta,
      .ec-kpi-card__meta,
      .mod-m-hub__lede,
      .mod-m-hero__brand,
      .mod-m-hero__lede
    ) {
    color: #64748b;
  }

  .mod-m-hub__glyph {
    background: #eff6ff;
    color: #2563eb;
    box-shadow: none;
    border-radius: 12px;
  }

  /* In-page heroes — paper, not a second colored app. */
  :is(
    .mod-m-hero,
    .rad-m-hero,
    .pat-m-hero,
    .pharm-m-hero,
    .lab-m-hero,
    .ipd-m-hero,
    .rehab-m-hero,
    .bb-m-hero,
    .opd-m-doctor-hero,
    .opd-m-doctor-hero__card,
    .opd-m-doctor-hero__bg
  ) {
    background-color: #f8fafc;
    background-image: none;
    color: #0f172a;
    box-shadow: none;
  }

  :is(
    .mod-m-hero__title,
    .rad-m-hero__title,
    .pat-m-hero__title,
    .pharm-m-hero__title,
    .lab-m-hero__title,
    .ipd-m-hero__title,
    .rehab-m-hero__title,
    .bb-m-hero__title,
    .opd-m-doctor-hero__doctor-name,
    .opd-m-doctor-hero__doctor-name-btn
  ) {
    color: #0f172a;
    font-weight: 800;
  }

  :is(
    .mod-m-hero__lede,
    .rad-m-hero__lede,
    .pat-m-hero__lede,
    .pharm-m-hero__lede,
    .lab-m-hero__lede,
    .ipd-m-hero__lede,
    .rehab-m-hero__lede,
    .bb-m-hero__lede,
    .opd-m-doctor-hero__eyebrow,
    .opd-m-doctor-hero__summary
  ) {
    color: #64748b;
  }

  /* Chips — same pill in every module. Status / ABO chips are not listed. */
  :is(
    .staff-phone-chip,
    .opd-m-chip,
    .opd-date-filter__chip,
    .rad-m-chip,
    .lab-shot-pill,
    .pharm-shot-tabs__btn,
    .clinic-shot-tabs__btn,
    .bill-toolbar__chip,
    .bill-seg__btn,
    .ipd-my-work__queue
  ) {
    background: #eef2f6;
    color: #0f172a;
    border: 0;
    border-radius: 999px;
    font-weight: 600;
  }

  :is(
    .staff-phone-chip.is-active,
    .opd-m-chip.is-active,
    .opd-date-filter__chip.is-active,
    .rad-m-chip.is-active,
    .lab-shot-pill.is-active,
    .pharm-shot-tabs__btn.is-active,
    .clinic-shot-tabs__btn.is-active,
    .bill-toolbar__chip.is-active,
    .bill-seg__btn.is-active,
    .ipd-my-work__queue.is-active
  ) {
    background: #eff6ff;
    color: #1e3a5f;
  }

  /* Fields — Flutter filled control. */
  :is(
    .opd-mobile-app,
    .pharm-mobile-app,
    .lab-mobile-app,
    .rad-mobile-app,
    .pat-mobile-app,
    .ipd-mobile-app,
    .rehab-mobile-app,
    .bb-mobile-app,
    .mod-m-app
  )
    :is(input, select, textarea):not([type='checkbox']):not([type='radio']):not([type='range']):not(
      [type='hidden']
    ):not([type='file']):not([type='color']) {
    background: #eef2f6;
    border: 0;
    border-radius: 14px;
    box-shadow: none;
    min-height: 48px;
    font-size: 16px;
    color: #0f172a;
  }

  :is(
    .opd-mobile-app,
    .pharm-mobile-app,
    .lab-mobile-app,
    .rad-mobile-app,
    .pat-mobile-app,
    .ipd-mobile-app,
    .rehab-mobile-app,
    .bb-mobile-app,
    .mod-m-app
  )
    textarea {
    min-height: 96px;
  }

  /* Primary actions only — never every .btn */
  :is(
    .opd-mobile-app,
    .pharm-mobile-app,
    .lab-mobile-app,
    .rad-mobile-app,
    .pat-mobile-app,
    .ipd-mobile-app,
    .rehab-mobile-app,
    .bb-mobile-app,
    .mod-m-app
  )
    :is(
      .btn-primary,
      .ec-btn-primary,
      .rad-shot-btn--primary,
      .pharm-shot-btn--primary,
      .lab-shot-btn--primary,
      .opd-m-btn--primary,
      .pat-shot-btn--primary,
      .pat-m-btn--primary,
      .ipd-shot-btn--primary,
      .hr-btn--primary,
      .er-btn--primary,
      .amb-btn--primary,
      .bb-btn--primary,
      .inv-shot-btn--primary,
      .users-shot-btn--primary,
      .dl-btn--primary,
      .pref-btn--primary,
      button[type='submit']
    ) {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
    border-radius: 14px;
    min-height: 48px;
    font-weight: 700;
    box-shadow: none;
  }

  :is(
    .opd-mobile-app,
    .pharm-mobile-app,
    .lab-mobile-app,
    .rad-mobile-app,
    .pat-mobile-app,
    .ipd-mobile-app,
    .rehab-mobile-app,
    .bb-mobile-app,
    .mod-m-app
  )
    :is(
      .btn-secondary,
      .btn-default,
      .rad-shot-btn--ghost,
      .pharm-shot-btn--ghost,
      .lab-shot-btn--ghost,
      .opd-m-btn--ghost,
      .hr-btn--ghost,
      .er-btn--ghost
    ) {
    background: #fff;
    color: #1e3a5f;
    border: 1.4px solid #2563eb;
    border-radius: 14px;
    min-height: 48px;
    font-weight: 700;
    box-shadow: none;
  }

  /* Staff home tiles — same white card as module hubs, not colored pills. */
  .staff-home__tile,
  .staff-home__tile[class*='staff-home__tile--'] {
    --tile-surface: #ffffff;
    --tile-border: rgba(30, 58, 95, 0.1);
    --tile-ink: #0f172a;
    --tile-icon-fg: #2563eb;
    --tile-icon-grad: #eff6ff;
    --tile-icon-glow: transparent;
    background: #ffffff;
    border: 1px solid rgba(30, 58, 95, 0.1);
    border-radius: 14px;
    color: #0f172a;
    box-shadow: 0 4px 12px rgba(0, 18, 36, 0.04);
  }

  .staff-home__tile-icon {
    background: #eff6ff;
    color: #2563eb;
    box-shadow: none;
  }

  .care.care--phone :is(.care-doc, .care-center, .care-door, .care-search-hit) {
    background-color: #ffffff;
    border-radius: 14px;
    color: #0f172a;
    box-shadow: 0 4px 12px rgba(0, 18, 36, 0.04);
  }
}

html.ch-native-app {
  --staff-phone-gutter: 12px;
  --staff-phone-field: #eef2f6;
  --pharm-m-pad-x: 12px;
  --lab-m-pad-x: 12px;
  --rad-m-pad-x: 12px;
  --pat-m-pad-x: 12px;
  --ipd-m-pad-x: 12px;
  --mod-m-pad-x: 12px;
  --ec-platform-btn-radius: 14px;
}

html.ch-native-app .opd-mobile-app {
  --opd-m-pad-x: 0px;
}

html.ch-native-app .ipd-mobile-app {
  --ipd-m-pad-x: 0px;
}

html.ch-native-app .staff-home__lede {
  display: block;
}

/* Native app uses the same skin at any width (iPhone is always native). */
html.ch-native-app :is(
    .opd-mobile-app,
    .pharm-mobile-app,
    .lab-mobile-app,
    .rad-mobile-app,
    .pat-mobile-app,
    .ipd-mobile-app,
    .rehab-mobile-app,
    .bb-mobile-app,
    .mod-m-app
  )
  :is(
    .opd-m-card,
    .rad-m-card,
    .pat-m-card,
    .mod-m-hub__tile,
    .careos-kpi,
    .module-kpi,
    .ec-kpi-card,
    .rad-shot-kpi,
    .pharm-shot-kpi,
    .lab-shot-kpi,
    .opd-shot-kpi,
    .ipd-shot-kpi,
    .bb-kpi,
    .hr-kpi,
    .er-kpi,
    .ot-kpi,
    .amb-kpi,
    .er-card,
    .amb-trip-card,
    .pref-hub-card,
    .hospital-shot__hub,
    .hr-phone-row,
    .rehab-phone-row,
    .bb-life-row,
    .ehr-phone__row
  ) {
  background-color: #ffffff;
  border-radius: 14px;
  color: #0f172a;
  box-shadow: 0 4px 12px rgba(0, 18, 36, 0.04);
}

html.ch-native-app :is(
    .mod-m-hero,
    .rad-m-hero,
    .pat-m-hero,
    .pharm-m-hero,
    .lab-m-hero,
    .ipd-m-hero,
    .rehab-m-hero,
    .bb-m-hero,
    .opd-m-doctor-hero,
    .opd-m-doctor-hero__card,
    .opd-m-doctor-hero__bg
  ) {
  background-color: #f8fafc;
  background-image: none;
  color: #0f172a;
  box-shadow: none;
}

html.ch-native-app :is(
    .mod-m-hero__title,
    .rad-m-hero__title,
    .pat-m-hero__title,
    .pharm-m-hero__title,
    .lab-m-hero__title,
    .ipd-m-hero__title,
    .rehab-m-hero__title,
    .bb-m-hero__title,
    .opd-m-doctor-hero__doctor-name,
    .opd-m-doctor-hero__doctor-name-btn
  ) {
  color: #0f172a;
  font-weight: 800;
}

html.ch-native-app .mod-m-hub__glyph,
html.ch-native-app .staff-home__tile-icon {
  background: #eff6ff;
  color: #2563eb;
  box-shadow: none;
}

html.ch-native-app .staff-home__tile,
html.ch-native-app .staff-home__tile[class*='staff-home__tile--'] {
  --tile-surface: #ffffff;
  --tile-border: rgba(30, 58, 95, 0.1);
  --tile-ink: #0f172a;
  --tile-icon-fg: #2563eb;
  --tile-icon-grad: #eff6ff;
  --tile-icon-glow: transparent;
  background: #ffffff;
  border: 1px solid rgba(30, 58, 95, 0.1);
  border-radius: 14px;
  color: #0f172a;
  box-shadow: 0 4px 12px rgba(0, 18, 36, 0.04);
}

html.ch-native-app :is(
    .opd-mobile-app,
    .pharm-mobile-app,
    .lab-mobile-app,
    .rad-mobile-app,
    .pat-mobile-app,
    .ipd-mobile-app,
    .rehab-mobile-app,
    .bb-mobile-app,
    .mod-m-app
  )
  :is(
    .btn-primary,
    .ec-btn-primary,
    .rad-shot-btn--primary,
    .pharm-shot-btn--primary,
    .lab-shot-btn--primary,
    .opd-m-btn--primary,
    .pat-shot-btn--primary,
    .pat-m-btn--primary,
    .ipd-shot-btn--primary,
    .hr-btn--primary,
    .er-btn--primary,
    .amb-btn--primary,
    .bb-btn--primary,
    button[type='submit']
  ) {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  border-radius: 14px;
  min-height: 48px;
  font-weight: 700;
}

html.ch-native-app .care.care--phone :is(.care-doc, .care-center, .care-door, .care-search-hit) {
  background-color: #ffffff;
  border-radius: 14px;
  color: #0f172a;
  box-shadow: 0 4px 12px rgba(0, 18, 36, 0.04);
}

/* Hide per-module mini-app tabs whenever the staff dock is mounted. */
body.ch-staff-global-nav nav.module-bottom-nav,
body.ch-staff-global-nav nav.opd-bottom-nav,
body.ch-staff-global-nav nav.ipd-bottom-nav,
body.ch-staff-global-nav .rehab-dock,
body.ch-staff-global-nav .mod-float-dock,
body.ch-staff-global-nav .mod-m-pill-dock {
  display: none !important;
}

/* Dock inset — phone web + native only. Tablet/desktop web keeps its own padding. */
@media (max-width: 767px) {
  body.ch-staff-global-nav .ec-app-content {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  .staff-home__menu-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 16px;
    text-decoration: none;
    font-weight: 700;
    color: #fff;
    background: #2563eb;
    border: 0;
    border-radius: 14px;
  }
}

html.ch-native-app body.ch-staff-global-nav .ec-app-content {
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

html.ch-native-app .staff-home__menu-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 16px;
  text-decoration: none;
  font-weight: 700;
  color: #fff;
  background: #2563eb;
  border: 0;
  border-radius: 14px;
}

.ch-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

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

.ch-theme-toggle--inverted {
  color: #fff;
}

.ch-theme-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.care.care--phone .care-top__tools .ch-theme-toggle {
  width: 44px;
  height: 44px;
}

.care-drawer__theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--care-line, #e2e8f0);
}

.care-drawer__theme span {
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--care-ink, #0c1a2e);
}

.pp-top__actions .ch-theme-toggle {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.pp.pp--phone .pp-top__actions .ch-theme-toggle {
  color: #fff;
}