@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --bs-primary: #7e22ce !important;
    --bs-secondary: #ec4899 !important;
    --bs-dark: #0f172a !important;
    --bs-light: #f8fafc !important;
    --slate-50: #f8fafc !important;
    --slate-100: #f1f5f9 !important;
    --slate-200: #e2e8f0 !important;
    --slate-300: #cbd5e1 !important;
    --slate-400: #94a3b8 !important;
    --slate-500: #64748b !important;
    --slate-600: #475569 !important;
    --slate-700: #334155 !important;
    --slate-900: #0f172a !important;
    --purple-50: #faf5ff !important;
    --purple-100: #f3e8ff !important;
    --purple-600: #9333ea !important;
    --purple-700: #7e22ce !important;
    --purple-800: #6b21a8 !important;
    --purple-900: #581c87 !important;
    --pink-50: #fdf2f8 !important;
    --pink-100: #fce7f3 !important;
    --pink-500: #ec4899 !important;
    --pink-600: #db2777 !important;
    --green-50: #f0fdf4 !important;
    --green-100: #dcfce7 !important;
    --green-500: #22c55e !important;
    --green-600: #16a34a !important;
    --yellow-100: #fef9c3 !important;
    --yellow-600: #ca8a04 !important;
	
	/* Cores de Alerta (Vermelho) */
    --red-100: #fee2e2 !important;
    --red-600: #dc2626 !important;
}

/* Classes para uso no HTML */
.bg-red-100 { 
    background-color: var(--red-100) !important; 
}
.text-red-600 { 
    color: var(--red-600) !important; 
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--slate-900);
}

.text-slate-300 { color: var(--slate-300) !important; }
.text-slate-500 { color: var(--slate-500) !important; }
.text-slate-600 { color: var(--slate-600) !important; }
.text-slate-900 { color: var(--slate-900) !important; }
.text-purple-100 { color: var(--purple-100) !important; }
.text-purple-700 { color: var(--purple-700) !important; }
.text-pink-500 { color: var(--pink-500) !important; }
.text-pink-600 { color: var(--pink-600) !important; }
.text-green-500 { color: var(--green-500) !important; }
.text-green-600 { color: var(--green-600) !important; }
.text-yellow-600 { color: var(--yellow-600) !important; }
.link-footer:hover {color: var(--purple-600) !important;}
.bg-slate-50 { background-color: var(--slate-50) !important; }
.bg-slate-100 { background-color: var(--slate-100) !important; }
.bg-slate-900 { background-color: var(--slate-900) !important; }
.bg-purple-50 { background-color: var(--purple-50) !important; }
.bg-purple-100 { background-color: var(--purple-100) !important; }
.bg-purple-700 { background-color: var(--purple-700) !important; }
.bg-purple-800 { background-color: var(--purple-800) !important; }
.bg-purple-900 { background-color: var(--purple-900) !important; }
.bg-pink-50 { background-color: var(--pink-50) !important; }
.bg-pink-100 { background-color: var(--pink-100) !important; }
.bg-pink-500 { background-color: var(--pink-500) !important; }
.bg-pink-600 { background-color: var(--pink-600) !important; }
.bg-green-50 { background-color: var(--green-50) !important; }
.bg-green-500 { background-color: var(--green-500) !important; }
.bg-green-600 { background-color: var(--green-600) !important; }
.bg-green-100 { background-color: var(--green-100) !important; }
.bg-yellow-100 { background-color: var(--yellow-100) !important; }

.rounded-xl { border-radius: 0.75rem !important; }
.rounded-2xl { border-radius: 1rem !important; }
.rounded-3xl { border-radius: 1.5rem !important; }
.rounded-full { border-radius: 9999px !important; }

.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important; }
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important; }

