:root {
        --primary: #28a745;
        --bg: #f8f9fa;
        --text: #333;
        --border: #e0e0e0;
    }

    body {
        font-family: 'Segoe UI', Tahoma, sans-serif;
        background-color: var(--bg);
        color: var(--text);
        margin: 0;
        padding: 20px;
    }

    .container-pedido {
        max-width: 700px;
        margin: 0 auto;
    }

    /* 1. Busca */
    .search-box {
        background: white;
        padding: 25px;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
        text-align: center;
        margin-bottom: 20px;
    }

    .search-box h2 {
        margin-top: 0;
        font-size: 20px;
    }

    .input-wrapper {
        flex: 1;
        /* Faz o wrapper ocupar o espaço restante, empurrando o botão */
        display: flex;
        flex-direction: column;
        /* Coloca o erro embaixo do input */
        text-align: left;
        /* Garante que a mensagem de erro alinhe à esquerda do input */
    }

    .input-group {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        max-width: 500px;
        margin: 15px auto 0;
    }

    .input-group button {
        padding: 10px 20px;
        margin-bottom: auto;
        margin-top: 3px;
        background: #333;
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-weight: bold;
    }

    /* 2. Painel de Resultados (Inicia escondido) */
    .order-result {
        display: none;
        /* Trocar para block via JS */
        animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .card {
        background: white;
        padding: 20px;
        border-radius: 12px;
        margin-bottom: 15px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    }

    .card h3 {
        margin: 0 0 15px 0;
        font-size: 16px;
        border-bottom: 1px solid var(--border);
        padding-bottom: 10px;
        color: #666;
    }

    /* Linhas de Informação */
    .info-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        font-size: 14px;
    }

    .info-row span:first-child {
        color: #888;
    }

    .info-row span:last-child {
        font-weight: 600;
    }

    /* Badge de Status */
    .badge {
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 12px;
        text-transform: uppercase;
    }

    .badge-pago {
        background: #d4edda;
        color: #155724;
    }

    .badge-pendente {
        background: #fff3cd;
        color: #856404;
    }

    /* 3. Linha do Tempo (Histórico) */
    .timeline {
        position: relative;
        padding-left: 20px;
        margin-top: 15px;
    }

    .timeline::before {
        content: '';
        position: absolute;
        left: 5px;
        top: 5px;
        bottom: 5px;
        width: 2px;
        background: var(--border);
    }

    .timeline-item {
        position: relative;
        margin-bottom: 15px;
        font-size: 13px;
    }

    .timeline-item::before {
        content: '';
        position: absolute;
        left: -19px;
        top: 4px;
        width: 10px;
        height: 10px;
        background: var(--primary);
        border-radius: 50%;
    }

    .timeline-date {
        color: #999;
        font-size: 11px;
    }

    .timeline-status {
        font-weight: bold;
        color: #333;
    }