/* BMT Melati - Cek Status Usulan. Material Design 3 (disesuaikan dengan token tema GeneratePress situs: --accent, --base-3, --contrast, ...). */

.bmtcu {
	/* token warna (terang) */
	--p: var(--accent, #1e73be);          /* primary */
	--on-p: #fff;
	--pc: #FFDCC9;                         /* primary container (tonal, oranye) */
	--on-pc: #3E1200;
	--s: var(--base-3, #fff);              /* surface */
	--on-s: var(--contrast, #1d1d22);
	--on-sv: #50505a;                      /* on-surface-variant (kontras 7:1 di atas putih) */
	--ol: #7a7f8a;                         /* outline (>= 3:1) */
	--olv: #d6d9e0;                        /* outline-variant */
	--err: #b3261e; --errc: #f9dedc; --on-errc: #410e0b;
	--ok: #17622d;  --okc: #dff4e5;  --on-okc: #0c3a1a;
	--warn-c: #fff0d0; --on-warn-c: #5a3b00;
	--elev: 0 1px 2px rgba(0,0,0,.18), 0 2px 8px 2px rgba(0,0,0,.08);
	max-width: 560px;
	margin: 0 auto 2rem;
	color: var(--on-s);
	font-size: 1rem;
	line-height: 1.5;
}
html[data-theme="dark"] .bmtcu {
	--p: var(--accent, #4da3ff);
	--on-p: #4A1300;
	--pc: #5C2400;
	--on-pc: #FFDCC9;
	--s: var(--base-3, #1a1a1f);
	--on-s: var(--contrast, #ececef);
	--on-sv: #c2c2cc;
	--ol: #8b8f9a;
	--olv: #3a3a44;
	--err: #f2b8b5; --errc: #5c1a16; --on-errc: #f9dedc;
	--ok: #8fd9a2;  --okc: #14361f;  --on-okc: #c9f0d4;
	--warn-c: #4a3510; --on-warn-c: #ffe2a8;
	--elev: 0 0 0 1px #3a3a44;
}
.bmtcu *, .bmtcu *::before, .bmtcu *::after { box-sizing: border-box; }
.bmtcu [hidden] { display: none !important; }

/* ---- kartu ---- */
.bmtcu-card {
	position: relative;
	overflow: hidden;
	background: var(--s);
	border-radius: 16px;
	box-shadow: var(--elev);
	padding: 24px;
}
.bmtcu-card + .bmtcu-card { margin-top: 16px; }
.bmtcu-title { display: flex; align-items: center; gap: 4px; margin: 0 0 20px; font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; }

/* ---- progres linear (indeterminate/determinate) ---- */
.bmtcu-progress { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--pc); overflow: hidden; opacity: 0; transition: opacity .2s; }
.bmtcu-progress.on { opacity: 1; }
.bmtcu-progress > i { display: block; height: 100%; width: 40%; background: var(--p); border-radius: 0 4px 4px 0; }
.bmtcu-progress.indet > i { animation: bmtcu-indet 1.3s ease-in-out infinite; }
.bmtcu-progress.det > i { transition: width .25s ease; }
@keyframes bmtcu-indet { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

/* ---- tombol ---- */
.bmtcu .bmtcu-btn {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 0 24px;
	border: 0; border-radius: 24px;
	font: inherit; font-weight: 600; font-size: .95rem; letter-spacing: .01em; line-height: 1;
	cursor: pointer; text-decoration: none;
	transition: box-shadow .15s ease;
	-webkit-tap-highlight-color: transparent;
	overflow: hidden;
}
.bmtcu-btn::after { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity .15s; pointer-events: none; }
.bmtcu-btn:hover::after { opacity: .08; }
.bmtcu-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--p) 55%, transparent); outline-offset: 2px; }
.bmtcu-btn:focus-visible::after, .bmtcu-btn:active::after { opacity: .12; }
.bmtcu-btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.bmtcu-btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.bmtcu .bmtcu-btn.filled { background: var(--p); color: var(--on-p); }
.bmtcu-btn.filled:not([disabled]):hover { box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.bmtcu .bmtcu-btn.tonal { background: var(--pc); color: var(--on-pc); }
.bmtcu .bmtcu-btn.text { background: transparent; color: var(--p); padding: 0 12px; }
.bmtcu .bmtcu-btn.block { width: 100%; }
.bmtcu-spin { width: 20px; height: 20px; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: bmtcu-rot .8s linear infinite; }
@keyframes bmtcu-rot { to { transform: rotate(360deg); } }

/* ---- bagian scan KTP ---- */
.bmtcu-scan { margin-bottom: 24px; padding: 12px 16px 16px; border-radius: 12px; background: color-mix(in srgb, var(--pc) 45%, transparent); }
.bmtcu-scan-head { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; font-size: .95rem; }
.bmtcu-scan-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bmtcu-scan-actions .bmtcu-btn { flex: 1 1 160px; }
.bmtcu-cam { display: none; }
.bmtcu-lbl-coarse { display: none; }
.bmtcu-lbl-fine { display: inline; }
@media (pointer: coarse), (hover: none) {   /* HP/tablet: kamera langsung + galeri */
	.bmtcu .bmtcu-btn.bmtcu-cam { display: inline-flex; }
	.bmtcu-lbl-coarse { display: inline; }
	.bmtcu-lbl-fine { display: none; }
}

/* ---- kolom teks outlined + label mengambang ---- */
.bmtcu-field { margin-bottom: 14px; }
.bmtcu-tf { position: relative; }
.bmtcu .bmtcu-tf input[type="text"] {
	display: block; width: 100%; height: 56px; padding: 18px 48px 0 16px;
	font: inherit; font-size: 1rem; color: var(--on-s);
	background: transparent; border: 1px solid var(--ol); border-radius: 8px;
	outline: none; transition: border-color .15s, box-shadow .15s;
	-webkit-appearance: none; appearance: none;
}
.bmtcu .bmtcu-tf input[type="text"]::placeholder { color: transparent; }
.bmtcu-tf label {
	position: absolute; left: 12px; top: 16px; max-width: calc(100% - 24px);
	padding: 0 4px; margin: 0;
	font-size: 1rem; line-height: 24px; color: var(--on-sv);
	background: transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	pointer-events: none; transform-origin: left top;
	transition: transform .15s ease, color .15s ease, background .15s ease;
}
.bmtcu .bmtcu-tf input[type="text"]:focus + label,
.bmtcu .bmtcu-tf input[type="text"]:not(:placeholder-shown) + label { transform: translateY(-26px) scale(.75); background: var(--s); max-width: calc((100% - 24px) / .75); }
.bmtcu .bmtcu-tf input[type="text"]:hover { border-color: var(--on-s); }
.bmtcu .bmtcu-tf input[type="text"]:focus { border-color: var(--p); box-shadow: 0 0 0 1px var(--p); }
.bmtcu .bmtcu-tf input[type="text"]:focus + label { color: var(--p); }
.bmtcu .bmtcu-tf.err input[type="text"],
.bmtcu .bmtcu-tf.err input[type="text"]:focus,
.bmtcu .bmtcu-tf.err input[type="text"]:hover { border-color: var(--err); box-shadow: 0 0 0 1px var(--err); }
.bmtcu .bmtcu-tf.err input[type="text"] + label,
.bmtcu .bmtcu-tf.err input[type="text"]:focus + label { color: var(--err); }
.bmtcu-help { display: flex; justify-content: space-between; gap: 12px; min-height: 16px; padding: 4px 16px 0; font-size: .75rem; line-height: 16px; color: var(--on-sv); }
.bmtcu-field.err .bmtcu-help { color: var(--err); }
.bmtcu-count { flex: none; font-variant-numeric: tabular-nums; }
.bmtcu-hp-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- verifikasi keamanan + aksi ---- */
.bmtcu-captcha { margin: 12px 0 4px; min-height: 65px; display: flex; justify-content: center; }
.bmtcu-actions { margin-top: 16px; }
.bmtcu-formmsg:empty, .bmtcu-scanmsg:empty { display: none; }
/* ---- pita pesan ---- */
.bmtcu-banner { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; padding: 12px 16px; border-radius: 12px; font-size: .9rem; line-height: 1.4; }
.bmtcu-banner svg { width: 22px; height: 22px; fill: currentColor; flex: none; margin-top: 1px; }
.bmtcu-banner.ok   { background: var(--okc);  color: var(--on-okc); }
.bmtcu-banner.warn { background: var(--warn-c); color: var(--on-warn-c); }
.bmtcu-banner.bad  { background: var(--errc); color: var(--on-errc); }
.bmtcu-banner.info { background: var(--pc);   color: var(--on-pc); }
.bmtcu-banner:focus { outline: none; }
.bmtcu-banner:focus-visible { outline: 3px solid color-mix(in srgb, var(--p) 55%, transparent); outline-offset: 2px; }

/* ---- hasil ---- */
.bmtcu-out { margin-top: 16px; }
.bmtcu-out:focus { outline: none; }
.bmtcu-who { margin: 0 0 12px; font-size: .9rem; color: var(--on-sv); }
.bmtcu-res h3 { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.5rem; }
.bmtcu-res .sub { margin: 2px 0 12px; font-size: .875rem; color: var(--on-sv); }
.bmtcu-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px 0 8px; border-radius: 8px; font-size: .875rem; font-weight: 600; background: var(--pc); color: var(--on-pc); }
.bmtcu-chip svg { width: 18px; height: 18px; fill: currentColor; }
.bmtcu-chip.ok  { background: var(--okc);  color: var(--on-okc); }
.bmtcu-chip.bad { background: var(--errc); color: var(--on-errc); }
.bmtcu-chip.off { background: var(--olv);  color: var(--on-s); }
.bmtcu-msg { margin: 12px 0 4px; }

/* stepper vertikal */
.bmtcu-stepper { list-style: none; margin: 16px 0 8px; padding: 0; }
.bmtcu-stepper li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 40px; padding-bottom: 0; font-size: .9rem; color: var(--on-sv); }
.bmtcu-stepper li + li::before { content: ""; position: absolute; left: 11px; top: -20px; width: 2px; height: 28px; background: var(--olv); }
.bmtcu-stepper li.selesai + li::before, .bmtcu-stepper li.selesai + li.berjalan::before { background: var(--ok); }
.bmtcu-dot { position: relative; z-index: 1; width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--olv); background: var(--s); }
.bmtcu-dot svg { width: 16px; height: 16px; fill: #fff; display: none; }
.bmtcu-stepper li.selesai .bmtcu-dot { background: var(--ok); border-color: var(--ok); }
.bmtcu-stepper li.selesai .bmtcu-dot svg { display: block; fill: var(--s); }
.bmtcu-stepper li.selesai { color: var(--on-s); }
.bmtcu-stepper li.berjalan { color: var(--on-s); font-weight: 600; }
.bmtcu-stepper li.berjalan .bmtcu-dot { border-color: var(--p); }
.bmtcu-stepper li.berjalan .bmtcu-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--p); animation: bmtcu-pulse 1.6s ease-in-out infinite; }
.bmtcu-stepper.nonaktif li { opacity: .55; }
@keyframes bmtcu-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.65); opacity: .6; } }

