/* ===== PÁGINA SOBRE - ESTILOS ESPECÍFICOS ===== */

/* Hero da página Sobre*/
.hero-sobre {
    position: relative;
    padding: clamp(40px, 2vw, 80px) 0 40px;
    /* Reduzido o padding */
    color: #fff;
    background: url("../img/banner-azul.png") center center / cover no-repeat;
    overflow: hidden;
}

.hero-sobre-noise {
    position: absolute;
    inset: 0;
    opacity: .06;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='2' cy='2' r='1' fill='white'/%3E%3C/svg%3E");
    background-size: 80px 80px;
}

/* Breadcrumb Navigation - Versão discreta */
.breadcrumb-custom {
    margin-top: 2rem;
    padding-bottom: 1.5rem;
}

.breadcrumb {
    background: transparent;
    backdrop-filter: none;
    border: none;
    padding: 0;
    margin: 0;
    justify-content: center;
}

.breadcrumb-item a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
    font-weight: 400;
    font-size: 0.9rem;
}

.breadcrumb-item a:hover {
    color: white;
}

.breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5);
    content: "›";
    padding: 0 0.5rem;
    font-size: 1rem;
}

/* Ajuste para mobile */
@media (max-width: 768px) {
    .breadcrumb-custom {
        margin-top: 1.5rem;
        padding-bottom: 1rem;
    }

    .breadcrumb-item a,
    .breadcrumb-item.active {
        font-size: 0.85rem;
    }

    .breadcrumb-item+.breadcrumb-item::before {
        padding: 0 0.35rem;
    }
}

/* Seções da página Sobre */
.section-sobre {
    background: #ffffff;
}

/* Container de imagem com efeito glass */
.sobre-img-container {
    position: relative;
}

.sobre-img-glass {
    backdrop-filter: blur(10px);
    border-radius: 1.2rem;
}

.sobre-img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Cards de passos */
.passo-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
    border: 1px solid rgba(13, 92, 151, 0.1);
    border-radius: 1.2rem;
    box-shadow: 0 6px 22px rgba(3, 30, 66, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.passo-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 36px rgba(3, 30, 66, 0.15);
}

.passo-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--cria-blue), var(--cria-blue-dark));
    color: white;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(19, 111, 189, 0.3);
}

/* CTA Final */
.cta-final {
    max-width: 700px;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 255, 0.8) 100%);
    border: 1px solid rgba(13, 92, 151, 0.15);
    box-shadow: 0 12px 36px rgba(3, 30, 66, 0.12);
    position: relative;
    overflow: hidden;
}

/* Animações específicas para a página Sobre */
[data-animate="fade-right"] {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate="fade-left"] {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate].in-view {
    opacity: 1;
    transform: none;
}

/* Responsividade para a página Sobre */
@media (max-width: 768px) {
    .hero-sobre {
        padding: 60px 0 30px;
    }

    .sobre-img-glass {
        padding: 0.5rem;
    }

    .passo-card {
        margin-bottom: 1.5rem;
    }

    .cta-final {
        margin: 0 1rem;
    }

    .breadcrumb {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
}

/* Melhorias de tipografia para a página Sobre */
.section-sobre .heading-section {
    color: var(--cria-deep);
    margin-bottom: 1.5rem;
}

.section-sobre .text-muted-foreground {
    color: #668599 !important;
    line-height: 1.7;
}

/* ===== PÁGINA CADASTRO - ESTILOS ESPECÍFICOS ===== */

/* Hero da página Cadastro */
.hero-cadastro {
    position: relative;
    padding: clamp(40px, 2vw, 80px) 0 40px;
    color: #fff;
   background: url("../img/banner-azul.png") center center / cover no-repeat;
    overflow: hidden;
}

.hero-cadastro-noise {
    position: absolute;
    inset: 0;
    opacity: .06;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='2' cy='2' r='1' fill='white'/%3E%3C/svg%3E");
    background-size: 80px 80px;
}

/* Seção de Cadastro */
.section-cadastro {
    background: #f6f9fc;
}

/* Card do formulário */
.formulario-glass {
    background: linear-gradient(180deg, var(--glass-bg), rgba(255, 255, 255, .64));
    border: 1px solid var(--glass-brd);
    box-shadow: var(--shadow-md);
    border-radius: 1.5rem;
}

/* Campos do formulário (base unificada com Choices) */
.form-control-custom,
.form-select-custom {
    border-radius: 0.75rem;
    border: 1.5px solid rgba(13, 92, 151, 0.15);
    background: rgba(255, 255, 255, 0.9);
    padding: 0.6rem 1rem;
    /* mesma altura da .choices__inner */
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(13, 92, 151, 0.08);
    line-height: 1.4;
}

/* Foco igual para inputs e selects */
.form-control-custom:focus,
.form-select-custom:focus {
    border-color: var(--cria-blue);
    box-shadow: 0 0 0 3px rgba(19, 111, 189, 0.15), 0 4px 12px rgba(13, 92, 151, 0.1);
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
    outline: 0;
}

/* Labels do formulário */
.form-label {
    color: #002F4D;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

/* Responsividade para o formulário */
@media (max-width: 768px) {
    .formulario-glass .card-body {
        padding: 1.5rem !important;
    }

    .form-control-custom,
    .form-select-custom {
        padding: 0.55rem 0.85rem;
        font-size: 0.95rem;
    }
}

/* Modal responsável ajustado */
#responsavelModal .modal-dialog {
    max-width: 600px;
}

#responsavelModal .login-modal-content {
    max-width: 100%;
}

