/* Styles moved from minicurso/cefet-rj-0826/index.html */

/* intl-tel-input overrides to match site inputs */
.intl-tel-input { width: 100%; position: relative; }
.intl-tel-input .iti__flag-container { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); z-index: 3; display:flex; align-items:center; gap:6px; min-width:44px; }
.intl-tel-input .iti__selected-dial-code { margin-left: 4px; margin-right: 6px; color: var(--text-primary); font-weight:500; min-width:28px; display:inline-block; text-align:left; }
.intl-tel-input .iti__flag { width:16px; height:12px; }

/* Stronger overrides to ensure styles apply over intl-tel-input defaults */
.intl-tel-input { position: relative !important; }
.intl-tel-input .iti__flag-container { left: 6px !important; gap:4px !important; min-width:28px !important; z-index: 8 !important; }
.intl-tel-input .iti__flag { width:16px !important; height:12px !important; }
.intl-tel-input .iti__selected-dial-code { position: absolute !important; left: 30px !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 9 !important; margin: 0 !important; padding: 0 4px !important; min-width:20px !important; }
.intl-tel-input input#phone { padding-left: 40px !important; }
.iti__country-list { z-index: 3000 !important; }

/* Improve dropdown and selected flag appearance to match site theme */
.iti { font-family: var(--font-sans); }
.iti__selected-flag { display: flex !important; align-items: center !important; gap: 6px !important; }
.iti__selected-flag .iti__flag { box-shadow: none !important; }
.iti__selected-dial-code { color: var(--text-secondary) !important; font-weight:600 !important; }
.iti__country-list, .iti__country { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border: 1px solid rgba(255,255,255,0.04) !important; }
.iti__country:hover { background: rgba(255,255,255,0.02) !important; }
.iti__country .iti__dial-code { color: var(--text-secondary) !important; }
.iti__country .iti__flag { width:18px !important; height:12px !important; }
.iti__country-list { box-shadow: 0 8px 30px rgba(0,0,0,0.6) !important; max-width: 420px !important; }

/* Ensure placeholder doesn't overlap dial code on some browsers */
input#phone::-webkit-input-placeholder { opacity: 0.9; }
input#phone::placeholder { opacity: 0.9; }

/* ensure the dropdown list matches site's z-index and readable size */
.iti__country-list { max-height: 260px; overflow:auto; font-size: 0.95rem; }

/* remove default outline mismatch and match input style */
.intl-tel-input input { background: transparent; color: inherit; border-radius: 8px; }

/* small screens adjust padding */
@media (max-width: 480px) {
	#phone { padding-left: 56px; }
	.intl-tel-input .iti__flag { width:18px; height:12px; }
}

/* Form-row layout for side-by-side inputs */
.form-group-row { display:flex; gap:8px; align-items:flex-start; }
.form-group-row .form-group { margin:0; }
.form-group-row .form-group.email { flex: 0.65; }
.form-group-row .form-group.phone { flex: 0.35; }

/* Phone input: more left padding to fit 3-digit dial codes */
#phone { padding-left: 72px; }

/* Stronger overrides and final positioning */
.intl-tel-input { position: relative !important; }
.intl-tel-input .iti__flag-container { left: 6px !important; gap:4px !important; min-width:38px !important; z-index: 8 !important; }
.intl-tel-input .iti__flag { width:16px !important; height:12px !important; }
.intl-tel-input .iti__selected-dial-code { position: absolute !important; left: 36px !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 9 !important; margin: 0 !important; padding: 0 4px !important; min-width:22px !important; }
.intl-tel-input input#phone { padding-left: 72px !important; }

/* Final dropdown styles */
.iti { font-family: var(--font-sans); }
.iti__selected-flag { display: flex !important; align-items: center !important; gap: 6px !important; }
.iti__selected-flag .iti__flag { box-shadow: none !important; }
.iti__selected-dial-code { color: var(--text-secondary) !important; font-weight:600 !important; }
.iti__country-list, .iti__country { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border: 1px solid rgba(255,255,255,0.04) !important; }
.iti__country:hover { background: rgba(255,255,255,0.02) !important; }
.iti__country .iti__dial-code { color: var(--text-secondary) !important; }
.iti__country .iti__flag { width:18px !important; height:12px !important; }
.iti__country-list { box-shadow: 0 8px 30px rgba(0,0,0,0.6) !important; max-width: 420px !important; }

