/*
 * Cart & Checkout — shared stylesheet
 *
 * Loaded for EVERY template from App.razor, after MudBlazor.min.css and before
 * the template stylesheet (css/templates/<template>.css, injected through
 * <HeadOutlet />).
 *
 * The cart and checkout pages are the same components on every site
 * (Pages/Cart.razor, Pages/Checkout/CheckoutPage.razor and
 * Components/Checkout/*), so their page-level styling lives here ONCE instead
 * of being repeated — and drifting — per template. The DoorDash Retail
 * treatment is the reference: the components render on the MudBlazor theme
 * built in SiteLayoutBase.BuildWebStoreTheme (primary colour, typography), and
 * this file only adds the page layout on top of it.
 *
 * COLOURS ARE NOT SET HERE. Buttons, links and the order-summary text are
 * MudBlazor Color="Primary" and take the site's theme primary, which comes from
 * the Hive Admin colour items (`--color-1` = Primary, `--color-2` = Secondary,
 * `--color-3` = Background, `--color-4` = Text, `--color-5` = AppBar). A site
 * without a `--color-1` gets MudBlazor's Blue fallback, which looks like the
 * Bootstrap primary. If a site's cart/checkout buttons are the wrong colour,
 * fix its `--color-1` in Hive Admin; the DoorDash templates additionally pin
 * `--mud-palette-primary` to their brand red as a safety net.
 *
 * Load order matters twice:
 *   - after MudBlazor.min.css, because Cart.razor carries `pa-0` on its
 *     container and Mud's utility is `!important`; the padding below has to be
 *     later in the cascade to win.
 *   - before the template stylesheet, so a template can still override a rule
 *     here. That should be the exception, not the rule: shared cart/checkout
 *     changes belong in this file. Site-specific tweaks belong in Hive Admin
 *     (SiteSettings.StyleSheet).
 */

/* ── Cart page (Pages/Cart.razor) ──────────────────────────── */

.cart-container {
    padding-top: 32px !important;
    padding-bottom: 48px !important;
    padding-right: 2rem !important;
    padding-left: 2rem !important;
}

/* ── Checkout page (Pages/Checkout/CheckoutPage.razor) ─────── */

.checkout-main-grid {
    justify-content: center !important;
    margin-bottom: 48px !important;
    padding-right: 2rem !important;
    padding-left: 2rem !important;
    box-sizing: border-box;
}

.checkout-step-panels {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 992px) {
    .cart-container {
        padding-right: 2.5rem !important;
        padding-left: 2.5rem !important;
    }

    .checkout-main-grid {
        padding-right: 2.5rem !important;
        padding-left: 2.5rem !important;
    }
}

/* Once the order is submitted CheckoutPage disables all six panels, which is what
   stops the shopper clicking back into a step they can no longer change. MudBlazor
   greys the header of a disabled panel
   (.mud-disabled > .mud-expand-panel-header { color: var(--mud-palette-text-disabled) }),
   which is right for steps 1-5 - they read as finished and inert - but wrong for
   Confirmation, the one panel that is disabled purely so it cannot be collapsed shut
   and whose content the shopper is actively reading. Restore its heading colour.
   Specificity (0,3,0) beats MudBlazor's (0,2,0), and this file loads after
   MudBlazor.min.css, so no !important is needed. */
.checkout-expansion-panel-confirmation.mud-disabled > .mud-expand-panel-header {
    color: inherit;
}

/* ── Cart recommendations (RecommendationsPanel on the cart page) ── */

.cart-recommendations-wrap {
    max-width: 1200px;
    margin: 2rem auto 0;
    padding: 0 0.75rem;
}

.cart-recommendations-wrap .recommendations-section {
    text-align: center;
}

.cart-recommendations-wrap .homepage-featured-title {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 1rem !important;
}

/* keep cards centered */
.cart-recommendations-wrap .row {
    justify-content: center;
}

@media (max-width: 768px) {
    .cart-recommendations-wrap {
        padding: 0 0.5rem;
    }
}