body { font-family: 'Inter', sans-serif; }

.material-symbols-rounded {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  line-height: 1;
}

/* Step indicator custom */
.step-item { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; position: relative; }
.step-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 18px;
  left: calc(50% + 18px);
  right: calc(-50% + 18px);
  height: 2px;
  background: #e2e8f0;
  z-index: 0;
}
.step-item.done::after { background: #16a34a; }
.step-item.active::after { background: linear-gradient(90deg, #16a34a 50%, #e2e8f0 50%); }

.step-circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  position: relative; z-index: 1;
  border: 2px solid #e2e8f0;
  background: #fff;
  color: #94a3b8;
  transition: all 0.25s;
}
.step-item.done .step-circle { background: #16a34a; border-color: #16a34a; color: #fff; }
.step-item.active .step-circle { background: #fff; border-color: #16a34a; color: #16a34a; box-shadow: 0 0 0 4px #dcfce7; }
.step-label { font-size: 11px; font-weight: 500; color: #94a3b8; text-align: center; }
.step-item.done .step-label { color: #16a34a; }
.step-item.active .step-label { color: #15803d; font-weight: 600; }

/* Input focus ring */
.input:focus, .select:focus { outline: none; border-color: #16a34a; box-shadow: 0 0 0 3px #dcfce7; }

/* Radio card */
.radio-card input[type=radio] { display: none; }
.radio-card input[type=radio]:checked + .rc-box { border-color: #16a34a; background: #f0fdf4; }
.radio-card input[type=radio]:checked + .rc-box .rc-icon { color: #16a34a; }
.radio-card input[type=radio]:checked + .rc-box .rc-label { color: #15803d; font-weight: 600; }
.rc-box {
  border: 2px solid #e2e8f0; border-radius: 14px;
  padding: 14px 10px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: all 0.2s; background: #fff;
}
.rc-box:hover { border-color: #bbf7d0; background: #f0fdf4; }
.rc-icon { font-size: 28px; color: #94a3b8; transition: color 0.2s; }
.rc-label { font-size: 13px; font-weight: 500; color: #64748b; transition: color 0.2s; }

/* Floating unit badge inside input */
.input-unit-wrap { position: relative; }
.input-unit-wrap .unit-badge {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 12px; font-weight: 600; color: #94a3b8;
  background: #f1f5f9; border-radius: 6px; padding: 2px 7px;
  pointer-events: none;
}
.input-unit-wrap input { padding-right: 52px; }

/* Section card: HATI-HATI di sini supaya dropdown tidak ke-scroll di dalam card */
.form-section {
  background: #fff;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  /* jangan pakai overflow: hidden; supaya dropdown boleh keluar */
  overflow: visible;
  position: relative; /* agar dropdown absolute bisa refer ke card */
}
.form-section-header { padding: 22px 28px 0; }
.form-section-body { padding: 20px 28px 28px; }

/* Sidebar card */
.info-card { border-radius: 18px; padding: 20px; }

/* Submit button pulse */
@keyframes subtlePulse { 0%,100%{box-shadow:0 0 0 0 #16a34a33} 50%{box-shadow:0 0 0 8px #16a34a00} }
.btn-submit-pulse { animation: subtlePulse 2.5s infinite; }

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* === Choices.js + dropdown mengambang di luar card === */

/* wrapper supaya z-index cukup tinggi */
.choices {
  width: 100%;
  z-index: 10;   /* di atas isi card */
  position: relative;
}

.choices__inner {
  border-radius: 0.75rem;
  border-color: #e2e8f0;
  min-height: 2.75rem;
  font-size: 0.875rem;
}
.choices__inner.is-focused,
.is-open .choices__inner {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px #dcfce7;
}

.choices__list--dropdown {
  position: absolute;       /* mengambang di bawah input */
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  z-index: 50;              /* di atas card dan disclaimer */
  max-height: 240px;
  overflow-y: auto;
  border-radius: 0.75rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: #f0fdf4;
  color: #15803d;
}