/* =============================================================================
   ImageSurgeon -- Free Image SEO Tool
   File: /public_html/assets/css/image-seo.css
   Loaded by: templates/pages/image-seo/landing.php (page-specific, not global)
   ============================================================================= */

/* ── Container + headings ──────────────────────────────────────────────────── */
.kpi-wrap { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.kpi-section-title { font-size: 14px; font-weight: 700; color: #6b7280; text-transform: uppercase;
    letter-spacing: 1.2px; margin: 0 0 14px; }

/* ── Quota indicator (top of tool) ─────────────────────────────────────────── */
.kpi-quota {
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    border: 1px solid #bfdbfe; border-radius: 12px;
    padding: 14px 20px; margin-bottom: 24px;
    font-size: 13.5px; color: #1e40af;
    display: flex; align-items: center; gap: 12px;
    transition: all .15s ease;
}
.kpi-quota.kpi-quota--depleted {
    background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%);
    border-color: #fde68a; color: #92400e;
}
.kpi-quota.kpi-quota--zero {
    background: #fee2e2; border-color: #fecaca; color: #991b1b;
}
.kpi-quota i { font-size: 16px; flex-shrink: 0; }

/* ── Drop zone (initial state) ─────────────────────────────────────────────── */
.kpi-drop {
    position: relative; cursor: pointer;
    border: 2.5px dashed #cbd5e1; border-radius: 14px;
    background: #f8fafc;
    padding: 56px 24px; text-align: center;
    transition: all .15s ease;
    user-select: none;
}
.kpi-drop:hover,
.kpi-drop.kpi-drop--hot {
    border-color: #0f6fd8; background: #eff6ff;
    box-shadow: 0 4px 16px rgba(15, 111, 216, .12);
}
.kpi-drop input[type="file"] { display: none; }
.kpi-drop-icon {
    width: 64px; height: 64px; border-radius: 50%;
    background: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: 26px; color: #0f6fd8;
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.kpi-drop-title { font-size: 17px; font-weight: 700; color: #1a1f2e; margin-bottom: 4px; }
.kpi-drop-sub   { font-size: 13px; color: #6b7280; line-height: 1.6; }
.kpi-drop-meta  { font-size: 11px; color: #9ca3af; margin-top: 12px; letter-spacing: .3px; }

/* ── Error banner shown when validation fails ──────────────────────────────── */
.kpi-error {
    background: #fee2e2; border: 1px solid #fecaca; border-radius: 10px;
    padding: 12px 16px; margin-bottom: 18px; font-size: 13px; color: #991b1b;
}
.kpi-error i { margin-right: 6px; }

/* ── Loading state (while decoding/encoding) ───────────────────────────────── */
.kpi-loading {
    text-align: center; padding: 48px 24px; color: #6b7280; font-size: 13px;
}
.kpi-loading .fa-spinner { color: #0f6fd8; margin-right: 8px; }

/* ── Before/after panels ───────────────────────────────────────────────────── */
.kpi-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 22px; }
@media (max-width: 640px) { .kpi-panels { grid-template-columns: 1fr; } }

.kpi-panel {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    overflow: hidden; display: flex; flex-direction: column;
}
.kpi-panel-head {
    padding: 10px 14px; background: #f8fafc; border-bottom: 1px solid #f0f4f8;
    display: flex; align-items: center; justify-content: space-between;
}
.kpi-panel-label {
    font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 1px;
}
.kpi-panel-label--out { color: #16a34a; }
.kpi-panel-size {
    font-size: 12px; font-weight: 700; color: #1a1f2e;
}
.kpi-panel-img {
    flex: 1; min-height: 200px;
    display: flex; align-items: center; justify-content: center;
    background: repeating-conic-gradient(#f3f4f6 0% 25%, #fff 0% 50%) 50% / 16px 16px;
    overflow: hidden;
}
.kpi-panel-img img { max-width: 100%; max-height: 360px; display: block; }
.kpi-panel-foot {
    padding: 8px 14px; background: #fff; border-top: 1px solid #f0f4f8;
    font-size: 11px; color: #9ca3af; display: flex; justify-content: space-between;
}

/* ── Saving badge (overall) ────────────────────────────────────────────────── */
.kpi-saving {
    background: #dcfce7; border: 1px solid #bbf7d0; border-radius: 10px;
    padding: 12px 18px; margin-bottom: 22px;
    display: flex; align-items: center; gap: 14px; font-size: 14px; color: #14532d;
}
.kpi-saving strong { font-size: 18px; color: #15803d; }
.kpi-saving-x { color: #6b7280; font-size: 12px; }

/* ── Controls (quality + format + resize) ──────────────────────────────────── */
.kpi-controls {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 20px 24px; margin-bottom: 22px;
}
.kpi-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin-bottom: 14px; }
.kpi-row:last-child { margin-bottom: 0; }
.kpi-row-label {
    font-size: 12px; font-weight: 700; color: #374151; text-transform: uppercase;
    letter-spacing: .7px; min-width: 72px;
}

/* Format pills */
.kpi-format { display: inline-flex; gap: 6px; background: #f3f4f6; border-radius: 10px; padding: 4px; }
.kpi-format button {
    padding: 7px 14px; border: 0; border-radius: 7px; background: transparent;
    font-size: 12.5px; font-weight: 600; color: #6b7280; cursor: pointer; transition: all .12s ease;
}
.kpi-format button:hover { color: #1a1f2e; }
.kpi-format button[aria-pressed="true"] {
    background: #fff; color: #0f6fd8; box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* Quality slider */
.kpi-slider { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 220px; }
.kpi-slider input[type="range"] { flex: 1; accent-color: #0f6fd8; height: 4px; }
.kpi-slider-val {
    font-family: ui-monospace, Consolas, monospace; font-weight: 700;
    font-size: 13px; color: #0f6fd8; min-width: 38px; text-align: right;
}
.kpi-slider[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* Resize checkbox + max-width input */
.kpi-resize { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #374151; }
.kpi-resize input[type="checkbox"] { accent-color: #0f6fd8; }
.kpi-resize input[type="number"] {
    width: 80px; padding: 5px 8px; border: 1px solid #e5e7eb; border-radius: 6px;
    font-family: ui-monospace, Consolas, monospace; font-size: 12.5px;
}

/* ── Action row (download + AI) ────────────────────────────────────────────── */
.kpi-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.kpi-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 20px; border-radius: 10px; border: 0;
    font-size: 14px; font-weight: 600; cursor: pointer;
    text-decoration: none; transition: all .12s ease;
}
.kpi-btn--primary { background: #0f6fd8; color: #fff; }
.kpi-btn--primary:hover { background: #0c5fc0; color: #fff; }
.kpi-btn--ghost  {
    background: #fff; color: #0f6fd8; border: 1px solid #bfdbfe;
}
.kpi-btn--ghost:hover { background: #eff6ff; }
.kpi-btn--ai {
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%); color: #fff;
}
.kpi-btn--ai:hover { filter: brightness(1.05); color: #fff; }
.kpi-btn[disabled],
.kpi-btn[aria-disabled="true"] {
    opacity: .55; cursor: not-allowed; pointer-events: none;
}
.kpi-btn--reset {
    background: #f3f4f6; color: #6b7280;
}
.kpi-btn--reset:hover { background: #e5e7eb; color: #374151; }

/* ── AI metadata panel placeholder (Day 4 turns this on) ───────────────────── */
.kpi-ai-coming {
    background: #f8fafc; border: 1px dashed #e5e7eb; border-radius: 12px;
    padding: 22px 24px; font-size: 13px; color: #6b7280; line-height: 1.65;
    text-align: center;
}
.kpi-ai-coming strong { color: #1a1f2e; }