/* Ratings, reviews and the favourite heart, shared by the pharmacy directory
   card, the pharmacy details page and the patient dashboard.

   Every colour is a --care-* token so the whole file follows the theme. A panel
   painted a literal #fff keeps its light background in dark mode while the text
   on it correctly turns near-white, and the words disappear. */

/* ===== The star line ===== */

/* The filled star.

   Not the usual #f5a623: that is 2.03:1 on a white card, and the star picker in
   the review form is a real control whose selected state has to be identifiable
   at 3:1. A deeper amber carries on light surfaces (3.34:1) while the dark
   theme, where a bright gold has all the contrast it needs, keeps the brighter
   one (9.8:1). Both still read as a gold star. */
:root {
    --care-star: #c67c00;
}

[data-bs-theme="dark"] {
    --care-star: #f5b942;
}

.care-rating {
    display: inline-flex;
    align-items: center;
    gap: .35rem;

    /* The stars are digits and glyphs whose order carries no meaning in Arabic;
       reversing "4.5 ★★★★☆" into "☆★★★★ 5.4" is the RTL mirror doing the wrong
       thing to content that is not directional. */
    direction: ltr;
}

[dir="rtl"] .care-rating {
    /* The line itself still sits at the start of an RTL block. */
    justify-content: flex-end;
}

.care-rating-stars {
    display: inline-flex;
    gap: .1rem;
    font-size: .8125rem;

    /* The control token, not --care-border: an unfilled star has to be visible
       or "3 filled out of 5" reads as "3 stars, and that is all there are".
       --care-border is 1.23:1 on a light card and 1.51:1 on a dark one. */
    color: var(--care-control-border);
}

/* Filled and empty differ in shape, not only in colour.

   The amber and the grey are close in luminance, so to a reader who cannot
   separate those hues a coloured-only star row would read as five identical
   stars. Font Awesome's solid face is weight 900 and its outline face weight
   400, so switching the weight swaps a filled star for a hollow one — a
   difference that survives being seen in greyscale. */
.care-rating-stars i {
    font-weight: 400;
}

.care-rating-stars .is-filled {
    color: var(--care-star);
    font-weight: 900;
}

.care-rating-value {
    font-weight: 600;
    color: var(--care-ink);
}

.care-rating-count {
    font-size: .8125rem;
}

.care-rating-link {
    text-decoration: none;
    color: inherit;
}

.care-rating-link:hover .care-rating-value,
.care-rating-link:focus-visible .care-rating-value {
    text-decoration: underline;
}

.care-org-card-rating {
    margin-block: .25rem .5rem;
}

/* ===== The favourite heart ===== */

.care-pharmacy-heart {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* 44px: the same target size as every other tappable control here. A heart
       drawn at icon size is a control only a mouse can use. */
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--care-control-border);
    border-radius: 50%;
    background: var(--care-card);
    color: var(--care-danger-text);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.care-pharmacy-heart:hover,
.care-pharmacy-heart:focus-visible {
    border-color: var(--care-danger-text);
    background: var(--care-surface);
}

.care-pharmacy-heart.is-active {
    border-color: var(--care-danger-text);
}

.care-pharmacy-favourite {
    display: inline-flex;
}

.care-pharmacy-heart-button {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

/* ===== The summary: score beside the distribution ===== */

.care-review-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
    padding: 1rem 1.25rem;
    border: 1px solid var(--care-border);
    border-radius: .9rem;
    background: var(--care-surface-soft);
}

.care-review-score {
    text-align: center;
}

.care-review-score-value {
    margin-block-end: .25rem;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--care-ink);
}

.care-review-score-count {
    margin-block-start: .35rem;
    font-size: .8125rem;
}

.care-review-distribution {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .35rem;
}

.care-review-distribution li {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) 2rem;
    gap: .5rem;
    align-items: center;
    font-size: .8125rem;
}

.care-review-distribution-label,
.care-review-distribution-count {
    color: var(--care-muted);
}

.care-review-distribution-track {
    height: .5rem;
    border-radius: 999px;
    background: var(--care-border);
    overflow: hidden;
}

