/* 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);
}

/* SHEET HEIGHT — 80% of the VISUAL viewport.
 *
 * `vh` is the wrong unit on a mobile browser: it is the *large* viewport, so it ignores the
 * URL bar and the on-screen keyboard and a "92vh" sheet ended up taller than the space the
 * user can actually see. `--tc-cri-max-h` is written by cart-recommendation-modal.js from
 * window.visualViewport.height (the real, currently-visible box) and re-written whenever that
 * box changes. `80dvh` is the fallback for browsers without visualViewport - dvh at least
 * tracks the dynamic toolbar, unlike vh, and it is the taller of the two ratios so nothing is
 * clipped when the var is missing. The body below owns the overflow, so anything past the max
 * scrolls inside the sheet instead of pushing the footer off-screen.
 *
 * The max is not fixed: two or more rows get 90%, which leaves the second row breaking the bottom
 * edge so the sheet reads as having more below; a single row is sized to exactly what it needs,
 * bounded to 60%-90%, so the one rail is whole without the empty space a full-height sheet left
 * under it. See sheetMaxHeight() in cart-recommendation-modal.js.
 * It stays a MAX either way, so a short rail still sizes to its own content. */
.tc-cart-rec__panel {
    position: relative;
    direction: rtl;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    max-height: var(--tc-cri-max-h, 80dvh);
    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 ---------- */
/* The handle is the drag target, so it needs a finger-sized hit area rather than the 4px the
   pill is drawn at - the pill stays 4px, the padding around it is what the finger lands on.
   `touch-action: none` hands the vertical gesture to the pointer handlers in
   cart-recommendation-modal.js; without it the browser starts a scroll and the sheet never
   sees pointermove. */
.tc-cart-rec__handle {
    flex: 0 0 auto;
    box-sizing: content-box;
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: #d9d9d9;
    margin: 0 auto;
    padding: 8px 24px 6px;
    background-clip: content-box;
    touch-action: none;
    cursor: grab;
}

.tc-cart-rec__handle:active {
    cursor: grabbing;
}

/* The header is the sheet's second grab area. Only the vertical gesture is claimed here
   (`pan-x` stays with the browser) because the header holds the close button and the
   "go to cart" link, which must still take their own taps. */
.tc-cart-rec__header {
    touch-action: pan-x;
}

.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;
}

/* MEDIA ASPECT IS THE STORE'S, NOT OURS.
 *
 * This box was a hard 172x228, so a store configured for Square still got a 3/4 portrait
 * plate here and its square photography was cropped by `object-fit: cover`.
 *
 * The theme already owns this decision: StoreInformationCustomFrameworkSettings
 * .ProductCardImageAspectRatio is resolved once per request in _Root.Head.cshtml and published
 * as the `tc-media-portrait` / `tc-media-square` class on <body>; product-card.css turns that
 * into `--tc-media-ratio` for `.tc-card`. Because that mapping is scoped to `.tc-card`, the
 * token never reached this card - so the SAME body classes are mapped onto `.tc-rec-card`
 * below. No new setting, no plugin-specific format: one source of truth, two consumers. */
.tc-media-portrait .tc-rec-card { --tc-media-ratio: 3 / 4; }
.tc-media-square .tc-rec-card { --tc-media-ratio: 1 / 1; }

.tc-rec-card__media {
    position: relative;
    width: 172px;
    height: auto;
    aspect-ratio: var(--tc-media-ratio, 3 / 4);
}

@supports not (aspect-ratio: 1 / 1) {
    .tc-rec-card__media { 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%;
    /* contain, matching the canonical card - cover cropped portrait products */
    object-fit: contain;
}

.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: auto;
    aspect-ratio: var(--tc-media-ratio, 1 / 1);
}

.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 {
        /* DESKTOP: roughly twice the usable area of the 620px dialog this shipped with.
           Width does the work - 620 -> 900 is 1.45x on its own, and every extra 172px of width
           is another readable card in the rail, so the visible card count rises with it rather
           than the cards being scaled. Height is raised a little too (88 -> 90vh) but stays a
           cap, and `width: min(900px, calc(100vw - 64px))` keeps the dialog inside the viewport
           at small desktop widths instead of clipping. Deliberately NOT transform: scale() -
           that would blur text and shrink hit targets. Mobile is untouched: this whole block is
           inside (min-width: 992px), and the sheet height there is Task 5B's. */
        width: min(900px, calc(100vw - 64px));
        max-width: 900px;
        max-height: 90vh;
        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;
    }
}