/* Mobile card styling and responsive doctor carousel. */
html.home-page #doctor-section .doctor-mobile-only,
html.home-page #doctor-section .doctor-carousel-dots { display: none; }
html.home-page #doctor-section .doctor-distance[hidden] { display: none; }
@media (min-width: 768px) {
  html.home-page body.cosmic #doctor-section .doctor-showcase-grid {
    display: flex; width: 100%; max-width: 100%; gap: 22px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain;
    scrollbar-width: none; align-items: stretch; padding-block: 6px 12px;
  }
  html.home-page body.cosmic #doctor-section .doctor-showcase-grid::-webkit-scrollbar { display: none; }
  html.home-page body.cosmic #doctor-section .doctor-showcase-card {
    flex: 0 0 calc((100% - 66px) / 4); width: calc((100% - 66px) / 4);
    min-width: 0; height: auto; scroll-snap-align: start;
  }
  html.home-page body.cosmic #doctor-section .doctor-carousel-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
  html.home-page body.cosmic #doctor-section .doctor-carousel-controls button { min-height: 40px; padding: 6px 12px; background: #071925; color: #f5d67c; border: 1px solid #275365; border-radius: 8px; font-size: 12px; cursor: pointer; }
  html.home-page body.cosmic #doctor-section #doctor-nearby-status { font-size: 12px; color: #a8bbc8; }
  html.home-page body.cosmic #doctor-section .doctor-distance:not([hidden]) { display: inline; font-size: 12px; color: #8edbd3; }
  html.home-page body.cosmic #doctor-section .doctor-carousel-dots:not([hidden]) { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin-top: 4px; }
  html.home-page body.cosmic #doctor-section .doctor-carousel-dots button { flex: 0 0 32px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; }
  html.home-page body.cosmic #doctor-section .doctor-carousel-dots button::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #48606f; }
  html.home-page body.cosmic #doctor-section .doctor-carousel-dots button[aria-current="true"]::before { width: 19px; border-radius: 8px; background: #f5c451; }
  html.home-page body.cosmic #doctor-section :is(a,button,[tabindex]):focus-visible { outline: 2px solid #f5d67c; outline-offset: -3px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  html.home-page body.cosmic #doctor-section .doctor-showcase-card { flex-basis: calc((100% - 22px) / 2); width: calc((100% - 22px) / 2); }
}

