/* Automatic product discounts: the old price, struck through, next to the price the user pays,
   followed by a "-20%" badge. Loaded by the site and user panel layouts in both directions,
   so it only uses logical properties. */
.price-old {
    /* !important beats the site wide "*, :hover { text-decoration: none !important }" reset */
    text-decoration: line-through !important;
    color: #e5484d;
    font-weight: 400;
    /* em keeps it proportional to whichever price it sits next to (12px invoice lines up to 35px plan cards);
       the floor keeps it readable in the small table and invoice lines */
    font-size: max(13px, .85em);
    margin-inline-end: .35em;
    white-space: nowrap;
    /* In Arabic pages the old price, the new price and the badge share one line of text, and the bidi
       algorithm glued the old price's currency onto the new price ("50 $25 $"). Isolating keeps it in
       one piece while it still follows the page direction, so it reads like the new price next to it. */
    unicode-bidi: isolate;
}

/* Content generator pack cards: the amount is a separate 32px span, so match the 18px currency sign instead */
.cg-pack-price .price-old {
    font-size: 18px;
}

/* Fixed size on purpose: the same small tag next to a 35px plan price and a 12px invoice line */
.price-off {
    display: inline-block;
    /* The badge is always left-to-right ("-50%", not "%50-"), so a logical margin would point the wrong way
       on Arabic pages; spacing on both sides works in either direction */
    margin-inline: .4rem;
    padding: 0 .45rem;
    border-radius: 999px;
    background: #e5484d;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.6;
    vertical-align: middle;
    white-space: nowrap;
    unicode-bidi: isolate;
    direction: ltr;
}

.price-old:empty,
.price-old[hidden],
.price-off:empty,
.price-off[hidden] {
    display: none;
}