/* Layanan in three steps (page-layanan.php + alur.js). Cards → content box; Kembali/Lanjutkan fixed above the bottom bar. */
.alur { --aksi: 74px; }
.alur [hidden] { display: none !important; } /* the layout rules below must never show a hidden box */
.alur .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alur-isi { padding-top: 18px; padding-bottom: 28px; display: flex; flex-direction: column; gap: 18px; }
.alur.js .alur-isi { padding-bottom: calc(var(--aksi) + 20px); }

.alur-prog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.alur-prog i { display: block; height: 4px; border-radius: 4px; background: var(--line); transition: background .3s; }
.alur-prog span { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.alur-prog .on i { background: var(--green); }
.alur-prog .now span { color: var(--ink); font-weight: 600; }
.alur:not(.js) .alur-prog { display: none; }

.alur-step { display: flex; flex-direction: column; gap: 16px; }
.alur.js .alur-step:not(.on) { display: none; }
.alur.js .alur-step.on { animation: alur-masuk .3s ease both; }
.alur:not(.js) [data-step="4"], .alur:not(.js) [data-step="5"], .alur.js .alur-nojs { display: none; }
@keyframes alur-masuk { from { opacity: 0; transform: translateY(10px); } }
.alur-step:focus { outline: none; }
.alur-judul { display: flex; flex-direction: column; gap: 6px; }
.alur-judul h1 { font-size: 27px; line-height: 1.15; }
.alur-judul p { color: var(--muted); font-size: 14.5px; }
.alur-judul p b { color: var(--ink); }

/* Cards: radio inputs inside labels, so the choice is a real form value and works by keyboard. */
.alur-kartu { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.alur-k { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 132px; padding: 14px; border: 1.5px solid var(--line); border-radius: 18px; background: #fff; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.alur-k.pendek { min-height: 112px; }
.alur-k:hover { border-color: #B9B9B6; }
.alur-k input { position: absolute; opacity: 0; pointer-events: none; }
.alur-k:has(input:checked) { border-color: var(--green); background: #EEF6F1; box-shadow: 0 0 0 3px rgba(47, 125, 87, .14); }
.alur-k:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.alur-k .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--soft); display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.alur-k:has(input:checked) .ico { background: var(--green); color: #fff; }
.alur-k .cek { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #CFCFCC; display: flex; align-items: center; justify-content: center; color: transparent; }
.alur-k:has(input:checked) .cek { background: var(--green); border-color: var(--green); color: #fff; }
.alur-k .no { font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--muted); }
.alur-k b { font-size: 16px; line-height: 1.2; }
.alur-k small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }

.alur-box { border-radius: 20px; background: var(--soft); padding: 18px; display: flex; flex-direction: column; gap: 14px; animation: alur-masuk .3s ease both; }
.alur-box[hidden] { display: none; }
.alur-box.kosong { align-items: center; text-align: center; padding: 26px 18px; color: var(--muted); font-size: 14px; animation: none; }
.alur:not(.js) .alur-box.kosong { display: none; }
.alur-box .kiri, .alur-box .kanan, .alur-box .teks { display: flex; flex-direction: column; gap: 8px; }
.alur-box h2 { font-size: 20px; }
.alur-box p { font-size: 14.5px; color: var(--ink-2); }
.alur-box .catat { font-size: 13.5px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.alur .kick { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.alur .tag { align-self: flex-start; font-size: 12px; font-weight: 500; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.alur .sub { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.alur-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.alur-list li { display: flex; gap: 9px; font-size: 14px; line-height: 1.4; }
.alur-list .c { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; }
.alur-list .c svg { width: 11px; height: 11px; }
.alur-box .foto { border-radius: 14px; overflow: hidden; background: #E9E9E7; aspect-ratio: 4 / 3; }
.alur-box .foto img { width: 100%; height: 100%; object-fit: cover; }
.alur-box .foto.kosong-foto { display: flex; align-items: center; justify-content: center; }
.alur-box .foto.kosong-foto .ico { transform: scale(2.2); color: #A1A1A1; }

.alur-klien { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.alur-klien summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--green); text-align: center; list-style: none; padding: 6px 0; }
.alur-klien summary::-webkit-details-marker { display: none; }
.alur-klien[open] summary { text-align: left; color: var(--ink); }
.alur-klien[open] > * + * { margin-top: 10px; }

.alur .fld { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.alur .fld input { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-weight: 400; font-size: 16px; min-height: 50px; border: 1.5px solid var(--line); border-radius: 14px; padding: 0 14px; color: var(--ink); background: #fff; }
.alur .fld input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(47, 125, 87, .15); }
.alur .fld.salah input { border-color: #B4562B; }
.alur .fld .opsi { font-weight: 400; color: var(--muted); }
.alur .err { color: #A0461F; font-size: 12.5px; font-weight: 500; }
.alur .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.alur-data, .alur-data .isian, .alur-f { display: flex; flex-direction: column; gap: 14px; }
.alur-data .ringkas { order: -1; display: flex; flex-direction: column; gap: 8px; }
.alur-data .ringkas .sub { display: none; }
.alur-gagal { display: flex; gap: 10px; background: #FBEFE9; border: 1px solid #E9C3B0; color: #7E3418; border-radius: 14px; padding: 12px 14px; font-size: 14px; }
.alur-gagal[hidden] { display: none; }
.alur-gagal svg { flex: none; margin-top: 1px; }

.alur .ring { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.alur .ring .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid #EFEFED; font-size: 14px; }
.alur .ring .row:first-child { border-top: 0; }
.alur .ring .row > span:first-child { display: flex; flex-direction: column; }
.alur .ring .k { color: var(--muted); font-size: 12.5px; }
.alur .ring .row > b { text-align: right; }
.alur .ubah { appearance: none; background: none; border: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--green); cursor: pointer; padding: 6px 0 6px 10px; min-height: 36px; }

.alur-ok { width: 64px; height: 64px; border-radius: 50%; background: #EEF6F1; color: var(--green); display: flex; align-items: center; justify-content: center; margin-top: 8px; }
[data-pantau-blok] { display: flex; flex-direction: column; gap: 6px; }
[data-pantau-blok][hidden] { display: none; }
.alur-wa { font-size: 13.5px; text-align: center; color: var(--muted); }
.alur-tautan { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; text-align: center; }
.alur-tautan a { color: var(--green); }

/* Fixed action bar: same place on every step, just above the bottom bar. */
.alur-aksi { display: none; }
.alur.js .alur-aksi { display: block; position: fixed; z-index: 25; left: 0; right: 0; bottom: calc(var(--nav) + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); padding: 12px 16px; }
.alur.js .alur-aksi[hidden] { display: none; }
.alur-aksi .in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; }
.alur-aksi .btn { width: 100%; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.alur-aksi .btn[hidden], .alur-aksi [hidden] { display: none; }
.alur-aksi .btn:disabled { background: #E8E8E6; border-color: #E8E8E6; color: #5A5656; cursor: not-allowed; }
.alur-aksi .btn.ghost:disabled { background: #fff; color: #A1A1A1; border-color: var(--line); }
.alur-aksi .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: alur-putar .8s linear infinite; }
@keyframes alur-putar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .alur.js .alur-step.on, .alur-box { animation: none; } }

@media (min-width: 960px) {
	.alur-isi { padding-top: 32px; gap: 22px; }
	.alur-prog { width: 420px; }
	.alur-judul h1 { font-size: 40px; line-height: 1.1; }
	.alur-kartu { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
	.alur-k { min-height: 150px; padding: 18px; }
	.alur-k.pendek { min-height: 130px; }
	.alur-k b { font-size: 18px; }
	.alur-k small { font-size: 13.5px; }
	.alur-box { padding: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
	.alur-box.bld { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
	.alur-box.bld .foto { aspect-ratio: 16 / 10; }
	.alur-box.kosong { display: flex; padding: 40px; font-size: 15px; }
	.alur-box h2 { font-size: 26px; }
	.alur-data { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: start; }
	.alur-data .ringkas { order: 0; }
	.alur-data .ringkas .sub { display: block; }
	.alur-f { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	[data-step="4"] { max-width: 560px; margin: 0 auto; width: 100%; }
	.alur-klien { max-width: 560px; align-self: center; width: 100%; }
	.alur.js .alur-aksi { padding-left: max(16px, calc(50% - 280px)); padding-right: max(16px, calc(50% - 280px)); }
}

/* 0.2.14 · Ringkasan & perkiraan (step 4): the service estimate card */
.alur-pb { display: flex; flex-direction: column; gap: 6px; background: var(--ink, #1E1C1C); color: #fff; border-radius: 16px; padding: 16px; }
.alur-pb[hidden] { display: none; }
.alur-pb .kick { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #CFE5D7; }
.alur-pb b { font-size: 28px; font-weight: 600; line-height: 1.15; }
.alur-pb small { font-size: 12.5px; color: #D6D2CA; }
.alur-pb-p { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.alur-pb-p span { font-size: 12px; padding: 4px 9px; border-radius: 999px; background: #3A3636; }
.alur-pb-t { margin: -6px 0 0; line-height: 1.5; }

/* 0.2.15 · Data: Cerita singkat dan Foto atau dokumen (opsional) */
.alur .fld textarea { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-weight: 400; font-size: 16px; line-height: 1.5; min-height: 112px; border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; color: var(--ink); background: #fff; resize: vertical; }
.alur .fld textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(47, 125, 87, .15); }
.alur-up .ph { font-weight: 400; font-size: 12.5px; line-height: 1.5; }
.alur-up-b { align-self: flex-start; position: relative; background: #fff; color: var(--ink); border: 1.5px solid var(--line); cursor: pointer; }
.alur-up-b:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(47, 125, 87, .15); }
.alur.js .alur-up-b input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.alur:not(.js) .alur-up-b { flex-direction: column; align-items: flex-start; height: auto; padding: 12px 14px; }
.alur:not(.js) .alur-up-b input { min-height: 0; border: 0; padding: 0; font-size: 14px; }
.alur-up-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.alur-up-l[hidden] { display: none; }
.alur-up-l li { display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-weight: 400; font-size: 14px; }
.alur-up-l li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alur-up-l li small { flex: none; color: var(--muted); font-size: 12.5px; }
.alur-up-l li button { flex: none; appearance: none; background: none; border: 0; font: inherit; font-size: 13px; font-weight: 600; color: #A0461F; cursor: pointer; min-height: 36px; padding: 0 8px; }
.alur .ring [data-isi="cerita"] { font-weight: 500; overflow-wrap: anywhere; }