/* ============================================================
   Product Card — кнопки избранного и корзины, ценовой ряд
   Magazin online
   ============================================================ */

/* Icon cashback în catalog (în loc de text) — portofel roșu, aliniat cu rândul de preț.
   Iconita sta INAINTEA sumei (vezi HelperComponent::cashback), deci spatiul
   merge la dreapta ei, nu la stinga. */
.catalog-cashback-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    color: #c21e3a;
    font-size: 1em;
    line-height: 1;
    vertical-align: -0.12em;
}

.catalog-cashback-badge-icon .fa-wallet {
    font-size: 1.05em;
}

/* Mărimi preț — un singur loc; unitatea suplimentară față de tema anterioară (+1px) */
:root {
    --brand-price-fs-catalog-icon: 17px;
    --brand-price-fs-catalog-icon-suffix: 12px;
    --brand-price-fs-catalog-list: 12px;
    --brand-price-fs-catalog-list-suffix: 9px;
    --brand-price-fs-old: 11px;
    --brand-price-fs-secondary: 13px;
    --brand-price-fs-secondary-suffix: 9px;
    --brand-price-fs-favorite: 13px;
    --brand-price-fs-mobile-icon: 16px; /* era 13px, +25% */
    --brand-price-fs-mobile-tight: 15px; /* era 12px, +25% */
    --brand-price-fs-mobile-old: 10px;
}

/* ── Кнопка «Добавить в избранное» (в правом верхнем углу изображения) ── */

.category-favorite-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #d6dde7;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    color: #6f7f95;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}

.category-favorite-btn:hover {
    border-color: #ef9aaa;
    color: #c21e3a;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .16);
}

.category-favorite-btn.active {
    border-color: #ef9aaa;
    color: #c21e3a;
    background: #fff1f4;
}

/* ── Кнопка «В корзину» (в ценовом блоке) ── */

.category-cart-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #d6dde7;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    color: #6f7f95;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}

.category-cart-btn:hover {
    border-color: #0d6efd;
    color: #0d6efd;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .16);
}

/* ── Контейнер кнопок действий (избранное + корзина) ── */

.product-card-price-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Randul "Credit de la ..." + cashback ──
   Wrapper propriu (product-card-credit-cashback), nu atingem
   .Content_Goods_PriceBlock direct - clasa aia e refolosita si in alte
   contexte de pe site, in afara widgetului.
   Stacate, cashback deasupra creditului - la fel pe desktop si pe mobil. */
.product-card-credit-cashback {
    display: flex;
    flex-direction: column;
}

.product-card-credit-cashback .product-card-cashback {
    order: 0;
}

.product-card-credit-cashback .product-card-credit-row {
    order: 1;
}

/* ── Alinierea blocului pret / credit / cashback cu titlul cardului ──
   Titlul are `width: 85%; margin: 0 auto` (webshopStyles74.min.css), deci e
   tras ~7.5% spre interiorul cardului, iar imaginea are `margin: 0 18px`
   (style.css). Containerul de pret nu avea nici o margine, asa ca pretul,
   randul de credit si pastila de cashback porneau chiar de la marginea
   cardului — cu ~15px mai la stinga decit titlul. Pe prima coloana a grilei
   marginea cardului coincide cu marginea zonei de produse, deci blocul parea
   „fugit in stinga” si taiat.

   Gutter-ul repeta cei 7.5% ai titlului, dar lasa mereu cel putin 150px utili
   pentru randul pret + buton cos: pe cardurile inguste (4 coloane intre 992 si
   1279px) ajunge la 0, ca sa nu rupem pretul pe doua randuri. */
.Content_Goods_Group[view=icon] .Content_Goods_ItemBlock > .Content_Goods_PriceBlock,
.Content_Goods_Group[view="icon"] .Content_Goods_ItemBlock > .Content_Goods_PriceBlock {
    --product-card-gutter: clamp(0px, calc((100% - 150px) / 2), 7.5%);
    padding-left: var(--product-card-gutter);
    padding-right: var(--product-card-gutter);
}

