/* ════════════════════════════════════════════════════════════════
   Lacak Pengajuan
   File: /assets/css/warga/warga-lacak.css
   Dipakai oleh: lacak.php
   ════════════════════════════════════════════════════════════════ */

.lacak-wrap{min-height:100vh;background:linear-gradient(135deg,#1d4ed8 0%,#2563eb 40%,#0ea5e9 100%);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:40px 16px 60px;}
.lacak-card{background:#fff;border-radius:20px;box-shadow:0 24px 80px rgba(0,0,0,.22);width:100%;max-width:520px;overflow:hidden;}
.lacak-header{background:linear-gradient(135deg,#1d4ed8,#2563eb);padding:28px 28px 22px;color:#fff;text-align:center;}
.lacak-header .logo-wrap{width:56px;height:56px;background:rgba(255,255,255,.15);border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;overflow:hidden;}
.lacak-header .logo-wrap img{width:100%;height:100%;object-fit:contain;border-radius:inherit;}
.lacak-header h1{font-size:1.25rem;font-weight:900;margin:0 0 4px;}
.lacak-header p{font-size:.85rem;color:rgba(255,255,255,.8);margin:0;}
.lacak-body{padding:28px;}
.search-box{display:flex;gap:10px;margin-bottom:8px;}
.search-box input{flex:1;border:2px solid #dbeafe;border-radius:10px;padding:12px 14px;font-size:.95rem;font-family:'Nunito',sans-serif;font-weight:700;outline:none;transition:border .2s;text-transform:uppercase;letter-spacing:.5px;}
.search-box input:focus{border-color:#2563eb;}
.search-box button{background:linear-gradient(135deg,#1d4ed8,#2563eb);color:#fff;border:none;border-radius:10px;padding:12px 18px;font-size:.9rem;font-weight:800;font-family:'Nunito',sans-serif;cursor:pointer;white-space:nowrap;transition:opacity .15s;}
.search-box button:hover{opacity:.88;}
.search-hint{font-size:.78rem;color:#94a3b8;margin-bottom:20px;}

/* Result card */
.result-card{border-radius:14px;border:2px solid #e2e8f0;overflow:hidden;margin-top:4px;}
.result-status{padding:20px;display:flex;align-items:center;gap:14px;}
.status-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.6rem;}
.status-label{font-size:1rem;font-weight:900;}
.status-kode{font-size:.78rem;color:#94a3b8;font-family:monospace;margin-top:2px;}
.result-divider{height:1px;background:#f1f5f9;}
.result-rows{padding:16px 20px;display:flex;flex-direction:column;gap:12px;}
.result-row{display:flex;gap:10px;font-size:.88rem;}
.result-row-label{width:130px;flex-shrink:0;color:#64748b;font-weight:700;}
.result-row-value{color:#1e293b;font-weight:600;word-break:break-word;}
.result-row-value.mono{font-family:monospace;background:#f1f5f9;padding:1px 8px;border-radius:6px;font-size:.84rem;color:#1d4ed8;}
.catatan-box{background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:10px 14px;font-size:.85rem;color:#92400e;margin-top:4px;line-height:1.5;}

/* Step progress */
.progress-wrap{padding:16px 20px 20px;border-top:1px solid #f1f5f9;}
.progress-label{font-size:.75rem;font-weight:800;color:#94a3b8;letter-spacing:.5px;text-transform:uppercase;margin-bottom:12px;}
.progress-steps{display:flex;align-items:flex-start;gap:0;}
.step{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;}
.step:not(:last-child)::after{content:'';position:absolute;top:14px;left:50%;width:100%;height:2px;z-index:0;}
.step-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;z-index:1;position:relative;border:2px solid #e2e8f0;background:#fff;}
.step-dot.done{background:#22c55e;border-color:#22c55e;color:#fff;}
.step-dot.active{background:#2563eb;border-color:#2563eb;color:#fff;}
.step-dot.rejected{background:#ef4444;border-color:#ef4444;color:#fff;}
.step-dot.inactive{background:#f1f5f9;color:#cbd5e1;}
.step-line-done::after{background:#22c55e;}
.step-line-active::after{background:linear-gradient(to right,#22c55e,#e2e8f0);}
.step-line-inactive::after{background:#e2e8f0;}
.step-txt{font-size:.7rem;font-weight:700;color:#94a3b8;margin-top:6px;text-align:center;line-height:1.3;}
.step-txt.done{color:#22c55e;}
.step-txt.active{color:#2563eb;}
.step-txt.rejected{color:#ef4444;}

/* Error & empty */
.lacak-alert{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-radius:10px;font-size:.88rem;font-weight:700;margin-bottom:16px;}
.lacak-alert-err{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;}
.lacak-footer{padding:16px 20px;border-top:1px solid #f1f5f9;display:flex;gap:10px;flex-wrap:wrap;}
.lacak-btn-sm{flex:1;min-width:120px;padding:10px 14px;border-radius:9px;font-size:.84rem;font-weight:800;font-family:'Nunito',sans-serif;cursor:pointer;border:none;display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;transition:opacity .15s;}
.lacak-btn-primary{background:linear-gradient(135deg,#1d4ed8,#2563eb);color:#fff;}
.lacak-btn-outline{background:#fff;color:#2563eb;border:2px solid #dbeafe !important;}
.lacak-btn-sm:hover{opacity:.85;}
.back-link{display:block;text-align:center;margin-top:18px;color:rgba(255,255,255,.8);font-size:.85rem;font-weight:700;text-decoration:none;}
.back-link:hover{color:#fff;}
@media(max-width:480px){
  .lacak-body{padding:20px 16px;}
  .search-box{flex-direction:column;}
  .result-row{flex-direction:column;gap:2px;}
  .result-row-label{width:auto;}
}