/**
 * @file
 * Estilos gerais para webforms do Portal do Cliente Sanepar.
 */

/* ========================================
   Remove yellow box-shadow from focusable elements (Cohesion override)
   ======================================== */

/* Override Cohesion's .coh-style-focusable-content yellow box-shadow */
.coh-style-focusable-content input:focus,
.coh-style-focusable-content select:focus,
.coh-style-focusable-content textarea:focus,
.coh-style-focusable-content button:focus,
.coh-style-focusable-content a:focus,
.coh-style-focusable-content .card-link:focus:after {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* Global override for all form elements */
input:focus,
select:focus,
textarea:focus,
button:focus,
a:focus {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* ========================================
   Remove yellow box-shadow from focusable elements (Cohesion override)
   ======================================== */

/* Override Cohesion's .coh-style-focusable-content yellow box-shadow */
.coh-style-focusable-content input:focus,
.coh-style-focusable-content select:focus,
.coh-style-focusable-content textarea:focus,
.coh-style-focusable-content button:focus,
.coh-style-focusable-content a:focus,
.coh-style-focusable-content .card-link:focus:after {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* Global override for all form elements */
input:focus,
select:focus,
textarea:focus,
button:focus,
a:focus {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* ========================================
   Radio Buttons
   ======================================== */

/* Remover borda amarela ao clicar nos radio buttons */
.webform-submission-form .form-radios input[type="radio"],
.webform-submission-form .form-radios input[type="radio"]:focus,
.webform-submission-form .form-radios input[type="radio"]:active,
.webform-submission-form .form-radios input[type="radio"]:focus-visible,
.webform-submission-form .webform-type-radios input[type="radio"],
.webform-submission-form .webform-type-radios input[type="radio"]:focus,
.webform-submission-form .webform-type-radios input[type="radio"]:active,
.webform-submission-form .webform-type-radios input[type="radio"]:focus-visible,
.form-radios input[type="radio"],
.form-radios input[type="radio"]:focus,
.form-radios input[type="radio"]:active,
.form-radios input[type="radio"]:focus-visible,
.webform-type-radios input[type="radio"],
.webform-type-radios input[type="radio"]:focus,
.webform-type-radios input[type="radio"]:active,
.webform-type-radios input[type="radio"]:focus-visible {
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  box-shadow: none !important;
}

/* Estado selecionado — radios são renderizados nativamente (não há
   appearance: none para radio em nenhuma camada do portal), então o
   indicador azul deve vir de accent-color; box-shadow pintaria a caixa
   quadrada do input por cima do círculo nativo. */
.form-radios input[type="radio"]:checked,
.webform-type-radios input[type="radio"]:checked,
.webform-submission-form .form-radios input[type="radio"]:checked,
.webform-submission-form .webform-type-radios input[type="radio"]:checked {
  border-color: #0862AD !important;
  box-shadow: none !important;
  accent-color: #0862AD !important;
}

/* Remover outline do container dos radios também */
.form-radios:focus-within,
.webform-type-radios:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

/* ========================================
   Checkboxes
   ======================================== */

/* Remover borda amarela dos checkboxes também */
.webform-submission-form input[type="checkbox"]:focus,
.webform-submission-form input[type="checkbox"]:focus-visible,
input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible {
  outline: none !important;
  outline-width: 0 !important;
  box-shadow: none !important;
}

/* ========================================
   Botões de Formulário
   ======================================== */

/* Botão Voltar */
.webform-button--previous {
  appearance: none;
  border: 1px solid #0862ad;
  border-radius: 0 20px 0 20px;
  padding: 13px 16px;
  min-width: 170px;
  background: #fff;
  color: #0862ad;
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.webform-button--previous:hover {
  color: #064f8c;
  border-color: #064f8c;
  background: #f5f5f5;
}

/* Botão Enviar */
.webform_submition_btn,
.webform-button--submit {
  appearance: none;
  border: 1px solid #0862ad;
  border-radius: 0 20px 0 20px;
  padding: 13px 16px;
  min-width: 170px;
  background: #0862ad;
  color: #fff;
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.webform_submition_btn:hover,
.webform-button--submit:hover {
  background: #064f8c;
  border-color: #064f8c;
}

/* ========================================
   Spacing and Layout
   ======================================== */

/* Specific spacing for Contact Information */
.coh-style-webform #edit-contact-information {
  margin-top: 2rem !important;
}

/* Specific spacing for Police Report fieldset */
.coh-style-webform #edit-water-incident-report {
  margin-bottom: 2rem !important;
}

/* Radio button spacing */
.coh-style-webform .webform-options-display-side-by-side .form-type-radio input[type="radio"] {
  margin-right: 0.5rem !important;
}

/* ========================================
   Mobile Responsive
   ======================================== */

/* Mobile buttons - 100% width with spacing */
@media (max-width: 768px) {
  .coh-style-webform .webform-button--submit,
  .coh-style-webform .webform-button--previous,
  .coh-style-webform .form-actions button,
  .coh-style-webform .form-actions a {
    width: 100% !important;
    margin-bottom: 1rem !important;
    display: block !important;
  }
}

/* ========================================
   Formulário de Informações Comerciais
   ======================================== */

/* Disclaimer */
.webform-disclaimer {
  background-color: #F8F9FA;
  border-left: 4px solid #0066CC;
  padding: 16px 20px;
  margin-bottom: 24px;
  border-radius: 0 8px 8px 0;
}

.webform-disclaimer h3 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.webform-disclaimer p {
  margin: 0;
  color: #666;
  line-height: 1.5;
}

/* Orientações */
.webform-orientations {
  background-color: #E7F3FF;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 16px 0 24px 0;
}

.webform-orientations h4 {
  margin: 0 0 8px 0;
  color: #0066CC;
  font-size: 16px;
  font-weight: 600;
}

.webform-orientations p {
  margin: 0;
  color: #333;
  line-height: 1.5;
}

/* Mensagem de Aviso SIC */
.webform-warning-message {
  background-color: #FFF3CD;
  border: 1px solid #FFECB5;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 16px 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.webform-warning-message .warning-icon::before {
  content: "⚠️";
  font-size: 20px;
}

.webform-warning-message p {
  margin: 0;
  color: #664D03;
  line-height: 1.5;
}

.webform-warning-message a {
  color: #664D03;
  text-decoration: underline;
  font-weight: 500;
}

.webform-warning-message a:hover {
  color: #332701;
}

/* Botão desabilitado */
.commercial-info-actions .button--disabled,
.webform-button--submit.button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  background-color: #999 !important;
  border-color: #999 !important;
}

/* Formulário de Informações Comerciais - Layout */
.webform-submission-commercial-information-request-form,
.webform-submission-commercial-information-request-add-form {
  max-width: 100%;
}

.webform-submission-commercial-information-request-form fieldset,
.webform-submission-commercial-information-request-add-form fieldset {
  margin-bottom: 24px;
  padding: 0;
  border: none;
}

.webform-submission-commercial-information-request-form fieldset legend,
.webform-submission-commercial-information-request-add-form fieldset legend {
  display: block;
  width: 100%;
  float: none;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  padding: 0;
}

.webform-submission-commercial-information-request-form fieldset .fieldset-legend,
.webform-submission-commercial-information-request-add-form fieldset .fieldset-legend {
  display: block;
  width: 100%;
}

.webform-submission-commercial-information-request-form .fieldset-wrapper,
.webform-submission-commercial-information-request-add-form .fieldset-wrapper {
  width: 100%;
  padding: 0;
}

/* Detalhes da Solicitação - layout em bloco */
.webform-submission-commercial-information-request-form #edit-request-details .fieldset-wrapper,
.webform-submission-commercial-information-request-add-form #edit-request-details .fieldset-wrapper {
  display: block;
  clear: both;
}

.webform-submission-commercial-information-request-form #edit-request-details .fieldset-wrapper > .form-item,
.webform-submission-commercial-information-request-add-form #edit-request-details .fieldset-wrapper > .form-item,
.webform-submission-commercial-information-request-form #edit-request-details .fieldset-wrapper > div,
.webform-submission-commercial-information-request-add-form #edit-request-details .fieldset-wrapper > div {
  display: block;
  width: 100%;
  clear: both;
}

/* Informações de contato - manter flexbox horizontal */
.webform-submission-commercial-information-request-form .fieldset-highlighted .fieldset-wrapper,
.webform-submission-commercial-information-request-add-form .fieldset-highlighted .fieldset-wrapper {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.webform-submission-commercial-information-request-form .fieldset-highlighted .fieldset-wrapper > div:first-child,
.webform-submission-commercial-information-request-add-form .fieldset-highlighted .fieldset-wrapper > div:first-child {
  flex: 2 1 0;
}

.webform-submission-commercial-information-request-form .fieldset-highlighted .fieldset-wrapper > div:nth-child(2),
.webform-submission-commercial-information-request-form .fieldset-highlighted .fieldset-wrapper > div:nth-child(3),
.webform-submission-commercial-information-request-add-form .fieldset-highlighted .fieldset-wrapper > div:nth-child(2),
.webform-submission-commercial-information-request-add-form .fieldset-highlighted .fieldset-wrapper > div:nth-child(3) {
  flex: 1 1 0;
}

/* Campos de texto */
.webform-submission-commercial-information-request-form .form-item,
.webform-submission-commercial-information-request-add-form .form-item {
  margin-bottom: 16px;
}

.webform-submission-commercial-information-request-form .form-text,
.webform-submission-commercial-information-request-form .form-email,
.webform-submission-commercial-information-request-form .form-tel,
.webform-submission-commercial-information-request-form .form-select,
.webform-submission-commercial-information-request-form .form-textarea,
.webform-submission-commercial-information-request-add-form .form-text,
.webform-submission-commercial-information-request-add-form .form-email,
.webform-submission-commercial-information-request-add-form .form-tel,
.webform-submission-commercial-information-request-add-form .form-select,
.webform-submission-commercial-information-request-add-form .form-textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Remover bordas duplicadas ao focar */
.webform-submission-commercial-information-request-form .form-text:focus,
.webform-submission-commercial-information-request-form .form-email:focus,
.webform-submission-commercial-information-request-form .form-tel:focus,
.webform-submission-commercial-information-request-form .form-select:focus,
.webform-submission-commercial-information-request-form .form-textarea:focus,
.webform-submission-commercial-information-request-add-form .form-text:focus,
.webform-submission-commercial-information-request-add-form .form-email:focus,
.webform-submission-commercial-information-request-add-form .form-tel:focus,
.webform-submission-commercial-information-request-add-form .form-select:focus,
.webform-submission-commercial-information-request-add-form .form-textarea:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Textarea específico */
.webform-submission-commercial-information-request-form textarea,
.webform-submission-commercial-information-request-add-form textarea {
  width: 100% !important;
  max-width: 100% !important;
  resize: vertical;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Upload de arquivo */
.webform-submission-commercial-information-request-form .form-managed-file,
.webform-submission-commercial-information-request-add-form .form-managed-file {
  width: 100%;
}

/* Responsivo */
@media (max-width: 768px) {
  .webform-submission-commercial-information-request-form .webform-flexbox,
  .webform-submission-commercial-information-request-add-form .webform-flexbox {
    flex-direction: column;
  }

  .webform-submission-commercial-information-request-form .webform-flexbox > .webform-flex,
  .webform-submission-commercial-information-request-add-form .webform-flexbox > .webform-flex {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  .webform-submission-commercial-information-request-form .fieldset-highlighted .fieldset-wrapper,
  .webform-submission-commercial-information-request-add-form .fieldset-highlighted .fieldset-wrapper {
    display: block;
  }

  .webform-submission-commercial-information-request-form .fieldset-highlighted .fieldset-wrapper > div,
  .webform-submission-commercial-information-request-add-form .fieldset-highlighted .fieldset-wrapper > div {
    width: 100% !important;
  }
}

/* ========================================
   Legend "Informações de contato" — apenas mobile.
   Desktop mantém o título dentro do card (default Cohesion: float:left, 28px).
   No mobile, float:none coloca a legend sobre a borda do fieldset, unificando
   o render entre iOS WebKit e Android Blink. width:auto evita o vão branco
   largo na borda; margin-left afasta o texto do canto arredondado.
   ======================================== */
@media (max-width: 768px) {
  .webform-submission-form .fieldset-highlighted legend {
    display: block;
    width: auto;
    float: none;
    white-space: nowrap;
    margin-left: 16px;
    margin-bottom: 16px;
    padding: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }
}