/**
 * Basic Music Player Widget Styles
 * 
 * @package Pretpot_Elementor_Kit
 */

/* ============================================
   BASE PLAYER STYLES
   ============================================ */

.pretpot-basic-music-player {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--player-gap, 16px);
    width: 100%;
    max-width: var(--player-max-width, 600px);
    padding: var(--player-padding, 16px 20px);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--player-border-radius, 16px);
    border: var(--player-border-width, 1px) var(--player-border-style, solid) var(--player-border-color, rgba(255, 255, 255, 0.2));
    box-shadow: var(--player-box-shadow, 0 8px 32px rgba(0, 0, 0, 0.3));
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* ============================================
   LEFT SECTION: ALBUM ART + INFO
   ============================================ */

.pretpot-bmp-left {
    display: flex;
    align-items: center;
    gap: var(--info-gap, 16px);
    flex: 1;
    min-width: 0;
}

.pretpot-bmp-album-art {
    width: var(--album-size, 64px);
    height: var(--album-size, 64px);
    border-radius: var(--album-border-radius, 8px);
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.pretpot-bmp-album-art:hover {
    transform: scale(1.05);
}

.pretpot-bmp-album-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pretpot-bmp-info {
    display: flex;
    flex-direction: column;
    gap: var(--info-text-gap, 4px);
    min-width: 0;
    overflow: hidden;
}

.pretpot-bmp-title {
    font-size: var(--title-size, 18px);
    font-weight: 600;
    color: var(--text-color, #000000);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    margin: 0;
}

.pretpot-bmp-meta {
    display: flex;
    align-items: center;
    gap: var(--meta-gap, 8px);
    flex-wrap: nowrap;
}

.pretpot-bmp-icon {
    width: var(--icon-size, 20px);
    height: var(--icon-size, 20px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--icon-font-size, 10px);
    font-weight: 600;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.pretpot-bmp-icon:hover {
    transform: scale(1.1);
}

.pretpot-bmp-icon-download {
    background: rgba(0, 200, 83, 0.2);
    color: #00c853;
    border: 1px solid rgba(0, 200, 83, 0.3);
}

.pretpot-bmp-icon-download svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.pretpot-bmp-icon-exclusive {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-color, #000000);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.pretpot-bmp-artist {
    font-size: var(--artist-size, 14px);
    color: var(--text-color, #000000);
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    margin: 0;
}

/* ============================================
   RIGHT SECTION: CONTROLS
   ============================================ */

.pretpot-bmp-right {
    display: flex;
    align-items: center;
    gap: var(--controls-gap, 12px);
    flex-shrink: 0;
}

/* Glass Button Base */
.pretpot-bmp-btn {
    width: var(--btn-size, 48px);
    height: var(--btn-size, 48px);
    border-radius: 50%;
    border: var(--btn-border-width, 1px) var(--btn-border-style, solid) var(--btn-border-color, rgba(0, 0, 0, 0.1));
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: var(--btn-color, #000000);
    padding: 0;
    margin: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.pretpot-bmp-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.pretpot-bmp-btn:active {
    transform: scale(0.95);
}

.pretpot-bmp-btn:focus-visible {
    outline: 2px solid var(--btn-color, #000000);
    outline-offset: 2px;
}

/* Play Button (larger) */
.pretpot-bmp-play-btn {
    width: var(--play-btn-size, 56px);
    height: var(--play-btn-size, 56px);
}

/* Button Icons */
.pretpot-bmp-btn svg {
    width: var(--btn-icon-size, 24px);
    height: var(--btn-icon-size, 24px);
    fill: currentColor;
    pointer-events: none;
}

.pretpot-bmp-play-btn svg {
    width: var(--play-icon-size, 24px);
    height: var(--play-icon-size, 24px);
}

.pretpot-bmp-pause-icon {
    display: none;
}

.pretpot-basic-music-player.is-playing .pretpot-bmp-play-icon {
    display: none;
}

.pretpot-basic-music-player.is-playing .pretpot-bmp-pause-icon {
    display: block;
}

/* Dots Button */
.pretpot-bmp-dots-btn {
    font-size: var(--dots-size, 20px);
    letter-spacing: 2px;
    font-weight: bold;
    line-height: 1;
}

/* ============================================
   DROPDOWN MENU
   ============================================ */

.pretpot-bmp-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: var(--dropdown-right, 20px);
    left: auto;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--dropdown-border-radius, 12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: var(--dropdown-padding, 12px);
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--dropdown-gap, 8px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 100;
    min-width: 200px;
    max-width: 100%;
    box-sizing: border-box;
}

.pretpot-bmp-dropdown.is-active {
    display: flex;
    animation: pretpot-bmp-dropdown-in 0.2s ease;
}

@keyframes pretpot-bmp-dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pretpot-bmp-dropdown-item {
    padding: var(--dropdown-item-padding, 10px 16px);
    border-radius: var(--dropdown-item-radius, 8px);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: var(--text-color, #000000);
    font-size: var(--dropdown-font-size, 14px);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 80px;
    text-decoration: none;
}

.pretpot-bmp-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.25);
}

.pretpot-bmp-dropdown-item:focus-visible {
    outline: 2px solid var(--text-color, #000000);
    outline-offset: 2px;
}

/* ============================================
   AUDIO ELEMENT (HIDDEN)
   ============================================ */

.pretpot-bmp-audio {
    display: none !important;
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */

@media (max-width: 767px) {
    .pretpot-basic-music-player {
        padding: var(--player-padding-mobile, 12px 16px);
        gap: var(--player-gap-mobile, 12px);
    }
    
    .pretpot-bmp-album-art {
        width: var(--album-size-mobile, 52px);
        height: var(--album-size-mobile, 52px);
    }
    
    .pretpot-bmp-title {
        font-size: var(--title-size-mobile, 16px);
    }
    
    .pretpot-bmp-artist {
        font-size: var(--artist-size-mobile, 13px);
    }
    
    .pretpot-bmp-btn {
        width: var(--btn-size-mobile, 44px);
        height: var(--btn-size-mobile, 44px);
    }
    
    .pretpot-bmp-play-btn {
        width: var(--play-btn-size-mobile, 48px);
        height: var(--play-btn-size-mobile, 48px);
    }
    
    .pretpot-bmp-btn svg,
    .pretpot-bmp-play-btn svg {
        width: var(--btn-icon-size-mobile, 20px);
        height: var(--btn-icon-size-mobile, 20px);
    }
    
    .pretpot-bmp-dropdown {
        right: var(--dropdown-right-mobile, 10px);
        left: var(--dropdown-left-mobile, 10px);
        flex-direction: column;
    }
    
    .pretpot-bmp-dropdown-item {
        justify-content: flex-start;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .pretpot-basic-music-player {
        padding: var(--player-padding-tablet, 14px 18px);
        max-width: var(--player-max-width-tablet, 100%);
    }
    
    .pretpot-bmp-album-art {
        width: var(--album-size-tablet, 58px);
        height: var(--album-size-tablet, 58px);
    }
    
    .pretpot-bmp-title {
        font-size: var(--title-size-tablet, 17px);
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .pretpot-basic-music-player,
    .pretpot-bmp-btn,
    .pretpot-bmp-album-art,
    .pretpot-bmp-dropdown,
    .pretpot-bmp-dropdown-item,
    .pretpot-bmp-icon {
        transition: none !important;
        animation: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .pretpot-basic-music-player {
        border-width: 2px;
        border-color: currentColor;
    }
    
    .pretpot-bmp-btn {
        border-width: 2px;
    }
}

/* Focus visible polyfill support */
.pretpot-bmp-btn:focus:not(:focus-visible),
.pretpot-bmp-dropdown-item:focus:not(:focus-visible) {
    outline: none;
}

/* ============================================
   LOADING STATE
   ============================================ */

.pretpot-basic-music-player.is-loading .pretpot-bmp-play-btn {
    opacity: 0.6;
    pointer-events: none;
}

.pretpot-basic-music-player.is-loading .pretpot-bmp-play-btn::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: pretpot-bmp-spin 1s linear infinite;
}

@keyframes pretpot-bmp-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   ERROR STATE
   ============================================ */

.pretpot-basic-music-player.has-error {
    border-color: #ff5252;
}

.pretpot-bmp-error-msg {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #ff5252;
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.pretpot-basic-music-player.has-error .pretpot-bmp-error-msg {
    opacity: 1;
}