/* ===== Base Styles (Light Mode by Default) ===== */
:root {
    /* Light Theme Variables */
    --primary-color: #4361ee;
    --primary-dark: #3a0ca3; /* Keeping primary-dark as it's used in gradients */
    --secondary-color: #4cc9f0;
    --accent-color: #f72585;
    --success-color: #4ad575;
    --warning-color: #f8961e;

    --text-color: #333333; /* Dark text for light background (general) */
    --text-light: #555555; /* Slightly lighter dark text */
    --bg-color: #ffffff; /* White background */
    --bg-light: #f0f0f0; /* Light grey background for alternate sections/items */
    --card-bg: #ffffff; /* White background for cards */
    --border-color: #cccccc; /* Light border color */
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Lighter shadow */

    /* Dark Theme Variables (Keep these as they are used for overrides) */
    --dark-primary: #4361ee;
    --dark-secondary: #4cc9f0;
    --dark-text: #f8f9fa;
    --dark-text-light: #adb5bd;
    --dark-bg: #121212;
    --dark-card: #1e1e1e;
    --dark-border: #333333;
    --dark-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Apply the default light background to the body or main container */
body {
    background-color: var(--bg-color);
    color: var(--text-color); /* Apply default text color */
    /* Font properties should ideally be set here or globally if consistent */
    /* Example: font-family: 'Arial', sans-serif; font-size: 16px; */
}

/* Ensure ALL links are black in light mode by default */
a {
    color: #000000; /* This makes all link text black in light mode */
    text-decoration: none; /* Keep consistent or define here */
    /* Font styles for links should be consistent (inherit from parent or body) */
}


/* ===== Loading Overlay ===== */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(5px);
}

.loading-spinner {
    text-align: center;
    color: white; /* This color is fine for the spinner itself */
    padding: 30px;
    background: var(--primary-dark);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.loading-spinner i {
    font-size: 3rem;
    margin-bottom: 15px;
}

.loading-spinner p {
    margin: 0;
    font-size: 1.2rem;
}

/* ===== Tool Container ===== */
.tool-container {
    padding: 60px 0;
}

.tool-header {
    text-align: center;
    margin-bottom: 50px;
}

.tool-icon-large {
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    box-shadow: 0 10px 20px rgba(67, 97, 238, 0.3);
    position: relative;
}

.tool-icon-large i {
    margin: 0 5px;
}

.tool-header h1 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    /* Font styles like font-weight should be consistent */
}

.tool-description {
    font-size: 1.1rem;
    color: var(--text-light); /* Uses the light mode text-light */
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
    /* Font styles should be consistent */
}

.dark-mode .tool-description {
    color: var(--dark-text-light); /* Overridden in dark mode */
}

/* ===== Converter Layout ===== */
.converter-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 40px;
}

.upload-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.preview-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ===== Cards ===== */
.upload-card,
.options-card,
.preview-card,
.progress-card {
    background: var(--card-bg); /* Uses the light mode card background */
    border-radius: 12px;
    box-shadow: var(--shadow); /* Uses the light mode shadow */
    padding: 25px;
    border: 1px solid var(--border-color); /* Uses the light mode border */
}

.dark-mode .upload-card,
.dark-mode .options-card,
.dark-mode .preview-card,
.dark-mode .progress-card {
    background: var(--dark-card); /* Overridden in dark mode */
    box-shadow: var(--dark-shadow); /* Overridden in dark mode */
    border-color: var(--dark-border); /* Overridden in dark mode */
}

/* ===== Upload Area ===== */
.upload-header {
    text-align: center;
    margin-bottom: 20px;
}

.upload-header i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.upload-header h3 {
    margin-bottom: 5px;
    color: var(--text-color); /* Use text-color variable */
     /* Font styles should be consistent */
}

.dark-mode .upload-header h3 {
     color: var(--dark-text); /* Override in dark mode */
}


.upload-header p {
    color: var(--text-light); /* Uses the light mode text-light */
    font-size: 0.95rem;
    /* Font styles should be consistent */
}

.upload-area {
    border: 2px dashed var(--border-color); /* Uses the light mode border */
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 20px;
    background: rgba(67, 97, 238, 0.03); /* This transparency is fine */
}

