﻿
/* ========================================
   FORM NOVO CORPORATE - CSS UNIFICADO
   ======================================== */

/* Reset Básico e Fontes */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: "Montserrat", sans-serif;
}

body {
	background-color: #000000;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}

	body::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/*background-image: url('../gimba.png');*/
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
		opacity: 0.4;
		z-index: -1;
	}


/* ========================================
   FORM.CSS - Estilos para a seleção de atendimento
   ======================================== */

.selection-container {
	max-width: 1200px;
	width: 95%;
	margin: 2rem auto;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 1.5rem;
	padding: 4rem 3rem;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
	text-align: center;
	position: relative;
	z-index: 1;
	animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.selection-container h2 {
	font-size: 36px;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 0.75rem;
	letter-spacing: -0.02em;
}

.selection-container .subtitle {
	font-size: 20px;
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	color: #C2C2C2;
	max-width: 853px;
	margin: 0 auto 3.5rem auto;
	line-height: 1.4;
}

/* Grid de Cards */
.cards-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	width: 100%;
}

/* Card Individual - Todos começam Escuros/Transparentes */
.card-item {
	max-width: 307px;
	width: 100%;
	height: 264px;
	border-radius: 8px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	text-align: left;
	background: rgba(18, 18, 18, 0.91);
	border: 1px solid rgba(238, 238, 238, 0.15);
	backdrop-filter: blur(6.35px);
	cursor: pointer;
	box-sizing: border-box;
	text-decoration: none;
	opacity: 0;
	animation: cardFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

	.card-item:nth-child(1) {
		animation-delay: 0.1s;
	}

	.card-item:nth-child(2) {
		animation-delay: 0.2s;
	}

	.card-item:nth-child(3) {
		animation-delay: 0.3s;
	}

	.card-item:nth-child(4) {
		animation-delay: 0.4s;
	}

@keyframes cardFadeIn {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Card 1 em Destaque (Sempre Vermelho) */
.card-item:nth-child(1) {
	background-color: #D22630;
	border-color: rgba(238, 238, 238, 0.15);
	box-shadow: 0 15px 35px rgba(210, 38, 48, 0.4);
}

/* Icones - Começam Vermelhos (exceto no card em destaque) */
.card-icon {
	font-size: 32px;
	width: 32px;
	height: 32px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #D22630;
	transition: color 0.3s ease;
}

.card-item:nth-child(1) .card-icon {
	color: #101010;
	/* Preto no card em destaque */
}

/* Texto do Card */
.card-text {
	font-size: 16px;
	font-family: "Montserrat", sans-serif;
	color: #ffffff;
	line-height: 1.4;
	font-weight: 400;
	margin-bottom: 2rem;
}

	.card-text strong {
		font-weight: 700;
	}

/* Botão do Card */
.card-btn {
	align-self: stretch;
	height: 28px;
	background-color: #000000;
	color: #ffffff;
	border: none;
	border-radius: 4px;
	padding: 6px 4px;
	font-size: 12px;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	text-transform: none;
	transition: background-color 0.2s ease, transform 0.1s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	align-self: center;
	width: 100%;
}

/* Hover no botão (acionado ao passar o mouse em qualquer parte do card) */
.card-item:hover .card-btn {
	background-color: #D22630;
}

.card-btn:active {
	transform: scale(0.98);
}

/* ========================================
   RESPONSIVIDADE (MEDIA QUERIES)
   ======================================== */

@media (max-width: 1024px) {
	.cards-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem;
	}

	.selection-container {
		padding: 3rem 2rem;
	}
}

@media (max-width: 600px) {
	.cards-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.selection-container {
		padding: 2.5rem 1.25rem;
		margin: 1rem auto;
	}

		.selection-container h2 {
			font-size: 1.75rem;
		}

		.selection-container .subtitle {
			font-size: 1rem;
			margin-bottom: 2rem;
		}

	.card-item {
		height: auto !important;
		min-height: 240px;
		padding: 1.5rem 1.25rem 1.25rem 1.25rem;
	}

	.card-icon {
		margin-bottom: 1rem;
	}

	.card-text {
		font-size: 0.95rem;
		margin-bottom: 1.5rem;
	}
}

/* ========================================
   FORM_CAMPOS.CSS - Estilos para o formulário de cadastro
   ======================================== */

.form-wrapper {
	max-width: 1200px;
	width: 95%;
	margin: 12rem auto;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 1.5rem;
	padding: 4rem 3rem;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
	position: relative;
	z-index: 1;
	animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.form-header-container {
	text-align: center;
	margin-bottom: 3.5rem;
}

	.form-header-container h2 {
		font-size: 32px;
		font-weight: 700;
		color: #ffffff;
		margin-bottom: 0.5rem;
		letter-spacing: -0.02em;
	}

	.form-header-container .subtitle {
		font-size: 18px;
		color: rgba(255, 255, 255, 0.7);
		font-weight: 500;
		max-width: 700px;
		margin: 0 auto;
		line-height: 1.4;
	}

/* Caixa Interna do Formulário com Borda */
.form-inner-box {
	border: 1px solid #4B4B4B;
	border-radius: 6px;
	padding: 48px;
	background: #191818;
	display: flex;
	gap: 24px;
}

/* Coluna 1: Sidebar de Chamada */
.form-sidebar {
	width: 210px;
	flex-shrink: 0;
}

	.form-sidebar h3 {
		font-size: 32px;
		font-weight: 700;
		color: #9A9A9A;
		line-height: 1.25;
		letter-spacing: -0.01em;
	}

/* Colunas do Form */
.form-columns-container {
	display: flex;
	gap: 24px;
	width: calc(100% - 234px);
	/* 210px + 24px gap */
}

.form-column {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: #1F1F1F;
	border: none;
	border-radius: 6px;
	padding: 16px;
	box-shadow: none;
	height: max-content;
}

.form-column-title {
	font-size: 18px;
	font-weight: 600;
	color: #C7C7C7;
	margin-bottom: 16px;
	letter-spacing: 0.01em;
}

/* Grupos de Inputs */
.form-field-group {
	margin-bottom: 16px;
	display: flex;
	flex-direction: column;
}

	.form-field-group label {
		font-size: 14px;
		font-weight: 600;
		color: #ffffff;
		margin-bottom: 6px;
		letter-spacing: 0.02em;
	}

		.form-field-group label .required {
			color: #D22630;
			/* Red */
			margin-left: 2px;
		}

/* Input Wrappers com Ícones */
.input-wrapper-custom {
	position: relative;
	width: 100%;
}

	.input-wrapper-custom .input-icon-left {
		position: absolute;
		left: 15px;
		top: 50%;
		transform: translateY(-50%);
		color: rgba(255, 255, 255, 0.45);
		font-size: 1.1rem;
		pointer-events: none;
	}

	.input-wrapper-custom .select-chevron-right {
		position: absolute;
		right: 12px;
		top: 50%;
		transform: translateY(-50%);
		color: rgba(255, 255, 255, 0.45);
		font-size: 0.85rem;
		pointer-events: none;
	}

	.input-wrapper-custom input,
	.input-wrapper-custom select,
	.input-wrapper-custom textarea {
		width: 100%;
		background-color: #424346;
		border: 1px solid #68686B;
		border-radius: 8px;
		padding: 10px 14px 10px 36px;
		color: #C0C0C0;
		font-size: 14px;
		font-family: "Montserrat", sans-serif;
		font-weight: 500;
		outline: none;
		box-sizing: border-box;
		transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
		appearance: none;
		-webkit-appearance: none;
	}

		.input-wrapper-custom select option {
			background-color: #1c1c1e;
			color: #ffffff;
		}

		.input-wrapper-custom input::placeholder,
		.input-wrapper-custom textarea::placeholder {
			color: rgba(255, 255, 255, 0.4);
		}

		.input-wrapper-custom input:focus,
		.input-wrapper-custom select:focus,
		.input-wrapper-custom textarea:focus {
			border-color: #D22630;
			background-color: #424346;
			box-shadow: 0 0 0 3px rgba(210, 38, 48, 0.25);
		}

		/* Correção para Autofill do Navegador (Fundo Branco) */
		.input-wrapper-custom input:-webkit-autofill,
		.input-wrapper-custom input:-webkit-autofill:hover,
		.input-wrapper-custom input:-webkit-autofill:active {
			-webkit-box-shadow: 0 0 0 1000px #424346 inset !important;
			-webkit-text-fill-color: #C0C0C0 !important;
			caret-color: #C0C0C0;
		}

			.input-wrapper-custom input:-webkit-autofill:focus {
				-webkit-box-shadow: 0 0 0 1000px #424346 inset, 0 0 0 3px rgba(210, 38, 48, 0.25) !important;
				-webkit-text-fill-color: #C0C0C0 !important;
				caret-color: #C0C0C0;
			}


	/* Estilo para Textarea */
	.input-wrapper-custom textarea {
		height: 156px;
		resize: none;
		padding: 10px 14px;
		/* Textarea não tem ícone */
	}

/* Área de Preferência de Contato (Checkboxes horizontais) */
.contact-pref-title {
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
	margin-bottom: 9px;
}

	.contact-pref-title .required {
		color: #D22630;
	}

.contact-pref-options {
	display: flex;
	gap: 9px;
	margin-bottom: 0px;
}

.checkbox-label-custom {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #ffffff;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
}

.checkbox-input-custom {
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	border: 1.5px solid #D22630;
	border-radius: 2px;
	background-color: transparent;
	cursor: pointer;
	position: relative;
	transition: background-color 0.2s, border-color 0.2s;
	outline: none;
	margin-top: 1px;
}

	.checkbox-input-custom:checked {
		background-color: #D22630;
	}

		.checkbox-input-custom:checked::after {
			content: '\F272';
			/* Bootstrap Icon check-lg code */
			font-family: 'bootstrap-icons';
			position: absolute;
			color: #ffffff;
			font-size: 11px;
			font-weight: 900;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

/* Área de Termos (LGPD) */
.lgpd-terms-container {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 1rem;
	margin-top: 0.25rem;
}

.lgpd-text {
	font-size: 14px;
	color: #ffffff;
	line-height: 1.3;
	font-weight: 600;
	max-width: 255px;
}

.lgpd-link {
	color: #D22630;
	text-decoration: underline;
	font-weight: 600;
	transition: color 0.2s ease;
}

	.lgpd-link:hover {
		color: #ff3e46;
	}

/* Botão Voltar */
.btn-voltar {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	font-family: "Montserrat", sans-serif;
	text-decoration: none;
	margin-bottom: 1.5rem;
	margin-left: auto;
	padding: 8px 16px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.15);
	transition: background 0.2s ease, border-color 0.2s ease;
	top: 40px;
	right: 50px;
	position: absolute;
}

	.btn-voltar:hover {
		background: rgba(210, 38, 48, 0.15);
		border-color: #D22630;
		color: #ffffff;
	}

	.btn-voltar i {
		font-size: 16px;
	}

/* Botão Enviar */
.form-submit-btn {
	width: 100%;
	height: 44px;
	background-color: #D22630;
	color: #ffffff;
	border: none;
	border-radius: 8px;
	padding: 12px 8px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
	text-align: center;
}

	.form-submit-btn:hover {
		background-color: #b01a20;
		box-shadow: 0 6px 20px rgba(204, 32, 39, 0.4);
	}

	.form-submit-btn:active {
		transform: scale(0.98);
	}

/* ========================================
   RESPONSIVIDADE (MEDIA QUERIES)
   ======================================== */

@media (max-width: 1024px) {
	.form-inner-box {
		flex-direction: column;
		gap: 2rem;
		padding: 2.5rem 0;
	}

	.form-sidebar {
		width: 100%;
		text-align: center;
	}

	.form-columns-container {
		width: 100%;
		gap: 2rem;
	}

	.form-header-container h2 {
		font-size: 38px;
	}

	.form-header-container .subtitle {
		font-size: 26px;
	}
}

@media (max-width: 768px) {
	.form-columns-container {
		flex-direction: column;
		gap: 2rem;
	}

	.form-wrapper {
		padding: 3rem 0.5rem;
		margin: 1rem auto;
	}

	.form-header-container h2 {
		font-size: 28px;
	}

	.form-header-container .subtitle {
		font-size: 18px;
		margin-bottom: 1rem;
	}
}

/* ========================================
   MODAL AGENDAR REUNIÃO
   ======================================== */
.custom-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.75);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

	.custom-modal-overlay.active {
		opacity: 1;
		pointer-events: auto;
	}

.custom-modal {
	background: #191818;
	border: 1px solid #4B4B4B;
	border-radius: 8px;
	padding: 32px;
	width: 90%;
	max-width: 420px;
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
	transform: scale(0.95);
	transition: transform 0.3s ease;
}

.custom-modal-overlay.active .custom-modal {
	transform: scale(1);
}

.modal-icon {
	margin-bottom: 20px;
}

	.modal-icon i {
		font-size: 32px;
		color: #D22630;
	}

.modal-title {
	font-size: 28px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.25;
	margin-bottom: 32px;
	letter-spacing: -0.02em;
	margin-top: 0;
}

.modal-buttons {
	display: flex;
	gap: 16px;
}

	.modal-buttons button {
		flex: 1;
		height: 44px;
		border-radius: 6px;
		font-size: 15px;
		font-weight: 700;
		cursor: pointer;
		transition: all 0.2s ease;
		font-family: "Montserrat", sans-serif;
		display: flex;
		justify-content: center;
		align-items: center;
	}

.btn-nao {
	background-color: #000000;
	color: #ffffff;
	border: none;
}

	.btn-nao:hover {
		background-color: #222222;
	}

.btn-agendar {
	background-color: #D22630;
	color: #ffffff;
	border: none;
}

	.btn-agendar:hover {
		background-color: #b01a20;
	}

/* ========================================
   SWEETALERT2 CUSTOM DARK MODE
   ======================================== */
.swal-custom-dark {
	border: 1px solid #4B4B4B !important;
	border-radius: 8px !important;
	font-family: "Montserrat", sans-serif !important;
}

	.swal-custom-dark .swal2-title {
		font-weight: 700 !important;
		letter-spacing: -0.02em !important;
	}

	.swal-custom-dark .swal2-html-container {
		font-weight: 500 !important;
		color: #C7C7C7 !important;
	}

.swal-custom-btn {
	border-radius: 6px !important;
	font-weight: 700 !important;
	padding: 12px 32px !important;
}


/* ========================================
   Modal LGPD
======================================== */
.lgpd-modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.75);
	z-index: 9999;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

	.lgpd-modal-overlay.active {
		display: flex;
		opacity: 1;
	}