/* ── Ценовой ряд (цена + кнопки) ── */

.product-card-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* doar pe orizontala: `gap` ar pune distanta si intre randuri la wrap */
    column-gap: 8px;
    /* inaltimea randului o dadea butonul de cos (32px); +6px ca pretul si cosul
       sa nu stea lipite de randul de deasupra */
    min-height: 38px;
}

.product-card-price-row > span {
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    /* doar pe orizontala: pretul vechi si cel curent trec pe doua randuri cind
       nu incap, iar `gap` adauga acolo si spatiu vertical */
    column-gap: 4px;
    overflow-wrap: anywhere;
}

.product-card-price-row .old-price {
    font-size: var(--brand-price-fs-old);
    line-height: 1.1;
}

/* ── Prețuri compacte: catalog (icon/list), promoții homepage, recente, similare ── */

.Content_Goods_Group[view=icon] .Content_Goods_PriceBlock,
.Content_Goods_Group[view="icon"] .Content_Goods_PriceBlock {
    font-size: var(--brand-price-fs-catalog-icon);
    font-weight: 600;
}

.Content_Goods_Group[view=icon] .Content_Goods_PriceBlock_Value_lei:after,
.Content_Goods_Group[view="icon"] .Content_Goods_PriceBlock_Value_lei:after,
.Content_Goods_Group[view=icon] .Content_Goods_PriceBlock_Value_usd:after,
.Content_Goods_Group[view="icon"] .Content_Goods_PriceBlock_Value_usd:after {
    font-size: var(--brand-price-fs-catalog-icon-suffix);
    padding-top: 0;
    padding-left: 3px;
}

.Content_Goods_Group[view=list] .Content_Goods_PriceBlock,
.Content_Goods_Group[view="list"] .Content_Goods_PriceBlock {
    font-size: var(--brand-price-fs-catalog-list);
}

.Content_Goods_Group[view=list] .Content_Goods_PriceBlock_Value:after,
.Content_Goods_Group[view="list"] .Content_Goods_PriceBlock_Value:after {
    font-size: var(--brand-price-fs-catalog-list-suffix);
    padding-left: 3px;
}

.Content_Goods_Group[view=list] .Content_Goods_PriceBlock_Value_lei:after,
.Content_Goods_Group[view="list"] .Content_Goods_PriceBlock_Value_lei:after {
    font-size: var(--brand-price-fs-catalog-list-suffix);
    padding-left: 3px;
}

.Content_Goods_Group[view=icon] .Content_Goods_PriceBlock .old-price,
.Content_Goods_Group[view=list] .Content_Goods_PriceBlock .old-price,
.Content_Goods_Group[view="icon"] .Content_Goods_PriceBlock .old-price,
.Content_Goods_Group[view="list"] .Content_Goods_PriceBlock .old-price {
    font-size: var(--brand-price-fs-old);
    line-height: 1.1;
}

.Page_Product_Content_ABG_Item_Price_lei,
.Page_Product_Content_ABG_Item_Price_usd {
    font-size: var(--brand-price-fs-secondary);
    font-weight: 600;
}

.Page_Product_Content_ABG_Item_Price_lei:after,
.Page_Product_Content_ABG_Item_Price_usd:after {
    font-size: var(--brand-price-fs-secondary-suffix);
}

.content_MainPage_PromoGoods_Item_Price_lei,
.content_MainPage_PromoGoods_Item_Price_usd {
    font-size: var(--brand-price-fs-secondary);
    font-weight: 600;
}

.content_MainPage_PromoGoods_Item_Price_lei:after,
.content_MainPage_PromoGoods_Item_Price_usd:after {
    font-size: var(--brand-price-fs-secondary-suffix);
}