.dark-mode .upload-area {
    border-color: var(--dark-border); /* Overridden in dark mode */
    background: rgba(67, 97, 238, 0.05); /* This transparency is fine */
}

.upload-area:hover {
    border-color: var(--primary-color);
    background: rgba(67, 97, 238, 0.07);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(67, 97, 238, 0.1);
}

.upload-area input[type="file"] {
    display: none;
}

.upload-content i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 15px;
    opacity: 0.7;
}

.upload-content p {
    color: var(--text-light); /* Uses the light mode text-light */
    margin: 0;
     /* Font styles should be consistent */
}

.upload-hint {
    font-size: 0.85rem;
    color: var(--text-light); /* Uses the light mode text-light */
    margin-top: 10px;
    opacity: 0.7;
     /* Font styles should be consistent */
}

.file-list {
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--bg-light); /* Uses light mode bg-light */
}

.dark-mode .file-list {
    scrollbar-color: var(--primary-color) var(--dark-card); /* Uses dark mode card */
}

.file-list::-webkit-scrollbar {
    width: 6px;
}

.file-list::-webkit-scrollbar-track {
    background: var(--bg-light); /* Uses light mode bg-light */
    border-radius: 3px;
}

.dark-mode .file-list::-webkit-scrollbar-track {
    background: var(--dark-card); /* Overridden in dark mode */
}

.file-list::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 3px;
}

.file-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: var(--bg-light); /* Uses light mode bg-light */
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid var(--border-color); /* Uses light mode border */
    transition: all 0.2s ease;
}

.dark-mode .file-item {
    background: var(--dark-bg); /* Use a variable instead of hardcoded #252525 */
    border-color: var(--dark-border); /* Overridden in dark mode */
}

.file-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.file-icon {
    color: #e74c3c; /* This color is fine */
    margin-right: 12px;
    font-size: 1.2rem;
}

.file-info {
    flex: 1;
    min-width: 0;
}

.file-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-bottom: 3px;
    color: var(--text-color); /* Use text-color variable */
     /* Font styles should be consistent */
}

.dark-mode .file-name {
    color: var(--dark-text); /* Override in dark mode */
}

.file-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-light); /* Uses light mode text-light */
     /* Font styles should be consistent */
}

.file-remove {
    color: #e74c3c; /* This color is fine */
    cursor: pointer;
    margin-left: 15px;
    padding: 5px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.file-remove:hover {
    background: rgba(231, 76, 60, 0.1);
    transform: scale(1.1);
}

/* ===== Options Panel ===== */
.options-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.options-header i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.options-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-color); /* Use text-color variable */
     /* Font styles should be consistent */
}

.dark-mode .options-header h3 {
    color: var(--dark-text); /* Override in dark mode */
}


.option-group {
    margin-bottom: 25px;
}

.option-group label {
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
    color: var(--text-color); /* Uses the light mode text-color */
     /* Font styles should be consistent */
}

.dark-mode .option-group label {
    color: var(--dark-text); /* Overridden in dark mode */
}

#qualityValue {
    float: right;
    color: var(--primary-color);
    font-weight: 600;
     /* Font styles should be consistent */
}

input[type="range"] {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-light); /* Uses light mode bg-light */
    outline: none;
    -webkit-appearance: none;
    margin-bottom: 5px;
}

.dark-mode input[type="range"] {
    background: var(--dark-border); /* Use a variable instead of hardcoded #333 */
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.resolution-select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color); /* Uses light mode border */
    background: var(--bg-color); /* Uses light mode bg-color */
    color: var(--text-color); /* Uses light mode text-color */
    font-family: inherit;
    font-size: 0.95rem;
    margin-bottom: 10px;
     /* Font styles should be consistent */
}

.dark-mode .resolution-select {
    background: var(--dark-card); /* Overridden in dark mode */
    border-color: var(--dark-border); /* Overridden in dark mode */
    color: var(--dark-text); /* Overridden in dark mode */
}

.custom-resolution {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.custom-resolution input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color); /* Uses light mode border */
    background: var(--bg-color); /* Uses light mode bg-color */
    color: var(--text-color); /* Uses light mode text-color */
     /* Font styles should be consistent */
}

