/* Cart recommendation modal - Ryan theme
   Shell        : design/pdp/dk-pdp-add-s2.jpg
   Cart state   : design/pdp/iherb-pdp-add-s2.jpg + iherb-pdp-add-s3.jpg
   Product card : design/pdp/Product_Row.png
   Quantity     : design/pdp/quantity.png (outlined compact variant) */

.tc-cart-rec {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    font-family: inherit;
}

.tc-cart-rec--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.tc-cart-rec__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
}

.tc-cart-rec__panel {
    position: relative;
    direction: rtl;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    max-height: 92vh;
    overflow: hidden;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.16);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(0);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.tc-cart-rec--hidden .tc-cart-rec__panel {
    transform: translateY(100%);
}

/* ---------- handle + header ---------- */
.tc-cart-rec__handle {
    flex: 0 0 auto;
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: #d9d9d9;
    margin: 6px auto 0;
}

.tc-cart-rec__header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: 50px;
    padding-inline: 8px 12px;
    border-bottom: 1px solid #f0f0f1;
}

.tc-cart-rec__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #292d32;
    cursor: pointer;
}

.tc-cart-rec__close svg {
    width: 17px;
    height: 17px;
}

.tc-cart-rec__added {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: 8px;
    color: #00a049;
}

.tc-cart-rec__added-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.tc-cart-rec__added-text {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.tc-cart-rec__cart-link {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f0f0f1;
    color: #494a5c;
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
}

.tc-cart-rec__cart-link:hover,
.tc-cart-rec__cart-link:focus {
    color: #494a5c;
    text-decoration: none;
}

.tc-cart-rec__cart-link svg {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
}

/* ---------- scrollable body + sticky footer ---------- */
.tc-cart-rec__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.tc-cart-rec__footer {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #f0f0f0;
}

.tc-cart-rec__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.tc-cart-rec__btn:hover,
.tc-cart-rec__btn:focus {
    text-decoration: none;
}

.tc-cart-rec__btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.tc-cart-rec__btn--primary {
    border: 1px solid #ed303d;
    background: #ed303d;
    color: #fff;
}

.tc-cart-rec__btn--primary:hover,
.tc-cart-rec__btn--primary:focus {
    color: #fff;
}

.tc-cart-rec__btn--secondary {
    border: 1px solid #ed303d;
    background: #fff;
    color: #ed303d;
}

.tc-cart-rec__btn--secondary:hover,
.tc-cart-rec__btn--secondary:focus {
    color: #ed303d;
}

/* ---------- subtotal + free shipping ---------- */
.tc-cart-rec__cartstate {
    flex: 0 0 auto;
    padding: 12px 16px 14px;
    border-bottom: 1px solid #f0f0f1;
}

.tc-cart-rec__subtotal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.tc-cart-rec__subtotal-label {
    color: #292d32;
    font-size: 13px;
    font-weight: 700;
}

.tc-cart-rec__subtotal-count {
    color: #8f8f8f;
    font-size: 12px;
    font-weight: 400;
}

.tc-cart-rec__subtotal-value {
    color: #292d32;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.tc-cart-rec__ship-bar {
    height: 6px;
    margin-top: 10px;
    border-radius: 999px;
    background: #ededed;
    overflow: hidden;
}

.tc-cart-rec__ship-fill {
    height: 100%;
    border-radius: inherit;
    background: #00b31d;
    transition: width 0.35s ease;
}

.tc-cart-rec__ship-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: #292d32;
    font-size: 12px;
}

.tc-cart-rec__ship-status svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: #8f8f8f;
}

.tc-cart-rec__ship-status strong {
    font-weight: 700;
}

.tc-cart-rec__ship-status--free {
    color: #00b31d;
    font-weight: 700;
}

.tc-cart-rec__ship-status--free svg {
    color: #00b31d;
}

