/* store-card.css — the StoreCard component (Server/Components/CustomComponents/StoreCard.razor)
   sheet. EXTRACTED VERBATIM 2026-08-24 (qa-public-O5, publish session 11) from the in-body style
   block the component carried at lines 77-570: a component's render fragment ships once PER
   INSTANCE, so a page rendering N store cards shipped N identical 13.1 KB copies of this CSS in
   every SSR payload. Loaded from App.razor AFTER rently-home.css and before the scoped bundle —
   the in-body block used to render in the document BODY, later in source order than every head
   sheet, so late-of-links keeps its cascade wins (the S12-02 lesson recorded in App.razor)
   without inflating specificity. Razor at-escapes un-escaped mechanically; no other
   transformation. */

    /* All existing styles remain the same */
    .store-card-wrapper {
        width: 100%;
        height: 100%;
        padding: 10px;
    }

    .store-card {
        padding: 0 !important;
        width: 100% !important;
        height: 100%;
        min-height: 300px;
        display: flex;
        flex-direction: column;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        overflow: hidden;
        position: relative;
    }

        .store-card:hover,
        /* Keep the store card lifted while its rating popover is open so the
           visual connection between card and popover panel doesn't drop. */
        .store-card:has(.rsp-arrow--active) {
            transform: translateY(-4px);
            box-shadow: 0 8px 16px rgb(0 0 0 / 15%) !important;
            z-index: 5;
        }

    .store-banner-container {
        width: 100%;
        height: 120px;
        overflow: hidden;
        position: relative;
    }

    .store-banner-image {
        width: 100%;
        height: 100%;
        object-fit: cover !important;
        object-position: center;
        transition: transform 0.3s ease;
    }

    .store-card:hover .store-banner-image {
        transform: scale(1.05);
    }

    .store-content {
        flex: 1;
        padding: 0 16px;
        display: flex;
        flex-direction: column;
        min-height: 150px;
    }

    .store-header {
        margin-top: -30px !important;
        margin-bottom: 16px !important;
        align-items: flex-end !important;
        min-height: 80px;
    }

    .store-logo-column {
        text-align: center;
        z-index: 1;
        position: relative;
    }

    .store-logo {
        width: 80px;
        height: 80px;
        border-radius: 16px;
        border: 3px solid white;
        background-color: white;
        object-fit: cover;
        box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
        transition: transform 0.2s ease;
        position: relative;
        display: block;
        margin: 0 auto;
    }

    .store-card:hover .store-logo {
        transform: scale(1.05);
    }

    .store-info-column {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        padding-left: 16px !important;
    }

    .rental-store-name {
        font-size: 1.25rem !important;
        font-weight: 600 !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #727272;
    }

    .store-card-wrapper .store-slogan {
        font-size: 0.875rem !important;
        margin: 0 !important;
        color: #727272;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3 !important;
        max-height: 1.3rem;
    }

    .store-rating-row {
        margin-top: 4px;
        display: flex;
        align-items: center;
    }

    .store-card-wrapper .store-description-row {
        flex: 1;
        display: flex;
        align-items: flex-start;
        min-height: 30px;
    }

    .store-card-wrapper .store-description {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        color: #424242;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0 !important;
        max-height: 3rem;
        transition: max-height 0.3s ease;
    }

    .store-card-wrapper .store-description.expanded {
        -webkit-line-clamp: unset;
        max-height: none;
    }

    .view-more-link {
        font-size: 0.8125rem !important;
        color: #35a0ae !important;
        cursor: pointer;
        margin-top: 4px;
        display: inline-block;
        text-decoration: none !important;
        font-weight: 500;
    }

    .view-more-link:hover {
        color: #124950 !important;
        text-decoration: underline !important;
    }

    .store-footer {
        margin: 0 !important;
        border-top: 1px solid #e0e0e0;
    }

    .view-store-button {
        width: 100% !important;
        border-radius: 0 0 8px 8px !important;
        height: 48px !important;
        font-weight: 500 !important;
        background-color: transparent !important;
        color: #c72e1c !important;
        transition: all 0.2s ease !important;
        text-transform: none !important;
        letter-spacing: normal !important;
    }

        .view-store-button:hover {
            background-color: rgb(235 60 39 / 8%) !important;
            color: #c72e1c !important;
        }

    /* Distance Section - New styles to match RentalCard */
    .store-card-wrapper .distance-section {
        padding: 8px 16px !important;
        border-top: 1px solid #e0e0e0;
        background-color: #fafafa;
    }

    .store-card-wrapper .distance-display {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    .store-card-wrapper .distance-icon {
        color: var(--mud-palette-primary);
    }

    .store-card-wrapper .distance-text {
        color: var(--mud-palette-text-secondary);
        white-space: nowrap;
    }

    /* All responsive styles remain the same */
    @media (min-width: 1280px) {
        .store-banner-container {
            height: 140px;
        }

        .store-logo {
            width: 100px;
            height: 100px;
        }

        .store-header {
            margin-top: -40px !important;
        }
    }

    @media (max-width: 959px) {
        .store-card {
            min-height: 320px;
        }

        .store-banner-container {
            height: 100px;
        }

        .store-content {
            padding: 0 12px;
            min-height: 140px;
        }

        .store-logo {
            width: 70px;
            height: 70px;
            border-width: 2px;
        }

        .store-header {
            margin-top: -25px !important;
            margin-bottom: 12px !important;
            min-height: 70px;
        }

        .store-info-column {
            padding-left: 12px !important;
        }

        .rental-store-name {
            font-size: 1.125rem !important;
        }

        .store-card-wrapper .store-slogan {
            font-size: 0.8125rem !important;
            -webkit-line-clamp: 1;
            max-height: 1.2rem;
        }

        .store-card-wrapper .store-description {
            font-size: 0.8125rem !important;
            -webkit-line-clamp: 2;
            max-height: 2.5rem;
        }

        .store-card-wrapper .store-description-row {
            min-height: 50px;
        }

        .view-store-button {
            height: 44px !important;
            font-size: 0.875rem !important;
        }

        .store-card-wrapper .distance-text {
            font-size: 0.8125rem !important;
        }
    }

    @media (max-width: 599px) {
        .store-card {
            box-shadow: 0 2px 4px rgb(0 0 0 / 10%) !important;
            min-height: 300px;
        }

            .store-card:hover {
                transform: none;
                box-shadow: 0 2px 4px rgb(0 0 0 / 10%) !important;
            }

            .store-card:active {
                transform: scale(0.98);
            }

        .store-banner-container {
            height: 80px;
        }

        .store-card:hover .store-banner-image,
        .store-card:hover .store-logo {
            transform: none;
        }

        .store-content {
            padding: 0 10px;
            min-height: 130px;
        }

        .store-header {
            margin-top: -30px !important;
            margin-bottom: 16px !important;
            text-align: center !important;
            min-height: 90px;
        }

        .store-logo-column {
            margin-bottom: 12px !important;
        }

        .store-logo {
            width: 60px;
            height: 60px;
            margin: 0 auto;
        }

        .store-info-column {
            padding-left: 0 !important;
            text-align: center !important;
        }

        .rental-store-name {
            font-size: 1rem !important;
        }

        .store-card-wrapper .store-slogan {
            font-size: 0.75rem !important;
            -webkit-line-clamp: 1;
        }

        .store-card-wrapper .store-description-row {
            margin-bottom: 12px !important;
            min-height: 40px;
        }

        .store-card-wrapper .store-description {
            font-size: 0.75rem !important;
            text-align: center !important;
            -webkit-line-clamp: 2;
        }

        .view-store-button {
            height: 40px !important;
            font-size: 0.8125rem !important;
        }

        .store-card-wrapper .distance-section {
            padding: 6px 10px !important;
        }

        .store-card-wrapper .distance-text {
            font-size: 0.75rem !important;
        }

        .store-card-wrapper .distance-icon {
            font-size: 1rem !important;
        }
    }

    @media (max-width: 359px) {
        .store-banner-container {
            height: 60px;
        }

        .store-logo {
            width: 50px;
            height: 50px;
        }

        .store-header {
            margin-top: -20px !important;
        }

        .rental-store-name {
            font-size: 0.875rem !important;
        }

        .store-card-wrapper .store-slogan {
            display: none;
        }

        .store-card-wrapper .store-description {
            font-size: 0.6875rem !important;
        }

        .view-store-button {
            height: 36px !important;
            font-size: 0.75rem !important;
        }
    }

    @media (hover: none) and (pointer: coarse) {
        .view-store-button {
            min-height: 44px !important;
        }

        .store-card:active {
            opacity: 0.9;
        }
    }

    @media (prefers-contrast: more) {
        .store-card {
            border: 2px solid currentcolor;
        }

        .store-logo {
            border-color: currentcolor;
        }

        .view-store-button {
            border: 1px solid currentcolor !important;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .store-card,
        .store-banner-image,
        .store-logo,
        .view-store-button {
            transition: none !important;
        }
    }

    @media (max-width: 768px) {
        .store-card-wrapper .rz-col-12 {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
    }

    /* ── Dark mode (D5 §13.9 swing · paired flip) — StoreCard's RadzenCard surface flips dark via the C4
       --rz-* projection (--rz-panel-background-color -> #1e293b), but its text/borders were hardcoded light,
       so they stranded on the flipped surface. Re-pair each to the dark surface via --rently-* tokens. Every
       rule is scoped to .store-card (RentalCard shares .rental-store-name/.store-slogan/.store-description/
       .distance-section). Light mode is byte-identical — these values exist ONLY under [data-theme="dark"]. ── */
    [data-theme="dark"] .store-card .rental-store-name {
        color: var(--rently-text-strong); /* was #727272 (3.04:1 fail) -> #f1f5f9 13.35:1 */
    }

    [data-theme="dark"] .store-card .store-slogan {
        color: var(--rently-text-tertiary); /* was #727272 (3.04:1 fail) -> #94a3b8 5.71:1 */
    }

    [data-theme="dark"] .store-card .store-description {
        color: var(--rently-text-secondary); /* was #424242 (1.46:1 fail) -> #cbd5e1 9.86:1 */
    }

    [data-theme="dark"] .store-card .view-store-button {
        color: var(--rently-secondary) !important; /* was #c72e1c (2.67:1 fail) -> lifted coral #f4604f 4.62:1 */
    }

    [data-theme="dark"] .store-card .view-store-button:hover {
        color: var(--rently-secondary-hover) !important; /* -> #f6766a 5.38:1 */
    }

    [data-theme="dark"] .store-card .store-footer {
        border-top-color: var(--rently-border); /* #e0e0e0 -> #334155 */
    }

    [data-theme="dark"] .store-card .distance-section {
        background-color: var(--rently-muted-bg); /* #fafafa -> #334155 island */
        border-top-color: var(--rently-border); /* #e0e0e0 -> #334155 */
    }

    [data-theme="dark"] .store-card .distance-text {
        color: var(--rently-text-secondary); /* paired catch: flips to #94a3b8 4.04:1 on the strip -> #cbd5e1 6.98:1 */
    }

    /* The white logo plate's drop-shadow is a light-tuned black (rgba(0,0,0,0.15)) that vanishes on the dark
       card, leaving the plate looking flat/pasted. Restore its lift with a hairline ring + a deeper shadow. */
    [data-theme="dark"] .store-card .store-logo {
        box-shadow: 0 0 0 1px var(--rently-border), 0 2px 8px rgb(2 6 23 / 50%);
    }