.dark-mode .custom-resolution input {
    background: var(--dark-card); /* Overridden in dark mode */
    border-color: var(--dark-border); /* Overridden in dark mode */
    color: var(--dark-text); /* Overridden in dark mode */
}

.quality-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-light); /* Uses light mode text-light */
     /* Font styles should be consistent */
}

.page-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-color); /* Apply text color to radio labels */
     /* Font styles should be consistent */
}

.dark-mode .radio-option {
     color: var(--dark-text); /* Override in dark mode */
}


.radio-option input[type="radio"] {
    accent-color: var(--primary-color);
}

.radio-option input[type="text"] {
    flex: 1;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color); /* Uses light mode border */
    background: var(--bg-color); /* Uses light mode bg-color */
    color: var(--text-color); /* Uses light mode text-color */
     /* Font styles should be consistent */
}

.dark-mode .radio-option input[type="text"] {
    background: var(--dark-card); /* Overridden in dark mode */
    border-color: var(--dark-border); /* Overridden in dark mode */
    color: var(--dark-text); /* Overridden in dark mode */
}

#fileNamePattern {
    width: 100%;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color); /* Uses light mode border */
    background: var(--bg-color); /* Uses light mode bg-color */
    color: var(--text-color); /* Uses light mode text-color */
    font-family: inherit;
    font-size: 0.95rem;
     /* Font styles should be consistent */
}

.dark-mode #fileNamePattern {
    background: var(--dark-card); /* Overridden in dark mode */
    border-color: var(--dark-border); /* Overridden in dark mode */
    color: var(--dark-text); /* Overridden in dark mode */
}

.option-hint {
    font-size: 0.8rem;
    color: var(--text-light); /* Uses light mode text-light */
    margin-top: 5px;
     /* Font styles should be consistent */
}

.format-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.format-option {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color); /* Uses light mode border */
    background: var(--bg-color); /* Uses light mode bg-color */
    color: var(--text-color); /* Uses light mode text-color */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
     /* Font styles should be consistent */
}

.dark-mode .format-option {
    background: var(--dark-card); /* Overridden in dark mode */
    border-color: var(--dark-border); /* Overridden in dark mode */
    color: var(--dark-text); /* Overridden in dark mode */
}

.format-option.active {
    background: var(--primary-color);
    color: white; /* This color is fine */
    border-color: var(--primary-color);
}

/* ===== Action Buttons ===== */
.action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 30px;
}

.btn {
    position: relative;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: none;
    font-size: 15px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1;
    /* Font styles should be consistent */
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
    z-index: -1;
    transition: all 0.3s ease;
    opacity: 0;
}

.btn:hover::before {
    opacity: 1;
}

.btn i {
    transition: transform 0.2s ease;
}

.btn:hover i {
    transform: translateX(3px);
}

.primary-btn {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white; /* This color is fine */
    box-shadow: 0 4px 15px rgba(67, 97, 238, 0.4);
    border: 1px solid rgba(255,255,255,0.1);
}

.primary-btn:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(67, 97, 238, 0.6);
}

.secondary-btn {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); /* Light grey gradient */
    color: var(--primary-color); /* Primary color text */
    border: 1px solid #dee2e6; /* Light border */
     /* Font styles should be consistent */
}