/* One class per tenth rather than an inline width: this site sends
   style-src 'self', which drops a style attribute, so a bar whose width arrived
   that way would render at nothing at all. */
.care-review-distribution-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--care-star);
}

.care-review-distribution-fill.is-0 { width: 0; }
.care-review-distribution-fill.is-10 { width: 10%; }
.care-review-distribution-fill.is-20 { width: 20%; }
.care-review-distribution-fill.is-30 { width: 30%; }
.care-review-distribution-fill.is-40 { width: 40%; }
.care-review-distribution-fill.is-50 { width: 50%; }
.care-review-distribution-fill.is-60 { width: 60%; }
.care-review-distribution-fill.is-70 { width: 70%; }
.care-review-distribution-fill.is-80 { width: 80%; }
.care-review-distribution-fill.is-90 { width: 90%; }
.care-review-distribution-fill.is-100 { width: 100%; }

/* ===== The list ===== */

.care-review-list {
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1rem;
}

.care-review {
    padding-block-end: 1rem;
    border-block-end: 1px solid var(--care-border);
}

.care-review:last-child {
    border-block-end: 0;
    padding-block-end: 0;
}

.care-review-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
}

.care-review-author {
    font-weight: 600;
    color: var(--care-ink);
}

.care-review-verified {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-inline-start: .4rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--care-success-transparent);
    color: var(--care-success-text);
    font-size: .75rem;
    font-weight: 600;
}

.care-review-date {
    font-size: .8125rem;
}

.care-review-comment {
    margin-block-start: .5rem;
    color: var(--care-ink);

    /* A comment is arbitrary text: one unbroken 200-character "word" would push
       the whole panel wider than the screen without this. */
    overflow-wrap: anywhere;
}

.care-review-own-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/* ===== The form's star picker =====

   Radio inputs painted as stars. The inputs stay in the accessibility tree and
   keep working with the keyboard; only their default appearance is replaced.
   The row is laid out in reverse (5 first in source order) so the general
   sibling combinator can light every star up to the hovered or checked one —
   CSS can look forwards from an element but not backwards. */

.care-review-stars-input {
    margin-block-end: 1rem;
    border: 0;
    padding: 0;
}

/* The flex row is this inner element, not the fieldset: a legend placed in a
   flex container becomes a flex item and lands beside the stars rather than
   labelling them from above. */
.care-review-stars-row {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: .25rem;
}

.care-review-stars-row input[type="radio"] {
    /* Off-screen rather than display:none, which would take it out of the
       accessibility tree and off the keyboard's path. */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.care-review-stars-row label {
    /* Unchosen, but still a control the reader has to see in order to use. */
    color: var(--care-control-border);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: color .12s ease;
}

/* Hollow until chosen. Which stars are selected is the whole output of this
   control, so it cannot rest on hue alone. */
.care-review-stars-row label i {
    font-weight: 400;
}

.care-review-stars-row input[type="radio"]:checked ~ label,
.care-review-stars-row label:hover,
.care-review-stars-row label:hover ~ label {
    color: var(--care-star);
}

.care-review-stars-row input[type="radio"]:checked ~ label i,
.care-review-stars-row label:hover i,
.care-review-stars-row label:hover ~ label i {
    font-weight: 900;
}

/* The focus ring belongs on the visible star, because the input it belongs to
   is the one off screen. */
.care-review-stars-row input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--care-focus);
    outline-offset: 2px;
    border-radius: .25rem;
}

/* ===== Favourite pharmacies on the patient dashboard ===== */

.care-favourite-pharmacy-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .75rem;
}

.care-favourite-pharmacy {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding-block-end: .75rem;
    border-block-end: 1px solid var(--care-border);
}

.care-favourite-pharmacy:last-child {
    border-block-end: 0;
    padding-block-end: 0;
}

.care-favourite-pharmacy-main {
    min-width: 0;
}

.care-favourite-pharmacy-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

@media (max-width: 575.98px) {
    /* The score stacks above the bars rather than squeezing them to nothing. */
    .care-review-summary {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }
}