.lgpd-modal {
	background: #191818;
	border: 1px solid #4B4B4B;
	width: 600px;
	height: 500px;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
	transform: scale(0.95);
	animation: lgpdModalIn 0.3s ease forwards;
}

@keyframes lgpdModalIn {
	to {
		transform: scale(1);
	}
}

.lgpd-modal-header {
	padding: 20px 24px;
	border-bottom: 1px solid #4B4B4B;
}

	.lgpd-modal-header h2 {
		margin: 0;
		font-size: 20px;
		font-weight: 700;
		color: #ffffff;
		font-family: "Montserrat", sans-serif;
		letter-spacing: -0.02em;
	}

.lgpd-modal-body {
	flex: 1;
	overflow-y: auto;
	padding: 24px;
	font-size: 13px;
	line-height: 1.7;
	color: #C7C7C7;
	font-family: "Montserrat", sans-serif;
}

	.lgpd-modal-body::-webkit-scrollbar {
		width: 6px;
	}

	.lgpd-modal-body::-webkit-scrollbar-track {
		background: #1F1F1F;
	}

	.lgpd-modal-body::-webkit-scrollbar-thumb {
		background: #4B4B4B;
		border-radius: 3px;
	}

		.lgpd-modal-body::-webkit-scrollbar-thumb:hover {
			background: #686868;
		}

	.lgpd-modal-body h3 {
		font-size: 15px;
		font-weight: 700;
		color: #ffffff;
		margin-top: 20px;
		margin-bottom: 8px;
	}

	.lgpd-modal-body p {
		margin-bottom: 12px;
		color: #C7C7C7;
	}

	.lgpd-modal-body strong {
		color: #ffffff;
		font-weight: 600;
	}

	.lgpd-modal-body ul {
		padding-left: 20px;
		margin-bottom: 12px;
	}

		.lgpd-modal-body ul li {
			margin-bottom: 6px;
			color: #C7C7C7;
		}

