/* ── New Request Page ──────────────────────────────────────────────────── */

/* Override brand focus/primary color scoped to this page */
.lt-new-request-page {
  --input-color-border-focus: #868EA5;
  --color-brand-primary: #868EA5;
  --color-danger: #E05C5C;
  --color-ui-danger-text: #E05C5C;
  --color-ui-danger-bg: rgba(224, 92, 92, 0.1);
}

/* Dark background — overrides --light class if still present, and sets default */
.lt-new-request-page,
.lt-new-request-page--light {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* ── Suggested article links ───────────────────────────────────────────── */

[data-garden-id="buttons.anchor"] {
  position: relative;
  color: #C5C9D6 !important;
  text-decoration: none !important;

  /* Left-to-right underline via background-image */
  background-image: linear-gradient(#C5C9D6, #C5C9D6) !important;
  background-position: 0 100% !important;
  background-size: 0% 1px !important;
  background-repeat: no-repeat !important;
  transition: color 0.2s ease, background-size 0.25s ease !important;
}

/* Arrow pseudo-element — slides in on hover */
[data-garden-id="buttons.anchor"]::after {
  content: ' →';
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: pre;
}

/* Hover state */
[data-garden-id="buttons.anchor"]:hover {
  color: #ffffff !important;
  background-image: linear-gradient(#ffffff, #ffffff) !important;
  background-size: 100% 1px !important;
}

[data-garden-id="buttons.anchor"]:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* ── Hide "What do you need help with?" dropdown ──────────────────────── */

#new-request-form [data-garden-id="dropdowns.combobox.field"],
#new-request-form [data-garden-id="dropdowns.combobox"] {
  display: none !important;
}

/* ── Subtitle / response time note ────────────────────────────────────── */

.lt-new-request-subtitle {
  font-family: 'Aeonik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.296;
  letter-spacing: 0.05px;
  color: #D1D3DB;
  margin-top: -36px;
  margin-bottom: 48px;
}

/* ── Form labels and hints — white/light on dark background ───────────── */

#new-request-form label[data-garden-id="forms.field_label"],
#new-request-form label[for*="input"],
#new-request-form [data-garden-id="forms.field_label"],
#new-request-form [data-garden-id="dropdowns.combobox.field"] label,
#new-request-form [data-garden-id="dropdowns.combobox"] label {
  font-family: 'Aeonik', sans-serif !important;
  font-size: clamp(15px, 1.5vw, 16px) !important;
  font-weight: 500 !important;
  color: #D1D3DB !important;
}

#new-request-form [data-garden-id="forms.field_hint"],
#new-request-form .ck-voice-label,
#new-request-form div[id*="hint"] {
  color: #868EA5 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

#new-request-form [data-garden-id="forms.field_label_required"],
#new-request-form label span[aria-hidden="true"],
#new-request-form label [data-garden-id*="required"],
#new-request-form [data-garden-id="typography.paragraph"] {
  color: #868EA5 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}


/* ── Submit button — secondary style (transparent + white border) ──────── */

#new-request-form button[type="submit"] {
  font-family: 'Aeonik', sans-serif !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  letter-spacing: 0.02rem !important;
  color: #ffffff !important;
  background: transparent !important;
  background-image: none !important;
  border: 1px solid #636367 !important;
  border-radius: 8px !important;
  padding: .8rem 3rem !important;
  position: relative !important;
  transition: border-color 0.2s ease, transform 0.2s ease !important;
  box-shadow: none !important;
}

#new-request-form button[type="submit"]::after {
  content: '→';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

#new-request-form button[type="submit"]:hover::after,
#new-request-form button[type="submit"]:focus::after {
  opacity: 1;
}

#new-request-form button[type="submit"]:hover,
#new-request-form button[type="submit"]:focus {
  color: #ffffff !important;
  background: transparent !important;
  background-color: transparent !important;
  border-color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: none !important;
}

@media (max-width: 575px) {
  #new-request-form button[type="submit"] {
    width: 100% !important;
    padding: 10px 44px !important;
  }
}

/* ── File upload area — visible on dark background ─────────────────────── */

#new-request-form [data-garden-id="forms.file_upload"] {
  border-color: #4a4a4a !important;
  background: #191A1F !important;
  color: #D1D3DB !important;
}

#new-request-form [data-garden-id="forms.file_upload"] button {
  color: #D1D3DB !important;
  background: transparent !important;
}

#new-request-form [data-garden-id="forms.file_upload"] * {
  color: #D1D3DB !important;
}

#new-request-form [data-garden-id="forms.file_upload"]:hover {
  border-color: #868EA5 !important;
}

/* ── Input field active/focus border — white instead of blue ───────────── */

#new-request-form [data-garden-id="forms.input"]:focus,
#new-request-form [data-garden-id="forms.input"]:focus-within,
#new-request-form [data-garden-id="forms.textarea"]:focus,
#new-request-form [data-garden-id="forms.textarea"]:focus-within,
#new-request-form [data-garden-id="dropdowns.combobox"]:focus-within,
#new-request-form [data-garden-id="dropdowns.combobox.input"]:focus,
#new-request-form [data-garden-id="dropdowns.combobox.container"]:focus-within,
#new-request-form .ck-editor:focus-within,
#new-request-form .ck-editor__editable:focus {
  border-color: #868EA5 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Combobox open/focused state — Styled Components injects these */
#new-request-form [data-garden-id="dropdowns.combobox"],
#new-request-form [data-garden-id="dropdowns.combobox"]:focus-within,
#new-request-form [data-garden-id="dropdowns.combobox"][data-garden-focus-visible] {
  --garden-border-color-focused: #868EA5 !important;
  border-color: #868EA5 !important;
  box-shadow: none !important;
}

/* Remove left accent bar — target every possible rendering */
[data-garden-id="dropdowns.combobox.option"]::before,
[data-garden-id="dropdowns.combobox.option"]::after,
[data-garden-id="dropdowns.menu.item"]::before,
[role="option"]::before {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  opacity: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Also target it as a real element if Styled Components renders it as a div/span */
[data-garden-id="dropdowns.combobox.option"] > *:first-child:not([data-garden-id]),
[role="option"] > *:first-child:not([data-garden-id]) {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* Background fill on hover/focus */
[data-garden-id="dropdowns.combobox.option"]:hover,
[data-garden-id="dropdowns.combobox.option"]:focus,
[data-garden-id="dropdowns.combobox.option"][data-garden-focus-visible],
[role="option"]:hover {
  background-color: rgba(134, 142, 165, 0.12) !important;
}