/*
 * WC Wishlist — Stylesheet
 *
 * Sections:
 *  1. Wishlist Button  (.wish-btn)
 *  2. hint--tooltip    (.hint--tooltip + data-tooltip)
 *  3. Wish Count       (.wish-count)
 *  4. Toast Notice     (.wcw-notice)
 *  5. Utilities / Animations
 * ============================================================ */

/* ── 1. Wishlist Button ───────────────────────────────────────────────────── */

.wish-btn {
    /* Layout */
    position:        relative;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;

    /* Size */
    width:           40px;
    height:          40px;
    padding:         0;

    /* Look */
    background:      #ffffff;
    border:          2px solid #d9d9d9;
    border-radius:   50%;
    color:           #999999;
    font-size:       18px;
    line-height:     1;

    /* Behaviour */
    cursor:          pointer;
    outline:         none;
    user-select:     none;
    -webkit-tap-highlight-color: transparent;

    /* Transitions */
    transition:
        border-color 0.25s ease,
        background   0.25s ease,
        color        0.25s ease,
        transform    0.15s ease,
        box-shadow   0.25s ease;
}

/* Hover — idle state */
.wish-btn:hover {
    border-color: #e74c3c;
    color:        #e74c3c;
    transform:    scale(1.12);
    box-shadow:   0 4px 12px rgba(231, 76, 60, 0.18);
}

/* Active / In-wishlist state */
.wish-btn.wcw-active {
    background:   #fff0f0;
    border-color: #e74c3c;
    color:        #e74c3c;
}

.wish-btn.wcw-active:hover {
    background:   #ffe5e5;
    box-shadow:   0 4px 12px rgba(231, 76, 60, 0.25);
}

/* Loading state */
.wish-btn.wcw-loading {
    opacity:        0.55;
    cursor:         wait;
    pointer-events: none;
}

.wish-btn.wcw-loading .wcw-icon {
    animation: wcw-pulse 0.8s ease-in-out infinite;
}

/* Icon wrapper */
.wish-btn .wcw-icon {
    display:     block;
    line-height: 1;
    transition:  transform 0.2s ease;
}

.wish-btn:active .wcw-icon {
    transform: scale(0.88);
}

/* Pop animation on add */
.wish-btn.wcw-pop .wcw-icon {
    animation: wcw-pop 0.35s ease forwards;
}


/* ── 2. hint--tooltip ────────────────────────────────────────────────────── */
/*
 * A self-contained, CSS-only tooltip driven by the data-tooltip attribute.
 * Appears above the element with a downward-pointing arrow.
 *
 * Usage:
 *   <button class="wish-btn hint--tooltip"
 *           data-tooltip="Add to Wishlist">…</button>
 *
 * JavaScript updates data-tooltip in real-time:
 *   "Add to Wishlist"  ←→  "In Wishlist"
 */

.hint--tooltip {
    position: relative; /* stacking context for pseudo-elements */
}

/* ── Shared pseudo-element base ── */
.hint--tooltip::before,
.hint--tooltip::after {
    position:        absolute;
    left:            50%;
    pointer-events:  none;
    opacity:         0;
    z-index:         9999;
    /* Default: slide up from slightly below */
    transform:       translateX(-50%) translateY(6px);
    transition:
        opacity   0.22s ease,
        transform 0.22s ease;
}

/* ── Tooltip bubble ── */
.hint--tooltip::before {
    content:       attr(data-tooltip);   /* ← driven by JS */
    bottom:        calc(100% + 10px);

    /* Appearance */
    background:    #1a1a1a;
    color:         #ffffff;
    font-size:     11.5px;
    font-weight:   500;
    font-family:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    white-space:   nowrap;
    padding:       5px 11px;
    border-radius: 5px;
    letter-spacing: 0.02em;
    line-height:   1.4;

    /* Keep inside viewport */
    max-width:     220px;
    overflow:      hidden;
    text-overflow: ellipsis;
    box-shadow:    0 2px 8px rgba(0, 0, 0, 0.28);
}

/* ── Arrow ── */
.hint--tooltip::after {
    content:              '';
    bottom:               calc(100% + 2px);   /* flush with bubble */
    border:               5px solid transparent;
    border-top-color:     #1a1a1a;
    /* nudge arrow left/right to stay centred under bubble */
}

/* ── Visible on hover (or focus for a11y) ── */
.hint--tooltip:hover::before,
.hint--tooltip:hover::after,
.hint--tooltip:focus-visible::before,
.hint--tooltip:focus-visible::after {
    opacity:   1;
    transform: translateX(-50%) translateY(0);
}

/*
 * Status colour variants
 * .hint--in-wishlist  → green bubble
 * .hint--add          → default dark bubble (no modifier needed)
 */
.hint--tooltip.wcw-active::before {
    background:       #27ae60;
    box-shadow:       0 2px 8px rgba(39, 174, 96, 0.28);
}
.hint--tooltip.wcw-active::after {
    border-top-color: #27ae60;
}


/* ── 3. Wish Count ───────────────────────────────────────────────────────── */

.wish-count {
    display:         inline-block;
    min-width:       20px;
    text-align:      center;
    font-weight:     700;
    color:           #e74c3c;
    font-variant-numeric: tabular-nums;
    transition:      transform 0.2s ease;
}

/* Tiny bump animation when count changes */
.wish-count.wcw-count-bump {
    animation: wcw-bump 0.3s ease;
}


/* ── 4. Toast Notice ─────────────────────────────────────────────────────── */

.wcw-notice {
    /* Positioning */
    position:     fixed;
    bottom:       28px;
    left:         50%;
    z-index:      99999;

    /* Appearance */
    background:   #1a1a1a;
    color:        #ffffff;
    font-size:    13.5px;
    font-family:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight:  500;
    padding:      11px 22px;
    border-radius: 8px;
    box-shadow:   0 6px 24px rgba(0, 0, 0, 0.28);
    max-width:    90vw;
    text-align:   center;
    line-height:  1.45;

    /* Animate in/out */
    opacity:      0;
    transform:    translate(-50%, 16px);
    transition:
        opacity   0.3s ease,
        transform 0.3s ease;

    /* Prevent layout shift */
    pointer-events: none;
}

.wcw-notice--visible {
    opacity:   1;
    transform: translate(-50%, 0);
}

/* Colour modifiers */
.wcw-notice--success { background: #27ae60; }
.wcw-notice--error   { background: #c0392b; }
.wcw-notice--info    { background: #2980b9; }


/* ── 5. Animations ───────────────────────────────────────────────────────── */

@keyframes wcw-pop {
    0%   { transform: scale(1);    }
    45%  { transform: scale(1.45); }
    70%  { transform: scale(0.9);  }
    100% { transform: scale(1);    }
}

@keyframes wcw-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

@keyframes wcw-bump {
    0%   { transform: scale(1);    }
    50%  { transform: scale(1.35); }
    100% { transform: scale(1);    }
}