.secondary-btn:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%);
    color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.dark-mode .secondary-btn {
    background: linear-gradient(135deg, #2d2d2d 0%, #252525 100%);
    color: #aab6ff;
    border: 1px solid #444;
}

.dark-mode .secondary-btn:hover {
    background: linear-gradient(135deg, #252525 0%, #2d2d2d 100%);
    color: #ffffff;
}

.convert-btn {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    color: white; /* This color is fine */
    text-transform: uppercase;
    letter-spacing: 1px; /* This font property is consistent */
    font-weight: 700; /* This font property is consistent */
    padding: 15px 30px;
    box-shadow: 0 5px 20px rgba(76, 201, 240, 0.4);
    animation: pulse 2s infinite;
}

.convert-btn:hover {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(76, 201, 240, 0.6);
}

.download-all-btn {
    background: linear-gradient(135deg, var(--success-color) 0%, #2a9d8f 100%);
    color: white; /* This color is fine */
    box-shadow: 0 4px 15px rgba(42, 157, 143, 0.4);
     /* Font styles should be consistent */
}

.download-all-btn:hover {
    background: linear-gradient(135deg, #2a9d8f 0%, var(--success-color) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(42, 157, 143, 0.6);
}

.danger-btn {
    background: linear-gradient(135deg, var(--accent-color) 0%, #b5179e 100%);
    color: white; /* This color is fine */
    box-shadow: 0 4px 15px rgba(247, 37, 133, 0.3);
     /* Font styles should be consistent */
}

.danger-btn:hover {
    background: linear-gradient(135deg, #b5179e 0%, var(--accent-color) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(247, 37, 133, 0.4);
}

.cancel-btn {
    background: linear-gradient(135deg, var(--warning-color) 0%, #d00000 100%);
    color: white; /* This color is fine */
    box-shadow: 0 4px 15px rgba(248, 150, 30, 0.3);
    width: 100%;
    margin-top: 15px;
     /* Font styles should be consistent */
}

.cancel-btn:hover {
    background: linear-gradient(135deg, #d00000 0%, var(--warning-color) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(248, 150, 30, 0.4);
}

/* Preview Controls */
.preview-controls {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.preview-btn, .nav-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.preview-btn:hover, .nav-btn:hover {
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.zoom-level {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color); /* Uses light mode text-color */
    min-width: 50px;
    text-align: center;
     /* Font styles should be consistent */
}

.dark-mode .zoom-level {
    color: var(--dark-text); /* Overridden in dark mode */
}

/* Preview meta */
.preview-meta {
    display: flex;
    gap: 15px;
    font-size: 0.85rem;
    color: var(--text-light); /* Uses light mode text-light */
     /* Font styles should be consistent */
}

/* ===== Preview Section ===== */
.preview-container {
    height: 500px;
    background: var(--bg-light); /* Uses light mode bg-light */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border: 1px solid var(--border-color); /* Uses light mode border */
    overflow: auto;
    position: relative;
}

.dark-mode .preview-container {
    background: var(--dark-bg); /* Use a variable instead of hardcoded #252525 */
    border-color: var(--dark-border); /* Overridden in dark mode */
}

.empty-preview {
    text-align: center;
    color: var(--text-light); /* Uses light mode text-light */
     /* Font styles should be consistent */
}

.empty-preview i {
    font-size: 3rem;
    margin-bottom: 15px;
    opacity: 0.5;
}

.pdf-preview {
    width: 100%;
    padding: 20px;
    text-align: center;
}

.pdf-preview canvas {
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    transition: transform 0.3s ease;
    background-color: white; /* Ensure the canvas itself has a white background if transparent */
}

.dark-mode .pdf-preview canvas {
     background-color: var(--dark-bg); /* Or a dark color in dark mode */
}

.preview-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-btn {
    background: var(--bg-light); /* Uses light mode bg-light */
    color: var(--text-color); /* Uses light mode text-color */
    border: 1px solid var(--border-color); /* Uses light mode border */
     /* Font styles should be consistent */
}

.dark-mode .nav-btn {
    background: var(--dark-bg); /* Use a variable instead of hardcoded #252525 */
    border-color: var(--dark-border); /* Overridden in dark mode */
    color: var(--dark-text); /* Overridden in dark mode */
}

.nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.nav-btn:hover:not(:disabled) {
    background: #e9ecef; /* Light hover background */
    color: var(--primary-color);
}

.dark-mode .nav-btn:hover:not(:disabled) {
    background: #333; /* Dark hover background (can use a variable) */
}

#pageCounter {
    font-weight: 500;
    color: var(--text-color); /* Uses light mode text-color */
     /* Font styles should be consistent */
}

.dark-mode #pageCounter {
    color: var(--dark-text); /* Overridden in dark mode */
}

/* ===== Progress Bar ===== */
.progress-card {
    display: none;
}

.progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.progress-header i {
    color: var(--primary-color);
    font-size: 1.2rem;
    margin-right: 10px;
}

.progress-header h3 {
    flex: 1;
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-color); /* Use text-color variable */
     /* Font styles should be consistent */
}

.dark-mode .progress-header h3 {
    color: var(--dark-text); /* Override in dark mode */
}


#progressPercent {
    font-weight: 600;
    color: var(--primary-color);
     /* Font styles should be consistent */
}

.progress-bar {
    height: 8px;
    background: rgba(67, 97, 238, 0.1); /* This transparency is fine */
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 4px;
    width: 0%;
    transition: width 0.4s ease;
    position: relative;
    overflow: hidden;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.6) 50%,
        rgba(255,255,255,0) 100%);
    animation: shimmer 2s infinite;
    background-size: 200% 100%;
}

.progress-status {
    font-size: 0.9rem;
    color: var(--text-light); /* Uses light mode text-light */
    margin: 0;
     /* Font styles should be consistent */
}

/* ===== Results Section ===== */
.results-section {
    margin-top: 50px;
    display: none;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 15px;
}

.results-header h3 {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--text-color); /* Use text-color variable */
     /* Font styles should be consistent */
}

.dark-mode .results-header h3 {
    color: var(--dark-text); /* Override in dark mode */
}


.results-header h3 i {
    color: var(--primary-color);
}

.results-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.results-search {
    position: relative;
    display: flex;
    align-items: center;
}

.results-search i {
    position: absolute;
    left: 12px;
    color: var(--text-light); /* Uses light mode text-light */
}

.results-search input {
    padding: 10px 15px 10px 35px;
    border-radius: 6px;
    border: 1px solid var(--border-color); /* Uses light mode border */
    background: var(--bg-color); /* Uses light mode bg-color */
    color: var(--text-color); /* Uses light mode text-color */
    font-size: 0.95rem;
    min-width: 200px;
     /* Font styles should be consistent */
}

.dark-mode .results-search input {
    background: var(--dark-card); /* Overridden in dark mode */
    border-color: var(--dark-border); /* Overridden in dark mode */
    color: var(--dark-text); /* Overridden in dark mode */
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.result-item {
    background: var(--card-bg); /* Uses light mode card background */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color); /* Uses light mode border */
    transition: all 0.3s ease;
}

.dark-mode .result-item {
    background: var(--dark-card); /* Overridden in dark mode */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border-color: var(--dark-border); /* Overridden in dark mode */
}

.result-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.result-image {
    width: 100%;
    height: 180px;
    object-fit: contain;
    background: white; /* Image background should be white */
    border-bottom: 1px solid var(--border-color); /* Uses light mode border */
    cursor: pointer;
    transition: transform 0.3s ease;
}

.dark-mode .result-image {
    border-color: var(--dark-border); /* Overridden in dark mode */
}


.result-image:hover {
    transform: scale(1.05);
}

.result-info {
    padding: 15px;
}

.result-name {
    font-weight: 600;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    color: var(--text-color); /* Use text-color variable */
     /* Font styles should be consistent */
}

.dark-mode .result-name {
    color: var(--dark-text); /* Override in dark mode */
}


.result-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-light); /* Uses light mode text-light */
     /* Font styles should be consistent */
}

