/* --- Perfil de Peritos (show.blade.php) --- */

/* Container dos cards, sobrepondo o hero */
.profile-cards {
    margin-top: -70px; /* invade o hero */
    position: relative;
    z-index: 10;
}

/* Card base */
.profile-card {
    border-radius: 1rem;
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    background: #fff;
    padding: 2rem;
    margin-bottom: 2rem;
}

.profile-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}

/* Cabeçalhos dos cards */
.profile-section h4 {
    font-weight: 600;
    margin-bottom: 1rem;
    border-left: 4px solid #0d6efd;
    padding-left: .6rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.profile-section h4 i {
    color: #0d6efd;
}

/* Ícones de cabeçalho (badge redonda) */
.profile-section h4 .badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
}

/* Subáreas dentro de Áreas */
.subarea-list {
    margin-left: 1.5rem;
    font-size: .9rem;
    list-style: none;
    padding-left: 0;
}
.subarea-list li {
    margin-bottom: .25rem;
}

/* Badges de áreas extras (se você usar no futuro) */
.badge-area {
    margin: .2rem;
    font-size: .85rem;
}

.subarea-list {
    margin-left: 1.5rem;
    font-size: .9rem;
}


.wizard-step {
    display: none; /* todos escondidos por padrão */
  }
  .wizard-step.active {
    display: block;
  }

  

  /* Corrige altura e borda do Select2 para ficar igual ao Bootstrap */
.select2-container .select2-selection--single {
    height: calc(2.5rem + 2px) !important; /* mesma altura do .form-control */
    border: 1px solid #ced4da !important;
    border-radius: .375rem !important;
    padding: .375rem .75rem !important;
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #212529 !important;
    line-height: 1.5 !important;
    padding-left: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: .75rem !important;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection{
    box-shadow: none!important;
}
/* Estado normal do Select2 */
.select2-container--bootstrap-5 .select2-selection {
    border: 1px solid #ced4da; /* cinza padrão */
    border-radius: 0.375rem;
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    transition: border-color 0.2s ease-in-out;
    box-shadow: none !important; /* remove qualquer sombra */
}

/* Estado focado ou aberto */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #198754 !important; /* verde padrão bootstrap */
    box-shadow: none !important;      /* sem sombra */
}

/* Campo interno do Select2 (busca dentro do dropdown) */
.select2-container--bootstrap-5 .select2-search__field {
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease-in-out;
    width: 100% !important;
}

/* Quando o usuário digita / foca */
.select2-container--bootstrap-5 .select2-search__field:focus {
    border-color: #198754 !important; /* verde bootstrap */
    box-shadow: none !important;
}



/* Remove o azul feio padrão */
.form-control:focus,
.form-select:focus,
.select2-container--bootstrap-5 .select2-selection:focus {
    border-color: #0d6efd; /* Azul Bootstrap mais discreto */
    box-shadow:none!important; /* sombra leve */
    outline: none;
    transition: all 0.2s ease-in-out; /* transição suave */
}

/* Se quiser um verde no foco (ex: combinar com botão "Sou Perito") */
.form-control:focus,
.form-select:focus,
.select2-container--bootstrap-5 .select2-selection:focus {
    border-color: #198754; /* Verde Bootstrap */
    box-shadow:none!important;
}


.form-control:focus,
.form-check-input:focus {
    border-color: #0d6efd; /* azul bootstrap */
    outline: none;
    box-shadow: none!important; /* remove o azul estourado */
    transition: border-color 0.2s ease-in-out;
}