/* ==========================================
   SDL PORTAL
   INSCRIÇÃO 2027
   LAYOUT PREMIUM / LEITURA CONFORTÁVEL
   ========================================== */

.sdl-inscricao-form-page,
.sdl-inscricao-form-page * {
	box-sizing: border-box;
}

.sdl-inscricao-form-page {
	--sdl-navy: #0b1f3a;
	--sdl-navy-2: #15345f;
	--sdl-blue: #73c7eb;
	--sdl-blue-soft: #eaf7fd;
	--sdl-blue-pale: #f6fbfe;
	--sdl-text: #17324f;
	--sdl-muted: #667b8e;
	--sdl-border: #d8e7f0;
	--sdl-white: #ffffff;
	--sdl-bg: #f5f9fc;
	--sdl-green: #28784a;
	--sdl-red: #a83b32;

	width: calc(100% - 40px);
	max-width: 1050px;
	margin: 0 auto;
	padding: 30px 0 70px;
	color: var(--sdl-text);
}


/* ==========================================
   VOLTAR
   ========================================== */

.sdl-inscricao-form-topo {
	margin-bottom: 18px;
}

.sdl-inscricao-form-voltar {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	min-height: 42px;
	padding: 9px 15px;

	background: #fff;
	color: var(--sdl-navy) !important;

	border: 1px solid var(--sdl-border);
	border-radius: 10px;

	text-decoration: none !important;
	font-size: 14px;
	font-weight: 800;

	transition: .2s ease;
}

.sdl-inscricao-form-voltar:hover {
	background: var(--sdl-blue-soft);
	border-color: #b6dae9;
}


/* ==========================================
   CABEÇALHO
   ========================================== */

.sdl-inscricao-form-cabecalho {
	position: relative;
	overflow: hidden;

	margin-bottom: 24px;
	padding: 34px 36px;

	background:
		linear-gradient(
			135deg,
			#eaf7fd 0%,
			#ffffff 65%
		);

	border: 1px solid var(--sdl-border);
	border-radius: 20px;

	box-shadow:
		0 10px 30px rgba(11,31,58,.05);
}

.sdl-inscricao-form-cabecalho::before {
	content: "";

	position: absolute;
	top: 0;
	left: 0;

	width: 6px;
	height: 100%;

	background: var(--sdl-blue);
}

