/* ========== Font Face – local Inter v19 ========== */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/inter-v19-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/inter-v19-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ========== Root variables & Reset ========== */
:root {
  --clr-primary   : #1e40af;
  --clr-secondary : #ffbf24;
  --clr-dark      : #0f172a;
  --clr-light     : #f8fafc;
  --radius        : 1rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  color: var(--clr-dark);
  background-color: var(--clr-light);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ========== Container card ========== */
.form-container {
  background: rgba(255,255,255,0.97);
  max-width: 420px;
  margin: 40px auto;
  border-radius: calc(var(--radius) * 2.2);
  box-shadow: 0 4px 32px rgba(0,0,0,.07);
  padding: 2.2rem 1.2rem 1.6rem;
  position: relative;
}

/* ========== Header ========== */
.form-header {
  text-align: center;
  margin-bottom: 24px;
}
.form-header h2 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -1.5px;
  color: var(--clr-dark);
}
.form-header .desc {
  font-size: 1rem;
  margin-top: .4rem;
}

/* ========== Progress dots ========== */
.form-progress {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
}
.form-progress span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ccc;
  border: 2px solid #bbb;
  transition: background .2s;
}
.form-progress .active {
  background: var(--clr-secondary);
  border-color: var(--clr-primary);
}

/* ========== Step wrapper ========== */
.form-step {
  display: none;
  flex-direction: column;
}
.form-step.active { display: flex; }

.step-title {
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
}
.step-desc {
  font-size: 1rem;
  text-align: center;
  margin-bottom: 22px;
  color: #444;
}

/* ========== Option buttons ========== */
.options-btn-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.option-btn {
  width: 100%;
  padding: 1.1em;
  border: 2px solid var(--clr-dark);
  border-radius: calc(var(--radius) * 1.5);
  background: var(--clr-light);
  color: var(--clr-dark);
  font-size: 1.05rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  cursor: pointer;
  transition: all .18s;
  text-align: center;
}
.option-btn.selected,
.option-btn:focus {
  border-width: 2.5px;
  border-color: var(--clr-secondary);
  background: linear-gradient(90deg,#22293d 60%,#3558a8 100%);
  color: #fff;
}
.option-btn:active   { opacity: .92; }
.option-btn[disabled]{ opacity: .55; pointer-events: none; }

/* (hidden) input untuk “lainnya” */
.lainnya-input {
  display: none;
  width: 100%;
  margin-top: 6px;
  padding: .85em;
  font-size: 1rem;
  border-radius: calc(var(--radius) * 1);
  border: 1.3px solid #bbb;
  background: #fff;
}

/* input di langkah terakhir harus selalu tampil */
.lainnya-input.always-show,
.u-block { display: block !important; }

/* ========== Navigation (Prev/Next/Submit) ========== */
.form-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 10px;
}
.btn {
  padding: .85em 2.3em;
  font-size: 1.1rem;
  border-radius: calc(var(--radius) * 1.2);
  font-weight: 700;
  cursor: pointer;
  transition: background .17s, opacity .17s;
  border: none;
}
.btn-primary {
  background: var(--clr-primary);
  color: #fff;
  border: 2.5px solid var(--clr-secondary);
  box-shadow: 0 2px 10px rgba(29,64,194,.09);
}
.btn-primary:active { background:#16328e; }
.btn-secondary {
  background: #22293d;
  color: #fff;
  border: 2px solid #aaa;
}
.btn[disabled] { opacity:.6; pointer-events:none; }

/* ========== Alert & Success ========== */
.alert-msg {
  background:#ffeaea;
  color:#be2232;
  font-size:1rem;
  padding:.6em .8em;
  margin-bottom:.5em;
  border-radius: var(--radius);
  text-align:center;
  display:none;
}
#successMsg {
  font-size:1.2rem;
  font-weight:600;
  color:var(--clr-primary);
}

/* ========== Helpers (JS toggles) ========== */
.u-hide   { display:none!important; }
.u-flex   { display:flex!important; }
.u-block  { display:block!important; }

/* ========== Responsive tweak ========== */
@media (max-width:600px){
  .form-container{
    margin:0;
    max-width:100vw;
    min-height:100vh;
    border-radius:0;
    padding:1.4rem .6rem 1.8rem;
  }
  .form-header h2{ font-size:1.45rem; }
}