@media (max-width: 767px) {
  html.home-page body.cosmic #doctor-section .doctor-carousel-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
  html.home-page body.cosmic #doctor-section .doctor-carousel-controls button { min-height: 40px; padding: 6px 10px; background: #071925; color: #f5d67c; border: 1px solid #275365; border-radius: 8px; font-size: 12px; }
  html.home-page body.cosmic #doctor-section #doctor-nearby-status { flex-basis: 100%; font-size: 11px; color: #a8bbc8; }
  html.home-page body.cosmic #doctor-section .doctor-distance:not([hidden]) { display: inline; font-size: 11px; color: #8edbd3; }
  html.home-page body.cosmic #doctor-section .doctor-distance[hidden] { display: none; }
  html.home-page body.cosmic #doctor-section > div:first-child { align-items: center; gap: 8px; }
  html.home-page body.cosmic #doctor-section .section-title {
    min-width: 0; font-size: clamp(24px, 6.5vw, 28px); line-height: 1.15;
    max-width: calc(100% - 94px); text-wrap: balance;
  }
  html.home-page body.cosmic #doctor-section > div:first-child > a {
    flex: 0 0 auto; min-height: 40px; padding: 0 12px; border-radius: 999px;
    border: 1px solid #c6a44c; background: #071925; color: #f5d67c;
    font-size: 12px !important; gap: 5px;
  }
  html.home-page body.cosmic #doctor-section > div:first-child > a::after { content: '→'; }
  html.home-page body.cosmic #doctor-section .doctor-showcase-grid {
    display: flex; width: 100%; max-width: 100%; gap: 12px; margin-top: 14px;
    padding: 3px 0 8px; overflow-x: auto; scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain; scrollbar-width: none; align-items: stretch;
  }
  html.home-page body.cosmic #doctor-section .doctor-showcase-grid::-webkit-scrollbar { display: none; }
  html.home-page body.cosmic #doctor-section .doctor-showcase-card {
    flex: 0 0 64%; width: 64%; min-width: 232px; max-width: 315px;
    min-height: 0; height: auto; padding: 8px; border-radius: 12px; gap: 4px;
    scroll-snap-align: start; border: 1px solid rgba(79,167,190,.35);
    background: linear-gradient(180deg, #091f30, #051623);
    box-shadow: inset 0 1px 0 rgba(242,190,77,.09); transform: none;
  }
  html.home-page body.cosmic #doctor-section .doctor-showcase-card::before { display: none; }
  html.home-page body.cosmic #doctor-section .doctor-mobile-only { display: inline; }
  html.home-page body.cosmic #doctor-section .doctor-desktop-only,
  html.home-page body.cosmic #doctor-section .doctor-bookmark,
  html.home-page body.cosmic #doctor-section .doctor-ribbon,
  html.home-page body.cosmic #doctor-section .doctor-rating-copy,
  html.home-page body.cosmic #doctor-section .doctor-metric-row { display: none; }
  html.home-page body.cosmic #doctor-section .doctor-card-top { display: flex; }
  html.home-page body.cosmic #doctor-section .doctor-profile-pill { min-height: 22px; padding: 0 7px; font-size: 10px; }
  html.home-page body.cosmic #doctor-section .doctor-avatar-wrap {
    flex: 0 0 auto; width: 66px; height: 66px; margin: 0; padding: 2px;
    box-shadow: none; background: #d5b255; border-radius: 50%;
  }
  html.home-page body.cosmic #doctor-section .doctor-avatar { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  html.home-page body.cosmic #doctor-section .doctor-online-dot { width: 14px; height: 14px; right: 4px; bottom: 7px; box-shadow: none; }
  html.home-page body.cosmic #doctor-section .doctor-mobile-rating { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #b2c3d0; font-size: 11px; }
  html.home-page body.cosmic #doctor-section .doctor-mobile-stars { position: relative; display: inline-block; color: #51616b; font: 18px/1.1 Arial, sans-serif; letter-spacing: 1px; }
  html.home-page body.cosmic #doctor-section .doctor-mobile-stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: #f5c451; }
  html.home-page body.cosmic #doctor-section .doctor-name,
  html.home-page body.cosmic #doctor-section .doctor-speciality {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; overflow-wrap: anywhere; margin: 0; width: 100%;
  }
  html.home-page body.cosmic #doctor-section .doctor-name { font-size: 16px; line-height: 1.25; min-height: 0; }
  html.home-page body.cosmic #doctor-section .doctor-speciality { font-size: 12px; line-height: 1.3; min-height: 0; color: #b2c3d0; }
  html.home-page body.cosmic #doctor-section .doctor-info-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0; }
  html.home-page body.cosmic #doctor-section .doctor-info-box { min-width: 0; min-height: 50px; padding: 2px; gap: 1px; flex-direction: column; align-items: center; text-align: center; border-radius: 8px; }
  html.home-page body.cosmic #doctor-section .doctor-info-icon { width: 18px; height: 18px; flex: 0 0 18px; font-size: 17px; }
  html.home-page body.cosmic #doctor-section .doctor-info-text { font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
  html.home-page body.cosmic #doctor-section .doctor-verify-chip { display: inline-flex; margin: 0; min-height: 24px; padding: 2px 6px; font-size: 11px; gap: 4px; }
  html.home-page body.cosmic #doctor-section .doctor-verify-chip:has(.pending) { color: #f5ce79; }
  html.home-page body.cosmic #doctor-section .doctor-card-qualification { font-size: 12px; color: #c8d7e1; overflow-wrap: anywhere; }
  html.home-page body.cosmic #doctor-section .doctor-public-details { display: block; width: 100%; text-align: left; font-size: 12px; border: 1px solid #275365; border-radius: 8px; }
  html.home-page body.cosmic #doctor-section .doctor-public-details summary { min-height: 36px; padding: 9px; color: #f5d67c; cursor: pointer; }
  html.home-page body.cosmic #doctor-section .doctor-public-details dl { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 7px; padding: 8px; margin: 0; }
  html.home-page body.cosmic #doctor-section .doctor-public-details dt { color: #a8bbc8; }
  html.home-page body.cosmic #doctor-section .doctor-public-details dd { margin: 0; overflow-wrap: anywhere; }
  html.home-page body.cosmic #doctor-section .doctor-public-details p { padding: 8px; overflow-wrap: anywhere; }
  html.home-page body.cosmic #doctor-section .doctor-public-details > a { display: block; padding: 10px; color: #f5d67c; }
  html.home-page body.cosmic #doctor-section .doctor-public-details summary:focus-visible { outline: 2px solid #f5d67c; outline-offset: -2px; }
  html.home-page body.cosmic #doctor-section .doctor-mobile-actions { display: grid; width: 100%; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: auto; }
  html.home-page body.cosmic #doctor-section .doctor-mobile-actions a { min-height: 44px; padding: 4px 3px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px; border: 1px solid #275365; border-radius: 8px; color: #e5edf3; font-size: 12px; background: #092333; }
  html.home-page body.cosmic #doctor-section .doctor-mobile-actions a:only-child { grid-column: 1/-1; }
  html.home-page body.cosmic #doctor-section .doctor-mobile-actions a > span:first-child { font-size: 19px; color: #f5d67c; }
  html.home-page body.cosmic #doctor-section .doctor-profile-cta { width: 100%; min-height: 44px; margin: 0; padding: 5px; border-radius: 8px; font-size: 13px; }
  html.home-page body.cosmic #doctor-section .doctor-carousel-dots:not([hidden]) { display: flex; justify-content: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; gap: 0; margin-top: 2px; }
  html.home-page body.cosmic #doctor-section .doctor-carousel-dots button { flex: 0 0 32px; width: 32px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; }
  html.home-page body.cosmic #doctor-section .doctor-carousel-dots button::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #48606f; }
  html.home-page body.cosmic #doctor-section .doctor-carousel-dots button[aria-current="true"]::before { width: 19px; border-radius: 8px; background: #f5c451; }
  html.home-page body.cosmic #doctor-section :is(a,button,[tabindex]):focus-visible { outline: 2px solid #f5d67c; outline-offset: -3px; }
  html.home-page body.cosmic #doctor-section .doctor-empty-state { width: 100%; padding: 18px; border: 1px solid #275365; border-radius: 14px; background: #091f30; }
}
@media (max-width: 360px) {
  html.home-page body.cosmic #doctor-section .section-title { font-size: 24px; }
  html.home-page body.cosmic #doctor-section .doctor-showcase-card { flex-basis: calc(88vw - 20px); width: calc(88vw - 20px); min-width: 0; }
}