.content_MainPage_NewGoods_Item_Price_lei,
.content_MainPage_NewGoods_Item_Price_usd {
    font-size: var(--brand-price-fs-secondary);
}

.content_MainPage_NewGoods_Item_Price_lei:after,
.content_MainPage_NewGoods_Item_Price_usd:after {
    font-size: var(--brand-price-fs-secondary-suffix);
}

/* Slider „produse noi” pe homepage (peste regulile inline din index) */
.home-new-products-slider .content_MainPage_PromoGoods_Item_Price.content_MainPage_PromoGoods_Item_Price_lei,
.home-new-products-slider .content_MainPage_PromoGoods_Item_Price.content_MainPage_PromoGoods_Item_Price_usd {
    font-size: var(--brand-price-fs-secondary);
    font-weight: 600;
}

.home-new-products-slider .content_MainPage_PromoGoods_Item_Price_lei:after,
.home-new-products-slider .content_MainPage_PromoGoods_Item_Price_usd:after {
    font-size: var(--brand-price-fs-secondary-suffix);
}

/* Favorite: preț fără sufix CSS — doar mărimea numerelor */
.favorite-product-card .card-body .text-danger.fw-bold {
    font-size: var(--brand-price-fs-favorite);
    font-weight: 600;
}

/* ── Responsive ── */

/* Catalog full-width pe mobile: contrabalansam padding-ul .container.
   Padding-ul real e 7.5px/parte, nu 12px cum scria aici - cu -12px grila iesea
   4.5px in afara ecranului pe stinga, iar continutul lipit de marginea cardului
   (iconita de cashback, cea de credit, prima cifra a pretului) se taia. */
@media screen and (max-width: 767px) {
    .Page_ContentData {
        margin-left: -7.5px;
        margin-right: -7.5px;
    }

    .Page_ContentData .goodsFilter_Area {
        padding-left: 7.5px;
        padding-right: 7.5px;
        box-sizing: border-box;
    }
}

@media (max-width: 640px) {
    .Content_Goods_Group[view=icon] .Content_Goods_PriceBlock_Value_lei,
    .Content_Goods_Group[view=icon] .Content_Goods_PriceBlock_Value_usd {
        font-size: var(--brand-price-fs-mobile-icon);
        line-height: 1.15;
    }
}

/* Nota: pe mobil pretul si butonul de cos stau pe acelasi rand (regula de baza
   .product-card-price-row, flex + space-between). Existase aici un override
   care le punea pe randuri separate, pentru ca cele trei iconite (comparare,
   favorite, cos) nu incapeau langa pret pe cardul ingust; a ramas doar cosul,
   deci nu mai e nevoie de el. */

/* Latimea cardului (50% sub 414px) a fost mutata in web/css/goods-grid.css:
   grila e acum 2 coloane pe TOT mobilul, nu doar sub 414px. Aici raman doar
   marimile de font. */
@media (max-width: 414px) {
    .Content_Goods_Group[view=icon] .Content_Goods_PriceBlock_Value_lei,
    .Content_Goods_Group[view=icon] .Content_Goods_PriceBlock_Value_usd {
        font-size: var(--brand-price-fs-mobile-tight);
        line-height: 1.1;
    }

    .product-card-price-row .old-price {
        font-size: var(--brand-price-fs-mobile-old);
    }
}

/* Substituește 18px din webshopStyles (max 750px) pentru blocuri promo/recent pe mobil */
@media screen and (max-width: 750px) {
    .content_MainPage_PromoGoods_Item_Price.content_MainPage_PromoGoods_Item_Price_lei,
    .content_MainPage_PromoGoods_Item_Price.content_MainPage_PromoGoods_Item_Price_usd {
        font-size: var(--brand-price-fs-secondary);
        font-weight: 600;
    }

    .content_MainPage_PromoGoods_Item_Price_lei:after,
    .content_MainPage_PromoGoods_Item_Price_usd:after {
        font-size: var(--brand-price-fs-secondary-suffix);
    }
}