/* Ensure dropdown above everything */
.iti__country-list { z-index: 3000 !important; }

/* placeholder visibility */
input#phone::-webkit-input-placeholder { opacity: 0.9; }
input#phone::placeholder { opacity: 0.9; }

/* Fallback small adjustments */
@media (max-width: 480px) {
	#phone { padding-left: 56px !important; }
	.intl-tel-input .iti__flag { width:18px !important; height:12px !important; }
}

/* Header/nav overrides for this page: ensure logo is above nav and nav not positioned over logo */
.header .nav-menu {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	transform: none !important;
	z-index: 120 !important;
}

.partner-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: default;
}

.partner-text {
	font-size: 0.95rem;
	color: var(--text-secondary);
}

.partner-logo {
	display: block;
	height: 75px;
	width: auto;
	max-width: 270px;
	object-fit: contain;
	filter: brightness(1.02);
}

.header .logo, .header .logo-img { position: relative; z-index: 130; }

/* Aproximar nav da logo nesta página e manter CTA à direita */
.header .header-container {
	justify-content: flex-start !important;
	gap: 20px !important;
}
.header .nav-menu {
	margin-left: 8px !important;
}
.header .header-actions { margin-left: auto !important; }

@media (max-width: 768px) {
	.header .header-container {
		gap: 12px !important;
		padding: 0 16px;
	}

	.header .nav-menu {
		margin-left: 0 !important;
		flex: 1;
		min-width: 0;
	}

	.partner-nav-link {
		gap: 6px;
		justify-content: center;
		width: 100%;
	}

	.partner-text {
		display: none;
	}

	.partner-logo {
		height: 48px;
		max-width: 150px;
	}
}

/* Local page layout tweaks moved from inline styles */
.hero-badges { margin-top: 18px; display:flex; gap:12px; flex-wrap:wrap; }
.hero-actions { margin-top: 28px; }
.steps { margin-top: 24px; }
.program-grid { display:grid; gap:18px; margin-top:18px; max-width:900px; }
.speakers-grid { display:flex; gap:20px; flex-wrap:wrap; margin-top:18px; }
.speakers-grid { display:flex; gap:20px; flex-wrap:wrap; margin-top:18px; }
.speakers-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:20px; }
.speakers-grid .card { flex:1 1 260px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid var(--border-color); padding:18px; border-radius:12px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.speakers-grid .card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,0,0,0.5); }
.speakers-grid .card .speaker-avatar { width:72px; height:72px; border-radius:12px; background: linear-gradient(135deg, rgba(var(--primary-rgb),0.06), rgba(var(--secondary-rgb),0.03)); display:inline-block; flex:0 0 72px; background-size:cover; background-position:center; margin-bottom:8px; }
.speakers-grid .card .speaker-meta { display:flex; flex-direction:column; gap:6px; }
.speakers-grid .card .speaker-name { font-size:1.12rem; font-weight:800; color:var(--text-primary); margin:0 0 4px 0; }
.speakers-grid .card .text-muted { color:var(--text-secondary); font-size:0.95rem; margin:0 0 8px 0; }
.speakers-grid .card .speaker-desc { margin:0; color:var(--text-muted); font-size:0.98rem; line-height:1.5; }

/* Ensure order: name -> role -> summary */
.speakers-grid .card .speaker-name { order: 1; }
.speakers-grid .card .text-muted { order: 2; }
.speakers-grid .card .speaker-desc { order: 3; }
.speaker-name { font-weight:700; }
.speaker-desc { margin-top:8px; }

/* Button hover layering fixes (page-specific) */
.btn { z-index: 1 !important; position: relative !important; }
/* force pseudo-elements behind the button content on this page */
.btn-primary::before, .btn-secondary::before {
	z-index: -1 !important;
	pointer-events: none;
}
.btn * { position: relative; z-index: 2; }

/* ==========================================================================
   Novo Design do Cronograma (Visual Moderno e Responsivo)
   ========================================================================== */

.agenda-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 40px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Card de cada semana */
.agenda-day {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.005));
    border: 1px solid var(--border-color);
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.agenda-day:hover {
    border-color: rgba(var(--primary-rgb), 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Cabeçalho do Card (Semana e Carga Horária) */
.agenda-day-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 16px;
}

@media (min-width: 640px) {
    .agenda-day-header {
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }
}

/* Badge de Carga Horária */
.agenda-date {
    background: rgba(var(--primary-rgb), 0.1);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
    text-align: center;
    align-self: flex-start;
    min-width: auto; /* Remove o limite antigo */
}

.agenda-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}

