/**
 * slm-hero-player-compact.css
 * 
 * COMPACT WIDGET - matches helpbot widget styling
 * Minimum font size: 14px (accessibility)
 */

/* Container with helpbot-matching dark theme variables */
.hero-player-compact {
    /* Colors matched to helpbot widget */
    --bg-primary: #1a1a2e;
    --bg-secondary: #16162a;
    --bg-tertiary: #252542;
    --border-color: #2a2a4a;
    --text-primary: #ffffff;
    --text-secondary: #a0a0b0;
    --button: #8b5cf6;
    --button-hover: #7c3aed;
    --element-hover: #252542;
    --font-main: 'Poppins', sans-serif;
    --font-inter: 'Inter', sans-serif;
    --signature-green: #00bf02;
    --signature-red: #ef4444;
    --signature-purple: #702dd7;
    max-width: 380px;
    margin: 16px 0;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

    /* Panel - match helpbot card style */
    .hero-player-compact .mp-music-survey-panel {
        padding: 0;
        margin: 0;
        min-height: auto;
        height: auto;
        max-width: 100%;
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
        overflow: hidden;
    }

/* Header bar - matches helpbot header */
.hero-player-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.hero-player-header-icon {
    font-size: 24px;
    line-height: 1;
}

.hero-player-header-title {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Content area */
.hero-player-content {
    padding: 12px 16px;
}

/* Track title - inside content */
.hero-player-compact .mp-music-panel-header {
    margin-bottom: 8px;
    text-align: center;
}

.hero-player-compact .mp-hero-title {
    font-size: 28px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.hero-player-compact .mp-music-panel-header p {
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    margin: 0;
    color: var(--text-primary);
}

/* Play button - helpbot purple */
.hero-player-compact .mp-play-pause-button {
    width: 44px;
    height: 44px;
    background: var(--button);
}

    .hero-player-compact .mp-play-pause-button:hover {
        background: var(--button-hover);
    }

.hero-player-compact .mp-play-icon,
.hero-player-compact .mp-pause-icon {
    font-size: 16px;
    transform: scale(1);
}

/* Progress bar */
.hero-player-compact .mp-progress-bar {
    bottom: -14px;
    height: 3px;
}

.hero-player-compact .mp-music-controls {
    margin: 8px 0 24px 0;
}

/* Feedback section */
.hero-player-compact .mp-feedback-section {
    margin-top: 20px;
    margin-bottom: 0;
}

    .hero-player-compact .mp-feedback-section h3 {
        font-size: 16px;
        font-family: 'Poppins', sans-serif;
        font-weight: 500;
        margin-bottom: 16px;
        color: var(--text-primary);
    }

    .hero-player-compact .mp-feedback-section p {
        font-size: 14px;
        font-family: 'Poppins', sans-serif;
        margin-bottom: 6px;
        color: var(--text-primary);
    }

/* Slider - visible and inviting */
.hero-player-compact .music-rating-slider-container {
    padding: 20px 16px 15px 16px;
    margin-top: 12px;
}

.hero-player-compact .music-rating-slider {
    height: 10px;
    max-width: 320px;
    margin-top: -14px;
}

    /* Keep slider visually bright even when disabled */
    .hero-player-compact .music-rating-slider:disabled {
        opacity: 1;
        filter: none;
        cursor: pointer;
    }

/* Thumb styling - use ID for specificity */
#heroMusicRatingSlider::-webkit-slider-thumb {
    z-index: 100;
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--signature-green), #00a002);
    border: 4px solid var(--bg-primary);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 191, 2, 0.5);
    margin-top: -2px;
    margin-left: -4px;
}

#heroMusicRatingSlider::-moz-range-thumb {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--signature-green), #00a002);
    border: 4px solid var(--bg-primary);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 191, 2, 0.5);
    margin-top: -2px;
    margin-left: -2px;
}

/* Slider numbers */
.hero-player-compact .slider-numbers {
    max-width: 320px;
    margin-top: -8px;
    padding: 0 4px;
}

.hero-player-compact .slider-number {
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    color: var(--text-secondary);
}

    .hero-player-compact .slider-number.active {
        color: var(--signature-green);
        text-shadow: 0 0 10px rgba(0, 191, 2, 0.4);
    }

/* "Click or slide" text */
.hero-player-compact .mp-feedback-section > p:last-of-type {
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    margin-top: 4px;
    color: var(--text-primary);
}

/* Progress dots */
.hero-player-compact .mp-survey-progress {
    margin-top: 6px;
    margin-bottom: 0;
}

.hero-player-compact .mp-progress-dot {
    width: 5px;
    height: 5px;
}

    .hero-player-compact .mp-progress-dot.mp-active {
        background: var(--signature-purple);
        transform: scale(1.4);
    }

/* Completion panel */
.hero-player-compact .mp-green-button {
    padding: 10px 20px;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    background: var(--button);
    border-radius: 8px;
}

    .hero-player-compact .mp-green-button:hover {
        background: var(--button-hover);
    }

.hero-player-compact .slider-zones {
    display: none;
}