/* ==========================================================================
   GEMS 2.0 — Semak Status Majikan (public/semak/majikan.html, verify-otp.html).

   Bergantung pada gems-v2.css (token :root + .v2-login-shell/.v2-login-hero/
   .v2-field/.v2-btn-primary). Hanya gaya khusus aliran semakan tinggal di sini.
   ========================================================================== */

/* ---- Langkah 1: borang semakan (kongsi shell log masuk) ---------------- */

.v2-eyebrow {
  margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--v2-teal-fg);
}
.v2-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--v2-muted-fg); line-height: 1.5; }

/* +60 di kiri input telefon. */
.v2-prefix { display: flex; }
.v2-prefix-label {
  display: flex; align-items: center; padding: 0 12px;
  border: 1px solid #dbe2ea; border-right: 0; border-radius: 8px 0 0 8px;
  background: var(--v2-bg); font-weight: 700; color: var(--v2-teal-fg); font-size: 15px;
}
.v2-prefix input { border-radius: 0 8px 8px 0; min-width: 0; }

/* Ralat jQuery Validate (errorPlacement → .v2-field). `label.error` akan warisi
   gaya label medan (tebal, blok) — tindih di sini. */
.v2-field input.is-invalid { border-color: var(--v2-danger-fg); }
.v2-field label.error,
.v2-field .invalid-feedback {
  display: block; margin: 6px 0 0; font-size: 12px; font-weight: 600; color: var(--v2-danger-fg);
}

.v2-note {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 4px 0 18px; padding: 12px 14px; border-radius: 10px;
  background: var(--v2-soft); border: 1px solid #cfe9e1; color: var(--v2-teal-fg);
}
.v2-note svg { flex: 0 0 auto; margin-top: 1px; }
.v2-note b { display: block; font-size: 13px; color: var(--v2-ink); margin-bottom: 3px; }
.v2-note p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--v2-muted-fg); }

/* ---- Langkah 2: kad OTP (ala skrin MFA mockup) ------------------------- */

/* Latar imej Sabah penuh skrin + kad tengah — sama dengan login versi mobile.
   ::before position:fixed, BUKAN background-attachment:fixed (iOS Safari). */
.v2-otp-body {
  margin: 0; min-height: 100vh; box-sizing: border-box;
  display: grid; place-items: center; padding: 24px 16px;
  background: #063f31;
  color: var(--v2-ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}
.v2-otp-body::before {
  content: ""; position: fixed; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, rgba(4, 46, 35, .45), rgba(4, 46, 35, .75)),
    url("img/login-hero-sabah.webp") center top / cover no-repeat;
}
.v2-otp-body .main-container { position: relative; z-index: 1; width: 100%; }

.v2-otp-card {
  width: 100%; max-width: 460px; margin: 0 auto; box-sizing: border-box;
  padding: 32px 30px 26px; border-radius: 18px;
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(255, 255, 255, .17);
  box-shadow: 0 28px 75px rgba(4, 36, 29, .38);
  text-align: center;
}

