/* dynamic-carousel.css — the DynamicCarousel component (Client/Components/DynamicCarousel.razor)
   sheet. EXTRACTED VERBATIM 2026-08-24 (qa-public-O5, publish session 11) from the in-body style
   block the component carried at lines 256-735: a component's render fragment ships once PER
   INSTANCE, so the landing page's three carousels shipped three identical 12.7 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. */

    /* Container Styles */
    .dynamic-carousel-container {
        --carousel-item-gap: 24px;
        --carousel-edge-gutter: 15px;

        position: relative;
        width: 100%;
        transition: opacity 0.3s ease;
        display: block;
        touch-action: pan-y;
    }

    .dynamic-carousel-container.carousel-with-arrows {
        --carousel-edge-gutter: 64px;
    }

        .dynamic-carousel-container.loading {
            opacity: 0.7;
        }

    /* Skeleton Styles */
    .carousel-skeleton {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .carousel-skeleton-content {
        width: 100%;
        padding: 15px var(--carousel-edge-gutter) 30px;
    }

    .skeleton-item-wrapper {
        min-width: 0;
        animation: fadeIn 0.3s ease-out forwards;
    }

    /* Error & Empty States */
    .carousel-error-state,
    .carousel-empty-state {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 32px;
        width: 100%;
    }

    /* Main Carousel Styles */
    .dynamic-carousel {
        height: 100%;
        width: 100%;
    }

    /* MudCarouselItem - let MudCarousel handle positioning */
    .dynamic-carousel-item {
        height: 100%;
        width: 100%;
    }

    /* Content Wrapper */
    .dynamic-carousel-container .carousel-content-wrapper {
        padding: 15px var(--carousel-edge-gutter) 30px;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        min-height: 0;
    }

    .dynamic-carousel-container.carousel-with-bullets .carousel-content-wrapper {
        padding-bottom: 52px;
    }

    .dynamic-carousel-container.carousel-is-auto .carousel-content-wrapper {
        padding-bottom: 52px;
    }

    /* Items Stack */
    .carousel-items-stack {
        width: 100% !important;
        height: 100%;
        gap: var(--carousel-item-gap);
        align-items: stretch !important;
    }

    /* Item Wrapper */
    .carousel-item-wrapper {
        min-width: 0;
        transition: transform 0.3s ease;
        display: flex;
        height: 100%;
    }

    /* Item Content */
    .carousel-item-content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

        /* Ensure child components fill available space properly */
        .carousel-item-content > * {
            width: 100%;
            flex: 1 1 auto;
            min-height: 0;
        }

    /* Custom Arrow Styles */
    .carousel-arrow-wrapper {
        appearance: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        color: var(--rently-text-on-accent, #fff);
        background-color: var(--rz-primary);
        box-shadow: 0 4px 12px rgb(53 160 174 / 24%);
        cursor: pointer;
        transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    }

    .dynamic-carousel-arrow {
        position: absolute;
        top: 50%;
        z-index: 4;
        transform: translateY(-50%);
    }

    .dynamic-carousel-arrow--previous {
        left: calc((var(--carousel-edge-gutter) - 44px) / 2);
    }

    .dynamic-carousel-arrow--next {
        right: max(0px, calc((var(--carousel-edge-gutter) - 44px) / 2));
    }

    .dynamic-carousel-arrow:hover {
        background-color: var(--rz-primary-dark);
        box-shadow: 0 4px 12px rgb(53 160 174 / 34%);
        transform: translateY(-50%) translateY(-2px);
    }

    .dynamic-carousel-arrow:focus-visible,
    .dynamic-carousel-bullet:focus-visible {
        border-radius: 999px;
        outline: 3px solid #256f7a;
        outline-offset: 3px;
    }

    /* Red Arrow Variant for Store Carousel */
    .carousel-arrow-wrapper.arrow-red {
        background-color: var(--rz-secondary) !important;
    }

        .dynamic-carousel-arrow.arrow-red:hover {
            background-color: var(--rz-secondary-dark) !important;
        }

    .dynamic-carousel-bullets {
        position: absolute;
        z-index: 4;
        left: 50%;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateX(-50%);
    }

    .carousel-mobile-position {
        display: none;
    }

    .carousel-auto-toggle {
        appearance: none;
        position: absolute;
        z-index: 5;
        right: calc((var(--carousel-edge-gutter) - 44px) / 2);
        bottom: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        border: 1px solid var(--rently-border, #e0e0e0);
        border-radius: 999px;
        color: #256f7a;
        background: var(--rently-card-bg, #fff);
        cursor: pointer;
    }

    .carousel-auto-toggle:hover {
        background: var(--rently-muted-bg, #f5f5f5);
    }

    .carousel-auto-toggle:focus-visible {
        outline: 3px solid #256f7a;
        outline-offset: 3px;
    }

    .dynamic-carousel-bullet {
        appearance: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: transparent;
        cursor: pointer;
    }

    /* Compact capsule pagination replaces the old filled/outlined circle icons. */
    .carousel-page-dot {
        display: block;
        width: 8px;
        height: 8px;
        border: 1px solid #64748b;
        border-radius: 999px;
        background-color: #64748b;
        transition: width 0.2s ease, background-color 0.2s ease;
    }

    .carousel-page-dot--active {
        width: 24px;
        border-color: var(--rz-primary);
        background-color: var(--rz-primary);
    }

    [data-theme="dark"] .carousel-page-dot {
        border-color: #cbd5e1;
        background-color: #cbd5e1;
    }

    [data-theme="dark"] .carousel-page-dot--active {
        border-color: var(--rz-primary);
        background-color: var(--rz-primary);
    }

    /* Animation Classes */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

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

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateX(20px);
        }

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

    .dynamic-carousel-container .animate-in {
        animation: fadeIn 0.4s ease-out;
    }

    .animate-item {
        animation: slideIn 0.4s ease-out;
        animation-fill-mode: both;
    }

    /* Staggered animations */
    .carousel-item-wrapper:nth-child(1) .animate-item {
        animation-delay: 0.1s;
    }

    .carousel-item-wrapper:nth-child(2) .animate-item {
        animation-delay: 0.2s;
    }

    .carousel-item-wrapper:nth-child(3) .animate-item {
        animation-delay: 0.3s;
    }

    .carousel-item-wrapper:nth-child(4) .animate-item {
        animation-delay: 0.4s;
    }

    .carousel-item-wrapper:nth-child(5) .animate-item {
        animation-delay: 0.5s;
    }

    .carousel-item-wrapper:nth-child(6) .animate-item {
        animation-delay: 0.6s;
    }

    /* Lazy Loading Placeholder */
    .lazy-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f5f5f5;
        border-radius: 8px;
        width: 100%;
    }

    /* §13.9 D5 dark paired-flip: the #f5f5f5 placeholder is a light-island glowing on the dark page; flip it to the subtle dark surface token. MudProgressCircular Primary spinner keeps AA contrast on it; light stays byte-identical. */
    [data-theme="dark"] .lazy-placeholder {
        background-color: var(--rently-subtle-bg);
    }

    /* Progress Indicator */
    .carousel-progress {
        position: absolute;
        bottom: 0;
        left: var(--carousel-edge-gutter);
        right: var(--carousel-edge-gutter);
        height: 4px;
        overflow: hidden;
        border-radius: 999px;
        background-color: var(--rently-muted-bg, #f5f5f5);
    }

    .carousel-progress-bar {
        transition: width 0.3s ease;
    }

    /* Page Indicator */
    .carousel-page-indicator {
        position: absolute;
        bottom: 35px;
        right: var(--carousel-edge-gutter);
        background-color: var(--rently-card-bg, #fff);
        color: var(--rently-text-body, #424242);
        padding: 5px 12px;
        border: 1px solid var(--rently-border, #e0e0e0);
        border-radius: 999px;
        box-shadow: 0 4px 12px rgb(0 0 0 / 12%);
        z-index: 10;
    }

    .page-indicator-text {
        margin: 0;
        font-weight: 500;
    }

    /* Tablet Styles */
    @media (max-width: 959px) {
        .dynamic-carousel-container {
            --carousel-item-gap: 16px;
            --carousel-edge-gutter: 12px;
        }

        .dynamic-carousel-container.carousel-with-arrows {
            --carousel-edge-gutter: 56px;
        }

        .dynamic-carousel-container .carousel-content-wrapper,
        .carousel-skeleton-content {
            padding-top: 12px;
            padding-bottom: 24px;
        }

        .carousel-page-indicator {
            bottom: 30px;
            padding: 3px 10px;
        }
    }

    /* Mobile Styles */
    @media (max-width: 599px) {
        .dynamic-carousel-container {
            --carousel-item-gap: 12px;
            --carousel-edge-gutter: 10px;
        }

        .dynamic-carousel-container.carousel-with-arrows {
            /* 320px viewport - (2 x 45px gutters) = a 230px card slot. */
            --carousel-edge-gutter: 45px;
        }

        .dynamic-carousel-container .carousel-content-wrapper,
        .carousel-skeleton-content {
            padding-top: 10px;
            padding-bottom: 20px;
        }

        .carousel-page-indicator {
            bottom: 25px;
            padding: 2px 8px;
            font-size: 0.875rem;
        }

        .dynamic-carousel-bullets {
            display: none;
        }

        .carousel-mobile-position {
            position: absolute;
            z-index: 4;
            left: 50%;
            bottom: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 32px;
            padding: 4px 12px;
            transform: translateX(-50%);
            border: 1px solid var(--rently-border, #e0e0e0);
            border-radius: 999px;
            color: var(--rently-text-body, #424242);
            background: var(--rently-card-bg, #fff);
            font-size: 0.75rem;
            font-weight: 600;
            white-space: nowrap;
        }
    }

    /* Touch-friendly adjustments */
    @media (hover: none) and (pointer: coarse) {
        .carousel-item-wrapper {
            -webkit-tap-highlight-color: transparent;
        }

        .dynamic-carousel-arrow:hover {
            transform: translateY(-50%);
        }
    }

    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce) {
        .dynamic-carousel-container,
        .dynamic-carousel-container * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* High contrast mode */
    @media (prefers-contrast: more) {
        .carousel-arrow-wrapper {
            border: 2px solid currentcolor;
        }

        .carousel-page-indicator {
            border: 2px solid white;
        }
    }

    @media (forced-colors: active) {
        .carousel-arrow-wrapper,
        .carousel-auto-toggle,
        .carousel-page-dot,
        .carousel-page-indicator {
            border: 1px solid ButtonText;
        }

        .carousel-page-dot--active {
            background: Highlight;
        }
    }