#responsavelModal .login-input {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

#responsavelModal .login-input:focus {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.5);
}

/* =========================
   AJUSTES ADICIONAIS — Choices
   ========================= */

/* 1) SELECTS COM CHOICES.JS — aparência idêntica aos inputs */
.choices,
.choices__inner {
    border-radius: 0.75rem !important;
    border: 1.5px solid rgba(13, 92, 151, 0.15) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 2px 8px rgba(13, 92, 151, 0.08) !important;
    padding: 0 !important;
    min-height: auto !important;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
}

.choices__inner {
    padding: 0.6rem 1rem !important;
    /* mesma altura dos inputs */
}

/* Texto/placeholder */
.choices__placeholder {
    opacity: .75 !important;
    color: #6b7d8f !important;
}

/* Foco — igual aos inputs */
.is-focused .choices__inner,
.is-open .choices__inner {
    border-color: var(--cria-blue) !important;
    box-shadow: 0 0 0 3px rgba(19, 111, 189, .15), 0 4px 12px rgba(13, 92, 151, .1) !important;
    background: rgba(255, 255, 255, .95) !important;
    transform: translateY(-1px);
}

/* Dropdown */
.choices__list--dropdown {
    border: 1px solid rgba(13, 92, 151, 0.15) !important;
    border-radius: 0.85rem !important;
    box-shadow: 0 18px 40px rgba(3, 30, 66, .18) !important;
    overflow: hidden;
    padding: .4rem !important;
}

/* Itens */
.choices__list--dropdown .choices__item--selectable {
    border-radius: .7rem;
    padding: .65rem .9rem !important;
    margin: .15rem 0;
}

/* Hover */
.choices__list--dropdown .choices__item--selectable:hover {
    background: rgba(19, 111, 189, .08);
}

/* Destaque/selecionado — laranja (como no print) */
.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: #e98a10 !important;
    color: #fff !important;
}

/* Seta do select */
.choices[data-type*="select-one"]::after {
    border: none !important;
    content: "▾";
    width: auto;
    height: auto;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #136fbd;
    font-size: 1.1rem;
}

/* Remove borda superior padrão do dropdown */
.choices__list--dropdown .choices__list {
    border: 0 !important;
}

/* Single selection spacing */
.choices__list--single {
    padding: 0 !important;
}

/* Responsivo */
@media (max-width: 768px) {
    .choices__inner {
        padding: .55rem .85rem !important;
        font-size: .95rem;
    }
}

/* 2) BADGE FLUTUANTE (pata +) — canto ESQUERDO, não clicável */
.form-badge {
    position: absolute;
    top: .85rem;
    left: .85rem;
    /* lado esquerdo */
    right: auto;
    border: 0;
    background: transparent;
    padding: 0;
    line-height: 1;
    pointer-events: none;
    /* não interage */
    user-select: none;
    cursor: default;
}

.badge-paw {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cria-blue), var(--cria-blue-dark));
    color: #fff;
    box-shadow: 0 10px 24px rgba(3, 30, 66, .18);
    transition: transform .15s ease, box-shadow .15s ease;
}

.badge-paw .fa-paw {
    font-size: 20px;
}

.badge-plus {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e98a10;
    color: #fff;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

/* Animação visual suave quando o CARD recebe hover (badge acompanha) */
.formulario-glass:hover .badge-paw {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 14px 32px rgba(3, 30, 66, .22);
}

/* === Choices no MODAL: fechado = igual .login-input | aberto = dropdown branco === */

/* FECHADO (mesma “pele” dos inputs do modal) */
#responsavelModal .choices,
#responsavelModal .choices__inner {
    border-radius: .75rem !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    background: rgba(255, 255, 255, .12) !important;
    /* igual .login-input */
    box-shadow: none !important;
    color: #fff !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#responsavelModal .choices__inner {
    padding: .6rem 1rem !important;
    /* altura equivalente aos inputs do modal */
    min-height: auto !important;
    line-height: 1.4 !important;
    font-size: 1rem !important;
}

