/* 
    ============================================
    AUDIO PLAYER STYLING GUIDE
    ============================================
    
    All colors and dimensions below can be customized.
    I've added comments to explain what each section does.
*/

/* === MAIN PLAYER CONTAINER === */
.audio-player {
    background: #f3f3f3;       /* Background of the whole player bar */
    border-radius: 8px;        /* Rounded corners */
    padding: 12px 16px;        /* Inner spacing */
    display: flex;
    flex-direction: column;      /* Stack children vertically */
    align-items: stretch;      /* Vertically center all items */
    gap: 12px;                 /* Space between elements */
    font-family: Arial, sans-serif;
    max-width: 550px;
    border: 1px solid #ddd;    /* Subtle border */
    
    /* Custom cursor - replace url('') with your cursor file path */
    cursor: url('tvpointer1'), auto;
}

/* === TRACK INFO SECTION === */
.track-info {
    padding-bottom: 4px;          /* Optional: space below text */
    display: block;              /* Ensure it takes full width */
}

.track-title {
    font-size: 14px;
    font-weight: 600;             /* Bold */
    color: #222;                  /* Dark gray - change as needed */
    line-height: 1.3;
}

.track-artist {
    font-size: 12px;
    color: #666;                  /* Lighter gray */
    line-height: 1.3;
}

/* === CONTROLS ROW === */
.player-controls {
    display: flex;
    flex-direction: row;         /* ← THIS is the fix - forces horizontal layout */
    align-items: center;
    gap: 12px;
}

/* === BUTTONS (Play/Pause) === */
.audio-player button {
    background: none;
    border: none;
    cursor: url('tvpointer1'), auto;     /* Your custom cursor */
    font-size: 16px;
    padding: 6px 12px;
    border-radius: 4px;
    background-color: #e0e0e0;  /* Button background */
    color: #333;               /* Button text color */
    transition: background-color 0.2s;
    min-width: 70px;
    font-weight: 500;
}

/* Button hover effect - change background on mouse over */
.audio-player button:hover {
    background-color: #0077cc;  /* Blue on hover */
    color: #ffffff;            /* White text on hover */
}

/* === TIME DISPLAY === */
.time-display {
    font-size: 13px;
    color: #555;               /* Text color */
    min-width: 85px;
    text-align: center;
    cursor: url(''), auto;
}

/* === PROGRESS BAR === */
/* The outer track (background) */
.progress-container {
    flex: 1;                   /* Takes up remaining space */
    height: 6px;               /* Thickness of the bar */
    background: #ccc;          /* Color of the unplayed portion */
    border-radius: 6px;
    cursor: pointer;           /* Shows it's clickable */
    position: relative;
}

/* The inner fill (played portion) */
.progress-fill {
    height: 100%;
    background: #0077cc;       /* Color of the played portion - change for accent */
    border-radius: 6px;
    width: 0%;                 /* JavaScript controls this */
    pointer-events: none;      /* Clicks pass through to container */
}

/* === VOLUME SECTION === */
.volume-section {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Volume icon (speaker emoji) */
.volume-icon {
    font-size: 16px;
    cursor: url(''), auto;
}

/* Volume slider (the draggable control) */
.volume-slider {
    width: 70px;               /* Length of the slider */
    cursor: url(''), auto;
}

.volume-icon {
    /* ... your existing styles ... */
    display: inline-block;
    width: 31px;                /* Adjust until "🔈ııı" fits comfortably */
    text-align: left;
}
    
    /* 
        OPTIONAL: Custom slider color
        The following works in most browsers to tint the slider track.
    */
    accent-color: #0077cc;     /* Changes the slider's fill color to blue */
}

/* === BUTTONS (Play/Pause) === */
.audio-player button {
    /* ... keep all your existing button styles ... */
    
    /* Disable default tap highlight */
    -webkit-tap-highlight-color: transparent;
    
    /* Remove any default button styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* Prevent touch callouts and selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    
    /* Remove focus outline that may appear as blue */
    outline: none;
    
    /* Ensure background doesn't change unexpectedly */
    background-color: #e0e0e0;
}

/* Only apply hover on devices that support true hover */
@media (hover: hover) {
    .audio-player button:hover {
        background-color: #0077cc;
        color: #ffffff;
    }
}

/* Active state - visual feedback for touch */
.audio-player button:active {
    background-color: #005599 !important;
    color: #ffffff !important;
}

/* Remove focus styles that may cause blue tint */
.audio-player button:focus {
    outline: none;
    background-color: #e0e0e0;
}

/* Ensure focus-visible doesn't reintroduce styles */
.audio-player button:focus-visible {
    outline: none;
}

/* === BUTTONS (Play/Pause) === */
.audio-player button {
    /* ... keep all your existing button styles ... */
    
    /* Fixed height - prevents vertical shifting */
    height: 32px;                    /* Adjust as needed */
    line-height: 1;                  /* Keeps text vertically centered */
    
    /* Flexbox for perfect centering */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Fixed width if you also want to prevent horizontal shifts */
    min-width: 85px;                 /* Already there, just confirming */
}

/* 
    ============================================
    COLOR CUSTOMIZATION QUICK REFERENCE
    ============================================
    
    To change the player's color scheme, edit these values:
    
    .audio-player           → background (player bar background)
    .audio-player button    → background-color (button default)
    .audio-player button:hover → background-color (button on hover)
    .progress-container     → background (unplayed track color)
    .progress-fill          → background (played track color)
    .volume-slider          → accent-color (slider fill color)
    .time-display           → color (time text color)
    
    Example - Dark theme:
    .audio-player { background: #2a2a2a; border-color: #444; }
    .time-display { color: #ccc; }
    .audio-player button { background-color: #3a3a3a; color: #fff; }
    .progress-container { background: #444; }
    .progress-fill { background: #ff6b6b; }
    
    ============================================
*/