html,
body {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	margin: 0;
}

body {
	flex: 1;
}

.container {
	flex: 1;
}

footer {
	margin-top: auto; /* Garante que o footer fique no final */
}

/* Alterações no dropdown */
#cart-dropdown {
	display: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
	opacity: 0;
	transform: translateY(-10px);
	color: black; /* Cor do texto */
	border: 1px solid #bba05d; /* Borda com destaque */
	position: absolute; /* Garante que o dropdown se sobreponha */
	top: 100%; /* Faz com que o dropdown apareça logo abaixo do ícone */
	right: 0;
	z-index: 50; /* Garantir que o dropdown sobreponha outros elementos */
}

/* Quando o dropdown está ativo, é exibido com transição suave */
#cart-dropdown.active {
	display: block;
	opacity: 1;
	transform: translateY(0);
}

/* Estilos adicionais */
#cart-dropdown h4 {
	color: #bba05d; /* Cor do título */
}

#cart-items li span {
	color: black; /* Cor do texto padrão */
}

#cart-dropdown hr {
	border-color: #bba05d; /* Cor do divisor */
}

#cart-dropdown .botao {
	background-color: #bba05d; /* Fundo do botão */
	color: #6e1617; /* Cor do texto do botão */
	transition: background-color 0.3s ease;
}

#cart-dropdown .botao:hover {
	background-color: #6e1617; /* Hover para o botão */
	color: white; /* Cor do texto no hover */
}

/* Container de Pesquisa */
.search-container {
	position: relative;
}

/* Estilo do Input */
.search-input {
	width: 100%; /* Ajuste para responsividade */
	max-width: 600px; /* Limite máximo de largura */
	padding: 10px 16px; /* Equivalente ao px-4 py-2 */
	border-radius: 9999px; /* Bordas arredondadas */
	border: 1px solid #ccc; /* Cor da borda */
	outline: none;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Foco no Input */
.search-input:focus {
	border-color: #6e1617; /* Cor principal */
	box-shadow: 0 0 4px 2px rgba(110, 22, 23, 0.4); /* Anel de foco */
}

/* Estilo do Botão */
.search-button {
	position: absolute;
	top: 50%;
	right: 8px; /* Espaço entre botão e borda do input */
	transform: translateY(-50%);
	background: none;
	border: none;
	color: #666; /* Cor inicial do ícone */
	cursor: pointer;
	transition: color 0.3s ease;
	font-size: 16px; /* Ajusta o tamanho do ícone */
}

/* Hover no Botão */
.search-button:hover {
	color: #6e1617; /* Cor principal */
}

/* Barra Secundária */
.secondary-navbar {
	background-color: #6e1617; /* Cor principal */
	border-top: 2px solid #bba05d; /* Linha decorativa com cor secundária */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

/* Links da Barra */
.navbar-link {
	color: #ffffff; /* Cor branca para os links */
	font-weight: 600;
	text-decoration: none;
	transition: color 0.3s ease;
}

/* Hover nos Links */
.navbar-link:hover {
	color: #bba05d; /* Cor secundária no hover */
}

/* Botão de Pedidos */
.btn-pedidos {
	background-color: #bba05d; /* Cor secundária */
	color: #ffffff; /* Texto branco */
	font-weight: 700;
	padding: 8px 16px; /* Ajusta o espaçamento */
	border-radius: 4px; /* Bordas arredondadas */
	text-decoration: none;
	display: flex;
	align-items: center;
	transition: background-color 0.3s ease;
}

/* Hover no Botão */
.btn-pedidos:hover {
	background-color: #6e1617; /* Cor principal no hover */
	color: #ffffff; /* Mantém o texto branco */
}

header,
.hero-section,
footer {
	background-color: #6e1617;
}

.btn-primary {
	background-color: #6e1617;
	color: white;
	transition: background-color 0.3s ease;
}

.btn-primary:hover {
	background-color: #bba05d;
	color: #ffffff;
}

.feature-icon {
	color: #6e1617;
}

.text-accent,
.titulo,
.logofont {
	color: #bba05d;
}

.register-container {
	max-width: 600px;
	margin: 0 auto;
	background-color: white;
	padding: 2.5rem;
	border-radius: 20px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.register-title {
	font-size: 2.25rem;
	font-weight: 800;
	text-align: center;
	color: #6e1617;
	margin-bottom: 1.5rem;
}

/* Estilos do formulário */
.register-form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Estilos de cada campo de entrada */
.input-container {
	position: relative;
}

.input-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: #6e1617;
}

.input-wrapper {
	position: relative;
}

.input-field {
	width: 100%;
	padding: 0.75rem 1.5rem 0.75rem 2.5rem; /* Ajuste do padding esquerdo para o ícone */
	margin-top: 0.5rem;
	border: 1px solid #ccc;
	border-radius: 1.25rem;
	font-size: 1rem;
	outline: none;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.input-field::placeholder {
	color: #888;
	opacity: 1; /* Garante que o placeholder seja opaco */
}

/* Ícones ao lado dos campos de entrada */
.input-icon {
	position: absolute;
	top: 50%;
	left: 1rem; /* Espaçamento ajustado */
	transform: translateY(-50%);
	font-size: 1.25rem;
	color: #888;
	z-index: 10; /* Garante que o ícone fique acima do placeholder */
}

/* Estilo de foco nos campos de entrada */
.input-field:focus {
	border-color: #6e1617;
	box-shadow: 0 0 4px rgba(110, 22, 23, 0.4);
}

/* Estilo do botão de enviar */
.submit-btn {
	width: 100%;
	padding: 1rem;
	background-color: #6e1617;
	color: white;
	font-weight: 600;
	font-size: 1.125rem;
	border-radius: 9999px;
	transition: background-color 0.3s ease, transform 0.2s ease;
	cursor: pointer;
}

.submit-btn:hover {
	background-color: #bba05d;
	transform: scale(1.05);
}

.submit-btn:focus {
	outline: none;
	box-shadow: 0 0 4px rgba(110, 22, 23, 0.6);
}

/* Link de login */
.login-link {
	text-align: center;
	margin-top: 1.5rem;
}

.login-link-text {
	color: #6e1617;
	font-weight: 600;
	text-decoration: none;
}

.login-link-text:hover {
	color: #bba05d;
}

/* Responsividade */
@media (max-width: 640px) {
	.register-container {
		padding: 1.5rem;
	}

	.register-title {
		font-size: 1.75rem;
	}

	.input-field {
		padding: 0.75rem;
	}
}

/* Estilo base da notificação */
.notification {
	position: fixed;
	top: 20px;
	right: 20px;
	padding: 15px 20px;
	border-radius: 5px;
	color: #fff;
	font-size: 14px;
	z-index: 1000;
	opacity: 0;
	transform: translateX(100%);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Estilo para notificação de sucesso */
.notification.success {
	background-color: #28a745;
	/* Verde */
}

/* Estilo para notificação de erro */
.notification.error {
	background-color: #dc3545;
	/* Vermelho */
}

/* Classe para exibir a notificação */
.notification.show {
	opacity: 1;
	transform: translateX(0);
}