/**
 * Estilos customizados Colibex para o wizard de cadastro
 */

/* Cores do tema Colibex */
:root {
	--color-theme: #2196F3;
	--color-secondary: #083b48;
	--color-light: #e3f2fd;
}

/* Customização dos botões de progresso - baseado no CSS original */
.multisteps-form__progress-btn {
	position: relative;
	margin-bottom: 85px;
}

.multisteps-form__progress-btn span {
	width: 40px;
	color: #fff;
	height: 40px;
	font-size: 16px;
	font-weight: 700;
	line-height: 40px;
	border-radius: 50%;
	background: #bcbdbd;
	position: relative;
	text-align: center;
	display: inline-block;
	z-index: 1;
}

.multisteps-form__progress-btn.js-active span {
	background: var(--color-theme) !important;
	color: white !important;
}

.multisteps-form__progress-btn.js-active:before {
	content: "";
	top: -8px;
	left: -8px;
	width: 55px;
	height: 55px;
	position: absolute;
	border-radius: 100%;
	border: 2px solid var(--color-theme);
	z-index: 3;
}

.multisteps-form__progress-btn span:before {
	content: "";
	width: 2px;
	height: 95px;
	background: #b8b9b9;
	position: absolute;
	right: 18px;
	top: 40px;
}

.multisteps-form__progress-btn span:after {
	content: "";
	width: 2px;
	height: 0;
	background: var(--color-theme);
	position: absolute;
	right: 18px;
	top: 40px;
	transition: all 0.6s ease;
}

.multisteps-form__progress-btn.js-active span:after {
	height: 86px;
}

.multisteps-form__progress-btn.last span:before,
.multisteps-form__progress-btn.last span:after {
	display: none;
}

/* Botões de navegação */
.js-btn-next, 
.js-btn-prev, 
button[type="submit"],
.actions ul li span,
.actions ul li button {
	background-color: var(--color-theme) !important;
	border-color: var(--color-theme) !important;
}

.js-btn-next:hover, 
.js-btn-prev:hover, 
button[type="submit"]:hover {
	background-color: var(--color-secondary) !important;
	border-color: var(--color-secondary) !important;
	opacity: 0.9;
}

/* Links */
a {
	color: var(--color-theme);
}

a:hover {
	color: var(--color-secondary);
}

/* Radio buttons customizados */
.gender-selection label input[type="radio"]:checked + .checkmark {
	background-color: var(--color-theme);
}

/* Inputs focus */
.form-control:focus {
	border-color: var(--color-theme);
	box-shadow: 0 0 0 0.2rem rgba(255, 88, 12, 0.25);
}

/* Progress bar */
.progress-bar {
	background-color: var(--color-theme) !important;
}

/* Estilos para seleção de subdomínio */
.subdomain-option {
	border: 2px solid #e0e0e0;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 15px;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	background: white;
}

.subdomain-option:hover {
	border-color: var(--color-theme);
	box-shadow: 0 4px 12px rgba(255, 88, 12, 0.15);
	transform: translateX(5px);
}

.subdomain-option.active {
	border-color: var(--color-theme);
	background-color: var(--color-light);
	box-shadow: 0 4px 12px rgba(255, 88, 12, 0.2);
}

.subdomain-option input[type="radio"] {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	cursor: pointer;
}

.subdomain-text {
	font-size: 18px;
	font-weight: 600;
	color: var(--color-secondary);
	margin-bottom: 5px;
}

.subdomain-desc {
	font-size: 14px;
	color: #666;
}

.subdomain-badge {
	display: inline-block;
	background-color: var(--color-theme);
	color: white;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 11px;
	margin-left: 10px;
	font-weight: 600;
}

/* Grid de cores */
.color-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 30px 0;
}

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

.color-option {
	border: 3px solid transparent;
	border-radius: 12px;
	padding: 0;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	background: white;
}

.color-box {
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 24px;
	font-weight: 600;
	position: relative;
}

