/* ============================================================
   Free NAATI CCL Mock Test — Page Styles
   ============================================================ */

.nmt-page {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #111827;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.nmt-page *, .nmt-page *::before, .nmt-page *::after { box-sizing: border-box; margin: 0; padding: 0; }
.nmt-page a { text-decoration: none; }
.nmt-page img { display: block; max-width: 100%; object-fit: cover; }

/* CSS VARIABLES */
:root {
  --nmt-n: #059669; --nmt-nd: #047857; --nmt-nl: #ECFDF5; --nmt-nb: #A7F3D0; --nmt-nm: #34D399;
  --nmt-navy: #050f0a; --nmt-navy2: #071a10; --nmt-navy3: #0a2518;
  --nmt-border: #E5E7EB; --nmt-muted: #6B7280; --nmt-surface: #F9FAFB;
  --nmt-r: 12px; --nmt-r2: 20px;
}

/* ── PREVIEW BAR ──────────────────────────────────────────── */
.nmt-preview-bar {
  background: #FEF3C7; border-bottom: 2px solid #F5B731;
  color: #92400E; font-size: 13px; font-weight: 700;
  text-align: center; padding: 10px;
}

/* ── LAYOUT UTILS ────────────────────────────────────────── */
.nmt-cx  { max-width: 1280px; margin: 0 auto; padding: 0; }
.nmt-sec { padding: 64px 5%; }
.nmt-sec.soft { background: var(--nmt-surface); }
.nmt-stag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--nmt-n); display: block; margin-bottom: 7px; }
.nmt-sh { font-size: clamp(22px, 3.2vw, 38px); font-weight: 800; color: #111; line-height: 1.1; letter-spacing: -1.2px; }
.nmt-sh.lt { color: #fff; }
.nmt-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.nmt-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.nmt-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* ── TWO-COLUMN LAYOUT (content + sticky sidebar) ────────── */
.nmt-layout-wrap { padding: 0 5%; }
.nmt-layout { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: start; max-width: 1280px; margin: 0 auto; }
.nmt-main { min-width: 0; }
.nmt-main .nmt-sec { padding-inline: 0; }
.nmt-sb { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 80px; padding: 56px 0; }

@media(max-width: 960px) {
  .nmt-layout { grid-template-columns: 1fr; }
  .nmt-sb { position: static; padding: 0 0 48px; }
  .nmt-g3 { grid-template-columns: 1fr 1fr; }
  .nmt-g4 { grid-template-columns: 1fr 1fr; }
}
@media(max-width: 540px) {
  .nmt-g2, .nmt-g3, .nmt-g4 { grid-template-columns: 1fr; }
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.nmt-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 800; padding: 12px 22px;
  border-radius: 10px; border: none; cursor: pointer;
  font-family: inherit; transition: .18s; letter-spacing: -.2px; white-space: nowrap;
}
.nmt-btn.lg  { font-size: 16px; padding: 14px 28px; border-radius: 12px; }
.nmt-btn-n   { background: var(--nmt-n); color: #fff; box-shadow: 0 4px 14px rgba(5,150,105,.3); }
.nmt-btn-n:hover { background: var(--nmt-nd); transform: translateY(-1px); }
.nmt-btn-gold { background: #F5B731; color: #111; box-shadow: 0 4px 12px rgba(245,183,49,.28); }
.nmt-btn-gold:hover { background: #D4981B; transform: translateY(-1px); }
.nmt-btn-out  { background: #fff; color: var(--nmt-n); border: 2px solid var(--nmt-nb); }
.nmt-btn-out:hover { background: var(--nmt-nl); }
.nmt-btn-wh   { background: rgba(255,255,255,.1); color: #fff; border: 1.5px solid rgba(255,255,255,.2); }
.nmt-btn-wh:hover { background: rgba(255,255,255,.18); }

/* ── FORM ELEMENTS ───────────────────────────────────────── */
.nmt-fi, .nmt-fs {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--nmt-border);
  border-radius: 9px; font-size: 14px; font-family: inherit;
  color: #111; outline: none; transition: .15s; background: #fff;
}
.nmt-fi:focus, .nmt-fs:focus { border-color: var(--nmt-n); box-shadow: 0 0 0 3px rgba(5,150,105,.09); }
.nmt-fs {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236B7280' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 13px; padding-right: 28px;
}
.nmt-ff  { margin-bottom: 10px; }
.nmt-fl  { font-size: 11.5px; font-weight: 700; color: #374151; margin-bottom: 3px; display: block; }
.nmt-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media(max-width: 480px) { .nmt-frow { grid-template-columns: 1fr; } }
.nmt-tel-row { display: flex; gap: 6px; }
.nmt-tel-row .nmt-fs { width: 112px; flex-shrink: 0; padding-right: 22px; }
.nmt-tel-row .nmt-fi { flex: 1; min-width: 0; }

/* ── SIDEBAR WIDGETS ─────────────────────────────────────── */
.nmt-sb-card { background: #fff; border: 1.5px solid var(--nmt-border); border-radius: var(--nmt-r2); overflow: hidden; }
.nmt-sb-card-body { padding: 18px; }
.nmt-sb-fbox-hd { padding: 14px 18px; background: linear-gradient(135deg, var(--nmt-nl), #d1fae5); border-bottom: 1.5px solid var(--nmt-nb); }
.nmt-sb-widget { padding: 16px; background: #fff; border: 1.5px solid var(--nmt-border); border-radius: var(--nmt-r2); }
.nmt-sb-widget-dark { padding: 18px; background: linear-gradient(135deg, #050f0a, #071a10); border-radius: var(--nmt-r2); }
.nmt-sb-widget-h { font-size: 13.5px; font-weight: 800; color: #111; margin-bottom: 6px; }
.nmt-sb-widget-p { font-size: 12.5px; color: var(--nmt-muted); line-height: 1.65; margin-bottom: 13px; }
.nmt-sb-app-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nmt-sb-app-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 10px; border-radius: 9px; background: #111;
  color: #fff; font-size: 11.5px; font-weight: 700; text-decoration: none;
}
.nmt-sb-sess-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--nmt-border); }
.nmt-sb-sess-n { font-size: 13px; color: var(--nmt-muted); }
.nmt-sb-sess-t { font-size: 13px; font-weight: 700; color: #111; }

/* ── MOBILE STICKY BAR ───────────────────────────────────── */
.nmt-sbar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: #fff; border-top: 2px solid var(--nmt-n); padding: 10px 16px; box-shadow: 0 -4px 20px rgba(0,0,0,.12); }
.nmt-sbar-in { display: flex; gap: 8px; align-items: center; }
.nmt-sbar-l { font-size: 13px; font-weight: 600; color: var(--nmt-muted); flex-shrink: 0; }
.nmt-sbar-l strong { color: #111; }
.nmt-sbar-btn { flex: 1; padding: 12px; border-radius: 9px; background: var(--nmt-n); color: #fff; font-size: 14px; font-weight: 800; border: none; cursor: pointer; font-family: inherit; text-align: center; text-decoration: none; display: block; }
.nmt-sbar-sec { padding: 10px 14px; border-radius: 9px; border: 1.5px solid var(--nmt-border); color: var(--nmt-muted); font-size: 13px; font-weight: 700; background: #fff; flex-shrink: 0; text-decoration: none; }
@media(max-width: 640px) { .nmt-sbar { display: block; } body { padding-bottom: 70px; } }

/* ── ANIMATIONS ──────────────────────────────────────────── */
@keyframes nmtFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.nmt-fu { opacity: 0; transform: translateY(14px); transition: opacity .44s ease, transform .44s ease; }
.nmt-fu.in { opacity: 1; transform: none; }