.lgpd-modal-footer {
	padding: 16px 24px;
	border-top: 1px solid #4B4B4B;
	text-align: center;
}

.lgpd-modal-btn-ok {
	background-color: #D22630;
	color: #ffffff;
	border: none;
	padding: 10px 48px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 700;
	font-family: "Montserrat", sans-serif;
	cursor: pointer;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

	.lgpd-modal-btn-ok:hover {
		background-color: #b01a20;
		box-shadow: 0 6px 20px rgba(204, 32, 39, 0.4);
	}

	.lgpd-modal-btn-ok:active {
		transform: scale(0.98);
	}

@media (max-width: 650px) {
	.lgpd-modal {
		width: 95%;
		height: 80vh;
	}
}

/* ========================================
		FORM AGENDAR REUNIÃO
 ======================================== */
.form-agendamento {
	width: 100%;
}

	.form-agendamento .calendar-section {
		background: white;
		border-radius: 12px;
		box-shadow: 0 8px 32px rgba(0,0,0,0.3);
		backdrop-filter: blur(20px);
		border: 1px solid rgba(255,255,255,0.3);
	}

	.form-agendamento .calendar-box {
		padding: 30px;
	}

		.form-agendamento .calendar-box h2 {
			font-size: 18px;
			margin-bottom: 25px;
			color: #1f2937;
			font-weight: 600;
			display: flex;
			align-items: center;
			gap: 8px;
		}

			.form-agendamento .calendar-box h2 i {
				color: #10b981;
			}

	/* ========== CARDS DE DATAS ========== */
	.form-agendamento .date-cards-grid {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 10px;
		margin-bottom: 20px;
	}

	.form-agendamento .date-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		aspect-ratio: 1;
		border-radius: 7px;
		transition: all 0.2s;
		font-size: 22px;
		font-weight: 700;
		line-height: 1.1;
		gap: 4px;
		padding: 10px;
	}

		.form-agendamento .date-card small {
			display: block;
			font-size: 11px;
			font-weight: 700;
			opacity: 0.8;
			text-transform: uppercase;
			line-height: 13px;
		}

			.form-agendamento .date-card small:last-child {
				font-weight: 500;
				font-size: 10px;
			}

	.form-agendamento .date-disponivel {
		background: #ecfdf5;
		color: #1f2937;
		cursor: pointer;
		border: 1px solid #a7f3d0;
	}

		.form-agendamento .date-disponivel:hover {
			background: #d1fae5;
			border-color: #6ee7b7;
			transform: scale(1.05);
		}

	.form-agendamento .date-selecionada {
		background: #10b981 !important;
		color: white !important;
		border-color: #059669 !important;
		box-shadow: 0 2px 8px rgba(16,185,129,0.4);
	}

	/* ========== LEGENDA ========== */
	.form-agendamento .calendar-legend {
		display: flex;
		gap: 20px;
		justify-content: center;
		margin-top: 15px;
	}

	.form-agendamento .legend-item {
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 12px;
		color: #6b7280;
	}

	.form-agendamento .legend-dot {
		width: 14px;
		height: 14px;
		border-radius: 4px;
	}

		.form-agendamento .legend-dot.date-disponivel {
			background: #ecfdf5;
			border: 1px solid #a7f3d0;
		}

		.form-agendamento .legend-dot.date-selecionada {
			background: #10b981;
		}

		.form-agendamento .legend-dot.hora-disponivel {
			background: #ecfdf5;
			border: 1px solid #a7f3d0;
		}

		.form-agendamento .legend-dot.hora-selecionada {
			background: #10b981;
		}

	/* ========== HORÁRIOS ========== */
	.form-agendamento .time-slots {
		margin-top: 25px;
		padding-top: 25px;
		border-top: 2px solid rgba(0,0,0,0.08);
	}

		.form-agendamento .time-slots h3 {
			font-size: 16px;
			color: #1f2937;
			margin-bottom: 15px;
			font-weight: 600;
			display: flex;
			align-items: center;
			gap: 8px;
		}

			.form-agendamento .time-slots h3 i {
				color: #10b981;
			}

	.form-agendamento .hours-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 8px;
		margin-bottom: 12px;
	}

	.form-agendamento .hora-disponivel {
		padding: 12px 8px;
		text-align: center;
		background: #ecfdf5;
		color: #1f2937;
		border: 2px solid #a7f3d0;
		border-radius: 8px;
		cursor: pointer;
		transition: all 0.2s;
		font-weight: 600;
		font-size: 13px;
	}

		.form-agendamento .hora-disponivel:hover {
			background: #d1fae5;
			border-color: #6ee7b7;
			transform: translateY(-1px);
		}

	.form-agendamento .hora-selecionada {
		background: #10b981 !important;
		color: white !important;
		border-color: #059669 !important;
		box-shadow: 0 2px 8px rgba(16,185,129,0.4);
	}


	/* ========== RESUMO ========== */
	.form-agendamento .booking-summary {
		margin-bottom: 20px;
	}

	.form-agendamento .summary-header {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 12px;
	}

		.form-agendamento .summary-header i {
			color: #10b981;
			font-size: 1.1rem;
		}

		.form-agendamento .summary-header h3 {
			font-size: 14px;
			color: #1f2937;
			font-weight: 600;
		}

	.form-agendamento .summary-field {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 12px;
		background: #ecfdf5;
		border-radius: 8px;
		margin-bottom: 6px;
	}

	.form-agendamento .summary-label {
		font-size: 12px;
		color: #6b7280;
		font-weight: 500;
	}

	.form-agendamento .summary-value {
		font-size: 14px;
		color: #1f2937;
		font-weight: 600;
		flex: 1;
		text-align: right;
		margin-right: 8px;
	}

	.form-agendamento .btn-remove {
		background: none;
		border: none;
		color: #dc2626;
		cursor: pointer;
		font-size: 16px;
		padding: 0 4px;
		transition: color 0.2s;
	}

		.form-agendamento .btn-remove:hover {
			color: #991b1b;
		}

	/* ========== OBSERVAÇÃO ========== */
	.form-agendamento .obs-section {
		margin-bottom: 20px;
	}

		.form-agendamento .obs-section label {
			display: block;
			font-size: 12px;
			font-weight: 600;
			color: #6b7280;
			margin-bottom: 8px;
		}

			.form-agendamento .obs-section label i {
				color: #10b981;
				margin-right: 4px;
			}

		.form-agendamento .obs-section textarea {
			width: 100%;
			padding: 10px 12px;
			border: 2px solid #e5e7eb;
			border-radius: 8px;
			font-family: inherit;
			font-size: 13px;
			resize: vertical;
			transition: border-color 0.3s;
			background: white;
			color: #1f2937;
		}

			.form-agendamento .obs-section textarea:focus {
				outline: none;
				border-color: #10b981;
			}

	/* ========== BOTÃO CONFIRMAR ========== */
	.form-agendamento .btn-confirmar {
		width: 100%;
		padding: 14px;
		background: #10b981;
		color: white;
		border: none;
		border-radius: 10px;
		font-size: 14px;
		font-weight: 600;
		font-family: inherit;
		cursor: pointer;
		transition: all 0.3s;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
	}

		.form-agendamento .btn-confirmar:hover {
			background: #059669;
			transform: translateY(-1px);
		}
