/* ==========================================================================
   RatingSummaryPopover (.rsp-*) — extracted from the component's inline
   <style> block (S7-17 R1).

   WHY A STATIC SHEET AND NOT A COMPANION .razor.css:

   1. Per-instance duplication. A literal <style> block in a .razor file is
      part of the component's render output, so it ships once PER INSTANCE.
      Measured on the live catalogue and RentalDetailsPage: 9 popover
      instances x 13,700 chars = 123,300 bytes of byte-identical CSS in a
      single document — 51% of all inline CSS on the catalogue page.

   2. Scoped CSS cannot express these rules. Three of the selectors below
      target elements this component does not own:
        - .rsp-popover      is a Class= on <MudPopover>  (MudBlazor's root)
        - .rsp-arrow-icon
          .rsp-close-icon   are Class= on <MudIcon>      (MudBlazor's root)
        - .rsp-context + .rsp-body  crosses into RatingSummaryPopoverContent
      A Class= handed to a child component lands on markup authored in THAT
      component's file, so it carries that file's b-xxxxx scope (or none) —
      never ours. Under scoped CSS those rules compile to selectors that can
      never match, and the popover's z-index and icon sizing would silently
      die. On top of that MudPopover teleports the panel to the provider root
      at the document level, which is the same reason the sibling .ibp-*
      block lives in rental-card.css rather than a scoped sheet (S7-09).

   This file is a VERBATIM relocation: every selector, declaration and
   comment is unchanged from the inline block, so computed styles are
   byte-for-byte identical. The only edit is Razor's @@media escape
   collapsing to a plain @media, which a .css file does not need.

   Loaded from App.razor via a plain path (not @Assets[]), per the house
   MapStaticAssets/IIS SendFile workaround documented there.
   ========================================================================== */

.rsp-row {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.rsp-display {
    display: inline-flex;
    align-items: center;
}

.rsp-row--disabled {
    cursor: default;
}

/* ---------- Trigger (chevron disclosure) ---------- */
.rsp-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 4px;
    border-radius: 50%;
    cursor: pointer;
    outline: none;
    /* S9 (SC 1.4.11): since S8-12 this chevron is the ONLY pricing/rating click target, so its
       rest state is a UI component that needs 3:1 — #35a0ae at 0.55 measured ~2:1. Same lift as
       .rsp-footer-link--primary: the token projects ~#256f7a on white; 0.9 rest ≈ 4.7:1. */
    color: var(--rently-primary-dark, #256f7a);
    opacity: 0.9;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.rsp-arrow:hover,
.rsp-arrow:focus-visible,
.rsp-arrow--active {
    opacity: 1;
    background-color: rgba(53, 160, 174, 0.14);
}

.rsp-arrow:focus-visible {
    box-shadow: 0 0 0 2px rgba(53, 160, 174, 0.40);
}

.rsp-arrow-icon {
    width: 16px !important;
    height: 16px !important;
    font-size: 16px !important;
    color: inherit !important;
    transition: transform 0.2s ease;
}

/* Rotate chevron 90° clockwise when popover is open — reads as
   "disclosure-opened" (chevron points down into the panel). */
.rsp-arrow--active .rsp-arrow-icon {
    transform: rotate(90deg) scale(1.05);
}

/* ---------- Popover positioning + chrome ---------- */
.rsp-popover {
    z-index: 1500 !important;
}

.rsp-popover-shell {
    position: relative;
    max-width: 300px;
    width: 280px;
    transform: translateY(var(--rsp-boundary-shift, 0));
    /* z-index establishes a stacking context so the ::before/::after arrow
       and the X button paint above any z-elevated card siblings on the page
       (the source card uses z-index:5 in its :has() lift, so 6 keeps the
       popover above it; matches the .rsp-popover wrapper's 1500 effectively
       via the MudPopover portal). */
    z-index: 6;
    /* Margin pulls the panel away from the trigger so the connector arrow
       has room to render. 10px symmetric — 6px occupied by the arrow,
       4px of breathing room reads as "pointing at" rather than "glued to". */
    margin-inline: 10px;
    background: #ffffff;
    /* Slightly tighter than the card's 16px radius — reads as "child of". */
    border-radius: 14px;
    border: 1px solid rgba(53, 160, 174, 0.18);
    /* Brand-tinted lift shadow matches the card's hover shadow language
       so the popover feels like a peeled-off layer of the same surface. */
    box-shadow: 0 6px 20px rgba(53, 160, 174, 0.12),
                0 2px 6px rgba(15, 23, 42, 0.04);
    /* CRITICAL: the connector arrow uses ::before/::after that protrude
       outside the shell — overflow MUST stay visible. */
    overflow: visible;
}

/* ---------- Connector arrow (pointing tail) ---------- */
/* Dual pseudo-element 45°-rotated 12px square pinned to the vertical
   center of the panel edge — aligns with the trigger because MudPopover
   anchors CenterLeft↔CenterRight, so the trigger's vertical mid-point
   sits at the panel's vertical mid-point.
   ::before carries the border + outer shadow; ::after sits on top
   with the white fill to cover the 1px seam at the joint. */
.rsp-popover-shell::before,
.rsp-popover-shell::after {
    content: "";
    position: absolute;
    top: var(--rsp-arrow-y, 50%);
    width: 12px;
    height: 12px;
    transform: translateY(-50%) rotate(45deg);
    background: #ffffff;
    pointer-events: none;
}

.rsp-popover-shell::before {
    border: 1px solid rgba(53, 160, 174, 0.18);
    box-shadow: -2px 2px 6px rgba(53, 160, 174, 0.08);
    z-index: 0;
}

.rsp-popover-shell::after {
    z-index: 1;
}

/* Right-of-trigger (default): tail on the LEFT edge of the panel,
   pointing back toward the trigger chevron. */
.rsp-popover-shell--right::before,
.rsp-popover-shell--right::after {
    left: -6px;
}

/* Left-of-trigger (when FlipAlways flips us): tail on the RIGHT edge.
   Mirror the shadow direction so the outer drop-shadow still trails
   away from the trigger correctly. */
.rsp-popover-shell--left::before,
.rsp-popover-shell--left::after {
    right: -6px;
    left: auto;
}

.rsp-popover-shell--left::before {
    box-shadow: 2px -2px 6px rgba(53, 160, 174, 0.08);
}

/* X close button — discreet, top-right corner */
.rsp-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: #94a3b8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
    z-index: 3;
}

.rsp-close:hover,
.rsp-close:focus-visible {
    background-color: rgba(15, 23, 42, 0.06);
    color: #475569;
    outline: none;
}

.rsp-close:focus-visible {
    box-shadow: 0 0 0 2px rgba(53, 160, 174, 0.35);
}

.rsp-close-icon {
    width: 14px !important;
    height: 14px !important;
    font-size: 14px !important;
    color: inherit !important;
}

/* ---------- Contextual identity header ---------- */
/* Rendered only when ContextName is provided. Tells the user immediately
   WHICH card's breakdown they're viewing. 28px tall, ultra-compact. */
.rsp-context {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 36px 8px 14px; /* right pad clears the X close button */
    border-bottom: 1px solid rgba(53, 160, 174, 0.12);
    position: relative;
    z-index: 2;
}

.rsp-context-thumb {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f1f5f9;
    display: block;
}

.rsp-context-thumb--placeholder {
    background: linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 100%);
}

