/* ==========================================================================
   Doctor profile — ported from the supplied doctor-profile template.

   Scoped to .care-doctor-profile, and the template's :root palette with it:
   this sheet loads on a page that already has a header, a footer and the site
   stylesheet, and the template's names (.container, .tabs, .chip, .timeline)
   collide with several of those. html[data-theme] became [data-bs-theme], and
   .container became .profile-container.

   The header, footer, theme toggle and back-to-top the template also shipped
   are dropped — the site's own chrome renders those.
   ========================================================================== */

.care-doctor-profile {
      color-scheme:light;

      --green-950:#033a2d;
      --green-900:#075b45;
      --green-850:#06684e;
      --green-800:#08755a;
      --green-700:#0a8a68;
      --green-600:#16a27c;
      --green-100:#dff4eb;
      --green-50:#f1faf6;

      --blue-900:#143e63;
      --blue-800:#1c527b;
      --blue-100:#e8f2f8;

      --gold:#c59b3b;
      --gold-soft:#f6ead0;
      --red:#b84e4e;

      --page:#f4f9f7;
      --page-soft:#edf6f2;
      --surface:rgba(255,255,255,.95);
      --surface-solid:#fff;
      --surface-muted:#f7fbf9;
      --surface-tint:#edf7f3;

      --heading:#0b3d31;
      --ink:#173d32;
      --muted:#687d76;
      --border:rgba(7,91,69,.14);
      --border-strong:rgba(7,91,69,.28);

      --shadow-xl:0 32px 80px rgba(4,65,50,.16);
      --shadow-lg:0 22px 54px rgba(4,65,50,.13);
      --shadow-md:0 14px 34px rgba(4,65,50,.10);
      --shadow-sm:0 8px 22px rgba(4,65,50,.08);

      --radius-xl:32px;
      --radius-lg:24px;
      --radius-md:18px;
      --radius-sm:14px;

      --icon:url("/images/branding/sihatuna-main-website-icon.png");
      --pattern:url("/images/patterns/sihatuna-pure-damascene-pattern.png");
    }
[data-bs-theme="dark"] .care-doctor-profile {
      color-scheme:dark;

      --page:#071a15;
      --page-soft:#09231b;
      --surface:rgba(12,43,34,.95);
      --surface-solid:#0e2e25;
      --surface-muted:#10372c;
      --surface-tint:#0e3027;

      --heading:#f2fbf7;
      --ink:#e5f4ed;
      --muted:#a8bbb4;
      --border:rgba(150,216,188,.14);
      --border-strong:rgba(150,216,188,.29);

      --green-100:#173f34;
      --green-50:#10352b;
      --blue-100:#102d3b;
      --gold-soft:#3f3420;

      --shadow-xl:0 36px 90px rgba(0,0,0,.46);
      --shadow-lg:0 24px 58px rgba(0,0,0,.36);
      --shadow-md:0 16px 36px rgba(0,0,0,.28);
      --shadow-sm:0 9px 24px rgba(0,0,0,.21);
    }
.care-doctor-profile button,
.care-doctor-profile input,
.care-doctor-profile select {font:inherit}
.care-doctor-profile button,
.care-doctor-profile a {-webkit-tap-highlight-color:transparent}
.care-doctor-profile a {color:inherit}
.care-doctor-profile img {display:block;max-width:100%}
.care-doctor-profile svg {display:block}
.care-doctor-profile button {color:inherit}
.care-doctor-profile .profile-container {
      width:min(1180px,calc(100% - 36px));
      margin-inline:auto;
    }
.care-doctor-profile .button {
      min-height:43px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      border-radius:14px;
      text-decoration:none;
      cursor:pointer;
      transition:
        transform .16s ease,
        border-color .16s ease,
        background-color .16s ease,
        box-shadow .16s ease;
    }
.care-doctor-profile .button:hover {transform:translateY(-2px)}
.care-doctor-profile .button {
      min-height:45px;
      padding:10px 18px;
      border:1px solid transparent;
      font-weight:850;
    }
.care-doctor-profile .button-primary {
      color:#fff;
      background:linear-gradient(135deg,var(--green-900),var(--green-700));
      box-shadow:0 13px 28px rgba(7,91,69,.23);
    }
.care-doctor-profile .button-secondary {
      color:#fff;
      background:linear-gradient(135deg,#183d5d,#225d86);
      box-shadow:0 13px 28px rgba(22,63,102,.18);
    }
.care-doctor-profile .button-soft {
      color:var(--green-900);
      border-color:var(--border-strong);
      background:var(--surface);
    }
[data-bs-theme="dark"] .care-doctor-profile .button-soft {color:#b3e7d2}
/* Main profile area */
.care-doctor-profile .profile-section {
      padding:30px 0 86px;
    }
.care-doctor-profile .back-link {
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin-bottom:18px;
      color:var(--green-800);
      font-size:.86rem;
      font-weight:850;
      text-decoration:none;
    }
.care-doctor-profile .back-link svg {
      width:17px;
      height:17px;
      stroke:currentColor;
    }
[dir="ltr"] .care-doctor-profile .back-link svg {transform:scaleX(-1)}
.care-doctor-profile .profile-card {
      position:relative;
      overflow:hidden;
      padding:24px;
      border:1px solid var(--border);
      border-radius:30px;
      background:var(--surface);
      box-shadow:var(--shadow-lg);
    }
.care-doctor-profile .profile-card::before {
      content:"";
      position:absolute;
      inset-inline-start:-90px;
      top:-100px;
      width:260px;
      height:260px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(19,162,124,.13),transparent 69%);
      pointer-events:none;
    }
.care-doctor-profile .profile-grid {
      position:relative;
      display:grid;
      grid-template-columns:auto minmax(0,1fr) minmax(250px,.46fr);
      gap:22px;
      align-items:center;
    }
.care-doctor-profile .doctor-avatar {
      width:126px;
      height:126px;
      display:grid;
      place-items:center;
      border:7px solid rgba(255,255,255,.78);
      border-radius:34px;
      color:#fff;
      background:
        radial-gradient(circle at 32% 25%,rgba(255,255,255,.24),transparent 28%),
        linear-gradient(145deg,var(--green-800),#3b92b8);
      box-shadow:0 20px 44px rgba(6,88,67,.23);
    }
[data-bs-theme="dark"] .care-doctor-profile .doctor-avatar {
      border-color:rgba(255,255,255,.08);
    }
.care-doctor-profile .doctor-avatar svg {
      width:72px;
      height:72px;
      stroke:currentColor;
    }
.care-doctor-profile .doctor-identity {min-width:0}
.care-doctor-profile .verified-badge {
      display:inline-flex;
      align-items:center;
      gap:7px;
      min-height:29px;
      padding:6px 10px;
      border-radius:999px;
      color:#087154;
      background:var(--green-50);
      font-size:.73rem;
      font-weight:900;
    }
[data-bs-theme="dark"] .care-doctor-profile .verified-badge {color:#a3e5c9}
.care-doctor-profile .verified-badge svg {
      width:15px;
      height:15px;
      stroke:currentColor;
    }
.care-doctor-profile .doctor-name {
      margin:10px 0 0;
      color:var(--heading);
      font-size:clamp(1.75rem,3vw,2.45rem);
      line-height:1.08;
    }
.care-doctor-profile .doctor-title {
      margin:8px 0 0;
      color:var(--muted);
      font-size:1rem;
      line-height:1.6;
    }
.care-doctor-profile .doctor-location {
      display:flex;
      align-items:center;
      gap:7px;
      margin-top:12px;
      color:var(--muted);
      font-size:.87rem;
    }
.care-doctor-profile .doctor-location svg {
      width:17px;
      height:17px;
      stroke:currentColor;
    }
.care-doctor-profile .rating-row {
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:8px;
      margin-top:14px;
      color:var(--muted);
      font-size:.82rem;
    }
.care-doctor-profile .rating-stars {
      color:#c6972a;
      letter-spacing:1px;
    }
.care-doctor-profile .profile-stats {
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:18px;
    }
.care-doctor-profile .stat-chip {
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-height:38px;
      padding:8px 11px;
      border:1px solid var(--border);
      border-radius:13px;
      color:var(--muted);
      background:var(--surface-muted);
      font-size:.78rem;
      font-weight:760;
    }
.care-doctor-profile .stat-chip svg {
      width:17px;
      height:17px;
      stroke:var(--green-800);
    }
.care-doctor-profile .booking-summary {
      align-self:stretch;
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:14px;
      padding:19px;
      border:1px solid var(--border);
      border-radius:23px;
      background:
        linear-gradient(145deg,var(--surface-muted),color-mix(in srgb,var(--green-50) 45%,var(--surface-solid)));
    }
.care-doctor-profile .summary-top {
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:12px;
    }
.care-doctor-profile .favorite-share {
      display:flex;
      gap:7px;
    }
/* Sized to sit flush beside the share button. */
.care-doctor-profile .care-fav-heart {
      width:39px;
      height:39px;
      border-radius:13px;
    }
.care-doctor-profile .icon-button {
      width:39px;
      height:39px;
      display:grid;
      place-items:center;
      padding:0;
      border:1px solid var(--border);
      border-radius:13px;
      color:var(--muted);
      background:var(--surface);
      cursor:pointer;
    }
.care-doctor-profile .icon-button:hover {color:var(--green-800)}
.care-doctor-profile .icon-button svg {
      width:18px;
      height:18px;
      stroke:currentColor;
    }
.care-doctor-profile .summary-label {
      color:var(--muted);
      font-size:.75rem;
    }
.care-doctor-profile .summary-fee {
      margin-top:3px;
      color:var(--gold);
      font-size:1.55rem;
      font-weight:950;
    }
.care-doctor-profile .next-slot {
      display:flex;
      align-items:flex-start;
      gap:9px;
      padding:11px;
      border:1px solid var(--border);
      border-radius:15px;
      background:var(--surface);
    }
.care-doctor-profile .next-slot svg {
      width:19px;
      height:19px;
      flex:0 0 19px;
      stroke:var(--green-800);
    }
.care-doctor-profile .next-slot strong {
      display:block;
      color:var(--heading);
      font-size:.85rem;
    }
.care-doctor-profile .next-slot span {
      display:block;
      margin-top:4px;
      color:var(--muted);
      font-size:.76rem;
    }
.care-doctor-profile .booking-summary .button {
      width:100%;
      min-height:50px;
    }
/* Tabs */
.care-doctor-profile .tabs-shell {
      position:sticky;
      top:88px;
      z-index:55;
      margin-top:18px;
      padding:7px;
      border:1px solid var(--border);
      border-radius:22px;
      background:color-mix(in srgb,var(--surface) 95%,transparent);
      box-shadow:var(--shadow-md);
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
    }
.care-doctor-profile .tabs {
      display:flex;
      gap:4px;
      overflow-x:auto;
      overscroll-behavior-inline:contain;
      scrollbar-width:none;
    }
.care-doctor-profile .tabs::-webkit-scrollbar {display:none}
.care-doctor-profile .tab-button {
      flex:0 0 auto;
      min-height:45px;
      padding:10px 15px;
      border:0;
      border-radius:15px;
      color:var(--muted);
      background:transparent;
      font-size:.82rem;
      font-weight:850;
      white-space:nowrap;
      cursor:pointer;
    }
.care-doctor-profile .tab-button:hover {
      color:var(--green-800);
      background:var(--surface-muted);
    }
.care-doctor-profile .tab-button.is-active {
      color:#fff;
      background:linear-gradient(135deg,var(--green-900),var(--green-700));
      box-shadow:0 10px 22px rgba(7,91,69,.20);
    }
.care-doctor-profile .tab-panels {
      margin-top:18px;
    }
.care-doctor-profile .tab-panel {
      display:none;
      animation:panel-in .18s ease;
    }
.care-doctor-profile .tab-panel.is-active {display:block}
@keyframes panel-in {
      from{opacity:.35;transform:translateY(6px)}
      to{opacity:1;transform:none}
    }
.care-doctor-profile .content-card {
      padding:25px;
      border:1px solid var(--border);
      border-radius:27px;
      background:var(--surface);
      box-shadow:var(--shadow-md);
    }
.care-doctor-profile .content-card + .content-card {margin-top:16px}
.care-doctor-profile .content-heading {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      margin-bottom:19px;
      padding-bottom:16px;
      border-bottom:1px solid var(--border);
    }
.care-doctor-profile .content-heading h2 {
      margin:0;
      color:var(--heading);
      font-size:1.18rem;
    }
.care-doctor-profile .content-heading p {
      margin:5px 0 0;
      color:var(--muted);
      font-size:.80rem;
    }
.care-doctor-profile .content-icon {
      width:44px;
      height:44px;
      display:grid;
      place-items:center;
      flex:0 0 44px;
      border-radius:14px;
      color:var(--green-800);
      background:var(--green-50);
    }
.care-doctor-profile .content-icon svg {
      width:22px;
      height:22px;
      stroke:currentColor;
    }
.care-doctor-profile .about-grid {
      display:grid;
      grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);
      gap:22px;
    }
.care-doctor-profile .about-copy {
      color:var(--muted);
      line-height:1.9;
    }
.care-doctor-profile .about-copy p {margin:0 0 13px}
.care-doctor-profile .detail-list {
      display:grid;
      gap:10px;
    }
.care-doctor-profile .detail-row {
      display:grid;
      grid-template-columns:40px minmax(0,1fr);
      gap:11px;
      align-items:start;
      padding:12px;
      border:1px solid var(--border);
      border-radius:15px;
      background:var(--surface-muted);
    }
.care-doctor-profile .detail-row svg {
      width:20px;
      height:20px;
      margin-top:2px;
      stroke:var(--green-800);
    }
.care-doctor-profile .detail-row small {
      display:block;
      color:var(--muted);
      font-size:.72rem;
    }
.care-doctor-profile .detail-row strong {
      display:block;
      margin-top:3px;
      color:var(--heading);
      font-size:.86rem;
    }
.care-doctor-profile .chips {
      display:flex;
      flex-wrap:wrap;
      gap:9px;
    }
.care-doctor-profile .chip {
      display:inline-flex;
      align-items:center;
      gap:7px;
      min-height:36px;
      padding:8px 11px;
      border:1px solid var(--border);
      border-radius:999px;
      color:var(--green-800);
      background:var(--green-50);
      font-size:.78rem;
      font-weight:850;
    }
[data-bs-theme="dark"] .care-doctor-profile .chip {color:#abe4ce}
.care-doctor-profile .clinic-grid {
      display:grid;
      gap:16px;
    }
.care-doctor-profile .clinic-card {
      display:grid;
      grid-template-columns:minmax(0,1fr) 310px;
      overflow:hidden;
      border:1px solid var(--border);
      border-radius:22px;
      background:var(--surface-muted);
    }
.care-doctor-profile .clinic-details {
      padding:20px;
    }
.care-doctor-profile .clinic-name {
      margin:0;
      color:var(--heading);
      font-size:1.03rem;
    }
.care-doctor-profile .clinic-price {
      margin-top:7px;
      color:var(--gold);
      font-size:.93rem;
      font-weight:900;
    }
.care-doctor-profile .clinic-meta {
      display:grid;
      gap:8px;
      margin-top:14px;
      color:var(--muted);
      font-size:.82rem;
    }
.care-doctor-profile .clinic-meta span {
      display:flex;
      align-items:flex-start;
      gap:8px;
    }
.care-doctor-profile .clinic-meta svg {
      width:17px;
      height:17px;
      flex:0 0 17px;
      stroke:currentColor;
    }
.care-doctor-profile .clinic-actions {
      display:flex;
      flex-wrap:wrap;
      gap:9px;
      margin-top:16px;
    }
.care-doctor-profile .small-button {
      min-height:40px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:7px;
      padding:9px 13px;
      border:1px solid var(--border-strong);
      border-radius:13px;
      color:var(--green-900);
      background:var(--surface);
      font-size:.78rem;
      font-weight:900;
      text-decoration:none;
    }
[data-bs-theme="dark"] .care-doctor-profile .small-button {color:#afe6d0}
.care-doctor-profile .small-button.primary {
      color:#fff;
      border-color:transparent;
      background:linear-gradient(135deg,var(--green-900),var(--green-700));
    }
.care-doctor-profile .small-button svg {
      width:16px;
      height:16px;
      stroke:currentColor;
    }
.care-doctor-profile .map-card {
      position:relative;
      min-height:230px;
      overflow:hidden;
      border-inline-start:1px solid var(--border);
      background:
        linear-gradient(135deg,rgba(223,243,235,.72),rgba(220,237,246,.86));
    }
[data-bs-theme="dark"] .care-doctor-profile .map-card {
      background:linear-gradient(135deg,rgba(16,62,49,.85),rgba(15,52,65,.82));
    }
.care-doctor-profile .map-card::before {
      content:"";
      position:absolute;
      inset:0;
      opacity:.18;
      background-image:
        linear-gradient(90deg,transparent 48%,rgba(7,91,69,.18) 49%,rgba(7,91,69,.18) 51%,transparent 52%),
        linear-gradient(0deg,transparent 48%,rgba(7,91,69,.18) 49%,rgba(7,91,69,.18) 51%,transparent 52%);
      background-size:58px 58px;
    }
.care-doctor-profile .map-pin {
      position:absolute;
      inset:50% auto auto 50%;
      width:56px;
      height:56px;
      display:grid;
      place-items:center;
      border:5px solid rgba(255,255,255,.76);
      border-radius:50% 50% 50% 15px;
      color:#fff;
      background:var(--green-800);
      box-shadow:0 16px 36px rgba(5,92,71,.24);
      transform:translate(-50%,-60%) rotate(-45deg);
    }
.care-doctor-profile .map-pin svg {
      width:23px;
      height:23px;
      stroke:currentColor;
      transform:rotate(45deg);
    }
.care-doctor-profile .center-card {
      display:grid;
      grid-template-columns:72px minmax(0,1fr) auto;
      gap:16px;
      align-items:center;
      padding:18px;
      border:1px solid var(--border);
      border-radius:20px;
      background:var(--surface-muted);
    }
.care-doctor-profile .center-icon {
      width:72px;
      height:72px;
      display:grid;
      place-items:center;
      border-radius:22px;
      color:#fff;
      background:linear-gradient(145deg,var(--green-800),#3d94bb);
    }
.care-doctor-profile .center-icon svg {
      width:38px;
      height:38px;
      stroke:currentColor;
    }
.care-doctor-profile .center-card h3 {
      margin:0;
      color:var(--heading);
      font-size:.98rem;
    }
.care-doctor-profile .center-card p {
      margin:6px 0 0;
      color:var(--muted);
      font-size:.80rem;
      line-height:1.55;
    }
.care-doctor-profile .center-card + .center-card {margin-top:12px}
.care-doctor-profile .service-list {
      display:grid;
      gap:11px;
    }
/* The doctor's sentence about the visit, under the service name. */
.care-doctor-profile .service-note {
      display:block;
      margin-top:4px;
      color:var(--muted);
      font-size:.78rem;
      line-height:1.55;
    }
.care-doctor-profile .service-row {
      display:grid;
      grid-template-columns:44px minmax(0,1fr) auto;
      gap:13px;
      align-items:center;
      padding:13px;
      border:1px solid var(--border);
      border-radius:17px;
      background:var(--surface-muted);
    }
.care-doctor-profile .service-icon {
      width:44px;
      height:44px;
      display:grid;
      place-items:center;
      border-radius:14px;
      color:var(--green-800);
      background:var(--green-50);
    }
.care-doctor-profile .service-icon svg {
      width:22px;
      height:22px;
      stroke:currentColor;
    }
.care-doctor-profile .service-row strong {
      display:block;
      color:var(--heading);
      font-size:.88rem;
    }
.care-doctor-profile .service-row span {
      display:block;
      margin-top:4px;
      color:var(--muted);
      font-size:.74rem;
    }
.care-doctor-profile .service-price {
      color:var(--gold);
      font-size:.94rem;
      font-weight:950;
      white-space:nowrap;
    }
/* The offer price, the price it replaced, and the saving spelled out. Laid out
   in a column so the pair never wraps into one ambiguous run of digits. */
.care-doctor-profile .service-price.is-discounted {
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:2px;
      line-height:1.35;
    }
.care-doctor-profile .service-price-was {
      color:var(--muted,#6b7280);
      font-size:.8rem;
      font-weight:600;
    }
.care-doctor-profile .service-price-now {
      color:var(--gold);
    }
.care-doctor-profile .service-discount-tag {
      padding:2px 8px;
      border-radius:999px;
      color:#8f3d10;
      background:#fdeadd;
      font-size:.68rem;
      font-weight:900;
    }
[data-bs-theme="dark"] .care-doctor-profile .service-discount-tag {
      color:#ffbf95;
      background:rgba(143,61,16,.28);
    }
.care-doctor-profile .availability-layout {
      display:grid;
      grid-template-columns:220px minmax(0,1fr);
      gap:19px;
    }
.care-doctor-profile .date-list {
      display:grid;
      gap:8px;
    }
.care-doctor-profile .date-button {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      min-height:58px;
      padding:10px 12px;
      border:1px solid var(--border);
      border-radius:15px;
      color:var(--muted);
      background:var(--surface-muted);
      cursor:pointer;
      text-align:inherit;
    }
.care-doctor-profile .date-button strong {
      display:block;
      color:var(--heading);
      font-size:.83rem;
    }
.care-doctor-profile .date-button small {
      display:block;
      margin-top:3px;
      font-size:.70rem;
    }
.care-doctor-profile .date-button.is-active {
      color:#fff;
      border-color:transparent;
      background:linear-gradient(135deg,var(--green-900),var(--green-700));
    }
.care-doctor-profile .date-button.is-active strong,
.care-doctor-profile .date-button.is-active small {color:#fff}
.care-doctor-profile .date-count {
      min-width:26px;
      height:26px;
      display:grid;
      place-items:center;
      border-radius:999px;
      color:var(--green-800);
      background:var(--surface);
      font-size:.68rem;
      font-weight:900;
    }
.care-doctor-profile .slots-panel {
      min-width:0;
      padding:15px;
      border:1px solid var(--border);
      border-radius:19px;
      background:var(--surface-muted);
    }
.care-doctor-profile .slots-title {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      margin-bottom:13px;
    }
.care-doctor-profile .slots-title strong {
      color:var(--heading);
      font-size:.88rem;
    }
.care-doctor-profile .slots-title span {
      color:var(--muted);
      font-size:.73rem;
    }
.care-doctor-profile .time-slots {
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:9px;
    }
.care-doctor-profile .time-slot {
      min-height:50px;
      padding:8px 7px;
      border:1px solid var(--border);
      border-radius:13px;
      color:var(--heading);
      background:var(--surface);
      font-size:.80rem;
      font-weight:850;
      cursor:pointer;
    }
.care-doctor-profile .time-slot:hover {
      border-color:var(--border-strong);
      color:var(--green-800);
    }
.care-doctor-profile .time-slot.is-selected {
      color:#fff;
      border-color:transparent;
      background:linear-gradient(135deg,var(--green-900),var(--green-700));
    }
.care-doctor-profile .slot-confirm {
      display:none;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-top:14px;
      padding:12px;
      border:1px solid var(--border);
      border-radius:15px;
      background:var(--surface);
    }
.care-doctor-profile .slot-confirm.is-visible {display:flex}
.care-doctor-profile .slot-confirm strong {
      display:block;
      color:var(--heading);
      font-size:.82rem;
    }
.care-doctor-profile .slot-confirm span {
      display:block;
      margin-top:3px;
      color:var(--muted);
      font-size:.73rem;
    }
.care-doctor-profile .hours-list {
      display:grid;
      gap:6px;
    }
.care-doctor-profile .hours-row {
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:14px;
      align-items:center;
      padding:12px 13px;
      border-radius:14px;
      color:var(--muted);
    }
.care-doctor-profile .hours-row:nth-child(even) {background:var(--surface-muted)}
.care-doctor-profile .hours-row.is-today {
      color:var(--heading);
      background:var(--blue-100);
    }
.care-doctor-profile .hours-day {
      display:flex;
      align-items:center;
      gap:9px;
      color:var(--heading);
      font-weight:850;
    }
.care-doctor-profile .today-badge {
      padding:4px 8px;
      border-radius:999px;
      color:#fff;
      background:var(--green-800);
      font-size:.66rem;
      font-weight:900;
    }
.care-doctor-profile .closed {color:#9a7474}
.care-doctor-profile .timeline {
      position:relative;
      display:grid;
      gap:18px;
      padding-inline-start:28px;
    }
[dir="ltr"] .care-doctor-profile .timeline {padding-inline-start:28px}
.care-doctor-profile .timeline::before {
      content:"";
      position:absolute;
      inset-block:8px;
      inset-inline-start:9px;
      width:2px;
      background:var(--border-strong);
    }
.care-doctor-profile .timeline-item {
      position:relative;
      padding:16px;
      border:1px solid var(--border);
      border-radius:18px;
      background:var(--surface-muted);
    }
.care-doctor-profile .timeline-item::before {
      content:"";
      position:absolute;
      top:20px;
      inset-inline-start:-25px;
      width:14px;
      height:14px;
      border:4px solid var(--surface);
      border-radius:50%;
      background:var(--green-800);
      box-shadow:0 0 0 1px var(--border-strong);
    }
.care-doctor-profile .timeline-item h3 {
      margin:0;
      color:var(--heading);
      font-size:.93rem;
    }
.care-doctor-profile .timeline-item .place {
      margin-top:5px;
      color:var(--green-800);
      font-size:.78rem;
      font-weight:850;
    }
.care-doctor-profile .timeline-item .period {
      margin-top:6px;
      color:var(--muted);
      font-size:.73rem;
    }
.care-doctor-profile .timeline-item p {
      margin:10px 0 0;
      color:var(--muted);
      font-size:.80rem;
      line-height:1.65;
    }
.care-doctor-profile .empty-state {
      display:grid;
      place-items:center;
      min-height:210px;
      padding:25px;
      text-align:center;
      border:1px dashed var(--border-strong);
      border-radius:20px;
      background:var(--surface-muted);
    }
.care-doctor-profile .empty-state svg {
      width:48px;
      height:48px;
      stroke:var(--green-800);
    }
.care-doctor-profile .empty-state h3 {
      margin:13px 0 0;
      color:var(--heading);
      font-size:1rem;
    }
.care-doctor-profile .empty-state p {
      max-width:520px;
      margin:7px auto 0;
      color:var(--muted);
      font-size:.80rem;
      line-height:1.65;
    }
.care-doctor-profile .mobile-booking-bar {display:none}
.care-doctor-profile a:focus-visible,
.care-doctor-profile button:focus-visible,
.care-doctor-profile input:focus-visible,
.care-doctor-profile select:focus-visible {
      outline:3px solid rgba(33,153,112,.34);
      outline-offset:3px;
    }
@media(max-width:1100px) {
  .care-doctor-profile .profile-grid {
        grid-template-columns:auto minmax(0,1fr);
      }
  .care-doctor-profile .booking-summary {
        grid-column:1 / -1;
        display:grid;
        grid-template-columns:1fr 1fr;
        align-items:center;
      }
  .care-doctor-profile .summary-top {align-self:center}
  .care-doctor-profile .next-slot {align-self:center}
  .care-doctor-profile .booking-summary .button {grid-column:1 / -1}
  .care-doctor-profile .about-grid {grid-template-columns:1fr}
  .care-doctor-profile .clinic-card {grid-template-columns:1fr}
  .care-doctor-profile .map-card {border-inline-start:0;border-top:1px solid var(--border)}
  .care-doctor-profile .availability-layout {grid-template-columns:1fr}
  .care-doctor-profile .date-list {grid-template-columns:repeat(5,minmax(120px,1fr));overflow-x:auto}
}
@media(max-width:780px) {
  .care-doctor-profile .profile-section {padding-top:22px}
  .care-doctor-profile .profile-card {padding:18px;border-radius:25px}
  .care-doctor-profile .profile-grid {
        grid-template-columns:1fr;
        text-align:center;
      }
  .care-doctor-profile .doctor-avatar {margin-inline:auto}
  .care-doctor-profile .doctor-location,
.care-doctor-profile .rating-row,
.care-doctor-profile .profile-stats {justify-content:center}
  .care-doctor-profile .booking-summary {
        grid-template-columns:1fr;
        text-align:start;
      }
  .care-doctor-profile .booking-summary .button {grid-column:auto}
  .care-doctor-profile .tabs-shell {
        top:78px;
        border-radius:18px;
      }
  .care-doctor-profile .content-card {
        padding:19px;
        border-radius:22px;
      }
  .care-doctor-profile .clinic-card {grid-template-columns:1fr}
  .care-doctor-profile .center-card {grid-template-columns:64px minmax(0,1fr)}
  .care-doctor-profile .center-card .small-button {grid-column:1 / -1}
  .care-doctor-profile .center-icon {width:64px;height:64px}
  .care-doctor-profile .service-row {grid-template-columns:40px minmax(0,1fr)}
  .care-doctor-profile .service-price {grid-column:2}
  .care-doctor-profile .time-slots {grid-template-columns:repeat(3,minmax(0,1fr))}
  .care-doctor-profile .slot-confirm {align-items:stretch;flex-direction:column}
}
@media(max-width:620px) {
  .care-doctor-profile .profile-container {width:min(100% - 24px,1180px)}
  .care-doctor-profile .profile-section {padding-bottom:54px}
  .care-doctor-profile .doctor-avatar {width:110px;height:110px}
  .care-doctor-profile .doctor-avatar svg {width:62px;height:62px}
  .care-doctor-profile .doctor-name {font-size:1.75rem}
  .care-doctor-profile .profile-stats {display:grid;grid-template-columns:1fr 1fr;width:100%}
  .care-doctor-profile .stat-chip {justify-content:center}
  .care-doctor-profile .favorite-share {margin-inline-start:auto}
  .care-doctor-profile .tabs-shell {
        margin-inline:-2px;
        padding:5px;
      }
  .care-doctor-profile .tab-button {
        min-height:42px;
        padding:9px 12px;
        font-size:.77rem;
      }
  .care-doctor-profile .content-heading {
        align-items:flex-start;
      }
  .care-doctor-profile .clinic-details {padding:16px}
  .care-doctor-profile .clinic-actions {display:grid;grid-template-columns:1fr}
  .care-doctor-profile .center-card {grid-template-columns:1fr;text-align:center}
  .care-doctor-profile .center-icon {margin-inline:auto}
  .care-doctor-profile .service-row {grid-template-columns:38px minmax(0,1fr)}
  .care-doctor-profile .time-slots {grid-template-columns:repeat(2,minmax(0,1fr))}
  .care-doctor-profile .date-list {grid-template-columns:repeat(5,128px)}
  .care-doctor-profile .hours-row {padding:11px 9px}
  .care-doctor-profile .mobile-booking-bar {
        position:fixed;
        inset-inline:0;
        bottom:0;
        z-index:100;
        display:grid;
        grid-template-columns:1fr auto;
        gap:10px;
        align-items:center;
        padding:10px 12px;
        border-top:1px solid var(--border);
        background:color-mix(in srgb,var(--surface) 96%,transparent);
        box-shadow:0 -12px 32px rgba(3,58,45,.16);
        backdrop-filter:blur(16px);
        -webkit-backdrop-filter:blur(16px);
      }
  .care-doctor-profile .mobile-booking-bar small {
        display:block;
        color:var(--muted);
        font-size:.68rem;
      }
  .care-doctor-profile .mobile-booking-bar strong {
        display:block;
        margin-top:2px;
        color:var(--gold);
        font-size:1rem;
      }
  .care-doctor-profile .mobile-booking-bar .button {
        min-height:46px;
        padding-inline:16px;
      }
}

/* ==========================================================================
   Additions on top of the template.
   ========================================================================== */

/* The template ships one day's times and swaps them in script. Every day is
   rendered here instead, so the times survive with scripting off; this is what
   hides the ones the reader has not asked for. */
.care-doctor-profile .slots-day.is-hidden {
    display: none;
}

/* A fact the profile cannot answer yet still keeps its row, so the card holds
   its shape — but it says so rather than showing an invented number. */
.care-doctor-profile .fact-pending {
    color: var(--muted);
    font-style: italic;
    font-weight: 600;
    opacity: .75;
}

/* The avatar carries initials, or a photo over them, rather than the template's
   generic figure — the site has real people to show. */
.care-doctor-profile .doctor-avatar {
    position: relative;
    overflow: hidden;
    font-size: 2.1rem;
    font-weight: 900;
}

.care-doctor-profile .doctor-item-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* Slots are links, not buttons: each one is a real booking URL, so it can be
   opened in a new tab and survives with scripting off. */
.care-doctor-profile a.time-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Nine tabs, all nine on screen.

   The template's strip scrolls horizontally, which is right on a phone but on a
   wide screen it just hid the last tab behind an edge with no hint it was
   there. Given room, the tabs share it evenly and every one is reachable
   without scrolling; below that the template's scroller takes over unchanged. */
@media (min-width: 1000px) {
    .care-doctor-profile .tabs {
        overflow-x: visible;
    }

    .care-doctor-profile .tab-button {
        flex: 1 1 auto;
        min-width: 0;
        padding-inline: 10px;
        text-align: center;
    }
}

/* The rail is as long as the doctor has open days. The template sized it for
   exactly five, so a sixth and seventh wrapped onto a second row; this lets any
   number of them scroll along one line instead. */
@media (max-width: 1100px) {
    .care-doctor-profile .date-list {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(120px, 1fr);
        overflow-x: auto;
    }
}

@media (max-width: 620px) {
    .care-doctor-profile .date-list {
        grid-auto-columns: 128px;
    }
}

/* The template bleeds the tab strip 2px past its container on a phone. Two pixels
   of nothing is still two pixels the page can be dragged sideways by, so the strip
   stays inside its column and the scroll it needs stays the one inside itself. */
@media (max-width: 620px) {
    .care-doctor-profile .tabs-shell {
        margin-inline: 0;
    }
}

/* Dark mode: the green the template writes text and icons in.

   --green-800 is a foreground here — headings on the open card, the highlight
   figures, the back link, every content icon's stroke — and the dark palette
   leaves it at its light-mode value, which lands at roughly 2.3:1 on a dark
   card. The template already lightens .chip and .verified-badge this way and
   simply missed the rest; this finishes the job with the same mint. */
[data-bs-theme="dark"] .care-doctor-profile .back-link,
[data-bs-theme="dark"] .care-doctor-profile .icon-button:hover,
[data-bs-theme="dark"] .care-doctor-profile .tab-button:hover,
[data-bs-theme="dark"] .care-doctor-profile .content-icon,
[data-bs-theme="dark"] .care-doctor-profile .chip,
[data-bs-theme="dark"] .care-doctor-profile .clinic-price,
[data-bs-theme="dark"] .care-doctor-profile .service-icon,
[data-bs-theme="dark"] .care-doctor-profile .date-count,
[data-bs-theme="dark"] .care-doctor-profile .time-slot:hover,
[data-bs-theme="dark"] .care-doctor-profile .timeline-item .place {
    color: #a3e5c9;
}

/* The template's muted grey-green reads 4.21:1 on the card tint — just under the
   4.5:1 that secondary text needs to stay legible. Darkened by a hair; it is still
   plainly the quiet colour beside the headings, and now it is readable. */
.care-doctor-profile {
    --muted: #616f6a;
}

/* "Closed" is a fact a reader needs, and the template greys it to 4.1:1 in light
   and 3.7:1 in dark — under the 4.5:1 that ordinary text needs. Same muted red,
   dark enough on a light card and light enough on a dark one. */
.care-doctor-profile .closed {
    color: #ad4040;
}

[data-bs-theme="dark"] .care-doctor-profile .closed {
    color: #e08a8a;
}

/* The rating is a link to the reviews tab; it should read as one. */
.care-doctor-profile .rating-open-reviews {
    display: inline-flex;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.care-doctor-profile .rating-open-reviews:hover,
.care-doctor-profile .rating-open-reviews:focus-visible {
    text-decoration: underline;
}

/* ----- Reviews tab ----- */

.care-doctor-profile .doctor-review-list {
    display: grid;
    gap: 14px;
}

.care-doctor-profile .doctor-review {
    padding: 15px 17px;
    border: 1px solid var(--border, rgba(7, 91, 69, .14));
    border-radius: 16px;
    background: var(--surface, #fff);
}

.care-doctor-profile .doctor-review-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.care-doctor-profile .doctor-review p {
    margin: 9px 0 0;
    font-size: .9rem;
}

.care-doctor-profile .doctor-review small {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: .76rem;
}

.care-doctor-profile .doctor-review-reply {
    margin: 11px 0 0;
    padding: 11px 14px;
    border-inline-start: 3px solid var(--green-700, #0a8a68);
    border-radius: 10px;
    background: var(--green-50, #f1faf6);
}

.care-doctor-profile .doctor-review-reply strong {
    display: block;
    font-size: .78rem;
}

.care-doctor-profile .doctor-review-reply p {
    margin-top: 5px;
}

[data-bs-theme="dark"] .care-doctor-profile .doctor-review-reply {
    background: rgba(13, 127, 102, .16);
}

/* The request-verification pill itself is shared chrome: it lives in
   sihatuna/components.css, because the centre and pharmacy profiles wear the
   same control. */