/**
 * Webform Styles - Enhanced for Drupal 10
 * Custom styles for all webforms with improved accessibility, consistency, and UX
 */

/* ===== BASE FORM STYLES ===== */
/**
 * Webform Styles
 * Custom styles for all webforms
 */

.label {
  color: #000000 !important;
}


.webform-submission-form .button.js-show.form-submit.btn.btn-primary {
 display: block !important; 
}

.webform-submission-form .button.js-hide.form-submit.btn.btn-primary {
 display: none !important;
}

.webform-submission-form .button, 
.webform-submission-form .button:hover
{
    font-weight: bold !important;
    color: #0000FF !important;
    background-color: #D3D3D3 !important;
    border-radius: 6px !important;
    border: none !important;
    text-align: left !important;
    font-size: 18px !important;
    padding: 8px !important;
    width: auto !important;
    transition: all 0.5s !important;
    cursor: pointer !important;
    margin: 2px !important;
}

.webform-element--title-inline > label.js-form-required.form-required,
.control-label.js-form-required.form-required {
  color: #000000 !important;
}

.webform-element--title-inline > label,
.control-label {
  width:30% !important;
  display:inline-block !important;
}

.label {
  color: #000000 !important;
}

fieldset {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  background: #fffff6 !important;
}

.fieldset-wrapper {
  padding: 15px;
}

legend {
  background: #afeeee !important;
  font-size: 1.2rem;
  padding: 10px;
}

/* ===== TEXT INPUT - ENHANCED ===== */
input[type=text] {
  padding: 8px 12px !important;
  box-sizing: border-box !important;
  border: 2px solid #ccc !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  display: inline;
  width:auto; 
  /*max-width: 27.5%;*/
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

input[type=text]:focus {
  background: #fcffa4 !important;
  border-color: #339615 !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(51, 150, 21, 0.1);
}

input[type=text]:read-only {
  background: #E8E8E8 !important;
  cursor: not-allowed;
  color: #666;
}

input[type=text]:disabled {
  background: #f5f5f5 !important;
  color: #999;
  cursor: not-allowed;
  opacity: 0.6;
}

/* ===== EMAIL INPUT - ENHANCED ===== */
input[type=email] {
  padding: 8px 12px !important;
  box-sizing: border-box !important;
  border: 2px solid #ccc !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  display: inline;
  width:auto; 
  /*max-width: 27.5%;*/
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

input[type=email]:focus {
  background: #fcffa4 !important;
  border-color: #339615 !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(51, 150, 21, 0.1);
}

input[type=email]:read-only {
  background: #E8E8E8 !important;
  cursor: not-allowed;
  color: #666;
}

input[type=email]:disabled {
  background: #f5f5f5 !important;
  color: #999;
  cursor: not-allowed;
  opacity: 0.6;
}

/* ===== PASSWORD INPUT - ENHANCED ===== */
input[type=password] {
  padding: 8px 12px !important;
  box-sizing: border-box !important;
  border: 2px solid #ccc !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  display: inline;
  width:auto; 
  /*max-width: 27.5%;*/
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

input[type=password]:focus {
  background: #fcffa4 !important;
  border-color: #339615 !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(51, 150, 21, 0.1);
}

input[type=password]:read-only {
  background: #E8E8E8 !important;
  cursor: not-allowed;
  color: #666;
}

input[type=password]:disabled {
  background: #f5f5f5 !important;
  color: #999;
  cursor: not-allowed;
  opacity: 0.6;
}

/* ===== NUMBER INPUT - ENHANCED ===== */
input[type=number] {
  padding: 8px 12px !important;
  box-sizing: border-box !important;
  border: 2px solid #ccc !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  display: inline;
  flex: none !important;
  width:auto; 
  /*max-width: 27.5% !important;*/
  margin-right: 10px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

input[type=number]:focus {
  background: #fcffa4 !important;
  border-color: #339615 !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(51, 150, 21, 0.1);
}

input[type=number]:read-only {
  background: #E8E8E8 !important;
  cursor: not-allowed;
  color: #666;
}

input[type=number]:disabled {
  background: #f5f5f5 !important;
  color: #999;
  cursor: not-allowed;
  opacity: 0.6;
}

/* ===== SEARCH INPUT - NEW ===== */
input[type=search] {
  padding: 8px 12px !important;
  box-sizing: border-box !important;
  border: 2px solid #ccc !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  display: inline;
  width:auto; 
  /*max-width: 27.5%;*/
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

input[type=search]:focus {
  background: #fcffa4 !important;
  border-color: #339615 !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(51, 150, 21, 0.1);
}

input[type=search]:disabled {
  background: #f5f5f5 !important;
  color: #999;
  cursor: not-allowed;
  opacity: 0.6;
}

/* ===== URL INPUT - NEW ===== */
input[type=url] {
  padding: 8px 12px !important;
  box-sizing: border-box !important;
  border: 2px solid #ccc !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  display: inline;
  width:auto; 
  /*max-width: 27.5%;*/
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

input[type=url]:focus {
  background: #fcffa4 !important;
  border-color: #339615 !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(51, 150, 21, 0.1);
}

input[type=url]:disabled {
  background: #f5f5f5 !important;
  color: #999;
  cursor: not-allowed;
  opacity: 0.6;
}

/* ===== TEL INPUT - NEW ===== */
input[type=tel] {
  padding: 8px 12px !important;
  box-sizing: border-box !important;
  border: 2px solid #ccc !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  display: inline;
  width:auto; 
  /*max-width: 27.5%;*/
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

input[type=tel]:focus {
  background: #fcffa4 !important;
  border-color: #339615 !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(51, 150, 21, 0.1);
}

input[type=tel]:disabled {
  background: #f5f5f5 !important;
  color: #999;
  cursor: not-allowed;
  opacity: 0.6;
}

#edit-submit {
  width:auto !important;
  color: #ffffff !important;
  background-color: #339615 !important;
  border-radius: 6px !important;
}
#edit-submit:hover {
  width:auto !important;
  color: #D3D3D3 !important;
  background-color: #006400 !important;
  border-radius: 6px !important;
}
#edit-actions-submit {
  width:auto !important;
  color: #ffffff !important;
  background-color: #339615 !important;
  border-radius: 6px !important;
}
#edit-actions-submit:hover {
  width:auto !important;
  color: #D3D3D3 !important;
  background-color: #006400 !important;
  border-radius: 6px !important;
}
#edit-wizard-next {
  width:auto !important;
  color: #ffffff !important;
  background-color: #339615 !important;
  border-radius: 6px !important;
}
#edit-wizard-next:hover {
  width:auto !important;
  color: #D3D3D3 !important;
  background-color: #006400 !important;
  border-radius: 6px !important;
}
#edit-actions-wizard-next {
  width:auto !important;
  color: #ffffff !important;
  background-color: #339615 !important;
  border-radius: 6px !important;
}
#edit-actions-wizard-next:hover {
  width:auto !important;
  color: #D3D3D3 !important;
  background-color: #006400 !important;
  border-radius: 6px !important;
}