.agenda-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Linhas de conteúdo interno */
.agenda-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.02);
    padding: 16px;
    border-radius: 10px;
    transition: background 0.2s ease;
}

.agenda-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* No desktop, a tag fica ao lado do texto de forma harmônica */
@media (min-width: 768px) {
    .agenda-item {
        flex-direction: row;
        align-items: flex-start;
        gap: 24px;
    }
}

/* As novas Tags de Contexto (antigo agenda-time) */
.agenda-time {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 12px;
    border-radius: 6px;
    text-align: center;
    min-width: 110px; /* Espaço ideal para palavras como CONCEITOS e QUALIDADE */
    display: inline-block;
    flex-shrink: 0;
    align-self: flex-start;
}

.agenda-content {
    flex: 1;
}

.agenda-content h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.agenda-content p {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ==========================================================================
   Ajuste dos Blocos de Abordagem (Seção "O que você vai aprender")
   ========================================================================== */

/* Substitui a grade de 4 colunas original por uma grade de 3 colunas perfeitamente centralizada */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Força exatamente 3 colunas iguais */
    gap: 24px;
    max-width: 1100px; /* Limita a largura para ficar elegante no desktop */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 40px;
}

/* Responsividade: Transforma em 1 ou 2 colunas dependendo do tamanho da tela */
@media (max-width: 900px) {
    .steps {
        /* No tablet, se não couber 3, ele empilha de forma inteligente */
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    }
}

@media (max-width: 600px) {
    .steps {
        /* No celular, fica 1 bloco por linha */
        grid-template-columns: 1fr; 
    }
}

/* Garante que o texto dentro dos cards fique bem alinhado (opcional, mas fica lindo) */
.steps .step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* ==========================================================================
   Ajuste das Badges do Topo (Hero Badges)
   ========================================================================== */

.hero-badges {
    gap: 0px 8px !important; /* Reduz o espaço entre elas (6px vertical, 8px horizontal) */
    
    /* Se o seu topo (Hero) for alinhado à esquerda, use flex-start. 
       Se o seu topo for centralizado, mude para: justify-content: center; */
    justify-content: flex-start; 
}

/* Garante que as badges individuais não tentem esticar para ocupar a tela toda */
.hero-badges > * {
    flex: 0 1 auto !important;
}

/* ==========================================================================
   Integração dos Pré-requisitos na Seção do Formulário
   ========================================================================== */

.registration-requirements {
    margin-top: 28px;
}

.registration-requirements h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
}

/* Checklist customizado */
.form-left .prereq-checklist {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 28px 0 !important;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-left .prereq-checklist li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

/* Badge de validação (visto verde) */
.form-left .check-box {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #10b981;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 2px 8px;
    border-radius: 6px;
    flex-shrink: 0;
    margin-top: 2px;
}

.form-left .prereq-checklist p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.98rem;
    line-height: 1.5;
}

