/* Pagina: pages/my-numbers.php (estilos extraidos do arquivo e convertidos para o tema claro) */
.numeros-container { max-width: 700px; margin: 0 auto; padding: 0 15px 40px; }
.numeros-header { padding: 20px 0; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
.numeros-title { font-size: 28px; font-weight: 700; color: #000000; margin: 0; }

.btn-buscar { background: linear-gradient(135deg, var(--r-red) 0%, var(--r-red) 100%); color: #ffffff; padding: 10px 20px; border: none; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 6px; }
.btn-buscar:hover { background: linear-gradient(135deg, var(--r-red) 0%, var(--r-red) 100%); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--r-red-rgb), 0.18); }
.btn-buscar i { font-size: 16px; }

.alert-info { background: var(--r-red-soft); border: 1px solid var(--r-red); border-radius: 12px; padding: 16px; margin-bottom: 20px; color: var(--r-red); display: flex; align-items: center; gap: 12px; }
.alert-info i { font-size: 20px; }

.pedido-card { background: linear-gradient(135deg, #f5f5f6 0%, #f5f5f6 100%); border-radius: 16px; padding: 16px; margin-bottom: 16px; border: 1px solid #e6e6e9; position: relative; overflow: hidden; }
.pedido-card::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; transition: opacity 0.3s ease; opacity: 0; }
.pedido-card.border-warning::before { background: linear-gradient(180deg, var(--r-red) 0%, var(--r-red) 100%); opacity: 1; }
.pedido-card.border-success::before { background: linear-gradient(180deg, #eaf7ef 0%, #12823b 100%); opacity: 1; }
.pedido-card.border-danger::before { background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%); opacity: 1; }

.pedido-content { display: flex; gap: 16px; align-items: flex-start; }
.pedido-imagem { width: 80px; height: 80px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: #ffffff; }
.pedido-imagem img { width: 100%; height: 100%; object-fit: cover; }

.pedido-info { flex: 1; min-width: 0; }
.pedido-nome { font-size: 16px; font-weight: 700; color: #000000; margin-bottom: 4px; }
.pedido-data { font-size: 12px; color: #5c5c63; margin-bottom: 8px; display: flex; align-items: center; gap: 4px; }
.pedido-data i { font-size: 13px; }

.pedido-numeros { font-size: 13px; color: #5c5c63; margin-bottom: 12px; }

.drope-tab input { display: none; }
.drope-tab label { display: inline-block; padding: 6px 16px; background: var(--r-red-soft); color: var(--r-red); border: 1px solid var(--r-red); border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }
.drope-tab label:hover { background: var(--r-red-soft); }
.drope-tab input:checked + label { background: linear-gradient(135deg, var(--r-red) 0%, var(--r-red) 100%); color: #ffffff; border-color: var(--r-red); }
.drope-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; margin-top: 12px; }
.drope-tab input:checked ~ .drope-content { max-height: 500px; }

.btn-pedido { padding: 10px 16px; border: none; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; width: 100%; text-decoration: none; display: block; text-align: center; margin-top: 12px; }
.btn-pedido.btn-warning { background: linear-gradient(135deg, var(--r-red) 0%, var(--r-red) 100%); color: #ffffff; }
.btn-pedido.btn-success { background: linear-gradient(135deg, #eaf7ef 0%, #12823b 100%); color: #ffffff; }
.btn-pedido.btn-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: #ffffff; }
.btn-pedido:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10); }

.modal-content { background: linear-gradient(135deg, #f5f5f6 0%, #f5f5f6 100%) !important; border: 1px solid #e6e6e9 !important; border-radius: 16px !important; }
.modal-header { border-bottom: 1px solid #e6e6e9 !important; }
.modal-title { color: #000000 !important; font-size: 18px; font-weight: 600; }
.modal-body { padding: 24px !important; }
.modal .form-label { color: #5c5c63; font-size: 13px; font-weight: 600; margin-bottom: 8px; text-transform: uppercase; }
.modal .form-control { background: rgba(0, 0, 0, 0.035) !important; border: 1px solid #e6e6e9 !important; border-radius: 10px !important; color: #000000 !important; padding: 12px 16px !important; }
.modal .form-control:focus { background: rgba(0, 0, 0, 0.056) !important; border-color: var(--r-red) !important; box-shadow: 0 0 0 3px rgba(var(--r-red-rgb), 0.10) !important; }
.modal .btn-warning { background: linear-gradient(135deg, var(--r-red) 0%, var(--r-red) 100%) !important; color: #ffffff !important; border: none !important; padding: 10px 20px; border-radius: 10px; font-weight: 600; }
.modal .btn-close { filter: none; opacity: 0.6; }
.modal .btn-close:hover { opacity: 1; }

@media (max-width: 600px) {
    .numeros-title { font-size: 24px; }
    .numeros-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .pedido-content { gap: 12px; }
    .pedido-imagem { width: 60px; height: 60px; }
    .pedido-nome { font-size: 14px; }
}