/* ==========================================================================
   Cart preview chrome — S8-13 (grid-card popup) + S8-15 (nav popover).

   GLOBAL on purpose, and deliberately NOT an inline <style> block in the two
   components: both hosts teleport their panel to the popover provider root, so
   a companion .razor.css compiles to a [b-xxxxx] selector that never matches —
   and an inline block ships once per INSTANCE (the S7-17 lesson that pulled
   RatingSummaryPopover's rules out into rating-popover.css; CartNavButton alone
   mounts twice in MainNav).

   Three blocks:
     1. .cip-*           — the shared CartItemPreviewCard row (both surfaces)
     2. .cart-preview-*  — S8-13's popup shell on the rental card
     3. .cart-menu-*     — S8-15's popover shell in the top nav

   Tokenized (var(--rently-*)), 8px radius family, Montserrat inherited from the
   document. Dark twins live in ONE block near the bottom; the reduced-motion
   suppressor is LAST in the file (source order wins — append nothing below it).
   ========================================================================== */

/* ==========================================================================
   1. Shared row — CartItemPreviewCard
   ========================================================================== */
.cip-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    background: var(--rently-card-bg, #ffffff);
}

/* An unbookable row is informational only — dimmed, and it renders no Configure
   action (see the markup), so Remove is the single thing left to do. */
.cip-card--unavailable {
    opacity: 0.72;
}

.cip-main {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.cip-thumb {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--rently-muted-bg, #f1f5f9);
    display: block;
}

/* The 404 / no-image fallback: a flat brand-tinted tile rather than a broken
   image glyph or an empty hole beside the name. */
.cip-thumb--placeholder {
    background: linear-gradient(135deg,
        rgba(var(--rently-primary-rgb, 53, 160, 174), 0.18),
        rgba(var(--rently-primary-rgb, 53, 160, 174), 0.06));
}

.cip-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* min-width:0 is what actually lets the ellipsis below fire — a flex child
       defaults to min-width:auto and refuses to shrink below its content. */
    min-width: 0;
    flex: 1 1 auto;
}