.color-option:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.color-option.active {
	border-color: var(--color-secondary);
	box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.color-option input[type="radio"] {
	position: absolute;
	opacity: 0;
}

.color-check {
	position: absolute;
	top: 10px;
	right: 10px;
	background: white;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: #4CAF50;
	font-weight: bold;
}

.color-option.active .color-check {
	display: flex;
}

.color-name {
	background: rgba(0,0,0,0.5);
	padding: 10px;
	text-align: center;
	font-size: 14px;
	color: white;
	font-weight: 500;
}

/* Validação de senha */
.password-strength {
	margin-top: 10px;
}

.password-strength-bar {
	height: 6px;
	background-color: #e0e0e0;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 8px;
}

.password-strength-fill {
	height: 100%;
	width: 0%;
	transition: all 0.3s ease;
	border-radius: 3px;
}

.senha-fraca {
	background-color: #f44336;
}

.senha-media {
	background-color: #ff9800;
}

.senha-forte {
	background-color: #4caf50;
}

.password-requirements {
	margin-top: 15px;
	padding: 15px;
	background-color: #f5f5f5;
	border-radius: 8px;
}

.password-requirements ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.password-requirements li {
	padding: 5px 0;
	color: #999;
	font-size: 14px;
	transition: color 0.3s ease;
}

.password-requirements li:before {
	content: '✗ ';
	color: #f44336;
	font-weight: bold;
	margin-right: 8px;
}

.password-requirements li.requisito-ok {
	color: #4caf50;
}

.password-requirements li.requisito-ok:before {
	content: '✓ ';
	color: #4caf50;
}

.password-toggle {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: #666;
	z-index: 10;
}

.password-toggle:hover {
	color: var(--color-theme);
}

.password-input-wrapper {
	position: relative;
}

.password-input-wrapper .form-control {
	padding-right: 45px;
}

.password-match-message {
	margin-top: 8px;
	font-size: 14px;
	font-weight: 500;
}

/* Resumo de cadastro */
.resumo-cadastro {
	background: #f8f9fa;
	border-radius: 12px;
	padding: 30px;
	margin: 20px 0;
}

.resumo-item {
	padding: 15px;
	margin-bottom: 15px;
	background: white;
	border-radius: 8px;
	border-left: 4px solid var(--color-theme);
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.resumo-label {
	font-size: 12px;
	color: #666;
	text-transform: uppercase;
	margin-bottom: 5px;
	font-weight: 600;
}

.resumo-valor {
	font-size: 16px;
	font-weight: 600;
	color: var(--color-secondary);
}

/* Preview do site */
.site-preview {
	border: 2px solid #e0e0e0;
	border-radius: 12px;
	padding: 20px;
	text-align: center;
	background: white;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.site-preview-header {
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 10px;
	color: white;
	font-weight: 600;
	font-size: 16px;
}

/* Loading animation */
.loading-subdominios {
	text-align: center;
	padding: 40px;
	display: none;
}

.loading-subdominios.active {
	display: block;
}

.spinner {
	border: 4px solid #f3f3f3;
	border-top: 4px solid var(--color-theme);
	border-radius: 50%;
	width: 50px;
	height: 50px;
	animation: spin 1s linear infinite;
	margin: 0 auto 15px;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Responsividade */
@media (max-width: 768px) {
	.resumo-cadastro {
		padding: 20px;
	}
	
	.resumo-item {
		padding: 12px;
	}
	
	.color-grid {
		gap: 15px;
	}
	
	.color-box {
		height: 100px;
	}
}

/* Melhorias visuais */
.step-no {
	color: var(--color-theme);
	font-weight: 600;
}

.bottom-line:after {
	background-color: var(--color-theme);
}

h2 {
	color: var(--color-secondary);
}

/* Checkbox de termos */
input[type="checkbox"] {
	width: 18px;
	height: 18px;
	cursor: pointer;
}

/* Desabilitar botão voltar na primeira etapa */
.actions ul li.disable span {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}

