/* Base Styles */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background-color: #f4f6f8;
color: #333;
margin: 0;
padding: 25px;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
line-height: 1.6;
}

#app-container {
background-color: #ffffff;
padding: 30px 35px;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 650px;
}

/* Headings and Titles */
.app-title {
color: #2c3e50;
margin-top: 0;
margin-bottom: 25px;
font-size: 1.8em;
text-align: center;
font-weight: 600;
}
.section-title {
color: #2c3e50;
margin-top: 0;
margin-bottom: 20px;
font-size: 1.4em;
border-bottom: 1px solid #e0e0e0;
padding-bottom: 10px;
font-weight: 500;
}

/* Form Elements */
.form-group {
margin-bottom: 25px;
}
.form-group label,
.fieldset-legend {
display: block;
font-weight: 600;
color: #34495e;
margin-bottom: 10px;
font-size: 0.95em;
}

input[type="file"],
input[type="text"].rename-input {
width: 100%;
padding: 12px 15px;
border: 1px solid #bdc3c7;
border-radius: 8px;
box-sizing: border-box;
background-color: #fdfdfe;
font-size: 0.95em;
transition: border-color 0.2s, box-shadow 0.2s;
}
input[type="file"]:focus,
input[type="text"].rename-input:focus,
input[type="file"]:focus-visible,
input[type="text"].rename-input:focus-visible {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25);
}

input[type="file"]::file-selector-button {
margin-right: 12px;
padding: 10px 15px;
border-radius: 6px;
background-color: #e9ecef;
border: 1px solid #ced4da;
color: #495057;
cursor: pointer;
transition: background-color 0.2s;
font-weight: 500;
}
input[type="file"]::file-selector-button:hover {
background-color: #dde2e6;
}

/* Radio Buttons for Format */
#format-options div {
margin-bottom: 10px;
display: flex;
align-items: center;
}
#format-options input[type="radio"] {
margin-right: 8px;
accent-color: #007bff;
}
#format-options input[type="radio"]:focus-visible + label {
outline: 2px solid #3498db;
outline-offset: 2px;
border-radius: 3px;
}
#format-options label {
font-weight: normal;
color: #333;
font-size: 0.95em;
cursor: pointer;
padding: 2px;
}


/* Buttons */
.button-primary,
.button-secondary,
.rename-toggle,
.replace-file-btn,
.control-button {
padding: 10px 15px;
border: none;
border-radius: 8px;
font-size: 1em;
cursor: pointer;
transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s, opacity 0.2s;
text-align: center;
font-weight: 500;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.button-primary:hover:not(:disabled),
.button-secondary:hover:not(:disabled),
.rename-toggle:hover:not(:disabled),
.replace-file-btn:hover:not(:disabled) { /* control-button hover is styled separately */
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.button-primary:focus-visible,
.button-secondary:focus-visible,
.rename-toggle:focus-visible,
.replace-file-btn:focus-visible { /* control-button focus is styled separately */
outline: none; /* Remove default outline */
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.35), 0 4px 8px rgba(0,0,0,0.1);
}
/* Fallback for non-focus-visible supporting browsers (less specific) */
.button-primary:focus,
.button-secondary:focus,
.rename-toggle:focus,
.replace-file-btn:focus {
outline: 2px solid #3498db;
outline-offset: 2px;
}


.button-primary {
background-color: #007bff;
color: white;
width: 100%;
font-weight: 600;
}
.button-primary:hover:not(:disabled) {
background-color: #0069d9;
}
.button-primary:disabled {
background-color: #a0c7e8;
cursor: not-allowed;
opacity: 0.7;
box-shadow: none;
transform: none;
}

.button-secondary,
.rename-toggle {
background-color: #6c757d;
color: white;
margin-top: 10px;
}
.button-secondary:hover:not(:disabled),
.rename-toggle:hover:not(:disabled) {
background-color: #5a6268;
}
.replace-file-btn {
background-color: #e9ecef;
color: #495057;
border: 1px solid #ced4da;
margin-bottom: 20px;
width: auto;
}
.replace-file-btn:hover:not(:disabled) {
background-color: #dde2e6;
}


#downloadAudioBtn {
margin-right: 10px;
}

