html, body { width: 100%; max-width: 100%; overflow-x: hidden !important; }
.impact-detail-breadcrumb { width: 100%; min-height: 5rem; display: flex; align-items: center; border-top: 1px solid #edf0f2; border-bottom: 1px solid #edf0f2; background: #fff; color: #a0a7ae; }
.impact-detail-breadcrumb-inner { width: min(calc(100% - 2rem), 70rem); min-width: 0; margin: 0 auto; display: flex; align-items: center; gap: 0.75rem; overflow: hidden; white-space: nowrap; font-size: 0.88rem; }
.impact-detail-breadcrumb a { flex: 0 0 auto; color: #606870; text-decoration: none; } .impact-detail-breadcrumb a:hover { color: #2f7656; } .impact-detail-breadcrumb .current { min-width: 0; overflow: hidden; color: #adb4bb; text-overflow: ellipsis; }
.impact-detail-steps { width: 14rem; min-height: 4.8rem; margin: 0 auto 2.75rem; padding-top: 1.25rem; display: flex; direction: rtl; align-items: flex-start; justify-content: center; }
.impact-detail-step { flex: 0 0 4rem; display: flex; flex-direction: column; align-items: center; color: #b6bdc4; }
.impact-detail-step-dot { width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #d6dce1; border-radius: 50%; background: #f6f7f8; font-size: 1.15rem; font-weight: 700; line-height: 1; } .impact-detail-step-label { margin-top: 0.4rem; font-size: 0.88rem; line-height: 1.2; }
.impact-detail-step.is-current { color: #22272b; } .impact-detail-step.is-current .impact-detail-step-dot { border-color: #25825c; background: #fff; color: #25825c; } .impact-detail-step-line { flex: 0 0 5.5rem; height: 2px; margin-top: 1.35rem; background: #d6dce1; }
.impact-detail-page { width: 100vw; max-width: 100vw; min-height: 75vh; padding: 0 1rem 5rem; overflow-x: hidden; box-sizing: border-box; background: #f6f7f8; color: #151719; } .impact-detail-page *, .impact-detail-page *::before, .impact-detail-page *::after { box-sizing: border-box; } .impact-detail-shell { width: min(100%, 70rem); min-width: 0; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(21rem, 0.82fr); gap: 1.5rem; align-items: start; } .impact-project-card, .impact-payment-card { width: 100%; min-width: 0; max-width: 100%; background: #fff; border: 1px solid #e1e5e8; border-radius: 0.35rem; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03); overflow: hidden; }
.impact-payment-failure { width: min(calc(100% - 2rem), 70rem); margin: 0 auto 1rem; padding: 0.85rem 1rem; display: flex; align-items: center; gap: 0.55rem; border: 1px solid #efc66b; border-radius: 0.35rem; background: #fff8e7; color: #6f4b08; font-size: 0.9rem; line-height: 1.6; }
.impact-detail-media { position: relative; height: 13rem; overflow: hidden; background: #17426f; } .impact-detail-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .impact-detail-bg-fallback { background: #17426f; } .impact-detail-overlay { display: none; }
.impact-project-content { padding: 1.65rem 2rem 2rem; direction: rtl; } .impact-project-heading { display: flex; direction: ltr; align-items: flex-start; gap: 1rem; margin-bottom: 1.35rem; } .impact-project-heading > div { flex: 1; direction: rtl; text-align: right; } .impact-project-heading h1 { margin: 0; color: #111; font-size: 1.45rem; line-height: 1.35; font-weight: 800; letter-spacing: 0; } .impact-project-heading p { margin: 0.35rem 0 0; color: #2f7656; font-size: 0.95rem; font-weight: 700; } .impact-opportunity-code { margin: 0.6rem 0 0; color: #111; font-size: 0.9rem; line-height: 1.5; font-weight: 500; } .impact-opportunity-code span { color: #111; } .impact-opportunity-code strong { font-weight: 800; letter-spacing: 0; } .impact-detail-share { flex: 0 0 2rem; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; color: #2f8b68; background: #edf7f3; cursor: pointer; } .impact-project-description { direction: rtl; text-align: right; color: #4e5358; font-size: 1rem; line-height: 1.9; overflow-wrap: anywhere; } .impact-project-description p { margin: 0 0 0.85rem; } .impact-project-description ul, .impact-project-description ol { margin: 0.5rem 0 1rem; padding-right: 1.25rem; } .impact-detail-target { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #e8eaec; display: flex; align-items: center; justify-content: space-between; color: #5e646a; } .impact-detail-target strong { display: inline-flex; direction: ltr; align-items: center; gap: 0.35rem; color: #111; font-size: 1.05rem; } .impact-detail-target img { width: 0.8rem; height: 0.95rem; }
.impact-payment-card { position: sticky; top: 1.5rem; padding: 1.5rem; direction: rtl; } .impact-payment-card header h2 { margin: 0; color: #2f7656; font-size: 1.3rem; line-height: 1.3; font-weight: 800; letter-spacing: 0; } .impact-payment-card header p { margin: 1rem 0 0.65rem; color: #202326; font-size: 0.92rem; font-weight: 700; }
.impact-payment-amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; } .impact-pay-amount { min-height: 2.35rem; display: inline-flex; direction: ltr; align-items: center; justify-content: center; gap: 0.3rem; border: 1px solid #cfd4d8; border-radius: 0.25rem; background: #fff; color: #111; font-size: 0.92rem; font-weight: 800; cursor: pointer; } .impact-pay-amount img, .impact-custom-amount img { width: 0.72rem; height: 0.85rem; object-fit: contain; } .impact-pay-amount.selected { color: #fff; border-color: #2f7656; background: #2f7656; } .impact-pay-amount.selected img { filter: brightness(0) invert(1); } .impact-custom-amount { display: block; margin-top: 0.85rem; } .impact-custom-amount > span { display: block; margin-bottom: 0.4rem; color: #4f555b; font-size: 0.82rem; } .impact-custom-amount > div { position: relative; } .impact-custom-amount input { width: 100%; height: 2.45rem; padding: 0.45rem 0.75rem 0.45rem 2.2rem; border: 1px solid #cfd4d8; border-radius: 0.25rem; background: #fff; color: #111; text-align: right; outline: none; } .impact-custom-amount input:focus { border-color: #2f7656; box-shadow: 0 0 0 2px rgba(47, 118, 86, 0.12); } .impact-custom-amount img { position: absolute; top: 50%; left: 0.8rem; transform: translateY(-50%); }
.impact-payment-summary { margin: 1rem 0; padding: 0.8rem 0; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #eceeef; border-bottom: 1px solid #eceeef; color: #666d73; font-size: 0.82rem; } .impact-payment-summary strong { display: inline-flex; direction: ltr; align-items: center; gap: 0.3rem; color: #111; font-size: 0.95rem; } .impact-payment-summary img { width: 0.72rem; height: 0.85rem; } .impact-pay-submit { width: 100%; min-height: 2.65rem; border: 0; border-radius: 0.25rem; background: #2f7656; color: #fff; font-size: 1rem; font-weight: 800; cursor: pointer; } .impact-pay-submit:hover { background: #28684b; } .impact-pay-submit:disabled { opacity: 0.58; cursor: wait; } .impact-pay-status { min-height: 1.25rem; margin: 0.45rem 0 0; color: #b42318; text-align: center; font-size: 0.8rem; }
.impact-payment-methods { margin-top: 1.2rem; text-align: center; } .impact-payment-methods > img { display: block; width: min(100%, 21rem); height: 4rem; margin: 0 auto 0.45rem; object-fit: contain; } .impact-payment-methods small { color: #737a80; font-size: 0.72rem; } .impact-back-link { display: block; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid #eceeef; color: #8a9299; text-align: center; text-decoration: none; font-size: 0.82rem; font-weight: 700; } .impact-back-link:hover { color: #2f7656; }
@media (max-width: 56rem) { .impact-detail-page { padding-top: 1.5rem; } .impact-detail-shell { grid-template-columns: 1fr; max-width: 42rem; } .impact-payment-card { position: static; } } @media (max-width: 34rem) { .impact-detail-page { padding: 0 0 3rem; } .impact-detail-shell { gap: 0.8rem; } .impact-project-card, .impact-payment-card { border-radius: 0; border-right: 0; border-left: 0; } .impact-detail-media { height: 10.5rem; } .impact-project-content { padding: 1.25rem 1rem 1.5rem; } .impact-project-heading h1 { font-size: 1.25rem; } .impact-payment-card { padding: 1.25rem 1rem; } .impact-payment-amounts { gap: 0.35rem; } }