.rsp-context-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* Link variant of the context name — calm resting state, brand teal on hover.
   No underline at rest so the popover feels clean; the hover/focus treatment
   provides the affordance once the user shows intent. */
.rsp-context-name--link {
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.rsp-context-name--link:hover,
.rsp-context-name--link:focus-visible {
    color: #35a0ae;
    text-decoration: underline;
    text-underline-offset: 2px;
    outline: none;
}

.rsp-context-name--link:focus-visible {
    box-shadow: 0 0 0 2px rgba(53, 160, 174, 0.35);
    border-radius: 2px;
}

/* When the context header is present, the body's top padding can relax
   since the X button is now over the context strip (not over body content). */
.rsp-context + .rsp-body {
    padding-top: 14px !important;
}

/* ---------- Footer CTAs (interactive actions) ---------- */
/* Two-action row: secondary "View rental/store" left, primary "Read all reviews" right.
   Subtle top border continues the section-divider language used by .rsp-section. */
.rsp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px 12px;
    border-top: 1px solid rgba(53, 160, 174, 0.10);
    background: linear-gradient(to bottom, transparent 0%, rgba(53, 160, 174, 0.02) 100%);
    position: relative;
    z-index: 2;
}

.rsp-footer-link {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    padding: 6px 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
    white-space: nowrap;
}

.rsp-footer-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(53, 160, 174, 0.35);
}

.rsp-footer-link--secondary {
    color: #64748b;
    text-transform: capitalize;
}

