/* Ferramenta "Remover Fundo de Imagem". Prefixo "rfi-" em tudo para não colidir com o resto do site. */

/* ---------- Zona de envio ---------- */
.rfi-drop {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px;
    text-align: center;
    padding: 34px 20px;
    border: 2px dashed color-mix(in srgb, var(--a) 40%, var(--border));
    border-radius: var(--radius);
    background: linear-gradient(150deg, color-mix(in srgb, var(--a) 7%, var(--surface)), var(--surface));
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
    overflow: hidden;
}
.rfi-drop:hover,
.rfi-drop:focus-visible { border-color: var(--a); background: color-mix(in srgb, var(--a) 10%, var(--surface)); }
.rfi-drop.is-dragover { border-color: var(--a); background: color-mix(in srgb, var(--a) 16%, var(--surface)); transform: scale(1.01); }

.rfi-drop-idle,
.rfi-drop-loading { display: grid; justify-items: center; gap: 6px; width: 100%; }

.rfi-drop-icon {
    width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%;
    background: color-mix(in srgb, var(--a) 16%, var(--surface)); color: var(--a); margin-bottom: 4px;
}
.rfi-drop-icon .icon { width: 26px; height: 26px; }
.rfi-drop-title { font-weight: 750; font-size: 1.05rem; margin: 0; }

/* Aviso grande de carregamento: some com o conteúdo normal da zona de envio e ocupa o lugar
   onde o resultado vai aparecer, para ficar impossível de não notar. Visual "premium": brilho
   pulsante atrás do anel + anel de dois tons + texto com um brilho passando por cima. */
.rfi-drop-loading { position: relative; z-index: 0; }
.rfi-drop-loading::before {
    content: ""; position: absolute; top: 50%; left: 50%; width: 150px; height: 150px;
    background: radial-gradient(circle, color-mix(in srgb, var(--a) 32%, transparent), transparent 72%);
    transform: translate(-50%, -50%); border-radius: 50%; z-index: -1; pointer-events: none;
    animation: rfi-glow-pulse 2.2s ease-in-out infinite;
}
@keyframes rfi-glow-pulse {
    0%, 100% { opacity: .5; transform: translate(-50%, -50%) scale(.82); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
}

.rfi-spinner { position: relative; width: 52px; height: 52px; margin-bottom: 6px; }
.rfi-spinner::before,
.rfi-spinner::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 4px solid transparent; }
.rfi-spinner::before { border-color: color-mix(in srgb, var(--a) 18%, var(--surface)); }
.rfi-spinner::after {
    border-top-color: var(--a);
    border-right-color: color-mix(in srgb, var(--a) 45%, transparent);
    animation: rfi-spin .85s linear infinite;
}
@keyframes rfi-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .rfi-spinner::after { animation-duration: 2.4s; }
    .rfi-drop-loading::before { animation: none; opacity: .6; }
}

.rfi-loading-text { font-weight: 750; font-size: 1.15rem; margin: 0; max-width: 420px; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .rfi-loading-text {
        background: linear-gradient(90deg, var(--text) 42%, var(--a) 50%, var(--text) 58%);
        background-size: 250% 100%;
        -webkit-background-clip: text; background-clip: text; color: transparent;
        animation: rfi-shimmer 2.6s linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
        .rfi-loading-text { animation: none; background: none; color: var(--text); }
    }
}
@keyframes rfi-shimmer { from { background-position: 220% 0; } to { background-position: -40% 0; } }

/* ---------- Status / progresso ---------- */
.rfi-status:empty { display: none; }
.rfi-status { margin-top: 14px; }
.rfi-progress { width: 100%; max-width: 320px; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--a) 14%, var(--surface-2)); overflow: hidden; margin-top: 4px; }
.rfi-progress-fill { height: 100%; width: 0%; border-radius: inherit; background: linear-gradient(90deg, var(--a), color-mix(in srgb, var(--a) 60%, var(--brand))); transition: width .2s; }

/* Quando não há um total em bytes pra medir (a IA processando a imagem em si, por exemplo),
   a barra vira "indeterminada": desliza sozinha via CSS puro (thread de composição), então
   continua se mexendo mesmo que a aba fique ocupada processando e o JavaScript não rode a
   tempo — é exatamente isso que evita a barra "congelar" e parecer que travou. */
.rfi-progress.is-indeterminate .rfi-progress-fill {
    width: 35% !important;
    animation: rfi-progress-indeterminate 1.3s ease-in-out infinite;
}
@keyframes rfi-progress-indeterminate {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(285%); }
}
@media (prefers-reduced-motion: reduce) {
    .rfi-progress.is-indeterminate .rfi-progress-fill { animation-duration: 2.8s; }
}

/* ---------- Antes/depois ---------- */
.rfi-stage { margin-top: 20px; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.rfi-stage.is-ready { opacity: 1; transform: none; }

.rfi-compare {
    position: relative;
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background-image:
        linear-gradient(45deg, color-mix(in srgb, var(--muted) 18%, transparent) 25%, transparent 25%),
        linear-gradient(-45deg, color-mix(in srgb, var(--muted) 18%, transparent) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--muted) 18%, transparent) 75%),
        linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--muted) 18%, transparent) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}
.rfi-compare-after,
.rfi-compare-before { position: absolute; inset: 0; }
.rfi-compare-after canvas,
.rfi-compare-before canvas { display: block; width: 100%; height: 100%; }
.rfi-compare-before { clip-path: inset(0 50% 0 0); }