#responsavelModal .choices__placeholder {
    color: rgba(255, 255, 255, .75) !important;
    opacity: 1 !important;
}

#responsavelModal .choices__list--single .choices__item {
    color: #fff !important;
    padding:6px;
}

/* foco no FECHADO */
#responsavelModal .is-focused .choices__inner,
#responsavelModal .is-open .choices__inner {
    border-color: rgba(255, 255, 255, .55) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .15) !important;
    background: rgba(255, 255, 255, .18) !important;
    /* escuro+ */
    transform: translateY(-1px);
}

/* seta branca para contrastar no fechado */
#responsavelModal .choices[data-type*="select-one"]::after {
    border: none !important;
    content: "▾";
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #fff !important;
    font-size: 1.1rem;
}

/* ABERTO (DROPDOWN) — BRANCO */
#responsavelModal .choices__list--dropdown {
    background: #fff !important;
    /* sem azul escuro */
    border: 1px solid rgba(13, 92, 151, .15) !important;
    border-radius: .85rem !important;
    box-shadow: 0 18px 40px rgba(3, 30, 66, .18) !important;
    padding: .4rem !important;
}

#responsavelModal .choices__list--dropdown .choices__item--selectable {
    color: #002F4D !important;
    border-radius: .7rem;
    padding: .65rem .9rem !important;
    margin: .15rem 0;
}

#responsavelModal .choices__list--dropdown .choices__item--selectable:hover {
    background: rgba(19, 111, 189, .08) !important;
}

#responsavelModal .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: #e98a10 !important;
    /* laranja do destaque */
    color: #fff !important;
}

/* remove qualquer borda interna padrão do choices */
#responsavelModal .choices__list--dropdown .choices__list {
    border: 0 !important;
}

#responsavelModal .choices__list--single {
    padding: 0 !important;
}

/* Efeito de entrada: sobe levinho + fade */
[data-animate="fade-up"] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

/* Quando entrar na viewport */
[data-animate].in-view {
  opacity: 1;
  transform: none;
}


/*Pagina Cadastro*/

/* ===== HERO CADASTRO: corrigir overlay azul e camadas ===== */
.hero-cadastro {
  position: relative;
  overflow: hidden;
}

/* O overlay fica por baixo e não recebe cliques */
.hero-cadastro-noise {
  position: absolute;
  inset: 0;
  z-index: 0;                /* abaixo do conteúdo */
  pointer-events: none;      /* nunca intercepta cliques */
  /* ajuste a opacidade conforme seu tema */
  background: radial-gradient(1200px 400px at 10% -10%, rgba(255,255,255,0.12), transparent 70%),
              linear-gradient(180deg, rgba(0,84,146,0.18), rgba(0,84,146,0.28));
}

/* garante que o texto e botões do hero fiquem acima do overlay */
.hero-cadastro .container {
  position: relative;
  z-index: 1;
}

/* ===== Efeitos de entrada genéricos ===== */
[data-animate] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
  will-change: opacity, transform;
}
.in-view[data-animate] {
  opacity: 1;
  transform: none;
}

/* variações simples (use com data-animate="fade-up" | "zoom-in") */
[data-animate="zoom-in"] {
  transform: scale(.96);
}
.in-view[data-animate="zoom-in"] {
  transform: scale(1);
}
/* ===== Empurrar o grupo de rádio PF/PJ para baixo ===== */
#tipoPessoaGroup {
  margin-top: 1.25rem; /* afasta da badge decorativa */
}
@media (max-width: 576px) {
  #tipoPessoaGroup { margin-top: 1rem; }
}

/* ===== Badge decorativa sem cliques ===== */
.form-badge,
.form-badge * {
  pointer-events: none;
  user-select: none;
}


/* ===== Espaço extra entre a badge e o rádio (mobile) ===== */
@media (max-width: 576px) {
  /* um pouco mais de respiro geral no topo do card */
  .formulario-glass .card-body {
    padding-top: 3rem; /* ajuste fino do topo */
  }

  /* empurra o grupo de pílulas PF/PJ mais pra baixo */
  #tipoPessoaGroup {
    margin-top: 3rem !important; /* antes estava ~1rem/1.25rem */
  }
}