/* Perepat Borang — front-end (works with the Perepat theme's Bootstrap 5; falls back gracefully) */
.pb-ui { --pb-c: var(--mp-green, #527c3a); --pb-soft: rgba(82, 124, 58, .1); }
.pb-ui .pb-ic { flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; border-radius: .75rem; display: inline-flex; align-items: center; justify-content: center; background: var(--pb-soft); color: var(--pb-c); }
.pb-ui .pb-heading { margin-top: 1.75rem; padding-bottom: .5rem; border-bottom: 2px solid var(--pb-soft); }
.pb-ui .pb-heading:first-child { margin-top: 0; }
.pb-ui .pb-note { background: var(--pb-soft); border-radius: .75rem; padding: .75rem 1rem; }
.pb-ui .pb-note p:last-child { margin-bottom: 0; }
.pb-ui .pb-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .35rem 1.25rem; }
.pb-ui .pb-consent { background: #fffbea; border: 1px solid #f5e3a1; border-radius: .75rem; padding: .85rem 1rem .85rem 2.6rem; }
.pb-ui .pb-consent .form-check-input { margin-top: .3rem; }
.pb-ui .form-check-input:checked { background-color: var(--pb-c); border-color: var(--pb-c); }
.pb-ui .form-control:focus, .pb-ui .form-select:focus, .pb-ui .form-check-input:focus { border-color: var(--pb-c); box-shadow: 0 0 0 .2rem var(--pb-soft); }
.pb-ui fieldset.pb-invalid legend { color: #b02a37; }
.pb-ui fieldset.pb-invalid .pb-choices { outline: 2px solid #f1aeb5; outline-offset: 4px; border-radius: .5rem; }
.pb-ui .pb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pb-ui .pb-success-ic { font-size: 3rem; color: var(--pb-c); line-height: 1; }
.pb-ui .pb-ref { font-size: 1.75rem; font-weight: 700; letter-spacing: .06em; color: var(--pb-c); margin-bottom: 1rem; }
.pb-ui .pb-intro ul { padding-left: 1.2rem; }
.pb-ui .pb-intro li { margin-bottom: .3rem; }
@media (max-width: 575.98px) { .pb-ui .pb-form .card-body { padding: 1.25rem !important; } }

/* ---- front-page hero slide (Perepat theme carousel) ---- */
.pb-slide .pb-slide-title { color: #fff; font-weight: 700; font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.15; }
.pb-slide .pb-slide-urgent { background: rgba(201, 162, 39, .28) !important; border-color: rgba(255, 214, 102, .6) !important; }
.pb-slide-facts li { display: flex; gap: .7rem; align-items: baseline; color: #eef5e6; margin-bottom: .45rem; font-size: 1.05rem; }
.pb-slide-facts li i { width: 1.2rem; text-align: center; color: var(--mp-leaf, #8dc642); }
.pb-slide-card { max-width: 320px; background: #fff; color: var(--mp-ink, #1c1a1b); border-radius: 26px; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); border: 6px solid rgba(255, 255, 255, .18); background-clip: padding-box; }
.pb-cal { text-align: center; padding-bottom: 1rem; }
.pb-cal-m { background: var(--mp-green-dark, #2f4d20); color: #fff; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: .7rem 1rem; font-size: .95rem; }
.pb-cal-d { font-size: 6.5rem; line-height: 1; font-weight: 800; color: var(--mp-green, #527c3a); margin-top: 1rem; }
.pb-cal-w { font-size: 1.25rem; font-weight: 600; color: var(--mp-muted, #5f6b5a); }
.pb-slide-quota { padding: 0 1.4rem 1rem; }
.pb-slide-quota .progress { height: 8px; background: #edf2e8; }
.pb-slide-quota .progress-bar { background: var(--mp-leaf, #8dc642); }
.pb-slide-cta { display: block; background: #f4f8f0; border-top: 1px solid #e6eedf; padding: .75rem 1.2rem; font-size: .85rem; font-weight: 600; color: var(--mp-green, #527c3a); text-decoration: none; text-align: center; }
.pb-slide-cta:hover { background: #eaf2e2; color: var(--mp-green-dark, #2f4d20); }
@media (max-width: 991.98px) { .pb-slide-card { max-width: 260px; } .pb-cal-d { font-size: 5rem; } }

/* conditional fields (1.2.0) */
.pb-ui .pb-cond { display: contents; }
.pb-ui .pb-cond[hidden] { display: none; }
.pb-ui .row > .pb-cond > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5); padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5); margin-top: var(--bs-gutter-y, 0); }
@media (min-width: 768px) { .pb-ui .row > .pb-cond > .col-md-6 { width: 50%; } }