.result-actions {
    display: flex;
    gap: 8px;
}

.result-actions .btn {
    flex: 1;
    padding: 8px;
    font-size: 0.85rem;
}

.results-summary {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 20px;
    background: var(--bg-light); /* Uses light mode bg-light */
    border-radius: 10px;
    border: 1px solid var(--border-color); /* Uses light mode border */
    flex-wrap: wrap;
}

.dark-mode .results-summary {
    background: var(--dark-bg); /* Use a variable instead of hardcoded #252525 */
    border-color: var(--dark-border); /* Overridden in dark mode */
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-color); /* Apply text color to summary items */
     /* Font styles should be consistent */
}

.dark-mode .summary-item {
     color: var(--dark-text); /* Override in dark mode */
}


.summary-item i {
    font-size: 1.2rem;
    color: var(--primary-color);
}

/* ===== Features Section ===== */
.features-section {
    margin-top: 80px;
}

.features-section h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
     color: var(--text-color); /* Use text-color variable */
     /* Font styles should be consistent */
}

.dark-mode .features-section h2 {
    color: var(--dark-text); /* Override in dark mode */
}


.features-section h2 i {
    color: var(--primary-color);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    max-width: 1000px;
    margin: 0 auto;
}

.feature-card {
    background: var(--card-bg); /* Uses light mode card background */
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color); /* Uses light mode border */
    text-align: center;
    transition: all 0.3s ease;
}

