/*
 * Default public component styles.
 *
 * Keep component templates free of embedded CSS. Client-specific stylesheets
 * can override these defaults by loading rules with the same component classes.
 */

.mr-sys2-render {
    display: contents;
}

.mr-sys2-section-heading {
    margin-bottom: 1rem;
}

.sys2-desktop-card {
    border-radius: 1.3rem;
}

.sys2-desktop-price {
    font-size: 15px;
}

.sys2-desktop-actions {
    float: right;
}

.cart-cross-sell-row {
    display: flex;
    align-items: center;
}

.cart-cross-sell-thumb {
    flex: 0 0 auto;
}

.cart-cross-sell-content {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 1rem;
}

.cart-cross-sell-name {
    display: block;
    font-weight: 700;
}

.cart-cross-sell-description {
    display: block;
    font-weight: 400;
}

.cart-cross-sell-actions {
    flex: 0 0 auto;
    margin-left: .75rem;
    text-align: right;
}

.cart-cross-sell-price {
    display: block;
    margin-bottom: .25rem;
    font-weight: 700;
}

.cart-cross-sell-button-icon {
    display: none;
}

@media (min-width: 768px) {
    .mr-sys2-render > [class*="col-"] {
        padding-right: .75rem;
        padding-left: .75rem;
    }
}

