/* =============================================================================
   Perdue Webform Theming
   Primary: Blue 500 (#003c71) | White (#ffffff)
   Dark mode: .dark-mode
   ============================================================================= */

/* -----------------------------------------------------------------------------
   CSS Custom Properties — Light Mode (default)
   ----------------------------------------------------------------------------- */
:root {
  --form-primary: #003c71;
  --form-primary-dark: #002a52;
  --form-bg: #ffffff;
  --form-input-bg: #ffffff;
  --form-input-text: #1a1a1a;
  --form-text: #1a1a1a;
  --form-label: #003c71;
  --form-border: #003c71;
  --form-border-subtle: rgba(0, 60, 113, 0.3);
  --form-placeholder: rgba(0, 60, 113, 0.45);
  --form-focus-ring: rgba(0, 60, 113, 0.2);
  --form-desc: rgba(0, 60, 113, 0.65);
  --form-required: #c5003e;
  --form-error: #c5003e;
  --form-error-bg: #fff0f3;
  --form-error-border: #c5003e;
  --form-success: #00aca0;
  --form-disabled-bg: rgba(0, 60, 113, 0.06);
  --form-disabled-text: rgba(0, 60, 113, 0.4);
  --form-btn-bg: #003c71;
  --form-btn-text: #ffffff;
  --form-btn-hover-bg: #002a52;
  --form-btn-outline-bg: transparent;
  --form-check-bg: #ffffff;
  --form-check-checked: #003c71;
  --form-radius: 4px;
  --form-transition: 0.15s ease;
}

/* -----------------------------------------------------------------------------
   CSS Custom Properties — Dark Mode
   ----------------------------------------------------------------------------- */
.dark-mode {
  --form-primary: #ffffff;
  --form-primary-dark: rgba(255, 255, 255, 0.85);
  --form-bg: #003c71;
  --form-input-bg: #ffffff;
  --form-input-text: #003c71;
  --form-text: #ffffff;
  --form-label: #ffffff;
  --form-border: #003c71;
  --form-border-subtle: rgba(0, 60, 113, 0.3);
  --form-placeholder: rgba(0, 60, 113, 0.45);
  --form-focus-ring: rgba(0, 60, 113, 0.2);
  --form-desc: rgba(255, 255, 255, 0.6);
  --form-required: #ff8fab;
  --form-error: #ff8fab;
  --form-error-bg: rgba(197, 0, 62, 0.25);
  --form-error-border: #ff8fab;
  --form-success: #5fe8df;
  --form-disabled-bg: rgba(0, 60, 113, 0.06);
  --form-disabled-text: rgba(0, 60, 113, 0.4);
  --form-btn-bg: #ffcc33;
  --form-btn-text: #003c71;
  --form-btn-hover-bg: #e6b800;
  --form-btn-outline-bg: transparent;
  --form-check-bg: #ffffff;
  --form-check-checked: #003c71;
}

/* =============================================================================
   Webform Submission Form
   ============================================================================= */