.rsp-footer-link--secondary:hover,
.rsp-footer-link--secondary:focus-visible {
    color: #35a0ae;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rsp-footer-link--primary {
    /* Small teal text (SC 1.4.3): --rently-primary-dark flips #256f7a (5.78:1
       on white, lifts the pre-existing SYS-07 3.09:1) to #74d0dc (7.3:1 on slate). */
    color: var(--rently-primary-dark, #256f7a);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rsp-footer-link--primary:hover,
.rsp-footer-link--primary:focus-visible {
    color: #256f7a;
    background-color: rgba(53, 160, 174, 0.06);
}

.rsp-footer-arrow {
    display: inline-block;
    font-size: 0.875rem;
    line-height: 1;
    transition: transform 0.15s ease;
}

.rsp-footer-link--primary:hover .rsp-footer-arrow,
.rsp-footer-link--primary:focus-visible .rsp-footer-arrow {
    transform: translateX(2px);
}

/* WCAG 2.5.5 touch-target — the 22px chevron is a sub-44px tap surface on
   both mobile (≤600px) and the tablet band (601–960px). Bumping the OUTER
   hit area to 44×44 while keeping the visual icon at 16px preserves the
   compact desktop aesthetic but gives finger-friendly tap targets on
   touch viewports. Matches the per-page touch-target gate noted in
   feedback_qa_viewport_browser_chrome.md. */
@media (max-width: 960px) {
    .rsp-arrow {
        width: 44px;
        height: 44px;
        margin-left: 2px;
    }

    .rsp-arrow-icon {
        width: 20px !important;
        height: 20px !important;
        font-size: 20px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rsp-arrow,
    .rsp-arrow-icon,
    .rsp-close,
    .rsp-footer-link,
    .rsp-footer-arrow,
    .rsp-context-name--link {
        transition: none !important;
    }

    .rsp-arrow--active .rsp-arrow-icon {
        transform: rotate(90deg);
    }

    .rsp-footer-link--primary:hover .rsp-footer-arrow,
    .rsp-footer-link--primary:focus-visible .rsp-footer-arrow {
        transform: none;
    }
}

/* ===================================================================
   DARK MODE (Section Design 13.9 D5 paired-flip) — appended overrides
   ONLY; light rules above are untouched (light byte-identical apart from
   the small-teal-text lift on .rsp-footer-link--primary rest, below). The
   white #ffffff popover panel + connector-arrow flip to the elevated dark
   surface; slate chrome inks/wells remap to global --rently-* dark tokens
   (they inherit into the portalled MudPopover). Decorative teal-tinted
   borders/shadows are kept; the 94a3b8 close icon rides the surface flip.
   =================================================================== */
[data-theme="dark"] .rsp-popover-shell {
    background: var(--rently-elevated-bg, #243246);
}

/* Connector-arrow fill MUST match the shell or a white triangle pokes
   out of the dark popover (::before also carries the teal-tint border). */
[data-theme="dark"] .rsp-popover-shell::before,
[data-theme="dark"] .rsp-popover-shell::after {
    background: var(--rently-elevated-bg, #243246);
}

[data-theme="dark"] .rsp-context-thumb {
    background: var(--rently-subtle-bg, #172033);
}

[data-theme="dark"] .rsp-context-thumb--placeholder {
    background: linear-gradient(135deg, var(--rently-border-subtle, #28344a) 0%, var(--rently-subtle-bg, #172033) 100%);
}

[data-theme="dark"] .rsp-context-name {
    color: var(--rently-text-primary, #f8fafc);
}

/* :focus-visible mirrors :hover — the light rule groups both states, so a
   :hover-only override would leak the light #475569 ink on keyboard focus. */
[data-theme="dark"] .rsp-close:hover,
[data-theme="dark"] .rsp-close:focus-visible {
    color: var(--rently-text-secondary, #cbd5e1);
    background-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .rsp-footer-link--secondary {
    color: var(--rently-text-tertiary, #94a3b8);
}

/* Footer primary is teal TEXT. LITERAL #74d0dc (not var(--rently-primary*)):
   the live palette engine reprojects the brand-teal tokens to ~#35a0ae on
   dark — sub-AA (4.19:1) for small text; #74d0dc is the platform's dark
   small-teal ink. All 3 states covered so keyboard :focus-visible doesn't
   fall through to the grouped light #256f7a rule (dark-on-dark). Light rest
   keeps the in-place --rently-primary-dark lift (projects ~#256f7a on white). */
[data-theme="dark"] .rsp-footer-link--primary,
[data-theme="dark"] .rsp-footer-link--primary:hover,
[data-theme="dark"] .rsp-footer-link--primary:focus-visible {
    color: #74d0dc;
}

/* Chevron trigger, same reprojection trap as the footer link: the brand-teal tokens project
   ~#35a0ae on dark, which fails 3:1 against the slate card at the 0.9 rest opacity. LITERAL
   dark small-teal; hover/active keep it (they only change opacity + wash). */
[data-theme="dark"] .rsp-arrow {
    color: #74d0dc;
}