/*
 * order-summary-persist.css
 * Mobile-only (max-width:620px). Makes the order summary that already
 * exists inside Step 1 reachable from every step via a small collapsible
 * bar shown above the wizard. Desktop is completely untouched - .osp-wrap
 * is display:none outside the same 620px breakpoint already used
 * elsewhere on this page.
 *
 * Loaded after order-styles.css / multi-product.css / quote-source.css so
 * it reliably wins the cascade for the relocated #orderSummaryAside node
 * (which otherwise carries sizing/position rules scoped to its original
 * location inside Step 1 - those stop matching once it's moved here, so
 * this file re-declares what the new context needs instead of relying on
 * anything carrying over).
 */

.osp-wrap {
    display: none;
}

@media (max-width: 620px) {
    .osp-wrap {
        display: block;
        margin: 0 0 12px;
        border: 1px solid #e1e7ee;
        border-radius: 14px;
        background: #fff;
        overflow: hidden;
    }

    .osp-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 13px 15px;
        border: none;
        background: none;
        font: inherit;
        color: #1a237e;
        cursor: pointer;
        text-align: right;
    }

    .osp-toggle .fa-receipt {
        color: #1565c0;
        font-size: 15px;
        flex: none;
    }

    .osp-toggle-label {
        font-weight: 800;
        font-size: .88rem;
        flex: 1;
    }

    .osp-chevron {
        font-size: 12px;
        color: #90a4ae;
        transition: transform .2s ease;
        flex: none;
    }

    .osp-wrap.osp-open .osp-chevron {
        transform: rotate(180deg);
    }

    .osp-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease;
        border-top: 1px solid transparent;
    }

    .osp-wrap.osp-open .osp-body {
        max-height: 420px;
        overflow-y: auto;
        border-top-color: #eef1f4;
    }

    /* Re-style the relocated #orderSummaryAside for this new, full-width,
       chrome-free context (its old rules were scoped to being inside
       Step 1's .wizard-layout, which no longer applies once moved). */
    .osp-body #orderSummaryAside {
        display: flex !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        background-image: none !important;
        background-color: #fff !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
    }

    .osp-body .order-summary-empty,
    .osp-body .order-summary-list {
        max-height: 260px;
    }

    .osp-body .order-summary-header {
        padding: 12px 14px 10px;
    }
}