/* UBarangay (2026-09-29) */
.ub-screen .page-head{margin-bottom:12px}
.ub-hero{border-radius:18px;padding:18px 18px 16px;color:#fff;background:radial-gradient(120% 140% at 100% 0%,#0f6b62 0,transparent 55%),linear-gradient(135deg,#0b1a1c,#0c2530 60%,#0d2146);margin-bottom:14px}
.ub-hero small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;color:#8fd3c7}
.ub-hero h2{margin:4px 0 4px;font-size:22px;font-weight:700}
.ub-hero p{margin:0;color:#c3d0d8;font-size:13px;line-height:1.45}
.ub-hero a{display:inline-block;margin-top:10px;color:#fff;font-size:12.5px;font-weight:600;text-decoration:underline}
.ub-hero.small h2{font-size:19px}
.ub-pick{display:grid;gap:10px}
.ub-pick button{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;padding:14px;border:1.5px solid #dfe2e7;border-radius:16px;background:#fff;font:inherit;cursor:pointer}
.ub-pick button>span{grid-row:1/3;width:40px;height:40px;border-radius:12px;background:#eef6f5;color:#0b6f65;display:grid;place-items:center}
.ub-pick button strong{font-size:15px}.ub-pick button small{color:#6b7078;font-size:12px}
.ub-pick button.on{border-color:#0b0b0c}
.ub-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -2px 14px;padding:2px}
.ub-tabs::-webkit-scrollbar{display:none}
.ub-tabs a{flex:0 0 auto;padding:9px 14px;border-radius:99px;border:1px solid #dfe2e7;background:#fff;color:#30353b;text-decoration:none;font-size:13.5px;font-weight:600}
.ub-tabs a.on{background:#0b0b0c;border-color:#0b0b0c;color:#fff}
.ub-h{font-size:15px;margin:16px 0 8px}
.ub-types{display:grid;gap:10px;margin-bottom:12px}
.ub-type{display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center;padding:14px;border:1px solid #e5e8eb;border-radius:16px;background:#fff;text-decoration:none;color:#0b0b0c;box-shadow:0 4px 14px #0000000a}
.ub-type .ub-ic{width:38px;height:38px;border-radius:12px;background:#0b0b0c;color:#fff;display:grid;place-items:center}
.ub-type .ub-ic svg{width:19px;height:19px}
.ub-type strong{display:block;font-size:14.5px}
.ub-type small{display:block;color:#6b7078;font-size:12px;line-height:1.35;margin-top:2px}
.ub-type small.ub-req{color:#0b6f65;font-weight:600}
.ub-type b{font-size:14px;white-space:nowrap}
.ub-apps{display:grid;border-top:1px solid #e5e8eb}
.ub-apps a{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 2px;border-bottom:1px solid #e5e8eb;text-decoration:none;color:#0b0b0c}
.ub-apps small{display:block;color:#6b7078;font-size:12px;margin-top:2px}
.ub-st{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px;background:#eef1f4;color:#4b5058;white-space:nowrap}
.ub-st.st-pending_payment,.ub-st.st-needs_info{background:#fff2dc;color:#9a5b00}.ub-st.st-for_review{background:#e6effd;color:#1f5fbf}.ub-st.st-approved{background:#e5f6ec;color:#0f8a4f}.ub-st.st-rejected{background:#fde8e7;color:#b42318}
.ub-hero .ub-st{font-size:12px}
.ub-posts{display:grid;gap:10px}
.ub-post{display:flex;gap:12px;padding:14px;border:1px solid #e5e8eb;border-radius:16px;background:#fff;text-decoration:none;color:#0b0b0c}
.ub-post small{display:block;color:#0b6f65;font-size:11.5px;font-weight:600}
.ub-post strong{display:block;font-size:15px;margin:3px 0}
.ub-post em{display:block;font-style:normal;color:#6b7078;font-size:13px;line-height:1.4}
.ub-post.announcement{border-left:4px solid #f59e0b}
.ub-date{flex:0 0 52px;height:56px;border-radius:12px;background:#eef1f4;color:#4b5058;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.ub-date b{font-size:20px;line-height:1}.ub-date.up{background:#0b0b0c;color:#fff}
.ub-article small{color:#0b6f65;font-weight:600;font-size:12px}
.ub-article h2{font-size:22px;margin:6px 0 12px}
.ub-body{font-size:15px;line-height:1.65;color:#23272c;margin-bottom:16px}
.ub-when{display:flex;gap:10px;align-items:center;padding:12px;border-radius:14px;background:#f3f6f8;margin-bottom:14px}
.ub-when small{display:block;color:#6b7078}
.ub-steps{display:flex;gap:4px;list-style:none;padding:0;margin:0 0 14px;counter-reset:s}
.ub-steps li{flex:1;text-align:center;font-size:11px;font-weight:600;color:#8a8f97;padding-top:8px;border-top:4px solid #e3e6ea;counter-increment:s}
.ub-steps li.on{color:#0b0b0c;border-color:#0b0b0c}.ub-steps li.done{color:#0f8a4f;border-color:#0f8a4f}
.ub-form label{display:block;font-size:13px;font-weight:600;margin:12px 0 6px;color:#30353b}
.ub-form label small{font-weight:400;color:#8a8f97}
.ub-form select.pay-note{background:#fff}
.ub-section{border:1px solid #e5e8eb;border-radius:16px;padding:6px 14px 16px;margin:0 0 14px}
.ub-section legend{font-weight:700;font-size:14px;padding:0 6px}
.ub-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.ub-sub{margin:16px 0 0;font-weight:700;font-size:13px;color:#0b6f65}
.ub-selfie{width:220px;height:220px;margin:6px auto 12px;border-radius:50%;overflow:hidden;background:#eef1f4;position:relative;border:4px solid #fff;box-shadow:0 0 0 2px #0b0b0c22}
.ub-selfie video,.ub-selfie img{width:100%;height:100%;object-fit:cover;display:block}
.ub-selfie video{transform:scaleX(-1)}
.ub-selfie-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#8a8f97;gap:4px}
.ub-selfie-empty svg{width:56px;height:56px}
.ub-selfie [hidden]{display:none!important}
.ub-selfie-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ub-selfie-actions [hidden]{display:none}
.ub-selfie-actions .btn{min-height:46px;height:46px;font-size:14px}
.ub-file{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;margin:0!important}
.ub-req-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid #eef1f4}
.ub-req-row:last-child{border-bottom:0}
.ub-req-row strong{display:block;font-size:13.5px}.ub-req-row small{display:block;font-size:11.5px;color:#8a8f97}
.ub-req-row .ub-file-name{color:#0f8a4f;font-weight:600;word-break:break-all}
.ub-req-row .btn.small{width:auto;min-height:38px;height:38px;padding:0 14px;font-size:13px;flex:0 0 auto}
.ub-req-row.done{background:linear-gradient(90deg,#e5f6ec55,transparent)}
.ub-certify{display:flex!important;gap:10px;align-items:flex-start;font-weight:500!important;font-size:12.5px!important;line-height:1.45;margin:4px 0 14px!important}
.ub-certify input{margin-top:2px;width:18px;height:18px;flex:0 0 18px;accent-color:#0b0b0c}
.ub-timeline{list-style:none;padding:0;margin:0 0 8px}
.ub-timeline li{position:relative;padding:0 0 14px 24px;color:#8a8f97;font-size:14px}
.ub-timeline li:before{content:"";position:absolute;left:4px;top:4px;width:12px;height:12px;border-radius:50%;background:#e3e6ea}
.ub-timeline li:after{content:"";position:absolute;left:9px;top:18px;bottom:0;width:2px;background:#eef1f4}
.ub-timeline li:last-child:after{display:none}
.ub-timeline li.done{color:#0b0b0c}.ub-timeline li.done:before{background:#0f8a4f}
.ub-timeline time{display:block;font-size:12px;color:#8a8f97}
.ub-details div b{text-align:right;max-width:62%;overflow-wrap:anywhere}
.ub-files{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 20px}
.ub-files a{display:inline-flex;gap:6px;align-items:center;padding:8px 12px;border-radius:99px;border:1px solid #dfe2e7;text-decoration:none;color:#30353b;font-size:12.5px;font-weight:600;text-transform:capitalize}
.ub-files svg{width:16px;height:16px}
.ub-cert-card{display:flex;gap:12px;align-items:center;padding:16px;border-radius:16px;background:#e5f6ec;margin-bottom:12px}
.ub-cert-card svg{width:34px;height:34px;color:#0f8a4f}
.ub-cert-card small{display:block;font-size:12px;color:#4b5058}.ub-cert-card strong{display:block;font-size:19px;letter-spacing:.03em}
.ub-cert-card.expired{background:#fff2dc}.ub-cert-card.revoked{background:#fde8e7}
.ub-verify{text-align:center;padding:22px 16px;border-radius:18px;background:#e5f6ec;margin-bottom:14px}
.ub-verify svg{width:48px;height:48px;color:#0f8a4f}
.ub-verify h2{margin:8px 0 4px;font-size:21px}.ub-verify p{margin:0;color:#4b5058;font-size:13.5px}
.ub-verify.expired,.ub-verify.revoked,.ub-verify.unknown,.ub-verify.not_issued{background:#fde8e7}
.ub-verify.expired svg,.ub-verify.revoked svg,.ub-verify.unknown svg,.ub-verify.not_issued svg{color:#b42318}
.p2m-source:has(input:checked){border-color:#0b0b0c;box-shadow:0 0 0 3px #0b0b0c14}