/**
 * Interactive States for Product Action Buttons
 * Wishlist, Compare, and Quickview active/filled states
 * Also overrides demo-14.css amber (#fcb941) to unify with site teal (#0d9488)
 */

/* ═══════════════════════════════════════════
   COLOUR UNIFICATION — override demo-14 amber
   btn-product-icon: wishlist / compare / quickview circles
   ═══════════════════════════════════════════ */

/* Default border: teal instead of amber */
.btn-product-icon {
    border-color: #0d9488;
}

/* Hover/focus fill: teal instead of amber */
.btn-product-icon:hover,
.btn-product-icon:focus {
    background-color: #0d9488;
    border-color: #0d9488;
    color: #fff;
}

.btn-product-icon:hover span,
.btn-product-icon:focus span {
    background-color: #0d9488;
}

/* "Add to Cart" bottom bar button */
.btn-product {
    background-color: #0d9488;
    border-color: #0d9488;
    color: #fff;
}

.btn-product:hover,
.btn-product:focus {
    background-color: #0f766e;
    border-color: #0f766e;
    color: #fff;
}

.btn-product:hover span,
.btn-product:focus span {
    color: #fff;
    box-shadow: none;
}

/* Product countdown badge */
.product-countdown {
    background-color: #0d9488;
}

/* Banner link hover */
.banner-link:hover,
.banner-link:focus {
    background-color: #0d9488;
    color: #fff;
}

/* Sidebar widget title underline */
.sidebar-home .widget-title span:after {
    background-color: #0d9488;
}

/* CTA button hover */
.cta .btn:hover,
.cta .btn:focus {
    border-color: #0d9488;
    background-color: #0d9488;
    color: #fff;
}

/* Footer widget-about link */
.footer .widget-about-info a {
    color: #0d9488;
}

/* ═══════════════════════════════════════════
   Wishlist Button — Active (filled heart)
   ═══════════════════════════════════════════ */
.btn-wishlist.active:before,
.btn-product-icon.btn-wishlist.active:before {
    content: '\f233'; /* filled heart in molla icon font */
}

/* Icon button variant (product cards) */
.btn-product-icon.btn-wishlist.active {
    color: #e74c3c;
    background-color: #fff0f0;
    border-color: #e74c3c;
}
.btn-product-icon.btn-wishlist.active:hover,
.btn-product-icon.btn-wishlist.active:focus {
    color: #fff;
    background-color: #e74c3c;
    border-color: #e74c3c;
}

/* Text button variant (product detail page) */
.btn-product.btn-wishlist.active {
    color: #e74c3c;
    border-color: #e74c3c;
}
.btn-product.btn-wishlist.active:hover,
.btn-product.btn-wishlist.active:focus {
    color: #fff;
    background-color: #e74c3c;
    border-color: #e74c3c;
}

/* pv-action-btn variant (redesigned product view) */
.pv-action-btn.btn-wishlist.active {
    border-color: #e74c3c;
    color: #e74c3c;
    background: #fff5f5;
}
.pv-action-btn.btn-wishlist.active i:before {
    content: '\f233';
}

/* ═══════════════════════════════════════════
   Compare Button — Active (teal fill)
   ═══════════════════════════════════════════ */

/* Icon button variant (product cards) */
.btn-product-icon.btn-compare.active {
    color: #fff;
    background-color: #0d9488;
    border-color: #0d9488;
}
.btn-product-icon.btn-compare.active:hover,
.btn-product-icon.btn-compare.active:focus {
    color: #fff;
    background-color: #0f766e;
    border-color: #0f766e;
}

/* Text button variant (product detail page) */
.btn-product.btn-compare.active {
    color: #0d9488;
    border-color: #0d9488;
}
.btn-product.btn-compare.active:hover,
.btn-product.btn-compare.active:focus {
    color: #fff;
    background-color: #0d9488;
    border-color: #0d9488;
}

/* pv-action-btn variant (redesigned product view) */
.pv-action-btn.btn-compare.active {
    border-color: #0d9488;
    color: #fff;
    background: #0d9488;
}