/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
.form-control,
.form-select {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  color: var(--dark);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  color: var(--dark);
}

.form-label {
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.form-floating > .form-control,
.form-floating > .form-select {
  height: calc(3.5rem + 2px);
  padding: 1rem 0.75rem;
}

.form-floating > textarea.form-control {
  height: auto;
  min-height: 150px;
}

.form-floating > label {
  padding: 1rem 0.75rem;
}

/* Quill Editor Customization */
#editor-container {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  min-height: 200px;
  background: white;
}

#editor-container:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.ql-toolbar.ql-snow {
  border: 1px solid #ced4da;
  border-bottom: none;
  border-radius: 0.25rem 0.25rem 0 0;
  background: #f8f9fa;
}

.ql-container.ql-snow {
  border: 1px solid #ced4da;
  border-radius: 0 0 0.25rem 0.25rem;
}

.ql-editor {
  min-height: 150px;
  font-size: 1rem;
  font-family: inherit;
}

.ql-editor.ql-blank::before {
  color: #6c757d;
  font-style: normal;
}

/* Alerts for forms */
.c-alert {
  display: none;
  padding: 15px;
  border-radius: 4px;
  margin-top: 20px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.c-alert--show {
  display: block;
  animation: fadeIn 0.5s;
}

.c-alert--success {
  background-color: rgba(25, 135, 84, 0.1);
  color: #198754;
  border: 1px solid rgba(25, 135, 84, 0.2);
}

.c-alert--error {
  background-color: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  border: 1px solid rgba(220, 53, 69, 0.2);
}

/* --- Estilos da Seção de Cadastro e Mapa --- */

.email-signup-section {
  background-color: var(--senac-dark-blue);
  color: #fff;
}

.email-signup-section a {
  color: #fff;
  text-decoration: none;
}

.email-signup-section a:hover {
  text-decoration: underline;
}

.email-signup-section h2 {
  font-weight: 700;
}

.subtitle-orange {
  color: var(--senac-accent-orange);
  font-weight: 500;
}

/* Customização dos campos do formulário */
.email-signup-section .form-control,
.email-signup-section .form-select {
  background-color: #ffffff; /* Fundo branco para melhor contraste */
  border: 1px solid #e0e6ed; /* Borda sutil para definição */
  padding: 0.85rem 1rem;
  border-radius: 25px; /* Bordas bem arredondadas */
  color: #333333 !important; /* Texto mais escuro para melhor legibilidade */
  transition: all 0.3s ease; /* Transição suave para interações */
}

/* Estilo específico para inputs de texto */
.email-signup-section .form-control {
  color: #333333 !important;
  font-weight: 400;
}

/* Garantir que o texto digitado seja visível durante a digitação */
.email-signup-section .form-control:focus {
  background-color: #ffffff !important;
  border-color: var(--senac-primary-blue);
  box-shadow: 0 0 0 0.2rem rgba(0, 82, 241, 0.15);
  outline: none;
  color: #333333 !important;
}

/* Efeito de foco nos campos */
.email-signup-section .form-control:focus,
.email-signup-section .form-select:focus {
  background-color: #ffffff;
  border-color: var(--senac-primary-blue);
  box-shadow: 0 0 0 0.2rem rgba(0, 82, 241, 0.15);
  outline: none;
}

/* Estilo para os placeholders */
.email-signup-section .form-control::placeholder {
  color: #8a8a8a !important; /* Cinza médio para boa legibilidade */
  opacity: 1; /* Garantir visibilidade em todos os navegadores */
}

/* Estilo para quando o input tem conteúdo */
.email-signup-section .form-control:valid,
.email-signup-section .form-control:not(:placeholder-shown) {
  color: #333333 !important;
  background-color: #ffffff !important;
}

/* Estilo específico para select - texto da opção selecionada */
.email-signup-section .form-select {
  color: #333333 !important; /* Garante que o texto selecionado seja legível */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  padding-right: 3rem; /* Espaço para a seta personalizada */
}

/* Estilo para quando uma opção válida está selecionada */
.email-signup-section .form-select:valid {
  color: #333333 !important;
  font-weight: 500;
}

/* Estilo para as opções do select quando aberto */
.email-signup-section .form-select option {
  background-color: #ffffff !important;
  color: #333333 !important;
  padding: 0.5rem;
}

/* Estilo para a primeira opção (placeholder) */
.email-signup-section .form-select option:first-child {
  color: #8a8a8a !important;
  font-style: italic;
}

/* Estilo para opções selecionadas no dropdown */
.email-signup-section .form-select option:checked {
  background-color: var(--senac-light-blue) !important;
  color: var(--senac-dark-blue) !important;
  font-weight: 500;
}

/* Efeito hover nas opções */
.email-signup-section .form-select option:hover {
  background-color: #f8f9fa !important;
}

/* Placeholder para o reCAPTCHA */
.recaptcha-placeholder {
  /* Este é apenas um estilo visual para o placeholder. 
       O reCAPTCHA real do Google terá seu próprio estilo. */
  background-color: #f0f2f5;
  color: #333;
  padding: 0.75rem;
  border-radius: 4px;
  display: inline-block;
}

/* --- Estilos de Validação do Formulário --- */

/* Campos válidos */
.email-signup-section .form-control.is-valid,
.email-signup-section .form-select.is-valid {
  border-color: #28a745;
  background-color: #ffffff;
}

.email-signup-section .form-control.is-valid:focus,
.email-signup-section .form-select.is-valid:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Campos inválidos */
.email-signup-section .form-control.is-invalid,
.email-signup-section .form-select.is-invalid {
  border-color: #dc3545;
  background-color: #ffffff;
}

.email-signup-section .form-control.is-invalid:focus,
.email-signup-section .form-select.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Mensagens de validação */
.email-signup-section .invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #dc3545;
}

.email-signup-section .valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #28a745;
}

/* Mostrar mensagens quando os campos estão inválidos/válidos */
.email-signup-section .form-control.is-invalid ~ .invalid-feedback,
.email-signup-section .form-select.is-invalid ~ .invalid-feedback {
  display: block;
}

.email-signup-section .form-control.is-valid ~ .valid-feedback,
.email-signup-section .form-select.is-valid ~ .valid-feedback {
  display: block;
}

/* Ícones de validação */
.email-signup-section .form-control.is-valid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%2328a745' d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem 1rem;
  padding-right: 3rem; /* Espaço suficiente para o ícone */
}

.email-signup-section .form-control.is-invalid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23dc3545' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem 1rem;
  padding-right: 3rem; /* Espaço suficiente para o ícone */
}

/* Garantir que os ícones não sejam cortados nos campos com borda arredondada */
.email-signup-section .form-control.is-valid,
.email-signup-section .form-control.is-invalid {
  overflow: visible;
}

/* Ajustar especificamente para selects com ícones de validação */
.email-signup-section .form-select.is-valid {
  background-image:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%2328a745' d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z'/%3e%3c/svg%3e"),
    url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-position:
    right 1rem center,
    right 3rem center;
  background-size:
    1rem 1rem,
    1rem 1rem;
  background-repeat: no-repeat, no-repeat;
  padding-right: 4.5rem;
}

.email-signup-section .form-select.is-invalid {
  background-image:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23dc3545' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z'/%3e%3c/svg%3e"),
    url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-position:
    right 1rem center,
    right 3rem center;
  background-size:
    1rem 1rem,
    1rem 1rem;
  background-repeat: no-repeat, no-repeat;
  padding-right: 4.5rem;
}