/**
 * Cursos de Extensão — modal de inscrição
 * Escopo: carregado apenas em template-cursos-de-extensao.php
 *
 * Reaproveita o fluxo de extensão da Inscrição Rápida (filtro via API + form),
 * então a maior parte do estilo vem de style.css (global). Aqui só ajustamos
 * o que é específico do contexto de modal nesta página.
 */

/* O banner de cookies tem z-index 2000 e cobriria o modal (backdrop 1040 / modal 1050).
   Rebaixamos o banner para abaixo do backdrop do Bootstrap, preservando o
   empilhamento nativo dos modais (importante para o modal de pagamento aninhado). */
.nk-cookie-banner {
    z-index: 1030 !important;
}

/* ---------------------------------------------------------------------------
   CTA que abre o modal (seção do catálogo)
   O rótulo é longo; sem restrição, o inline-block cresce até "max-content" e
   estoura a tela no mobile. Limitamos à largura da coluna e permitimos quebra.
--------------------------------------------------------------------------- */
#btn-open-extension-subscribe {
    max-width: 100%;
    white-space: normal;
    font-weight: 700;
    letter-spacing: .3px;
}

@media (max-width: 575.98px) {
    #btn-open-extension-subscribe {
        display: block;
        width: 100%;
        letter-spacing: 0;
    }
}

/* ---------------------------------------------------------------------------
   Filtro (Unidade -> Curso -> Categoria) dentro do modal
--------------------------------------------------------------------------- */

/* Na landing, cada bloco .subscription-filters fica display:none e é revelado
   via JS ao trocar de aba. Aqui não há abas, então exibimos o filtro sempre.
   (O .grid-form-subscription continua oculto até a categoria ser escolhida.) */
#extension-subscribe-modal #filter-extension {
    display: block;
}

/* Centralizado e sempre dentro do modal. min-width:0 nas colunas corrige o
   overflow clássico de flex item (min-width:auto) quando a opção selecionada
   do <select> tem texto longo. */
#extension-subscribe-modal .subscription-filters .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0;
}

#extension-subscribe-modal .subscription-filters .col {
    flex: 1 1 200px;
    min-width: 0;
    max-width: 100%;
    width: auto;
    padding: 0;
}

#extension-subscribe-modal .subscription-filters .custom-select {
    width: 100%;
    max-width: 100%;
}

/* No mobile os três selects ocupam a largura total, empilhados. */
@media (max-width: 575.98px) {
    #extension-subscribe-modal .subscription-filters .col {
        flex: 1 1 100%;
    }
}

/* ---------------------------------------------------------------------------
   Espaçamento do bloco de curso + formulário dentro do modal
--------------------------------------------------------------------------- */
#extension-subscribe-modal .grid-form-subscription {
    margin: 20px 0 0;
}

#extension-subscribe-modal .modal-body {
    padding: 20px 24px 28px;
}