.sdl-inscricao-form-kicker {
	display: inline-flex;

	margin-bottom: 9px;
	padding: 5px 9px;

	background: #fff;

	color: var(--sdl-navy-2);

	border: 1px solid #cce5f0;
	border-radius: 999px;

	font-size: 11px;
	font-weight: 900;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.sdl-inscricao-form-cabecalho h1 {
	margin: 0 0 10px;

	color: var(--sdl-navy);

	font-size: clamp(31px, 4vw, 42px);
	line-height: 1.08;
	letter-spacing: -.025em;
}

.sdl-inscricao-form-cabecalho p {
	max-width: 720px;
	margin: 0;

	color: var(--sdl-muted);

	font-size: 15px;
	line-height: 1.65;
}


/* ==========================================
   CARD DO FORMULÁRIO
   ========================================== */

.sdl-inscricao-form-card {
	padding: 32px;

	background: #fff;

	border: 1px solid var(--sdl-border);
	border-radius: 20px;

	box-shadow:
		0 12px 36px rgba(11,31,58,.05);
}

.sdl-inscricao-form-card .jet-form-builder {
	width: 100%;
	max-width: none;
	margin: 0;
}


/* ==========================================
   CAMPOS
   MAIS LEVES
   ========================================== */

.sdl-inscricao-form-card
[class*="wp-block-jet-forms-"] {

	margin: 0 0 6px !important;
	padding: 19px 0;

	background: transparent;

	border: 0;
	border-bottom: 1px solid #edf2f5;
	border-radius: 0;

	box-shadow: none;
}

.sdl-inscricao-form-card
[class*="wp-block-jet-forms-"]:last-child {
	border-bottom: 0;
}


/* ==========================================
   LABELS
   ========================================== */

.sdl-inscricao-form-card label,
.sdl-inscricao-form-card .jet-form-builder__label {
	display: block;

	margin: 0 0 10px;

	color: var(--sdl-navy);

	font-size: 16px;
	font-weight: 800;
	line-height: 1.4;
}


/* ==========================================
   INPUTS
   ========================================== */

.sdl-inscricao-form-card input[type="text"],
.sdl-inscricao-form-card input[type="email"],
.sdl-inscricao-form-card input[type="number"],
.sdl-inscricao-form-card input[type="url"],
.sdl-inscricao-form-card input[type="tel"],
.sdl-inscricao-form-card input[type="date"],
.sdl-inscricao-form-card select,
.sdl-inscricao-form-card textarea {

	width: 100% !important;

	min-height: 50px;

	padding: 12px 14px;

	background: #fbfdfe;
	color: var(--sdl-text);

	border: 1px solid #cadce6;
	border-radius: 10px;

	font: inherit;
	font-size: 15px;

	transition:
		border-color .2s ease,
		box-shadow .2s ease,
		background .2s ease;
}

.sdl-inscricao-form-card textarea {
	min-height: 135px;
	resize: vertical;
}

.sdl-inscricao-form-card input:focus,
.sdl-inscricao-form-card select:focus,
.sdl-inscricao-form-card textarea:focus {

	outline: none;

	background: #fff;

	border-color: var(--sdl-blue);

	box-shadow:
		0 0 0 3px rgba(115,199,235,.15);
}


/* ==========================================
   RADIO / CHECKBOX
   ========================================== */

.sdl-inscricao-form-card
.jet-form-builder__fields-group {

	display: grid;
	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 10px;

	margin-top: 7px;
}

.sdl-inscricao-form-card
.jet-form-builder__field-label.for-radio,

.sdl-inscricao-form-card
.jet-form-builder__field-label.for-checkbox,

.sdl-inscricao-form-card
.jet-form-builder__field-label.radio-wrap,

.sdl-inscricao-form-card
.jet-form-builder__field-label.checkbox-wrap {

	display: flex;
	align-items: center;
	gap: 10px;

	width: 100%;

	margin: 0;
	padding: 12px 14px;

	background: #f8fbfd;

	border: 1px solid #d7e5ed;
	border-radius: 10px;

	color: var(--sdl-text);

	font-size: 14px;
	font-weight: 700;

	cursor: pointer;

	transition: .2s ease;
}

.sdl-inscricao-form-card
.jet-form-builder__field-label.for-radio:hover,

.sdl-inscricao-form-card
.jet-form-builder__field-label.for-checkbox:hover {

	background: var(--sdl-blue-soft);
	border-color: #acd6e7;
}

.sdl-inscricao-form-card
.jet-form-builder__field-label:has(input:checked) {

	background: var(--sdl-blue-soft);

	border-color: var(--sdl-blue);

	box-shadow:
		0 0 0 2px rgba(115,199,235,.10);
}

.sdl-inscricao-form-card input[type="radio"],
.sdl-inscricao-form-card input[type="checkbox"] {

	width: 20px !important;
	height: 20px !important;

	margin: 0 !important;

	accent-color: var(--sdl-navy);
}


/* ==========================================
   DESCRIÇÕES
   ========================================== */

.sdl-inscricao-form-card .description,
.sdl-inscricao-form-card .jet-form-builder__desc,
.sdl-inscricao-form-card .jet-form-builder__field-description {

	margin-top: 6px;

	color: var(--sdl-muted);

	font-size: 13px;
	line-height: 1.5;
}


/* ==========================================
   EDITAL
   ========================================== */

.sdl-edital-assinatura-wrap {

	margin: 30px 0 18px;
	padding: 28px;

	background:
		linear-gradient(
			135deg,
			#f4fbfe,
			#ffffff
		);

	border: 1px solid #cde5f0;
	border-radius: 18px;
}

.sdl-edital-cabecalho {
	margin-bottom: 18px;
}

.sdl-edital-kicker {

	display: inline-flex;

	margin-bottom: 7px;

	color: var(--sdl-navy-2);

	font-size: 11px;
	font-weight: 900;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.sdl-edital-cabecalho h2 {

	margin: 0 0 8px;

	color: var(--sdl-navy);

	font-size: 27px;
}

.sdl-edital-cabecalho p {

	max-width: 760px;
	margin: 0;

	color: var(--sdl-muted);

	line-height: 1.65;
}


/* ==========================================
   IFRAME DO EDITAL
   ========================================== */

.sdl-edital-scroll {

	position: relative;

	width: 100%;
	height: 480px;

	overflow: hidden;

	background: #fff;

	border: 1px solid #cddfe8;
	border-radius: 12px;
}

.sdl-edital-scroll iframe {

	display: block;

	width: 100%;
	height: 100%;

	border: 0;

	background: #fff;
}

.sdl-edital-aviso {

	margin-top: 14px;
	padding: 13px 15px;

	background: #fff8e1;

	border: 1px solid #ead79c;
	border-radius: 10px;

	color: #695411;

	font-size: 14px;
	line-height: 1.55;
}


/* ==========================================
   ASSINATURA
   ========================================== */

.sdl-assinatura-box {

	margin: 28px 0 10px;
	padding: 26px;

	background:
		linear-gradient(
			135deg,
			#eef8fd,
			#ffffff
		);

	border: 1px solid #c9e3ef;
	border-radius: 18px;
}

.sdl-assinatura-head {
	margin-bottom: 17px;
}

.sdl-assinatura-kicker {

	display: inline-block;

	margin-bottom: 6px;

	color: var(--sdl-navy-2);

	font-size: 11px;
	font-weight: 900;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.sdl-assinatura-head h3 {

	margin: 0 0 7px;

	color: var(--sdl-navy);

	font-size: 23px;
}

.sdl-assinatura-head p {

	margin: 0;

	color: var(--sdl-muted);

	line-height: 1.6;
}

.sdl-assinatura-canvas-wrap {

	position: relative;

	width: 100%;
	height: 220px;

	overflow: hidden;

	background:
		repeating-linear-gradient(
			0deg,
			#ffffff,
			#ffffff 34px,
			#f4f7f9 35px
		);

	border: 2px dashed #a9cede;
	border-radius: 12px;

	touch-action: none;
}

#sdl-assinatura-canvas {

	position: relative;
	z-index: 2;

	display: block;

	width: 100%;
	height: 100%;

	background: transparent;

	cursor: crosshair;

	touch-action: none;
}

.sdl-assinatura-placeholder {

	position: absolute;
	z-index: 1;

	left: 50%;
	top: 50%;

	transform:
		translate(-50%, -50%);

	color: #a6b7c3;

	font-size: 24px;
	font-style: italic;

	pointer-events: none;

	transition: opacity .2s ease;
}

.sdl-assinatura-actions {

	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 14px;

	margin-top: 12px;
}

.sdl-assinatura-limpar {

	min-height: 42px;

	padding: 9px 15px;

	background: #fff;
	color: var(--sdl-navy);

	border: 1px solid #bad6e4;
	border-radius: 9px;

	font-weight: 800;

	cursor: pointer;
}

.sdl-assinatura-limpar:hover {
	background: var(--sdl-blue-soft);
}

.sdl-assinatura-status {

	color: var(--sdl-muted);

	font-size: 13px;
	font-weight: 700;
}

.sdl-assinatura-status-ok {
	color: var(--sdl-green);
}

.sdl-assinatura-erro {

	margin-top: 14px;
	padding: 13px 15px;

	background: #fff1f0;
	color: var(--sdl-red);

	border: 1px solid #efc3be;
	border-radius: 9px;

	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}


/* ==========================================
   BOTÃO FINAL
   ========================================== */

.sdl-inscricao-form-card
.wp-block-jet-forms-submit-field {

	margin-top: 28px !important;

	padding: 0 !important;

	border: 0 !important;
}

.sdl-inscricao-form-card button[type="submit"],
.sdl-inscricao-form-card input[type="submit"],
.sdl-inscricao-form-card .jet-form-builder__submit {

	display: flex !important;
	align-items: center;
	justify-content: center;

	width: 100% !important;
	min-height: 58px;

	padding: 14px 24px !important;

	background:
		linear-gradient(
			135deg,
			var(--sdl-navy),
			var(--sdl-navy-2)
		) !important;

	color: #fff !important;

	border: 0 !important;
	border-radius: 12px !important;

	font-size: 17px !important;
	font-weight: 900 !important;

	box-shadow:
		0 12px 28px rgba(11,31,58,.17);

	cursor: pointer;

	transition:
		transform .2s ease,
		box-shadow .2s ease;
}

.sdl-inscricao-form-card
button[type="submit"]:hover,

.sdl-inscricao-form-card
.jet-form-builder__submit:hover {

	transform:
		translateY(-2px);

	box-shadow:
		0 16px 32px rgba(11,31,58,.20);
}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 767px) {

	.sdl-inscricao-form-page {

		width:
			calc(100% - 24px);

		padding:
			20px 0 45px;
	}

	.sdl-inscricao-form-cabecalho {

		padding:
			24px 21px;

		border-radius:
			16px;
	}

	.sdl-inscricao-form-cabecalho h1 {
		font-size: 29px;
	}

	.sdl-inscricao-form-card {

		padding:
			18px;

		border-radius:
			16px;
	}

	.sdl-inscricao-form-card
	.jet-form-builder__fields-group {

		grid-template-columns:
			1fr;
	}

	.sdl-edital-assinatura-wrap,
	.sdl-assinatura-box {

		padding:
			19px;

		border-radius:
			14px;
	}

	.sdl-edital-scroll {
		height: 380px;
	}

	.sdl-assinatura-canvas-wrap {
		height: 190px;
	}

	.sdl-assinatura-actions {

		align-items:
			stretch;

		flex-direction:
			column;
	}

	.sdl-assinatura-limpar {
		width: 100%;
	}

}