/* ════════════════════════════════════════════════════════════════════════════
   RECATOOLS — Image Resizer — style.css
   Tool-specific overrides only.
   Base styles live in /assets/css/tool-page.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Drop zone ───────────────────────────────────────────────────────────────── */
.drop-zone {
    border:          2px dashed var(--border);
    border-radius:   14px;
    padding:         2.5rem 1.5rem;
    text-align:      center;
    cursor:          pointer;
    transition:      border-color 0.18s, background 0.18s;
    background:      var(--bg);
    outline:         none;
    user-select:     none;
}
.drop-zone:hover,
.drop-zone:focus {
    border-color: var(--accent);
    background:   #FFF5F2;
}
.drop-zone.drag-over {
    border-color: var(--accent);
    background:   #fff3ed;
}
.drop-zone-icon {
    font-size:   2.75rem;
    line-height: 1;
    margin-bottom: 0.6rem;
    display:     block;
}
.drop-zone-label {
    font-size:   1rem;
    font-weight: 600;
    color:       var(--text);
    margin:      0 0 0.3rem;
}
.drop-zone-sub {
    font-size:  0.8125rem;
    color:      var(--muted);
    margin:     0;
}

/* ── Image thumbnail preview ─────────────────────────────────────────────────── */
.image-preview-wrap {
    display:        flex;
    align-items:    center;
    gap:            1rem;
    padding:        0.875rem 1rem;
    background:     var(--bg);
    border:         1px solid var(--border);
    border-radius:  10px;
    margin-top:     1rem;
    flex-wrap:      wrap;
}
.thumb-img {
    width:         64px;
    height:        64px;
    object-fit:    cover;
    border-radius: 8px;
    border:        1px solid var(--border);
    flex-shrink:   0;
}
.original-info {
    font-size:   0.875rem;
    color:       var(--muted);
    font-weight: 500;
}

/* ── Mode toggle pills ───────────────────────────────────────────────────────── */
.mode-toggle {
    display:        flex;
    gap:            0.375rem;
    margin-bottom:  1.25rem;
    background:     var(--bg);
    border:         1px solid var(--border);
    border-radius:  999px;
    padding:        0.25rem;
    width:          fit-content;
}
.mode-pill {
    padding:          0.4rem 1rem;
    border-radius:    999px;
    border:           none;
    background:       transparent;
    font-size:        0.875rem;
    font-weight:      600;
    color:            var(--muted);
    cursor:           pointer;
    transition:       background 0.15s, color 0.15s;
    white-space:      nowrap;
}
.mode-pill.active {
    background: var(--accent);
    color:      #fff;
}
.mode-pill:hover:not(.active) {
    color: var(--accent);
}

