:root {
    --public-primary: #0f766e;
    --public-primary-dark: #0a5a54;
    --public-primary-soft: #e8f5f2;
    --public-ink: #102a2a;
    --public-muted: #657b79;
    --public-surface: #ffffff;
    --public-background: #f7faf9;
    --public-line: #dce9e6;
    --public-warm: #f4b942;
    --public-radius: 24px;
    --public-shadow: 0 18px 55px rgba(24, 67, 63, .10);
}






*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
    margin: 0;
    background: var(--public-background);
    color: var(--public-ink);
    font-family: 'Tajawal', sans-serif;
    font-size: 16px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { max-width: 100%; }

.public-container {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}

.public-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid rgba(220, 233, 230, .85);
    box-shadow: 0 8px 30px rgba(22, 63, 59, .05);
    backdrop-filter: blur(16px);
}
.public-container.header-inner { width: min(1360px, calc(100% - 48px)); }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.public-brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.public-brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--public-primary);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--public-primary) 28%, transparent);
    font-size: 20px;
    font-weight: 900;
}
.public-brand strong { display: block; font-size: 15px; font-weight: 900; line-height: 1.25; }
.public-brand small { display: block; color: var(--public-muted); font-size: 11px; margin-top: 2px; }
.header-sponsor { min-width: 92px; padding: 6px 14px; border-inline-start: 1px solid var(--public-line); display: grid; flex-shrink: 0; line-height: 1.2; }
.header-sponsor small { color: var(--public-muted); font-size: 9px; }
.header-sponsor strong { color: var(--public-primary); font-size: 13px; letter-spacing: .03em; }
.public-navigation { display: flex; align-items: center; justify-content: flex-end; flex: 1; gap: 7px; font-size: 13px; font-weight: 800; }
.public-navigation > a { min-height: 44px; padding: 8px 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 6px; border-radius: 12px; line-height: 1.35; white-space: nowrap; transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.public-navigation > a:hover { color: var(--public-primary); background: var(--public-primary-soft); }
.nav-payment-link, .nav-report-link, .nav-admin-link { padding: 10px 15px; border-radius: 12px; }
.nav-report-link { color: #9a6508 !important; border: 1px solid #f4dfac; background: #fff7df; display: inline-flex; align-items: center; gap: 8px; }
.nav-report-link:hover { color: #7b4e00 !important; background: #ffefbd; }
.nav-payment-link { color: #fff !important; background: var(--public-primary); display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 8px 20px color-mix(in srgb, var(--public-primary) 18%, transparent); }
.nav-payment-link:hover { color: #fff !important; background: var(--public-primary-dark) !important; transform: translateY(-1px); }
.nav-whish-link { min-height: 48px !important; padding: 6px 12px !important; gap: 9px; border: 1px solid var(--public-line); background: linear-gradient(135deg, #fff 0%, var(--public-primary-soft) 100%); box-shadow: 0 7px 18px rgba(24, 67, 63, .08); }
.nav-whish-link::before { content: ''; width: 4px; height: 26px; border-radius: 999px; background: linear-gradient(180deg, var(--public-warm), var(--public-primary)); }
.nav-whish-link img { width: 78px; height: auto; }
.nav-whish-link span { color: var(--public-muted); font-size: 10px; font-weight: 800; }
.nav-whish-link:hover, .nav-whish-link.is-active { border-color: color-mix(in srgb, var(--public-primary) 42%, #fff); background: #fff !important; box-shadow: 0 10px 24px color-mix(in srgb, var(--public-primary) 14%, transparent); transform: translateY(-1px); }
.nav-admin-link { border: 1px solid var(--public-line); background: #fff; }
.nav-admin-link:hover { border-color: #b7d2cd; background: #f8fbfa !important; }
.mobile-nav-toggle { display: none; border: 1px solid var(--public-line); background: #fff; width: 44px; height: 44px; border-radius: 12px; color: var(--public-ink); cursor: pointer; }

.hero {
    position: relative;
    overflow: hidden;
    padding: 94px 0 74px;
    background:
        radial-gradient(circle at 12% 18%, rgba(244, 185, 66, .17), transparent 24%),
        radial-gradient(circle at 85% 30%, color-mix(in srgb, var(--public-primary) 15%, transparent), transparent 30%),
        linear-gradient(180deg, #fbfdfc 0%, #f1f8f6 100%);
}
.hero::before, .hero::after { content: ''; position: absolute; border: 1px solid rgba(15, 118, 110, .1); border-radius: 50%; pointer-events: none; }
.hero::before { width: 460px; height: 460px; inset: -230px auto auto -100px; }
.hero::after { width: 300px; height: 300px; inset: auto -130px -160px auto; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px; z-index: 1; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--public-line); color: var(--public-primary); font-size: 13px; font-weight: 800; box-shadow: 0 6px 22px rgba(30, 80, 74, .06); }
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: #24a47b; box-shadow: 0 0 0 5px rgba(36, 164, 123, .12); }
.hero-sponsor { width: fit-content; margin-top: 14px; padding: 9px 14px; display: flex; align-items: center; gap: 8px; border: 1px solid #dfcc91; border-radius: 12px; color: #715813; background: linear-gradient(135deg, #fffbea, #fff); box-shadow: 0 8px 24px rgba(138,103,17,.08); }
.hero-sponsor span { font-size: 10px; font-weight: 700; }
.hero-sponsor strong { color: #173f3b; font-size: 15px; letter-spacing: .04em; }
.hero-sponsor small { font-size: 10px; }
.hero-copy h1 { max-width: 660px; margin: 22px 0 20px; font-size: clamp(42px, 5.1vw, 69px); line-height: 1.14; letter-spacing: -.035em; font-weight: 900; }
.hero-copy h1 span { color: var(--public-primary); position: relative; white-space: nowrap; }
.hero-copy p { max-width: 610px; margin: 0; color: var(--public-muted); font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.whish-hero-button { color:var(--public-primary); border-color:var(--public-line); background:#fff; box-shadow:0 12px 30px rgba(24,67,63,.10); }
.whish-hero-button img { width:98px; height:auto; }
.public-button { min-height: 52px; padding: 0 21px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.public-button:hover { transform: translateY(-2px); }
.public-button.primary { color: #fff; background: var(--public-primary); box-shadow: 0 12px 30px color-mix(in srgb, var(--public-primary) 23%, transparent); }
.public-button.primary:hover { background: var(--public-primary-dark); }
.public-button.secondary { background: #fff; border-color: var(--public-line); }
.public-button.secondary:hover { box-shadow: 0 10px 28px rgba(24, 67, 63, .09); }
.hero-trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 30px; color: #54716d; font-size: 13px; font-weight: 700; }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust i { color: var(--public-primary); }

.portal-preview { position: relative; }
.preview-card { position: relative; background: rgba(255, 255, 255, .92); border: 1px solid rgba(206, 225, 221, .95); border-radius: 30px; box-shadow: 0 30px 80px rgba(24, 67, 63, .16); padding: 18px; transform: rotate(-1deg); }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 16px; }
.preview-toolbar strong { font-size: 14px; }
.preview-live { display: inline-flex; align-items: center; gap: 6px; color: #14885e; background: #eaf8f2; padding: 5px 9px; border-radius: 20px; font-size: 11px; font-weight: 800; }
.preview-live::before { content: ''; width: 6px; height: 6px; background: #22a66f; border-radius: 50%; }
.preview-map { min-height: 315px; position: relative; overflow: hidden; border-radius: 20px; background: #e7efec; }
.preview-map::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(42, 93, 86, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(42, 93, 86, .08) 1px, transparent 1px); background-size: 35px 35px; transform: rotate(-8deg) scale(1.2); }
.preview-map .leaflet-pane { z-index: 2; }
.preview-map .leaflet-control-container { display: none; }
.preview-map-loading { position: absolute; inset: 0; z-index: 500; display: grid; place-content: center; justify-items: center; gap: 9px; color: var(--public-primary); background: rgba(231,239,236,.9); font-size: 12px; font-weight: 800; }
.preview-map-loading i { font-size: 24px; }
.zone-shape { position: absolute; width: 112px; height: 96px; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); opacity: .9; border: 2px solid rgba(255, 255, 255, .8); display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 900; text-shadow: 0 1px 4px rgba(0,0,0,.25); }
.zone-shape.one { top: 38px; right: 40px; background: #16a34a; }
.zone-shape.two { top: 104px; right: 126px; background: #2563eb; }
.zone-shape.three { top: 172px; right: 38px; background: #f59e0b; }
.zone-shape.four { top: 38px; left: 54px; background: #ea580c; }
.zone-shape.five { top: 156px; left: 58px; background: #dc2626; }
.preview-metric { position: absolute; left: -24px; bottom: -25px; min-width: 238px; border-radius: 18px; padding: 15px 16px; background: #fff; border: 1px solid var(--public-line); box-shadow: var(--public-shadow); transform: rotate(1deg); }
.preview-metric small { color: var(--public-muted); display: block; font-weight: 700; }
.preview-metric strong { display: block; margin-top: 3px; font-size: 22px; color: var(--public-primary); }

.stats-strip { position: relative; margin-top: -1px; background: var(--public-primary); color: #fff; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-item { min-width: 0; padding: 24px 26px; border-inline-start: 1px solid rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; gap: 14px; }
.stat-item:first-child { border-inline-start: 0; }
.stat-icon { width: 44px; height: 44px; margin: 0; flex-shrink: 0; display: grid; place-items: center; border-radius: 14px; color: #fff; background: rgba(255,255,255,.13); font-size: 16px; }
.stat-content { min-width: 0; }
.stat-item strong { display: block; font-size: 25px; line-height: 1; font-weight: 900; }
.stat-label { display: block; margin-top: 7px; color: rgba(255,255,255,.78); font-size: 12px; font-weight: 700; line-height: 1.45; }

.section { padding: 98px 0; }
.section.alt { background: #eef6f4; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 38px; }
.section-heading.centered { display: block; text-align: center; max-width: 720px; margin: 0 auto 42px; }
.section-kicker { display: block; color: var(--public-primary); font-weight: 900; font-size: 13px; letter-spacing: .03em; margin-bottom: 8px; }
.section-heading h2 { margin: 0; font-size: clamp(30px, 3vw, 43px); line-height: 1.25; letter-spacing: -.02em; font-weight: 900; }
.section-heading p { max-width: 570px; margin: 10px 0 0; color: var(--public-muted); }
.section-heading-side { max-width: 390px; color: var(--public-muted); margin: 0; }

.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.service-card { position: relative; min-height: 245px; padding: 24px; background: #fff; border: 1px solid var(--public-line); border-radius: 21px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.service-card::after { content: ''; position: absolute; width: 90px; height: 90px; border-radius: 50%; inset: auto -35px -42px auto; background: var(--service-soft); }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--public-shadow); border-color: var(--service-color); }
.service-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: var(--service-color); background: var(--service-soft); font-size: 20px; }
.service-card h3 { margin: 20px 0 8px; font-size: 18px; font-weight: 900; }
.service-card p { margin: 0; color: var(--public-muted); font-size: 14px; line-height: 1.8; }
.tone-emerald { --service-color: #07865e; --service-soft: #e5f7f0; }
.tone-amber { --service-color: #c47c05; --service-soft: #fff4d9; }
.tone-slate { --service-color: #52647a; --service-soft: #edf1f5; }
.tone-teal { --service-color: #0f8278; --service-soft: #e5f5f3; }
.tone-indigo { --service-color: #5750b8; --service-soft: #eeecff; }
.tone-blue { --service-color: #1976b9; --service-soft: #e8f4fb; }
.tone-rose { --service-color: #c4425a; --service-soft: #fdecef; }
.tone-violet { --service-color: #8345ae; --service-soft: #f4eafb; }

.report-promo-section { padding: 0 0 98px; background: #fff; }
.report-promo-card { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 34px 38px; border-radius: 26px; color: #fff; background: linear-gradient(135deg, #8a5a05, #c9870d); box-shadow: 0 20px 55px rgba(138, 90, 5, .2); }
.report-promo-card::after { content: ''; position: absolute; width: 230px; height: 230px; border: 45px solid rgba(255,255,255,.07); border-radius: 50%; inset: -95px auto auto -70px; }
.report-promo-icon { width: 70px; height: 70px; position: relative; z-index: 1; display: grid; place-items: center; border-radius: 22px; background: rgba(255,255,255,.15); font-size: 27px; }
.report-promo-copy { position: relative; z-index: 1; }
.report-promo-copy > span { color: #ffe4a7; font-size: 12px; font-weight: 900; }
.report-promo-copy h2 { margin: 5px 0 4px; font-size: clamp(23px, 2.4vw, 33px); line-height: 1.35; font-weight: 900; }
.report-promo-copy p { margin: 0; color: rgba(255,255,255,.78); font-size: 14px; }
.report-button { position: relative; z-index: 1; color: #764c00; background: #fff; white-space: nowrap; }

.map-shell { display: grid; grid-template-columns: minmax(0, 1fr) 320px; background: #fff; border: 1px solid var(--public-line); border-radius: 28px; overflow: hidden; box-shadow: var(--public-shadow); }
.public-map-stage { position: relative; min-width: 0; }
#bebninePublicMap { height: 590px; background: #dceae6; z-index: 1; }
.public-map-status { position: absolute; inset: 0; z-index: 700; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; color: var(--public-primary); background: rgba(240,247,245,.82); backdrop-filter: blur(3px); font-size: 13px; font-weight: 900; transition: opacity .25s ease, visibility .25s ease; }
.public-map-status i { font-size: 24px; }
.public-map-status.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.public-map-status.is-error { color: #a53a31; background: rgba(255,247,245,.92); }
.map-info-panel { padding: 30px 26px; background: #fff; }
.map-info-panel h3 { margin: 0; font-size: 20px; font-weight: 900; }
.map-info-panel h4 { margin: 24px 0 10px; font-size: 13px; color: var(--public-primary); font-weight: 900; }
.map-info-panel > p { color: var(--public-muted); font-size: 14px; margin: 8px 0 24px; }
.public-map-datasets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.public-map-datasets > div { position: relative; min-width: 0; padding: 12px 11px; border: 1px solid var(--public-line); border-radius: 13px; background: #f8fbfa; }
.public-map-datasets strong, .public-map-datasets small { display: block; padding-inline-start: 19px; }
.public-map-datasets strong { font-size: 13px; }
.public-map-datasets small { margin-top: 3px; color: var(--public-muted); font-size: 9px; direction: ltr; text-align: right; }
.dataset-symbol { position: absolute; top: 15px; inset-inline-start: 10px; width: 11px; height: 11px; border-radius: 3px; }
.dataset-symbol.neighborhood { background: #0f766e; box-shadow: 0 0 0 3px rgba(15,118,110,.12); }
.dataset-symbol.parcel { background: transparent; border: 2px solid #50716c; }
.map-legend { display: grid; gap: 10px; }
.legend-item { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 12px; background: #f8fbfa; font-size: 13px; font-weight: 700; }
.legend-color { width: 15px; height: 15px; border-radius: 5px; flex-shrink: 0; }
.map-privacy-note { margin-top: 26px; padding: 14px; border-radius: 14px; background: var(--public-primary-soft); color: #315f59; font-size: 12px; line-height: 1.7; }
.map-privacy-note i { color: var(--public-primary); margin-inline-end: 5px; }
.public-zone-popup { min-width: 205px; display: grid; gap: 4px; font-family: 'Tajawal', sans-serif; text-align: right; }
.public-zone-popup strong { margin-bottom: 3px; color: #123f3b; font-size: 16px; }
.public-zone-popup span { display: block; color: #627773; font-size: 11px; }
.public-zone-popup .popup-kicker { color: #0f766e; font-size: 9px; font-weight: 900; }
.public-zone-popup.parcel-popup { min-width: 185px; }
.public-neighborhood-directory { margin-top: 20px; padding: 24px; border: 1px solid var(--public-line); border-radius: 22px; background: rgba(255,255,255,.86); box-shadow: 0 12px 34px rgba(24,67,63,.07); }
.directory-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.directory-heading span { color: var(--public-primary); font-size: 11px; font-weight: 900; }
.directory-heading h3 { margin: 3px 0 0; font-size: 20px; font-weight: 900; }
.directory-heading > small { color: var(--public-muted); font-size: 11px; }
.neighborhood-chip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.neighborhood-chip { min-width: 0; padding: 11px 12px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; border: 1px solid var(--public-line); border-radius: 13px; color: var(--public-text); background: #fff; font-family: inherit; text-align: start; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.neighborhood-chip:hover { transform: translateY(-2px); border-color: #8bbab3; box-shadow: 0 8px 18px rgba(24,67,63,.08); }
.neighborhood-chip > span:nth-child(2) { min-width: 0; }
.neighborhood-chip strong, .neighborhood-chip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neighborhood-chip strong { font-size: 12px; }
.neighborhood-chip small { margin-top: 2px; color: var(--public-muted); font-size: 9px; }
.neighborhood-chip > i { color: #8aa09d; font-size: 10px; }
.chip-status { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; font-size: 11px; }
.chip-status.verified { color: #0d8059; background: #e8f7f1; }
.chip-status.inferred { color: #9a6508; background: #fff4d8; }

.projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.project-card { display: flex; flex-direction: column; min-height: 300px; padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--public-line); transition: transform .25s ease, box-shadow .25s ease; }
.project-card:hover { transform: translateY(-5px); box-shadow: var(--public-shadow); }
.project-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.project-status { padding: 5px 10px; border-radius: 20px; font-size: 11px; font-weight: 900; }
.project-status.in_progress { color: #1b63a4; background: #e8f3fd; }
.project-status.completed { color: #087953; background: #e8f8f1; }
.project-status.planned { color: #9a6508; background: #fff4d8; }
.project-status.stopped { color: #a13232; background: #fdeaea; }
.project-date { color: #80918e; font-size: 11px; }
.project-card h3 { margin: 22px 0 9px; font-size: 19px; line-height: 1.45; font-weight: 900; }
.project-card p { color: var(--public-muted); margin: 0; font-size: 14px; }
.project-location { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; color: #55716d; font-size: 12px; font-weight: 700; }
.project-progress { margin-top: auto; padding-top: 22px; }
.project-progress-head { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; margin-bottom: 7px; }
.progress-track { height: 7px; border-radius: 20px; background: #e7efed; overflow: hidden; }
.progress-bar { height: 100%; border-radius: inherit; background: var(--public-primary); }

.payment-cta { padding: 36px 0 96px; }
.payment-cta-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; padding: 46px 50px; border-radius: 28px; color: #fff; background: #123f3b; }
.payment-cta-card::after { content: ''; position: absolute; width: 270px; height: 270px; border: 50px solid rgba(255,255,255,.055); border-radius: 50%; inset: -110px -80px auto auto; }
.payment-cta-copy { position: relative; z-index: 1; }
.payment-cta-copy span { color: #8ed8ca; font-size: 13px; font-weight: 900; }
.payment-cta-copy h2 { margin: 8px 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.3; font-weight: 900; }
.payment-cta-copy p { margin: 0; color: rgba(255,255,255,.7); }
.payment-cta-card .public-button { position: relative; z-index: 1; color: #113c38; background: #fff; }
.payment-cta-actions { position:relative; z-index:1; display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.payment-cta-actions .whish-cta-button { color:var(--public-primary); background:var(--public-primary-soft); }
.whish-cta-button img { width:96px; height:auto; }

/* Whish Money payment request */
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.whish-page-hero { position:relative; overflow:hidden; padding:70px 0 62px; color:#fff; background:radial-gradient(circle at 12% 15%,rgba(244,185,66,.17),transparent 28%),linear-gradient(125deg,#0c3532 0%,var(--public-primary-dark) 55%,var(--public-primary) 100%); }
.whish-page-hero::after { content:''; position:absolute; width:360px; height:360px; inset:auto -120px -240px auto; border:55px solid rgba(255,255,255,.055); border-radius:50%; pointer-events:none; }
.whish-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) 350px; align-items:center; gap:65px; }
.whish-brand-pill { width:fit-content; display:flex; align-items:center; gap:12px; padding:9px 14px; border:1px solid rgba(255,255,255,.38); border-radius:14px; background:#fff; box-shadow:0 10px 28px rgba(4,35,32,.12); }
.whish-brand-pill img { width:124px; height:auto; }
.whish-brand-pill span { color:var(--public-muted); font-size:11px; font-weight:800; }
.whish-page-hero h1 { margin:20px 0 13px; font-size:clamp(38px,4.6vw,62px); line-height:1.18; }
.whish-page-hero h1 span { color:var(--public-warm); }
.whish-page-hero p { max-width:660px; margin:0; color:rgba(255,255,255,.78); font-size:17px; }
.whish-recipient-card { position:relative; z-index:1; padding:28px; text-align:center; color:var(--public-ink); border:1px solid rgba(255,255,255,.4); border-radius:24px; background:#fff; box-shadow:0 24px 60px rgba(4,35,32,.24); }
.whish-recipient-card small,.whish-recipient-card span { display:block; color:var(--public-muted); }
.whish-recipient-card strong { display:block; margin:10px 0 3px; color:var(--public-primary); font-size:30px; letter-spacing:.05em; }
.whish-recipient-card span { font-size:12px; }
.whish-recipient-card button { margin-top:17px; padding:8px 13px; color:var(--public-primary); border:1px solid var(--public-line); border-radius:10px; background:var(--public-primary-soft); cursor:pointer; font-weight:800; }
.whish-recipient-card.not-configured strong { color:#a13c3c; font-size:21px; }
.whish-payment-page { padding:55px 0 95px; background:var(--public-background); }
.whish-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; align-items:start; gap:24px; }
.whish-form-card { padding:34px; border:1px solid var(--public-line); border-radius:24px; background:#fff; box-shadow:var(--public-shadow); }
.whish-form-heading > span { color:var(--public-primary); font-size:12px; font-weight:900; }
.whish-form-heading h2 { margin:4px 0; font-size:28px; }
.whish-form-heading p { margin:0 0 26px; color:var(--public-muted); font-size:13px; }
.whish-form fieldset { min-width:0; margin:0; padding:26px 0; border:0; border-top:1px solid var(--public-line); }
.whish-form legend { display:flex; align-items:center; gap:9px; padding:0 0 15px; color:var(--public-ink); font-weight:900; }
.whish-form legend span { width:28px; height:28px; display:grid; place-items:center; color:#fff; border-radius:9px; background:var(--public-primary); font-size:12px; }
.whish-fields-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.whish-fields-grid .full-row { grid-column:1/-1; }
.whish-form .form-field label { font-size:12px; }
.whish-form .form-field input:focus,.whish-form .form-field select:focus,.whish-form .form-field textarea:focus { border-color:var(--public-primary); box-shadow:0 0 0 4px color-mix(in srgb,var(--public-primary) 10%,transparent); }
.whish-transfer-notice { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:17px; padding:15px 18px; border:1px solid var(--public-line); border-radius:14px; background:var(--public-primary-soft); }
.whish-transfer-notice img { width:105px; height:auto; }
.whish-transfer-notice div { display:grid; text-align:left; }
.whish-transfer-notice small { color:var(--public-muted); }
.whish-transfer-notice strong { color:var(--public-primary); font-size:18px; }
.whish-upload { min-height:112px; display:flex!important; align-items:center; justify-content:center; flex-direction:column; gap:2px; text-align:center; border:1px dashed color-mix(in srgb,var(--public-primary) 50%,#fff); border-radius:14px; background:#f7fbfa; cursor:pointer; }
.whish-upload i { color:var(--public-primary); font-size:25px; }
.whish-upload strong { color:var(--public-ink); font-size:13px; }
.whish-upload span,.whish-file-name { color:var(--public-muted); font-size:10px; }
.whish-file-name { display:block; margin-top:6px; color:#087953; font-weight:800; }
.whish-location-box { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px; border:1px solid var(--public-line); border-radius:14px; background:#f8fbfa; }
.whish-location-box div { display:grid; }
.whish-location-box span { color:var(--public-muted); font-size:11px; }
.whish-location-box button { padding:9px 12px; white-space:nowrap; color:var(--public-primary); border:1px solid var(--public-line); border-radius:10px; background:var(--public-primary-soft); cursor:pointer; font-weight:800; }
.whish-location-status { min-height:22px; margin:5px 0 8px; color:#9a6508; font-size:11px; }
.whish-location-status.success { color:#087953; }
.whish-confirmation { display:flex; align-items:flex-start; gap:10px; margin-top:13px; padding:13px; border:1px solid var(--public-line); border-radius:12px; background:#f9fbfa; font-size:12px; cursor:pointer; }
.whish-confirmation input { margin-top:5px; accent-color:var(--public-primary); }
.whish-confirmation strong { color:var(--public-primary); }
.whish-submit { width:100%; margin-top:7px; color:#fff; border:0; background:var(--public-primary); cursor:pointer; box-shadow:0 12px 30px color-mix(in srgb,var(--public-primary) 22%,transparent); }
.whish-submit:hover { background:var(--public-primary-dark); }
.whish-submit img { padding:4px 7px; border-radius:7px; background:#fff; }
.whish-steps-card { position:sticky; top:98px; padding:25px; border:1px solid var(--public-line); border-radius:22px; background:#fff; box-shadow:0 12px 34px rgba(24,67,63,.06); }
.whish-steps-card h3 { margin:0 0 17px; }
.whish-steps-card ol { display:grid; gap:17px; margin:0; padding:0; list-style:none; }
.whish-steps-card li { display:flex; gap:11px; }
.whish-steps-card li > span { width:28px; height:28px; flex-shrink:0; display:grid; place-items:center; color:var(--public-primary); border-radius:50%; background:var(--public-primary-soft); font-size:11px; font-weight:900; }
.whish-steps-card li div { display:grid; }
.whish-steps-card li small { color:var(--public-muted); font-size:10px; }
.whish-safety-note { margin-top:22px; padding:13px; color:#315f59; border-radius:12px; background:var(--public-primary-soft); font-size:10px; }
.whish-safety-note i { color:var(--public-primary); }
.whish-unavailable { display:flex; gap:14px; align-items:flex-start; padding:20px; color:#754b0b; border:1px solid #edd19a; border-radius:15px; background:#fff9e9; }
.whish-unavailable i { margin-top:5px; font-size:22px; }
.whish-unavailable p { margin:3px 0 0; font-size:12px; }
.whish-status-page { min-height:70vh; display:grid; align-items:center; padding:65px 0 90px; background:var(--public-background); }
.whish-status-shell { max-width:780px; }
.whish-status-card { padding:38px; text-align:center; border:1px solid var(--public-line); border-radius:26px; background:#fff; box-shadow:var(--public-shadow); }
.whish-status-card > img { width:132px; height:auto; }
.whish-status-icon { width:64px; height:64px; margin:18px auto 10px; display:grid; place-items:center; color:#a36a08; border-radius:50%; background:#fff1cf; font-size:27px; }
.whish-status-card.status-approved .whish-status-icon { color:#087953; background:#e5f7f0; }
.whish-status-card.status-rejected .whish-status-icon { color:#a13232; background:#fdeaea; }
.whish-status-card h1 { margin:6px 0; font-size:28px; }
.whish-status-card > p { max-width:600px; margin:0 auto; color:var(--public-muted); }
.whish-status-reference { width:fit-content; margin:24px auto; padding:13px 22px; display:grid; border:1px solid var(--public-line); border-radius:13px; background:#f7fbfa; }
.whish-status-reference small { color:var(--public-muted); }
.whish-status-reference strong { color:var(--public-primary); font-size:18px; }
.whish-status-details { overflow:hidden; display:grid; grid-template-columns:1fr 1fr; text-align:right; border:1px solid var(--public-line); border-radius:15px; }
.whish-status-details div { display:grid; padding:15px 18px; border-bottom:1px solid var(--public-line); }
.whish-status-details div:nth-child(odd) { border-inline-end:1px solid var(--public-line); }
.whish-status-details div:nth-last-child(-n+2) { border-bottom:0; }
.whish-status-details small { color:var(--public-muted); font-size:10px; }
.whish-status-warning { margin-top:18px; padding:13px; color:#82550b; border-radius:12px; background:#fff6dc; font-size:11px; }
.whish-status-actions { display:flex; justify-content:center; gap:9px; margin-top:20px; }

@media (max-width:1280px) and (min-width:1101px) {
    .header-inner { gap:14px; }
    .public-navigation { gap:3px; font-size:12px; }
    .public-navigation > a { white-space:nowrap; }
    .nav-payment-link,.nav-report-link,.nav-admin-link { padding:8px 10px; }
    .nav-whish-link { padding-inline:9px !important; gap:6px; }
    .nav-whish-link img { width:70px; }
    .header-sponsor { display:none; }
}

.public-footer { color: #dce9e6; background: #0e2927; padding-top: 64px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr .8fr 1fr; gap: 70px; padding-bottom: 50px; }
.footer-brand .public-brand-mark { background: #fff; color: var(--public-primary); box-shadow: none; }
.footer-brand strong { color: #fff; }
.footer-brand small { color: #91aaa6; }
.footer-brand-block p { max-width: 450px; color: #91aaa6; font-size: 14px; margin: 20px 0 0; }
.footer-sponsor { margin-top: 18px; padding: 14px 16px; width: fit-content; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; color: #b8ccc9; background: rgba(255,255,255,.04); font-size: 11px; }
.footer-sponsor strong { color: #fff; font-size: 15px; letter-spacing: .04em; }
.footer-sponsor a { color: #8ed8ca; font-weight: 700; }
.public-footer h3 { margin: 4px 0 18px; color: #fff; font-size: 15px; }
.footer-links, .footer-contact { display: grid; gap: 10px; color: #91aaa6; font-size: 13px; }
.footer-links a:hover { color: #fff; }
.footer-contact span { display: flex; align-items: flex-start; gap: 9px; }
.footer-contact i { color: #68c4b5; margin-top: 5px; }
.footer-bottom { min-height: 68px; border-top: 1px solid rgba(255,255,255,.09); display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #78938f; font-size: 12px; }
.footer-bottom a { color: #b8ccc9; }

.receipt-sponsor { margin-top: 20px; padding: 14px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px 9px; border: 1px solid #dfcc91; border-radius: 13px; color: #715813; background: #fffbea; font-size: 11px; }
.receipt-sponsor strong { color: var(--public-primary); font-size: 15px; }
.receipt-sponsor a { font-weight: 800; }

.terms-hero small { display: block; margin-top: 12px; color: var(--public-muted); }
.terms-free-badge { width: fit-content; margin-bottom: 14px; padding: 8px 13px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #dfcc91; border-radius: 999px; color: #715813; background: #fffbea; font-size: 12px; font-weight: 800; }
.terms-page { padding: 58px 0 90px; }
.terms-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); align-items: start; gap: 34px; }
.terms-summary { position: sticky; top: 105px; padding: 26px 22px; display: grid; gap: 7px; border: 1px solid #dfcc91; border-radius: 22px; text-align: center; background: linear-gradient(145deg, #fff9df, #fff); box-shadow: var(--public-shadow); }
.terms-summary > i { width: 54px; height: 54px; margin: 0 auto 4px; display: grid; place-items: center; border-radius: 17px; color: #fff; background: var(--public-primary); font-size: 23px; }
.terms-summary > span { color: var(--public-muted); font-size: 11px; font-weight: 700; }
.terms-summary > strong { color: var(--public-primary); font-size: 22px; letter-spacing: .04em; }
.terms-summary p { margin: 4px 0 8px; color: var(--public-muted); font-size: 13px; }
.terms-summary a { color: #725914; font-size: 12px; font-weight: 800; }
.terms-content { padding: 10px 36px 32px; border: 1px solid var(--public-line); border-radius: 24px; background: #fff; box-shadow: 0 16px 45px rgba(24,67,63,.06); }
.terms-content section { padding: 25px 0; border-bottom: 1px solid var(--public-line); }
.terms-content section:last-of-type { border-bottom: 0; }
.terms-content h2 { margin: 0 0 10px; color: #173f3b; font-size: 20px; }
.terms-content p { margin: 0; color: #526c69; font-size: 14px; line-height: 1.9; }
.terms-content p + p { margin-top: 10px; }
.terms-content ul { margin: 8px 0 0; padding-inline-start: 23px; color: #526c69; font-size: 14px; line-height: 1.95; }
.terms-content a { color: var(--public-primary); font-weight: 800; text-decoration: underline; }
.terms-content .terms-warning { margin: 20px -16px 0; padding: 22px 16px; border: 1px solid #efcf93; border-radius: 16px; background: #fff9e9; }
.terms-reference { padding: 10px 12px; border-radius: 10px; background: var(--public-primary-soft); font-size: 12px !important; }
.terms-legal-note { margin-top: 26px; padding: 18px; display: flex; align-items: flex-start; gap: 13px; border-radius: 14px; color: #6e5617; background: #fff8df; }
.terms-legal-note i { margin-top: 5px; font-size: 20px; }
.terms-legal-note p { color: inherit; font-size: 12px; }

.portal-page-hero { padding: 66px 0 48px; background: linear-gradient(180deg, #eff8f5, #f7faf9); border-bottom: 1px solid var(--public-line); }
.page-breadcrumb { color: var(--public-muted); font-size: 13px; margin-bottom: 14px; }
.page-breadcrumb a { color: var(--public-primary); font-weight: 800; }
.portal-page-hero h1 { margin: 0; font-size: clamp(34px, 4vw, 50px); line-height: 1.25; font-weight: 900; }
.portal-page-hero p { max-width: 680px; color: var(--public-muted); margin: 12px 0 0; }
.payment-page { padding: 56px 0 100px; }
.payment-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 24px; align-items: start; }
.lookup-card, .lookup-help { background: #fff; border: 1px solid var(--public-line); border-radius: 24px; }
.lookup-card { padding: 30px; box-shadow: 0 15px 45px rgba(24, 67, 63, .08); }
.lookup-card h2 { margin: 0; font-size: 23px; font-weight: 900; }
.lookup-card-subtitle { color: var(--public-muted); margin: 5px 0 24px; font-size: 14px; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.form-field label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 800; }
.form-field input, .form-field select { width: 100%; height: 53px; padding: 0 15px; color: var(--public-ink); background: #f9fbfa; border: 1px solid var(--public-line); border-radius: 13px; outline: none; transition: border-color .2s, box-shadow .2s; }
.form-field input:focus, .form-field select:focus { border-color: var(--public-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--public-primary) 12%, transparent); }
.form-field input.is-invalid { border-color: #d74343; }
.field-error { display: block; color: #bd3333; font-size: 12px; margin-top: 5px; }
.lookup-submit { margin-top: 18px; border: 0; cursor: pointer; }
.lookup-security { display: flex; align-items: flex-start; gap: 9px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--public-line); color: var(--public-muted); font-size: 12px; }
.lookup-security i { color: var(--public-primary); margin-top: 5px; }
.lookup-help { padding: 26px; }
.help-icon { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: var(--public-primary); background: var(--public-primary-soft); font-size: 19px; }
.lookup-help h3 { margin: 18px 0 8px; font-size: 18px; }
.lookup-help p { color: var(--public-muted); font-size: 13px; margin: 0 0 18px; }
.lookup-help ol { margin: 0; padding: 0 20px 0 0; color: #496762; font-size: 13px; }
.lookup-help li + li { margin-top: 8px; }
.lookup-result { margin-top: 22px; border-radius: 20px; overflow: hidden; border: 1px solid var(--public-line); }
.lookup-result-header { display: flex; align-items: center; gap: 15px; padding: 21px 23px; }
.lookup-result.paid .lookup-result-header { color: #075d40; background: #e6f7ef; }
.lookup-result.unpaid .lookup-result-header { color: #9b421c; background: #fff0e7; }
.result-status-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.68); font-size: 21px; }
.lookup-result-header strong { display: block; font-size: 19px; }
.lookup-result-header span { display: block; font-size: 12px; opacity: .82; }
.result-details { padding: 22px; background: #fff; }
.resident-line { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 17px; margin-bottom: 6px; border-bottom: 1px solid var(--public-line); }
.resident-line strong { font-size: 16px; }
.resident-line span { color: var(--public-muted); font-size: 12px; }
.result-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.result-detail { padding: 13px 0; border-bottom: 1px solid #edf2f1; }
.result-detail:nth-child(even) { padding-inline-start: 18px; }
.result-detail small { display: block; color: var(--public-muted); font-size: 11px; }
.result-detail strong { display: block; margin-top: 3px; font-size: 14px; }
.lookup-not-found { margin-top: 20px; display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid #f2caca; border-radius: 15px; color: #8f2f2f; background: #fff4f4; }
.lookup-not-found i { margin-top: 5px; }
.lookup-not-found strong { display: block; }
.lookup-not-found span { display: block; font-size: 12px; margin-top: 2px; }

.report-page-hero { position: relative; overflow: hidden; }
.report-hero-icon { position: absolute; inset: 55px auto auto calc(50% - 560px); width: 88px; height: 88px; display: grid; place-items: center; border-radius: 28px; color: #9a6508; background: #fff3ce; font-size: 32px; transform: rotate(-5deg); }
.report-page { padding: 52px 0 100px; }
.report-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 24px; align-items: start; }
.report-layout-simple { width: min(760px, calc(100% - 40px)); grid-template-columns: minmax(0, 1fr); }
.report-form-card { padding: 30px; border: 1px solid var(--public-line); border-radius: 26px; background: #fff; box-shadow: 0 16px 50px rgba(24,67,63,.08); }
.report-quick-note { margin-bottom: 24px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; border: 1px solid #cbe6df; border-radius: 15px; color: #0d6258; background: #effaf7; }
.report-quick-note > i { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--public-primary); }
.report-quick-note strong, .report-quick-note span { display: block; }
.report-quick-note strong { font-size: 14px; }
.report-quick-note span { color: var(--public-muted); font-size: 11px; }
.report-required-fields { display: grid; gap: 18px; }
.report-required-fields label b { color: #c33d33; }
.report-optional { margin-top: 24px; border: 1px solid var(--public-line); border-radius: 17px; background: #fbfdfc; overflow: hidden; }
.report-optional summary { padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; }
.report-optional summary::-webkit-details-marker { display: none; }
.report-optional summary > span { display: flex; align-items: center; gap: 9px; color: var(--public-primary); }
.report-optional summary small { color: var(--public-muted); font-size: 10px; text-align: end; }
.report-optional-content { padding: 4px 18px 20px; border-top: 1px solid var(--public-line); }
.photo-upload-zone.compact-upload { min-height: 145px; margin-top: 18px; padding: 18px; }
.compact-upload .photo-upload-icon { width: 46px; height: 46px; margin-bottom: 7px; border-radius: 14px; font-size: 19px; }
.report-form-section + .report-form-section { margin-top: 34px; padding-top: 32px; border-top: 1px solid var(--public-line); }
.report-section-heading { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 20px; }
.report-section-heading > span { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; color: #fff; background: var(--public-primary); border-radius: 10px; font-size: 13px; font-weight: 900; }
.report-section-heading h2 { margin: 0; font-size: 20px; font-weight: 900; line-height: 1.4; }
.report-section-heading p { margin: 2px 0 0; color: var(--public-muted); font-size: 12px; }
.report-category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.report-category-option { position: relative; cursor: pointer; }
.report-category-option input { position: absolute; opacity: 0; pointer-events: none; }
.report-category-content { min-height: 116px; height: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 2px 10px; padding: 15px; border: 1.5px solid var(--public-line); border-radius: 16px; background: #fbfdfc; transition: border-color .2s, background .2s, box-shadow .2s; }
.report-category-content > i { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--public-primary); background: var(--public-primary-soft); }
.report-category-content strong { font-size: 13px; }
.report-category-content small { color: var(--public-muted); font-size: 11px; line-height: 1.55; }
.report-category-option input:checked + .report-category-content { border-color: var(--public-primary); background: #f0f9f7; box-shadow: 0 0 0 3px color-mix(in srgb, var(--public-primary) 10%, transparent); }
.report-category-option input:focus-visible + .report-category-content { outline: 3px solid color-mix(in srgb, var(--public-primary) 20%, transparent); }
.report-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.report-field-full { grid-column: 1 / -1; }
.form-field textarea { width: 100%; padding: 14px 15px; resize: vertical; color: var(--public-ink); background: #f9fbfa; border: 1px solid var(--public-line); border-radius: 13px; outline: none; transition: border-color .2s, box-shadow .2s; }
.form-field textarea:focus { border-color: var(--public-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--public-primary) 12%, transparent); }
.field-hint { display: block; color: var(--public-muted); font-size: 11px; margin-top: 5px; }
.photo-file-input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; overflow: hidden; }
.photo-upload-zone { display: flex; min-height: 190px; padding: 24px; align-items: center; justify-content: center; flex-direction: column; text-align: center; border: 2px dashed #b8d3ce; border-radius: 20px; background: #f7fbfa; cursor: pointer; transition: border-color .2s, background .2s; }
.photo-upload-zone:hover { border-color: var(--public-primary); background: #f0f9f7; }
.photo-upload-icon { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 10px; border-radius: 18px; color: var(--public-primary); background: var(--public-primary-soft); font-size: 22px; }
.photo-upload-zone strong { font-size: 15px; }
.photo-upload-zone small { color: var(--public-muted); font-size: 11px; }
.photo-upload-action { margin-top: 12px; padding: 7px 13px; border-radius: 10px; color: #fff; background: var(--public-primary); font-size: 12px; font-weight: 800; }
.photo-previews { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
.photo-preview-item { min-width: 0; padding: 5px; border: 1px solid var(--public-line); border-radius: 12px; background: #fff; }
.photo-preview-item img { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; border-radius: 8px; }
.photo-preview-item span { display: block; padding: 4px 2px 0; overflow: hidden; color: var(--public-muted); font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.photo-warning { grid-column: 1 / -1; margin: 4px 0 0; color: #a33b2e; font-size: 12px; }
.location-box { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding: 15px; border: 1px solid var(--public-line); border-radius: 16px; background: #fff; }
.location-box-copy { display: flex; align-items: center; gap: 11px; }
.location-box-copy > i { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; color: #b16f00; background: #fff3ce; }
.location-box-copy strong, .location-box-copy span { display: block; }
.location-box-copy strong { font-size: 13px; }
.location-box-copy span { color: var(--public-muted); font-size: 11px; }
.location-button { padding: 9px 12px; border: 1px solid var(--public-line); border-radius: 11px; color: var(--public-primary); background: #fff; font-size: 11px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.location-button.has-location { color: #087953; background: #e8f8f1; border-color: #b9e7d4; }
.report-location-description { margin-top: 14px; }
.report-submit-area { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 34px; padding-top: 25px; border-top: 1px solid var(--public-line); }
.report-submit-area p { max-width: 440px; margin: 0; color: var(--public-muted); font-size: 11px; }
.report-submit-area p i { color: var(--public-primary); }
.report-submit-button { border: 0; cursor: pointer; white-space: nowrap; }
.report-guidance { display: grid; gap: 14px; position: sticky; top: 98px; }
.report-guidance-card { padding: 22px; border: 1px solid var(--public-line); border-radius: 20px; background: #fff; }
.report-guidance-card > i { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 14px; color: var(--public-primary); background: var(--public-primary-soft); }
.report-guidance-card h3 { margin: 15px 0 7px; font-size: 16px; }
.report-guidance-card p, .report-guidance-card ul { margin: 0; color: var(--public-muted); font-size: 12px; }
.report-guidance-card ul { padding: 0 17px 0 0; }
.report-guidance-card li + li { margin-top: 5px; }
.urgent-guidance { border-color: #f2d29c; background: #fffaf0; }
.urgent-guidance > i { color: #b56600; background: #ffedc7; }
.report-errors { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px; padding: 15px; border: 1px solid #f0c0ba; border-radius: 15px; color: #96352d; background: #fff4f2; }
.report-errors > i { margin-top: 5px; }
.report-errors ul { margin: 4px 0 0; padding: 0 18px 0 0; font-size: 12px; }
.report-success { min-height: 380px; display: flex; align-items: center; justify-content: center; gap: 20px; text-align: right; }
.report-success-icon { width: 76px; height: 76px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #149467; box-shadow: 0 12px 30px rgba(20,148,103,.25); font-size: 28px; }
.report-success h2 { margin: 0; font-size: 26px; }
.report-success p { margin: 4px 0 12px; color: var(--public-muted); }
.report-success strong { display: inline-block; padding: 9px 13px; direction: ltr; border-radius: 10px; color: #075d40; background: #e6f7ef; letter-spacing: .04em; }

/* Official electronic receipt */
.receipt-verification-page { padding: 50px 0 90px; background: #f2f6f5; }
.receipt-page-shell { max-width: 950px; }
.receipt-lookup { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: end; margin-bottom: 26px; padding: 28px; border: 1px solid var(--public-line); border-radius: 22px; background: #fff; box-shadow: var(--public-shadow); }
.receipt-lookup .eyebrow { color: var(--public-primary); font-size: 12px; font-weight: 800; }
.receipt-lookup h1 { margin: 8px 0 4px; font-size: 25px; }
.receipt-lookup p { margin: 0; color: var(--public-muted); }
.receipt-lookup label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 800; }
.receipt-search-row { display: flex; gap: 8px; }
.receipt-search-row input { min-width: 0; flex: 1; direction: ltr; padding: 12px 14px; border: 1px solid var(--public-line); border-radius: 11px; font: inherit; }
.receipt-invalid { display: flex; gap: 13px; align-items: center; margin-bottom: 25px; padding: 17px 20px; color: #8d2924; border: 1px solid #efb7b1; border-radius: 15px; background: #fff2f0; }
.receipt-invalid > i { font-size: 26px; }
.receipt-invalid div { display: grid; }
.receipt-invalid span { font-size: 12px; }
.official-receipt { overflow: hidden; border: 1px solid #cfdeda; border-radius: 24px; background: #fff; box-shadow: 0 20px 50px rgba(15,70,59,.12); }
.official-receipt-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 25px; padding: 28px 34px; color: #fff; background: linear-gradient(125deg, #0b594f, #0f766e); }
.receipt-municipality { display: flex; align-items: center; gap: 11px; }
.receipt-logo { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.45); border-radius: 13px; background: rgba(255,255,255,.13); font-size: 22px; font-weight: 900; }
.receipt-municipality div { display: grid; }
.receipt-municipality small { opacity: .75; font-size: 10px; }
.receipt-title { text-align: center; }
.receipt-title h2 { margin: 0; font-size: 21px; }
.receipt-title span { display: block; direction: ltr; margin-top: 2px; letter-spacing: .15em; font-size: 10px; opacity: .75; }
.verified-seal { justify-self: end; padding: 7px 10px; border: 1px solid rgba(255,255,255,.3); border-radius: 99px; background: rgba(255,255,255,.12); font-size: 11px; font-weight: 800; }
.receipt-identity-grid, .receipt-data-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
.receipt-identity-grid { border-bottom: 1px solid #dce7e4; background: #f5faf8; }
.receipt-identity-grid > div, .receipt-data-grid > div { display: grid; gap: 4px; padding: 18px 26px; border-bottom: 1px solid #e6eeec; }
.receipt-identity-grid > div:nth-child(odd), .receipt-data-grid > div:nth-child(odd) { border-inline-end: 1px solid #e6eeec; }
.receipt-identity-grid > div:nth-last-child(-n+2), .receipt-data-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
.official-receipt small { color: #667b76; font-size: 10px; font-weight: 700; }
.official-receipt strong { overflow-wrap: anywhere; }
.paid-status, .signature-state { color: #0a815b; }
.receipt-section { padding: 28px 34px 8px; }
.receipt-section + .receipt-section { padding-top: 18px; }
.receipt-section h3, .receipt-approval h3 { margin: 0 0 12px; color: #164d46; font-size: 15px; }
.receipt-section h3 i { margin-inline-end: 6px; }
.receipt-data-grid { overflow: hidden; border: 1px solid #dce7e4; border-radius: 14px; }
.receipt-amount strong { color: #0b675d; font-size: 22px; }
.receipt-approval { display: grid; grid-template-columns: 1fr 190px; align-items: center; gap: 30px; margin: 22px 34px 0; padding: 24px 28px; border: 1px dashed #abcac3; border-radius: 16px; background: #f7fbfa; }



.receipt-approval p { margin: 0 0 13px; color: #4d6560; font-size: 12px; }
.receipt-approval span { display: block; margin-top: 7px; font-size: 12px; }
.receipt-qr { display: grid; justify-items: center; padding-inline-start: 20px; border-inline-start: 1px solid #d8e6e3; }
.receipt-qr img { width: 150px; height: 150px; }
.receipt-qr strong { margin-top: 5px; font-size: 9px; }
.official-receipt-footer { padding: 22px 34px 30px; }
.official-receipt-footer p { margin: 0; padding-top: 17px; border-top: 1px solid #e1eae8; color: #536963; font-size: 11px; line-height: 1.8; }
.receipt-actions { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.public-button.secondary { color: var(--public-primary); border: 1px solid #bcd4cf; background: #fff; }

@media print {
    @page { size: A4; margin: 9mm; }
    .public-header, .public-footer, .no-print { display: none !important; }
    .receipt-verification-page { padding: 0; background: #fff; }
    .public-container.receipt-page-shell { width: 100%; max-width: none; }
    .official-receipt { border-radius: 0; box-shadow: none; }
    .official-receipt-header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 1050px) {
    .header-sponsor { display: none; }
    .hero-grid { gap: 35px; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .map-shell { grid-template-columns: minmax(0, 1fr) 280px; }
}

@media (max-width: 1100px) {
    .public-container.header-inner { width: min(100% - 36px, 1180px); }
    .header-sponsor { display: none; }
    .mobile-nav-toggle { display: grid; place-items: center; }
    .public-navigation { display: none; position: absolute; inset: 76px 18px auto; max-height: calc(100vh - 96px); padding: 12px; align-items: stretch; flex-direction: column; gap: 4px; overflow-y: auto; border: 1px solid var(--public-line); border-radius: 18px; background: rgba(255,255,255,.98); box-shadow: 0 24px 70px rgba(18,63,59,.18); backdrop-filter: blur(18px); }
    .public-navigation.is-open { display: flex; }
    .public-navigation > a { width: 100%; min-height: 46px; padding: 10px 14px; }
    .nav-payment-link, .nav-report-link, .nav-admin-link { justify-content: center; text-align: center; margin-top: 3px; }
    .nav-whish-link { min-height: 58px !important; }
    .nav-whish-link img { width: 88px; }
}

@media (max-width: 850px) {
    .hero { padding-top: 65px; }
    .hero-grid { grid-template-columns: 1fr; }
    .portal-preview { width: min(620px, 100%); margin-inline: auto; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-item:nth-child(3) { border-top: 1px solid rgba(255,255,255,.15); border-inline-start: 0; }
    .stat-item:nth-child(4) { border-top: 1px solid rgba(255,255,255,.15); }
    .section-heading { display: block; }
    .section-heading-side { margin-top: 12px; }
    .map-shell { grid-template-columns: 1fr; }
    #bebninePublicMap { height: 500px; }
    .map-info-panel { display: block; }
    .map-privacy-note { margin-top: 0; }
    .projects-grid { grid-template-columns: repeat(2, 1fr); }
    .neighborhood-chip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand-block { grid-column: 1 / -1; }
    .payment-layout { grid-template-columns: 1fr; }
    .lookup-help { order: -1; }
    .report-layout { grid-template-columns: 1fr; }
    .report-guidance { position: static; grid-template-columns: repeat(3, 1fr); }
    .report-hero-icon { display: none; }
    .terms-layout { grid-template-columns: 1fr; }
    .terms-summary { position: static; }
    .whish-hero-grid,.whish-layout { grid-template-columns:1fr; }
    .whish-recipient-card { max-width:430px; width:100%; }
    .whish-steps-card { position:static; order:-1; }
}

@media (max-width: 600px) {
    .public-container { width: min(100% - 28px, 1180px); }
    .header-inner { min-height: 70px; }
    .public-brand-mark { width: 40px; height: 40px; }
    .hero { padding: 48px 0 54px; }
    .hero-copy h1 { font-size: 39px; }
    .hero-copy p { font-size: 16px; }
    .hero-actions { display: grid; }
    .hero-trust { display: grid; gap: 7px; }
    .preview-map { min-height: 270px; }
    .zone-shape { width: 85px; height: 73px; font-size: 9px; }
    .zone-shape.one { right: 25px; }
    .zone-shape.two { right: 90px; }
    .zone-shape.three { right: 24px; top: 150px; }
    .zone-shape.four { left: 30px; }
    .zone-shape.five { left: 34px; top: 145px; }
    .preview-metric { left: -6px; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .stat-item { min-height: 82px; padding: 18px 13px; justify-content: flex-start; gap: 10px; }
    .stat-icon { width: 38px; height: 38px; }
    .stat-item strong { font-size: 20px; }
    .stat-label { font-size: 11px; }
    .section { padding: 70px 0; }
    .services-grid, .projects-grid { grid-template-columns: 1fr; }
    .public-neighborhood-directory { padding: 18px 14px; }
    .directory-heading { display: block; }
    .directory-heading > small { display: block; margin-top: 5px; }
    .neighborhood-chip-grid { grid-template-columns: 1fr 1fr; }
    .service-card { min-height: 0; }
    .report-promo-section { padding-bottom: 70px; }
    .report-promo-card { grid-template-columns: 1fr; padding: 28px 24px; }
    .report-promo-icon { width: 58px; height: 58px; }
    .report-button { width: 100%; }
    #bebninePublicMap { height: 420px; }
    .map-info-panel { display: block; }
    .map-privacy-note { margin-top: 22px; }
    .payment-cta-card { grid-template-columns: 1fr; padding: 32px 25px; }
    .footer-grid { grid-template-columns: 1fr; gap: 35px; }
    .footer-brand-block { grid-column: auto; }
    .footer-bottom { padding: 16px 0; flex-direction: column; align-items: flex-start; }
    .portal-page-hero { padding-top: 45px; }
    .payment-page { padding-top: 30px; }
    .lookup-card { padding: 22px 18px; }
    .form-grid { grid-template-columns: 1fr; }
    .result-detail-grid { grid-template-columns: 1fr; }
    .result-detail:nth-child(even) { padding-inline-start: 0; }
    .resident-line { flex-direction: column; gap: 3px; }
    .report-page { padding-top: 28px; }
    .report-form-card { padding: 22px 16px; }
    .report-category-grid, .report-fields-grid { grid-template-columns: 1fr; }
    .report-category-content { min-height: 96px; }
    .photo-previews { grid-template-columns: repeat(3, 1fr); }
    .location-box, .report-submit-area { align-items: stretch; flex-direction: column; }
    .location-button { width: 100%; }
    .report-submit-button { width: 100%; }
    .report-guidance { grid-template-columns: 1fr; }
    .report-success { min-height: 300px; flex-direction: column; text-align: center; }
    .terms-page { padding-top: 32px; }
    .terms-content { padding: 4px 20px 24px; }
    .terms-content .terms-warning { margin-inline: -8px; }
    .receipt-lookup { grid-template-columns: 1fr; padding: 21px 17px; }
    .receipt-search-row { flex-direction: column; }
    .official-receipt-header { grid-template-columns: 1fr; padding: 23px 20px; text-align: center; }
    .receipt-municipality { justify-content: center; }
    .verified-seal { justify-self: center; }
    .receipt-identity-grid, .receipt-data-grid { grid-template-columns: 1fr; }
    .receipt-identity-grid > div:nth-child(odd), .receipt-data-grid > div:nth-child(odd) { border-inline-end: 0; }
    .receipt-identity-grid > div:nth-last-child(2), .receipt-data-grid > div:nth-last-child(2) { border-bottom: 1px solid #e6eeec; }
    .receipt-section { padding-inline: 18px; }
    .receipt-approval { grid-template-columns: 1fr; margin-inline: 18px; padding: 20px; }
    .receipt-qr { padding: 18px 0 0; border-inline-start: 0; border-top: 1px solid #d8e6e3; }
    .official-receipt-footer { padding-inline: 18px; }
    .whish-page-hero { padding:45px 0; }
    .whish-brand-pill { align-items:flex-start; flex-direction:column; }
    .whish-form-card,.whish-status-card { padding:23px 16px; }
    .whish-fields-grid,.whish-status-details { grid-template-columns:1fr; }
    .whish-fields-grid .full-row { grid-column:auto; }
    .whish-location-box,.whish-status-actions { align-items:stretch; flex-direction:column; }
    .whish-status-details div:nth-child(odd) { border-inline-end:0; }
    .whish-status-details div:nth-last-child(2) { border-bottom:1px solid #ebe7ee; }
    .payment-cta-actions { justify-content:stretch; }
    .payment-cta-actions .public-button { width:100%; }
}