/* assets/css/pedido-unico.css */

:root {
    --magic-card-bg: #0f172a;
    --magic-border-color: rgba(255,255,255,0.08);
    --neon-green: #4ade80; /* Emerald 400 */
    --light-magic-green: #86efac; /* Emerald 300 - A tonalidade verde clara pedida */
}

/* Wrapper principal */
.magic-wrapper { 
    background: transparent; 
}

/* Card Padrão (Skeleton e Sucesso) */
.magic-card {
    background: var(--magic-card-bg);
    border: 1px solid var(--magic-border-color);
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* --- NOVO EFEITO DE BORDA MÁGICA --- */
/* Container Externo: Define o formato e segura o "feixe" giratório */
.magic-border-box {
    position: relative;
    background: #0f172a; /* Cor de fundo de segurança */
    border-radius: 1rem; /* Equivale ao rounded-2xl */
    padding: 3px; /* Espessura da Borda Mágica */
    overflow: hidden; /* Essencial: Corta o excesso do gradiente para formar a borda */
    isolation: isolate; /* Cria novo contexto de empilhamento */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* O Feixe de Luz Giratório */
.magic-border-box::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250%; /* Muito maior que o container para cobrir cantos retangulares */
    height: 250%; 
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        transparent 45%,
        rgba(74, 222, 128, 0.1) 50%,   /* Início do rastro (transparente) */
        rgba(134, 239, 172, 0.8) 60%,  /* Corpo Verde Claro (Light Green) */
        #ffffff 65%,                   /* Cabeça do Feixe (Branco Brilhante) */
        transparent 65.5%              /* Corte abrupto para contraste */
    );
    transform: translate(-50%, -50%);
    animation: magic-spin 4s linear infinite; /* Rotação suave e contínua */
    z-index: -1; /* Fica atrás do conteúdo */
}

/* Opcional: Um brilho secundário para suavizar */
.magic-border-box::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250%;
    height: 250%;
    background: conic-gradient(
        from 0deg,
        transparent 50%,
        var(--neon-green) 65%,
        transparent 70%
    );
    transform: translate(-50%, -50%);
    animation: magic-spin 4s linear infinite;
    filter: blur(40px); /* Desfoque alto para criar o "Glow" */
    opacity: 0.4;
    z-index: -2;
}

/* Conteúdo Interno (O Card Preto) */
.magic-inner-card {
    background: #020617; /* slate-950 */
    border-radius: 0.85rem; /* Levemente menor que o pai para encaixe perfeito */
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
}

@keyframes magic-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* --- Restante dos Estilos (Mantidos) --- */

/* Ajustes Grid Fundo */
.bg-grid-pattern {
    background-image: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Badges */
.version-badge-glass {
    display: flex; align-items: center; padding: 6px 12px;
    background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(74, 222, 128, 0.3); border-radius: 99px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.text-shadow-neon-green { text-shadow: 0 0 5px rgba(74, 222, 128, 0.6); }

/* --- Slider Custom --- */
.magic-slider { -webkit-appearance: none; appearance: none; outline: none; }
.magic-slider::-webkit-slider-thumb { -webkit-appearance: none; height: 40px; width: 40px; cursor: pointer; background: transparent; }
.magic-slider::-moz-range-thumb { height: 40px; width: 40px; cursor: pointer; border: none; background: transparent; }

/* --- Animações Gerais --- */
@keyframes gradient-x { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.animate-gradient-x { animation: gradient-x 3s ease infinite; }

/* --- Sucesso --- */
.success-icon-wrapper { width: 100px; height: 100px; margin: 0 auto; position: relative; display: flex; align-items: center; justify-content: center; }
.success-ring-outer { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed #34d399; animation: spin 8s linear infinite; opacity: 0.2; }
.success-ring-inner { position: absolute; inset: 10px; border-radius: 50%; border: 4px solid #10b981; border-left-color: transparent; animation: spin 2s linear infinite; }
.success-check { filter: drop-shadow(0 0 15px rgba(16,185,129,0.5)); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes zoomIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
.animate-zoomIn { animation: zoomIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

.magic-loader { width: 40px; height: 40px; border: 4px solid rgba(255,255,255,0.1); border-left-color: #4ade80; border-radius: 50%; animation: spin 1s linear infinite; }