/* image-compressor.css */
/* Tool specific styles for the redesigned layout */

.tool-card-redesign {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background: var(--tool-card-bg);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--tool-card-shadow);
}

/* Modern Upload Area */
.upload-area-modern {
    border: 2px dashed var(--primary-medium);
    border-radius: 12px;
    padding: 3rem 1.5rem;
    text-align: center;
    background: var(--home-tool-card-bg);
    transition: var(--transition);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.upload-area-modern:hover,
.upload-area-modern.dragover {
    border-color: var(--primary-light);
    background: rgba(255, 255, 255, 0.08); /* Slightly lighter on hover */
}

.upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.upload-icon-modern {
    color: var(--primary-light);
    margin-bottom: 0.5rem;
}

.drag-text {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--light-text);
    margin: 0;
}

.or-text {
    font-size: 0.9rem;
    color: var(--light-text);
    opacity: 0.7;
    margin: 0;
}

.btn-browse {
    background: var(--primary-gradient);
    color: white;
    padding: 0.8rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-size: 1rem;
    margin-top: 0.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-browse:hover {
    background: var(--secondary-gradient);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.supported-formats {
    font-size: 0.8rem;
    color: var(--light-text);
    opacity: 0.6;
    margin-top: 1rem;
}

/* File List Area */
.file-list-area {
    background: var(--tool-card-bg);
    border-radius: 12px;
    box-shadow: var(--tool-card-shadow);
    overflow: hidden;
}

.file-list-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--popular-tools-bg); /* Use primary gradient for header */
    color: white; /* Text color for header */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.file-list-header-modern h3 {
    margin: 0;
    font-size: 1.1rem;
}

.file-list-modern {
    max-height: 250px; /* Limit height for scrollability */
    overflow-y: auto;
    padding: 0.5rem 0;
}

.file-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--dropdown-divider);
}

.file-item:last-child {
    border-bottom: none;
}

.file-icon {
    margin-right: 0.75rem;
    color: var(--primary-medium); /* Icon color */
}

.file-info {
    flex: 1;
    color: var(--light-text);
}

.file-name {
    font-weight: 500;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-size {
    font-size: 0.85rem;
    opacity: 0.8;
}

.file-remove {
    background: none;
    border: none;
    color: #ef4444; /* Red for remove icon */
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: var(--transition);
}

.file-remove:hover {
    color: #dc2626;
    transform: scale(1.1);
}

/* Settings and Actions Grid */
.settings-actions-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column */
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .settings-actions-grid {
        grid-template-columns: 2fr 1fr; /* Two columns on larger screens */
    }
}

/* Settings Panel */
.settings-panel-modern {
    background: var(--tool-card-bg);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: var(--tool-card-shadow);
}

.settings-panel-modern h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--light-text);
    font-size: 1.25rem;
    border-bottom: 1px solid var(--dropdown-divider);
    padding-bottom: 0.75rem;
}

.form-group-modern {
    margin-bottom: 1rem;
}

.form-group-modern label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--light-text);
    font-weight: 500;
}

.tool-select-modern {
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--dropdown-divider);
    background: var(--search-bar-bg);
    color: var(--light-text);
    font-size: 1rem;
    transition: var(--transition);
    -webkit-appearance: none; /* Remove default arrow */
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22%236a9c89%22%3E%3Cpath%20d%3D%22M5.293%207.293a1%201%200%20011.414%200L10%2010.586l3.293-3.293a1%201%200%20111.414%201.414l-4%204a1%201%200%2001-1.414%200l-4-4a1%201%200%20010-1.414z%22%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
}

.tool-select-modern:focus {
    border-color: var(--primary-medium);
    outline: none;
    box-shadow: 0 0 0 3px rgba(106, 156, 137, 0.3); /* Primary medium with transparency */
}

.tool-slider-modern {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--search-bar-bg); /* Use a subtle background */
    outline: none;
    -webkit-appearance: none;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    cursor: grab;
}

.tool-slider-modern::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-medium);
    cursor: grab;
    transition: var(--transition);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.tool-slider-modern::-webkit-slider-thumb:hover {
    background: var(--primary-dark);
    transform: scale(1.1);
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

.tool-slider-modern::-webkit-slider-thumb:active {
    cursor: grabbing;
}

.checkbox-group-modern {
    display: flex;
    align-items: center;
    margin-top: 1rem;
}

.checkbox-group-modern input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-medium);
    border-radius: 6px;
    margin-right: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    position: relative;
}

