/* WAD PLAYER MODULE - COMPLETELY ISOLATED STYLES */
/* This is the ONLY player stylesheet */
/* Single source of truth for ALL player visuals */
/* UPGRADED: Pure SVG icon system - no font dependencies */

/* ============================================
   FLOATING PLAYER CONTAINER
   Smooth animated appearance
============================================ */

#wad-player {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    height: 72px;

    background: #181818;
    border-top: 1px solid #282828;

    padding: 0 16px;
    padding-bottom: env(safe-area-inset-bottom);

    z-index: 999999;

    color: #fff;

    font-family:
        'Montserrat',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        sans-serif;

    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);

    /* HIDDEN STATE */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(100%);

    transition:
        transform .28s ease,
        opacity .28s ease,
        visibility .28s ease;
}

/* VISIBLE STATE */

#wad-player.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}

/* ============================================
   PLAYER LEFT SECTION (Cover + Track Info)
============================================ */

.wad-player-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
}

#wad-track-link {
    display: block;
    flex-shrink: 0;
    cursor: pointer;
    text-decoration: none;
}

#wad-cover {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    object-fit: cover;
    background: #222;
    display: block;
}

.wad-track-meta {
    display: flex;
    flex-direction: column;
}

#wad-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

#wad-artist {
    font-size: 11px;
    color: #b3b3b3;
}

/* ============================================
   PLAYER CENTER SECTION (Controls with SVG)
============================================ */

.wad-player-center {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wad-control-btn {
    position: relative;
    overflow: hidden;
    border: none;
    background: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    color: #fff;
}

.wad-control-btn:hover {
    background: rgba(255,255,255,0.1);
    transform: scale(1.05);
}

.wad-icon {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}

/* PLAY / PAUSE TOGGLE */
.wad-icon-pause {
    display: none;
}

#wad-play.is-playing .wad-icon-play {
    display: none;
}

#wad-play.is-playing .wad-icon-pause {
    display: block;
}

/* Large Play Button */
#wad-play {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    color: #000;
}

#wad-play .wad-icon {
    width: 22px;
    height: 22px;
}

#wad-play:hover {
    transform: scale(1.08);
    background: #1db954;
    color: #000;
}

/* VOLUME / MUTE TOGGLE */
.wad-icon-mute {
    display: none;
}

#wad-volume-btn.is-muted .wad-icon-volume {
    display: none;
}

#wad-volume-btn.is-muted .wad-icon-mute {
    display: block;
}

/* ============================================
   PLAYER RIGHT SECTION (Progress + Volume)
============================================ */

.wad-player-right {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 320px;
}

#wad-current-time,
#wad-duration {
    font-size: 11px;
    color: #b3b3b3;
    min-width: 40px;
}

#wad-progress {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: #535353;
}

#wad-volume-btn {
    background: transparent !important;
    width: 32px !important;
    height: 32px !important;
}

#wad-volume {
    width: 80px;
    height: 4px;
    border-radius: 2px;
    background: #535353;
}

/* ============================================
   RANGE INPUT CROSS-BROWSER SUPPORT
============================================ */

#wad-progress,
#wad-volume {
    -webkit-appearance: none;
    background: #535353;
}

/* WEBKIT (Chrome, Safari, Edge) */

#wad-progress::-webkit-slider-thumb,
#wad-volume::-webkit-slider-thumb {
    -webkit-appearance: none;

    width: 12px;
    height: 12px;

    border-radius: 50%;
    background: #1db954;

    cursor: pointer;
}

/* FIREFOX */

#wad-progress::-moz-range-thumb,
#wad-volume::-moz-range-thumb {
    width: 12px;
    height: 12px;

    border-radius: 50%;
    background: #1db954;

    border: none;
    cursor: pointer;
}

#wad-progress::-moz-range-track,
#wad-volume::-moz-range-track {
    background: #535353;
    height: 4px;
    border-radius: 2px;
}

/* ============================================
   BASE PLAY BUTTON SYSTEM
   Single source of truth for ALL play buttons
============================================ */

.wad-play-ui {
    border: none;
    background: linear-gradient(180deg, #1ed760 0%, #0ca63f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    border-radius: 50%;
    touch-action: manipulation;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;

    box-shadow:
        0 8px 22px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.16);
}

/* Hover */

.wad-play-ui:hover {
    transform: scale(1.08);
    filter: brightness(1.05);
}

/* Press feedback */

.wad-play-ui:active {
    transform: scale(0.96);
}

/* Accessibility */

.wad-play-ui:focus-visible {
    outline: 2px solid #1db954;
    outline-offset: 2px;
}

/* Active playing state */