/* Warning and Error Messages */
.warning {
background-color: #fff3cd;
color: #856404;
padding: 12px 18px;
border: 1px solid #ffeeba;
border-left: 4px solid #ffc107;
border-radius: 6px;
margin-top: 20px;
margin-bottom: 20px;
font-size: 0.9em;
}
.error-message {
color: #e74c3c;
font-size: 0.9em;
margin-top: 8px;
font-weight: 500;
}

/* Rename Section */
.rename-section {
margin-top: 20px;
margin-bottom: 20px;
}
.rename-toggle {
width: auto;
margin-bottom: 10px;
}
.rename-controls {
padding: 18px;
border: 1px solid #e0e0e0;
border-radius: 8px;
background-color: #f9fafb;
}
.rename-controls label {
font-size: 0.9em;
color: #4b4f56;
margin-bottom: 8px;
}

/* Audio Preview Section (was Video Preview Section) */
.video-preview-card { /* Main card container */
margin-top: 25px;
margin-bottom: 25px;
padding: 20px;
border: 1px solid #e0e4e8;
border-radius: 10px;
background-color: #fdfdfe;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.preview-title {
font-size: 1.3em;
color: #2c3e50;
margin-top: 0;
margin-bottom: 15px;
font-weight: 500;
}
.preview-title:focus {
outline: 2px solid #3498db;
outline-offset: 2px;
}
.audio-meta p {
margin: 6px 0;
font-size: 0.9em;
color: #555;
word-break: break-all;
}
.audio-meta p strong {
color: #34495e;
margin-right: 5px;
}

.audio-player-wrapper {
position: relative;
background-color: #f8f9fa;
margin-top: 15px;
border-radius: 8px;
border: 1px solid #e9ecef;
padding: 15px;
display: flex;
flex-direction: column;
align-items: center;
}
#audioPreviewPlayer { /* The <audio> element itself is hidden */
display: none;
}

.audio-controls-bar {
display: flex;
align-items: center;
width: 100%;
justify-content: center; /* Center the group of buttons and time */
}

.audio-controls-bar .control-button {
background: transparent;
box-shadow: none;
color: #495057;
padding: 8px; /* Padding inside the button */
margin: 0 5px; /* Space between buttons */
border-radius: 6px;
line-height: 1; /* Ensure icon is centered */
transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.audio-controls-bar .control-button svg {
display: block; /* Ensure SVG takes up space correctly */
width: 20px;
height: 20px;
fill: currentColor; /* SVG inherits color from button */
}
.audio-controls-bar .control-button:hover:not(:disabled) {
background-color: #e9ecef;
color: #343a40;
transform: none; /* Override general button hover transform */
box-shadow: none; /* Override general button hover shadow */
}
.audio-controls-bar .control-button:focus-visible {
outline: none;
background-color: #e9ecef; /* Similar to hover */
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.35);
}
.audio-controls-bar .control-button:disabled {
opacity: 0.5; /* Make disabled more prominent */
cursor: not-allowed;
background-color: transparent;
color: #6c757d;
}


.time-display {
color: #495057;
font-size: 0.9em;
margin-left: auto; /* Pushes time to the right of the button group */
padding: 0 10px; /* Padding around the time text */
font-variant-numeric: tabular-nums; /* Ensures numbers take up same space */
white-space: nowrap; /* Prevents time from wrapping */
display: flex;
align-items: center;
min-width: 110px; /* e.g. 00:00 / 00:00 */
justify-content: flex-end;
}

/* Processing and Result Sections */
#processing-status-text,
#download-status,
#generated-filename-container {
margin-top: 10px;
margin-bottom: 15px;
font-size: 0.95em;
color: #555;
}
#generated-filename-container strong {
word-break: break-all;
color: #2c3e50;
}

.spinner {
border: 4px solid rgba(0, 0, 0, 0.1);
width: 40px;
height: 40px;
border-radius: 50%;
border-left-color: #007bff;
animation: spin 1s ease infinite;
margin: 25px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

#conversion-progress {
width: 100%;
height: 12px;
border-radius: 6px;
margin-top: 20px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
#conversion-progress::-webkit-progress-bar {
background-color: #e9ecef;
border-radius: 6px;
}
#conversion-progress::-webkit-progress-value {
background-color: #007bff;
border-radius: 6px 0 0 6px; /* Smooths edge on WebKit */
transition: width 0.2s ease-in-out;
}
#conversion-progress::-moz-progress-bar { /* For Firefox */
background-color: #007bff;
border-radius: 6px;
}

/* Utility Classes */
.hidden {
display: none !important;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}