.webform-submission-form {
  color: var(--form-text);
  transition: background-color var(--form-transition), color var(--form-transition);

  .webform-error-msg-wrapper {
    display: none;
  }

  /* ---------------------------------------------------------------------------
     Labels
     ------------------------------------------------------------------------- */
  & label,
  & .form-item__label,
  & .form-item label {
    display: block;
    color: var(--form-label);
    font-weight: 600;
    margin-bottom: 0.35em;
    transition: color var(--form-transition);
  }

  & .form-required::after,
  & label.form-required::after {
    content: " *";
    color: var(--form-required);
  }

  & .form-item,
  & .js-form-item {
    margin: 0;
  }

  /* ---------------------------------------------------------------------------
     Text Inputs, Textarea, Select
     ------------------------------------------------------------------------- */
  & input[type="text"],
  & input[type="email"],
  & input[type="tel"],
  & input[type="number"],
  & input[type="password"],
  & input[type="search"],
  & input[type="url"],
  & input[type="date"],
  & input[type="time"],
  & textarea,
  & select,
  & .form-text,
  & .form-textarea,
  & .form-select {
    display: block;
    width: 100%;
    background-color: var(--form-input-bg);
    color: var(--form-input-text);
    border: 1px solid var(--form-border-subtle);
    border-radius: var(--form-radius);
    padding: 0.6em 0.85em;
    font-size: 1rem;
    line-height: 1.5;
    box-sizing: border-box;
    text-transform: none;
    height: auto;
    margin: 0;
    transition:
      border-color var(--form-transition),
      box-shadow var(--form-transition),
      background-color var(--form-transition),
      color var(--form-transition);
    appearance: none;
    -webkit-appearance: none;

    &:focus {
      outline: none;
      border-color: var(--form-border);
      box-shadow: 0 0 0 3px var(--form-focus-ring);
    }

    &:disabled {
      background-color: var(--form-disabled-bg);
      color: var(--form-disabled-text);
      border-color: var(--form-border-subtle);
      cursor: not-allowed;
      opacity: 1;
    }
  }

  & input::placeholder,
  & textarea::placeholder {
    color: var(--form-placeholder);
    opacity: 1;
  }

  /* Select arrow */
  & select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23003c71' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85em center;
    padding-right: 2.5em;

  }

  /* Textarea */
  & textarea {
    min-height: 120px;
    resize: vertical;
  }

  /* ---------------------------------------------------------------------------
     Checkboxes & Radios
     ------------------------------------------------------------------------- */
  & input[type="checkbox"],
  & input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.15em;
    height: 1.15em;
    border: 2px solid var(--form-border-subtle);
    background-color: var(--form-check-bg);
    vertical-align: middle;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    top: -0.05em;
    transition:
      border-color var(--form-transition),
      background-color var(--form-transition),
      box-shadow var(--form-transition);

    &:checked {
      background-color: var(--form-check-bg);
      border-color: var(--form-check-checked);
    }

    &:focus {
      outline: none;
      box-shadow: 0 0 0 3px var(--form-focus-ring);
      border-color: var(--form-border);
    }
  }

  & input[type="checkbox"] {
    border-radius: 3px;

    &:checked::after {
      content: "";
      display: block;
      position: absolute;
      top: 1px;
      left: 4px;
      width: 5px;
      height: 9px;
      border: 2px solid var(--form-check-checked);
      border-top: none;
      border-left: none;
      transform: rotate(45deg);
    }
  }

  & input[type="radio"] {
    border-radius: 50%;

    &:checked::after {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0.4em;
      height: 0.4em;
      background-color: var(--form-check-checked);
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }
  }

  & .form-type-checkbox label,
  & .form-type-radio label {
    font-weight: 400;
    display: inline;
    margin-left: 0.4em;
    vertical-align: middle;
  }

  /* ---------------------------------------------------------------------------
     Container Wrapper — Flex Row Layout
     ------------------------------------------------------------------------- */
  & .webform-container-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    width: 100%;
    box-sizing: border-box;

    &>.form-item,
    &>.js-form-item,
    &>.webform-flex,
    &>.webform-container-left,
    &>.webform-container-right {
      flex: 1 1 0%;
      min-width: 0;
      max-width: 100%;
      margin-bottom: 0;
      box-sizing: border-box;
    }

    @media (max-width: 1024px) {
      flex-direction: column;
      gap: 0;

      &>.form-item,
      &>.js-form-item,
      &>.webform-flex,
      &>.webform-container-left,
      &>.webform-container-right {
        flex: 1 1 100%;
        max-width: 100%;
        margin-bottom: 1.25rem;
      }
    }
  }

  /* ---------------------------------------------------------------------------
     Form Items & Spacing
     ------------------------------------------------------------------------- */
  & .form-item,
  & .js-form-item {
    margin-bottom: 1.25rem;
  }

  & .form-item__description,
  & .description {
    font-size: 0.875rem;
    color: var(--form-desc);
    margin-top: 0.3em;
    transition: color var(--form-transition);
  }

  /* ---------------------------------------------------------------------------
     Fieldset / Legend
     ------------------------------------------------------------------------- */
  & fieldset {
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
    background-color: transparent;
  }

  & legend,
  & .fieldset-legend {
    color: var(--form-label);
    font-weight: 700;
    font-size: 1rem;
    padding: 0 0.5em;
    transition: color var(--form-transition);
  }

  /* ---------------------------------------------------------------------------
     Submit / Action Buttons
     ------------------------------------------------------------------------- */
  & .form-actions,
  & .webform-actions {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
  }

  & input[type="submit"],
  & button[type="submit"],
  & .form-submit,
  & .button,
  & .button--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--form-btn-bg);
    color: var(--form-btn-text);
    border: 2px solid var(--form-btn-bg);
    border-radius: var(--form-radius);
    padding: 0.6em 1.5em;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    text-decoration: none;
    transition:
      background-color var(--form-transition),
      color var(--form-transition),
      border-color var(--form-transition),
      box-shadow var(--form-transition);

    &:hover {
      background-color: var(--form-btn-hover-bg);
      border-color: var(--form-btn-hover-bg);
    }

    &:focus {
      outline: none;
      box-shadow: 0 0 0 3px var(--form-focus-ring);
    }
  }

  /* Secondary / outline button */
  & .button--secondary,
  & input[type="button"] {
    background-color: var(--form-btn-outline-bg);
    color: var(--form-primary);
    border: 2px solid var(--form-primary);
    border-radius: var(--form-radius);
    padding: 0.6em 1.5em;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition:
      background-color var(--form-transition),
      color var(--form-transition),
      border-color var(--form-transition);

    &:hover {
      background-color: var(--form-primary);
      color: var(--form-bg);
    }
  }

  /* ---------------------------------------------------------------------------
     Validation / Error States
     ------------------------------------------------------------------------- */
  & .form-item--error,
  & .has-error {

    & input,
    & textarea,
    & select {
      border-color: var(--form-error-border);
      box-shadow: 0 0 0 3px rgba(197, 0, 62, 0.15);

      .dark-mode & {
        box-shadow: 0 0 0 3px rgba(255, 143, 171, 0.2);
      }
    }

    & .form-item__error-message,
    & .error {
      color: var(--form-error);
      font-size: 0.875rem;
      margin-top: 0.3em;
      display: block;
      transition: color var(--form-transition);
    }
  }

  /* Drupal messages */
  & .messages--error {
    background-color: var(--form-error-bg);
    border: 1px solid var(--form-error-border);
    color: var(--form-error);
    border-radius: var(--form-radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    transition:
      background-color var(--form-transition),
      border-color var(--form-transition),
      color var(--form-transition);
  }

  & .messages--status {
    background-color: rgba(0, 172, 160, 0.1);
    border: 1px solid var(--form-success);
    color: var(--form-success);
    border-radius: var(--form-radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
  }

  /* ---------------------------------------------------------------------------
     Progress Bar (multi-step webforms)
     ------------------------------------------------------------------------- */
  & .webform-progress-bar {
    margin-bottom: 2rem;

    &__page-title {
      color: var(--form-desc);
      font-size: 0.8125rem;
      transition: color var(--form-transition);
    }

    &__page--done,
    &__page--active {
      & .webform-progress-bar__page-title {
        color: var(--form-label);
        font-weight: 600;
      }

      & .webform-progress-bar__page-number {
        background-color: var(--form-btn-bg);
        border-color: var(--form-btn-bg);
        color: var(--form-btn-text);
      }
    }

    &__page-number {
      background-color: var(--form-border-subtle);
      color: var(--form-text);
      border: 2px solid var(--form-border-subtle);
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      margin: 0 auto 0.4em;
      transition:
        background-color var(--form-transition),
        border-color var(--form-transition),
        color var(--form-transition);
    }
  }

  /* ---------------------------------------------------------------------------
     Autocomplete
     ------------------------------------------------------------------------- */
  & .ui-autocomplete {
    background-color: var(--form-input-bg);
    border: 1px solid var(--form-border);
    border-radius: var(--form-radius);
    box-shadow: 0 4px 12px rgba(0, 60, 113, 0.15);

    .dark-mode & {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }
  }

  & .ui-menu-item {

    &:hover,
    & .ui-state-focus {
      background-color: var(--form-primary);
      color: var(--form-btn-text);
    }
  }
}

/* =============================================================================
   Newsletter Form — "Savings Delivered"
   Pill-shaped inline email + submit layout matching the homepage callout.
   ============================================================================= */
.newsletter form,
.newsletter-callout form {
  display: flex;
  justify-content: center;
}

.newsletter .form-actions,
.newsletter .webform-actions,
.newsletter .form-item,
.newsletter .js-form-item,
.newsletter-callout .form-actions,
.newsletter-callout .webform-actions,
.newsletter-callout .form-item,
.newsletter-callout .js-form-item {
  margin-top: 0;
  margin-bottom: 0;
}

.newsletter input[type="email"],
.newsletter-callout input[type="email"] {
  flex: 1 1 auto;
  height: 3.125rem;
  line-height: 3.125rem;
  padding: 0 1.25rem;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  font-family: var(--ssa-font-stacks-owners-narrow);
  text-transform: uppercase;
  color: var(--ssa-color-palette-blue-500, #003c71);
  background-color: #ffffff;
  border: 1px solid rgb(34, 34, 34);
  border-radius: 1.5625rem;
  box-sizing: border-box;
}

.newsletter input[type="email"]::placeholder,
.newsletter-callout input[type="email"]::placeholder {
  color: var(--ssa-color-palette-purple-500, #6b2d8b);
  font-size: 1.25rem !important;
  font-weight: 700;
  font-family: var(--ssa-font-stacks-owners-narrow);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.newsletter input[type="submit"],
.newsletter button[type="submit"],
.newsletter-callout input[type="submit"],
.newsletter-callout button[type="submit"] {
  flex: 0 0 auto;
  height: 3.125rem;
  width: 9.6875rem;
  font-size: 1.25rem;
  font-family: var(--ssa-font-stacks-owners-narrow);
  font-weight: bold;
  line-height: normal;
  color: rgba(47, 37, 4, 1);
  background-color: var(--ssa-color-palette-yellow-500, #ffcc33);
  margin-left: 8px;
  border: 1px solid rgb(34, 34, 34);
  border-radius: 1.5625rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: color var(--form-transition), background-color var(--form-transition);
}

.newsletter input[type="submit"]:hover,
.newsletter button[type="submit"]:hover,
.newsletter-callout input[type="submit"]:hover,
.newsletter-callout button[type="submit"]:hover {
  color: #ffffff;
}

@media (max-width: 1023px) {

  .newsletter input[type="email"],
  .newsletter-callout input[type="email"] {
    font-size: 1.5rem;
  }

  .newsletter input[type="submit"],
  .newsletter button[type="submit"],
  .newsletter-callout input[type="submit"],
  .newsletter-callout button[type="submit"] {
    width: auto;
  }
}

/* =============================================================================
   Footer Form
   Matches newsletter pill layout; green placeholder text.
   ============================================================================= */
#footer form {
  display: flex;
  justify-content: center;
}

#footer .form-actions,
#footer .webform-actions,
#footer .form-item,
#footer .js-form-item {
  margin-top: 0;
  margin-bottom: 0;
}

#footer input[type="email"] {
  flex: 1 1 auto;
  height: 3.125rem;
  line-height: 3.125rem;
  padding: 0 1.25rem;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  font-family: var(--ssa-font-stacks-owners-narrow);
  text-transform: uppercase;
  color: var(--ssa-color-palette-blue-500, #003c71);
  background-color: #ffffff;
  border: 1px solid rgb(34, 34, 34);
  border-radius: 1.5625rem;
  box-sizing: border-box;
}

#footer input[type="email"]::placeholder {
  color: var(--ssa-color-palette-green-500, #8fad15);
  font-size: 1.25rem !important;
  font-weight: 700;
  font-family: var(--ssa-font-stacks-owners-narrow);
  text-transform: uppercase;
  letter-spacing: 1px;
}

#footer input[type="submit"],
#footer button[type="submit"] {
  flex: 0 0 auto;
  height: 3.125rem;
  width: 9.6875rem;
  font-size: 1.25rem;
  font-family: var(--ssa-font-stacks-owners-narrow);
  font-weight: bold;
  line-height: normal;
  color: rgba(47, 37, 4, 1);
  background-color: var(--ssa-color-palette-yellow-500, #ffcc33);
  margin-left: 8px;
  border: 1px solid rgb(34, 34, 34);
  border-radius: 1.5625rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: color var(--form-transition), background-color var(--form-transition);
}

#footer input[type="submit"]:hover,
#footer button[type="submit"]:hover {
  color: #ffffff;
  background-color: var(--ssa-color-palette-blue-500, #003c71);
}

@media (max-width: 1023px) {
  #footer input[type="email"] {
    font-size: 1.5rem;
  }

  #footer input[type="submit"],
  #footer button[type="submit"] {
    width: auto;
  }
}

/* Hide text for Captchav3 label */
.recaptcha-no-badge-message {
  visibility: hidden;
  height: 1px;
  width: 1px;
}