/**
 * @file
 * WCAG 2.1 AA - Estilos de acessibilidade para webforms.
 * Portalcliente - Sanepar
 */

/* ========================================
   Focus States - WCAG 2.4.7
   Overwrites outline:none from webform-styles.css
   ======================================== */

/* Disabled as aked by Client 15/01/2026 */

/* .webform-submission-form input[type="text"]:focus,
.webform-submission-form input[type="email"]:focus,
.webform-submission-form input[type="tel"]:focus,
.webform-submission-form input[type="number"]:focus,
.webform-submission-form input[type="password"]:focus,
.webform-submission-form input[type="url"]:focus,
.webform-submission-form input[type="search"]:focus,
.webform-submission-form input[type="date"]:focus,
.webform-submission-form textarea:focus,
.webform-submission-form select:focus {
  outline: 1px solid var(--ssa-color-palette-portal-blue-1, #0066CC) !important;
  outline-offset: 1px !important;
}

.webform-submission-form input[type="checkbox"]:focus {
  outline: 1px solid var(--ssa-color-palette-portal-blue-1, #0066CC) !important;
  outline-offset: 2px !important;
}

.webform-submission-form .form-radios input[type="radio"]:focus,
.webform-submission-form .form-radios input[type="radio"]:focus-visible,
.webform-submission-form .webform-type-radios input[type="radio"]:focus,
.webform-submission-form .webform-type-radios input[type="radio"]:focus-visible,
.form-radios input[type="radio"]:focus,
.form-radios input[type="radio"]:focus-visible,
.webform-type-radios input[type="radio"]:focus,
.webform-type-radios input[type="radio"]:focus-visible,
input[type="radio"]:focus,
input[type="radio"]:focus-visible {
  outline: 1px solid var(--ssa-color-palette-portal-blue-1, #0066CC) !important;
  outline-offset: 2px !important;
}

.webform-submission-form button:focus,
.webform-submission-form input[type="submit"]:focus,
.webform-submission-form .webform-button:focus {
  outline: 1px solid var(--ssa-color-palette-portal-blue-1, #0066CC) !important;
  outline-offset: 2px !important;
} */

/* ========================================
   Error States - WCAG 3.3.1
   ======================================== */

.webform-submission-form input[aria-invalid="true"],
.webform-submission-form textarea[aria-invalid="true"],
.webform-submission-form select[aria-invalid="true"] {
  border-color: #D32F2F;
}

.webform-submission-form .form-item--error-message {
  color: #D32F2F;
}

/* ========================================
   Required Fields - WCAG 3.3.2
   ======================================== */

.webform-submission-form .form-required::after {
  content: " *";
  color: #D32F2F;
}

/* ========================================
   Screen Reader Only - WCAG 1.3.1
   ======================================== */

.webform-submission-form .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
   Live Region for Announcements
   ======================================== */

.webform-a11y-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
   Custom Select Accessibility - WCAG 2.1
   ======================================== */