.checkbox-group-modern input[type="checkbox"]:checked {
    background-color: var(--primary-medium);
    border-color: var(--primary-medium);
}

.checkbox-group-modern input[type="checkbox"]:checked::after {
    content: '';
    width: 8px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    position: absolute;
    top: 2px;
    left: 5px;
}

.checkbox-group-modern label {
    color: var(--light-text);
    cursor: pointer;
    font-size: 0.95rem;
}

/* Action Buttons */
.action-buttons-modern {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    gap: 1rem;
    padding: 1.5rem;
    background: var(--tool-card-bg);
    border-radius: 12px;
    box-shadow: var(--tool-card-shadow);
    justify-content: center; /* Center buttons vertically */
}

.btn-compress, .btn-download-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.9rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-size: 1rem;
    width: 100%; /* Full width buttons */
}

.btn-compress {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 4px 10px rgba(22, 66, 60, 0.3);
}

.btn-compress:hover {
    background: var(--secondary-gradient);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(22, 66, 60, 0.4);
}

.btn-compress:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    background: var(--dropdown-divider);
}

.btn-download-all {
    background: var(--dark-bg); /* Use a darker background from theme */
    color: var(--dark-text); /* Use light text for dark background */
    border: 1px solid var(--dropdown-divider);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn-download-all:hover {
    background: var(--dark-menu-bg); /* Slightly darker on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-download-all:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    background: var(--dropdown-divider);
}

/* Results Section */
.results-section-modern {
    margin-top: 3rem;
    background: var(--tool-card-bg);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--tool-card-shadow);
}

.results-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--dropdown-divider);
    padding-bottom: 1rem;
}

.results-header-modern h2 {
    margin: 0;
    color: var(--light-text);
    font-size: 1.5rem;
}

.total-saved {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-medium);
}

.results-container-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.result-card-modern {
    background: var(--home-tool-card-bg); /* Use a slightly lighter background for individual results */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--home-tool-card-border); /* Use border for subtle outline */
    border: 1px solid var(--dropdown-divider); /* Subtle border */
    transition: var(--transition);
}

.result-card-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.image-comparison-modern {
    display: flex;
    position: relative;
    height: 180px;
    background-color: #f0f0f0; /* Placeholder background */
}

.image-comparison-modern img {
    width: 50%;
    height: 100%;
    object-fit: contain; /* Changed to contain to prevent cropping and show full image */
    display: block;
    background-color: var(--dark-bg); /* Ensures images stand out on dark background */
}

.comparison-label-modern {
    position: absolute;
    bottom: 8px;
    padding: 4px 10px;
    background: rgba(0,0,0,0.7);
    color: white;
    font-size: 0.75rem;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 600;
}

.before-label-modern {
    left: 8px;
}

.after-label-modern {
    right: 8px;
}

.image-info-modern {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.image-name-modern {
    font-weight: 600;
    color: var(--light-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;
}

.image-stats-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: var(--light-text);
    opacity: 0.8;
}

.image-savings-modern {
    color: var(--primary-medium);
    font-weight: 700;
    background: rgba(106, 156, 137, 0.15); /* Light background for savings */
    padding: 4px 8px;
    border-radius: 6px;
}

.download-btn-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--primary-gradient);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.download-btn-modern:hover {
    background: var(--secondary-gradient);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Existing styles for other sections (how-to-use, faq, related-tools) can remain,
   or be slightly adjusted if they need to align with the new aesthetic more strictly.
   I've kept them as is per the instruction to only redesign the tool section area. */

/* Responsive adjustments */
@media (max-width: 768px) {
    .tool-card-redesign {
        padding: 1.5rem;
    }

    .upload-area-modern {
        padding: 2rem 1rem;
    }

    .drag-text {
        font-size: 1.2rem;
    }

    .settings-actions-grid {
        grid-template-columns: 1fr;
    }

    .settings-panel-modern,
    .action-buttons-modern,
    .results-section-modern {
        padding: 1.5rem;
    }

    .results-container-modern {
        grid-template-columns: 1fr; /* Stack results on small screens */
    }

    .image-comparison-modern {
        height: 150px;
    }
}

@media (max-width: 480px) {
    .results-header-modern {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .results-header-modern h2 {
        font-size: 1.3rem;
    }
    .total-saved {
        font-size: 1rem;
    }
}