/*
    Product ribbons on Ryan.

    ProductRibbons.min.js appends each ribbon inside its host and marks the host with
    .ribbon-wrapper: the product card itself (.tc-card or .tc-sc-card) and the gallery on the
    product page. Nothing is wrapped - a wrapper around a card part would pull it out of the
    card's flex column.

    Positions are physical (top-left is the left edge in RTL too), as the admin names them. On a
    card the top corners are the ones to use: they sit on the card's top row, where Digikala and
    the RyanPro design (index02.html, .discount-ribbon) put theirs.
    Container, text and image styles typed in admin are inline and override these defaults.
*/

.ribbon-wrapper {
    position: relative;
}

.ribbon-position {
    position: absolute;
    z-index: 4;
    display: flex;
    padding: 8px;
    font-size: 0;
    line-height: 0;
    pointer-events: none;
}

.ribbon-position > .product-ribbon {
    pointer-events: auto;
}

.ribbon-position.top-left { top: 0; left: 0; }
.ribbon-position.top-right { top: 0; right: 0; }
.ribbon-position.bottom-left { bottom: 0; left: 0; }
.ribbon-position.bottom-right { bottom: 0; right: 0; }
.ribbon-position.top-middle { top: 0; left: 0; right: 0; justify-content: center; }
.ribbon-position.bottom-middle { bottom: 0; left: 0; right: 0; justify-content: center; }
.ribbon-position.left-middle { top: 0; bottom: 0; left: 0; align-items: center; }
.ribbon-position.right-middle { top: 0; bottom: 0; right: 0; align-items: center; }
.ribbon-position.center { top: 0; right: 0; bottom: 0; left: 0; align-items: center; justify-content: center; }

/* On a card - .tc-card (category grids, related products) or .tc-sc-card (home rows, recently
   viewed): flush with the top edge and centred on the card's top row (the badge row, or the
   showcase's flag row where Digikala sets "شگفت‌انگیز"). A one-line ribbon such as a wordmark
   SVG reads as part of that row; a tall one (the notched discount flag) hangs down over the
   photo. */
.tc-card > .ribbon-position,
.tc-sc-card > .ribbon-position {
    --tc-ribbon-row: var(--tc-badge-h, 18px);
    --tc-ribbon-inset: var(--tc-text-pad-x, 10px);
    padding: 0;
}

.tc-sc-card > .ribbon-position {
    --tc-ribbon-row: 26px;
    --tc-ribbon-inset: 0px;
}

.tc-card > .ribbon-position.top-left,
.tc-card > .ribbon-position.top-right,
.tc-card > .ribbon-position.top-middle,
.tc-sc-card > .ribbon-position.top-left,
.tc-sc-card > .ribbon-position.top-right,
.tc-sc-card > .ribbon-position.top-middle {
    min-height: var(--tc-ribbon-row);
    align-items: center;
}

.tc-card > .ribbon-position.top-left,
.tc-card > .ribbon-position.bottom-left,
.tc-card > .ribbon-position.left-middle,
.tc-sc-card > .ribbon-position.top-left,
.tc-sc-card > .ribbon-position.bottom-left,
.tc-sc-card > .ribbon-position.left-middle { left: var(--tc-ribbon-inset); }

.tc-card > .ribbon-position.top-right,
.tc-card > .ribbon-position.bottom-right,
.tc-card > .ribbon-position.right-middle,
.tc-sc-card > .ribbon-position.top-right,
.tc-sc-card > .ribbon-position.bottom-right,
.tc-sc-card > .ribbon-position.right-middle { right: var(--tc-ribbon-inset); }

.product-ribbon {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
}

.product-ribbon .ribbon-picture {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Text only: a pill in the theme's sale red. */
.product-ribbon .ribbon-text {
    padding: 2px 10px;
    border-radius: 6px;
    background: #ED303D;
    color: #FFF;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    white-space: nowrap;
}

/* Picture + text: the text is laid over the picture, top-aligned - a flag-shaped picture with
   "${old-price-new-price-difference-percentage}|آف" as its text gives the design's discount
   ribbon. "|" in the text starts a new line; the last line is set a size smaller. */
.product-ribbon .ribbon-caption {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 4px;
    color: #FFF;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
}

.product-ribbon .ribbon-caption > span {
    white-space: nowrap;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.product-ribbon .ribbon-caption > span + span:last-child {
    font-size: 13px;
}

/* A percentage line, set like the card's discount badge (.tc-card__discount-badge): ٪ before the
   number in an LTR run, bold, sign and digits one size. */
.product-ribbon .ribbon-caption > .ribbon-pct {
    display: inline-flex;
    align-items: baseline;
    direction: ltr;
    unicode-bidi: isolate;
    font-weight: 700;
    letter-spacing: normal;
}

@media (max-width: 767px) {
    .ribbon-position { padding: 6px; }
    .tc-sc-card > .ribbon-position { --tc-ribbon-row: 22px; }
    .product-ribbon .ribbon-text { padding: 0 8px; font-size: 11px; }
}