/* Viking Member — palet vikingsukajadi.com */
.vm-wrap {
	--vm-navy: #09194a;
	--vm-blue: #1240c4;
	--vm-yellow: #ffd200;
	--vm-ink: #363434;
	--vm-muted: #6b7185;
	--vm-line: #e3e7f1;
	--vm-soft: #f3f5fb;
	color: var(--vm-ink);
	font-size: 15px;
	line-height: 1.6;
	max-width: 1100px;
	margin: 0 auto;
}
.vm-wrap *, .vm-wrap *::before, .vm-wrap *::after { box-sizing: border-box; }
.vm-narrow { max-width: 620px; }
.vm-standalone { margin: 0; padding: 32px 16px; background: #eef1f8; font-family: Poppins, Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; }

.vm-head { margin-bottom: 20px; }
.vm-head h2, .vm-panel-head h1 { margin: 4px 0 0; color: var(--vm-navy); font-weight: 800; text-transform: uppercase; letter-spacing: .2px; line-height: 1.2; }
.vm-head h2 { font-size: clamp(24px, 4vw, 34px); }
.vm-panel-head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.vm-panel-head h1 { font-size: 22px; }
.vm-eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--vm-blue); }
.vm-panel h3 { margin: 22px 0 10px; color: var(--vm-navy); font-size: 17px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vm-panel h3:first-child { margin-top: 0; }

.vm-panel { background: #fff; border: 1px solid var(--vm-line); border-top: 4px solid var(--vm-blue); border-radius: 8px; padding: 22px; margin-bottom: 20px; }
.vm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px; align-items: start; }
.vm-grid > .vm-panel { margin-bottom: 0; }
.vm-muted { color: var(--vm-muted); font-size: 13px; }
.vm-wrap a { color: var(--vm-blue); }

/* Tombol */
.vm-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 16px 0 6px; }
.vm-wrap .vm-btn, .vm-wrap a.vm-btn {
	display: inline-block; border: 2px solid var(--vm-yellow); background: var(--vm-yellow); color: var(--vm-navy);
	font: inherit; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
	padding: 11px 22px; border-radius: 4px; cursor: pointer; text-decoration: none; line-height: 1.2;
}
.vm-wrap .vm-btn:hover { background: var(--vm-blue); border-color: var(--vm-blue); color: #fff; }
.vm-wrap .vm-btn-ghost, .vm-wrap a.vm-btn-ghost { background: transparent; border-color: var(--vm-blue); color: var(--vm-blue); }
.vm-wrap .vm-btn-sm { padding: 6px 12px; font-size: 12px; }
.vm-wrap .vm-btn-danger { background: #fff; border-color: #c62828; color: #c62828; }
.vm-wrap .vm-btn-danger:hover { background: #c62828; border-color: #c62828; color: #fff; }
.vm-check { display: flex; gap: 8px; align-items: flex-start; flex: 1 1 100%; font-size: 13px; }
.vm-check input { margin-top: 3px; }
.vm-wrap .vm-btn:focus-visible { outline: 3px solid var(--vm-blue); outline-offset: 2px; }

/* Form */
.vm-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--vm-navy); flex: 1 1 180px; }
.vm-field input, .vm-field select, .vm-field textarea, .vm-filter input, .vm-filter select {
	font: inherit; font-size: 14px; font-weight: 400; padding: 9px 11px; border: 1px solid #c9cfdf; border-radius: 4px; background: #fff; color: var(--vm-ink); width: 100%;
}
.vm-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.vm-filter select, .vm-filter input { width: auto; flex: 1 1 170px; height: 44px; margin: 0; }
.vm-nowrap { white-space: nowrap; }

/* Notifikasi & badge */
.vm-notice { background: #eaf0ff; border-left: 4px solid var(--vm-blue); padding: 12px 14px; border-radius: 4px; margin-bottom: 16px; color: var(--vm-navy); }
.vm-notice-warn { background: #fff7d6; border-color: #e0b400; }
.vm-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: #eef0f5; color: #4b5166; }
.vm-badge-pending { background: #fff4c2; color: #7a5b00; }
.vm-badge-invoiced { background: #ffe7d1; color: #8a4300; }
.vm-badge-paid { background: #dfe8ff; color: var(--vm-blue); }
.vm-badge-active { background: #d9f5e3; color: #11663a; }
.vm-badge-off { background: #fde2e2; color: #9b1c1c; }

/* Tabel */
.vm-table-wrap { overflow-x: auto; padding: 0; }
.vm-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; }
.vm-table th { background: var(--vm-navy); color: #fff; text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; padding: 11px 12px; }
.vm-table td { padding: 11px 12px; border-bottom: 1px solid var(--vm-line); vertical-align: top; }
.vm-table tr:hover td { background: var(--vm-soft); }

/* Langkah penerbitan */
.vm-steps { list-style: none; margin: 0; padding: 0; counter-reset: vm; }
.vm-steps li { position: relative; padding: 0 0 18px 46px; counter-increment: vm; }
.vm-steps li::before {
	content: counter(vm); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
	display: grid; place-items: center; font-weight: 800; font-size: 14px; background: #eef0f5; color: var(--vm-muted); border: 2px solid #d7dbe6;
}
.vm-steps li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: #d7dbe6; }
.vm-steps b { display: block; color: var(--vm-navy); }
.vm-steps span { display: block; font-size: 13px; color: var(--vm-muted); }
.vm-step-done::before { content: "✓" !important; background: var(--vm-blue) !important; border-color: var(--vm-blue) !important; color: #fff !important; }
.vm-step-now::before { background: var(--vm-yellow) !important; border-color: var(--vm-yellow) !important; color: var(--vm-navy) !important; }
.vm-step-skip { opacity: .55; }

/* KTA — rasio kartu ID-1 (85,6 × 54 mm); ukuran isi ikut lebar kartu (cqw). */
.vm-kta-box { container-type: inline-size; width: 100%; max-width: 460px; }
.vm-kta {
	aspect-ratio: 85.6 / 54; border-radius: 4.5cqw; overflow: hidden; position: relative; color: #fff;
	display: flex; flex-direction: column; font-size: 3.5cqw; line-height: 1.25;
	background: radial-gradient(120% 90% at 100% 0%, #1d4fe0 0%, var(--vm-blue) 30%, var(--vm-navy) 75%);
	box-shadow: 0 12px 30px rgba(9, 25, 74, .25);
	-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.vm-kta-top { display: flex; align-items: center; gap: 1em; padding: 1.2em 1.6em .6em; }
.vm-kta-top div { display: flex; flex-direction: column; }
.vm-kta-top b { color: var(--vm-yellow); text-transform: uppercase; letter-spacing: .12em; font-size: 1.05em; }
.vm-kta-top span { font-size: .78em; opacity: .9; }
.vm-kta-logo { height: 4.4em; width: auto; }
.vm-kta-body { flex: 1; display: flex; align-items: center; gap: 1.2em; padding: 0 1.6em; }
.vm-kta-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vm-kta-info small { font-size: .62em; text-transform: uppercase; letter-spacing: .12em; opacity: .75; margin-top: .55em; }
.vm-kta-info strong { font-size: 1.15em; font-weight: 800; text-transform: uppercase; overflow-wrap: anywhere; }
.vm-kta-info .vm-kta-nia { color: var(--vm-yellow); font-size: 1.3em; letter-spacing: .06em; }
.vm-qr { width: 7.6em; flex: none; background: #fff; padding: .35em; border-radius: .5em; }
.vm-qr img, .vm-qr canvas { display: block; width: 100% !important; height: auto !important; }
.vm-kta-foot { background: var(--vm-yellow); color: var(--vm-navy); font-weight: 800; text-transform: uppercase; letter-spacing: .15em; font-size: .62em; padding: .7em 2.4em; }

/* Cetak: tombol "Unduh KTA" menyalin kartu ke #vm-print, sisanya disembunyikan. */
@media print {
	body.vm-printing > *:not(#vm-print) { display: none !important; }
	#vm-print { margin: 0; max-width: none; }
	#vm-print .vm-kta-box { width: 85.6mm; max-width: none; }
	#vm-print .vm-kta { box-shadow: none; border-radius: 3.5mm; }
	@page { margin: 10mm; }
}