/* =====================================================
   Papillon — Verificação de Lotes
   Estilos específicos do shortcode. Todo o resto vem
   do tema (tokens.css + components.css).
===================================================== */

.papillon-lote-wrapper {
    max-width: 520px;
    margin: var(--ph-space-2xl) auto;
    padding: 0 var(--ph-space-md);
}

.papillon-lote-wrapper .ph-label {
    display: block;
    margin-bottom: var(--ph-space-sm);
}

.papillon-lote-wrapper .ph-input {
    text-transform: uppercase;
}

.papillon-lote-info {
    margin: var(--ph-space-md) 0 0;
    font-family: var(--ph-sans);
    font-size: var(--ph-text-sm);
    color: var(--ph-ink-muted);
    text-align: center;
}

/* ===== Resultado: card ===== */

.papillon-lote-result {
    margin-top: var(--ph-space-lg);
}

/* Vários cartões empilhados (multi-match) — espaçamento entre eles. */
.papillon-lote-result + .papillon-lote-result {
    margin-top: var(--ph-space-md);
}

/* Cabeçalho do cartão: eyebrow "Produto" + selo de marca sempre presente. */
.papillon-lote-result__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ph-space-sm);
}

.papillon-lote-result__marca {
    flex-shrink: 0;
    font-family: var(--ph-sans);
    font-size: var(--ph-text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--ph-radius-pill);
    background: var(--ph-paper-tint);
    color: var(--ph-gold-deep);
}

.papillon-lote-result__name {
    margin: var(--ph-space-xs) 0 var(--ph-space-md);
    font-family: var(--ph-serif);
    font-size: var(--ph-text-lg);
    color: var(--ph-ink);
    line-height: 1.25;
}

.papillon-lote-result__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ph-space-md);
    flex-wrap: wrap;
}

.papillon-lote-result__date {
    display: block;
    margin-top: var(--ph-space-xs);
    font-family: var(--ph-mono);
    font-size: var(--ph-text-base);
    color: var(--ph-ink);
}

/* ===== Mensagens (loading / erro) ===== */

.papillon-lote-message {
    margin-top: var(--ph-space-lg);
    padding: var(--ph-space-md);
    border-radius: var(--ph-radius-md);
    font-family: var(--ph-sans);
    font-size: var(--ph-text-base);
    text-align: center;
}

.papillon-lote-message--searching {
    background: var(--ph-paper-tint);
    border: 1px solid var(--ph-line);
    color: var(--ph-ink-muted);
}

.papillon-lote-message--error {
    background: rgba(160, 72, 72, 0.06);
    border: 1px solid rgba(160, 72, 72, 0.20);
    color: #A04848;
}

/* ===== Pesquisas recentes (B1) — histórico no browser ===== */
/* Classes do design system (mockup Lotes), aqui com os tokens --ph-* do tema.
   Sem a etiqueta "Futuro · pós-Junho" (decisão C2). */

.papillon-lote-wrapper .future-section {
    margin-top: var(--ph-space-xl);
    padding-top: var(--ph-space-lg);
    border-top: 1px solid var(--ph-line);
}

.papillon-lote-wrapper .future-title {
    font-family: var(--ph-sans);
    font-size: var(--ph-text-xs);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--ph-ink-soft);
    margin-bottom: var(--ph-space-md);
    font-weight: 700;
    text-align: center;
}

.papillon-lote-wrapper .history-item {
    width: 100%;
    text-align: left;
    background: var(--ph-white);
    border: 1px solid var(--ph-line);
    border-radius: var(--ph-radius-md);
    padding: 11px 14px;
    margin-bottom: var(--ph-space-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ph-space-md);
    cursor: pointer;
    font: inherit;
    transition: border-color var(--ph-duration) var(--ph-ease),
                background var(--ph-duration) var(--ph-ease);
}

.papillon-lote-wrapper .history-item:hover {
    border-color: var(--ph-accent-lotes);
    background: var(--ph-paper-tint);
}

.papillon-lote-wrapper .history-item-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.papillon-lote-wrapper .history-lot {
    font-family: var(--ph-mono);
    font-size: var(--ph-text-base);
    color: var(--ph-ink);
    font-weight: 600;
}

.papillon-lote-wrapper .history-product {
    font-family: var(--ph-sans);
    font-size: var(--ph-text-sm);
    color: var(--ph-ink-muted);
}

.papillon-lote-wrapper .history-status {
    flex-shrink: 0;
    font-family: var(--ph-sans);
    font-size: var(--ph-text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--ph-radius-pill);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.papillon-lote-wrapper .history-status .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

/* Três estados — mesmas cores das pills .ph-lot-status do tema
   (não há tokens --success/--warning/--danger no tema). */
.papillon-lote-wrapper .history-status.valid {
    background: var(--ph-tint-lotes);
    color: var(--ph-accent-lotes);
}
.papillon-lote-wrapper .history-status.valid .dot { background: var(--ph-accent-lotes); }

.papillon-lote-wrapper .history-status.warn {
    background: var(--ph-tint-challenge);
    color: var(--ph-accent-challenge);
}
.papillon-lote-wrapper .history-status.warn .dot { background: var(--ph-accent-challenge); }

.papillon-lote-wrapper .history-status.expired {
    background: rgba(168, 72, 72, 0.12);
    color: #A04848;
}
.papillon-lote-wrapper .history-status.expired .dot { background: #A04848; }

@media (max-width: 767px) {
    .papillon-lote-wrapper {
        max-width: 100%;
    }
}