/*Versão: 1.4*/

/* === Morada Minha — form-mm.css ===
   Objetivo: estilos base e específicos de formulários (inputs, selects, labels, botões).
   Observações:
   - Mantida a ordem original; adicionados comentários de seção.
*/

/* ===================== BASE FORMULÁRIOS ===================== */
label.none{
	display:none;
	}

input {
	margin: 5px 5px 5px 0px;
	border: 1px solid #bababa;
	border-radius: 6px;
    padding: 8px 20px;
	height: 40px;
    width: 150px;	
	font-size: 14px;
	}
	input.radio_opcao{
		margin: auto 15px;
	    height: 15px;
    	cursor: pointer;
		width: 15px;
		vertical-align: middle;
		}

select {
	margin: 5px;
    margin-left: 0px;
	padding: 20px;
	border-radius: 6px;
	width: 350px;
	font-size: 14px;
	color: #333333;
}

option{
	font-size: 20px;
	color: black;
}

.linha{
	border-bottom: 2px solid #e0e0e0;
    margin: 40px 0px;
	}

textarea {
    border-radius: 20px;
    padding: 20px;
    height: 150px;
    width: 400px;
    margin: 50px 0px;
	font-size: 14px;
}

/* ===================== BASE FORMULÁRIOS .FIM ===================== */


/* ===================== BOX EM .retangulo (layout de formulário) ===================== */
.retangulo #BoxForm {
	background-color: white;
	width: 40%;
	margin: 0px;
	padding: 20px 20px 80px;
	/*background:#fff;
	border:1px solid #dcdcdc;*/
	border-radius:0px;
}

.retangulo #BoxForm h1 {
	text-align: center;
	font-size: 150%;
	text-transform: uppercase;
	color: black;
	
	margin: 15px 0px;
	padding: 0px;
	}

/* Lista padrão para agrupar campos */
.retangulo #form ul li {
	list-style:none;
	position:relative;
	clear:both;
}

/* Rótulos dos campos (alinhados à esquerda) */
.retangulo #form label {
	margin:5px 5px;
	line-height:45px;
	text-align:left;
	float:left;
	color:#666;
}

/* Campos de texto e textarea padrão (cores e bordas) */
.retangulo #form input#name,.retangulo  #form input#email,.retangulo  #form input#subject,.retangulo  #form textarea {
	float:left;
	padding:15px;
	border:1px solid #CCCCCC;
	background:#fcfcfc;
	border-radius: 4px;
	color: rgba(0,51,102,1);
}
.retangulo #form input#name,.retangulo  #form input#email,.retangulo  #form input#subject {
	width: 80%;
	margin: 10px 5%;
}

.retangulo #form textarea {
	width: 84%;
	height: 100px;
	margin: 15px 0px;
	resize: vertical;
	/*resize:none; ajuste para o tamanho que você preferir*/
}

/* Estilo base de inputs (fallback) */
.retangulo #form input {
	color:#999;
	float:left;
}

/* Botão de envio (call to action) */
.retangulo #form input#send_message {
	width: 80%;
	height: auto;
	margin-top:20px;
	margin-left: 10%;
	padding: 10px 0px;
	cursor:pointer;
	font-size:13px;
	color:#fff;
	background: rgba(60,80,200,1);
	border: 0px solid #ccc;
	border-radius:0px;
}

.retangulo #form input#send_message:hover {
	color:#fff;
	background: rgba(20,40,150,1);
	border-color:#999;
}

/* ===================== BLOCO / Variações de largura ===================== */
.bloco{
	}
	.bloco h2{
		font-size: 20px;
		margin:	0px 0px 40px 0px;
		}
	
	.bloco .maior{
		width: 350px;
		}
	.bloco .mediano{
		width: 200px;
	}
	.bloco .menor{
		width: 70px;
		}
	
	.bloco .opcao{
		margin: 20px 0px;
		}
	.bloco .rotulo{
		display: inline-block;
		}


