.citizen-payment-page{padding-top:24px;padding-bottom:48px;color:#10333b}
.citizen-payment-page .payment-icon-library{position:absolute;width:0;height:0;overflow:hidden}
.citizen-payment-page svg:not(.payment-icon-library){width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.citizen-payment-page .payment-hero{display:flex;align-items:center;gap:22px;min-height:175px;padding:25px 34px;border:1px solid #dcece4;border-radius:19px;background:linear-gradient(90deg,#f5fbf7 0%,#f5fbf7 40%,#f5fbf7ee 57%,#f5fbf745 79%,#f5fbf700 100%),url('../images/block-a.jpg') right 43%/cover no-repeat;box-shadow:0 15px 30px #1746320b;overflow:hidden}
.citizen-payment-page .payment-hero-emblem{width:86px;height:86px;border-radius:50%;background-color:#e2f3e9;background-size:125% auto;background-position:center 2px;box-shadow:0 0 0 9px #ffffffad}
.citizen-payment-page .payment-hero-copy{position:relative;max-width:690px}
.citizen-payment-page .payment-hero .eyebrow{margin:0 0 6px;color:#257959;font-size:11px;letter-spacing:.17em}
.citizen-payment-page .payment-hero h1{margin:0;font:700 clamp(28px,3vw,39px)/1.15 'Playfair Display',Georgia,serif;color:#0c313b}
.citizen-payment-page .payment-hero h1 span{color:#0b614b}
.citizen-payment-page .payment-hero-copy>p:not(.eyebrow){margin:7px 0 8px;color:#5e7480;font-size:16px}
.citizen-payment-page .payment-hero-copy>a{color:#0a6549;font-size:12px;font-weight:700;text-decoration:none}
.citizen-payment-page .payment-hero-copy>a:hover{text-decoration:underline}
.citizen-payment-page .payment-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:16px 0 18px}
.citizen-payment-page .payment-stat{display:flex;align-items:center;gap:14px;min-height:112px;padding:17px 18px;border:1px solid #dcece5;border-radius:16px;background:#fff;color:#10333b;text-decoration:none;box-shadow:0 10px 24px #1746320b;transition:transform .16s,box-shadow .16s}
.citizen-payment-page .payment-stat:hover{transform:translateY(-2px);box-shadow:0 16px 28px #17463216;text-decoration:none}
.citizen-payment-page .payment-stat.amber{border-color:#f3e1ba;background:linear-gradient(120deg,#fff,#fffaf0)}
.citizen-payment-page .payment-stat.blue{border-color:#d9eaf7;background:linear-gradient(120deg,#fff,#f7fbff)}
.citizen-payment-page .payment-stat-icon{display:grid;place-items:center;flex:none;width:58px;height:58px;border-radius:50%;background:#e1f3e9;color:#076a4d}
.citizen-payment-page .payment-stat.amber .payment-stat-icon{background:#fff0d2;color:#c17a0c}
.citizen-payment-page .payment-stat.blue .payment-stat-icon{background:#e1f1ff;color:#1871b8}
.citizen-payment-page .payment-stat-icon svg{width:29px!important;height:29px!important}
.citizen-payment-page .payment-stat>span:nth-child(2){min-width:0}
.citizen-payment-page .payment-stat small,.citizen-payment-page .payment-stat strong,.citizen-payment-page .payment-stat em{display:block}
.citizen-payment-page .payment-stat small{font-size:12px;font-weight:700}
.citizen-payment-page .payment-stat strong{margin:3px 0;font:700 clamp(23px,2.2vw,30px)/1.12 'Playfair Display',Georgia,serif;white-space:nowrap}
.citizen-payment-page .payment-stat em{font-size:11px;font-style:normal;color:#718591}
.citizen-payment-page .payment-stat-arrow{width:16px!important;height:16px!important;margin-left:auto;flex:none}
.citizen-payment-page .payment-main-grid{display:grid;grid-template-columns:minmax(0,2.08fr) minmax(290px,1fr);gap:14px;align-items:start}
.citizen-payment-page .payment-panel{padding:24px;background:#fff;border:1px solid #e0ece7;border-radius:18px;box-shadow:0 12px 28px #1746320b}
.citizen-payment-page .payment-panel-heading{display:flex;align-items:center;gap:13px;margin-bottom:17px}
.citizen-payment-page .payment-heading-icon{display:grid;place-items:center;flex:none;width:45px;height:45px;border-radius:50%;background:#e0f2e8;color:#08704f}
.citizen-payment-page .payment-panel-heading h2{margin:0;font:700 24px/1.1 'Playfair Display',Georgia,serif;color:#11343d}
.citizen-payment-page .payment-panel-heading p{margin:3px 0 0;color:#738894;font-size:12px}
.citizen-payment-page .payment-count-badge{margin-left:auto;padding:6px 10px;border-radius:30px;background:#fff3dc;color:#a56500;font-size:11px;font-weight:700;white-space:nowrap}
.citizen-payment-page .payment-bill{padding:18px 20px;border:1px solid #dfeee7;border-radius:15px;background:linear-gradient(130deg,#f7fcf9,#f0f8f3)}
.citizen-payment-page .payment-bill+.payment-bill{margin-top:15px}
.citizen-payment-page .payment-bill-top{display:flex;align-items:center;justify-content:space-between;gap:18px}
.citizen-payment-page .payment-kind{display:inline-block;padding:5px 11px;border-radius:20px;background:#ddf1e5;color:#0b674b;font-size:11px;font-weight:700}
.citizen-payment-page .payment-bill h3{margin:7px 0 3px;font:700 24px 'Playfair Display',Georgia,serif}
.citizen-payment-page .payment-bill-number{margin:0;color:#66808e;font-size:12px}
.citizen-payment-page .payment-bill-amount{min-width:170px;padding-left:18px;border-left:1px solid #d9e8df;text-align:right}
.citizen-payment-page .payment-bill-amount small,.citizen-payment-page .payment-bill-amount strong{display:block}
.citizen-payment-page .payment-bill-amount small{color:#6c8290;font-size:11px}
.citizen-payment-page .payment-bill-amount strong{margin:4px 0;font:700 27px 'Playfair Display',Georgia,serif;color:#075840}
.citizen-payment-page .payment-bill-meta{display:flex;align-items:center;gap:0;flex-wrap:wrap;margin-top:17px}
.citizen-payment-page .payment-bill-meta>span{display:flex;align-items:center;gap:9px;padding:0 18px;border-right:1px solid #dce9e1;color:#087052}
.citizen-payment-page .payment-bill-meta>span:first-child{padding-left:0}
.citizen-payment-page .payment-bill-meta>span:last-child{border:0}
.citizen-payment-page .payment-bill-meta>span>span{display:flex;flex-direction:column}
.citizen-payment-page .payment-bill-meta small{color:#778b93;font-size:11px}
.citizen-payment-page .payment-bill-meta b{color:#244251;font-size:12px}
.citizen-payment-page .payment-bill-meta em{padding:4px 8px;border-radius:20px;background:#e1f2e6;color:#14744f;font-size:10px;font-style:normal;font-weight:700;white-space:nowrap}
.citizen-payment-page .payment-bill-meta em.late{background:#ffe8e7;color:#be4141}
.citizen-payment-page .payment-action{width:100%;margin:10px 0 18px;padding:0;border:0;background:transparent;border-radius:10px}
.citizen-payment-page .payment-action:last-child{margin-bottom:0}
.citizen-payment-page .payment-action summary{display:flex;align-items:center;justify-content:center;gap:10px;min-height:47px;padding:10px 18px;border-radius:10px;background:linear-gradient(120deg,#0b7352,#075b45);color:#fff;font-size:14px;font-weight:700;list-style:none;cursor:pointer}
.citizen-payment-page .payment-action summary::-webkit-details-marker{display:none}
.citizen-payment-page .payment-action summary svg:last-child{width:17px;height:17px}
.citizen-payment-page .payment-action form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start;margin:0;padding:18px;border:1px solid #dceae2;border-top:0;border-radius:0 0 12px 12px;background:#f7fbf8}
.citizen-payment-page .payment-action label{font-size:12px;font-weight:700;color:#254352}
.citizen-payment-page .payment-action input,.citizen-payment-page .payment-action select{display:block;width:100%;height:43px;margin-top:6px;border:1px solid #cfdfd6;border-radius:9px;background:#fff;color:#193b48;padding:8px 10px}
.citizen-payment-page .payment-action button{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px}
.citizen-payment-page .payment-action button svg{width:17px;height:17px}
.citizen-payment-page .payment-pending-note{display:flex;align-items:flex-start;gap:12px;margin:10px 0 0;padding:12px 14px;border:1px solid #f0d9a6;border-radius:10px;background:#fff8e8;color:#916113}
.citizen-payment-page .payment-pending-note svg{flex:none}
.citizen-payment-page .payment-pending-note p{margin:0}
.citizen-payment-page .payment-pending-note strong,.citizen-payment-page .payment-pending-note small{display:block}
.citizen-payment-page .payment-pending-note strong{font-size:12px}
.citizen-payment-page .payment-pending-note small{margin-top:3px;color:#806b48;font-size:11px}
.citizen-payment-page .payment-guide .payment-panel-heading{align-items:flex-start}
.citizen-payment-page .payment-guide-item{display:flex;align-items:flex-start;gap:12px;padding:15px;margin-top:10px;border-radius:12px;background:#f2f9f5}
.citizen-payment-page .payment-guide-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:#dcefe3;color:#08704f}
.citizen-payment-page .payment-guide-item p{margin:0}
.citizen-payment-page .payment-guide-item b,.citizen-payment-page .payment-guide-item small{display:block}
.citizen-payment-page .payment-guide-item b{font-size:12px}
.citizen-payment-page .payment-guide-item small{margin-top:4px;color:#6c838c;font-size:11px;line-height:1.45}
.citizen-payment-page .payment-history{margin-top:14px}
.citizen-payment-page .payment-history .table-wrap{border:1px solid #e4ede7;border-radius:12px;overflow:auto}
.citizen-payment-page .payment-history table{width:100%;border-collapse:collapse;font-size:12px}
.citizen-payment-page .payment-history th{padding:11px 12px;background:#edf6f0;color:#1a5544;text-align:left;white-space:nowrap}
.citizen-payment-page .payment-history td{padding:12px;border-top:1px solid #e7efea;color:#38505c}
.citizen-payment-page .payment-history tr:nth-child(even) td{background:#fbfdfb}
.citizen-payment-page .payment-status{display:inline-block;padding:5px 10px;border-radius:20px;font-size:11px;font-weight:700}
.citizen-payment-page .payment-status.success{background:#dff3e6;color:#10734c}
.citizen-payment-page .payment-status.pending{background:#fff1d8;color:#ad710d}
.citizen-payment-page .payment-status.danger{background:#ffe8e8;color:#b44545}
.citizen-payment-page .payment-empty,.citizen-payment-page .payment-table-empty{text-align:center;color:#627c85}
.citizen-payment-page .payment-empty{padding:35px 12px;background:#f5faf6;border-radius:13px}
.citizen-payment-page .payment-empty svg,.citizen-payment-page .payment-table-empty svg{display:block;width:32px!important;height:32px!important;margin:0 auto 8px;color:#13805c}
.citizen-payment-page .payment-empty strong,.citizen-payment-page .payment-table-empty strong,.citizen-payment-page .payment-table-empty small{display:block}
.citizen-payment-page .payment-empty p,.citizen-payment-page .payment-table-empty small{margin:4px 0 0;font-size:12px}
.citizen-payment-page .payment-table-empty{padding:28px!important}
@media(max-width:1180px){.citizen-payment-page .payment-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.citizen-payment-page .payment-main-grid{grid-template-columns:1fr}}
@media(max-width:700px){.citizen-payment-page{padding-top:14px}.citizen-payment-page .payment-hero{min-height:0;padding:22px;background:linear-gradient(90deg,#f5fbf7ee,#f5fbf7e6),url('../images/block-a.jpg') right center/cover no-repeat}.citizen-payment-page .payment-hero-emblem{width:56px;height:56px}.citizen-payment-page .payment-hero h1{font-size:26px}.citizen-payment-page .payment-hero-copy>p:not(.eyebrow){font-size:13px}.citizen-payment-page .payment-stats{gap:9px}.citizen-payment-page .payment-stat{min-height:94px;padding:11px;gap:8px}.citizen-payment-page .payment-stat-icon{width:42px;height:42px}.citizen-payment-page .payment-stat-icon svg{width:22px!important;height:22px!important}.citizen-payment-page .payment-stat strong{font-size:19px}.citizen-payment-page .payment-stat em{display:none}.citizen-payment-page .payment-stat-arrow{display:none}.citizen-payment-page .payment-panel{padding:18px}.citizen-payment-page .payment-bill-top{align-items:flex-start}.citizen-payment-page .payment-bill-amount{min-width:120px}.citizen-payment-page .payment-bill-amount strong{font-size:21px}.citizen-payment-page .payment-bill-meta{gap:10px}.citizen-payment-page .payment-bill-meta>span{padding:0;border:0}.citizen-payment-page .payment-action form{grid-template-columns:1fr}}
@media(max-width:420px){.citizen-payment-page .payment-stats{grid-template-columns:1fr 1fr}.citizen-payment-page .payment-hero-emblem{display:none}.citizen-payment-page .payment-bill-top{display:block}.citizen-payment-page .payment-bill-amount{margin-top:12px;padding:10px 0 0;border-left:0;border-top:1px solid #d9e8df;text-align:left}.citizen-payment-page .payment-panel-heading h2{font-size:21px}.citizen-payment-page .payment-count-badge{display:none}}