.hover:bg-purple-800:hover { background-color: var(--purple-800) !important; }
.hover:text-purple-700:hover { color: var(--purple-700) !important; }
.hover:text-white {color: #fff !important;}

.active_header {color: var(--pink-600) !important;}

.border-slate-100 { border-color: var(--slate-100) !important; }
.border-slate-200 { border-color: var(--slate-200) !important; }

/* Gradients */
.bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--gradient-from, transparent), var(--gradient-to, transparent)) !important;}
.from-purple-50 { --gradient-from: var(--purple-50) !important;}
.to-white { --gradient-to: #ffffff !important;}
.from-purple-700 {  --gradient-from: var(--purple-700) !important; }
.to-pink-500 {  --gradient-to: var(--pink-500) !important; }
.bg-clip-text {  -webkit-background-clip: text;  background-clip: text; }
.text-transparent { color: transparent; }

.bg-gradient-to-b.from-purple-50.to-white {background: linear-gradient(180deg, var(--purple-50) 0%, #ffffff 100%) !important;
    background: linear-gradient(180deg, #faf5ff 0%, #ffffff 100%) !important;}

/* Garante que o fundo não seja sobrescrito */
.bg-gradient-to-b {
    background-attachment: scroll;}

/* Custom Utilities */
.object-cover { object-fit: cover; }
.min-h-screen { min-height: 100vh; }

/* Bootstrap Overrides */
.btn-primary {
    background-color: var(--purple-700);
    border-color: var(--purple-700);}
.btn-primary:hover {
    background-color: var(--purple-800);
    border-color: var(--purple-800);}

.btn-outline-purple {
        color: var(--purple-700);
        border: 2px solid var(--purple-100);
        background: transparent;
        transition: all 0.3s ease;    }

    .btn-outline-purple:hover {
        background: var(--purple-50);
        border-color: var(--purple-700);
        color: var(--purple-700);    }

    .hover-lift:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;    }

.plan-card {
        transition: all 0.3s ease;
        border: 1px solid #f1f5f9; /* Slate-100 */
    }
    
    /* Efeito de Hover (Flutuar) */
    .plan-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
        border-color: #e9d5ff;  }
  
    .plan-card.featured {
        border: 2px solid #a855f7;
        background-color: #fff; }

    .icon-box {
        width: 56px;
        height: 56px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin-bottom: 1rem;  }

.plan-price { font-size: 2.5rem; letter-spacing: -1px; }
.plan-period { font-size: 0.875rem; color: #94a3b8; font-weight: 500; }
.check-icon { color: #16a34a; margin-top: 3px; } 
.check-icon.purple { color: #9333ea; } 
.btn-outline-purple {color: #7e22ce; border: 1px solid #d8b4fe; background: transparent;}
.btn-outline-purple:hover { border-color: #7e22ce; background-color: #faf5ff; color: #7e22ce;}
.plan-selector {
        border: 2px solid #e2e8f0; /* Slate-200 */
        cursor: pointer;
        transition: all 0.2s ease;
        height: 100%; /* Garante altura igual */
        background-color: #fff;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    
    /* Efeito ao passar o mouse */
    .plan-selector:hover {
        border-color: #d8b4fe; /* Purple-300 */
        transform: translateY(-2px);
    }

    /* Estado Selecionado (Borda Roxa + Fundo Claro) */
    .plan-selector:has(input:checked) {
        border-color: #9333ea; /* Purple-600 */
        background-color: #faf5ff; /* Purple-50 */
        box-shadow: 0 10px 15px -3px rgba(147, 51, 234, 0.1);
    }

    /* Esconde a bolinha padrão do Radio para ficar mais limpo (opcional) */
    /* Se quiser manter a bolinha, remova este bloco */
    .plan-selector input[type="radio"] {
        accent-color: #9333ea;
        transform: scale(1.2);
        margin-bottom: 10px;
    }

    /* Ícone Circular */
    .plan-icon-circle {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: #f1f5f9; /* Slate-100 */
        color: #64748b; /* Slate-500 */
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
        transition: all 0.2s;
    }

    /* Ícone fica roxo quando selecionado */
    .plan-selector:has(input:checked) .plan-icon-circle {
        background-color: #e9d5ff; /* Purple-200 */
        color: #7e22ce; /* Purple-700 */
    }



a { text-decoration: none; }

/* Cadastro Page Styles */
.step-content { display: none; }
.step-content.active { display: block; }
.role-card { cursor: pointer; border: 2px solid var(--slate-100); }
.role-card:hover { border-color: var(--slate-200); }
.role-card.selected.client { border-color: var(--purple-600); background-color: var(--purple-50); }
.role-card.selected.driver { border-color: var(--pink-600); background-color: var(--pink-50); }

.need-card { cursor: pointer; border: 2px solid var(--slate-100); transition: all 0.2s; }
.need-card:hover { border-color: var(--purple-100); }
.need-card.selected { border-color: var(--purple-600); background-color: var(--purple-50); }