/* ---------- section head ---------- */
/*
 * ONE inset, owned by the section.
 *
 * The head and the rail used to carry 16px of their own inline padding each. Because the
 * rail is also the carousel's clip box, that padding sat INSIDE the overflow: slides
 * scrolled underneath it and ran to the panel edge, so a rail that overflowed was flush
 * with the modal while the title above it was inset - two different edges in one section,
 * and the cards read as loose tiles floating in the panel rather than as content belonging
 * to it. Putting the inset on the section makes the clip edge and the content edge the same
 * line: every card starts and ends exactly under the title, in both directions.
 */
.tc-cart-rec__section {
    flex: 0 0 auto;
    padding-top: 14px;
    padding-inline: 16px;
}

.tc-cart-rec__section-head {
    padding: 0 0 12px;
}

.tc-cart-rec__section-title {
    color: #292d32;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
}

.tc-cart-rec__section-sub {
    color: #8f8f8f;
    font-size: 12px;
    line-height: 1.7;
}

.tc-cart-rec__section-sub:empty {
    display: none;
}

/* ---------- horizontal rail (native scroll snap, no carousel lib) ---------- */
.tc-cart-rec__rail {
    display: flex;
    gap: 8px;
    /* inline inset belongs to .tc-cart-rec__section - see the note there */
    padding: 0 0 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.tc-cart-rec__rail::-webkit-scrollbar {
    display: none;
}

/* ---------- product card (Product_Row.png) ----------
   FLAT. The card is an item inside a modal section, not a standalone tile: no surface of its
   own, no outer padding or margin, no radius, no shadow. It inherits the panel it sits on, so
   only its content is visible and the section's inset is the only edge in play. Internal
   rhythm (media -> title -> price -> discount) is untouched; this is the same product-card
   language the storefront rows use, minus a plate they do not have either. */
.tc-rec-card {
    flex: 0 0 172px;
    width: 172px;
    scroll-snap-align: start;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    text-align: right;
}

.tc-rec-card__media {
    position: relative;
    width: 172px;
    height: 228px;
}

.tc-rec-card__image {
    display: block;
    width: 100%;
    height: 100%;
    /* square corners: a rounded plate is what read as a floating card */
    border-radius: 0;
    overflow: hidden;
    background: #f5f5f5;
}

.tc-rec-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tc-rec-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 46px;
    margin-top: 10px;
    color: #292d32;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.75;
    text-decoration: none;
}

.tc-rec-card__title:hover,
.tc-rec-card__title:focus {
    color: #292d32;
    text-decoration: none;
}

.tc-rec-card__price {
    margin-top: 8px;
    color: #292d32;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.tc-rec-card__currency {
    margin-inline-start: 4px;
    font-size: 12px;
    font-weight: 400;
}

