:root {
  --fontFamily: 'OTSono', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
  --borderRadiusContainer: 8px;
  --borderRadiusControl: 8px;
  --borderRadiusButton: 26px;
  --borderWidthBold: 1px;
  --widthMaxJobBoard: 1024px;

  /*
     *  Perk Design System Colors
     */
  --colorAppBackground: #ffffff;
  --colorPrimary900: #14140f;
  --colorPrimary600: #beff50 !important;
  --colorOffBlack: #14140f !important;
  --colorOffWhite: #f5f5eb;
  --colorDarkGray: #6e6e64;
  --colorLightGrayTransparent: #19190f0d;
  --colorNeutralGray: #d2d2c8;
  --colorNegative200: #fbd0db;
  --colorPositive200: #d6ffef;
  --colorWarning800: #ffbe00;
  --colorWarning600: #ffbe00;
  --colorNegative600: #d20f46 !important;
  --colorNegative800: #d20f46 !important;
  --colorPositive600: #beff50 !important;
  --colorPositive800: #beff50 !important;
  --colorWarning900: #ffbe00;
}

/* ========================================
   FORM CONTAINER & GENERAL STYLES
   ======================================== */

div[role='tabpanel'] {
  padding: 0 8px;
}

div[role='tabpanel'] div[class*='container'] {
  box-shadow: none;
}

/* Application form container */
.ashby-application-form-container {
  background-color: #ffffff;
  box-shadow: none;
  font-family: var(--fontFamily);
}

.ashby-application-form-autofill-input-form-alert[class*='positive'],
.ashby-application-form-success-container[class*='positive'] {
  color: var(--colorOffBlack) !important;
}

.ashby-application-form-autofill-input-form-alert[class*='positive'] h2,
.ashby-application-form-success-container[class*='positive'] h2 {
  color: var(--colorDarkGray) !important;
}

/* ========================================
   LISTBOX & DROPDOWN STYLES
   ======================================== */

/* Dropdown result container */
div[role='listbox'] div[class*='resultContainer'] {
  border: 2px solid var(--colorOffBlack) !important;
  padding: 8px;
}

/* Dropdown options */
div[role='listbox'] div[class*='resultContainer'] div[role='option'] {
  border-radius: 8px;
  padding: 8px 16px;
  transition: background-color 0.2s ease;
  cursor: pointer;
  color: var(--colorDarkGray) !important;
}

div[role='listbox'] div[class*='resultContainer'] div[role='option']:hover,
div[role='listbox']
  div[class*='resultContainer']
  div[role='option'][class*='active']:hover {
  background-color: var(--colorLightGrayTransparent) !important;
  color: var(--colorOffBlack) !important;
}

div[role='listbox']
  div[class*='resultContainer']
  div[role='option'][class*='active'] {
  background-color: var(--colorOffWhite) !important;
  color: var(--colorOffBlack) !important;
}

/* ========================================
   AUTOFILL INPUT STYLES
   ======================================== */

.ashby-application-form-autofill-input-root {
  border: 1px solid var(--colorOffBlack) !important;
}

.ashby-application-form-autofill-input-root svg,
.ashby-application-form-field-entry button svg,
.ashby-application-form-field-entry button:hover svg {
  fill: var(--colorOffBlack);
}

.ashby-application-form-autofill-input-root button {
  background-color: transparent;
  color: var(--colorOffBlack);
  border: 1px solid var(--colorOffBlack);
  box-shadow: none;
  padding: 16px;
  height: 40px;
  letter-spacing: normal;
}

.ashby-application-form-autofill-input-root button:hover {
  background-color: var(--colorPrimary600);
  color: var(--colorOffBlack);
  opacity: 0.9;
  box-shadow: none;
}

/* ========================================
   FORM QUESTIONS & LABELS
   ======================================== */

.ashby-application-form-question-title {
  color: var(--colorOffBlack) !important;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.46;
}

