@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600&display=swap");

/*
 * Starbike Corporation — Job Application Form styles
 * Matches the index.html theme (Poppins, brand blue #1C3393, green/cyan accents)
 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #f9fafb;
  color: #111827;
  font-family: "Poppins", sans-serif;
}

h1,
h2,
.font-display {
  font-family: "Poppins", sans-serif;
}

/* Green → cyan gradient title (like the index hero) */
.gradient-text {
  background: linear-gradient(90deg, #14ff72 0%, #00cfff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Input polish ─────────────────────────────────────── */
.form-input {
  transition: all 0.2s ease;
}
.form-input:focus {
  outline: none;
  border-color: #1c3393 !important;
  box-shadow: 0 0 0 4px rgba(28, 51, 147, 0.12);
  background-color: #fff;
}

/* Custom dropdown chevron */
select.form-input {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* ── Custom radio pill ────────────────────────────────── */
.radio-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: 9999px;
  background: #f8f9fc;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 500;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.2s ease;
}
.radio-pill:hover {
  background: #eef1fa;
}
.radio-pill input {
  accent-color: #1c3393;
}
.radio-pill:has(input:checked) {
  background: #e8ecfa;
  border-color: #1c3393;
  color: #1c3393;
}

/* ── Primary button (brand-blue gradient) ─────────────── */
.btn-primary {
  background: linear-gradient(180deg, #1c3393 0%, #162a7a 100%);
  color: #fff;
  padding: 0.9rem 2.5rem;
  border-radius: 14px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  box-shadow:
    0 10px 24px -8px rgba(28, 51, 147, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.btn-primary:active {
  transform: translateY(0);
}

/* ── Conditional reveal (Yes → show text box) ─────────── */
.yes-input {
  display: none;
}
.yes-input.show {
  display: block;
  animation: fadeIn 0.25s ease-out both;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Section number bubble (inside each card header) ──── */
.section-num {
  width: 30px;
  height: 30px;
  border-radius: 9999px;
  background: #e8ecfa;
  color: #1c3393;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Sticky section navigator (left rail) ─────────────── */
.step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  color: #6b7280;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}
.step:hover {
  background: #f1f4fb;
  color: #1c3393;
}
.step.active {
  background: #e8ecfa;
  color: #1c3393;
  font-weight: 600;
}
.step-num {
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  background: #e8ecfa;
  color: #1c3393;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.step.active .step-num {
  background: #1c3393;
  color: #fff;
}