.tc-rec-card__discount {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.tc-rec-card__old-price {
    color: #bcbcbc;
    font-size: 12px;
    text-decoration: line-through;
    white-space: nowrap;
}

.tc-rec-card__discount-badge {
    color: #ed2e7e;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* ---------- quantitySuperMarket, styled locally only ---------- */
.tc-rec-card__qty {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    line-height: 0;
}

/* The control itself is the theme's canonical product-card QSM
   (lib/themes/ryan/assets/qsm/qsm.css, .vp-quantity-theme-v1). Only modal-specific
   placement lives here - never a second copy of its design. */
.tc-rec-card__qty .vp-quantity-theme-v1 {
    margin: 0;
}

/* The glyph is NOT restated here. This block used to resize an <svg> that the modal's own
   script injected in place of the canonical <img>; that swap is gone (see the note in
   cart-recommendation-modal.js), so the control paints the same 21px cart glyph as every
   other product card on the storefront, straight out of qsm.css. */

/* FastAddProductToCartCircle renders its own absolutely-positioned host wrapper for
   catalog cards. Inside this modal the card slot is already positioned, so the
   wrapper sits in flow and the slot above decides where the control goes. */
.tc-rec-card__qty .vp-product-item-theme-v2.in-productBox {
    position: static;
    inset: auto;
    transform: none;
    display: block;
}

/* ---------- skeletons (same geometry as the real card) ---------- */
.tc-cart-rec__cartstate-skeleton,
.tc-rec-card__sk-media,
.tc-rec-card__sk-line {
    display: block;
    background: linear-gradient(90deg, #f1f2f4 25%, #f9fafb 50%, #f1f2f4 75%);
    background-size: 200% 100%;
    animation: tc-cart-rec-shimmer 1.2s infinite linear;
}

.tc-cart-rec__cartstate-skeleton {
    height: 60px;
    border-radius: 10px;
}

/* skeleton follows the real card: same box, same square corners */
.tc-rec-card__sk-media {
    width: 172px;
    height: 228px;
    border-radius: 0;
}

.tc-rec-card__sk-line {
    height: 12px;
    border-radius: 6px;
}

.tc-rec-card__sk-line--title {
    margin-top: 18px;
}

.tc-rec-card__sk-line--title2 {
    width: 65%;
    margin-top: 10px;
}

.tc-rec-card__sk-line--price {
    width: 45%;
    height: 21px;
    margin-top: 12px;
}

.tc-cart-rec__empty {
    padding: 8px 16px 24px;
    color: #8f8f8f;
    font-size: 13px;
}

body.tc-cart-rec-open {
    overflow: hidden;
}

@keyframes tc-cart-rec-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* =========================================================================
   DIGIKALA PRESENTATION MODE (approved Phase-1 / V2 presentation)
   Same DOM, same API, same quantitySuperMarket - only the presentation
   differs. Selected by CartRecommendationModalSettings.PresentationMode.
   ========================================================================= */

/* Phase-1 shows only: handle + compact header + one continuous flat list */
.tc-cart-rec--digikala .tc-cart-rec__cartstate,
.tc-cart-rec--digikala .tc-cart-rec__section-head,
.tc-cart-rec--digikala .tc-cart-rec__footer {
    display: none;
}

.tc-cart-rec--digikala .tc-cart-rec__section {
    padding-top: 0;
}

/* rail becomes one continuous vertical list */
.tc-cart-rec--digikala .tc-cart-rec__rail {
    display: block;
    padding: 0;
    overflow-x: hidden;
    scroll-snap-type: none;
}

.tc-cart-rec--digikala .tc-rec-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: 12px;
    flex: none;
    width: auto;
    /* inline inset is the section's; only the row's own vertical rhythm lives here */
    padding: 14px 0 16px;
    border-bottom: 1px solid #ebebeb;
    scroll-snap-align: none;
}

.tc-cart-rec--digikala .tc-rec-card:last-child {
    border-bottom: 0;
}

.tc-cart-rec--digikala .tc-rec-card__media {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 96px;
    height: 96px;
}

.tc-cart-rec--digikala .tc-rec-card__image {
    border-radius: 0;
    background: #fff;
}

.tc-cart-rec--digikala .tc-rec-card__image img {
    object-fit: contain;
}

.tc-cart-rec--digikala .tc-rec-card__title {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    margin-top: 0;
}

.tc-cart-rec--digikala .tc-rec-card__price {
    grid-column: 2;
    grid-row: 3;
    margin-top: 0;
    padding-top: 10px;
    text-align: left;
    font-size: 16px;
}

.tc-cart-rec--digikala .tc-rec-card__discount {
    grid-column: 2;
    grid-row: 3;
    justify-content: flex-start;
}

/* Phase-1 quick add: compact red circle over the image */
.tc-cart-rec--digikala .tc-rec-card__qty {
    right: 6px;
    bottom: -6px;
}

/* The circle's size, colour, shadow and glyphs are the canonical product-card
   control's own - 35px / 21px / 92px, shared with home and the category grid.
   Nothing about its design is restated here. */

/* skeleton follows the flat row geometry in this mode */
.tc-cart-rec--digikala .tc-rec-card--skeleton {
    grid-template-rows: auto auto auto;
}

.tc-cart-rec--digikala .tc-rec-card__sk-media {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 96px;
    height: 96px;
    border-radius: 0;
}

.tc-cart-rec--digikala .tc-rec-card__sk-line {
    grid-column: 2;
}

.tc-cart-rec--digikala .tc-rec-card__sk-line--title {
    margin-top: 4px;
}

.tc-cart-rec--digikala .tc-rec-card__sk-line--price {
    width: 45%;
    margin-top: 16px;
}

@media (min-width: 992px) {
    .tc-cart-rec {
        align-items: center;
        padding: 32px;
    }

    .tc-cart-rec__panel {
        max-width: 620px;
        max-height: 88vh;
        border-radius: 16px;
    }

    .tc-cart-rec--hidden .tc-cart-rec__panel {
        transform: translateY(24px);
    }

    .tc-cart-rec__handle {
        display: none;
    }

    .tc-cart-rec__header {
        height: 56px;
    }

    /* Desktop has no touch panning, so each rail becomes a Swiper carousel with the theme's own
       previous/next arrows. Mobile keeps the native touch rail. */
    .tc-cart-rec__rail {
        padding-bottom: 12px;
        overscroll-behavior-x: contain;
    }

    .tc-cart-rec__rail--swiper {
        position: relative;
        display: block;
        overflow: hidden;
        scroll-snap-type: none;
    }

    .tc-cart-rec__rail--swiper .swiper-wrapper {
        display: flex;
        align-items: stretch;
        box-sizing: content-box;
    }

    .tc-cart-rec__rail--swiper .swiper-slide {
        flex: 0 0 auto;
        width: 172px;
        height: auto;
    }

    /* arrows follow the theme's slider language (sliderTheme.less: .swiper-next/.swiper-prev),
       kept inside the rail so the modal's own overflow cannot clip them */
    .tc-cart-rec__rail--swiper .swiper-next,
    .tc-cart-rec__rail--swiper .swiper-prev {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        z-index: 5;
        color: #3f3f3f;
        font-size: 40px;
        background: none;
        cursor: pointer;
        transition: all .3s ease;
    }

    .tc-cart-rec__rail--swiper .swiper-next i,
    .tc-cart-rec__rail--swiper .swiper-prev i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 16px;
        box-shadow: 0 0 8px rgba(0, 0, 0, .08);
        -webkit-backdrop-filter: blur(15px);
        backdrop-filter: blur(15px);
        background: rgba(255, 255, 255, .3);
        transition: all .3s ease;
    }

    .tc-cart-rec__rail--swiper .swiper-next:hover i,
    .tc-cart-rec__rail--swiper .swiper-prev:hover i {
        background: #fff;
        color: #5e5e5e;
    }

    .tc-cart-rec__rail--swiper .swiper-next.swiper-button-disabled,
    .tc-cart-rec__rail--swiper .swiper-prev.swiper-button-disabled {
        opacity: 0;
        visibility: hidden;
    }

    .tc-cart-rec__rail--swiper .swiper-prev {
        right: 4px;
    }

    .tc-cart-rec__rail--swiper .swiper-prev i {
        padding-left: 3px;
    }

    .tc-cart-rec__rail--swiper .swiper-next {
        left: 4px;
    }

    .tc-cart-rec__rail--swiper .swiper-next i {
        padding-right: 3px;
    }

    /* fallback rails (Swiper unavailable) keep a slim visible scrollbar */
    .tc-cart-rec__rail:not(.tc-cart-rec__rail--swiper) {
        scrollbar-width: thin;
        scrollbar-color: #d5d5d5 transparent;
    }

    .tc-cart-rec__rail:not(.tc-cart-rec__rail--swiper)::-webkit-scrollbar {
        display: block;
        height: 6px;
    }

    .tc-cart-rec__rail:not(.tc-cart-rec__rail--swiper)::-webkit-scrollbar-track {
        background: transparent;
    }

    .tc-cart-rec__rail:not(.tc-cart-rec__rail--swiper)::-webkit-scrollbar-thumb {
        background: #dcdcdc;
        border-radius: 3px;
    }

    .tc-cart-rec__rail:not(.tc-cart-rec__rail--swiper)::-webkit-scrollbar-thumb:hover {
        background: #bdbdbd;
    }
}