:root{
    /* Amber shades */
  --color-amber-50: #fffbeb; /* You can get these values from Tailwind's color palette or documentation */
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;
  --color-amber-950: #482b1a;
}

/* 1. Main Container */
        .player-container {
            position: relative;
            width: 100%;
            max-width: 800px;
            overflow: hidden; /* Hides controls when they slide out */
        }

        .player-container video {
            width: 100%;
            display: block;
        }
        
        /* 2. Controls Wrapper */
        .controls-container {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(5px);
            color: white;
            padding: 10px;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
            display: flex;
            flex-wrap: wrap; /* Allows controls to stack on smaller screens */
            align-items: center;
            gap: 15px;
        }
        
        /* Show controls on hover */
        .player-container:hover .controls-container {
            opacity: 1;
        }
        
        /* 3. Individual Controls Styling */
        .controls-container button {
            background: none;
            border: none;
            color: var(--color-amber-500);
            cursor: pointer;
            padding: 0;
            width: 24px;
            height: 24px;
        }
        
        .controls-container button svg {
            width: 100%;
            height: 100%;
            pointer-events: none; /* Allows click to pass through to the button */
        }
        
        .timeline-container {
            flex-grow: 1; /* Makes timeline take up available space */
        }
        
        .time-display {
            font-size: 0.85em;
            user-select: none; /* Prevents text selection */
        }
        
        .volume-container {
            display: flex;
            align-items: center;
        }
        
        .volume-container input[type="range"] {
            width: 80px;
        }

        /* 4. Custom Range Slider (Progress & Volume) */
        input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            background: transparent;
            cursor: pointer;
            width: 100%;
        }

        /* Track */
        input[type="range"]::-webkit-slider-runnable-track {
            background-color: var(--color-amber-500);
            height: 5px;
            border-radius: 5px;
        }
        input[type="range"]::-moz-range-track {
            background-color: rgba(255, 255, 255, 0.4);
            height: 5px;
            border-radius: 5px;
        }

        /* Thumb */
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            margin-top: -5.5px; /* Vertically center */
            background-color: var(--primary-color);
            height: 16px;
            width: 16px;
            border-radius: 50%;
            border: 2px solid white;
        }
         input[type="range"]::-moz-range-thumb {
            border: none;
            background-color: var(--primary-color);
            height: 16px;
            width: 16px;
            border-radius: 50%;
            border: 2px solid white;
        }
        #center-play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            background-color: rgba(0, 0, 0, 0.6);
            border: 2px solid white;
            border-radius: 50%;
            cursor: pointer;
            z-index: 10; /* Lower than controls */
            transition: background-color 0.1s ease;
        }
        #center-play-button:hover {
            background-color: var(--color-amber-500);
        }
        #center-play-button::after {
            content: '';
            display: block;
            position: absolute;
            top: 50%;
            left: 55%;
            transform: translate(-50%, -50%);
            width: 0;
            height: 0;
            border-top: 15px solid transparent;
            border-bottom: 15px solid transparent;
            border-left: 25px solid white;
        }
        #center-play-button.hidden {
            display: none;
        }

        /* --- ADD THIS CSS TO MAKE CONTROLS SMALLER --- */

        /* Overlay to cover the video area */
        .spinner-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6); /* Semi-transparent black background */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10; /* Ensure it's above the video */
            visibility: hidden; /* Start hidden */
            opacity: 0;
            transition: opacity 0.3s;
        }

        /* CSS for the actual spinner animation */
        .spinner {
            border: 4px solid #f3f3f3; /* Light grey */
            border-top: 4px solid var(--color-amber-500); /* Use your theme color */
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }

        /* Class to show the spinner */
        .show-spinner {
            visibility: visible;
            opacity: 1;
        }

        /* Keyframes for the spinning animation */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
/* Reduce padding and gaps in the main container */
.controls-container {
    padding: 6px 8px; /* Was 10px */
    gap: 6px;         /* Was 8px */
    
}

/* Make all desktop buttons smaller */
.controls-container button {
    width: 20px;  /* Was 24px */
    height: 20px; /* Was 24px */
}

/* Make time text smaller */
.time-display {
    font-size: 0.75em; /* Was 0.85em */
}

/* Make the volume slider shorter */
.volume-container input[type="range"] {
    width: 60px; /* Was 80px */
}

/* Make the timeline and volume tracks thinner */
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-moz-range-track {
    height: 4px; /* Was 5px */
}

/* Make the slider thumbs smaller and re-center them */
input[type="range"]::-webkit-slider-thumb {
    height: 12px;     /* Was 16px */
    width: 12px;      /* Was 16px */
    margin-top: -4px; /* Re-center: (4px track - 12px thumb) / 2 */
}
input[type="range"]::-moz-range-thumb {
    height: 12px; /* Was 16px */
    width: 12px;  /* Was 16px */
}

#player-container.playing .control-bar {
    opacity: 0;
    pointer-events: none; /* Prevents clicks on hidden controls */
}

/* --- Smaller Mobile Controls (for 425px) --- */
@media (max-width: 425px) {
    .controls-container {
        padding: 8px; /* Was 10px */
        gap: 6px;     /* Was 8px */
    }

    /* Make mobile buttons smaller (but still touch-friendly) */
    .controls-container button {
        width: 26px;  /* Was 30px */
        height: 26px; /* Was 30px */
    }
    
    .time-display {
        font-size: 0.85em; /* Was 1em */
    }

    /* Make mobile volume slider shorter */
    .volume-container input[type="range"] {
        width: 60px; /* Was 70px */
    }
}