input[type=checkbox] {
  float:left !important;
  width: 20px !important;
}
.checkbox label {
  font-size: 20px !important;
  display: block !important;
  width: 100% !important;
}

input[type=radio] {
  float:left !important;
  width: 20px !important;
}
.radio label {
  font-size: 20px !important;
  display: block !important;
  width: 100% !important;
}

input[type=file] {
  display: inline;
  width: auto;
  flex: none !important;
  min-width: 11% !important;
  margin-right: 10px;
}

button[type="submit"],
input[type="submit"],
button[type="submit"]:hover,
input[type="submit"]:hover 
{
  display: inline;
  width: inherit;
  flex: none !important;
  margin-right: 10px;
}

/* ===== TEXTAREA - ENHANCED ===== */
textarea {
  padding: 8px 12px !important;
  box-sizing: border-box !important;
  border: 2px solid #ccc !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  width: 80% !important;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.3s ease, background-color 0.3s ease;
  min-height: 120px;
  resize: vertical;
}

textarea:focus {
  background: #fcffa4 !important;
  border-color: #339615 !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(51, 150, 21, 0.1);
}

textarea:read-only {
  background: #E8E8E8 !important;
  cursor: not-allowed;
  color: #666;
}

textarea:disabled {
  background: #f5f5f5 !important;
  color: #999;
  cursor: not-allowed;
  opacity: 0.6;
}

.panel-heading {
  background: #afeeee !important;
}

.panel-title {
  font-weight: bold !important; 
}

.help-block {
  color: #111111 !important; 
  font-style: italic !important; 
  padding-left: 10px!important; 
}