.form-left .prereq-checklist strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Caixa de aviso sobre homologação */
.form-left .info-alert {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    padding: 16px;
    border-radius: 10px;
    font-size: 0.90rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ==========================================================================
   Ajuste de Grid de Campos do Formulário (Lado a Lado)
   ========================================================================== */

/* Container para agrupar campos na mesma linha */
.form-row {
    display: flex;
    gap: 16px;
    width: 100%;
    margin-bottom: 0px; /* Evita espaçamento duplo com o form-group interno */
}

/* Garante que os campos dentro da linha ocupem o espaço disponível */
.form-row .form-group {
    flex: 1;
    width: 100%;
}

/* Alinhamento por baixo para linhas que misturam inputs e selects */
.form-row.align-end {
    align-items: flex-end;
}

/* Proporções customizadas de largura */
.form-row .flex-30 { flex: 0 0 calc(30% - 12px); }
.form-row .flex-40 { flex: 0 0 calc(40% - 12px); }
.form-row .flex-60 { flex: 0 0 calc(60% - 12px); }
.form-row .flex-70 { flex: 0 0 calc(70% - 12px); }

/* Responsividade: No celular (telas menores que 640px), tudo volta a ser uma coluna só */
@media (max-width: 640px) {
    .form-row {
        flex-direction: column;
        gap: 16px; /* Mantém o espaçamento vertical padrão entre os campos */
    }
    
    .form-row .flex-30,
    .form-row .flex-40,
    .form-row .flex-60,
    .form-row .flex-70 {
        flex: 1 1 100%;
    }
}
/* Novas proporções para acomodar o telefone e o curso com folga */
.form-row .flex-55 { flex: 0 0 calc(55% - 12px); }
.form-row .flex-45 { flex: 0 0 calc(45% - 12px); }
.form-row .flex-65 { flex: 0 0 calc(65% - 12px); }
.form-row .flex-35 { flex: 0 0 calc(35% - 12px); }

/* Atualize também o bloco de responsividade mobile para incluir as novas classes */
@media (max-width: 640px) {
    .form-row .flex-35,
    .form-row .flex-45,
    .form-row .flex-55,
    .form-row .flex-65 {
        flex: 1 1 100% !important;
    }
}

/* ==========================================================================
   Estilização dos Botões de Rádio (Banco de Dados)
   ========================================================================== */

.radio-group-container {
    display: flex;
    flex-direction: column;
    gap: 10px !important;
}

/* Label principal da pergunta */
.radio-main-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Container que coloca o Sim e o Não lado a lado */
.radio-options {
    display: flex;
    gap: 24px; /* Espaço largo entre a opção Sim e Não */
    padding: 4px 0;
}

/* Cada opção individual (Bolinha + Texto) */
.radio-item {
    display: flex;
    align-items: center;
    gap: 8px; /* Espaço entre a bolinha e a palavra */
    cursor: pointer;
}

/* Estilização da bolinha do rádio */
.radio-item input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: rgba(var(--primary-rgb), 1); /* Usa a cor principal do site automaticamente */
    margin: 0;
    cursor: pointer;
}

/* Texto das opções (Sim / Não) */
.radio-item label {
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

/* ==========================================================================
   Card de Sucesso (Exibido após o envio do Formulário)
   ========================================================================== */

.success-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px;
    gap: 16px;
    animation: cardFadeIn 0.4s ease-out forwards;
}

.success-icon {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 8px;
}

.success-card h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}

.success-card p {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

.success-card p strong {
    color: var(--text-primary);
}

.success-card .text-muted {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-top: 8px;
}

/* Animação suave de surgimento */
@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ==========================================================================
   Seção de Recrutamento
   ========================================================================== */

.opportunity-highlight {
	margin-top: 48px;
	background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.12), rgba(var(--secondary-rgb), 0.08));
	border: 2px solid rgba(var(--primary-rgb), 0.25);
	border-radius: 20px;
	padding: 48px;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
}

.recruitment-focus {
	background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15), rgba(var(--secondary-rgb), 0.1)) !important;
	border: 2px solid rgba(var(--primary-rgb), 0.3) !important;
}

.highlight-content {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.highlight-header {
	display: flex;
	align-items: center;
	gap: 16px;
}

.highlight-header i {
	font-size: 2.4rem;
	color: var(--primary);
	flex-shrink: 0;
}

.opportunity-highlight h3 {
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--text-primary);
	margin: 0;
}

.highlight-header h3 {
	margin: 0;
	flex: 1;
}

.opportunity-highlight p {
	color: var(--text-secondary);
	font-size: 1.05rem;
	line-height: 1.8;
	margin: 0;
}

.recruitment-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.recruitment-list li {
	color: var(--text-secondary);
	font-size: 1rem;
	line-height: 1.6;
	padding-left: 28px;
	position: relative;
}

.recruitment-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	background: var(--primary);
	border-radius: 50%;
}

.recruitment-list li strong {
	color: var(--text-primary);
	font-weight: 700;
}

@media (max-width: 768px) {
	.opportunity-highlight {
		padding: 32px 24px;
		border-radius: 16px;
	}

	.highlight-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.highlight-header i {
		font-size: 2rem;
	}

	.opportunity-highlight h3 {
		font-size: 1.3rem;
	}

	.opportunity-highlight p {
		font-size: 0.95rem;
	}
}

@media (max-width: 480px) {
	.opportunity-highlight {
		padding: 24px 16px;
	}

	.opportunity-highlight h3 {
		font-size: 1.1rem;
	}

	.recruitment-list li {
		font-size: 0.9rem;
		padding-left: 24px;
	}
}