/**
 * VIBESXS Favorites UI Styling
 *
 * Styles for the heart icon favorites feature across both player templates.
 * Implements 24px icon sizing, 0.3s animation timing, and hot pink accent color.
 *
 * @package VIBESXS
 * @since 2.3.2
 */

/* ========== PHASE 2.1: Heart Icon Base Styling ========== */

/**
 * Heart Icon Button - All Sizes
 * Universal styling for [data-favorite-track] buttons in both players
 */
[data-favorite-track] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
    padding: 8px;
    border-radius: 8px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

/**
 * Heart Icon - Hover State
 * Brightens and scales slightly on mouse/touch hover
 */
[data-favorite-track]:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.05);
    transform: scale(1.1);
}

/**
 * Heart Icon - Focus State (Keyboard Navigation)
 * Visible outline for accessibility
 */
[data-favorite-track]:focus {
    outline: 2px solid rgba(255, 20, 147, 0.6);
    outline-offset: 2px;
}

/**
 * Heart Icon - Active/Pressed State
 * Provides tactile feedback on click
 */
[data-favorite-track]:active {
    transform: scale(0.95);
}

/* ========== PHASE 2.1: Favorited State ========== */

/**
 * Heart Icon - Favorited (Filled)
 * Applied when track is marked as favorite (♥ symbol)
 * Features hot pink color with subtle glow effect
 */
[data-favorite-track].favorited {
    color: #FF1493;
    text-shadow: 0 0 12px rgba(255, 20, 147, 0.5);
}

/**
 * Heart Icon - Favorited Hover
 * Intensifies the glow on hover
 */
[data-favorite-track].favorited:hover {
    color: #FF1493;
    text-shadow: 0 0 18px rgba(255, 20, 147, 0.7);
    transform: scale(1.15);
}

/* ========== PHASE 2.1: Heart Pulse Animation ========== */

/**
 * Pulse Animation Keyframes
 * Applied when user clicks to favorite a track
 * 0.4s duration with cubic-bezier easing for bouncy feel
 */
@keyframes heartPulse {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.3);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/**
 * Heart Icon - Pulse Class
 * Applied during favorite toggle animation
 * Creates visual feedback that action was registered
 */
[data-favorite-track].pulse {
    animation: heartPulse 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========== PHASE 2.1: Player-Specific Overrides ========== */

/**
 * Homepage Player Heart Icon Sizing (vibesxs-player.php)
 * Standard 24px sizing in playback controls
 */
.vhp-btn-control[data-favorite-track] {
    font-size: 24px;
    width: 44px;
    height: 44px;
}

/**
 * Immersive Player Heart Icon Styling (vibesxs-immersive-player.php)
 * Positioned in corner of artwork container with dark background
 */
.vip-favorite-button {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

/**
 * Immersive Player Heart - Hover State
 */
.vip-favorite-button:hover {
    background: rgba(0, 0, 0, 0.7);
    color: #FF1493;
    transform: scale(1.1);
}

/**
 * Immersive Player Heart - Favorited State
 */
.vip-favorite-button.favorited {
    color: #FF1493;
    text-shadow: 0 0 12px rgba(255, 20, 147, 0.6);
}

/* ========== PHASE 2.1: Responsive Design ========== */

/**
 * Mobile Adjustments (≤480px)
 * Reduce icon size slightly on small screens for better spacing
 */
@media (max-width: 480px) {
    [data-favorite-track] {
        font-size: 22px;
        padding: 6px;
        min-width: 40px;
        min-height: 40px;
    }

    .vip-favorite-button {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

/**
 * Tablet Adjustments (481px - 768px)
 * Standard sizing maintained for touch targets
 */
@media (min-width: 481px) and (max-width: 768px) {
    [data-favorite-track] {
        padding: 8px;
    }
}

/**
 * Desktop and Larger (>768px)
 * Standard sizing with enhanced hover effects
 */
@media (min-width: 769px) {
    [data-favorite-track]:hover {
        transform: scale(1.15);
    }

    [data-favorite-track].favorited:hover {
        transform: scale(1.2);
    }
}

/* ========== PHASE 2.1: Accessibility Features ========== */

/**
 * Reduced Motion Support
 * Respects user's motion preference via prefers-reduced-motion
 */
@media (prefers-reduced-motion: reduce) {
    [data-favorite-track],
    [data-favorite-track]:hover,
    [data-favorite-track].pulse {
        animation: none;
        transition: none;
        transform: none;
    }
}

/**
 * High Contrast Mode Support
 * Increases visibility in high contrast environments
 */
@media (prefers-contrast: more) {
    [data-favorite-track] {
        color: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    [data-favorite-track].favorited {
        color: #FF1493;
        text-shadow: 0 0 18px rgba(255, 20, 147, 0.8);
        border: 1px solid rgba(255, 20, 147, 0.8);
    }
}

/* EOF */