/*------------------------------------------------------------------
PADRAO BEGIN - ESTRUTURA CSS

1. CONFIGURAÇÕES HEADER AND FOOTER
    1.0 Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Footer Style
5.  Inject Index Body
-------------------------------------------------------------------*/


/* INICIO CONFIGURAÇÕES HEADER AND FOOTER 1.0 Template default CSS 	1.1	Variables 	1.2	Mixins	1.3	Flexbox	1.4	Reset */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* Estilizando o menu */
.header__menu ul {
    list-style: none;
    display: flex;
    align-items: center;
}

/* Links do menu */
.header__menu ul li {
    position: relative;
    margin: 0 15px;
}

/* Estilizando a imagem do perfil */
.profile-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* Style do Continue Later */
.text-container {
	display: flex;
	justify-content: flex-end; /* Faz o texto ir para a direita dentro do container */
	flex: 1; /* Ocupa o máximo de espaço disponível */
}

.helper-text {
	margin: 0;
	font-size: 12px;
	text-align: right;
}

.flex-container {
	display: flex;
	align-items: center; /* Mantém alinhamento vertical */
	width: 100%; /* Garante que ocupe todo o espaço disponível */
}


/* Animação na imagem do perfil ao abrir o dropdown */
.profile-dropdown.active .profile-icon {
    transform: scale(1.1);
}

/* Dropdown oculto inicialmente */
.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    width: 200px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    list-style: none;
    padding: 10px 0;
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Links dentro do dropdown */
.dropdown-menu li {
    font-size: 14px !important;
    padding: 10px 15px;
}

/* Estilo dos links */
.dropdown-menu a {
   font-size: 14px !important;
    text-decoration: none;
    color: #333;
    display: block;
    transition: background 0.3s ease;
}

/* Efeito hover no dropdown */
.dropdown-menu a:hover {
    background: #f1f1f1;
}

/* Quando ativo, mostrar dropdown */
.profile-dropdown.active .dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/*----------------------------------------*/
/* Template default CSS
/*----------------------------------------*/

html,
body {
	height: 100%;
	font-family: "Lato", sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* Garante que apenas elementos não-editáveis fiquem sem cursor */
body * {
	caret-color: transparent;
}

/* Reforça cursor visível em campos editáveis */
input,
textarea,
[contenteditable="true"],
select,
button {
	caret-color: auto !important;
}


h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: #111111;
	font-weight: 400;
	font-family: "Lato", sans-serif;
}

h1 {
	font-size: 70px;
}

h2 {
	font-size: 36px;
}

h3 {
	font-size: 21px;

}

