/* Keep the public employment form readable when an appearance theme uses
   light panels with light foreground colors. The plum page remains visible
   around this dedicated, light application panel. */
.customer-surface .employment-application {
  box-sizing: border-box;
  margin: 0 auto 5rem;
  padding: clamp(1rem, 4vw, 2rem);
  border: 1px solid #8e6a78;
  border-radius: 20px;
  background: #f5f0ec;
  color: #314d5a;
}

.customer-surface .employment-application :is(h1, p, label, legend, span, strong, li) {
  color: #314d5a;
}

.customer-surface.theme .employment-application :is(label, legend) {
  color: #314d5a !important;
}

.customer-surface .employment-application fieldset {
  min-width: 0;
  padding: 1rem;
  border: 1px solid #8e6a78;
  border-radius: 12px;
  background: #fffdfb;
}

.customer-surface .employment-application :is(input:not([type=checkbox]):not([type=radio]), textarea, select) {
  color: #314d5a !important;
  -webkit-text-fill-color: #314d5a;
  caret-color: #314d5a;
  background: #fffdfb !important;
  border-color: #66757c;
}

.customer-surface .employment-application :is(input, textarea, select)::placeholder {
  color: #66757c !important;
  -webkit-text-fill-color: #66757c;
  opacity: 1;
}

.customer-surface .employment-application :is(input[type=checkbox], input[type=radio]) {
  accent-color: #6e3f59;
}

.customer-surface .employment-application .form-errors {
  color: #314d5a;
  background: #fffdfb;
  border: 2px solid #8f1830;
  border-left-width: 6px;
  border-radius: 10px;
}

.customer-surface .employment-application :is(button, button.availability-preset) {
  color: #314d5a !important;
  background: #fffdfb !important;
  border: 2px solid #6e3f59 !important;
  box-shadow: 0 2px 6px rgba(49, 77, 90, .14);
}

.customer-surface .employment-application button:hover:not(:disabled) {
  color: #243b45 !important;
  background: #eee5e2 !important;
}

.customer-surface .employment-application :is(input, textarea, select, button):focus-visible {
  outline: 3px solid #456574;
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .customer-surface .employment-application {
    width: calc(100% - 1rem);
    padding: 1rem;
  }

  .customer-surface .employment-application fieldset {
    padding: .8rem;
  }
}