.dark-mode .feature-card {
    background: var(--dark-card); /* Overridden in dark mode */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border-color: var(--dark-border); /* Overridden in dark mode */
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.feature-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white; /* This color is fine */
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
}

.feature-card h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--text-color); /* Use text-color variable */
     /* Font styles should be consistent */
}

.dark-mode .feature-card h3 {
    color: var(--dark-text); /* Override in dark mode */
}


.feature-card p {
    color: var(--text-light); /* Uses light mode text-light */
    font-size: 0.95rem;
    margin: 0;
     /* Font styles should be consistent */
}

/* ===== FAQ Section ===== */
.faq-section {
    margin-top: 80px;
}

.faq-section h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-color); /* Use text-color variable */
     /* Font styles should be consistent */
}

.dark-mode .faq-section h2 {
    color: var(--dark-text); /* Override in dark mode */
}


.faq-section h2 i {
    color: var(--primary-color);
}

.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: var(--card-bg); /* Uses light mode card background */
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color); /* Uses light mode border */
    overflow: hidden;
}

.dark-mode .faq-item {
    background: var(--dark-card); /* Overridden in dark mode */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-color: var(--dark-border); /* Overridden in dark mode */
}

.faq-question {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.faq-question:hover {
    background: rgba(67, 97, 238, 0.05); /* This transparency is fine */
}

.dark-mode .faq-question:hover {
    background: rgba(67, 97, 238, 0.1); /* This transparency is fine */
}

.faq-question h3 {
    margin: 0;
    font-size: 1.1rem;
     color: var(--text-color); /* Use text-color variable */
     /* Font styles should be consistent */
}

.dark-mode .faq-question h3 {
    color: var(--dark-text); /* Override in dark mode */
}


.faq-question i {
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 20px;
    border-top: 1px solid transparent;
}

.faq-item.active .faq-answer {
    max-height: 300px;
    padding: 0 20px 20px;
    border-top: 1px solid var(--border-color); /* Uses light mode border */
}

.faq-answer p {
    margin: 0;
    color: var(--text-light); /* Uses light mode text-light */
    line-height: 1.6;
     /* Font styles should be consistent */
}

/* ===== Footer Styles ===== */
.footer {
    background: var(--card-bg); /* Uses light mode card background */
    padding: 40px 0 20px;
    border-top: 1px solid var(--border-color); /* Uses light mode border */
}

/* Specific styles for footer text elements in LIGHT mode */
/* This rule ensures footer headings, paragraphs, links, and list items are black in light mode */
.footer,
.footer h4,
.footer p,
.footer a,
.footer li {
    color: #000000; /* Explicitly black text in footer in light mode */
     /* Font styles should be consistent */
}

.dark-mode .footer {
    background: var(--dark-card); /* Overridden in dark mode */
    border-color: var(--dark-border); /* Overridden in dark mode */
    color: var(--dark-text); /* General text color for footer in dark mode */
}

/* Ensure specific elements in dark mode footer use the dark text color variable */
.dark-mode .footer h4,
.dark-mode .footer p,
.dark-mode .footer li {
    color: var(--dark-text);
}

.dark-mode .social-links a,
.dark-mode .footer-links a {
    color: var(--dark-text-light); /* Use lighter dark text for footer links in dark mode */
}


.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

.footer-col h4 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: var(--primary-color); /* Primary color remains consistent */
     /* Font styles should be consistent */
}


.footer-description {
    /* color is set by the .footer rule in light mode */
    margin-bottom: 20px;
    line-height: 1.6;
     /* Font styles should be consistent */
}

.dark-mode .footer-description {
    color: var(--dark-text-light); /* Use lighter dark text for description in dark mode */
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: auto;
}

.social-links a {
     /* color is set by the .footer rule in light mode */
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: var(--primary-color); /* Hover color remains consistent */
}


