/* ═══════════════════════════════════════════════════════════════════════════
   Image Censor Tool — frontend
   Design system YG: bianco/nero, accento arancio #e05c2a, icone SVG.
   ═══════════════════════════════════════════════════════════════════════════ */

.ict-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #111;
    box-sizing: border-box;
}

.ict-container *,
.ict-container *::before,
.ict-container *::after { box-sizing: border-box; }

.ict-content {
    background: #fff;
    border-radius: 14px;
    padding: 36px 40px;
    box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.06);
}

/* Nasconde visivamente mantenendo il focus da tastiera.
   FIX 1.7.0: sostituisce opacity:0 + pointer-events:none, che rendeva l'input
   file completamente irraggiungibile per chi naviga senza mouse. */
.ict-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.ict-sr-only:focus-visible + .ict-btn-upload,
.ict-btn-upload:focus-visible {
    outline: 2px solid #e05c2a;
    outline-offset: 2px;
}

/* ─── Testata ─────────────────────────────────────────────────────────────── */
.ict-title { font-size: 1.6rem; font-weight: 600; margin: 0 0 6px; color: #111; line-height: 1.25; }
.ict-subtitle { font-size: .95rem; color: #666; margin: 0 0 28px; }

/* ─── Drop zone ───────────────────────────────────────────────────────────── */
.ict-drop-zone {
    position: relative;
    border: 1.5px dashed #d0d0d0;
    border-radius: 12px;
    padding: 36px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    text-align: center;
    margin-bottom: 18px;
}
.ict-drop-zone:hover,
.ict-drop-zone.ict-drag-over { background: #fdf7f4; border-color: #e05c2a; }

.ict-drop-icon {
    width: 52px; height: 52px;
    border-radius: 12px;
    background: #f0f0f0;
    display: flex; align-items: center; justify-content: center;
    color: #666; margin-bottom: 4px;
}
.ict-drop-label { font-size: .95rem; font-weight: 600; color: #222; margin: 0; }
.ict-drop-hint  { font-size: .8rem;  color: #999; margin: 0; }

.ict-drop-divider {
    display: flex; align-items: center; gap: 10px;
    width: 100%; max-width: 220px; margin: 4px 0;
}
.ict-drop-divider hr { flex: 1; border: none; border-top: 1px solid #e0e0e0; margin: 0; }
.ict-drop-divider span { font-size: .78rem; color: #bbb; }

.ict-btn-upload {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 20px;
    background: #111; color: #fff;
    border: none; border-radius: 8px;
    font-size: .875rem; font-weight: 500;
    cursor: pointer; transition: opacity .15s;
}
.ict-btn-upload:hover { opacity: .82; }

.ict-recaptcha-container { margin-bottom: 22px; }

/* ─── Feature strip ───────────────────────────────────────────────────────── */
.ict-feature-strip {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 12px; margin-bottom: 26px;
}
.ict-feat {
    display: flex; align-items: flex-start; gap: 10px;
    background: #f7f7f7; border-radius: 10px; padding: 12px 14px;
}
.ict-feat svg { color: #e05c2a; flex-shrink: 0; margin-top: 1px; }
.ict-feat div { display: flex; flex-direction: column; gap: 2px; }
.ict-feat strong { font-size: .82rem; font-weight: 600; color: #111; }
.ict-feat span { font-size: .78rem; color: #888; line-height: 1.4; }

/* ─── Messaggi ────────────────────────────────────────────────────────────── */
#ict-error-message,
#ict-success-message,
#ict-warning-message,
#ict-loader { display: none; }

.ict-message {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-radius: 8px; margin: 0 0 16px;
    font-size: .875rem; font-weight: 500; line-height: 1.45;
}
.ict-message svg { flex-shrink: 0; }
.ict-error   { background: #fff5f5; color: #c53030; border: 1px solid #fed7d7; }
.ict-success { background: #f0fff4; color: #276749; border: 1px solid #c6f6d5; }
.ict-warning { background: #fffaf0; color: #975a16; border: 1px solid #feebc8; }

/* ─── Loader ──────────────────────────────────────────────────────────────── */
.ict-loader { text-align: center; padding: 28px; color: #888; font-size: .875rem; }
.ict-spinner {
    width: 36px; height: 36px;
    border: 3px solid #eee; border-top-color: #e05c2a;
    border-radius: 50%;
    animation: ict-spin .8s linear infinite;
    margin: 0 auto 14px;
}
@keyframes ict-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .ict-spinner { animation-duration: 2s; }
}

/* ─── Canvas ──────────────────────────────────────────────────────────────── */
.ict-canvas-wrapper { margin: 0 0 20px; }

.ict-canvas-container {
    position: relative;
    width: 100%;
    min-height: 280px;
    border: 1.5px dashed #d0d0d0;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: #fafafa; overflow: hidden; padding: 16px;
}
.ict-canvas-container.has-image {
    border-style: solid; border-color: #e8e8e8; background: #fff;
}

#ict-canvas {
    display: none;
    max-width: 100%;
    border-radius: 6px;
    cursor: crosshair;
    touch-action: none; /* indispensabile per pinch e drag via Pointer Events */
}
#ict-canvas:focus-visible { outline: 2px solid #e05c2a; outline-offset: 2px; }
.ict-canvas-container.has-image #ict-canvas { display: block; }

.ict-canvas-overlay {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    color: #bbb; font-size: .875rem; text-align: center;
}
.ict-canvas-overlay svg { opacity: .6; }
.ict-canvas-container.has-image .ict-canvas-overlay { display: none; }

.ict-zoom-badge {
    position: absolute; top: 10px; right: 10px;
    background: rgba(17,17,17,.85); color: #fff;
    font-size: .72rem; font-weight: 600;
    padding: 3px 8px; border-radius: 5px;
    opacity: 0; transition: opacity .15s; pointer-events: none;
}
.ict-zoom-badge.visible { opacity: 1; }

/* ─── Toolbar ─────────────────────────────────────────────────────────────── */
.ict-toolbar {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    margin-bottom: 14px;
}
.ict-toolbar-actions { margin-bottom: 22px; }

.ict-tool-group { display: flex; gap: 6px; flex-wrap: wrap; }

.ict-tool-button,
.ict-shape-button,
.ict-secondary-button,
.ict-primary-button {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 8px;
    font-size: .875rem; font-weight: 500; font-family: inherit;
    cursor: pointer; white-space: nowrap;
    border: 1px solid #ddd; background: #fff; color: #222;
    transition: background .12s, opacity .12s, border-color .12s;
}
.ict-shape-button { padding: 8px 10px; }

.ict-tool-button:hover:not(:disabled),
.ict-shape-button:hover:not(:disabled) { background: #f5f5f5; }

.ict-tool-button.active,
.ict-shape-button.active {
    background: #111; color: #fff; border-color: #111;
}

.ict-secondary-button { background: #f5f5f5; border-color: #e6e6e6; color: #444; }
.ict-secondary-button:hover:not(:disabled) { background: #ebebeb; }

.ict-primary-button { background: #e05c2a; color: #fff; border-color: #e05c2a; }
.ict-primary-button:hover:not(:disabled) { opacity: .88; }

.ict-toolbar button:disabled { opacity: .35; cursor: not-allowed; }
.ict-toolbar button:focus-visible { outline: 2px solid #e05c2a; outline-offset: 2px; }

.ict-reset-button { color: #c53030; border-color: #f0c7c7; background: #fff; }
.ict-reset-button:not(:disabled):hover { background: #fff5f5; border-color: #fc8181; color: #9b2c2c; }

/* ─── Slider ──────────────────────────────────────────────────────────────── */
.ict-intensity-slider { flex: 1; min-width: 190px; }
.ict-slider-container { display: flex; align-items: center; gap: 10px; }
.ict-slider-container label { font-size: .8rem; color: #666; white-space: nowrap; }

#ict-intensity { flex: 1; accent-color: #e05c2a; height: 4px; cursor: pointer; min-width: 80px; }

.ict-slider-value {
    font-size: .8rem; font-weight: 600;
    background: #111; color: #fff;
    padding: 2px 8px; border-radius: 4px;
    min-width: 34px; text-align: center;
}

/* ─── Colori barra piena ──────────────────────────────────────────────────── */
.ict-color-picker { display: flex; align-items: center; gap: 6px; }
.ict-color-picker > span { font-size: .8rem; color: #666; margin-right: 2px; }

.ict-swatch {
    width: 26px; height: 26px; border-radius: 6px;
    border: 2px solid #ddd; cursor: pointer; padding: 0;
    transition: border-color .12s, transform .12s;
}
.ict-swatch:hover { transform: scale(1.08); }
.ict-swatch.active { border-color: #e05c2a; box-shadow: 0 0 0 2px rgba(224,92,42,.2); }
.ict-swatch:focus-visible { outline: 2px solid #e05c2a; outline-offset: 2px; }

/* ─── Istruzioni ──────────────────────────────────────────────────────────── */
.ict-zoom-instructions {
    background: #f7f7f7; border-radius: 10px;
    padding: 16px 20px; margin-bottom: 14px;
}
.ict-zoom-instructions strong {
    font-size: .82rem; font-weight: 600; color: #111;
    display: block; margin-bottom: 10px;
}
.ict-zoom-instructions ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.ict-zoom-instructions li {
    display: flex; gap: 10px; font-size: .82rem; color: #666; line-height: 1.45;
}
.ict-zoom-instructions li span {
    font-weight: 600; color: #333; min-width: 62px; flex-shrink: 0;
}

.ict-security-note {
    font-size: .78rem; color: #975a16;
    background: #fffaf0; border: 1px solid #feebc8;
    border-radius: 8px; padding: 12px 14px; margin: 0;
    line-height: 1.55;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .ict-container { padding: 20px 12px; }
    .ict-content { padding: 24px 18px; }
    .ict-feature-strip { grid-template-columns: 1fr; }
    .ict-canvas-container { padding: 10px; }

    .ict-tool-group { width: 100%; }
    .ict-tool-group .ict-tool-button { flex: 1; justify-content: center; }
    .ict-intensity-slider { width: 100%; }

    .ict-toolbar-actions button { flex: 1 1 46%; justify-content: center; }
    .ict-toolbar-actions .ict-primary-button { flex-basis: 100%; }
}

@media (max-width: 420px) {
    .ict-tool-button span { display: none; }
    .ict-tool-button { padding: 10px; justify-content: center; }
}