/* Só o que é exclusivo desta ferramenta. Classes começam com "fipe-" para não colidir com o resto do site. */

.fipe-status { min-height: 1.2em; }
.fipe-status.fipe-loading::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--a) 35%, transparent);
    border-top-color: var(--a);
    vertical-align: -2px;
    animation: fipe-spin .7s linear infinite;
}

.fipe-result-card {
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--a);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin: 6px 0 16px;
    opacity: 0;
    transform: translateY(6px);
    animation: fipe-reveal .35s ease forwards;
}

.fipe-details { display: grid; gap: 6px; margin: 10px 0 14px; font-size: .92rem; }
.fipe-details div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.fipe-details dt { color: var(--muted); }
.fipe-details dd { margin: 0; font-weight: 650; text-align: right; }

@keyframes fipe-spin { to { transform: rotate(360deg); } }
@keyframes fipe-reveal {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}