/* NAFISPOD_PRODUCT_QUICK_VIEW_BALLOON_DARK_V1_1
 * Quick View is nested in an inline-label wrapper. Keep the existing shared
 * Favorite/Compare/Share action color/contrast palette, including dark theme.
 */
/* NAFISPOD_SANIYAR_PRODUCT_FAVORITES_V1 */
.saniyar-product-favorite-toggle {
    cursor: pointer;
}

.saniyar-product-favorite-toggle[aria-busy="true"] {
    pointer-events: none;
    opacity: .65;
}

/*
 * NAFISPOD_SANIYAR_PRODUCT_CARD_ACTION_CONTRAST_V1
 *
 * Compare, Favorite and Quick View are one visual action family.
 * Keep their surface and icon contrast coherent in both light and dark mode.
 *
 * favorites.css is intentionally loaded before storefront.css, therefore
 * presentation-critical declarations use !important so the shared contract
 * wins over legacy Saniyar card rules without changing renderer markup.
 */
.saniyar-product-carousel .product-header-btn > a,
.saniyar-product-carousel
.product-header-btn .saniyar-product-circle-action {
    background-color: var(--surface-secondary) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-soft) !important;
    opacity: 1;
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}

.saniyar-product-carousel .product-header-btn > a > i,
.saniyar-product-carousel
.product-header-btn .saniyar-product-circle-action > i {
    color: currentColor !important;
    opacity: 1 !important;
}

.saniyar-product-carousel .product-header-btn > a:hover,
.saniyar-product-carousel .product-header-btn > a:focus-visible,
.saniyar-product-carousel
.product-header-btn .saniyar-product-circle-action:hover,
.saniyar-product-carousel
.product-header-btn .saniyar-product-circle-action:focus-visible {
    background-color: var(--surface-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-muted) !important;
}

.saniyar-product-carousel .product-header-btn > a:active,
.saniyar-product-carousel
.product-header-btn .saniyar-product-circle-action:active {
    transform: translateY(1px);
}

html[data-bs-theme="dark"]
.saniyar-product-carousel .product-header-btn > a,
html[data-bs-theme="dark"]
.saniyar-product-carousel
.product-header-btn .saniyar-product-circle-action {
    background-color: var(--surface-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-muted) !important;
}

html[data-bs-theme="dark"]
.saniyar-product-carousel .product-header-btn > a:hover,
html[data-bs-theme="dark"]
.saniyar-product-carousel .product-header-btn > a:focus-visible,
html[data-bs-theme="dark"]
.saniyar-product-carousel
.product-header-btn .saniyar-product-circle-action:hover,
html[data-bs-theme="dark"]
.saniyar-product-carousel
.product-header-btn .saniyar-product-circle-action:focus-visible {
    background-color: var(--surface-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-muted) !important;
}

/*
 * Favorite state is shared by every presentation surface (cards + PDP).
 * favorites.js owns the state; CSS only paints the authoritative active state.
 */
.saniyar-product-favorite-toggle.is-favorite {
    color: var(--bs-danger, #dc3545) !important;
}

.saniyar-product-favorite-toggle.is-favorite > .bi-heart-fill {
    color: currentColor !important;
    opacity: 1 !important;
}

.saniyar-header-favorites-action {
    position: relative;
}

a.saniyar-header-favorites-action,
button.saniyar-header-favorites-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.saniyar-header-favorites-counter {
    position: absolute;
    top: -7px;
    inset-inline-end: -8px;
    min-width: 18px;
    height: 18px;
    padding-inline: 4px;
    border-radius: 999px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .saniyar-header-favorites-action {
        margin-inline-end: 6px;
    }
}