/* ── Image Converter Tools — Public Styles v2.2 ────────────────────────────── */

/* Critical: ensure the [hidden] attribute is always respected,
   even when the active theme overrides display on descendants. */
.ict-tool [hidden] { display: none !important; }

.ict-tool {
    --ict-accent:    #6366f1;
    --ict-accent-dk: color-mix(in srgb, var(--ict-accent) 80%, #000);
    --ict-radius:    14px;
    --ict-border:    #e5e7eb;
    --ict-bg:        #f9fafb;
    --ict-text:      #111827;
    --ict-muted:     #6b7280;
    --ict-success:   #10b981;
    --ict-error:     #ef4444;
    --ict-shadow:    0 4px 24px rgba(0,0,0,.07);

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size:   16px;
    color:       var(--ict-text);
    max-width:   680px;
    margin:      0 auto;
    display:     flex;
    flex-direction: column;
    gap:         20px;
}
.ict-tool--error {
    background:  #fef2f2;
    border:      1px solid #fecaca;
    color:       #991b1b;
    padding:     16px 20px;
    border-radius: 10px;
}

/* ── Drop zone ────────────────────────────────────────────────────────────── */
.ict-dropzone {
    display:         block;
    border:          2px dashed var(--ict-border);
    border-radius:   var(--ict-radius);
    background:      var(--ict-bg);
    padding:         48px 24px;
    text-align:      center;
    cursor:          pointer;
    transition:      border-color .2s, background .2s, box-shadow .2s;
    position:        relative;
}
.ict-dropzone:hover,
.ict-dropzone.ict--over {
    border-color: var(--ict-accent);
    background:   color-mix(in srgb, var(--ict-accent) 5%, #fff);
    box-shadow:   0 0 0 4px color-mix(in srgb, var(--ict-accent) 12%, transparent);
}
.ict-dropzone__content { pointer-events: none; }
.ict-dropzone__icon    { color: var(--ict-accent); width: 64px; height: 64px; margin: 0 auto 16px; display: block; }
.ict-dropzone__title   { font-size: 1.2rem; font-weight: 700; margin: 0 0 6px; }
.ict-dropzone__sub     { color: var(--ict-muted); margin: 0 0 10px; }
.ict-browse-btn {
    pointer-events: all;
    background:     none;
    border:         none;
    color:          var(--ict-accent);
    font-weight:    600;
    cursor:         pointer;
    padding:        0;
    font-size:      1em;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ict-dropzone__hint { color: var(--ict-muted); font-size: .85rem; margin: 0; }

/* Visually hidden but still focusable / clickable via its parent <label>. */
.ict-file-input {
    position: absolute;
    width:    1px;
    height:   1px;
    opacity:  0;
    overflow: hidden;
    border:   0;
    padding:  0;
    margin:   0;
}
/* Keyboard focus indicator on the dropzone label when the hidden input is focused. */
.ict-dropzone:focus-within {
    outline:        2px solid var(--ict-accent);
    outline-offset: 3px;
    border-color:   var(--ict-accent);
    background:     color-mix(in srgb, var(--ict-accent) 5%, #fff);
}
.ict-dropzone:focus-within .ict-browse-btn { text-decoration-thickness: 2px; }

/* ── File list (queue) ────────────────────────────────────────────────────── */
.ict-file-list {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    animation:      ict-fade-in .2s ease;
}
.ict-file-row {
    display:       flex;
    align-items:   center;
    gap:           14px;
    background:    #fff;
    border:        1px solid var(--ict-border);
    border-radius: 12px;
    padding:       10px 14px;
    box-shadow:    var(--ict-shadow);
    transition:    border-color .15s, opacity .2s;
    animation:     ict-fade-in .25s ease;
}
.ict-file-row[data-status="done"]       { border-color: color-mix(in srgb, var(--ict-success) 30%, var(--ict-border)); }
.ict-file-row[data-status="error"]      { border-color: color-mix(in srgb, var(--ict-error) 30%, var(--ict-border)); }
.ict-file-row[data-status="converting"] { border-color: color-mix(in srgb, var(--ict-accent) 30%, var(--ict-border)); }

.ict-file-thumb {
    width:         48px;
    height:        48px;
    object-fit:    cover;
    border-radius: 8px;
    border:        1px solid var(--ict-border);
    flex-shrink:   0;
    background:    repeating-conic-gradient(#e5e7eb 0% 25%, #fff 0% 50%) 0 0 / 10px 10px;
}
.ict-file-thumb:not([src]),
.ict-file-thumb[src=""] { visibility: hidden; }

.ict-file-info {
    flex:           1;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    gap:            3px;
}
.ict-file-name {
    font-weight:   600;
    font-size:     .92rem;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.ict-file-meta {
    font-size: .78rem;
    color:     var(--ict-muted);
}
.ict-file-progress {
    width:         100%;
    height:        4px;
    background:    var(--ict-border);
    border-radius: 2px;
    overflow:      hidden;
    margin-top:    4px;
}
.ict-file-progress-fill {
    height:        100%;
    background:    var(--ict-accent);
    width:         0%;
    transition:    width .3s ease;
    animation:     ict-progress-pulse 1.4s ease infinite;
}

.ict-file-status {
    font-size:     .75rem;
    font-weight:   700;
    padding:       4px 10px;
    border-radius: 999px;
    white-space:   nowrap;
    flex-shrink:   0;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ict-file-status--queued     { background: #f3f4f6; color: var(--ict-muted); }
.ict-file-status--converting { background: color-mix(in srgb, var(--ict-accent) 12%, #fff); color: var(--ict-accent); text-transform: none; letter-spacing: 0; }
.ict-file-status--done       { background: #ecfdf5; color: var(--ict-success); text-transform: none; letter-spacing: 0; }
.ict-file-status--error      { background: #fef2f2; color: var(--ict-error);   text-transform: none; letter-spacing: 0; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }

.ict-file-download {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    width:         32px;
    height:        32px;
    border-radius: 8px;
    background:    var(--ict-success);
    color:         #fff;
    text-decoration: none;
    flex-shrink:   0;
    transition:    background .15s, transform .1s;
}
.ict-file-download:hover { background: #059669; transform: translateY(-1px); color: #fff; }

.ict-file-remove {
    background:    none;
    border:        1px solid var(--ict-border);
    border-radius: 8px;
    color:         var(--ict-muted);
    cursor:        pointer;
    padding:       6px;
    display:       inline-flex;
    align-items:   center;
    transition:    color .15s, border-color .15s;
    flex-shrink:   0;
}
.ict-file-remove:hover { color: var(--ict-error); border-color: var(--ict-error); }

/* ── Controls ─────────────────────────────────────────────────────────────── */
.ict-controls {
    background:    #fff;
    border:        1px solid var(--ict-border);
    border-radius: var(--ict-radius);
    padding:       24px;
    display:       flex;
    flex-direction: column;
    gap:           22px;
    box-shadow:    var(--ict-shadow);
}
.ict-control-group { display: flex; flex-direction: column; gap: 10px; }
.ict-control-label {
    font-size:   .85rem;
    font-weight: 700;
    color:       var(--ict-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    display:     flex;
    align-items: center;
    gap:         8px;
}

/* Format pills */
.ict-format-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.ict-pill         { cursor: pointer; }
.ict-pill-radio   { position: absolute; opacity: 0; width: 0; height: 0; }
.ict-pill > span,
.ict-pill {
    display:       inline-block;
    padding:       8px 18px;
    border-radius: 999px;
    border:        2px solid var(--ict-border);
    font-size:     .95rem;
    font-weight:   600;
    color:         var(--ict-muted);
    background:    #fff;
    transition:    all .15s;
    user-select:   none;
}
.ict-pill--active,
.ict-pill:has(.ict-pill-radio:checked) {
    background:    var(--ict-accent);
    border-color:  var(--ict-accent);
    color:         #fff;
    box-shadow:    0 2px 8px color-mix(in srgb, var(--ict-accent) 40%, transparent);
}
.ict-pill:hover:not(.ict-pill--active) { border-color: var(--ict-accent); color: var(--ict-accent); }

/* Quality slider */
.ict-quality-badge {
    background:    var(--ict-accent);
    color:         #fff;
    font-size:     .78rem;
    font-weight:   700;
    padding:       2px 8px;
    border-radius: 999px;
    min-width:     42px;
    text-align:    center;
}
.ict-slider-wrap { display: flex; align-items: center; gap: 10px; }
.ict-slider-cap  { font-size: .78rem; color: var(--ict-muted); white-space: nowrap; }
.ict-slider {
    -webkit-appearance: none;
    appearance:         none;
    flex:               1;
    height:             6px;
    border-radius:      3px;
    background:         linear-gradient(to right, var(--ict-accent) 85%, #e5e7eb 85%);
    cursor:             pointer;
    border:             none;
    outline:            none;
}
.ict-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:              22px;
    height:             22px;
    border-radius:      50%;
    background:         #fff;
    border:             3px solid var(--ict-accent);
    box-shadow:         0 2px 6px rgba(0,0,0,.15);
    cursor:             pointer;
    transition:         box-shadow .15s;
}
.ict-slider::-webkit-slider-thumb:hover { box-shadow: 0 2px 12px color-mix(in srgb, var(--ict-accent) 50%, transparent); }
.ict-slider::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%;
    background: #fff; border: 3px solid var(--ict-accent); cursor: pointer;
}

/* Resize row */
.ict-resize-row {
    display:     flex;
    align-items: flex-end;
    gap:         10px;
    flex-wrap:   wrap;
}
.ict-input-wrap  { display: flex; flex-direction: column; gap: 4px; }
.ict-input-label { font-size: .78rem; color: var(--ict-muted); }
.ict-input-inner { position: relative; }
.ict-number-input {
    width:         96px;
    padding:       8px 32px 8px 12px;
    border:        1.5px solid var(--ict-border);
    border-radius: 8px;
    font-size:     .95rem;
    color:         var(--ict-text);
    background:    #fff;
    transition:    border-color .15s;
    -moz-appearance: textfield;
}
.ict-number-input::-webkit-outer-spin-button,
.ict-number-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.ict-number-input:focus { outline: none; border-color: var(--ict-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ict-accent) 15%, transparent); }
.ict-input-unit { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: .75rem; color: var(--ict-muted); pointer-events: none; }
.ict-resize-x   { font-size: 1.1rem; color: var(--ict-muted); padding-bottom: 10px; }
.ict-resize-ratio {
    display:     flex;
    align-items: center;
    gap:         4px;
    font-size:   .78rem;
    color:       var(--ict-muted);
    white-space: nowrap;
    padding-bottom: 2px;
}

/* ── Convert button ───────────────────────────────────────────────────────── */
.ict-action-row { display: flex; }
.ict-convert-btn {
    display:       flex;
    align-items:   center;
    gap:           8px;
    width:         100%;
    justify-content: center;
    padding:       14px 28px;
    background:    var(--ict-accent);
    color:         #fff;
    border:        none;
    border-radius: var(--ict-radius);
    font-size:     1.05rem;
    font-weight:   700;
    cursor:        pointer;
    transition:    background .15s, box-shadow .15s, transform .1s;
    box-shadow:    0 4px 14px color-mix(in srgb, var(--ict-accent) 45%, transparent);
}
.ict-convert-btn:hover:not(:disabled) {
    background:  var(--ict-accent-dk);
    box-shadow:  0 6px 18px color-mix(in srgb, var(--ict-accent) 55%, transparent);
    transform:   translateY(-1px);
}
.ict-convert-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.ict-btn-icon { flex-shrink: 0; }

/* ── Error (global) ───────────────────────────────────────────────────────── */
.ict-error {
    background:    #fef2f2;
    border:        1px solid #fecaca;
    border-radius: 10px;
    color:         #991b1b;
    padding:       14px 18px;
    font-size:     .9rem;
}

/* ── Bulk actions (download all + start over) ─────────────────────────────── */
.ict-bulk-actions {
    display:    flex;
    gap:        12px;
    flex-wrap:  wrap;
    align-items: center;
    animation:  ict-fade-in .3s ease;
}
.ict-download-all-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    padding:       12px 24px;
    background:    var(--ict-success);
    color:         #fff;
    border-radius: 12px;
    font-size:     .98rem;
    font-weight:   700;
    text-decoration: none;
    transition:    background .15s, transform .1s;
    box-shadow:    0 4px 14px rgba(16,185,129,.35);
}
.ict-download-all-btn:hover { background: #059669; transform: translateY(-1px); color: #fff; text-decoration: none; }

.ict-convert-another-btn {
    background:    none;
    border:        1.5px solid var(--ict-border);
    border-radius: 12px;
    padding:       11px 22px;
    font-size:     .95rem;
    font-weight:   600;
    color:         var(--ict-muted);
    cursor:        pointer;
    transition:    border-color .15s, color .15s;
}
.ict-convert-another-btn:hover { border-color: var(--ict-accent); color: var(--ict-accent); }

/* ── Animations ───────────────────────────────────────────────────────────── */
@keyframes ict-fade-in        { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ict-progress-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
    .ict-controls           { padding: 16px; }
    .ict-dropzone           { padding: 32px 16px; }
    .ict-number-input       { width: 80px; }
    .ict-file-row           { flex-wrap: wrap; row-gap: 8px; }
    .ict-file-status        { order: 4; flex-basis: 100%; text-align: center; }
    .ict-file-status--error { max-width: none; }
}

/* v2.3.0 — heading rendered above tool when shortcode has heading="..." */
.ict-tool-heading {
    margin: 0 0 16px;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}