/**
 * Qing Product Price widget.
 *
 * One row: price on the left, discount on the right. Colours and sizes mirror
 * the Product Slider's price row (`.vendorTile__priceRow`) so the two widgets
 * read as the same design language.
 *
 * Everything here is a baseline; the widget's Elementor controls override it.
 */

.qing-pp {
    font-family: "ProximaNova", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

/* ---------- Row ---------- */
.qing-pp__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    line-height: 1.2;
}

/* Split: price hugs the left edge, discount the right.
   `space-between` on the row does the work, so no widths are needed. */
.qing-pp--split .qing-pp__row {
    justify-content: space-between;
}

/* Inline: the two groups sit next to each other and the Alignment
   control decides where the pair lands. */
.qing-pp--inline .qing-pp__row {
    justify-content: flex-start;
}

/* ---------- Left group ---------- */
.qing-pp__main {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-width: 0;
}

.qing-pp__icon {
    /* line-height:0 keeps the inline SVG off the text baseline, which would
       otherwise push it a few pixels low. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    color: #7d746c;
    flex: 0 0 auto;
}

.qing-pp__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.qing-pp__label {
    font-size: 14px;
    font-weight: 400;
    color: #7d746c;
}

/* ---------- Current price ---------- */
.qing-pp__current {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: #2f2b28;
}

/* Woo wraps each figure in .amount with its own colour and size; inherit so
   the widget's Price controls stay in charge. */
.qing-pp__current .amount,
.qing-pp__current .woocommerce-Price-amount,
.qing-pp__regular .amount,
.qing-pp__regular .woocommerce-Price-amount {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.qing-pp__dash {
    font-weight: 400;
    opacity: 0.7;
}

/* ---------- Original price ---------- */
.qing-pp__regular {
    font-size: 16px;
    font-weight: 400;
    color: #9a938c;
    text-decoration: line-through;
}

/* ---------- Right group ---------- */
.qing-pp__side {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.qing-pp__deal {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #7d746c;
    white-space: nowrap;
}

.qing-pp__deal svg {
    display: block;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

/* ---------- Discount ---------- */
.qing-pp__discount {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    /* Same red as .vendorTile__discount in the slider. */
    color: #c0392b;
}

.qing-pp__discount--text {
    padding: 0;
    background: transparent;
}

.qing-pp__discount--soft {
    padding: 6px 10px;
    border-radius: 4px;
    background-color: rgba(192, 57, 43, 0.1);
}

.qing-pp__discount--badge {
    padding: 6px 10px;
    border-radius: 4px;
    color: #fff;
    background-color: #c0392b;
}

/* ---------- Empty / editor notice ---------- */
.qing-pp__empty {
    font-size: 16px;
    color: #7d746c;
}

.qing-pp__notice {
    padding: 12px 16px;
    background: #fdf6e6;
    border: 1px solid #e8d9b0;
    border-radius: 4px;
    color: #6b5a2b;
    font-size: 14px;
}

/* ---------- Narrow screens ---------- */
/* Stacking keeps a long price and a badge from colliding. */
@media (max-width: 480px) {
    .qing-pp--split .qing-pp__row {
        justify-content: flex-start;
    }
}