.webform-element-help {
  background-color: #48a9e4 !important;
}

/* ===== SELECT - ENHANCED ===== */
select.form-select {
  padding: 8px 12px !important;
  display: inline;
  width:auto; 
  /*max-width: 27.5%;*/
  box-sizing: border-box !important;
  border: 2px solid #ccc !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

select.form-select:focus {
  border-color: #339615 !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(51, 150, 21, 0.1);
}

select.form-select:disabled {
  background-color: #f5f5f5 !important;
  color: #999;
  cursor: not-allowed;
  opacity: 0.6;
}

.input-group>.form-control {
  width: 11%;
}

/* ===== FORM CONTROL CLASS - ENHANCED ===== */
.form-control {
  padding: 8px 12px !important;
  box-sizing: border-box !important;
  border: 2px solid #ccc !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.form-control:focus {
  background: #fcffa4 !important;
  border-color: #339615 !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(51, 150, 21, 0.1);
}

.form-control:read-only {
  background: #E8E8E8 !important;
  cursor: not-allowed;
  color: #666;
}

.form-control:disabled {
  background: #f5f5f5 !important;
  color: #999;
  cursor: not-allowed;
  opacity: 0.6;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .webform-element--title-inline > label,
  .control-label {
    width: 100% !important;
    display: block !important;
    margin-bottom: 8px;
  }

  input[type=text],
  input[type=email],
  input[type=password],
  input[type=number],
  input[type=search],
  input[type=url],
  input[type=tel],
  select.form-select,
  textarea {
    max-width: 100% !important;
    width: 100% !important;
  }

  #edit-submit,
  #edit-actions-submit,
  #edit-wizard-next,
  #edit-actions-wizard-next,
  button[type="submit"],
  input[type="submit"] {
    margin-right: 0;
  }

  .input-group > .form-control {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  legend {
    font-size: 1rem;
    padding: 10px;
  }

  input[type=file] {
    min-width: 100% !important;
  }

  .checkbox label,
  .radio label {
    font-size: 16px !important;
  }
}

/* ===== ACCESSIBILITY ===== */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #339615;
  outline-offset: 2px;
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: more) {
  input[type=text],
  input[type=email],
  input[type=password],
  input[type=number],
  input[type=search],
  input[type=url],
  input[type=tel],
  select.form-select,
  textarea,
  .form-control {
    border-width: 3px;
  }

  label,
  .label,
  .control-label {
    font-weight: 700;
  }
}

/* ===== REDUCED MOTION SUPPORT ===== */
@media (prefers-reduced-motion: reduce) {
  input,
  textarea,
  select,
  button,
  .form-control {
    transition: none !important;
  }
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
  fieldset {
    background: #2a2a2a !important;
  }

  legend {
    background: #1a5f5f !important;
    color: #fff;
  }

  input[type=text],
  input[type=email],
  input[type=password],
  input[type=number],
  input[type=search],
  input[type=url],
  input[type=tel],
  select.form-select,
  textarea,
  .form-control {
    background-color: #333 !important;
    color: #fff;
    border-color: #555 !important;
  }

  input[type=text]:focus,
  input[type=email]:focus,
  input[type=password]:focus,
  input[type=number]:focus,
  input[type=search]:focus,
  input[type=url]:focus,
  input[type=tel]:focus,
  select.form-select:focus,
  textarea:focus,
  .form-control:focus {
    background: #444 !important;
    border-color: #339615 !important;
  }

  input[type=text]:read-only,
  input[type=email]:read-only,
  input[type=number]:read-only,
  textarea:read-only,
  .form-control:read-only {
    background: #222 !important;
    color: #999;
  }

  label,
  .label,
  .control-label {
    color: #e0e0e0 !important;
  }

  .help-block {
    color: #b0b0b0 !important;
  }
}

.webform-submission-form details {
  font-size: 1.2rem;
  padding-top: 0px;
  margin-bottom: 1rem !important;
}

.webform-submission-form summary {
  background: #afeeee !important;
  font-size: 1.2rem;
  padding: 10px; 
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.webform-submission-form details .details-wrapper {
  padding: 15px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  background: #fffff6 !important;
  font-style: italic;
  color: #000000 !important;
}
.webform-submission-form details .details-wrapper .text-muted {
  color: #000000 !important;
}

.input-group {
 display: inline;
}

.input-group-append {
 display: inline-block;
}