@media (max-width: 767.98px) {
    .mr-sys2-section-heading {
        margin-bottom: .65rem;
        padding-right: .75rem;
        padding-left: .75rem;
    }

    .mr-sys2-section-heading h4 {
        font-size: 1.05rem;
        line-height: 1.25;
    }

    .mr-sys3-render h4 {
        font-size: .86rem;
        line-height: 1.18;
    }

    .mr-sys3-render .card-body > span {
        font-size: .78rem !important;
    }

    .mr-sys3-render .btn-xs {
        font-size: .72rem;
    }

    .mr-sys3-render .btn-xs .fa-clock {
        font-size: .68rem;
    }

    #cartModal {
        position: fixed;
        inset: 0;
        z-index: 2300 !important;
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        height: 100dvh;
        overflow: hidden !important;
        overscroll-behavior: none;
        background: transparent;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body.cart-modal-open > .modal-backdrop {
        z-index: 2290 !important;
    }

    body.cart-modal-open #header {
        z-index: 1000 !important;
    }

    #cartModal #crossSellModalCOL {
        display: flex;
        align-items: flex-end;
        width: 100%;
        height: 100%;
        max-width: none;
        min-height: 0;
        max-height: none;
        margin: 0;
        padding-top: max(.4rem, env(safe-area-inset-top));
        box-sizing: border-box;
    }

    #cartModal #crossSellModalCOL .modal-content {
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
        border-radius: 1rem 1rem 0 0 !important;
        box-shadow: 0 -.5rem 2rem rgba(18, 28, 45, .14);
    }

    #cartModal #load_data4 {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
    }

    #cartModal .modal-header {
        position: sticky;
        top: 0;
        z-index: 2;
        flex: 0 0 auto;
        min-height: 2.8rem;
        padding: .65rem .85rem .35rem;
        background: #fff;
    }

    #cartModal .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        padding: .85rem .85rem calc(1rem + env(safe-area-inset-bottom));
        scroll-behavior: smooth;
        scroll-padding-top: .75rem;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }

    #cartModal #successAddModalCard,
    #cartModal #crossSellCard {
        margin-bottom: .85rem !important;
    }

    #cartModal #successAddModalCard h3,
    #cartModal #crossSellCard h3 {
        margin-bottom: .85rem !important;
        font-size: 1.05rem;
        line-height: 1.2;
    }

    #cartModal #successAddModalCard .alert {
        padding: .65rem .75rem;
        margin-bottom: .75rem;
        font-size: .82rem;
    }

    #cartModal #crossSellCol {
        margin-bottom: .65rem !important;
    }

    #cartModal #crossSellCol .card {
        border-radius: .9rem !important;
    }

    #cartModal #crossSellCol .card-header {
        padding: .65rem .75rem !important;
    }

    #cartModal #crossSellCol .card-title {
        margin-bottom: 0;
        font-size: .95rem;
    }

    #cartModal #crossSellCol .card-body {
        padding: .25rem .7rem .4rem !important;
    }

    #cartModal #crossSellCol .list-group-item {
        padding: .4rem 0;
    }

    #cartModal #crossSellCol .cart-cross-sell-item:nth-child(n + 3) {
        display: none;
    }

    #cartModal #crossSellCol .cart-cross-sell-row {
        display: grid;
        grid-template-columns: 2.35rem minmax(0, 1fr) 2.35rem;
        align-items: center;
        gap: .65rem;
        min-height: 3.25rem;
    }

    #cartModal #crossSellCol .cart-cross-sell-thumb {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.35rem;
        height: 2.35rem;
    }

    #cartModal #crossSellCol .cart-cross-sell-thumb .avatar {
        width: 2.35rem;
        height: 2.35rem;
        object-fit: contain;
    }

    #cartModal #crossSellCol .cart-cross-sell-content {
        min-width: 0;
        margin-left: 0;
    }

    #cartModal #crossSellCol .cart-cross-sell-name {
        color: var(--bs-dark);
        font-size: .82rem;
        line-height: 1.18;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #cartModal #crossSellCol .cart-cross-sell-description {
        display: none;
    }

    #cartModal #crossSellCol .cart-cross-sell-price {
        margin: .16rem 0 0;
        color: var(--bs-secondary-color);
        font-size: .76rem;
        line-height: 1.15;
        white-space: nowrap;
    }

    #cartModal #crossSellCol .cart-cross-sell-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.35rem;
        margin-left: 0;
    }

    #cartModal #crossSellCol .cart-cross-sell-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.35rem;
        height: 2.35rem;
        min-height: 2.35rem;
        padding: 0;
        border: 2px solid currentColor;
        border-radius: .65rem;
        background: transparent;
        box-shadow: none;
    }

    #cartModal #crossSellCol .cart-cross-sell-button.btn-primary {
        color: var(--myrepair-brand-accessible-color, var(--bs-primary)) !important;
        background: transparent !important;
    }

    #cartModal #crossSellCol .cart-cross-sell-button.btn-danger {
        color: var(--bs-danger) !important;
        background: transparent !important;
    }

    #cartModal #crossSellCol .cart-cross-sell-button-label {
        display: none;
    }

    #cartModal #crossSellCol .cart-cross-sell-button-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        font-size: .95rem;
        line-height: 1;
    }

    .mr-sys2-render > .mobile-true {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        margin-bottom: .5rem !important;
    }

    .sys2-mobile-card {
        border-radius: .85rem;
    }

    .sys2-mobile-card .card-body {
        display: grid;
        grid-template-columns: 2.35rem minmax(0, 1fr) 2.35rem;
        align-items: center;
        gap: .65rem;
        padding: .55rem .75rem;
    }

    .sys2-mobile-thumb {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.35rem;
        height: 2.35rem;
    }

    .sys2-mobile-thumb img {
        width: 2.35rem;
        height: 2.35rem;
        object-fit: contain;
    }

    .sys2-mobile-content {
        min-width: 0;
    }

    .sys2-mobile-title {
        margin: 0;
        font-size: .86rem;
        line-height: 1.18;
    }

    .sys2-mobile-title a {
        display: block;
        color: var(--bs-dark);
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .sys2-mobile-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .2rem .55rem;
        margin-top: .18rem;
        line-height: 1.15;
    }

    .sys2-mobile-price {
        color: var(--bs-secondary-color);
        font-size: .78rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .sys2-mobile-time {
        color: var(--bs-secondary-color);
        font-size: .72rem;
        white-space: nowrap;
    }

    .sys2-mobile-time i {
        margin-right: .15rem;
        font-size: .68rem;
    }

    .sys2-mobile-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.35rem;
        height: 2.35rem;
        padding: 0;
        border: 2px solid var(--myrepair-brand-accessible-color, var(--bs-primary));
        border-radius: .65rem;
        color: var(--myrepair-brand-accessible-color, var(--bs-primary));
        background: transparent;
        text-decoration: none;
    }

    .sys2-mobile-action:hover,
    .sys2-mobile-action:focus {
        color: var(--myrepair-brand-accessible-color, var(--bs-primary));
    }

    .sys2-mobile-action i {
        margin: 0;
        font-size: .9rem;
        line-height: 1;
    }
}