/* ===================== FORMULÁRIOS ESPECÍFICOS (Inscrição) ===================== */
.f-inscricao{
	margin: 0px;
	padding: 50px 5%;
	font-size: 14px;
	}
	
	.f-inscricao h1{
		color: gray;
		text-align: center;
		font-size: 30px;
		margin-bottom: 50px;
		}
	.f-inscricao h2{
		color: goldenrod;
		font-size: 20px;
		margin: 10px 0px;
		}
	.f-inscricao h3{
		color: gray;
		font-size: 14px;
		margin: 2px 0px;
		}
	.f-inscricao h4{
		font-size: 14px;
		color: #696969;
		margin-top: 10px;
		}
	
	/* Grade base de blocos do formulário */
	.f-inscricao .bloco {
		display: inline-block;	
		}
	.f-inscricao .bloco li {
		display: block;
		}
		.f-inscricao .bloco .lado-a-lado li{
		display: inline-block;
		}
		
		/* Linha de declaração/termos (texto longo) */
		.f-inscricao .bloco li.declaracao{
			display: flex;
			}
			.f-inscricao .bloco .declaracao h6{
				font-size: 12px;
				max-inline-size: 500px;
				}
		
		/* Botão principal da inscrição */
		.f-inscricao .bloco .botao{
			margin-left: 15%;
			border: 0px solid white;
			border-radius: 6px;
			width: 275px;
			color: azure;
			background-color: #1e90ff;
			box-shadow: 0px 1px 1px black;
			font-size: 16px;
			font-weight: bold;
			text-decoration: underline;
			cursor: pointer;
			}

	/* Área de texto complementar/observações */
	.f-inscricao .caixa-texto{
		margin: 0px;
		}

/* ===================== FORMULÁRIOS ESPECÍFICOS .FIM ===================== */


/* ===================== RESPONSIVO: MOBILE (@max-device-width: 800px) ===================== */
@media screen and (max-device-width: 800px){
	/* Ajustes de largura de select e textarea */
	select{
		width: 300px;
		}
	
	textarea{
		margin: 10px 0px;
		width: 270px;
		}
	
	/* Box principal ocupa quase toda a tela */
	.retangulo #BoxForm{
		width: 90%;
		margin: 0px 4%;
		padding: 8% 1% 16%;
		}

	/* Título do box em mobile */
	.retangulo #BoxForm h1{
		font-size: 150%;
		margin: 20px 0px;
		}

	/* Campos de texto maiores para toque */
	.retangulo #form input#name,.retangulo  #form input#email,.retangulo  #form input#subject{
		width: 80%;
		margin: 3% 7%;
		padding: 5% 3%;
		font-size: 20px;
		}

	/* Textarea maior em mobile */
	.retangulo #form textarea{
		width: 84%;
		height: 200px;
		margin: 5% 0px 10% 2%;
		padding: 3%;
		font-size: 16px;
		}

	/* Botão com fonte maior */
	.retangulo #form input#send_message{
		font-size: 20px;
		margin-top: 10px;
		}
		
	/* Larguras utilitárias adaptadas ao mobile */
	.bloco .maior{
		width: 270px;
		}
	.bloco .mediano{
		width: 170px;
	}
	.bloco .menor{
		width: 50px;
		}
			
	/* Texto de declaração com largura menor */
	.f-inscricao .bloco .declaracao h6{
		max-inline-size: 270px;
		}

	/* Botão de inscrição com margem reduzida */
	.f-inscricao .bloco .botao{
		margin-left: 10%;
		}
}

/* ===================== versao mobile .FIM ===================== */


/* =====================================================================
   INSCRIÇÃO REDESIGN — .fi-* (versão 2.0, mobile-first)
   Escopo: .f-inscricao — não afeta outros formulários
   ===================================================================== */

/* ── Wrapper geral ── */
.f-inscricao {
    padding: 32px 16px 56px;
    background: #f0f4f1;
    min-height: 200px;
}

/* ── Layout desktop (form + sidebar) ── */
.fi-layout {
    max-width: 1040px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Card do formulário ── */
.fi-form-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 32px rgba(0,0,0,.09);
    overflow: hidden;
}

/* ── Cabeçalho do card ── */
.fi-header {
    background: linear-gradient(135deg, #004aad 0%, #0066ff 100%);
    padding: 28px 28px 24px;
    color: #fff;
}
.fi-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .7;
    margin: 0 0 6px;
    font-family: inherit;
}
.fi-titulo {
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 8px;
    color: #fff;
    line-height: 1.2;
}
.fi-sub {
    font-size: 14px;
    opacity: .85;
    margin: 0;
    line-height: 1.55;
}

/* ── Seções ── */
.fi-sec {
    padding: 24px 28px;
    border-bottom: 1px solid #f1f5f9;
}
.fi-sec--last { border-bottom: none; }

