/* =============================================================
   MH Plug — WooCommerce Wishlist Styles
   Neumorphic circular heart button for product archives & single pages.
   ============================================================= */

/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
    --mh-wl-bg:           #e8edf2;          /* Neumorphic base surface    */
    --mh-wl-shadow-light: #ffffff;          /* Highlight edge             */
    --mh-wl-shadow-dark:  #bec8d4;          /* Depth edge                 */
    --mh-wl-heart-idle:   #8a9bb0;          /* Outline heart colour       */
    --mh-wl-heart-added:  #e05260;          /* Filled heart colour        */
    --mh-wl-accent:       #004265;          /* MH-Plug primary            */
    --mh-wl-size:         42px;             /* Button diameter            */
    --mh-wl-icon-size:    16px;             /* Heart icon size            */
    --mh-wl-radius:       50%;
    --mh-wl-duration:     0.22s;
}

/* ══════════════════════════════════════════════════════════════
   Core Button — shared across both contexts
   ══════════════════════════════════════════════════════════════ */
.mh-wishlist-btn {
    /* Layout */
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           var(--mh-wl-size);
    height:          var(--mh-wl-size);
    border-radius:   var(--mh-wl-radius);
    flex-shrink:     0;

    /* Neumorphic surface */
    background:  var(--mh-wl-bg);
    border:      none;
    outline:     none;
    box-shadow:
        5px  5px 10px  var(--mh-wl-shadow-dark),
       -5px -5px 10px  var(--mh-wl-shadow-light);

    /* Icon */
    color:       var(--mh-wl-heart-idle);
    font-size:   var(--mh-wl-icon-size);

    /* Interaction */
    cursor:      pointer;
    user-select: none;
    transition:
        box-shadow   var(--mh-wl-duration) ease,
        color        var(--mh-wl-duration) ease,
        transform    var(--mh-wl-duration) ease,
        background   var(--mh-wl-duration) ease;
}

/* Icon itself (Handle both standard font and SVG-based FontAwesome) */
.mh-wishlist-btn i,
.mh-wishlist-btn svg {
    pointer-events: none;           /* prevent icon eating the click  */
    font-size: var(--mh-wl-icon-size);
    width: var(--mh-wl-icon-size);
    height: var(--mh-wl-icon-size);
    line-height: var(--mh-wl-icon-size);
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), color var(--mh-wl-duration) ease;
}

/* ── Hover state ────────────────────────────────────────────── */
.mh-wishlist-btn:hover {
    color:      var(--mh-wl-heart-added);
    box-shadow:
        2px  2px 5px  var(--mh-wl-shadow-dark),
       -2px -2px 5px  var(--mh-wl-shadow-light);
    transform: translateY(-1px);
}

.mh-wishlist-btn:hover i,
.mh-wishlist-btn:hover svg {
    transform: scale(1.18);
}

/* ── Active / In-Wishlist state (.mh-added set by JS) ────────── */
.mh-wishlist-btn.mh-added {
    background:  var(--mh-wl-bg);
    color:       var(--mh-wl-heart-added);
    box-shadow:
        inset  3px  3px  7px  var(--mh-wl-shadow-dark),
        inset -3px -3px  7px  var(--mh-wl-shadow-light);
}

