/**
 * Single Product — "Like this design" button (redesigned).
 *
 * Design language:
 *   ┌──────────────────────┐
 *   │   ❤   1.2k           │   ← heart icon + compact count
 *   └──────────────────────┘
 *
 *  - Heart instead of the previous thumbs-up.
 *  - No "Like" / "Liked" text. The state is communicated visually
 *    (outline → filled red) and through aria-pressed for AT.
 *  - Count is the visual hero next to the heart.
 *  - On press: heart pops, particle burst rings outward, "+1" floater
 *    drifts up and fades, count rolls in with a slide.
 *  - Respects prefers-reduced-motion.
 *
 * Override notes: the previous version's selectors live in
 * `single-product.css` (height, background colour, hover transform, etc).
 * This file is enqueued AFTER it, so we override with equal specificity.
 */

/* ====================================================================
   Base button
   ==================================================================== */
.mypod-single-product .mypod-sp__like-btn {
    /* Tokens. Heart-red base, animated to a brighter pink on like. */
    --mypod-like-red:        #ef4444;
    --mypod-like-red-hover:  #dc2626;
    --mypod-like-red-soft:   rgba(239, 68, 68, 0.12);

    /* Reset the existing rule that hard-codes blue + filled background.
       The redesigned button is an outlined surface that fills only on like. */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 60px;
    padding: 0 18px;
    margin-left: 0;
    border-radius: var(--mypod-radius-lg, 12px);
    background: var(--mypod-color-surface, #fff);
    color: var(--mypod-color-text, #111);
    border: 1.5px solid var(--mypod-color-border, #e5e7eb);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.18s ease,
                background 0.18s ease,
                color 0.18s ease,
                transform 0.12s ease,
                box-shadow 0.2s ease;
    white-space: nowrap;
    overflow: visible;            /* let the burst/floater escape */
    -webkit-tap-highlight-color: transparent;
}

.mypod-single-product .mypod-sp__like-btn:hover {
    border-color: var(--mypod-like-red);
    color: var(--mypod-like-red);
    background: var(--mypod-color-surface, #fff);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(239, 68, 68, 0.18);
}

.mypod-single-product .mypod-sp__like-btn:active {
    transform: translateY(0);
}

.mypod-single-product .mypod-sp__like-btn:focus-visible {
    outline: 2px solid var(--mypod-like-red);
    outline-offset: 2px;
}

.mypod-single-product .mypod-sp__like-btn:disabled,
.mypod-single-product .mypod-sp__like-btn.is-busy {
    cursor: not-allowed;
    pointer-events: none;
}

/* ====================================================================
   Liked state — filled red surface + filled heart
   ==================================================================== */
.mypod-single-product .mypod-sp__like-btn.is-liked {
    background: var(--mypod-like-red);
    border-color: var(--mypod-like-red);
    color: #fff;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.32);
}

.mypod-single-product .mypod-sp__like-btn.is-liked:hover {
    background: var(--mypod-like-red-hover);
    border-color: var(--mypod-like-red-hover);
    color: #fff;
}

/* ====================================================================
   Heart icon
   ==================================================================== */
.mypod-single-product .mypod-sp__like-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    /* Set transform-origin for the pop animation. */
    transform-origin: center 60%;
}

.mypod-single-product .mypod-sp__like-heart {
    display: block;
    width: 22px;
    height: 22px;
    transition: transform 0.18s ease, fill 0.18s ease, stroke 0.18s ease;
    stroke: currentColor;
    fill: transparent;
}

.mypod-single-product .mypod-sp__like-btn.is-liked .mypod-sp__like-heart {
    fill: currentColor;
    stroke: currentColor;
}

/* Pop animation triggered by adding .is-popping on click. */
.mypod-single-product .mypod-sp__like-btn.is-popping .mypod-sp__like-heart {
    animation: mypodLikeHeartPop 0.55s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes mypodLikeHeartPop {
    0%   { transform: scale(1); }
    25%  { transform: scale(0.78); }
    55%  { transform: scale(1.35) rotate(-6deg); }
    80%  { transform: scale(0.96) rotate(2deg); }
    100% { transform: scale(1) rotate(0); }
}

/* ====================================================================
   Particle burst — six small dots radiating outward.
   Each child is positioned via index, animated via shared keyframes.
   ==================================================================== */
.mypod-sp__like-burst {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: block;
}

.mypod-sp__like-burst > span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    margin-left: -3px;
    border-radius: 50%;
    background: var(--mypod-like-red);
    opacity: 0;
}

.mypod-sp__like-burst.is-active > span {
    animation: mypodLikeBurst 0.7s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}

/* Distribute six dots evenly around the heart. Each child gets a unique
   directional vector via custom property. */
.mypod-sp__like-burst > span:nth-child(1) { --bx:  18px; --by: -16px; background: #ef4444; }
.mypod-sp__like-burst > span:nth-child(2) { --bx: -20px; --by: -10px; background: #f97316; }
.mypod-sp__like-burst > span:nth-child(3) { --bx:  -8px; --by:  20px; background: #ec4899; }
.mypod-sp__like-burst > span:nth-child(4) { --bx:  22px; --by:   8px; background: #f59e0b; }
.mypod-sp__like-burst > span:nth-child(5) { --bx: -22px; --by:  16px; background: #ef4444; }
.mypod-sp__like-burst > span:nth-child(6) { --bx:   6px; --by: -22px; background: #ec4899; }

@keyframes mypodLikeBurst {
    0%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
    25%  { opacity: 1; }
    100% { transform: translate(var(--bx), var(--by)) scale(1); opacity: 0; }
}

/* ====================================================================
   Count + "+1" floater
   ==================================================================== */
.mypod-sp__like-count-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.mypod-single-product .mypod-sp__like-count {
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: inherit;
    /* Prior rule applied a pill background — neutralise. */
    background: transparent;
    border-radius: 0;
    padding: 0;
    opacity: 1;
    will-change: transform, opacity;
}

.mypod-single-product .mypod-sp__like-count.is-rolling {
    animation: mypodLikeCountRollUp 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mypod-single-product .mypod-sp__like-count.is-rolling[data-dir="down"] {
    animation-name: mypodLikeCountRollDown;
}

@keyframes mypodLikeCountRollUp {
    0%   { transform: translateY(8px); opacity: 0; }
    50%  { transform: translateY(-3px); opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes mypodLikeCountRollDown {
    0%   { transform: translateY(-8px); opacity: 0; }
    50%  { transform: translateY(3px); opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}

/* Floating "+1" / "−1" indicator. Lives above the count and drifts up. */
.mypod-sp__like-floater {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, 4px);
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--mypod-like-red);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    line-height: 1;
}

.mypod-single-product .mypod-sp__like-btn.is-liked .mypod-sp__like-floater {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.mypod-sp__like-floater.is-active {
    animation: mypodLikeFloater 0.85s cubic-bezier(0.16, 0.84, 0.44, 1);
}

@keyframes mypodLikeFloater {
    0%   { transform: translate(-50%,  4px) scale(0.6); opacity: 0; }
    20%  { transform: translate(-50%, -4px) scale(1.05); opacity: 1; }
    70%  { transform: translate(-50%, -22px) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -32px) scale(0.85); opacity: 0; }
}

/* ====================================================================
   Reduced motion — kill all animations, preserve state changes.
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
    .mypod-single-product .mypod-sp__like-btn,
    .mypod-single-product .mypod-sp__like-heart,
    .mypod-single-product .mypod-sp__like-btn:hover,
    .mypod-sp__like-burst > span,
    .mypod-sp__like-floater,
    .mypod-single-product .mypod-sp__like-count {
        animation: none !important;
        transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .mypod-single-product .mypod-sp__like-btn:hover {
        transform: none;
    }
}

/* ====================================================================
   Cart-row sizing tweak — at 18% width the icon + count fit tightly.
   The cart-layout file already constrains flex sizing; we just trim the
   button's internal padding so a 4-digit count (e.g. "9.9k") never
   overflows.
   ==================================================================== */
.mypod-single-product form.cart .mypod-sp__like-btn,
.mypod-single-product .woocommerce-variation-add-to-cart .mypod-sp__like-btn {
    padding: 0 12px;
    gap: 8px;
}