.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    /* color is set by the .footer rule in light mode */
    text-decoration: none;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
     /* Font styles should be consistent */
}

.footer-links a:hover {
    color: var(--primary-color); /* Hover color remains consistent */
}


.contact-info {
    /* color is set by the .footer rule in light mode */
    margin-top: 1;
}

.contact-info p {
    /* color is set by the .footer rule in light mode */
    margin: 5px 0;
    display: flex;
    align-items: center;
    gap: 8px;
     /* Font styles should be consistent */
}

.dark-mode .contact-info {
    color: var(--dark-text-light); /* Use lighter dark text for contact info in dark mode */
}


.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid var(--border-color); /* Uses light mode border */
    color: var(--text-light); /* Use text-light variable for footer bottom text */
    font-size: 0.9rem;
     /* Font styles should be consistent */
}

.dark-mode .footer-bottom {
    border-color: var(--dark-border); /* Overridden in dark mode */
    color: var(--dark-text-light); /* Overridden in dark mode */
}


/* ===== Image Modal ===== */
.image-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.image-modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

.modal-image {
    max-width: 100%;
    max-height: 80vh;
    display: block;
    margin: 0 auto;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.5);
}

.modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white; /* This color is fine */
    font-size: 2rem;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.modal-close:hover {
    transform: rotate(90deg);
}

.modal-caption {
    color: white; /* This color is fine */
    text-align: center;
    margin-top: 15px;
    font-size: 1.1rem;
     /* Font styles should be consistent */
}

/* ===== Animations ===== */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ===== Responsive Styles ===== */
@media (max-width: 1200px) {
    .converter-wrapper {
        grid-template-columns: 1fr;
    }

    .preview-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .tool-header h1 {
        font-size: 2rem;
         /* Font styles should be consistent */
    }

    .action-buttons {
        grid-template-columns: 1fr;
    }

    .results-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .results-actions {
        width: 100%;
    }

    .results-actions .btn {
        flex: 1;
         /* Font styles should be consistent */
    }

    .preview-controls {
        gap: 8px;
    }

    .zoom-level {
        display: none;
    }
}

@media (max-width: 576px) {
    .tool-header h1 {
        font-size: 1.8rem;
         /* Font styles should be consistent */
    }

    .tool-description {
        font-size: 1rem;
         /* Font styles should be consistent */
    }

    .results-grid {
        grid-template-columns: 1fr;
    }

    .results-summary {
        flex-direction: column;
        gap: 15px;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .format-options {
        grid-template-columns: 1fr;
    }

    .upload-content p {
        font-size: 0.9rem;
         /* Font styles should be consistent */
    }

    .upload-hint {
        display: none;
    }
}

/* ===== Dark Mode Overrides ===== */
/* Apply this class to the body or a high-level container */
.dark-mode {
    /* Override base light theme variables with dark theme variables */
    --text-color: var(--dark-text);
    --text-light: var(--dark-text-light);
    --bg-color: var(--dark-bg);
    --bg-light: #252525; /* Keeping this hardcoded for now, but could be a variable */
    --card-bg: var(--dark-card);
    --border-color: var(--dark-border);
    --shadow: var(--dark-shadow);

    /* Ensure specific elements using hardcoded dark colors in dark mode now use variables */
    .preview-container,
    .nav-btn,
    .results-summary,
    .dark-mode .file-item /* Corrected usage of var */
     {
        background: var(--dark-bg); /* Or var(--dark-card) depending on desired look */
    }

    .dark-mode input[type="range"] {
         background: var(--dark-border); /* Or a specific dark range background variable */
    }

     .pdf-preview canvas {
         background-color: var(--dark-bg); /* Ensure canvas background is dark in dark mode */
     }

    /* Override link color in dark mode */
    a {
        color: var(--dark-text);
    }

    /* Ensure specific elements in dark mode footer use the dark text color variable */
    /* This is also handled by the general .dark-mode a rule above now, but keeping specific
       rules can help with higher specificity if needed */
    .dark-mode .footer h4,
    .dark-mode .footer p,
    .dark-mode .footer li {
        color: var(--dark-text);
    }

    .dark-mode .social-links a,
    .dark-mode .footer-links a {
        color: var(--dark-text-light);
    }
}