h4 {
	font-size: 24px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

p {
	font-size: 20px;
	font-family: "Lato", sans-serif;
	color: #5c5c5c;
	font-weight: 400;
	line-height: 25px;
	margin: 0 0 15px 0;
}

img {
	max-width: 100%;
}
input:focus,
select:focus,
button:focus,
textarea:focus {
	outline: none;
}

a:hover,
a:focus {
	text-decoration: none;
	outline: none;
	color: #ffffff;
}

ul,
ol {
	padding: 0;
	margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/

.section-title {
	margin-bottom: 80px;
	text-align: center;
}

.section-title h2 {
	font-weight: 700;
	color: #323232;
	line-height: 46px;
	margin-bottom: 20px;
}

.section-title P {
	margin-bottom: 0;
}

.set-bg {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
}

.spad {
	padding-top: 100px;
	padding-bottom: 100px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
	color: #fff;
}

/* buttons */


.primary-btn {
	display: inline-block;
	font-size: 15px;
	padding: 14px 40px 12px;
	color: #ffffff;
	text-transform: uppercase;
	font-weight: 700;
	background: #004aad;
	border-radius: 2px;
	letter-spacing: 1px;
}

.site-btn {
	font-size: 15px;
	color: #ffffff;
	font-weight: 700;
	text-transform: uppercase;
	display: inline-block;
	padding: 14px 30px 12px;
	background: #004aad;
	border: none;
	letter-spacing: 1px;
	border-radius: 2px;
}

/* Preloder */

#preloder {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999999;
	background: #000;
}

.loader {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -13px;
	margin-left: -13px;
	border-radius: 60px;
	animation: loader 0.8s linear infinite;
	-webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

@-webkit-keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
	50% {
		-webkit-transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}
	100% {
		-webkit-transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

.spacial-controls {
	position: fixed;
	width: 111px;
	height: 91px;
	top: 0;
	right: 0;
	z-index: 999;
}

.spacial-controls .search-switch {
	display: block;
	height: 100%;
	padding-top: 30px;
	background: #323232;
	text-align: center;
	cursor: pointer;
}

.search-model {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: #000;
	z-index: 99999;
}

.search-model-form {
	padding: 0 15px;
}

.search-model-form input {
	width: 500px;
	font-size: 40px;
	border: none;
	border-bottom: 2px solid #333;
	background: 0 0;
	color: #999;
}

.search-close-switch {
	position: absolute;
	width: 50px;
	height: 50px;
	background: #333;
	color: #fff;
	text-align: center;
	border-radius: 50%;
	font-size: 28px;
	line-height: 28px;
	top: 30px;
	cursor: pointer;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

/*---------------------
  Header
-----------------------*/

.header__top {
	background: #182143;
}

.header__top__widget {
	padding: 11px 0 14px;
}
/* Cor a letra*/
.header__top__widget li {
	font-size: 15px;
	color: #004aad;
	display: inline-block;
	margin-right: 50px;
	position: relative;
	list-style: none;
}

.header__top__widget li::after {
	position: absolute;
	right: -32px;
	top: 0;
	width: 1px;
	height: 100%;
	background: rgba(255, 255, 255, 0.1);
	content: "";
}

.header__top__widget li:last-child {
	margin-right: 0;
}

.header__top__widget li:last-child:after {
	display: none;
}

.header__top__widget li i {
	font-size: 18px;
	color: #004aad;
	margin-right: 8px;
}

.header__logo {
	padding: 5px 0;
}

.header__logo a img {
    max-width: 450px;
    height: auto;
    transition: all 0.3s ease-in-out;
}

.header__logo a {
	display: inline-block;
}

.header__nav {
	text-align: right;
	padding: 38px 0 33px;
}

.header__menu {
	display: inline-block;
	/*text-transform: uppercase;*/
}

.header__menu ul li {
	list-style: none;
	display: inline-block;
	margin-right: 65px;
	position: relative;
}

.header__menu ul li.active a:after {
	width: 100%;
	opacity: 1;
}

.header__menu ul li:hover a:after {
	width: 100%;
	opacity: 1;
}

/*.header__menu ul li:hover .dropdown {*/
/*	top: 36px;*/
/*	opacity: 1;*/
/*	visibility: visible;*/
/*}*/

/* Cor fundo*/
.header__menu ul li .dropdown {
	position: absolute;
	left: 0;
	top: 56px;
	width: 180px;
	background: #FFFFFF;
	text-align: left;
	padding: 5px 0;
	z-index: 9;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	transition: all, 0.5s;
}

.header__menu ul li .dropdown li {
	display: block;
	margin-right: 0;
}

/* Cor a letra*/
.header__menu ul li .dropdown li a {
	font-size: 14px;
	color: #004aad;
	font-weight: 400;
	padding: 10px 20px;
}

.header__menu ul li .dropdown li a:after {
	display: none;
}
/* Cor a letra*/
.header__menu ul li a {
	font-size: 22px;
	color: #004aad;
	font-weight: 700;
	display: block;
	padding: 5px 0;
	position: relative;
}
 /* Cor do fundo*/
.header__menu ul li a:after {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 0%;
	background: white;
	content: "";
	opacity: 0;
	-webkit-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	transition: all, 0.5s;
}

.header__search {
	display: inline-block;
}

.header__search i {
	font-size: 18px;
	color: #323232;
	cursor: pointer;
}


.offcanvas-menu-wrapper {
	display: none;
}

.canvas__open {
	display: none;
}


/*---------------------
  Footer
-----------------------*/
/* fundo*/
.footer {
	background: #ffffff;
	padding-top: 40px;
}

.footer__about {
	margin-bottom: 30px;
}
/*letra*/
.footer__about p {
	color: #004aad;
	text-align:center;
}

.footer__logo {
	margin-bottom: 25px;
}

.footer__logo a img {
	width: 262px;
	height: 86px;}

.footer__logo a {
	display: inline-block;
}

.footer__widget {
	margin-bottom: 30px;
}

.footer__widget.footer__widget--social li a {
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

/*fundo*/
.footer__widget.footer__widget--social li a:hover {
	color: #ffffff;
}

.footer__widget.footer__widget--address p {
	margin-bottom: 10px;
}
/*letra*/
.footer__widget.footer__widget--address li {
	line-height: 30px;
	font-size: 15px;
	color: #004aad;
}

/*letra*/
.footer__widget h5 {
	font-size: 20px;
	font-weight: 700;
	color: #004aad;
	margin-bottom: 26px;
}

.footer__widget ul li {
	list-style: none;
}
/*letra*/
.footer__widget ul li a {
	font-size: 15px;
	color: #004aad;
	line-height: 38px;
}

.footer__widget ul li a i {
	margin-right: 6px;
}
/*letra*/
.footer__widget p {
	color: #004aad;
}

.footer__copyright {
	border-top: 1px solid rgba(112, 112, 112, 0.1);
	padding: 18px 0 15px;
	margin-top: 20px;
}

.footer__copyright__links li {
	list-style: none;
	display: inline-block;
	line-height: 20px;
	position: relative;
	margin-right: 45px;
}

.footer__copyright__links li:last-child {
	margin-right: 0;
}

.footer__copyright__links li:last-child::after {
	display: none;
}
/*letra*/
.footer__copyright__links li:after {
	position: absolute;
	right: -28px;
	top: 0;
	height: 100%;
	width: 1px;
	background: #004aad;
	content: "";
}

/*letra*/
.footer__copyright__links li a {
	font-size: 15px;
	color: #004aad;
}

.footer__copyright__text {
	text-align: right;
}

.footer__copyright__text p {
	color: #004aad;
	margin-bottom: 0;
}

.footer__copyright__text i {
	color: #941515;
}

.footer__copyright__text a {
	color: #004aad;
}


/*---------------------
 SECTION INDEX DEFAULT
-----------------------*/
/* Reset padrão */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Arial, sans-serif;
}

/* Estrutura do formulário */
.main-container-index {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	width: 100%;
	background: linear-gradient(to bottom, #004aad, #0b93f2, #ffffff);
	padding: 20px;
}

.form-wrapper-custom {
    position: relative;
	max-width: 850px;
	width: 100%;
	margin: 50px auto;
	padding: 30px;
	background: white;
	border-radius: 12px;
	box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.4);
	box-sizing: border-box;
}

.title-custom {
	font-size: 24px !important;
	font-weight: bold !important;
	text-align: center !important;
	color: #004aad !important;
	font-family: 'Lato', sans-serif !important;
	display: flex;
	flex-direction: column;
	margin-bottom: 20px !important; /* Ajuste o valor conforme necessário */
}

/* Layout dos campos usando Grid */
.fields {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 15px;
	margin-bottom: 20px;
}

.input-field {
	display: flex;
	flex-direction: column;
}

.input-field label {
	font-size: 12px;
	font-weight: 500;
	color: #2e2e2e;
	margin-bottom: 5px;
}

.input-field input{
	font-size: 12px;
	color: #0b0b0b;
}

.input-field.small-field {
	width: 60%;
	text-align: center;
}

.input-field input,
.input-field select {
	outline: none;
	font-size: 14px;
	color: #333;
	border-radius: 5px;
	border: 1px solid #aaa;
	padding: 10px;
	width: 100%;
}

.input-field input:focus,
.input-field select:focus {
	border-color: #004aad;
	box-shadow: 0 0 5px rgba(0, 74, 173, 0.5);
}

.input-field input::placeholder {
	font-size: 14px; /* Tamanho da fonte do placeholder */
	color: #000; /* Cor do placeholder */
}


/* Layout dos campos usando Grid */
.fields {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 15px;
	margin-bottom: 20px;
}

.input-field {
	display: flex;
	flex-direction: column;
}

.input-field label {
	font-size: 12px;
	font-weight: 500;
	color: #2e2e2e;
	margin-bottom: 5px;
}

.input-field input{
	font-size: 12px;
	color: #0b0b0b;
}

.input-field.small-field {
	width: 60%;
	text-align: center;
}

.input-field input,
.input-field select {
	outline: none;
	font-size: 14px;
	color: #333;
	border-radius: 5px;
	border: 1px solid #aaa;
	padding: 10px;
	width: 100%;
}

.input-field input:focus,
.input-field select:focus {
	border-color: #004aad;
	box-shadow: 0 0 5px rgba(0, 74, 173, 0.5);
}

.input-field input::placeholder {
	font-size: 14px; /* Tamanho da fonte do placeholder */
	color: #000; /* Cor do placeholder */
}

	/* Botões */

	.buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
	}

	.backBtn, .nextBtn {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 45px;
		width: 200px;
		border: none;
		color: #fff;
		border-radius: 5px;
		background-color: #004aad;
		transition: background-color 0.3s;
		cursor: pointer;
	}

	.backBtn:hover, .nextBtn:hover {
		background-color: #003280;
	}

	.form-wrapper-custom .button-group-custom {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		margin-top: 25px !important;
	}

	.form-wrapper-custom .submit-btn-custom, .back-btn-custom {
		padding: 12px 25px !important;
		border: none !important;
		border-radius: 6px !important;
		font-size: 15px !important;
		cursor: pointer !important;
		transition: background 0.3s, transform 0.2s !important;
	}

	.form-wrapper-custom .submit-btn-custom {
		background: #007BFF !important;
		color: white !important;
	}

	.form-wrapper-custom .submit-btn-custom:hover {
		background: #0056b3 !important;
		transform: scale(1.05) !important;
	}

	.form-wrapper-custom .back-btn-custom {
		background: #004aad !important;
		color: white !important;
	}

	.form-wrapper-custom .back-btn-custom:hover {
		background: #999 !important;
		transform: scale(1.05) !important;
	}

	.form-wrapper-custom .section-custom {
		margin-bottom: 20px !important;
		border-bottom: 1px solid #ddd !important;
	}

	.top-left-icon {
		left: 10px;
		top: 1px !important;
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}


.checkbox-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-around
}

.checkbox-item {
	display: flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
	padding: 3px;
}

.checkbox-item input[type="checkbox"] {
	margin: 0;
}

.checkbox-item label {
	font-size: 14px;
	color: #333;
}

.checkbox-item input[type="number"] {
	width: 50px;
	margin-left: 10px;
	padding: 5px;
	border: 1px solid #aaa;
	border-radius: 5px;
	height: 21px;
}

	/* Responsividade */
	@media only screen and (min-width: 768px) and (max-width: 991px) {
		.fields {
			grid-template-columns: repeat(2, 1fr);
		}

		.fields > .input-field {
			grid-column: span 1 !important;
		}
	}

	@media (max-width: 767px) {
		.fields {
			grid-template-columns: repeat(1, 1fr);
		}

		.fields > .input-field {
			grid-column: 1 / -1 !important;
		}

		.form-wrapper-custom {
			width: 90%;
			padding: 20px;
		}

		.backBtn, .nextBtn {
			width: 100%;
		}
	}

	@media (max-width: 480px) {
		.fields {
			grid-template-columns: repeat(1, 1fr);
		}

		.title-custom {
			font-size: 18px;
		}
	}


	/*--------------------------------- Responsive Media Quaries -----------------------------*/
	/* Responsividade Index Section RegisterProfile */


	/* Responsividade */
	@media (max-width: 768px) {
		.form-wrapper-custom {
			width: 90% !important;
			padding: 20px !important;
		}

		.title-custom {
			font-size: 20px !important;
		}
	}

	/* Consulta de mídia para telas menores */
	@media (max-width: 768px) {
		.card {
			padding: 15px;
			border: 2px solid #D3D3D3; /* Reduz a espessura da borda */
		}

		.card h1 {
			font-size: 1rem; /* Reduz o tamanho da fonte */
		}

		.card p {
			font-size: 0.9rem; /* Reduz o tamanho da fonte */
		}
	}
	/* Responsividade */
	@media (max-width: 1024px) {
		.form-wrapper-custom .input-group-container {
			grid-template-columns: repeat(2, 1fr) !important;
		}
	}

	@media (max-width: 768px) {
		.form-wrapper-custom {
			width: 90% !important;
			padding: 20px !important;
		}

		.form-wrapper-custom .input-group-container {
			grid-template-columns: repeat(1, 1fr) !important;
		}

		.form-wrapper-custom .button-group-custom {
			flex-direction: column !important;
			gap: 10px !important;
		}

		.form-wrapper-custom .submit-btn-custom, .back-btn-custom {
			width: 100% !important;
			text-align: center !important;
		}
	}


	@media (max-width: 480px) {
		.form-wrapper-custom .title-custom {
			font-size: 18px !important;
		}

		.form-wrapper-custom .input-group-custom label {
			font-size: 14px !important;
		}

		.form-wrapper-custom .input-group-custom input,
		.form-wrapper-custom .input-group-custom select {
			font-size: 14px !important;
			padding: 10px !important;
		}
	}

	@media (max-width: 1024px) {
		.form-wrapper-custom .input-group-container {
			grid-template-columns: repeat(2, 1fr) !important;
		}
	}

	@media (max-width: 768px) {
		.form-wrapper-custom {
			width: 90% !important;
			padding: 20px !important;
		}

		.form-wrapper-custom .input-group-container {
			grid-template-columns: repeat(1, 1fr) !important;
		}

		.form-wrapper-custom .button-group-custom {
			flex-direction: column !important;
			gap: 10px !important;
		}

		.form-wrapper-custom .submit-btn-custom, .back-btn-custom {
			width: 100% !important;
			text-align: center !important;
		}
	}

	@media (max-width: 480px) {
		.form-wrapper-custom .title-custom {
			font-size: 18px !important;
		}

		.form-wrapper-custom .input-group-custom label {
			font-size: 14px !important;
		}

		.form-wrapper-custom .input-group-custom input,
		.form-wrapper-custom .input-group-custom select {
			font-size: 14px !important;
			padding: 10px !important;
		}
	}


	@media only screen and (min-width: 1200px) {
		.container {
			max-width: 1170px;
		}
	}

	/* Medium Device = 1200px */
	@media only screen and (min-width: 992px) and (max-width: 1199px) {
		.header__menu ul li {
			margin-right: 40px;
		}
	}

	/* Tablet Device = 768px */
	@media only screen and (min-width: 768px) and (max-width: 991px) {
		.footer__copyright__links li {
			margin-right: 30px;
		}

		.footer__copyright__links li:after {
			right: -20px;
		}

		.header .container {
			position: relative;
		}

		.header__top {
			display: none;
		}

		.header__nav {
			display: none;
		}
	}

	/* Wide Mobile = 480px */
	@media only screen and (max-width: 767px) {
		.footer__copyright__links {
			text-align: center;
			margin-bottom: 20px;
		}

		.footer__copyright__text {
			text-align: center;
		}

		.header .container {
			position: relative;
		}

		.header__top {
			display: none;
		}

		.header__nav {
			display: none;
		}

		@media (max-width: 768px) {
			.header__logo img {
				max-width: 140px;
			}
		}
		@media (max-width: 480px) {
			.header__logo img {
				max-width: 120px;
			}
		}
	}
}

.section-custom {
    background: #ffffff;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.title-custom {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 1.5rem;
    display: block;
}

.section-custom h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1.5rem;
}

.photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.upload-box {
    position: relative;
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    aspect-ratio: 4/3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.upload-box:hover {
    border-color: #0d6efd;
    background: #f0f7ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15);
}

.upload-box.has-image {
    border-style: solid;
    border-color: #198754;
    background: #fff;
}

.upload-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.upload-box .placeholder-icon {
    font-size: 3rem;
    color: #adb5bd;
    margin-bottom: 0.5rem;
}

.upload-box .placeholder-text {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.5rem;
}

.upload-box .remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
    z-index: 10;
}

.upload-box.has-image .remove-btn {
    display: flex;
}

.upload-box .remove-btn:hover {
    background: #bb2d3b;
    transform: scale(1.1);
}

.add-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: white;
    border: 2px solid #0d6efd;
    color: #0d6efd;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    margin: auto;
    margin-bottom: 1rem;
}

.add-more-btn:hover {
    background: #0d6efd;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
}

.add-more-btn i {
    font-size: 1.2rem;
}

.button-group-custom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
}

.back-btn-custom, .submit-btn-custom {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.back-btn-custom {
    background: #6c757d;
    color: white;
}

.back-btn-custom:hover {
    background: #5a6268;
    transform: translateX(-4px);
}

.submit-btn-custom {
    background: #0d6efd;
    color: white;
}

.submit-btn-custom:hover {
    background: #0b5ed7;
    transform: translateX(4px);
}

.submit-btn-custom:disabled {
    background: #6c757d;
    cursor: not-allowed;
    transform: none;
}

.helper-text {
    font-size: 0.875rem;
    color: #6c757d;
}

.photo-counter {
    display: block;
    background: #e7f3ff;
    color: #0d6efd;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 600;
    width: fit-content;
    margin: auto;
    margin-bottom: 1.5rem;
}

.section-subtitle {
    text-align: center;
}

.progress-indicator {
    background: #e9ecef;
    height: 6px;
    border-radius: 3px;
    margin-bottom: 2rem;
    overflow: hidden;
}

.progress-bar-custom {
    height: 100%;
    background: linear-gradient(90deg, #0d6efd, #0dcaf0);
    transition: width 0.3s ease;
    border-radius: 3px;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
}

.modal-content {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.close-btn {
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-size: 1.5rem;
    border: none;
    background: none;
    cursor: pointer;
    color: #6c757d;
}

.hidden-input {
    display: none !important;
}

.disabled-btn {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 768px) {
    .photos-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 1rem;
    }

    .button-group-custom {
        flex-direction: column;
    }
}

.action-button {
    position: absolute;
    top: 0;
    right: 0;
    color: #fff !important;
    background-color: #0b93f2;
    margin: 14px 20px 0px 0px;
    padding: 3px 6px;
    border-radius: 6px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.action-button i {
    font-size: 24px;
    margin: 8px;
    color: #fff !important;
}
/* Bloco de endereço (o .fields que contém o campo Street, #search): um input
   por linha, ocupando toda a largura. */
.fields:has(#search) {
    grid-template-columns: minmax(0, 1fr) !important;
}

.fields:has(#search) > .input-field,
.fields:has(#search) > [style*="grid-column"] {
    grid-column: 1 / -1 !important;
}

/* Telas menores: a caixa do checkbox fica encostada à esquerda e o rótulo
   centralizado no espaço restante. */
@media (max-width: 768px) {
    /* Sem `flex-direction: column` aqui: o styleResponsiveBase liga
       `flex-wrap: wrap !important` nesse container e, em coluna, o wrap
       quebra em NOVAS COLUNAS e joga os itens para fora do card. Uma opção
       por linha vem de `flex: 1 1 100%` no item. */
    .checkbox-group {
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        min-width: 0;
    }

    .checkbox-item {
        display: flex;
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        align-items: center;
        justify-content: flex-start;
    }

    .checkbox-item input {
        flex: 0 0 auto;
        margin-right: 4px;
    }

    .checkbox-item label {
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
        overflow-wrap: break-word;
    }
}

/* ===================================================================
   SP20-MOB 3.1 — AVISO DE FOTO SEM PRÉ-VISUALIZAÇÃO (HEIC do iPHONE)
   -------------------------------------------------------------------
   Fotos HEIC (formato padrão do iPhone desde o iOS 11) são aceitas e
   enviadas normalmente, mas nenhum navegador as renderiza num <img>. O
   card ficava visualmente vazio e o usuário reenviava a mesma foto.

   Este bloco é o que o `onerror` do <img> revela no lugar. Nasce com
   `display: none` inline: só aparece quando a imagem falha de verdade,
   então nas fotos JPEG/PNG de sempre nada muda.
   =================================================================== */
.upload-box .slot-preview-fallback {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    padding: 10px;
    text-align: center;
    background: #f0f7ff;
    border-radius: 6px;
    overflow: hidden;
}

.upload-box .slot-preview-fallback i {
    font-size: 1.8rem;
    color: #198754;
}

.upload-box .slot-preview-fallback .placeholder-text {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    margin-top: 0;
}