/* Halaman tukar kata laluan: bar kemajuan dan checklist (A4, 2026-11-11) */
.halaman-tukar .wrapper{height:auto;min-height:100%;padding:24px 0}
.halaman-tukar .kad{max-width:460px}
@media only screen and (min-width:801px){.halaman-tukar .kad{width:420px}}
.tajuk-tukar{background:#2c2c2a;color:#fff;text-align:center;font-weight:700;letter-spacing:.5px;padding:10px;border-radius:4px;margin:16px 0 0}
.notis{border-radius:6px;padding:12px 14px;margin:12px 0 0;font-size:13.5px;line-height:1.55}
.notis strong{display:block;margin-bottom:4px}
.notis-amaran{background:#faeeda;border:1px solid #ef9f27;color:#633806}
.notis-amaran strong{color:#412402}
.notis-ralat{background:#fcebeb;border:1px solid #e24b4a;color:#791f1f}
.notis-ok{background:#eaf3de;border:1px solid #639922;color:#27500a}
.notis ol{margin:6px 0 0 18px;padding:0}
.notis ol li{margin:0 0 2px}

.medan{position:relative}
.medan input{padding-right:64px}
.togol{position:absolute;right:6px;top:4px;height:30px;line-height:30px;padding:0 10px;border:0;border-radius:4px;background:#f1efe8;color:#444441;font-size:12px;font-weight:600;cursor:pointer;margin:0}
.togol:hover,.togol:focus{background:#d3d1c7;outline:none}

.panel-syarat{background:#fff;color:#2c2c2a;border-radius:6px;padding:12px 14px;margin:4px 0 16px}
.bar-label{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px}
.bar-label b{font-weight:700}
.bar{height:10px;background:#f1efe8;border-radius:5px;overflow:hidden}
.bar-isi{height:100%;width:0;background:#e24b4a;border-radius:5px;transition:width .25s ease,background-color .25s ease}
.bar-isi.sederhana{background:#ef9f27}
.bar-isi.lengkap{background:#639922}
.senarai-syarat{list-style:none;margin:10px 0 0;padding:0;font-size:13px}
.senarai-syarat li{display:flex;align-items:flex-start;gap:8px;margin:0 0 5px;color:#5f5e5a}
.senarai-syarat li::before{content:"";flex:0 0 16px;height:16px;margin-top:1px;border-radius:50%;border:2px solid #b4b2a9;box-sizing:border-box}
.senarai-syarat li.ok{color:#27500a}
.senarai-syarat li.ok::before{border-color:#639922;background:#639922 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.senarai-syarat li.gagal{color:#a32d2d;font-weight:600}
.senarai-syarat li.gagal::before{border-color:#e24b4a}
.mesej-hantar{display:none;color:#fff;background:#a32d2d;border-radius:4px;padding:8px 10px;font-size:13px;margin:0 0 10px;text-align:center}
.mesej-hantar.papar{display:block}
.notis-portal{background:#fff;border:1px solid #ed93b1;border-left:4px solid #993556;border-radius:0;padding:10px 12px;margin:12px 0 0;color:#72243e;font-size:13px;line-height:1.5}
.notis-portal strong{display:block;color:#4b1528;margin-bottom:4px;font-size:14px}
.notis-portal p{margin:0 0 6px}
.notis-portal p:last-child{margin:0}
.pautan-keluar{display:block;text-align:center;color:#fff;font-size:12.5px;margin-top:-8px}
/* Kad log masuk lebih tinggi dengan notis: elak terpotong di telefon */
.wrapper{height:auto;min-height:90%;padding:16px 0}
/* Latar penuh walaupun kad lebih tinggi dari skrin; angka lurus (Raleway) */
body{height:auto;min-height:100%;background-attachment:fixed}
.kad,.kad input,.panel-syarat,.notis,.notis-portal{font-variant-numeric:lining-nums}