.is-playing {
    box-shadow:
        0 0 14px rgba(30,215,96,.40),
        0 8px 22px rgba(0,0,0,.45);
}

/* ============================================
   UNIVERSAL ICON SYSTEM
   Single source of truth for play/pause icons
============================================ */

.wad-mini-icon {
    position: relative;
    width: 18px;
    height: 18px;
    display: block;
}

/* PLAY TRIANGLE */

.wad-mini-icon.play::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0;

    width: 0;
    height: 0;

    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 14px solid #fff;
}

/* HIDE TRIANGLE WHEN PLAYING */

.is-playing .wad-mini-icon.play::before {
    display: none;
}

/* PAUSE ICON */

.is-playing .wad-mini-icon.pause::before,
.is-playing .wad-mini-icon.pause::after {
    content: "";
    position: absolute;
    top: 0;

    width: 5px;
    height: 18px;

    background: #fff;
    border-radius: 1px;
}

.is-playing .wad-mini-icon.pause::before {
    left: 2px;
}

.is-playing .wad-mini-icon.pause::after {
    right: 2px;
}

/* ============================================
   SPECIFIC BUTTON POSITIONING OVERRIDES
   (Sizing only - visuals come from .wad-play-ui)
============================================ */

/* Shop frontpage overlay buttons */
.wad-play-overlay {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    z-index: 5;
    opacity: 0;
    transform: translateY(10px);
}

.wad-play-overlay:hover {
    transform: scale(1.1);
}

/* Artist profile trigger buttons */
.wad-play-trigger {
    position: absolute !important;
    right: 14px !important;
    bottom: 14px !important;
    width: 54px !important;
    height: 54px !important;
    z-index: 30 !important;
}

/* Latest release overlay */
.latest-release-overlay {
    position: absolute !important;
    right: 14px !important;
    bottom: 14px !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
    z-index: 50;
}

/* Quick access trigger */
.quick-play-trigger {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    flex: 0 0 42px !important;
    margin-left: auto;
}

/* Product grid mini buttons */
.wad-product-item .wad-play-trigger {
    position: absolute !important;
    right: 14px !important;
    bottom: 14px !important;
    width: 54px !important;
    height: 54px !important;
    z-index: 30 !important;
}

/* ============================================
   MOBILE RESPONSIVE
============================================ */

@media (max-width: 768px) {
    #wad-player { padding: 0 12px; height: 64px; }
    #wad-cover { width: 42px; height: 42px; }
    #wad-title { font-size: 12px; }
    .wad-player-right { min-width: auto; gap: 6px; }
    #wad-volume { width: 60px; }
    
    /* Mobile overlay button adjustments */
    .wad-play-overlay {
        width: 36px;
        height: 36px;
        bottom: 8px;
        right: 8px;
        opacity: 1;
        transform: translateY(0);
    }
    
    .wad-play-trigger {
        width: 48px !important;
        height: 48px !important;
        right: 10px !important;
        bottom: 10px !important;
    }
    
    .latest-release-overlay {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        right: 10px !important;
        bottom: 10px !important;
    }
    
    .quick-play-trigger {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        flex: 0 0 36px !important;
    }
    
    .wad-product-item .wad-play-trigger {
        width: 48px !important;
        height: 48px !important;
        right: 10px !important;
        bottom: 10px !important;
    }
}

@media (max-width: 600px) {
    .wad-player-right {
        min-width: auto;
        gap: 8px;
    }

    /* Hide only utility controls */
    #wad-current-time,
    #wad-duration,
    #wad-volume,
    #wad-volume-btn {
        display: none;
    }

    /* Keep progress usable */
    #wad-progress {
        width: 120px;
    }

    .wad-player-left {
        min-width: 160px;
    }
}

@media (max-width: 480px) {
    .wad-play-overlay {
        width: 32px;
        height: 32px;
    }
    
    .wad-play-trigger {
        width: 42px !important;
        height: 42px !important;
        right: 8px !important;
        bottom: 8px !important;
    }
    
    .latest-release-overlay {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
        right: 8px !important;
        bottom: 8px !important;
    }
    
    .quick-play-trigger {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        flex: 0 0 32px !important;
    }
    
    .wad-product-item .wad-play-trigger {
        width: 42px !important;
        height: 42px !important;
        right: 8px !important;
        bottom: 8px !important;
    }
}

/* ============================================
   ACCESSIBILITY - REDUCED MOTION
============================================ */

@media (prefers-reduced-motion: reduce) {
    .wad-play-ui,
    #wad-player {
        transition: none !important;
    }
}

/* ============================================
   DESKTOP HOVER REVEAL EFFECT
============================================ */

@media (min-width: 768px) {
    .quick-play-trigger {
        transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease !important;
    }
}