.webform-submission-form .custom-select-dropdown-container:focus-within .custom-select-dropdown,
.webform-submission-form .custom-select-dropdown[aria-expanded="true"] {
  outline: 1px solid var(--ssa-color-palette-portal-blue-1, #0066CC);
}

.webform-submission-form .custom-select-option:focus,
.webform-submission-form .custom-select-option.focused {
  outline: 1px solid var(--ssa-color-palette-portal-blue-1, #0066CC);
  outline-offset: -1px;
  background-color: #e0e7ff;
}

/* ========================================
   Mobile Form Styles - max-width: 767px
   ======================================== */

@media screen and (max-width: 767px) {
  .webform-submission-form input[type="text"],
  .webform-submission-form input[type="email"],
  .webform-submission-form input[type="tel"],
  .webform-submission-form input[type="number"],
  .webform-submission-form textarea,
  .webform-submission-form select {
    height: 48px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    padding: 8px 16px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    background-color: #fff;
  }

  .webform-submission-form label,
  form.webform-submission-form .form-type-select label {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #020617;
    line-height: 150%;
  }

  .webform-submission-form label[for="edit-additional-info"] {
    margin-bottom: 12px;
  }

  .webform-submission-form input[type="radio"] {
    width: 16px;
    height: 16px;
    border: 1px solid #94a3b8;
    border-radius: 50%;
    background: #fff;
  }

  .webform-submission-form input[type="radio"]:checked {
    border-color: #94a3b8;
    background: radial-gradient(#0862AD 40%, #fff 45%);
  }

  .webform-submission-form .form-radios label,
  .webform-submission-form .webform-type-radios label {
    font-weight: 400;
    color: #475569;
  }

  .webform-submission-form .form-required::after {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    color: #c30b0b;
  }

  .webform-submission-form input:disabled,
  .webform-submission-form textarea:disabled,
  .webform-submission-form select:disabled {
    background-color: #f1f5f9;
  }

  .webform-submission-form ::placeholder {
    color: #64748b;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
  }

  .webform-submission-form .form-item {
    margin-bottom: 4px;
  }

  /* Textarea */
  .webform-submission-form textarea {
    height: auto;
    min-height: 140px;
  }

  /* Checkbox */
  .webform-submission-form input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border: 1px solid #94a3b8;
    border-radius: 2px;
    background: #fff;
    flex-shrink: 0;
  }

  .webform-submission-form input[type="checkbox"]:checked {
    background-color: #0862AD;
    border-color: #0862AD;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 8px;
  }

  .webform-submission-form .form-type-checkbox,
  .webform-submission-form .webform-type-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  .webform-submission-form .form-type-checkbox label,
  .webform-submission-form .webform-type-checkbox label {
    font-weight: 400;
    color: #475569;
    line-height: 140%;
  }

  /* File Upload */
  .webform-submission-form .webform-managed-file-element,
  .webform-submission-form .form-managed-file {
    border: 1px dashed #94a3b8;
    border-radius: 8px;
    padding: 32px 16px;
    text-align: center;
    min-height: 176px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .webform-submission-form .webform-managed-file-element .description,
  .webform-submission-form .form-managed-file .description {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #475569;
    text-align: center;
  }

  /* Dropzone icon */
  .custom-dropzone::before {
    content: '';
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 8px;
    background: url('../images/cloud_upload.svg') no-repeat center;
    background-size: contain;
  }

  /* Dropzone text override */
  .custom-dropzone {
    min-height: 235px;
  }
  .custom-dropzone .dropzone-default,
  .custom-dropzone .dropzone-help {
    font-size: 0;
    visibility: hidden;
    height: 0;
    margin: 0;
    padding: 0;
  }

  .custom-dropzone .dropzone-default::after {
    content: 'Clique aqui e procure o arquivo em seu dispositivo';
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: #0862AD;
    visibility: visible;
    display: block;
    line-height: 150%;
  }

  .custom-dropzone .dropzone-help::after {
    content: '(formatos permitidos: .jpg / .jpeg / .png / .pdf)';
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #475569;
    visibility: visible;
    display: block;
    margin-top: 8px;
    line-height: 140%;
  }

  /* Webform actions */
  .coh-style-webform .webform-actions {
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid #CBD5E1;
    display: flex;
    flex-direction: column-reverse;
  }

  /* Fieldsets: reset só nos wrappers padrão; .fieldset-highlighted mantém o card do base_form (Cohesion). */
  .webform-submission-form .webform-type-fieldset:not(.fieldset-highlighted),
  .webform-submission-form .js-webform-type-fieldset:not(.fieldset-highlighted),
  .cpt_repair_request_container .coh-style-webform .webform-submission-repair-request-form #edit-contact-information.fieldset-highlighted.webform-type-fieldset,
  .cpt_repair_request_container .coh-style-webform .webform-submission-repair-request-form #edit-contact-information.fieldset-highlighted.js-webform-type-fieldset,
  .cpt_repair_request_container .coh-style-webform .webform-submission-repair-request-add-form #edit-contact-information.fieldset-highlighted.webform-type-fieldset,
  .cpt_repair_request_container .coh-style-webform .webform-submission-repair-request-add-form #edit-contact-information.fieldset-highlighted.js-webform-type-fieldset {
    margin: 0;
    padding: 0;
    border: none;
  }
}

/* ========================================
   Fieldset-highlighted (card "Informações de contato") full width.
   <fieldset> + display:flex + min-width:min-content encolhe (shrink-wrap)
   no Android webview, gerando card estreito e vão à direita.
   Forçar largura cheia mantém o card e corrige o layout entre devices.
   ======================================== */
.webform-submission-form .fieldset-highlighted {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}