.cip-name {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--rently-text-strong, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cip-store {
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--rently-text-tertiary, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cip-meta {
    margin-top: 2px;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--rently-text-secondary, #475569);
}

.cip-price {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--rently-text-strong, #0f172a);
}

.cip-price-note {
    font-weight: 500;
    font-size: 0.72rem;
    color: var(--rently-text-tertiary, #64748b);
}

/* Reuses the dashboard-system chip recipe (rently-dashboard-system.css, linked
   globally from App.razor) — this only adds the row's own spacing. */
.cip-chip {
    align-self: flex-start;
    margin-top: 4px;
}

.cip-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cip-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 auto;
    /* 36px + the row's 12px padding clears the 44px touch target on mobile,
       where these two are the only tap targets in the panel. */
    min-height: 36px;
    padding: 0 12px;
    margin: 0;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cip-btn:focus-visible {
    outline: 2px solid var(--rently-primary-dark, #256f7a);
    outline-offset: 2px;
}

.cip-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

/* #256f7a, not var(--rently-primary): brand teal (#35a0ae) on the card surface is
   3.09:1 — a small-text SC 1.4.3 fail. Same literal the notification footer and
   the search-panel footer action already pin. */
.cip-btn--primary {
    color: #256f7a;
    background: rgba(var(--rently-primary-rgb, 53, 160, 174), 0.10);
    border-color: rgba(var(--rently-primary-rgb, 53, 160, 174), 0.35);
}

.cip-btn--primary:hover {
    background: rgba(var(--rently-primary-rgb, 53, 160, 174), 0.18);
    border-color: var(--rently-primary, #35a0ae);
}

.cip-btn--ghost {
    color: var(--rently-text-secondary, #475569);
    background: transparent;
    border-color: var(--rently-border, #e2e8f0);
}

.cip-btn--ghost:hover:not(:disabled) {
    background: var(--rently-subtle-bg, #f8fafc);
    border-color: var(--rently-border-strong, #cbd5e1);
}

.cip-btn-icon {
    width: 16px !important;
    height: 16px !important;
    font-size: 16px !important;
    color: inherit !important;
    flex-shrink: 0;
}

.cip-btn-label {
    white-space: nowrap;
}

/* ==========================================================================
   2. S8-13 — the popup on a rental card's cart button
   ========================================================================== */

/* Matches .ibp-popover in rental-card.css: the four option popovers and this one
   sit on the same card and must not stack in a surprising order. */
.cart-preview-popover {
    z-index: 1500 !important;
}

/* The transparent click-catcher that dismisses the popup. Its stacking order is set
   by MudOverlay's ZIndex PARAMETER (1490 — under the 1500 popover), not here:
   MudOverlay writes z-index as an inline style, which beats any class rule.

   S12-05a: it is no longer "over the LIFTED card at z-index 5". The card's hover lift
   is now suppressed for exactly as long as this scrim exists — the transform made the
   card the containing block for this fixed-position overlay, which clipped it to card
   size, and the z-index opened a stacking context that trapped the 1490. See
   `.rental-card:has(.cart-preview-scrim)` in rental-card.css.

   Beyond that this class is a QA/debug handle only. */
.cart-preview-scrim {
    background: transparent;
}

.cart-preview-panel {
    width: 300px;
    /* 300px + the popover's own inset clears a 375px viewport, which is why this
       surface is the same on mobile as on desktop (no separate tap dialog). */
    max-width: 92vw;
    background: var(--rently-card-bg, #ffffff);
    border: 1px solid var(--rently-border, #e2e8f0);
    border-radius: var(--rently-popover-radius, 8px);
    box-shadow: var(--rently-popover-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.16));
    overflow: hidden;
    animation: cartPreviewIn 0.18s ease-out;
}

.cart-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 8px 8px 14px;
    background: var(--rently-subtle-bg, #f8fafc);
    border-bottom: 1px solid var(--rently-border-subtle, #eef2f7);
}

.cart-preview-title {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rently-text-strong, #0f172a);
}

.cart-preview-close {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    font: inherit;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--rently-text-tertiary, #64748b);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cart-preview-close:hover {
    background: rgba(var(--rently-primary-rgb, 53, 160, 174), 0.12);
    color: #256f7a;
}

.cart-preview-close:focus-visible {
    outline: 2px solid var(--rently-primary-dark, #256f7a);
    outline-offset: 2px;
}

.cart-preview-close-icon {
    width: 16px !important;
    height: 16px !important;
    font-size: 16px !important;
    color: inherit !important;
}

/* The in-cart state of the card's quick-add button lives in rental-card.css beside
   its resting rules (.card-cart-btn--in-cart) — this sheet owns the PANEL only. */

/* ==========================================================================
   3. S8-15 — the nav cart popover
   ========================================================================== */
.cart-menu-container {
    z-index: 1600;
}

/* The nav bar is a flex row of inline controls, and MudMenu inserts TWO block-level
   wrappers (its root + .mud-menu-activator) plus this component's own keydown span
   between that row and the icon button. Without these the badge would drop onto its
   own line. .cart-activator is that span — see the markup note for why it exists. */
.cart-menu-container,
.cart-menu-container .mud-menu-activator,
.cart-activator {
    display: inline-flex;
    align-items: center;
}

/* Same vocabulary as .notification-menu-popover: 8px family radius, 1px token
   border, token shadow, token surface — the two nav popovers must read as one
   component family. */
.cart-menu-popover {
    animation: cartPreviewIn 0.2s ease-out;
    border-radius: var(--rently-popover-radius, 8px);
    border: 1px solid var(--rently-border, #e2e8f0);
    overflow: hidden;
    box-shadow: var(--rently-popover-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.12));
    background-color: var(--rently-card-bg, #ffffff);
}

/* MudMenu wraps ChildContent in its own MudList, whose default vertical padding
   renders as a blank strip above the header. Global (unscoped) so it reaches the
   portalled popover. */
.cart-menu-popover .mud-list,
.cart-menu-popover .mud-menu-list {
    padding: 0;
}

/* Flex column: header / scrolling list / footer. The CONTENT owns the height cap
   (MaxHeight is deliberately NOT set on the MudMenu — it renders as an inline
   max-height + overflow on its own list wrapper and would double-scroll against
   this column), the LIST is the only scroller, and the footer is pinned by
   geometry rather than position tricks. */
.cart-menu-content {
    width: 380px;
    max-width: 90vw;
    max-height: min(600px, calc(100vh - 96px));
    display: flex;
    flex-direction: column;
    background-color: var(--rently-card-bg, #ffffff);
}

.cart-menu-header {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 14px 18px;
    background: var(--rently-subtle-bg, #f8fafc);
    border-bottom: 1px solid var(--rently-border, #e2e8f0);
}

.cart-menu-header__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--rently-text-strong, #0f172a);
}

.cart-menu-header__count {
    font-size: 0.75rem;
    color: var(--rently-text-tertiary, #64748b);
}

/* scrollbars: universal kit (rently-dashboard-tokens.css N3) */
.cart-menu-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.cart-menu-row + .cart-menu-row {
    border-top: 1px solid var(--rently-border-subtle, #eef2f7);
}

.cart-menu-more {
    display: block;
    padding: 10px 18px;
    font-size: 0.75rem;
    color: var(--rently-text-tertiary, #64748b);
    border-top: 1px solid var(--rently-border-subtle, #eef2f7);
    background: var(--rently-subtle-bg, #f8fafc);
}

.cart-menu-footer {
    flex: 0 0 auto;
    border-top: 1px solid var(--rently-border, #e2e8f0);
    background-color: var(--rently-card-bg, #ffffff);
}

/* Ink literal, both themes — Color.Primary text (#35a0ae) on the card surface is
   3.09:1, a small-text SC 1.4.3 fail. Mirrors .notification-footer .view-all-button. */
.cart-menu-footer .cart-menu-footer__action {
    padding: 12px 16px;
    font-weight: 600;
    text-transform: none;
    justify-content: center;
    transition: background-color 0.2s ease;
    color: #256f7a !important;
}

.cart-menu-footer .cart-menu-footer__action:hover {
    background-color: rgba(var(--rently-primary-rgb, 53, 160, 174), 0.06);
}

@keyframes cartPreviewIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 599px) {
    .cart-menu-content {
        width: 100vw;
        max-width: 100vw;
    }

    .cart-menu-header {
        padding: 12px 16px;
    }
}

/* ==========================================================================
   Dark mode. Appended additively — every rule above is byte-identical, so LIGHT
   is unchanged. Only the rules whose dark design genuinely differs are restated:
   the token-based ones auto-flip. Teal inks use the #74d0dc literal the sibling
   dark rules in rental-card.css / NotificationMenu already use, NOT
   var(--rently-primary-dark) — the palette engine live-reprojects that token
   back to ~#35a0ae, which would not lift off a dark surface.
   ========================================================================== */
[data-theme="dark"] .cip-card,
[data-theme="dark"] .cart-preview-panel,
[data-theme="dark"] .cart-menu-content,
[data-theme="dark"] .cart-menu-popover,
[data-theme="dark"] .cart-menu-footer {
    background-color: var(--rently-elevated-bg);
}

[data-theme="dark"] .cip-btn--primary {
    color: #74d0dc;
    background: rgba(116, 208, 220, 0.12);
    border-color: rgba(116, 208, 220, 0.40);
}

[data-theme="dark"] .cip-btn--primary:hover {
    background: rgba(116, 208, 220, 0.20);
    border-color: #74d0dc;
}

[data-theme="dark"] .cip-btn--ghost:hover:not(:disabled) {
    background: var(--rently-muted-bg);
}

[data-theme="dark"] .cip-btn:focus-visible,
[data-theme="dark"] .cart-preview-close:focus-visible {
    outline-color: #74d0dc;
}

[data-theme="dark"] .cart-preview-close:hover {
    background: rgba(116, 208, 220, 0.14);
    color: #74d0dc;
}

[data-theme="dark"] .cart-menu-footer .cart-menu-footer__action {
    color: #74d0dc !important;
}

/* Lift the hover wash — the 6% light wash is invisible on the dark surface. */
[data-theme="dark"] .cart-menu-footer .cart-menu-footer__action:hover {
    background-color: rgba(53, 160, 174, 0.10);
}

[data-theme="dark"] .cart-preview-panel,
[data-theme="dark"] .cart-menu-popover {
    border-color: var(--rently-border);
}

/* ==========================================================================
   Reduced motion — LAST in this file (source order wins; append nothing below).
   Playwright's reducedMotion emulation masks inert CSS, so the QA assertion here
   is transition-property:none / animation-name:none, not "it looked still".
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .cart-preview-panel,
    .cart-menu-popover {
        animation: none;
    }

    .cip-btn,
    .cart-preview-close,
    .cart-menu-footer .cart-menu-footer__action {
        transition: none;
    }
}