/* css/compress.css */

/* css/compress.css */

/* ==========================================================================
   Stili Specifici per la Pagina di Compressione - NUOVO LAYOUT
   ========================================================================== */

.compress-card { /* Eredita da .image-result-card */
    /* padding: 20px; è già in .image-result-card */
}

.compress-card-layout {
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
}

.compress-preview-column {
    flex: 2;
    min-width: 280px;
    display: flex;
    flex-direction: column;
}

.compress-controls-column {
    flex: 1;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Spinge il bottone download in fondo */
}

/* Anteprima Immagine */
.compress-preview { /* Eredita .image-preview da base.css */
    min-height: 380px;
    max-height: 50vh;
    width: 100%;
    position: relative;
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: default; /* Diventerà grab se pan è attivo */
}

.compress-preview .thumbnail {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform-origin: center center;
    transition: transform 0.1s linear;
}

.compress-note {
    font-size: 0.75rem;
    color: var(--text-very-light);
    text-align: center;
    margin-top: 8px;
    padding: 5px;
    background-color: var(--card-alt-bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-light);
    line-height: 1.3;
}

.compress-note i {
    margin-right: 4px;
    color: var(--info-color);
}

/* Controlli Zoom Overlay */
.zoom-controls-overlay-compress {
    position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column;
    align-items: center; gap: 6px; background-color: rgba(var(--card-bg-rgb, 255, 255, 255), 0.8);
    padding: 8px 6px; border-radius: var(--border-radius); box-shadow: var(--shadow-light); z-index: 5;
}
body.dark-mode .zoom-controls-overlay-compress { background-color: rgba(var(--card-bg-dark-rgb, 30, 30, 30), 0.85); }
.zoom-btn-compress {
    background-color: var(--input-bg); border: 1px solid var(--border-light); color: var(--text-color);
    width: 28px; height: 28px; border-radius: 50%; cursor: pointer; display: flex;
    align-items: center; justify-content: center; font-size: 0.8rem; transition: background-color 0.2s ease;
}
.zoom-btn-compress:hover { background-color: var(--border-color); }

.zoom-btn-compress.active {
    background-color: var(--primary-color); color: var(--light-text-color); border-color: var(--primary-dark);
}

.zoom-btn-compress.pan-indicator-compress {
    color: var(--light-text-color);
}

.zoom-btn-compress.pan-indicator-compress:hover {
    color: var(--dark-text-color);
}



body.dark-mode .zoom-btn-compress.active { color: #fff; }
.zoom-level-indicator-compress {
    font-size: 0.7rem; font-weight: 600; color: var(--primary-dark); text-align: center;
    padding: 2px 4px; background-color: rgba(var(--secondary-color-rgb, 244, 247, 246), 0.7);
    border-radius: var(--border-radius-small, 3px);
}
body.dark-mode .zoom-level-indicator-compress {
    color: var(--primary-color); background-color: rgba(var(--secondary-color-dark-rgb, 30,30,30), 0.7);
}
.compress-preview.pan-active { cursor: grab; }
.compress-preview.is-panning { cursor: grabbing; }

/* Pannello Controlli a Destra */
.compress-controls-panel {
    background-color: var(--card-alt-bg);
    padding: 15px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.compress-controls-panel .filename {
    text-align: left; margin-bottom: 5px; font-size: 0.9rem;
}
.compress-controls-panel .filename strong {
	color:var(--primary-dark);
}
.compress-controls-panel .image-info {
    font-size: 0.85rem; color: var(--text-light-emphasis);
}
.compress-controls-panel .image-info p { margin-bottom: 4px; }

.compress-controls-panel .image-info .savings span:first-of-type {
    color: var(--success-color); font-weight: bold;
}

.compress-options .form-group { margin-bottom: 0; }
.compress-options .form-group label {
    display: block; margin-bottom: 6px; font-size: 0.9rem;
    color: var(--slider-label-color); font-weight: 500;
}
.compress-options select.format-select-compress {
    width: 100%;
    /* Eredita stili da base.css per .image-actions select o un .styled-select generico */
    /* Se non hai uno stile generico, copia qui gli stili per il select */
    padding: 10px 15px; padding-right: 35px;
    border: 1px solid var(--input-border); background-color: var(--input-bg);
    color: var(--text-color); border-radius: var(--border-radius);
    font-size: 0.9rem; font-weight: 500;
    -webkit-appearance: none; -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%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat; background-position: right 10px center;
    background-size: 12px 12px; cursor: pointer; line-height: 1.5;
}
body.dark-mode .compress-options select.format-select-compress {
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23e0e0e0%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
}

/* Slider Qualità */
.quality-slider-container-compress { margin-top: 10px; }
.quality-slider-container-compress.hidden { display: none; }
.quality-slider-container-compress label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: var(--slider-label-color);
    font-weight: 500;
}
.quality-slider-container-compress .quality-value-compress {
    font-weight: bold;
    color: var(--slider-value-color);
}
input[type="range"].quality-slider-compress { width: 100%; /* Eredita da base.css */ }

/* Bottone Download */
.compress-actions-combined { margin-top: auto; padding-top: 15px; }
.compress-actions-combined .download-btn-compress {
    width: 100%;
    /* Eredita stili da .image-actions button in base.css, ma con colori specifici */
    background-color: var(--success-color); border-color: var(--success-color);
    color: var(--light-text-color);
    padding: 10px 15px; font-size: 0.9rem; border-radius: var(--border-radius);
    cursor: pointer; font-weight: 500; text-align: center;
    transition: background-color .3s ease,color .3s ease;
}
body.dark-mode .compress-actions-combined .download-btn-compress { color: #fff; }
.compress-actions-combined .download-btn-compress:hover:not(:disabled) {
    background-color: #388E3C; border-color: #388E3C;
}
.compress-actions-combined .download-btn-compress:disabled {
    /* Eredita da base.css */
}
.compress-actions-combined .download-btn-compress i { margin-right: 8px; }

.original-format strong, .original-size strong, .compress-size-info strong, .savings strong {
	color: var(--primary-color);
}

/* Responsive */
@media (max-width: 768px) { 
    .compress-card-layout { flex-direction: column !important; }
    .compress-preview-column, .compress-controls-column { width: 100%; min-width: 0; }
    .compress-preview { min-height: 200px; max-height: 40vh; }
}