/*
 * UCL Ltd careers form styles. Everything is scoped to .ucl-apply so it
 * cannot leak into the rest of the site. Colours are the locked UCL palette.
 * Amber is used once per screen (the main button), always with navy text.
 * Small text uses blue-mid, not blue, for contrast on white.
 */
.ucl-apply {
  --ua-navy: #003250;
  --ua-navy-deep: #002138;
  --ua-blue: #0098d6;
  --ua-blue-mid: #0270b8;
  --ua-blue-soft: #a8d4ee;
  --ua-ice: #eaf4fa;
  --ua-amber: #fdb913;
  --ua-amber-hover: #e3a300;
  --ua-text: #233c4d;
  --ua-muted: #5b7385;
  --ua-line: #c5d6e2;
  --ua-error: #b3261e;

  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ua-text);
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}

.ucl-apply *,
.ucl-apply *::before,
.ucl-apply *::after {
  box-sizing: border-box;
}

.ucl-apply .ua-card {
  background: #fff;
  border: 1px solid var(--ua-line);
  border-radius: 8px;
  padding: 20px 16px 24px;
}

@media (min-width: 600px) {
  .ucl-apply .ua-card {
    padding: 28px 32px 32px;
  }
}

/* progress */
.ucl-apply .ua-progress {
  height: 6px;
  background: var(--ua-ice);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 20px;
}

.ucl-apply .ua-progress__fill {
  height: 100%;
  background: var(--ua-blue-mid);
  transition: width 0.25s ease;
}

/* headings and copy */
.ucl-apply .ua-title {
  font-family: Archivo, Inter, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.15;
  color: var(--ua-navy);
  margin: 0 0 8px;
}

.ucl-apply .ua-title:focus {
  outline: none;
}

.ucl-apply .ua-hint,
.ucl-apply .ua-lead {
  font-size: 1.0625rem;
  line-height: 1.5;
  margin: 0 0 20px;
}

.ucl-apply .ua-small {
  font-size: 0.875rem;
  color: var(--ua-muted);
  margin: 16px 0 0;
}

.ucl-apply a {
  color: var(--ua-blue-mid);
}

/* questions */
.ucl-apply .ua-q {
  border: 0;
  padding: 0;
  margin: 0 0 24px;
  min-width: 0;
}

.ucl-apply .ua-q__label {
  display: block;
  padding: 0;
  margin: 0 0 10px;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--ua-navy);
}

/* tap cards */
.ucl-apply .ua-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 12px 16px;
  margin: 0 0 10px;
  border: 2px solid var(--ua-line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 1.0625rem;
  line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
}

.ucl-apply .ua-option.is-checked {
  border-color: var(--ua-navy);
  background: var(--ua-ice);
}

.ucl-apply .ua-option__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.ucl-apply .ua-option__mark {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 2px solid var(--ua-muted);
  background: #fff;
  position: relative;
}

.ucl-apply .ua-option__mark.is-box {
  border-radius: 5px;
}

.ucl-apply .ua-option__mark.is-dot {
  border-radius: 50%;
}

.ucl-apply .ua-option.is-checked .ua-option__mark {
  background: var(--ua-blue-mid);
  border-color: var(--ua-blue-mid);
}

.ucl-apply .ua-option.is-checked .ua-option__mark.is-box::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 2px;
  width: 7px;
  height: 13px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.ucl-apply .ua-option.is-checked .ua-option__mark.is-dot::after {
  content: "";
  position: absolute;
  inset: 5px;
  background: #fff;
  border-radius: 50%;
}

.ucl-apply .ua-option__input:focus-visible ~ .ua-option__mark {
  outline: 3px solid var(--ua-blue-mid);
  outline-offset: 3px;
}

/* detail boxes under an option */
.ucl-apply .ua-detail {
  margin: -2px 0 12px 8px;
  padding-left: 14px;
  border-left: 4px solid var(--ua-blue-soft);
}

.ucl-apply .ua-detail[hidden] {
  display: none;
}

.ucl-apply .ua-detail__label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 6px;
}

/* text fields: 16px stops iPhones zooming in */
.ucl-apply .ua-input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem;
  color: var(--ua-text);
  background: #fff;
  border: 2px solid var(--ua-muted);
  border-radius: 8px;
}

.ucl-apply textarea.ua-input {
  min-height: 96px;
  resize: vertical;
}

.ucl-apply .ua-input:focus-visible {
  outline: 3px solid var(--ua-blue-mid);
  outline-offset: 2px;
}

/* errors */
.ucl-apply .ua-error {
  margin: 8px 0 0;
  color: var(--ua-error);
  font-weight: 600;
  font-size: 0.9375rem;
}

.ucl-apply .has-error .ua-input,
.ucl-apply .has-error .ua-option {
  border-color: var(--ua-error);
}

.ucl-apply .ua-banner {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 4px solid var(--ua-error);
  background: #fdf2f1;
  color: var(--ua-error);
  font-weight: 600;
}

.ucl-apply .ua-banner[hidden] {
  display: none;
}

/* navigation */
.ucl-apply .ua-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.ucl-apply .ua-count {
  margin: 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--ua-muted);
}

.ucl-apply .ua-btn {
  min-height: 52px;
  padding: 12px 24px;
  font: inherit;
  font-weight: 700;
  font-size: 1.0625rem;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.ucl-apply .ua-btn--primary {
  background: var(--ua-amber);
  color: var(--ua-navy);
}

.ucl-apply .ua-btn--primary:hover {
  background: var(--ua-amber-hover);
}

.ucl-apply .ua-btn--primary:disabled {
  opacity: 0.6;
  cursor: wait;
}

.ucl-apply .ua-btn--text {
  background: transparent;
  color: var(--ua-blue-mid);
  text-decoration: underline;
  padding-left: 4px;
  padding-right: 4px;
}

.ucl-apply .ua-btn:focus-visible {
  outline: 3px solid var(--ua-blue-mid);
  outline-offset: 3px;
}

.ucl-apply .ua-turnstile {
  margin: 8px 0 16px;
}

/* honeypot: off screen, not display:none, so simple bots still fill it */
.ucl-apply .ua-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .ucl-apply .ua-progress__fill {
    transition: none;
  }
}