/* O controle de verdade é o mouse/toque na bolinha (ou em qualquer ponto da imagem) — ver script.js.
   O <input type="range"> some visualmente mas continua funcionando com o teclado (Tab + setas). */
.rfi-compare { cursor: ew-resize; touch-action: none; }
.rfi-compare-handle {
    position: absolute; top: 0; bottom: 0; left: 50%; width: 0;
    border-left: 2px solid var(--on-accent, #fff); transform: translateX(-50%);
    display: grid; place-items: center; pointer-events: none;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.4));
}
.rfi-compare-handle .icon {
    width: 34px; height: 34px; padding: 6px; border-radius: 50%;
    background: var(--a); color: var(--on-accent, #fff);
    pointer-events: auto; cursor: grab; touch-action: none;
}
.rfi-compare-handle .icon:active { cursor: grabbing; }
.rfi-slider {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
    opacity: 0; pointer-events: none; appearance: none; -webkit-appearance: none;
}
.rfi-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 1px; height: 1px; }
.rfi-slider::-moz-range-thumb { width: 1px; height: 1px; border: 0; opacity: 0; }
.rfi-slider:focus-visible ~ .rfi-compare-handle .icon { outline: 3px solid var(--a); outline-offset: 2px; }

.rfi-compare.is-retouch { cursor: crosshair; }
.rfi-brush-cursor {
    position: absolute; top: 0; left: 0; border-radius: 50%;
    border: 2px solid var(--a); background: color-mix(in srgb, var(--a) 20%, transparent);
    pointer-events: none; transform: translate(-50%, -50%);
}

/* ---------- Comparar / Melhorar detalhes (abas) ---------- */
.rfi-view-tabs { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.rfi-view-tab {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--surface); color: var(--muted); font-weight: 650; cursor: pointer;
}
.rfi-view-tab.is-active { border-color: var(--a); color: var(--a); background: color-mix(in srgb, var(--a) 10%, var(--surface)); }
.rfi-view-tab .icon { width: 18px; height: 18px; }

/* "Melhorar detalhes" é o diferencial da ferramenta — ganha destaque de verdade (gradiente +
   brilho pulsante), pra não parecer só "mais uma aba igual". O brilho some assim que a pessoa
   já está usando (não precisa mais chamar atenção pra algo que já foi clicado). */
.rfi-view-tab#rfi-tab-retouch {
    position: relative;
    border-color: transparent;
    background: linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a) 65%, var(--brand)));
    color: var(--on-accent, #fff);
}
.rfi-view-tab#rfi-tab-retouch:hover { filter: brightness(1.08); }
.rfi-view-tab#rfi-tab-retouch.is-active { background: linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a) 65%, var(--brand))); color: var(--on-accent, #fff); }
.rfi-view-tab#rfi-tab-retouch:not(.is-active)::after {
    content: ""; position: absolute; inset: -4px; border-radius: inherit;
    border: 2px solid var(--a); opacity: 0; pointer-events: none;
    animation: rfi-tab-pulse 2.2s ease-out infinite;
}
@keyframes rfi-tab-pulse {
    0% { opacity: .55; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) { .rfi-view-tab#rfi-tab-retouch::after { animation: none; display: none; } }

/* ---------- Pincel de retoque ---------- */
.rfi-retouch-tools { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-top: 14px; }
.rfi-retouch-modes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.rfi-retouch-mode {
    display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 16px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 650; cursor: pointer;
}
.rfi-retouch-mode.is-active { border-color: var(--a); color: var(--a); background: color-mix(in srgb, var(--a) 12%, var(--surface)); }
.rfi-retouch-mode .icon { width: 18px; height: 18px; }
.rfi-slider:focus-visible ~ .rfi-compare-handle .icon { outline: 3px solid var(--a); outline-offset: 2px; }

/* ---------- Fundo do resultado ---------- */
.rfi-bg-options { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin: 16px 0 0; }
.rfi-bg-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rfi-bg-swatch {
    width: 38px; height: 38px; border-radius: 50%; padding: 0;
    border: 2px solid var(--border); cursor: pointer; background: var(--surface);
    background-image:
        linear-gradient(45deg, color-mix(in srgb, var(--muted) 28%, transparent) 25%, transparent 25%),
        linear-gradient(-45deg, color-mix(in srgb, var(--muted) 28%, transparent) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--muted) 28%, transparent) 75%),
        linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--muted) 28%, transparent) 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0;
    transition: transform .1s, border-color .15s;
}
.rfi-bg-swatch[data-bg]:not(.rfi-bg-swatch-transparent) { background-image: none; }
.rfi-bg-swatch:hover { transform: scale(1.08); }
.rfi-bg-swatch[aria-pressed="true"] { border-color: var(--a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 25%, transparent); }
.rfi-bg-custom { width: 38px; height: 38px; display: block; position: relative; border-radius: 50%; overflow: hidden; border: 2px solid var(--border); cursor: pointer; }
.rfi-bg-custom input[type="color"] { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); border: 0; padding: 0; cursor: pointer; }

/* ---------- Ações ---------- */
.rfi-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.rfi-actions .btn,
.rfi-actions .btn-ghost { flex: 1 1 200px; }

@media (min-width: 560px) {
    .rfi-drop { padding: 48px 24px; }
}