.ashby-application-form-question-description,
.ashby-application-form-question-description a,
div[role='tabpanel'] a[class*='recruitingPrivacyPolicy'],
p[class*='recaptchaLegal'],
p[class*='recaptchaLegal'] a,
a[class*='powered'],
a[class*='powered']:hover,
p[class*='automatedProcessingText'],
p[class*='automatedProcessingText'] a {
  color: var(--colorDarkGray) !important;
}

a[class*='powered'] svg,
a[class*='powered']:hover svg {
  fill: var(--colorDarkGray) !important;
}

/* ========================================
   TEXT INPUTS
   ======================================== */

/* Input fields - shared styles */
.ashby-application-form-field-entry input,
.ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='inputContainer']
  input {
  border: 1px solid var(--colorOffBlack) !important;
  border-radius: var(--borderRadiusControl) !important;
  padding: 10px !important;
  height: 48px !important;
  background-color: transparent !important;
  transition: background-color 0.2s ease;
  color: var(--colorDarkGray) !important;
  cursor: text !important;
}

/* Input placeholders */
.ashby-application-form-field-entry input::placeholder,
.ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='inputContainer']
  input::placeholder {
  color: var(--colorDarkGray) !important;
}

/* Autofill styles (browser-specific) */
.ashby-application-form-field-entry input:-webkit-autofill,
.ashby-application-form-field-entry input:-webkit-autofill:hover,
.ashby-application-form-field-entry input:-webkit-autofill:focus,
.ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='inputContainer']
  input:-webkit-autofill,
.ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='inputContainer']
  input:-webkit-autofill:hover,
.ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='inputContainer']
  input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--colorOffBlack) !important;
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
  font-size: 16px !important;
}

/* Input hover state */
.ashby-application-form-field-entry input:hover,
.ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='inputContainer']
  input:hover {
  background-color: var(--colorLightGrayTransparent) !important;
}

/* Input focus state */
.ashby-application-form-field-entry input:focus,
.ashby-application-form-field-entry input:focus-visible,
.ashby-application-form-field-entry input:focus-within,
.ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='inputContainer']
  input:focus,
.ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='inputContainer']
  input:focus-visible,
.ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='inputContainer']
  input:focus-within {
  outline: 2px solid var(--colorOffBlack) !important;
  background-color: var(--colorLightGrayTransparent) !important;
}

/* ========================================
   CHECKBOX & RADIO BUTTON STYLES
   ======================================== */

/* Unchecked state */
.ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='option']
  span[class*='container']:not([class*='checked']) {
  border: 1px solid var(--colorOffBlack) !important;
}

.ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='option']
  span[class*='container']:not([class*='checked']):focus,
.ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='option']
  span[class*='container']:not([class*='checked']):focus-visible,
.ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='option']
  span[class*='container']:not([class*='checked']):focus-within
  .ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='option']:not([class*='true']):not([class*='false'])
  span[class*='container'][class*='checked']:focus,
.ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='option']:not([class*='true']):not([class*='false'])
  span[class*='container'][class*='checked']:focus-visible,
.ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='option']:not([class*='true']):not([class*='false'])
  span[class*='container'][class*='checked']:focus-within,
.ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='option']
  span[class*='container']:focus,
.ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='option']
  span[class*='container']:focus-visible,
.ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='option']
  span[class*='container']:focus-within {
  outline: 2px solid var(--colorPrimary600) !important;
  outline-offset: 2px;
}

/* Checked state - checkbox style */
.ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='option']:not([class*='true']):not([class*='false'])
  span[class*='container'][class*='checked'] {
  border: none;
  background-color: var(--colorPrimary600) !important;
  color: var(--colorOffBlack) !important;
  outline: none !important;
  border-radius: var(--borderRadiusControl) !important;
}

/* Radio button styles */
.ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='option'][class*='true']
  span[class*='container']:not([class*='checked']):hover {
  border-color: var(--colorOffBlack) !important;
  outline: none !important;
}

.ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='option'][class*='true']
  span[class*='container'][class*='checked'] {
  border-color: var(--colorOffBlack) !important;
}

.ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='option'][class*='true']
  span[class*='container'][class*='checked']
  span[class*='circle'] {
  background-color: var(--colorOffBlack) !important;
}

/* Checkbox checkmark SVG */
.ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='option']
  span[class*='container'][class*='checked']
  svg {
  fill: var(--colorOffBlack) !important;
}

/* Option labels */
.ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='option']
  label {
  color: var(--colorDarkGray) !important;
  cursor: pointer !important;
}

.ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='option']
  label[class*='checked'],
.ashby-application-form-section-container
  fieldset[class*='fieldEntry']
  div[class*='option'][class*='false']:hover
  label {
  color: var(--colorOffBlack) !important;
}

/* ========================================
   BUTTONS
   ======================================== */

/* General button styles */
.ashby-application-form-field-entry button {
  background-color: transparent;
  color: var(--colorOffBlack) !important;
  border: 1px solid var(--colorOffBlack);
  box-shadow: none;
  letter-spacing: normal;
  font-size: 14px;
}

.ashby-application-form-field-entry button:focus,
.ashby-application-form-field-entry button:focus-visible,
.ashby-application-form-field-entry button:focus-within {
  outline: 2px solid var(--colorPrimary600) !important;
  outline-offset: 2px;
}

/* Multi-select option buttons */
.ashby-application-form-field-entry
  button[class*='option']:not([class*='active']) {
  color: var(--colorDarkGray) !important;
  border-color: var(--colorDarkGray) !important;
}

.ashby-application-form-field-entry button[class*='option']:hover,
.ashby-application-form-field-entry button[class*='option']:active {
  color: var(--colorOffBlack) !important;
  border: none !important;
}

/* Button hover and active states */
.ashby-application-form-field-entry button:hover,
.ashby-application-form-field-entry button[class*='active'] {
  background-color: var(--colorPrimary600);
  color: var(--colorOffBlack);
  opacity: 0.9;
  box-shadow: none;
  border: none !important;
}

/* ========================================
   FILE UPLOAD STYLES
   ======================================== */

.ashby-application-form-field-entry div[class*='file'] > p[class*='name'] {
  border: 1px solid var(--colorOffBlack) !important;
  height: 48px !important;
}

.ashby-application-form-field-entry div[class*='file'] > button,
.ashby-application-form-field-entry div[class*='instructions'] > button {
  height: 48px !important;
  border-color: var(--colorOffBlack) !important;
}

.ashby-application-form-field-entry div[class*='file'] > button:hover svg {
  fill: var(--colorNegative600) !important;
}

/* ========================================
   SECTION HEADERS
   ======================================== */

.ashby-application-form-section-header-title {
  color: var(--colorOffBlack);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

/* ========================================
   SUBMIT BUTTON
   ======================================== */

.ashby-application-form-submit-button {
  background-color: var(--colorPrimary600);
  color: var(--colorOffBlack);
  border: none;
  border-radius: var(--borderRadiusButton);
  padding: 12px 24px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: normal;
  box-shadow: none;
  font-size: 14px;
  height: 40px;
}

.ashby-application-form-submit-button:focus,
.ashby-application-form-submit-button:focus-visible,
.ashby-application-form-submit-button:focus-within {
  outline: 2px solid var(--colorPrimary600) !important;
  outline-offset: 2px;
}

.ashby-application-form-submit-button svg,
.ashby-application-form-submit-button:hover svg {
  fill: var(--colorOffBlack);
}

.ashby-application-form-submit-button:hover {
  background-color: var(--colorPrimary600);
  color: var(--colorOffBlack);
  opacity: 0.9;
  box-shadow: none;
}

.ashby-application-form-submit-button:active {
  opacity: 0.8;
}

.ashby-application-form-submit-button:disabled {
  background-color: rgba(20, 20, 15, 0.05);
  color: #838377;
  cursor: not-allowed;
}