/* ── Dimension inputs panel ──────────────────────────────────────────────────── */
.dimension-row {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    flex-wrap:   wrap;
    margin-bottom: 0.75rem;
}
.dim-input-group {
    display:    flex;
    flex-direction: column;
    gap:        0.3rem;
}
.dim-label {
    font-size:   0.75rem;
    font-weight: 600;
    color:       var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.dim-input {
    width:         90px;
    padding:       0.5rem 0.625rem;
    border:        1px solid var(--border);
    border-radius: 8px;
    font-size:     0.9375rem;
    font-weight:   600;
    color:         var(--text);
    background:    #fff;
    text-align:    center;
    transition:    border-color 0.15s;
}
.dim-input:focus {
    outline:      none;
    border-color: var(--accent);
}
.dim-separator {
    font-size:   1.25rem;
    font-weight: 600;
    color:       var(--muted);
    align-self:  flex-end;
    padding-bottom: 0.4rem;
}
.lock-row {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    margin-bottom: 0.625rem;
}
.lock-checkbox {
    width:  16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}
.lock-label {
    font-size:   0.875rem;
    color:       var(--muted);
    cursor:      pointer;
    user-select: none;
}
.result-preview-label {
    font-size:   0.875rem;
    color:       var(--muted);
    font-weight: 500;
    margin-top:  0.25rem;
}

/* ── Percentage panel ────────────────────────────────────────────────────────── */
.percent-row {
    display:     flex;
    align-items: center;
    gap:         0.625rem;
    margin-bottom: 0.75rem;
    flex-wrap:   wrap;
}
.percent-input {
    width:         80px;
    padding:       0.5rem 0.625rem;
    border:        1px solid var(--border);
    border-radius: 8px;
    font-size:     0.9375rem;
    font-weight:   600;
    color:         var(--text);
    background:    #fff;
    text-align:    center;
    transition:    border-color 0.15s;
}
.percent-input:focus {
    outline:      none;
    border-color: var(--accent);
}
.percent-suffix {
    font-size:   0.9375rem;
    font-weight: 600;
    color:       var(--muted);
}

/* ── Format pills ─────────────────────────────────────────────────────────────── */
.format-row {
    margin-bottom: 1rem;
}
.format-label-row {
    font-size:   0.8125rem;
    font-weight: 600;
    color:       var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}
.format-pills {
    display: flex;
    gap:     0.375rem;
    flex-wrap: wrap;
}
.format-pill {
    padding:       0.375rem 0.9rem;
    border-radius: 999px;
    border:        1px solid var(--border);
    background:    var(--bg);
    font-size:     0.875rem;
    font-weight:   600;
    color:         var(--muted);
    cursor:        pointer;
    transition:    background 0.15s, color 0.15s, border-color 0.15s;
}
.format-pill.active {
    background:    var(--accent);
    color:         #fff;
    border-color:  var(--accent);
}
.format-pill:hover:not(.active) {
    color:         var(--accent);
    border-color:  var(--accent);
}

/* ── Quality slider ──────────────────────────────────────────────────────────── */
.quality-wrap {
    margin-bottom: 1.25rem;
}
.quality-header {
    display:       flex;
    justify-content: space-between;
    align-items:   center;
    margin-bottom: 0.375rem;
}
.quality-title {
    font-size:   0.8125rem;
    font-weight: 600;
    color:       var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.quality-value {
    font-size:   0.875rem;
    font-weight: 700;
    color:       var(--accent);
}
.quality-slider {
    -webkit-appearance: none;
    appearance:         none;
    width:              100%;
    height:             5px;
    border-radius:      999px;
    background:         var(--border);
    outline:            none;
    cursor:             pointer;
}
.quality-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance:         none;
    width:              18px;
    height:             18px;
    border-radius:      50%;
    background:         var(--accent);
    cursor:             pointer;
    border:             2px solid #fff;
    box-shadow:         0 1px 4px rgba(0,0,0,0.18);
}
.quality-slider::-moz-range-thumb {
    width:        18px;
    height:       18px;
    border-radius: 50%;
    background:   var(--accent);
    cursor:       pointer;
    border:       2px solid #fff;
    box-shadow:   0 1px 4px rgba(0,0,0,0.18);
}

/* ── Section divider inside tool card ───────────────────────────────────────── */
.tool-section-divider {
    height:        1px;
    background:    var(--border);
    margin:        1.25rem 0;
}

/* ── Output section ──────────────────────────────────────────────────────────── */
.output-section {
    margin-top:    1.5rem;
    padding-top:   1.25rem;
    border-top:    1px solid var(--border);
}
.output-heading {
    font-size:   1rem;
    font-weight: 700;
    color:       var(--text);
    margin:      0 0 1rem;
}
.output-preview-wrap {
    text-align:   center;
    margin-bottom: 1rem;
}
.resized-preview {
    max-width:    100%;
    max-height:   200px;
    object-fit:   contain;
    border-radius: 8px;
    border:       1px solid var(--border);
}
.output-meta {
    display:        flex;
    flex-wrap:      wrap;
    gap:            1rem 2rem;
    margin-bottom:  1.25rem;
}
.output-meta-item {
    display:       flex;
    flex-direction: column;
    gap:           0.2rem;
}
.output-meta-label {
    font-size:   0.75rem;
    font-weight: 600;
    color:       var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.output-meta-value {
    font-size:   0.9375rem;
    font-weight: 700;
    color:       var(--text);
}
.size-arrow {
    color:       var(--accent);
    font-style:  normal;
}

/* ── Privacy note ────────────────────────────────────────────────────────────── */
.privacy-note {
    font-size:   0.8125rem;
    color:       var(--muted);
    margin-top:  1rem;
    padding:     0.625rem 0.875rem;
    background:  var(--bg);
    border:      1px solid var(--border);
    border-radius: 8px;
    line-height: 1.5;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .dimension-row {
        gap: 0.5rem;
    }
    .dim-input {
        width: 76px;
    }
    .mode-toggle {
        width: 100%;
        justify-content: center;
    }
    .output-meta {
        gap: 0.75rem 1.25rem;
    }
}

/* cache-buster: 2026-05-24T05:06:05Z */