:root {
    --thumb-size: 28px;
}

/* --- Footer --- */
.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 0.2rem 0; /* Narrower padding than header */
    text-align: center;
    z-index: 10; /* Same as header to be on top of content */
    backdrop-filter: blur(10px);
    background: rgba(5, 3, 8, 0.3); /* More transparent */
    box-shadow: none; /* Removed shadow */
    color: var(--base-white); /* Inherit text color */
    font-size: 0.7rem; /* Smaller font size */
}

.audio-player-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.audio-player-container audio {
    width: 70%; /* Adjust width as needed */
    max-width: 400px; /* Max width for player */
}

/* Hide native audio controls */
audio::-webkit-media-controls-panel {
    display: none !important;
    -webkit-appearance: none;
}
audio::-webkit-media-controls-play-button {
    display: none !important;
    -webkit-appearance: none;
}
audio::-webkit-media-controls-current-time-display {
    display: none !important;
    -webkit-appearance: none;
}
audio::-webkit-media-controls-time-remaining-display {
    display: none !important;
    -webkit-appearance: none;
}
audio::-webkit-media-controls-timeline {
    display: none !important;
    -webkit-appearance: none;
}
audio::-webkit-media-controls-volume-slider {
    display: none !important;
    -webkit-appearance: none;
}
audio::-webkit-media-controls-mute-button {
    display: none !important;
    -webkit-appearance: none;
}
audio::-webkit-media-controls-toggle-closed-captions-button {
    display: none !important;
    -webkit-appearance: none;
}
audio::-webkit-media-controls-fullscreen-button {
    display: none !important;
    -webkit-appearance: none;
}

/* Fallback for Firefox */
audio {
    -moz-appearance: none;
    appearance: none;
    width: 0; /* Hide the audio element itself */
    height: 0;
}

/* Custom controls styling - Goth Refined */
.audio-player-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 1.5rem; /* More generous padding */
    background: rgba(5, 3, 8, 0.2); /* Using a darker existing color with transparency */
    border-radius: 0; /* More pronounced rounded corners */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), inset 0 0 11px rgba(255, 255, 255, 0.05); /* Deeper shadow, subtle inner glow */
    border: none; /* Deep purple subtle border */
    backdrop-filter: blur(8px); /* Soft blur */
}

.audio-player-container .controls {
    display: flex;
    align-items: center;
    gap: 1rem; /* Increased gap for visual breathing room */
    width: 100%;
    max-width: 500px; /* Slightly wider player */
}

.player-btn {
    background: var(--royal-purple-700); /* Deep purple background */
    color: var(--base-white); /* White icon */
    border: 1px solid var(--royal-purple-700); /* Matching border */
    border-radius: 50%; /* Circular button */
    width: 32px; /* Larger button */
    height: 32px; /* Larger button */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem; /* Larger icon size (for text fallback) */
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 8px var(--royal-purple-100); /* Subtle glow */
}

.player-btn:hover {
    background: var(--royal-purple-500); /* Darker purple on hover */
    border-color: var(--accent-lavender);
    transform: scale(1.1); /* Slight scale on hover */
    box-shadow: 0 0 15px var(--accent-lavender); /* Enhanced glow on hover */
}

.player-btn svg {
    width: 100%;
    height: 100%;
    padding: 2%; /* Adjust padding to make triangle stand out */
    box-sizing: border-box;
    transition: fill 0.3s ease;
}

.player-btn .play-icon {
    fill: var(--accent-gold); /* Gold play icon */
}

.player-btn .pause-icon {
    fill: var(--accent-lavender); /* Lavender pause icon */
}

.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100px; /* Wider slider */
    height: var(--thumb-size); /* Container for fake slider */
    background: transparent;
    outline: none;
    cursor: pointer;
    position: relative;
}

.volume-slider::-webkit-slider-runnable-track {
    background: transparent;
    border: none;
}

.volume-slider::-moz-range-track {
    background: transparent;
    border: none;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--thumb-size);
    height: var(--thumb-size);
    background: url('./img/vtm_ankh_white.png') center center / contain no-repeat;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0px var(--accent-gold);
    border: none;
    margin-top: 0;
}

.volume-slider::-moz-range-thumb {
    width: var(--thumb-size);
    height: var(--thumb-size);
    background: url('./img/vtm_ankh_white.png') center center / contain no-repeat;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0px var(--accent-gold);
    border: none;
}

.volume-slider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(var(--thumb-size) / 2);
    transform: translateY(-50%);
    width: calc(100% - var(--thumb-size));
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.volume-slider::after {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(var(--thumb-size) / 2);
    transform: translateY(-50%);
    width: calc( (100% - var(--thumb-size)) * var(--volume-progress, 0) / 100 );
    height: 2px;
    background: linear-gradient(to right, var(--accent-lavender) 0%, var(--accent-gold) 100%);
    border-radius: 6px;
}

.hidden {
    display: none !important;
}

.progress-slider {
    -webkit-appearance: none;
    appearance: none;
    flex-grow: 1;
    height: var(--thumb-size); /* Container for fake slider */
    background: transparent;
    outline: none;
    cursor: pointer;
    position: relative;
}

.progress-slider::-webkit-slider-runnable-track {
    background: transparent;
    border: none;
}

.progress-slider::-moz-range-track {
    background: transparent;
    border: none;
}

.progress-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--thumb-size);
    height: var(--thumb-size);
    background: url('./img/vtm_ankh_white.png') center center / contain no-repeat;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0px var(--accent-gold);
    border: none;
    margin-top: 0;
}

.progress-slider::-moz-range-thumb {
    width: var(--thumb-size);
    height: var(--thumb-size);
    background: url('./img/vtm_ankh_white.png') center center / contain no-repeat;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0px var(--accent-gold);
    border: none;
}

.progress-slider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(var(--thumb-size) / 2);
    transform: translateY(-50%);
    width: calc(100% - var(--thumb-size));
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.progress-slider::after {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(var(--thumb-size) / 2);
    transform: translateY(-50%);
    width: calc( (100% - var(--thumb-size)) * var(--progress, 0) / 100 );
    height: 2px;
    background: linear-gradient(to right, var(--accent-lavender) 0%, var(--accent-gold) 100%);
    border-radius: 6px;
}

#time-display {
    font-size: 0.8rem;
    color: var(--base-white);
    margin-left: 1rem;
    min-width: 80px; /* Prevent layout shifts */
    text-align: center;
}