.bmtcu-kantor { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--olv); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.bmtcu-kantor-info { display: flex; gap: 12px; min-width: 0; flex: 1 1 220px; font-size: .9rem; }
.bmtcu-kantor-info svg { width: 22px; height: 22px; fill: var(--on-sv); flex: none; margin-top: 2px; }
.bmtcu-kantor-info strong { display: block; }
.bmtcu-kantor-info span { color: var(--on-sv); font-size: .85rem; }

.bmtcu-again { margin-top: 16px; display: flex; justify-content: center; }

.bmtcu-noscript { padding: 12px 16px; border-radius: 12px; background: var(--warn-c); color: var(--on-warn-c); }

@media (max-width: 480px) {
	.bmtcu-card { padding: 20px 16px; border-radius: 12px; }
	.bmtcu-btn.block-sm { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.bmtcu *, .bmtcu *::before, .bmtcu *::after { animation: none !important; transition: none !important; }
}

/* ---- tooltip Material (plain tooltip) ---- */
.bmtcu-tip { position: relative; display: inline-flex; flex: none; }
.bmtcu .bmtcu-tipbtn { display: inline-grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--on-sv); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bmtcu .bmtcu-tipbtn svg { width: 20px; height: 20px; fill: currentColor; }
.bmtcu .bmtcu-tipbtn:hover { background: color-mix(in srgb, var(--on-s) 8%, transparent); }
.bmtcu .bmtcu-tipbtn:focus-visible { outline: 3px solid color-mix(in srgb, var(--p) 55%, transparent); outline-offset: 0; }
.bmtcu-tipbox {
	position: absolute; top: calc(100% + 4px); z-index: 20; width: max-content; max-width: min(260px, 72vw);
	padding: 8px 12px; border-radius: 8px; background: #2f3033; color: #f1f0f4;
	font-size: .8125rem; font-weight: 400; line-height: 1.35; text-align: left; letter-spacing: 0;
	opacity: 0; visibility: hidden; transform: translateY(-2px); transition: opacity .12s, transform .12s, visibility .12s; pointer-events: none;
}
html[data-theme="dark"] .bmtcu-tipbox { background: #e3e2e6; color: #1b1b1f; }
.bmtcu-tip.start .bmtcu-tipbox { left: 0; }
.bmtcu-tip.end .bmtcu-tipbox { right: 0; }
.bmtcu-tip:hover .bmtcu-tipbox, .bmtcu-tipbtn:focus-visible + .bmtcu-tipbox, .bmtcu-tip.open .bmtcu-tipbox { opacity: 1; visibility: visible; transform: none; }
.bmtcu-tf .bmtcu-tip { position: absolute; right: 8px; top: 12px; }