/* Our few additions to Jennifer's Find Care styles (mirage-find-care.min.css, her PR 44, 2026-11-02), for the result
   cards (TXX-Find-Care, templates.js) and the Physician Details "New Patient Appointment" section (T74). Registered by
   those two templates (FindCareCards.RegisterStyles) after her file. Everything else she now covers herself (slot
   buttons, links, pills, headshot crop, Medical Group tag, Call panel type), so it was removed from here: per her ask,
   rules she owns are not overridden. Move any of these into her file when she takes them, then delete them here. */

/* Cards: 12px above "See More Dates and Times" (Figma "Timeslot Block"; Physician Details has her own rule). */
.clinician-card__scheduling .myc_osSimpleWidget a.myc_link {
    margin-top: 12px;
}

/* "Existing Patients: Log In to MyChart" on Call to Schedule cards: a sibling of the no-scheduling block, as
   Existing Patients is on the widget cards (it reuses that class). Centred like the rest of this panel, and kept
   right under the phone button: the panel is a space-between column, so margin-bottom: auto takes the free space
   below the line instead of pushing it to the bottom. 4px plus the button paragraph's own 8px bottom margin keeps
   the 12px gap it had when it was nested. */
.clinician-card__scheduling__no-scheduling + .clinician-card__scheduling__existing-patient {
    text-align: center;
    margin-top: 4px;
    margin-bottom: auto;
}

/* No scheduling panel (no widget and no phone number of the physician's own; Michael, HHCD-262, Figma "no phone"
   card): the clinician info takes the full width instead of leaving the panel's third empty. */
.clinician-card.clinician-card--no-scheduling {
    grid-template-columns: 1fr;
}

/* Pill colours from the Figma tokens (text-moss-dark on surface-moss-light, text-plum on surface-plum-light; Michael,
   2026-10-30). The Financial Assistance text is a link, so it gets the plum too. */
.clinician-card__clinician-info__tags .pill--green {
    color: #4a6a32 !important;
    background-color: #dce4d7 !important;
}

.clinician-card__clinician-info__tags .pill--magenta,
.clinician-card__clinician-info__tags .pill--magenta a {
    color: #8f276b !important;
}

.clinician-card__clinician-info__tags .pill--magenta {
    background-color: #e9d4e1 !important;
}

.clinician-card__clinician-info__tags .pill--magenta a:hover,
.clinician-card__clinician-info__tags .pill--magenta a:focus {
    text-decoration: underline;
}

/* While Epic looks up times (Charley, 2026-11-03): templates.js shows "Finding available times..." and the slot grid
   as placeholders in her light teal (#cce2e5, the .pill--blue surface), just above the widget, until the slots
   arrive. Epic's own placeholder (a blue-grey shimmer, 22rem x 10rem, that read as a grey flash on the stone panel)
   is hidden. The grid is her .myc_slotGroup, so the placeholders take the slots' columns, and each is as tall as her
   one-line slot button (14px text plus her padding). The text is a div: her .clinician-card__scheduling__new-patient p
   rule zeroes paragraph margins. No animation for people who ask for reduced motion, as in mirage.min.css. */
[data-hhc-widget="openschedulingsimple"] .myc_loadingSpinner {
    display: none;
}

.hhc-slots-loading__text {
    margin: 8px 0 0;
    font-family: Overused Grotesk, serif;
    font-size: 1rem;
    line-height: 1.15;
    color: #171b1c;
}

.hhc-slots-loading__slots > span {
    display: block;
    height: calc(14px + 2 * max(.75rem, min(.313vw + .688rem, 1rem)));
    border-radius: 8px;
    background-color: #cce2e5;
    animation: hhc-slots-loading 1.2s ease-in-out infinite alternate;
}

.new-patient-appointment .hhc-slots-loading__text {
    margin: 12px 0 4px;
}

@media (min-width: 1024px) {
    .hhc-slots-loading__slots > span {
        height: calc(14px + 2 * max(.5rem, min(.313vw + .438rem, .75rem)));
    }
}

@keyframes hhc-slots-loading {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hhc-slots-loading__slots > span {
        animation: none;
    }
}