.fi-sec-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.fi-sec-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #004aad;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
}
.fi-sec-nome {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
}

/* ── Grid de campos dentro de cada seção ── */
.fi-sec-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fi-campo { display: flex; flex-direction: column; }
.fi-campo--full { width: 100%; }
.fi-campo--pequeno { max-width: 120px; }

/* ── Labels ── */
.fi-lbl {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 5px;
    letter-spacing: .02em;
}
.fi-lbl em { color: #dc2626; font-style: normal; margin-left: 2px; }
.fi-lbl-hint { font-style: normal; margin-left: 4px; }

/* ── Inputs ── */
.fi-input {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    padding: 13px 14px;
    font-size: 16px; /* evita zoom iOS */
    color: #1e293b;
    background: #fcfcfc;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    height: auto;
    margin: 0;
    -webkit-appearance: none;
    font-family: inherit;
}
.fi-input:focus {
    border-color: #1a8060;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(26,128,96,.12);
}
.fi-input::placeholder { color: #94a3b8; }

/* ── Select ── */
.fi-select {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    padding: 13px 14px;
    font-size: 16px;
    color: #1e293b;
    background: #fcfcfc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    height: auto;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    font-family: inherit;
}
.fi-select:focus {
    border-color: #1a8060;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(26,128,96,.12);
}

/* ── Autorização ── */
.fi-auth {
    padding: 20px 28px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
}
.fi-auth-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}
.fi-auth-radio {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    margin: 2px 0 0 !important;
    cursor: pointer;
    accent-color: #004aad;
    flex-shrink: 0;
}
.fi-auth-txt {
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
}
.fi-auth-txt a {
    color: #004aad;
    text-decoration: underline;
}

/* ── Mensagem de erro inline ── */
.fi-erro {
    margin: 0 28px;
    padding: 12px 14px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    color: #991b1b;
    font-size: 13px;
    line-height: 1.5;
    margin-top: 8px;
}

/* ── Botão de submit ── */
.fi-submit {
    display: block;
    width: calc(100% - 56px);
    margin: 20px 28px 28px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #004aad, #0066ff);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    letter-spacing: .01em;
    box-shadow: 0 4px 20px rgba(26,92,68,.28);
    font-family: inherit;
    text-decoration: none;
}
.fi-submit:hover  { opacity: .92; }
.fi-submit:active { transform: scale(.98); }
.fi-submit:disabled { opacity: .6; cursor: not-allowed; }

/* ══ SIDEBAR ══ */
.fi-sidebar {
    display: none; /* oculta no mobile */
    flex-direction: column;
    gap: 16px;
}

.fi-sb-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.fi-sb-card--destaque {
    background: linear-gradient(135deg, #004aad, #0066ff);
    color: #fff;
}
.fi-sb-card--destaque .fi-sb-titulo { color: #fff; }

.fi-sb-titulo {
    font-size: 14px;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 12px;
}
.fi-sb-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fi-sb-lista li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255,255,255,.92);
    font-weight: 500;
}
.fi-sb-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}

.fi-sb-regioes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.fi-sb-regioes span {
    background: #eff4ff;
    color: #004aad;
    border: 1px solid #bfdbfe;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
}

.fi-sb-txt {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 14px;
    line-height: 1.5;
}
.fi-sb-wpp {
    display: block;
    text-align: center;
    padding: 12px;
    background: #16a34a;
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s;
}
.fi-sb-wpp:hover { background: #15803d; }

/* ══ DESKTOP (≥ 700px) ══ */
@media (min-width: 700px) {

    .f-inscricao { padding: 40px 24px 64px; }

    /* Layout em duas colunas */
    .fi-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 28px;
    }
    .fi-form-card { flex: 1; min-width: 0; }

    /* Sidebar visível */
    .fi-sidebar { display: flex; width: 300px; flex-shrink: 0; }

    /* Grid de 2 colunas dentro das seções */
    .fi-sec-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px 20px;
    }
    .fi-campo--full   { grid-column: 1 / -1; }
    .fi-campo--pequeno { grid-column: auto; }
}

/* ── Evita que o cabeçalho da página repita os textos do .centro ── */
.inscricao .centro { display: none; }

/* =====================================================================
   INSCRIÇÃO REDESIGN .FIM
   ===================================================================== */