.v2-otp-step {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: var(--v2-soft); color: var(--v2-teal-fg);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.v2-otp-title { margin: 12px 0 6px; font-size: 22px; font-weight: 700; color: var(--v2-ink); }

.v2-otp-dest { font-size: 13px; color: var(--v2-muted-fg); line-height: 1.5; }
.v2-otp-dest b { display: block; color: var(--v2-ink); font-size: 15px; word-break: break-all; }

.v2-otp-timer {
  display: flex; justify-content: center; align-items: baseline; gap: 8px;
  margin: 18px 0; padding: 10px; border-radius: 10px;
  background: var(--v2-bg); font-size: 13px; color: var(--v2-muted-fg);
}
/* verify-otp.js tukar text-success → text-danger bila < 1 minit. */
.v2-otp-timer .countdown-timer { font-size: 20px; font-variant-numeric: tabular-nums; }
.v2-otp-timer .text-success { color: var(--v2-teal-fg) !important; }
.v2-otp-timer .text-danger  { color: var(--v2-danger-fg) !important; }

.v2-otp-fieldset { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.v2-otp-label { float: none; width: auto; margin: 0 0 10px; padding: 0; font-size: 13px; font-weight: 700; color: var(--v2-ink); }
.v2-otp-inputs { display: flex; justify-content: center; gap: 8px; }
/* 20px teks: > 16px elak zum automatik iOS. */
.v2-otp-inputs .otp-input {
  width: 46px; height: 54px; box-sizing: border-box; padding: 0;
  border: 1px solid #dbe2ea; border-radius: 10px; background: #fff;
  text-align: center; font-size: 22px; font-weight: 700; color: var(--v2-ink);
}
.v2-otp-inputs .otp-input:focus { outline: 2px solid var(--v2-teal); outline-offset: 1px; border-color: var(--v2-teal); }

.v2-otp-resend { margin-top: 14px; font-size: 13px; color: var(--v2-muted-fg); }
.v2-link-btn {
  border: 0; background: none; padding: 0 0 0 4px; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--v2-teal-fg);
}
.v2-link-btn:disabled { color: var(--v2-muted-fg); cursor: not-allowed; }

.v2-otp-help {
  margin-top: 18px; padding: 10px 14px; border-radius: 10px;
  background: #fff8e8; border: 1px solid #f3e2b3; text-align: left; font-size: 12px;
}
.v2-otp-help summary { cursor: pointer; font-weight: 700; color: #7a5a00; }
.v2-otp-help ul { margin: 8px 0 2px; padding-left: 18px; color: #5a4a1f; line-height: 1.6; }

.v2-otp-back { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--v2-line); }

@media (max-width: 420px) {
  .v2-otp-card { padding: 26px 18px 22px; }
  .v2-otp-inputs { gap: 6px; }
  .v2-otp-inputs .otp-input { width: 40px; height: 50px; }
}

/* ---- Selepas OTP sah: dashboard majikan (dibina oleh verify-otp.js) ----- */

body.v2-otp-body--dashboard { display: block; padding: 0; background: var(--v2-bg); }
body.v2-otp-body--dashboard::before { display: none; }

/* ---- Pendaftaran Ahli (public/mohon/peserta-new.html) ----------------- */

.v2-org-logo { display: inline-block; margin: 0 0 12px; }
.v2-org-logo img { height: 56px; width: auto; }

/* Label kumpulan (bukan <label> — elak gaya blok .v2-field label). */
.v2-label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 6px; }

.v2-field select {
  width: 100%; box-sizing: border-box; border: 1px solid #dbe2ea; border-radius: 8px;
  padding: 12px 13px; font-size: 16px; color: var(--v2-ink); background: #fff;
}
.v2-field select:focus { outline: 2px solid var(--v2-teal); outline-offset: 1px; border-color: var(--v2-teal); }

.v2-radio-group { display: flex; gap: 10px; flex-wrap: wrap; }
.v2-field label.v2-radio {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 10px 14px; border: 1px solid #dbe2ea; border-radius: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer; background: #fff;
}
.v2-field label.v2-radio:has(input:checked) { border-color: var(--v2-teal); background: var(--v2-soft); color: var(--v2-teal-fg); }

/* Radio/checkbox/fail di dalam .v2-field: buang gaya input teks (lebar penuh,
   padding, saiz 16px) yang diwarisi daripada `.v2-field input`. */
.v2-field .v2-radio input,
.v2-field .v2-check input {
  width: 18px; height: 18px; padding: 0; margin: 0; border: 0; flex: 0 0 auto;
  accent-color: var(--v2-teal-dark);
}
.v2-field label.v2-check { display: flex; font-weight: 400; margin: 0; }
.v2-field input[type="file"] { padding: 9px 10px; font-size: 14px; background: var(--v2-bg); cursor: pointer; }

.v2-inline-link { color: var(--v2-teal-fg); font-weight: 700; }

/* jquery.validate: kelas "error" pada input tidak sah + label ralat kosong. */
.v2-field input.error, .v2-field select.error { border-color: var(--v2-danger-fg); }
.v2-field label.error:empty { display: none; }

/* form.js minta SweetAlert susun butang dengan kelas Bootstrap order-1/2/3;
   Bootstrap tidak lagi dimuat, jadi takrif di sini (Batal, Ya, Tidak). */
.swal2-actions .order-1 { order: 1; }
.swal2-actions .order-2 { order: 2; }
.swal2-actions .order-3 { order: 3; }

/* Borang panjang (pendaftaran): tanpa ini hero diregang setinggi borang dan
   imej (logo GEMS, "Sabah") terpotong. Hero kekal nisbah imej 832x945 dan
   melekat semasa skrol. Desktop sahaja — mobile ikut .v2-login-hero disorok. */
@media (min-width: 851px) {
  .v2-login-shell--tall { align-items: start; }
  .v2-login-shell--tall .v2-login-hero {
    position: sticky; top: 0;
    min-height: 0; aspect-ratio: 832 / 945;
  }
}

/* ---- Wizard pendaftaran (peserta-new.html + wizard.js) ---------------- */
.v2-steps { display: flex; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; counter-reset: none; }
.v2-steps li { flex: 1; display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 3px solid var(--v2-line); color: var(--v2-muted-fg); font-size: 12px; font-weight: 600; }
.v2-steps li span { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; display: grid; place-items: center; background: var(--v2-bg); border: 1px solid var(--v2-line); font-size: 12px; }
.v2-steps li em { font-style: normal; }
.v2-steps li.is-active { border-bottom-color: var(--v2-teal); color: var(--v2-teal-fg); }
.v2-steps li.is-active span { background: var(--v2-teal-dark); border-color: var(--v2-teal-dark); color: #fff; }
.v2-steps li.is-done { border-bottom-color: var(--v2-teal); color: var(--v2-teal-fg); }
.v2-steps li.is-done span { background: var(--v2-soft); border-color: var(--v2-teal); color: var(--v2-teal-fg); }
.v2-step { display: none; }
.v2-step.is-active { display: block; }
.v2-wizard-nav { display: flex; gap: 10px; margin-top: 6px; }
.v2-wizard-nav > button { flex: 1; }
.v2-wizard-nav > button[hidden] { display: none; }
.v2-btn-secondary {
  width: 100%; border: 1px solid var(--v2-line); border-radius: 8px; padding: 13px;
  background: #fff; color: var(--v2-ink); font-size: 15px; font-weight: 700; cursor: pointer;
}
.v2-btn-secondary:hover { background: var(--v2-bg); }
@media (max-width: 420px) { .v2-steps li em { display: none; } }

/* Panel selepas pendaftaran berjaya (wizard.js). */
.v2-success { text-align: center; padding: 24px 8px 8px; }
.v2-success[hidden] { display: none; }
.v2-success-icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--v2-soft); color: var(--v2-teal-fg); font-size: 28px; font-weight: 800; }
.v2-success h3 { margin: 0 0 8px; font-size: 18px; color: var(--v2-ink); }
.v2-success p { margin: 0 0 18px; color: var(--v2-muted-fg); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }