/* 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);
}

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

@media (max-width: 768px) {
    .settings-actions-grid {
        grid-template-columns: 1fr;
    }
    .size-preview-panel {
        order: 2;
    }
    .settings-panel-modern {
        order: 1;
    }
}

.size-preview-panel {

    border-radius: 12px;
    border: var(--benefit-card-border);
    margin-top: 0;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.size-preview-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--dropdown-divider);
}
.size-preview-header > span:first-child {
    margin-bottom: 0.1em;
}
.size-preview-header .toggle-icon {
    align-self: flex-end;
    margin-left: 0;
    margin-top: -1.3em;
}
.size-preview-list {
    margin-top: 0.5rem;
    display: block;
}
.size-preview-panel.collapsed .size-preview-list {
    display: none;
}
.size-preview-panel .toggle-icon {
    font-size: 1.2em;
    margin-left: 0.5em;
    transition: transform 0.2s;
}
.size-preview-panel.collapsed .toggle-icon {
    transform: rotate(-90deg);
}
.file-size-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.3em 0 0.7em 0;
    border-bottom: 1px solid var(--dropdown-divider);
    font-size: 0.98em;
    margin-bottom: 0.2em;
}
.file-size-row:last-child {
    border-bottom: none;
}
.file-name {
    font-weight: 500;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0.1em;
}
.file-size-details {
    font-size: 0.93em;
    color: var(--dark-accent);
    margin-left: 0.1em;
    margin-top: 0.1em;
    line-height: 1.3;
}
.size-summary-mobile {
    display: block;
    font-size: 0.97em;
    color: var(--dark-accent);
    margin: 0.1em 0 0.2em 0;
    font-weight: 400;
}
@media (min-width: 769px) {
    .size-summary-mobile {
        display: none;
    }
    .size-preview-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .size-preview-header > span:first-child {
        margin-bottom: 0;
    }
    .size-preview-header .toggle-icon {
        margin-top: 0;
        margin-left: 0.5em;
        align-self: auto;
    }
}
.file-size-original, .file-size-estimated {
    flex: 0 0 20%;
    text-align: right;
    font-family: monospace;
    color: var(--primary-medium);
}
@media (max-width: 768px) {
    .size-preview-panel {
        margin-top: 1.5rem;
        padding: 1rem;
    }
    .size-preview-header {
        font-size: 1rem;
        padding-bottom: 0.3rem;
    }
}
@media (max-width: 480px) {
    .size-preview-panel {
        padding: 0.5rem;
    }
    .file-name {
        max-width: 120px;
    }
    .file-size-row {
        font-size: 0.95em;
    }
}

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

.settings-panel-modern h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--dark-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(--primary-color);
    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(--dark-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-select-modern option{
    background: var(--dark-menu-bg);
    color: var(--dark-text);
}

.tool-slider-modern {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--border-color); /* 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(--primary-color);
    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;
    }

    .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;
    }
}