/* Heartbeat animation fires once when item is just added */
.mh-wishlist-btn.mh-added i,
.mh-wishlist-btn.mh-added svg {
    animation: mh-heartbeat 0.48s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes mh-heartbeat {
    0%   { transform: scale(1);    }
    35%  { transform: scale(1.45); }
    65%  { transform: scale(0.88); }
    85%  { transform: scale(1.12); }
    100% { transform: scale(1);    }
}

/* ── Loading / AJAX-in-progress state (.mh-adding set by JS) ─── */
.mh-wishlist-btn.mh-adding {
    pointer-events: none;
    opacity: 0.75;
    color: var(--mh-wl-accent);
    box-shadow:
        inset  2px  2px  5px  var(--mh-wl-shadow-dark),
        inset -2px -2px  5px  var(--mh-wl-shadow-light);
}

.mh-wishlist-btn.mh-adding i,
.mh-wishlist-btn.mh-adding svg {
    animation: mh-wl-pulse 0.7s ease-in-out infinite alternate;
}

@keyframes mh-wl-pulse {
    from { transform: scale(0.82); opacity: 0.55; }
    to   { transform: scale(1.10); opacity: 1;    }
}

/* ── Focus visible (accessibility) ─────────────────────────── */
.mh-wishlist-btn:focus-visible {
    outline: 2px solid var(--mh-wl-accent);
    outline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════════
   Loop / Archive context  (.mh-wishlist-ctx-loop)
   Floats as a circular badge in the top-right of each product card.
   ══════════════════════════════════════════════════════════════ */
.mh-wishlist-ctx-loop {
    position:  absolute;
    top:       12px;
    right:     12px;
    z-index:   5;
    margin:    0;

    /* Slightly smaller on card overlay */
    --mh-wl-size: 38px;
    width:  var(--mh-wl-size);
    height: var(--mh-wl-size);

    /* Semi-transparent surface so product image shows through */
    background: rgba(232, 237, 242, 0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Ensure product cards are positioned so the button can overlay */
.woocommerce ul.products li.product {
    position: relative;
}

/* ══════════════════════════════════════════════════════════════
   Single Product context  (.mh-wishlist-ctx-single)
   Renders inline beside / after the Add-to-Cart button.
   ══════════════════════════════════════════════════════════════ */
.mh-wishlist-ctx-single {
    margin-left: 10px;
    /* Inherits all base styles — no override needed unless theme breaks it */
}

/* ══════════════════════════════════════════════════════════════
   Wishlist Table  (shortcode / Elementor widget)
   ══════════════════════════════════════════════════════════════ */
.mh-wishlist-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0;
}

table.mh-wishlist-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
}

table.mh-wishlist-table thead {
    background: #1d2327;
    color: #fff;
}

table.mh-wishlist-table thead th {
    padding: 14px 16px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    white-space: nowrap;
}

table.mh-wishlist-table thead th.mh-wl-col-remove {
    width: 44px;
    text-align: center;
}

table.mh-wishlist-table tbody tr {
    border-bottom: 1px solid #f0f0f1;
    transition: background 0.15s ease;
}

table.mh-wishlist-table tbody tr:last-child {
    border-bottom: none;
}

table.mh-wishlist-table tbody tr:hover {
    background: #f9f9f9;
}

table.mh-wishlist-table td {
    padding: 14px 16px;
    vertical-align: middle;
    font-size: 0.9rem;
}

/* Image column */
.mh-wl-col-image a {
    display: inline-block;
    line-height: 0;
}

.mh-wl-col-image img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e0e4e7;
}

/* Product title */
.mh-wl-col-name a {
    color: #1d2327;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s;
}

.mh-wl-col-name a:hover {
    color: #d63638;
}

/* Price */
.mh-wl-col-price .price {
    font-weight: 700;
    color: #1d2327;
}

.mh-wl-col-price del {
    color: #8c8f94;
}

/* Stock status */
.mh-wl-stock-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mh-wl-stock-instock    { background: #d1fae5; color: #065f46; }
.mh-wl-stock-outofstock { background: #fee2e2; color: #991b1b; }
.mh-wl-stock-onbackorder{ background: #fef3c7; color: #92400e; }

/* Add to cart button */
.mh-wl-col-cart .button,
.mh-wl-col-cart a.button {
    background: #1d2327;
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.15s ease;
    display: inline-block;
    border: none;
    cursor: pointer;
}

.mh-wl-col-cart .button:hover,
.mh-wl-col-cart a.button:hover {
    background: #d63638;
    transform: translateY(-1px);
}

/* Remove button (table) */
.mh-wl-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid #d63638;
    color: #d63638;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-size: 0.8rem;
}

.mh-wl-remove-btn:hover {
    background: #d63638;
    color: #fff;
}

/* Empty wishlist message */
.mh-wishlist-empty {
    text-align: center;
    padding: 60px 20px;
    color: #8c8f94;
}

.mh-wishlist-empty i {
    display: block;
    font-size: 3rem;
    margin-bottom: 16px;
    color: #d1d5db;
}

.mh-wishlist-empty p {
    font-size: 1rem;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    table.mh-wishlist-table thead th.mh-wl-col-stock,
    table.mh-wishlist-table td.mh-wl-col-stock,
    table.mh-wishlist-table thead th.mh-wl-col-image,
    table.mh-wishlist-table td.mh-wl-col-image {
        display: none;
    }
}